Widgets dragged can be dragged even if host is offscreen.

This commit is contained in:
Davide Tantillo 2025-05-08 15:12:32 +02:00
parent 228d49ff05
commit 70cc7e45ca

View File

@ -1247,7 +1247,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
* @internal * @internal
*/ */
public isCursorInsideBounds (): boolean { public isCursorInsideBounds (): boolean {
if (!this.onScreen || !this.skeleton) return false; if (this.isOffScreenAndWasMoved() || !this.skeleton) return false;
this.pointTemp.set( this.pointTemp.set(
this.cursorWorldX / this.skeleton.scaleX, this.cursorWorldX / this.skeleton.scaleX,
@ -1367,6 +1367,10 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
} }
} }
public isOffScreenAndWasMoved (): boolean {
return !this.onScreen && this.dragX === 0 && this.dragY === 0;
}
private calculateAnimationViewport (animation?: Animation): Rectangle { private calculateAnimationViewport (animation?: Animation): Rectangle {
const renderer = this.overlay.renderer; const renderer = this.overlay.renderer;
const { skeleton } = this; const { skeleton } = this;
@ -1864,7 +1868,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
for (const widget of this.widgets) { for (const widget of this.widgets) {
const { skeleton, pma, bounds, mode, debug, offsetX, offsetY, xAxis, yAxis, dragX, dragY, fit, noSpinner, onScreen, loading, clip, isDraggable } = widget; const { skeleton, pma, bounds, mode, debug, offsetX, offsetY, xAxis, yAxis, dragX, dragY, fit, noSpinner, onScreen, loading, clip, isDraggable } = widget;
if ((!onScreen && dragX === 0 && dragY === 0)) continue; if (widget.isOffScreenAndWasMoved()) continue;
const elementRef = widget.getHostElement(); const elementRef = widget.getHostElement();
const divBounds = elementRef.getBoundingClientRect(); const divBounds = elementRef.getBoundingClientRect();
// need to use left and top, because x and y are not available on older browser // need to use left and top, because x and y are not available on older browser
@ -2029,10 +2033,12 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
} }
const updateBoneFollowers = () => { const updateBoneFollowers = () => {
for (const { skeleton, onScreen, boneFollowerList, worldX, worldY } of this.widgets) { for (const widget of this.widgets) {
if (skeleton && onScreen) { if (widget.isOffScreenAndWasMoved() || !widget.skeleton) continue;
for (const { slot, bone, element, followAttachmentAttach, followRotation, followOpacity, followScale } of boneFollowerList) {
for (const boneFollower of widget.boneFollowerList) {
const { slot, bone, element, followAttachmentAttach, followRotation, followOpacity, followScale } = boneFollower;
const { worldX, worldY } = widget;
this.worldToScreen(this.tempFollowBoneVector, bone.worldX + worldX, bone.worldY + worldY); this.worldToScreen(this.tempFollowBoneVector, bone.worldX + worldX, bone.worldY + worldY);
if (Number.isNaN(this.tempFollowBoneVector.x)) continue; if (Number.isNaN(this.tempFollowBoneVector.x)) continue;
@ -2061,7 +2067,6 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
} }
} }
} }
}
const loop = () => { const loop = () => {
if (this.disposed || !this.isConnected) { if (this.disposed || !this.isConnected) {
@ -2153,7 +2158,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
this.updateCursor(input); this.updateCursor(input);
for (const widget of this.widgets) { for (const widget of this.widgets) {
if (!this.updateWidgetCursor(widget) || !widget.onScreen && widget.dragX === 0 && widget.dragY === 0) continue; if (!this.updateWidgetCursor(widget) || widget.isOffScreenAndWasMoved()) continue;
widget.cursorEventUpdate("down", ev); widget.cursorEventUpdate("down", ev);
@ -2162,7 +2167,6 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
widget.dragging = true; widget.dragging = true;
ev?.preventDefault(); ev?.preventDefault();
} }
} }
@ -2178,7 +2182,7 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
this.updateCursor(input); this.updateCursor(input);
for (const widget of this.widgets) { for (const widget of this.widgets) {
if (!this.updateWidgetCursor(widget) || !widget.onScreen && widget.dragX === 0 && widget.dragY === 0) continue; if (!this.updateWidgetCursor(widget) || widget.isOffScreenAndWasMoved()) continue;
widget.cursorEventUpdate("drag", ev); widget.cursorEventUpdate("drag", ev);
@ -2502,4 +2506,5 @@ function castValue (type: AttributeTypes, value: string | null, defaultValue?: a
default: default:
break; break;
} }
} }