UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-21 09:46:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] Fixed and improved appendedToBody overlays without transform.

Browse Source
This commit is contained in:
Davide Tantillo 2025-05-15 18:26:33 +02:00
parent 23adb6b9b8
commit e1e88fce60
2 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
spine-ts/spine-webcomponents/example/tutorial.html
View File

@ -1356,7 +1356,6 @@ function removeDiv() {
async function reloadWidget(element) { async function reloadWidget(element) {
element.disabled = true; element.disabled = true;
await widget.whenReady; await widget.whenReady;
const skeleton = widget.skeleton;
widget.loading = true; widget.loading = true;
setTimeout(() => { setTimeout(() => {
element.disabled = false; element.disabled = false;

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

@ -166,11 +166,11 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
* *
* In order to fix this behaviour, it is necessary to insert a dedicated `spine-overlay` webcomponent as a direct child of the container. * In order to fix this behaviour, it is necessary to insert a dedicated `spine-overlay` webcomponent as a direct child of the container.
* Moreover, it is necessary to perform the following actions: * Moreover, it is necessary to perform the following actions:
* 1) The scrollable container must have a `transform` css attribute. If it hasn't this attribute the `spine-overlay` will add it for you. * 1) The appendedToBody container must have a `transform` css attribute. If it hasn't this attribute the `spine-overlay` will add it for you.
* If your scrollable container has already this css attribute, or if you prefer to add it by yourself (example: `transform: translateZ(0);`), set the `no-auto-parent-transform` to the `spine-overlay`. * If your appendedToBody container has already this css attribute, or if you prefer to add it by yourself (example: `transform: translateZ(0);`), set the `no-auto-parent-transform` to the `spine-overlay`.
* 2) The `spine-overlay` must have an `overlay-id` attribute. Choose the value you prefer. * 2) The `spine-overlay` must have an `overlay-id` attribute. Choose the value you prefer.
* 3) Each `spine-skeleton` must have an `overlay-id` attribute. The same as the hosting `spine-overlay`. * 3) Each `spine-skeleton` must have an `overlay-id` attribute. The same as the hosting `spine-overlay`.
* Connected to `scrollable` attribute. * Connected to `appendedToBody` attribute.
*/ */
private appendedToBody = true; private appendedToBody = true;
@ -270,7 +270,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
// 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 scrollable, 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.appendedToBody && !this.noAutoParentTransform && getComputedStyle(this.parentElement!).transform === "none") { if (this.appendedToBody && !this.noAutoParentTransform && getComputedStyle(this.parentElement!).transform === "none") {
this.parentElement!.style.transform = `translateZ(0)`; this.parentElement!.style.transform = `translateZ(0)`;
} }
@ -963,6 +963,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
} }
} }
// this function is invoked each frame - pay attention to what you add here
private translateCanvas () { private translateCanvas () {
let scrollPositionX = -this.overflowLeftSize; let scrollPositionX = -this.overflowLeftSize;
let scrollPositionY = -this.overflowTopSize; let scrollPositionY = -this.overflowTopSize;
@ -972,9 +973,9 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
scrollPositionY += window.scrollY; scrollPositionY += window.scrollY;
} else { } else {
// Ideally this should be the only scrollable case (no-auto-parent-transform not enabled or at least an ancestor has transform) // Ideally this should be the only appendedToBody case (no-auto-parent-transform not enabled or at least an ancestor has transform)
// I'd like to get rid of the code below // I'd like to get rid of the else case
if (!this.hasCssTweakOff()) { if (!this.noAutoParentTransform) {
scrollPositionX += this.parentElement!.scrollLeft; scrollPositionX += this.parentElement!.scrollLeft;
scrollPositionY += this.parentElement!.scrollTop; scrollPositionY += this.parentElement!.scrollTop;
} else { } else {
@ -984,7 +985,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
let offsetParent = this.offsetParent; let offsetParent = this.offsetParent;
do { do {
if (offsetParent === document.body) break; if (offsetParent === null || offsetParent === document.body) break;
const htmlOffsetParentElement = offsetParent as HTMLElement; const htmlOffsetParentElement = offsetParent as HTMLElement;
if (htmlOffsetParentElement.style.position === "fixed" || htmlOffsetParentElement.style.position === "sticky" || htmlOffsetParentElement.style.position === "absolute") { if (htmlOffsetParentElement.style.position === "fixed" || htmlOffsetParentElement.style.position === "sticky" || htmlOffsetParentElement.style.position === "absolute") {