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

Fix overlay init not completed in some scenario.

Browse Source 
DOMContentLoaded is invoked only when document.readyState is interactive.
This commit is contained in:
Davide Tantillo 2025-05-02 16:53:07 +02:00
parent 9ad38173cb
commit f5612c517d
1 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -866,10 +866,8 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
if (this.overlay) { if (this.overlay) {
this.initAfterConnect(); this.initAfterConnect();
} else { } else {
window.addEventListener("DOMContentLoaded", this.DOMContentLoadedHandler); if (document.readyState === "loading") window.addEventListener("DOMContentLoaded", this.DOMContentLoadedCallback);
if (document.readyState === "complete") { else this.DOMContentLoadedCallback();
this.DOMContentLoadedHandler();
}
} }
this.render(); this.render();
@ -882,7 +880,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
} }
} }
private DOMContentLoadedHandler = () => { private DOMContentLoadedCallback = () => {
customElements.whenDefined("spine-overlay").then(async () => { customElements.whenDefined("spine-overlay").then(async () => {
this.overlay = SpineWebComponentOverlay.getOrCreateOverlay(this.getAttribute("overlay-id")); this.overlay = SpineWebComponentOverlay.getOrCreateOverlay(this.getAttribute("overlay-id"));
this.resolveOverlayAssignedPromise(); this.resolveOverlayAssignedPromise();
@ -891,7 +889,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
} }
disconnectedCallback (): void { disconnectedCallback (): void {
window.removeEventListener("DOMContentLoaded", this.DOMContentLoadedHandler); window.removeEventListener("DOMContentLoaded", this.DOMContentLoadedCallback);
const index = this.overlay?.widgets.indexOf(this); const index = this.overlay?.widgets.indexOf(this);
if (index > 0) { if (index > 0) {
this.overlay!.widgets.splice(index, 1); this.overlay!.widgets.splice(index, 1);
@ -1078,13 +1076,15 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
// - []: no page is loaded // - []: no page is loaded
// - undefined: all pages are loaded (default) // - undefined: all pages are loaded (default)
await Promise.all([ await Promise.all([
this.lastSkelPath ? Promise.resolve() this.lastSkelPath
? Promise.resolve()
: (isBinary ? this.overlay.assetManager.loadBinaryAsync(skeletonPath) : this.overlay.assetManager.loadJsonAsync(skeletonPath)) : (isBinary ? this.overlay.assetManager.loadBinaryAsync(skeletonPath) : this.overlay.assetManager.loadJsonAsync(skeletonPath))
.then(() => this.lastSkelPath = skeletonPath), .then(() => this.lastSkelPath = skeletonPath),
this.lastAtlasPath ? Promise.resolve() this.lastAtlasPath
: this.overlay.assetManager.loadTextureAtlasButNoTexturesAsync(atlasPath).then(atlas => { ? Promise.resolve()
: this.overlay.assetManager.loadTextureAtlasButNoTexturesAsync(atlasPath).then(() => {
this.lastAtlasPath = atlasPath; this.lastAtlasPath = atlasPath;
this.loadTexturesInPagesAttribute(); return this.loadTexturesInPagesAttribute();
}), }),
]); ]);
@ -1419,7 +1419,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
private disposeGLResources() { private disposeGLResources() {
const { assetManager } = this.overlay; const { assetManager } = this.overlay;
if (this.lastAtlasPath) assetManager.disposeAsset(this.lastAtlasPath, this.identifier); if (this.lastAtlasPath) assetManager.disposeAsset(this.lastAtlasPath);
if (this.lastSkelPath) assetManager.disposeAsset(this.lastSkelPath); if (this.lastSkelPath) assetManager.disposeAsset(this.lastSkelPath);
for (const texturePath of this.lastTexturePaths) assetManager.disposeAsset(texturePath); for (const texturePath of this.lastTexturePaths) assetManager.disposeAsset(texturePath);
} }
@ -1624,8 +1624,13 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
} }
SpineWebComponentOverlay.OVERLAY_LIST.set(overlayId, this); SpineWebComponentOverlay.OVERLAY_LIST.set(overlayId, this);
// window.addEventListener("scroll", this.scrolledCallback); // window.addEventListener("scroll", this.scrolledCallback);
window.addEventListener("load", this.loadedCallback);
if (this.loaded) this.loadedCallback(); if (document.readyState !== "complete") {
window.addEventListener("load", this.loadedCallback);
} else {
this.loadedCallback();
}
window.screen.orientation.addEventListener('change', this.orientationChangedCallback); window.screen.orientation.addEventListener('change', this.orientationChangedCallback);
this.intersectionObserver = new IntersectionObserver((widgets) => { this.intersectionObserver = new IntersectionObserver((widgets) => {
@ -1729,9 +1734,9 @@ class SpineWebComponentOverlay extends HTMLElement implements OverlayAttributes,
this.updateCanvasSize(); this.updateCanvasSize();
this.scrolledCallback(); this.scrolledCallback();
if (!this.loaded) { if (!this.loaded) {
this.loaded = true;
this.parentElement!.appendChild(this); this.parentElement!.appendChild(this);
} }
this.loaded = true;
} }
/** /**