Original event is passed to bounds and slot callbacks.

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

View File

@ -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);

View File

@ -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,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);
}
});
}