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

[ts][webcomponents] appendedToBody logic was reversed.

Browse Source
This commit is contained in:
Davide Tantillo 2025-05-22 15:39:43 +02:00
parent 7366fcfa4e
commit c462a0232e
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts
View File

@ -156,8 +156,8 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
/** /**
* appendedToBody is assegned in the connectedCallback. * appendedToBody is assegned in the connectedCallback.
* When true, the overlay will have the size of the element container in contrast to the default behaviour where the * When false, the overlay will have the size of the element container in contrast to the default behaviour where the
* overlay has always the size of the screen. * overlay has always the size of the viewport.
* This is necessary when the overlay is inserted into a container that scroll in a different way with respect to the page. * This is necessary when the overlay is inserted into a container that scroll in a different way with respect to the page.
* Otherwise the following problems might occur: * Otherwise the following problems might occur:
* 1) For containers appendedToBody, the widget will be slightly slower to scroll than the html behind. The effect is more evident for lower refresh rate display. * 1) For containers appendedToBody, the widget will be slightly slower to scroll than the html behind. The effect is more evident for lower refresh rate display.
@ -223,7 +223,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
} }
connectedCallback (): void { connectedCallback (): void {
this.appendedToBody = this.parentElement !== document.body; this.appendedToBody = this.parentElement === document.body;
let overlayId = this.getAttribute('overlay-id'); let overlayId = this.getAttribute('overlay-id');
if (!overlayId) { if (!overlayId) {
@ -270,7 +270,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
// we cannot use window.resize event since it does not fire when body resizes, but not the window // we cannot use window.resize event since it does not fire when body resizes, but not the window
// Alternatively, we can store the body size, check the current body size in the loop (like the translateCanvas), and // Alternatively, we can store the body size, check the current body size in the loop (like the translateCanvas), and
// if they differs call the resizeCallback. I already tested it, and it works. ResizeObserver should be more efficient. // if they differs call the resizeCallback. I already tested it, and it works. ResizeObserver should be more efficient.
if (this.appendedToBody) { if (!this.appendedToBody) {
// if the element is appendedToBody, the user does not disable translate tweak, and the parent did not have already a transform, add the tweak // if the element is appendedToBody, the user does not disable translate tweak, and the parent did not have already a transform, add the tweak
if (this.hasCssTweakOff()) { if (this.hasCssTweakOff()) {
this.hasParentTransform = false; this.hasParentTransform = false;
@ -474,7 +474,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
let ref: DOMRect; let ref: DOMRect;
let offsetLeftForOevrlay = 0; let offsetLeftForOevrlay = 0;
let offsetTopForOverlay = 0; let offsetTopForOverlay = 0;
if (this.appendedToBody) { if (!this.appendedToBody) {
ref = this.parentElement!.getBoundingClientRect(); ref = this.parentElement!.getBoundingClientRect();
const computedStyle = getComputedStyle(this.parentElement!); const computedStyle = getComputedStyle(this.parentElement!);
offsetLeftForOevrlay = ref.left + parseFloat(computedStyle.borderLeftWidth); offsetLeftForOevrlay = ref.left + parseFloat(computedStyle.borderLeftWidth);
@ -492,7 +492,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
divBounds.x = divBounds.left + this.overflowLeftSize; divBounds.x = divBounds.left + this.overflowLeftSize;
divBounds.y = divBounds.top + this.overflowTopSize; divBounds.y = divBounds.top + this.overflowTopSize;
if (this.appendedToBody) { if (!this.appendedToBody) {
divBounds.x -= offsetLeftForOevrlay; divBounds.x -= offsetLeftForOevrlay;
divBounds.y -= offsetTopForOverlay; divBounds.y -= offsetTopForOverlay;
} }
@ -662,7 +662,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
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) { if (this.appendedToBody) {
x += window.scrollX; x += window.scrollX;
y += window.scrollY; y += window.scrollY;
} }
@ -718,7 +718,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
this.pointerCanvasX = input.x - window.scrollX; this.pointerCanvasX = input.x - window.scrollX;
this.pointerCanvasY = input.y - window.scrollY; this.pointerCanvasY = input.y - window.scrollY;
if (this.appendedToBody) { if (!this.appendedToBody) {
const ref = this.parentElement!.getBoundingClientRect(); const ref = this.parentElement!.getBoundingClientRect();
this.pointerCanvasX -= ref.left; this.pointerCanvasX -= ref.left;
this.pointerCanvasY -= ref.top; this.pointerCanvasY -= ref.top;
@ -857,7 +857,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
// this.div!.style.width = 0 + "px"; // this.div!.style.width = 0 + "px";
// this.div!.style.height = 0 + "px"; // this.div!.style.height = 0 + "px";
this.div!.style.display = "none"; this.div!.style.display = "none";
if (!this.appendedToBody) { if (this.appendedToBody) {
const { width, height } = this.getPageSize(); const { width, height } = this.getPageSize();
this.div!.style.width = width + "px"; this.div!.style.width = width + "px";
this.div!.style.height = height + "px"; this.div!.style.height = height + "px";
@ -903,7 +903,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
// determine the target viewport width and height. // determine the target viewport width and height.
// The target width/height won't change if the viewport shrink to avoid useless re render (especially re render bursts on mobile) // The target width/height won't change if the viewport shrink to avoid useless re render (especially re render bursts on mobile)
private getViewportSize (): { width: number, height: number } { private getViewportSize (): { width: number, height: number } {
if (this.appendedToBody) { if (!this.appendedToBody) {
return { return {
width: this.parentElement!.clientWidth, width: this.parentElement!.clientWidth,
height: this.parentElement!.clientHeight, height: this.parentElement!.clientHeight,
@ -969,7 +969,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
let scrollPositionX = -this.overflowLeftSize; let scrollPositionX = -this.overflowLeftSize;
let scrollPositionY = -this.overflowTopSize; let scrollPositionY = -this.overflowTopSize;
if (!this.appendedToBody) { if (this.appendedToBody) {
scrollPositionX += window.scrollX; scrollPositionX += window.scrollX;
scrollPositionY += window.scrollY; scrollPositionY += window.scrollY;
} else { } else {