Original event is passed to bounds and slot callbacks.

Author: davidetan

spine-ts/spine-webgl/example/webcomponent-tutorial.html

@@ -3223,7 +3223,7 @@
                     await widgetButton.loadingPromise;
 
                     widgetButton.skeleton.color.set(.85, .85, .85, 1);
-                    widgetButton.cursorBoundsEventCallback = (event) => {
+                    widgetButton.cursorBoundsEventCallback = (event, originalEvent) => {
                         if (event === "enter") {
                             widgetButton.state.setAnimation(0, "enhance-in", false);
                             widgetButton.state.setAnimation(1, "shadow-in", false);
@@ -3236,6 +3236,7 @@
                         };
                         if (event === "down") {
                             widgetButton.state.setAnimation(0, "enhance-in", false).timeScale = 2;
+                            originalEvent.preventDefault();
                             if (form.reportValidity()) {
                                 if (passwordInput.value === "password") {
                                     widget.state.setAnimation(0, "interactive/pwd/hooray", 0);

spine-ts/spine-webgl/src/SpineWebComponentWidget.ts

@@ -551,7 +551,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
 	 * By default, the function does nothing.
 	 * This is an experimental property and might be removed in the future.
 	 */
-	public cursorBoundsEventCallback = (event: CursorEventTypes) => {}
+	public cursorBoundsEventCallback = (event: CursorEventTypes, originalEvent?: UIEvent) => {}
 
 	/**
 	 * This methods allows to associate to a Slot a callback. For these slots, if the widget is interactive,
@@ -1105,39 +1105,39 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
 	 * @internal
 	 */
 	public cursorSlotEventCallbacks: Map<Slot, {
-		slotFunction: (slot: Slot, event: CursorEventTypes ) => void,
+		slotFunction: (slot: Slot, event: CursorEventTypes, originalEvent?: UIEvent) => void,
 		inside: boolean,
 	}> = new Map();
 
 	/**
 	 * @internal
 	 */
-	public cursorEventUpdate (type: CursorEventTypesInput) {
+	public cursorEventUpdate (type: CursorEventTypesInput, originalEvent?: UIEvent) {
 		if (!this.isInteractive) return;
 
-		this.checkBoundsInteraction(type);
-		this.checkSlotInteraction(type);
+		this.checkBoundsInteraction(type, originalEvent);
+		this.checkSlotInteraction(type, originalEvent);
 	}
 
-	private checkBoundsInteraction (type: CursorEventTypesInput) {
+	private checkBoundsInteraction (type: CursorEventTypesInput, originalEvent?: UIEvent) {
 		if ((type === "down"|| type === "up") && this.cursorInsideBounds) {
-			this.cursorBoundsEventCallback(type);
+			this.cursorBoundsEventCallback(type, originalEvent);
 			return;
 		}
 
 		if (this.checkCursorInsideBounds()) {
 
 			if (!this.cursorInsideBounds) {
-				this.cursorBoundsEventCallback("enter");
+				this.cursorBoundsEventCallback("enter", originalEvent);
 			}
 			this.cursorInsideBounds = true;
 
-			this.cursorBoundsEventCallback(type);
+			this.cursorBoundsEventCallback(type, originalEvent);
 
 		} else {
 
 			if (this.cursorInsideBounds) {
-				this.cursorBoundsEventCallback("leave");
+				this.cursorBoundsEventCallback("leave", originalEvent);
 			}
 			this.cursorInsideBounds = false;
 
@@ -1158,7 +1158,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
 		return inside(this.pointTemp, this.bounds);
 	}
 
-	private checkSlotInteraction(type: CursorEventTypesInput) {
+	private checkSlotInteraction(type: CursorEventTypesInput, originalEvent?: UIEvent) {
 		for (let [slot, interactionState] of this.cursorSlotEventCallbacks) {
 			if (!slot.bone.active) continue;
 			let attachment = slot.getAttachment();
@@ -1169,7 +1169,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
 
 			if (type === "down" || type === "up") {
 				if (inside) {
-					slotFunction(slot, type);
+					slotFunction(slot, type, originalEvent);
 				}
 				return;
 			}
@@ -1192,7 +1192,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
 
 				if (!inside) {
 					interactionState.inside = true;
-					slotFunction(slot, "enter");
+					slotFunction(slot, "enter", originalEvent);
 				}
 
 				slotFunction(slot, type);
@@ -1201,7 +1201,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
 
 				if (inside) {
 					interactionState.inside = false;
-					slotFunction(slot, "leave");
+					slotFunction(slot, "leave", originalEvent);
 				}
 
 			}
@@ -1982,18 +1982,17 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
 				this.skeletonList.forEach(widget => {
 					if (!this.cursorWidgetUpdate(widget) || !widget.onScreen) return;
 
-					widget.cursorEventUpdate("move");
+					widget.cursorEventUpdate("move", ev);
 				});
 			},
 			down: (x, y, ev) => {
 				const input = getInput(ev);
 				this.skeletonList.forEach(widget => {
 					if (!widget.onScreen && widget.dragX === 0 && widget.dragY === 0) return;
 
-					widget.cursorEventUpdate("down");
+					widget.cursorEventUpdate("down", ev);
 
 					if ((widget.isInteractive && widget.cursorInsideBounds) || (!widget.isInteractive && widget.checkCursorInsideBounds())) {
-
 						if (!widget.isDraggable) return;
 
 						widget.dragging = true;
@@ -2016,7 +2015,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
 				this.skeletonList.forEach(widget => {
 					if (!this.cursorWidgetUpdate(widget) || !widget.onScreen && widget.dragX === 0 && widget.dragY === 0) return;
 
-					widget.cursorEventUpdate("drag");
+					widget.cursorEventUpdate("drag", ev);
 
 					if (!widget.dragging) return;
 
@@ -2030,12 +2029,12 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
 				prevX = input.x;
 				prevY = input.y;
 			},
-			up: () => {
+			up: (x, y, ev) => {
 				this.skeletonList.forEach(widget => {
 					widget.dragging = false;
 
 					if (widget.cursorInsideBounds) {
-						widget.cursorEventUpdate("up");
+						widget.cursorEventUpdate("up", ev);
 					}
 				});
 			}