UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-26 22:49:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

Original event is passed to bounds and slot callbacks.

Browse Source
This commit is contained in:
Davide Tantillo 2025-01-16 12:54:51 +01:00
parent a46e76b1d7
commit 6671cac372
2 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
spine-ts/spine-webgl/example/webcomponent-tutorial.html
View File

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

39
spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
View File

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