From 4d795da488bf2251f01288c81f964bed329c0f78 Mon Sep 17 00:00:00 2001
From: Davide Tantillo <iamdjj@gmail.com>
Date: Fri, 20 Dec 2024 15:18:10 +0100
Subject: [PATCH] Add interactivity events.

---
 .../example/webcomponent-tutorial.html        | 292 ++++++++++--------
 .../src/SpineWebComponentWidget.ts            |  71 +++--
 2 files changed, 199 insertions(+), 164 deletions(-)

diff --git a/spine-ts/spine-webgl/example/webcomponent-tutorial.html b/spine-ts/spine-webgl/example/webcomponent-tutorial.html
index d0bd8fa9a..6b0796ea1 100644
--- a/spine-ts/spine-webgl/example/webcomponent-tutorial.html
+++ b/spine-ts/spine-webgl/example/webcomponent-tutorial.html
@@ -2378,13 +2378,14 @@ function createCircleOfDivs(numDivs = 8) {
         customElements.whenDefined('spine-widget').then(async () => {
             const widget = spine.getSpineWidget(\`owl\${i}\`);
             await widget.loadingPromise;
-            widget.state.setAnimation(1, "blink", true)
+            widget.state.setAnimation(1, "blink", true);
 
             const control = widget.skeleton.findBone("control");
             const tempVector = new spine.Vector3();
-            const mouse = Ola({ x: 0, y: 0 }, 200);
+            const mouseX = Smooth(0, 200);
+            const mouseY = Smooth(0, 200);
             widget.afterUpdateWorldTransforms = () => {
-                updateControl(widget, control, mouse, tempVector);
+                updateControl(widget, control, mouseX, mouseY, tempVector);
             }
         });
 
@@ -2401,7 +2402,7 @@ const checkbox = document.getElementById('owl-checkbox');
 let limitOwl = true;
 checkbox.addEventListener('change', () => limitOwl = checkbox.checked);
 
-const updateControl = (widget, controlBone, mouse, tempVector) => {
+const updateControl = (widget, controlBone, mouseX, mouseY, tempVector) => {
     controlBone.parent.worldToLocal(tempVector.set(
         widget.cursorWorldX,
         widget.cursorWorldY,
@@ -2415,10 +2416,8 @@ const updateControl = (widget, controlBone, mouse, tempVector) => {
         y = y / widget.overlay.canvas.height * 30;
     }
 
-    mouse.set({ x, y });
-
-    controlBone.x = controlBone.data.x + mouse.x;
-    controlBone.y = controlBone.data.y + mouse.y;
+    controlBone.x = controlBone.data.x + mouseX(x);
+    controlBone.y = controlBone.data.y + mouseY(y);
 }
 `
 );</script>
@@ -2429,99 +2428,98 @@ const updateControl = (widget, controlBone, mouse, tempVector) => {
     </div>
 
     <script>
-        function createCircleOfDivs(numDivs = 8) {
-            const container = document.createElement('div');
-            container.style.position = 'relative';
-            container.style.width = '400px';
-            container.style.height = '400px';
-            container.style.backgroundColor = '#f3f4f6';
-            container.style.borderRadius = '50%';
-            container.style.display = 'flex';
-            container.style.justifyContent = 'center';
-            container.style.alignItems = 'center';
+function createCircleOfDivs(numDivs = 8) {
+    const container = document.createElement('div');
+    container.style.position = 'relative';
+    container.style.width = '400px';
+    container.style.height = '400px';
+    container.style.backgroundColor = '#f3f4f6';
+    container.style.borderRadius = '50%';
+    container.style.display = 'flex';
+    container.style.justifyContent = 'center';
+    container.style.alignItems = 'center';
 
-            const radius = 150;
+    const radius = 150;
 
-            for (let i = 0; i < numDivs; i++) {
-                const angle = (i / numDivs) * 2 * Math.PI;
-                const x = Math.cos(angle) * radius;
-                const y = Math.sin(angle) * radius;
+    for (let i = 0; i < numDivs; i++) {
+        const angle = (i / numDivs) * 2 * Math.PI;
+        const x = Math.cos(angle) * radius;
+        const y = Math.sin(angle) * radius;
 
-                const div = document.createElement('div');
-                div.style.position = 'absolute';
-                div.style.width = '100px';
-                div.style.height = '100px';
-                div.style.backgroundColor = '#3b82f6';
-                div.style.borderRadius = '8px';
-                div.style.display = 'flex';
-                div.style.justifyContent = 'center';
-                div.style.alignItems = 'center';
-                div.style.color = 'white';
-                div.style.fontWeight = 'bold';
-                div.style.transform = `translate(${x}px, ${y}px)`;
-                div.innerHTML = `
-                    <spine-widget
-                        identifier="owl${i}"
-                        atlas="../demos/assets/atlas2.atlas"
-                        skeleton="../demos/assets/demos.json"
-                        json-skeleton-key="owl"
-                        animation="idle"
-                        isdraggable
-                    ></spine-widget>
-                `;
+        const div = document.createElement('div');
+        div.style.position = 'absolute';
+        div.style.width = '100px';
+        div.style.height = '100px';
+        div.style.backgroundColor = '#3b82f6';
+        div.style.borderRadius = '8px';
+        div.style.display = 'flex';
+        div.style.justifyContent = 'center';
+        div.style.alignItems = 'center';
+        div.style.color = 'white';
+        div.style.fontWeight = 'bold';
+        div.style.transform = `translate(${x}px, ${y}px)`;
+        div.innerHTML = `
+            <spine-widget
+                identifier="owl${i}"
+                atlas="../demos/assets/atlas2.atlas"
+                skeleton="../demos/assets/demos.json"
+                json-skeleton-key="owl"
+                animation="idle"
+                isdraggable
+            ></spine-widget>
+        `;
 
-                container.appendChild(div);
-
-                customElements.whenDefined('spine-widget').then(async () => {
-                    const widget = spine.getSpineWidget(`owl${i}`);
-                    await widget.loadingPromise;
-                    widget.state.setAnimation(1, "blink", true);
-
-                    const control = widget.skeleton.findBone("control");
-                    const tempVector = new spine.Vector3();
-                    const mouse = Ola({ x: 0, y: 0 }, 200);
-                    widget.afterUpdateWorldTransforms = () => {
-                        updateControl(widget, control, mouse, tempVector);
-                    }
-                });
+        container.appendChild(div);
 
+        customElements.whenDefined('spine-widget').then(async () => {
+            const widget = spine.getSpineWidget(`owl${i}`);
+            await widget.loadingPromise;
+            widget.state.setAnimation(1, "blink", true);
 
+            const control = widget.skeleton.findBone("control");
+            const tempVector = new spine.Vector3();
+            const mouseX = Smooth(0, 200);
+            const mouseY = Smooth(0, 200);
+            widget.afterUpdateWorldTransforms = () => {
+                updateControl(widget, control, mouseX, mouseY, tempVector);
             }
+        });
 
-            return container;
-        }
 
-        document.getElementById('section-owls').appendChild(createCircleOfDivs(8));
+    }
 
-        const checkbox = document.getElementById('owl-checkbox');
+    return container;
+}
 
-        let limitOwl = true;
-        checkbox.addEventListener('change', () => limitOwl = checkbox.checked);
+document.getElementById('section-owls').appendChild(createCircleOfDivs(8));
 
-        const updateControl = (widget, controlBone, mouse, tempVector) => {
-            controlBone.parent.worldToLocal(tempVector.set(
-                widget.cursorWorldX,
-                widget.cursorWorldY,
-            ));
+const checkbox = document.getElementById('owl-checkbox');
 
-            let x = tempVector.x;
-            let y = tempVector.y;
+let limitOwl = true;
+checkbox.addEventListener('change', () => limitOwl = checkbox.checked);
 
-            if (limitOwl) {
-                x = x / widget.overlay.canvas.width * 30;
-                y = y / widget.overlay.canvas.height * 30;
-            }
+const updateControl = (widget, controlBone, mouseX, mouseY, tempVector) => {
+    controlBone.parent.worldToLocal(tempVector.set(
+        widget.cursorWorldX,
+        widget.cursorWorldY,
+    ));
 
-            mouse.set({ x, y });
+    let x = tempVector.x;
+    let y = tempVector.y;
 
-            controlBone.x = controlBone.data.x + mouse.x;
-            controlBone.y = controlBone.data.y + mouse.y;
-        }
+    if (limitOwl) {
+        x = x / widget.overlay.canvas.width * 30;
+        y = y / widget.overlay.canvas.height * 30;
+    }
+
+    controlBone.x = controlBone.data.x + mouseX(x);
+    controlBone.y = controlBone.data.y + mouseY(y);
+}
     </script>
 
 
     <script>
-        (function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?module.exports=factory():typeof define==="function"&&define.amd?define(factory):(global=global||self,global.Ola=factory())})(this,function(){"use strict";const position=(x0,v0,t1,t)=>{const a=(v0*t1+2*x0)/t1**3;const b=-(2*v0*t1+3*x0)/t1**2;const c=v0;const d=x0;return a*t**3+b*t**2+c*t+d};const speed=(x0,v0,t1,t)=>{const a=(v0*t1+2*x0)/t1**3;const b=-(2*v0*t1+3*x0)/t1**2;const c=v0;return 3*a*t**2+2*b*t+c};const each=function(values,cb){const multi=typeof values==="number"?{value:values}:values;Object.entries(multi).map(([key,value])=>cb(value,key))};function Single(init,time){this.start=new Date/1e3;this.time=time;this.from=init;this.current=init;this.to=init;this.speed=0}Single.prototype.get=function(now){const t=now/1e3-this.start;if(t<0){throw new Error("Cannot read in the past")}if(t>=this.time){return this.to}return this.to-position(this.to-this.from,this.speed,this.time,t)};Single.prototype.getSpeed=function(now){const t=now/1e3-this.start;if(t>=this.time){return 0}return speed(this.to-this.from,this.speed,this.time,t)};Single.prototype.set=function(value,time){const now=new Date;const current=this.get(now);this.speed=this.getSpeed(now);this.start=now/1e3;this.from=current;this.to=value;if(time){this.time=time}return current};function Ola(values,time=300){if(typeof values==="number"){values={value:values}}each(values,(init,key)=>{const value=new Single(init,time/1e3);Object.defineProperty(values,"_"+key,{value:value});Object.defineProperty(values,"$"+key,{get:()=>value.to});Object.defineProperty(values,key,{get:()=>value.get(new Date),set:val=>value.set(val),enumerable:true})});Object.defineProperty(values,"get",{get:()=>(function(name="value",now=new Date){return this["_"+name].get(now)})});Object.defineProperty(values,"set",{get:()=>(function(values,time=0){each(values,(value,key)=>{this["_"+key].set(value,time/1e3)})})});return values}return Ola});
+        function Smooth(f,t){var p=performance,b=p.now(),o=f,s=0,m,n,x,d,k=f;return function(v){n=p.now()-b;m=t*t/n/n;d=o-f;x=s*t+d+d;if(n>0)k=n<t?o-x/m/t*n+(x+x-d)/m-s*n-d:o;if(v!=void 0&&v!=o){f=k;b+=n;o=v;s=n>0&&n<t?s+3*x/m/t-(4*x-d-d)/m/n:0}return k}}
     </script>
 
     <!--
@@ -2538,71 +2536,58 @@ const updateControl = (widget, controlBone, mouse, tempVector) => {
 
     <div class="section vertical-split" id="above-popup">
 
-        <div class="split-top split">
-            <div class="split-left">
-                You can attach callback to your widget to react at pointer interactions. Just make it <code>isinteractive</code>.
-                <br>
-                <br>
-                You can attach a callback for interactions with the widget <code>bounds</code> or with <code>slots</code>.
-                The available events are <code>down</code>, <code>up</code>, <code>enter</code>, <code>leave</code>, <code>move</code>, and <code>drag</code>.
-                <br>
-                <br>
-                In the following example, if the cursor enters the bounds, the jump animation is set, while the wave animation is set when the cursor leaves.
-                <br>
-                If you click on the <code>head-base</code> slot (the face), you can change the normal and dark tint with the colors selected in the two following selectors.
+        <div class="split-left" style="width: 80%; box-sizing: border-box;">
+            You can attach callback to your widget to react at pointer interactions. Just make it <code>isinteractive</code>.
+            <br>
+            <br>
+            You can attach a callback for interactions with the widget <code>bounds</code> or with <code>slots</code>.
+            The available events are <code>down</code>, <code>up</code>, <code>enter</code>, <code>leave</code>, <code>move</code>, and <code>drag</code>.
+            <br>
+            <br>
+            In the following example, if the cursor enters the bounds, the jump animation is set, while the wave animation is set when the cursor leaves.
+            <br>
+            If you click on the <code>head-base</code> slot (the face), you can change the normal and dark tint with the colors selected in the two following selectors.
 
-                <ul>
-                    <li>Tint normal: <input type="color" id="color-picker" value="#ffffff" /></li>
-                    <li>Tint black: <input type="color" id="dark-picker" value="#000000" /></li>
-                </ul>
+            <div style="display: flex; align-items: center; justify-content: space-around">
+                <div>
+                    <p>
+                        Tint normal: <input type="color" id="color-picker" value="#ffffff" />
+                    </p>
+
+                    <p>
+                        Tint black: <input type="color" id="dark-picker" value="#000000" />
+                    </p>
+                </div>
 
-            </div>
-            <div class="split-right">
                 <spine-widget
-                    identifier="interactive"
+                    identifier="interactive0"
                     atlas="assets/chibi-stickers-pma.atlas",
                     skeleton="assets/chibi-stickers.json",
                     skin="mario"
                     animation="emotes/wave"
-                    pad-top="0.05"
-                    pad-bottom="0.05"
                     isinteractive
+                    style="width: 150px; height: 150px;"
                 ></spine-widget>
 
-                <script>
-                    (async () => {
-                        const colorPicker = document.getElementById("color-picker");
-                        const darkPicker = document.getElementById("dark-picker");
+                <spine-widget
+                    identifier="interactive1"
+                    atlas="assets/chibi-stickers-pma.atlas",
+                    skeleton="assets/chibi-stickers.json",
+                    skin="nate"
+                    animation="emotes/wave"
+                    isinteractive
+                    style="width: 150px; height: 150px;"
+                ></spine-widget>
 
-                        const widget = await spine.getSpineWidget("interactive").loadingPromise;
-
-                        widget.cursorBoundsEventCallback = (event) => {
-                            if (event === "enter") widget.state.setAnimation(0, "emotes/hooray", true).mixDuration = .15;
-                            if (event === "leave") widget.state.setAnimation(0, "emotes/wave", true).mixDuration = .25;
-                        }
-
-                        const tempColor = new spine.Color();
-                        const slot = widget.skeleton.findSlot("head-base");
-                        slot.darkColor = new spine.Color(0, 0, 0, 1);
-                        widget.addCursorSlotEventCallbacks(slot, (slot, event) => {
-                            if (event === "down") {
-                                slot.darkColor.setFromColor(spine.Color.fromString(darkPicker.value, tempColor));
-                                slot.color.setFromColor(spine.Color.fromString(colorPicker.value, tempColor));
-                            }
-                        });
-                    })();
-                </script>
             </div>
         </div>
 
-        <div class="split-bottom">
-            <pre><code id="code-display">
-                <script>escapeHTMLandInject(`
-(async () => {
-    const colorPicker = document.getElementById("color-picker");
-    const darkPicker = document.getElementById("dark-picker");
+        <script>
+const colorPicker = document.getElementById("color-picker");
+const darkPicker = document.getElementById("dark-picker");
 
-    const widget = await spine.getSpineWidget("interactive").loadingPromise;
+[0, 1].forEach(async (i) => {
+    const widget = await spine.getSpineWidget(`interactive${i}`).loadingPromise;
 
     widget.cursorBoundsEventCallback = (event) => {
         if (event === "enter") widget.state.setAnimation(0, "emotes/hooray", true).mixDuration = .15;
@@ -2618,7 +2603,50 @@ const updateControl = (widget, controlBone, mouse, tempVector) => {
             slot.color.setFromColor(spine.Color.fromString(colorPicker.value, tempColor));
         }
     });
-})();`
+})
+        </script>
+
+        <div class="split-bottom">
+            <pre><code id="code-display">
+                <script>escapeHTMLandInject(`
+<spine-widget
+    identifier="interactive0"
+    atlas="assets/chibi-stickers-pma.atlas",
+    skeleton="assets/chibi-stickers.json",
+    skin="mario"
+    animation="emotes/wave"
+    isinteractive
+    style="width: 150px; height: 150px;"
+></spine-widget>
+
+<spine-widget
+    identifier="interactive1"
+    atlas="assets/chibi-stickers-pma.atlas",
+    skeleton="assets/chibi-stickers.json",
+    skin="nate"
+    animation="emotes/wave"
+    isinteractive
+    style="width: 150px; height: 150px;"
+></spine-widget>
+
+[0, 1].forEach(async (i) => {
+    const widget = await spine.getSpineWidget(\`interactive\${i}\`).loadingPromise;
+
+    widget.cursorBoundsEventCallback = (event) => {
+        if (event === "enter") widget.state.setAnimation(0, "emotes/hooray", true).mixDuration = .15;
+        if (event === "leave") widget.state.setAnimation(0, "emotes/wave", true).mixDuration = .25;
+    }
+
+    const tempColor = new spine.Color();
+    const slot = widget.skeleton.findSlot("head-base");
+    slot.darkColor = new spine.Color(0, 0, 0, 1);
+    widget.addCursorSlotEventCallbacks(slot, (slot, event) => {
+        if (event === "down") {
+            slot.darkColor.setFromColor(spine.Color.fromString(darkPicker.value, tempColor));
+            slot.color.setFromColor(spine.Color.fromString(colorPicker.value, tempColor));
+        }
+    });
+})`
 );</script>
             </code></pre>
         </div>
diff --git a/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts b/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
index af6a10979..069719c7a 100644
--- a/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
+++ b/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
@@ -983,7 +983,10 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
 		}
 	}
 
-	private checkCursorInsideBounds (): boolean {
+	/**
+	 * @internal
+	 */
+	public checkCursorInsideBounds (): boolean {
 		if (!this.onScreen || !this.skeleton) return false;
 
 		this.pointTemp.set(
@@ -1681,11 +1684,39 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
 	public cursorWorldX = 1;
 	public cursorWorldY = 1;
 
+	private tempVector = new Vector3();
+	private cursorUpdate (input: Point) {
+		this.cursorCanvasX = input.x - window.scrollX;
+		this.cursorCanvasY = input.y - window.scrollY;
+
+		const ref = this.parentElement!.getBoundingClientRect();
+		if (this.scrollable) {
+			this.cursorCanvasX -= ref.left;
+			this.cursorCanvasY -= ref.top;
+		}
+
+		let tempVector = this.tempVector;
+		tempVector.set(this.cursorCanvasX, this.cursorCanvasY, 0);
+		this.renderer.camera.screenToWorld(tempVector, this.canvas.clientWidth, this.canvas.clientHeight);
+
+		if (Number.isNaN(tempVector.x) || Number.isNaN(tempVector.y)) return;
+		this.cursorWorldX = tempVector.x;
+		this.cursorWorldY = tempVector.y;
+	}
+
+	private cursorWidgetUpdate (widget: SpineWebComponentWidget): boolean {
+		if (widget.worldX === Infinity) return false;
+
+		widget.cursorWorldX = this.cursorWorldX - widget.worldX;
+		widget.cursorWorldY = this.cursorWorldY - widget.worldY;
+
+		return true;
+	}
+
 	private setupDragUtility (): Input {
 		// TODO: we should use document - body might have some margin that offset the click events - Meanwhile I take event pageX/Y
 		const inputManager = new Input(document.body, false)
 		const inputPointTemp: Point = new Vector2();
-		const tempVector = new Vector3();
 
 		const getInput = (ev?: MouseEvent | TouchEvent): Point => {
 			const originalEvent = ev instanceof MouseEvent ? ev : ev!.changedTouches[0];
@@ -1694,38 +1725,16 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
 			return inputPointTemp;
 		}
 
-		const cursorUpdate = (input: Point) => {
-			this.cursorCanvasX = input.x - window.scrollX;
-			this.cursorCanvasY = input.y - window.scrollY;
-
-			const ref = this.parentElement!.getBoundingClientRect();
-			if (this.scrollable) {
-				this.cursorCanvasX -= ref.left;
-				this.cursorCanvasY -= ref.top;
-			}
-
-			tempVector.set(this.cursorCanvasX, this.cursorCanvasY, 0);
-			this.renderer.camera.screenToWorld(tempVector, this.canvas.clientWidth, this.canvas.clientHeight);
-
-			if (Number.isNaN(tempVector.x) || Number.isNaN(tempVector.y)) return;
-			this.cursorWorldX = tempVector.x;
-			this.cursorWorldY = tempVector.y;
-		}
-
 		let prevX = 0;
 		let prevY = 0;
 		inputManager.addListener({
 			// moved is used to pass curson position wrt to canvas and widget position and currently is EXPERIMENTAL
 			moved: (x, y, ev) => {
 				const input = getInput(ev);
-				cursorUpdate(input);
+				this.cursorUpdate(input);
 
 				this.skeletonList.forEach(widget => {
-
-					widget.cursorWorldX = this.cursorWorldX - widget.worldX;
-					widget.cursorWorldY = this.cursorWorldY - widget.worldY;
-
-					if (!widget.onScreen) return;
+					if (!this.cursorWidgetUpdate(widget) || !widget.onScreen) return;
 
 					widget.cursorEventUpdate("move");
 				});
@@ -1737,12 +1746,13 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
 
 					widget.cursorEventUpdate("down");
 
-					if (widget.cursorInsideBounds) {
+					if ((widget.isInteractive && widget.cursorInsideBounds) || (!widget.isInteractive && widget.checkCursorInsideBounds())) {
 
 						if (!widget.isDraggable) return;
 
 						widget.dragging = true;
 						ev?.preventDefault();
+
 					}
 
 				});
@@ -1755,13 +1765,10 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
 				let dragX = input.x - prevX;
 				let dragY = input.y - prevY;
 
-				cursorUpdate(input);
+				this.cursorUpdate(input);
 
 				this.skeletonList.forEach(widget => {
-					widget.cursorWorldX = this.cursorWorldX - widget.worldX;
-					widget.cursorWorldY = this.cursorWorldY - widget.worldY;
-
-					if (!widget.onScreen && widget.dragX === 0 && widget.dragY === 0) return;
+					if (!this.cursorWidgetUpdate(widget) || !widget.onScreen && widget.dragX === 0 && widget.dragY === 0) return;
 
 					widget.cursorEventUpdate("drag");