diff --git a/spine-ts/spine-webgl/example/webcomponent-tutorial.html b/spine-ts/spine-webgl/example/webcomponent-tutorial.html index dd69b12f7..febe5f362 100644 --- a/spine-ts/spine-webgl/example/webcomponent-tutorial.html +++ b/spine-ts/spine-webgl/example/webcomponent-tutorial.html @@ -3223,7 +3223,7 @@ const darkPicker = document.getElementById("dark-picker"); 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 @@ const darkPicker = document.getElementById("dark-picker"); }; 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); diff --git a/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts b/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts index 03c24c24a..01e754146 100644 --- a/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts +++ b/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 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,7 +1982,7 @@ 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) => { @@ -1990,10 +1990,9 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes, 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); } }); }