UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-20 17:26:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts][webcomponents] Stop RAF if tab is hidden.

Browse Source
This commit is contained in:
Davide Tantillo 2025-05-23 09:54:26 +02:00
parent a27b63fc5e
commit b90b6996c0
1 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -153,6 +153,8 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
private disposed = false; private disposed = false;
private loaded = false; private loaded = false;
private running = false;
private visible = true;
/** /**
* appendedToBody is assegned in the connectedCallback. * appendedToBody is assegned in the connectedCallback.
@ -284,27 +286,24 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
} }
this.input = this.setupDragUtility(); this.input = this.setupDragUtility();
document.addEventListener('visibilitychange', this.visibilityChangeCallback);
this.startRenderingLoop(); this.startRenderingLoop();
} }
private hasCssTweakOff () {
return this.noAutoParentTransform && getComputedStyle(this.parentElement!).transform === "none";
}
private running = false;
disconnectedCallback (): void { disconnectedCallback (): void {
const id = this.getAttribute('overlay-id'); const id = this.getAttribute('overlay-id');
if (id) SpineWebComponentOverlay.OVERLAY_LIST.delete(id); if (id) SpineWebComponentOverlay.OVERLAY_LIST.delete(id);
// window.removeEventListener("scroll", this.scrolledCallback); // window.removeEventListener("scroll", this.scrolledCallback);
window.removeEventListener("load", this.loadedCallback); window.removeEventListener("load", this.loadedCallback);
window.removeEventListener("resize", this.windowResizeCallback); window.removeEventListener("resize", this.windowResizeCallback);
document.removeEventListener('visibilitychange', this.visibilityChangeCallback);
window.screen.orientation.removeEventListener('change', this.orientationChangedCallback); window.screen.orientation.removeEventListener('change', this.orientationChangedCallback);
this.intersectionObserver?.disconnect(); this.intersectionObserver?.disconnect();
this.resizeObserver?.disconnect(); this.resizeObserver?.disconnect();
this.input?.dispose(); this.input?.dispose();
} }
static attributesDescription: Record<string, { propertyName: keyof OverlayAttributes, type: AttributeTypes, defaultValue?: any }> = { static attributesDescription: Record<string, { propertyName: keyof OverlayAttributes, type: AttributeTypes, defaultValue?: any }> = {
"overlay-id": { propertyName: "overlayId", type: "string" }, "overlay-id": { propertyName: "overlayId", type: "string" },
"no-auto-parent-transform": { propertyName: "noAutoParentTransform", type: "boolean" }, "no-auto-parent-transform": { propertyName: "noAutoParentTransform", type: "boolean" },
@ -325,6 +324,15 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
return; return;
} }
private visibilityChangeCallback = () => {
if (document.hidden) {
this.visible = false;
} else {
this.visible = true;
this.startRenderingLoop();
}
}
private windowResizeCallback = () => this.resizedCallback(true); private windowResizeCallback = () => this.resizedCallback(true);
private resizedCallback = (onlyDiv = false) => { private resizedCallback = (onlyDiv = false) => {
@ -352,6 +360,10 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
} }
} }
private hasCssTweakOff () {
return this.noAutoParentTransform && getComputedStyle(this.parentElement!).transform === "none";
}
/** /**
* Remove the overlay from the DOM, dispose all the contained widgets, and dispose the renderer. * Remove the overlay from the DOM, dispose all the contained widgets, and dispose the renderer.
*/ */
@ -683,7 +695,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
} }
const loop = () => { const loop = () => {
if (this.disposed || !this.isConnected) { if (this.disposed || !this.isConnected || !this.visible) {
this.running = false; this.running = false;
return; return;
}; };