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] Add resize callback also for default. It might send double resize command.

Browse Source
This commit is contained in:
Davide Tantillo 2025-05-22 16:51:42 +02:00
parent c462a0232e
commit 3866154cb9
1 changed files with 8 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -266,22 +266,18 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
} }
}, { rootMargin: "30px 20px 30px 20px" }); }, { rootMargin: "30px 20px 30px 20px" });
// resize observer is supported by all major browsers today chrome started to support it in version 64 (early 2018) // if the element is not appendedToBody, the user does not disable translate tweak, and the parent did not have already a transform, add the tweak
// 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
// 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 (this.hasCssTweakOff()) { if (this.hasCssTweakOff()) {
this.hasParentTransform = false; this.hasParentTransform = false;
} else { } else {
this.parentElement!.style.transform = `translateZ(0)`; this.parentElement!.style.transform = `translateZ(0)`;
} }
this.resizeObserver = new ResizeObserver(this.resizedCallback);
this.resizeObserver.observe(this.parentElement!);
} else { } else {
window.addEventListener("resize", this.resizedCallback) window.addEventListener("resize", () => this.resizedCallback(true));
} }
this.resizeObserver = new ResizeObserver(() => this.resizedCallback());
this.resizeObserver.observe(this.parentElement!);
for (const widget of this.widgets) { for (const widget of this.widgets) {
this.intersectionObserver?.observe(widget.getHostElement()); this.intersectionObserver?.observe(widget.getHostElement());
@ -329,8 +325,8 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
return; return;
} }
private resizedCallback = () => { private resizedCallback = (onlyDiv = false) => {
this.updateCanvasSize(); this.updateCanvasSize(onlyDiv);
} }
private orientationChangedCallback = () => { private orientationChangedCallback = () => {
@ -832,11 +828,11 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
* Resize/scroll utilities * Resize/scroll utilities
*/ */
private updateCanvasSize () { private updateCanvasSize (onlyDiv = false) {
const { width, height } = this.getViewportSize(); const { width, height } = this.getViewportSize();
// if the target width/height changes, resize the canvas. // if the target width/height changes, resize the canvas.
if (this.lastCanvasBaseWidth !== width || this.lastCanvasBaseHeight !== height) { if (!onlyDiv && this.lastCanvasBaseWidth !== width || this.lastCanvasBaseHeight !== height) {
this.lastCanvasBaseWidth = width; this.lastCanvasBaseWidth = width;
this.lastCanvasBaseHeight = height; this.lastCanvasBaseHeight = height;
this.overflowLeftSize = this.overflowLeft * width; this.overflowLeftSize = this.overflowLeft * width;