UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-04 14:24:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

Widgets dragged can be dragged even if host is offscreen.

Browse Source
This commit is contained in:
Davide Tantillo 2025-05-08 15:12:32 +02:00
parent 228d49ff05
commit 70cc7e45ca
1 changed files with 35 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
spine-ts/spine-widget/src/SpineWebComponentWidget.ts
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,36 +2033,37 @@ 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) {
this.worldToScreen(this.tempFollowBoneVector, bone.worldX + worldX, bone.worldY + worldY); 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);
if (Number.isNaN(this.tempFollowBoneVector.x)) continue; if (Number.isNaN(this.tempFollowBoneVector.x)) continue;
let x = this.tempFollowBoneVector.x - this.overflowLeftSize; let x = this.tempFollowBoneVector.x - this.overflowLeftSize;
let y = this.tempFollowBoneVector.y - this.overflowTopSize; let y = this.tempFollowBoneVector.y - this.overflowTopSize;
if (!this.appendedToBody) {
x += window.scrollX;
y += window.scrollY;
}
element.style.transform = `translate(calc(-50% + ${x.toFixed(2)}px),calc(-50% + ${y.toFixed(2)}px))`
+ (followRotation ? ` rotate(${-bone.getWorldRotationX()}deg)` : "")
+ (followScale ? ` scale(${bone.getWorldScaleX()}, ${bone.getWorldScaleY()})` : "")
;
element.style.display = ""
if (followAttachmentAttach && !slot.attachment) {
element.style.opacity = "0";
} else if (followOpacity) {
element.style.opacity = `${slot.color.a}`;
}
if (!this.appendedToBody) {
x += window.scrollX;
y += window.scrollY;
} }
element.style.transform = `translate(calc(-50% + ${x.toFixed(2)}px),calc(-50% + ${y.toFixed(2)}px))`
+ (followRotation ? ` rotate(${-bone.getWorldRotationX()}deg)` : "")
+ (followScale ? ` scale(${bone.getWorldScaleX()}, ${bone.getWorldScaleY()})` : "")
;
element.style.display = ""
if (followAttachmentAttach && !slot.attachment) {
element.style.opacity = "0";
} else if (followOpacity) {
element.style.opacity = `${slot.color.a}`;
}
} }
} }
} }
@ -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;
} }
} }