From 2b6e1ff57894fd8becc018f8be6d9fa7d7d15c5b Mon Sep 17 00:00:00 2001
From: Davide Tantillo <iamdjj@gmail.com>
Date: Wed, 11 Dec 2024 15:41:40 +0100
Subject: [PATCH] Allow multiple widgets for the same HTMLElement

---
 .../src/SpineWebComponentWidget.ts            | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts b/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
index 1b6c0bebb..a0475c918 100644
--- a/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
+++ b/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
@@ -1149,18 +1149,19 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
 
 		this.intersectionObserver = new IntersectionObserver((widgets) => {
 			widgets.forEach(({ isIntersecting, target, intersectionRatio }) => {
-				const widget = this.skeletonList.find(w => w.getHTMLElementReference() == target);
-				if (!widget) return;
+				this.skeletonList.forEach(widget => {
+					if (widget.getHTMLElementReference() != target) return;
 
-				// old browsers do not have isIntersecting
-				if (isIntersecting === undefined) {
-					isIntersecting = intersectionRatio > 0;
-				}
+					// old browsers do not have isIntersecting
+					if (isIntersecting === undefined) {
+						isIntersecting = intersectionRatio > 0;
+					}
 
-				widget.onScreen = isIntersecting;
-				if (isIntersecting) {
-					widget.onScreenFunction(widget);
-				}
+					widget.onScreen = isIntersecting;
+					if (isIntersecting) {
+						widget.onScreenFunction(widget);
+					}
+				});
 			})
 		}, { rootMargin: "30px 20px 30px 20px" });