UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-07 19:26:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

Restore resize observer since the window resize event does not fire on body resize, but on window resize. It's supported by 93% of the browsers.

Browse Source
This commit is contained in:
Davide Tantillo 2024-10-03 10:23:14 +02:00
parent 8cc5a2ba5e
commit bedce14780
1 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
View File

@ -843,6 +843,7 @@ class SpineWebComponentOverlay extends HTMLElement implements Disposable {
private fpsAppended = false; private fpsAppended = false;
private intersectionObserver?: IntersectionObserver; private intersectionObserver?: IntersectionObserver;
private resizeObserver?:ResizeObserver;
private input?: Input; private input?: Input;
// how many pixels to add to the edges to prevent "edge cuttin" on fast scrolling // how many pixels to add to the edges to prevent "edge cuttin" on fast scrolling
@ -924,7 +925,6 @@ class SpineWebComponentOverlay extends HTMLElement implements Disposable {
} }
connectedCallback (): void { connectedCallback (): void {
window.addEventListener("resize", this.resizeCallback);
window.addEventListener("scroll", this.scrollHandler); window.addEventListener("scroll", this.scrollHandler);
window.addEventListener("load", this.onLoadCallback); window.addEventListener("load", this.onLoadCallback);
if (this.loaded) this.onLoadCallback(); if (this.loaded) this.onLoadCallback();
@ -946,6 +946,14 @@ class SpineWebComponentOverlay extends HTMLElement implements Disposable {
} }
}) })
}, { 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)
// 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.
this.resizeObserver = new ResizeObserver(this.resizeCallback);
this.resizeObserver.observe(document.body);
this.skeletonList.forEach((widget) => { this.skeletonList.forEach((widget) => {
this.intersectionObserver?.observe(widget.getHTMLElementReference()); this.intersectionObserver?.observe(widget.getHTMLElementReference());
}) })
@ -955,11 +963,11 @@ class SpineWebComponentOverlay extends HTMLElement implements Disposable {
} }
disconnectedCallback (): void { disconnectedCallback (): void {
window.removeEventListener("resize", this.resizeCallback);
window.removeEventListener("scroll", this.scrollHandler); window.removeEventListener("scroll", this.scrollHandler);
window.removeEventListener("load", this.onLoadCallback); window.removeEventListener("load", this.onLoadCallback);
window.screen.orientation.removeEventListener('change', this.orientationChangeCallback); window.screen.orientation.removeEventListener('change', this.orientationChangeCallback);
this.intersectionObserver?.disconnect(); this.intersectionObserver?.disconnect();
this.resizeObserver?.disconnect();
this.input?.dispose(); this.input?.dispose();
} }