@needle-tools/engine 4.16.10 → 4.16.12

package/src/engine/webcomponents/fonts.ts

@@ -27,6 +27,12 @@ export function loadFont(url: string, opts?: LoadFontOptions) {
             }
         }
     }
+    // The link lives in document.head and can outlive the component using this callback.
+    return () => {
+        if (opts?.loadedCallback) {
+            for (const link of elements) link.removeEventListener("load", opts.loadedCallback);
+        }
+    };
 }
 
 

package/src/engine/webcomponents/icons.ts

@@ -20,7 +20,15 @@ export function getIconElement(str: string): HTMLElement {
     span.setAttribute("role", "img");
     span.setAttribute("aria-label", str + " icon");
     span.setAttribute("aria-hidden", "true");
+    updateIconWhenFontReady(new WeakRef(span), str);
+    return span;
+}
+
+// Pending font loads must not retain detached menu trees.
+function updateIconWhenFontReady(reference: WeakRef<HTMLSpanElement>, str: string) {
     fontReady(fontname).then(res => {
+        const span = reference.deref();
+        if (!span) return;
         if (res) span.style.visibility = "";
         else {
             if (str === "more_vert") {
@@ -31,8 +39,7 @@ export function getIconElement(str: string): HTMLElement {
                 span.style.display = "none";
             }
         }
-    })
-    return span;
+    });
 }
 
 /**@returns true if the element is an needle engine icon element */

package/src/engine/webcomponents/needle menu/needle-menu.ts

@@ -3,7 +3,7 @@ import type { Context } from "../../engine_context.js";
 import { hasCommercialLicense, onLicenseCheckResultChanged, Telemetry } from "../../engine_license.js";
 import { isLocalNetwork } from "../../engine_networking_utils.js";
 import { DeviceUtilities, getParam } from "../../engine_utils.js";
-import { onXRSessionStart, XRSessionEventArgs } from "../../xr/events.js";
+import { offXRSessionStart, onXRSessionStart, XRSessionEventArgs } from "../../xr/events.js";
 import { ButtonsFactory } from "../buttons.js";
 import { ensureFonts, iconFontUrl, loadFont } from "../fonts.js";
 import { getIconElement } from "../icons.js";
@@ -138,7 +138,9 @@ export class NeedleMenu {
 
     /** @ignore internal method */
     onDestroy() {
+        offXRSessionStart(this.onStartXR);
         window.removeEventListener("message", this.onPostMessage);
+        this._menu.dispose();
         this._menu.remove();
         this._spatialMenu.onDestroy();
     }
@@ -338,6 +340,19 @@ export class NeedleMenuElement extends HTMLElement {
 
     private _domElement: HTMLElement | null = null;
     private _context: Context | null = null;
+    private _unsubscribeFont?: () => void;
+    private _licenseFrame?: number;
+    private _unsubscribeLicense?: () => void;
+
+    /** @internal Release font and license subscriptions when the owning context is destroyed. */
+    dispose() {
+        this._unsubscribeFont?.();
+        this._unsubscribeFont = undefined;
+        if (this._licenseFrame !== undefined) window.cancelAnimationFrame(this._licenseFrame);
+        this._licenseFrame = undefined;
+        this._unsubscribeLicense?.();
+        this._unsubscribeLicense = undefined;
+    }
     private _didInitialize = false;
 
     constructor() {
@@ -748,7 +763,7 @@ export class NeedleMenuElement extends HTMLElement {
         // we need to add the icons to both the shadow dom as well as the HEAD to work 
         // https://github.com/google/material-design-icons/issues/1165
         ensureFonts();
-        loadFont(iconFontUrl, { loadedCallback: () => { this.handleSizeChange() } });
+        this._unsubscribeFont = loadFont(iconFontUrl, { loadedCallback: () => { this.handleSizeChange() } });
         loadFont(iconFontUrl, { element: shadow });
 
         const content = template.content.cloneNode(true) as DocumentFragment;
@@ -777,16 +792,19 @@ export class NeedleMenuElement extends HTMLElement {
         try {
             // if the user has a license then we CAN hide the needle logo
             // calling this method immediately will cause an issue with vite bundling tho
-            window.requestAnimationFrame(() => onLicenseCheckResultChanged(res => {
-                if (res == true && hasCommercialLicense() && !debugNonCommercial) {
-                    let visible = this._userRequestedLogoVisible;
-                    if (visible === undefined) visible = false;
-                    this.___onSetLogoVisible(visible);
-                }
-                else {
-                    this.___onSetLogoVisible(true);
-                }
-            }));
+            this._licenseFrame = window.requestAnimationFrame(() => {
+                this._licenseFrame = undefined;
+                this._unsubscribeLicense = onLicenseCheckResultChanged(res => {
+                    if (res == true && hasCommercialLicense() && !debugNonCommercial) {
+                        let visible = this._userRequestedLogoVisible;
+                        if (visible === undefined) visible = false;
+                        this.___onSetLogoVisible(visible);
+                    }
+                    else {
+                        this.___onSetLogoVisible(true);
+                    }
+                });
+            });
         } catch (e) {
             console.error("[Needle Menu] License check failed.", e);
         }

package/src/engine/webcomponents/needle-engine.loading.ts

@@ -19,6 +19,7 @@ export class LoadingElementOptions {
 
 /** @internal */
 export interface ILoadingViewHandler {
+    dispose?(): void;
     onLoadingBegin(message?: string)
     onLoadingUpdate(progress: LoadingProgressArgs | number, message?: string);
     onLoadingFinished(message?: string);
@@ -79,6 +80,17 @@ export class EngineLoadingView implements ILoadingViewHandler {
         this._loadingElementOptions = opts;
     }
 
+    dispose() {
+        // Removal can happen before ready stops the progress interval.
+        clearInterval(this._progressLoop);
+        this._progressLoop = null;
+        this._loadingElement?.remove();
+        this._loadingElement = undefined;
+        this._loadingTextContainer = null;
+        this._loadingBar = null;
+        this._messageContainer = null;
+    }
+
     async onLoadingBegin(message?: string) {
         const _element = this._element.shadowRoot || this._element;
         if (debug) console.warn("Begin Loading")
@@ -402,4 +414,4 @@ export class EngineLoadingView implements ILoadingViewHandler {
     //     nonCommercialContainer.style.transition = "opacity .5s ease-in-out";
     //     nonCommercialContainer.style.opacity = "1";
     // }
-}
+}

package/src/engine/webcomponents/needle-engine.ts

@@ -172,6 +172,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     private _overlay_ar!: AROverlayHandler;
     private _loadingProgress01: number = 0;
     private _loadingView?: ILoadingViewHandler;
+    private _cancelLoadingBlur?: () => void;
     private _previousSrc: string | null | string[] = null;
     /** @private set to true after <needle-engine> did load completely at least once. Set to false when < to false when <needle-engine> is removed from the document removed from the document */
     private _didFullyLoad: boolean = false;
@@ -335,6 +336,9 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
         const dispose = keepAlive == undefined || (keepAlive?.length > 0 && keepAlive !== "true" && keepAlive !== "1");
         if (debug) console.warn("<needle-engine> disconnected, keep-alive: \"" + keepAlive + "\"", typeof keepAlive, "Dispose=", dispose);
         if (dispose) {
+            this._cancelLoadingBlur?.();
+            this._cancelLoadingBlur = undefined;
+            this._loadingView?.dispose?.();
             if (debug)
                 console.warn("<needle-engine> dispose");
             this._context?.dispose();
@@ -583,7 +587,8 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
 
 
         // Experimental loading blur
-        handleLoadingBlur(this);
+        this._cancelLoadingBlur?.();
+        this._cancelLoadingBlur = handleLoadingBlur(this);
 
         const currentHash = this.getAttribute("hash");
         if (currentHash !== null && currentHash !== undefined)
@@ -1243,8 +1248,12 @@ function getDisplayName(str: string) {
 
 
 function handleLoadingBlur(needleEngineElement: NeedleEngineWebComponent) {
-    onStart((ctx) => {
-        const userBlurSetting = needleEngineElement.getAttribute("loading-blur");
+    const userBlurSetting = needleEngineElement.getAttribute("loading-blur");
+    if (userBlurSetting === null || userBlurSetting === "0") return undefined;
+    const unregister = onStart((ctx) => {
+        // A different context starting must not consume this element's callback.
+        if (ctx.domElement !== needleEngineElement) return;
+        unregister();
         if (userBlurSetting !== null && userBlurSetting !== "0") {
             if (ctx.domElement === needleEngineElement) {
 
@@ -1297,5 +1306,6 @@ function handleLoadingBlur(needleEngineElement: NeedleEngineWebComponent) {
                 }
             }
         }
-    }, { once: true });
-}
+    });
+    return unregister;
+}