@needle-tools/engine 4.6.2 → 4.7.0-alpha

package/lib/engine/webcomponents/buttons.js

@@ -1,265 +1,265 @@
-import { isDevEnvironment, showBalloonWarning } from "../debug/debug.js";
-import { generateQRCode } from "../engine_utils.js";
-import { onXRSessionEnd, onXRSessionStart } from "../xr/events.js";
-import { getIconElement } from "./icons.js";
-/**
- * Use the ButtonsFactory to create buttons with icons and functionality
- * Get access to the default buttons by using `ButtonsFactory.instance`
- * The factory will create the buttons if they don't exist yet, and return the existing ones if they do (this allows you to reparent or modify created buttons)
- */
-export class ButtonsFactory {
-    static _instance;
-    /**
-     * Get access to the default HTML button factory.
-     * Use this to get or create default Needle Engine buttons that can be added to your HTML UI
-     * If you want to create a new factory and create new button instances instead of shared buttons, use `ButtonsFactory.create()` instead
-     */
-    static get instance() {
-        return this.getOrCreate();
-    }
-    /**
-     * Get access to the default HTML button factory.
-     * Use this to get or create default Needle Engine buttons that can be added to your HTML UI
-     * If you want to create a new factory and create new button instances instead of shared buttons, use `ButtonsFactory.create()` instead
-     */
-    static getOrCreate() {
-        if (!this._instance) {
-            this._instance = new ButtonsFactory();
-        }
-        return this._instance;
-    }
-    /** create a new buttons factory */
-    static create() {
-        return new ButtonsFactory();
-    }
-    _fullscreenButton;
-    /**
-     * Get the fullscreen button (or undefined if it doesn't exist yet). Call {@link ButtonsFactory.createFullscreenButton} to get or create it
-     */
-    get fullscreenButton() {
-        return this._fullscreenButton;
-    }
-    /** Create a fullscreen button (or return the existing one if it already exists) */
-    createFullscreenButton(ctx) {
-        if (this._fullscreenButton) {
-            return this._fullscreenButton;
-        }
-        // check for fullscreen support
-        if (!document.fullscreenEnabled) {
-            if (isDevEnvironment())
-                console.warn("NeedleMenu: Fullscreen button could not be created, device doesn't support the Fullscreen API");
-            return null;
-        }
-        const button = document.createElement("button");
-        this._fullscreenButton = button;
-        button.classList.add("fullscreen-button");
-        button.title = "Click to enter fullscreen mode";
-        const enterFullscreenIcon = getIconElement("fullscreen");
-        const exitFullscreenIcon = getIconElement("fullscreen_exit");
-        button.appendChild(enterFullscreenIcon);
-        button.onclick = () => {
-            if (document.fullscreenElement) {
-                document.exitFullscreen();
-            }
-            else {
-                if ("webkitRequestFullscreen" in ctx.domElement && typeof ctx.domElement["webkitRequestFullscreen"] === "function")
-                    ctx.domElement["webkitRequestFullscreen"]();
-                else if ("requestFullscreen" in ctx.domElement)
-                    ctx.domElement.requestFullscreen();
-            }
-        };
-        document.addEventListener("fullscreenchange", () => {
-            if (document.fullscreenElement) {
-                enterFullscreenIcon.remove();
-                button.appendChild(exitFullscreenIcon);
-                button.title = "Click to enter fullscreen mode";
-            }
-            else {
-                exitFullscreenIcon.remove();
-                button.appendChild(enterFullscreenIcon);
-                button.title = "Click to exit fullscreen mode";
-            }
-        });
-        // xr session started?
-        globalThis.addEventListener("needle-xrsession-start", () => {
-            button.style.display = "none";
-        });
-        globalThis.addEventListener("needle-xrsession-end", () => {
-            button.style.display = "";
-        });
-        return button;
-    }
-    _muteButton;
-    /** Get the mute button (or undefined if it doesn't exist yet). Call {@link ButtonsFactory.createMuteButton} to get or create it */
-    get muteButton() { return this._muteButton; }
-    /** Create a mute button (or return the existing one if it already exists) */
-    createMuteButton(ctx) {
-        if (this._muteButton) {
-            return this._muteButton;
-        }
-        const button = document.createElement("button");
-        this._muteButton = button;
-        button.classList.add("mute-button");
-        button.title = "Click to mute/unmute";
-        const muteIcon = getIconElement("volume_off");
-        const unmuteIcon = getIconElement("volume_up");
-        // save state in session storage (this needs consent)
-        // if (sessionStorage.getItem("muted") === "true") {
-        //     ctx.application.muted = true;
-        // }
-        // else {
-        //     ctx.application.muted = false;
-        // }
-        if (ctx.application.muted) {
-            button.appendChild(muteIcon);
-        }
-        else {
-            button.appendChild(unmuteIcon);
-        }
-        button.onclick = () => {
-            if (ctx.application.muted) {
-                muteIcon.remove();
-                button.appendChild(unmuteIcon);
-                ctx.application.muted = false;
-                // sessionStorage.setItem("muted", "false");
-            }
-            else {
-                unmuteIcon.remove();
-                button.appendChild(muteIcon);
-                ctx.application.muted = true;
-                // sessionStorage.setItem("muted", "true");
-            }
-        };
-        return button;
-    }
-    _qrButton;
-    /**
-     * Get the QR code button (or undefined if it doesn't exist yet). Call {@link ButtonsFactory.createQRCode} to get or create it
-     */
-    get qrButton() { return this._qrButton; }
-    _customQRButtonUrl;
-    /** Get or set the QR code button URL - this URL will open when scanning the QR code */
-    set qrButtonUrl(url) {
-        // make sure it's a URL
-        try {
-            new URL(url);
-            this._customQRButtonUrl = url;
-        }
-        catch (e) {
-            console.warn(`[Needle] QR code button URL is not a valid URL '${url}'`);
-        }
-    }
-    get qrButtonUrl() {
-        return this._customQRButtonUrl || window.location.href;
-    }
-    /** Create a QR code button (or return the existing one if it already exists)
-     * The QR code button will show a QR code that can be scanned to open the current page on a phone
-     * The QR code will be generated with the current URL when the button is clicked
-     * @returns the QR code button element
-     */
-    createQRCode() {
-        if (this._qrButton)
-            return this._qrButton;
-        const instance = this;
-        const qrCodeButton = document.createElement("button");
-        this._qrButton = qrCodeButton;
-        qrCodeButton.innerText = "QR Code";
-        qrCodeButton.prepend(getIconElement("qr_code"));
-        qrCodeButton.title = "Scan this QR code with your phone to open this page";
-        this.hideElementDuringXRSession(qrCodeButton);
-        const qrCodeContainer = document.createElement("div");
-        qrCodeContainer.style.cssText = `
-            position: fixed;
-            display: inline-block;
-            padding: 0.5rem;
-            background-color: white;
-            border-radius: 0.4rem;
-            cursor: pointer;
-            z-index: 1000;
-            box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
-        `;
-        const qrCodeElement = document.createElement("div");
-        qrCodeElement.classList.add("qr-code-container");
-        qrCodeContainer.appendChild(qrCodeElement);
-        qrCodeButton.addEventListener("click", () => {
-            if (qrCodeContainer.parentNode)
-                return hideQRCode();
-            if (isDevEnvironment() && window.location.href.includes("://localhost")) {
-                showBalloonWarning("To access your website from another device in the same local network you have to use the IP address instead of localhost. The IP address is logged in your development server console when you start the server.");
-            }
-            showQRCode();
-        });
-        /** shows the QRCode near the button */
-        async function showQRCode() {
-            // generate the qr code when the button is clicked
-            // this ensures that we get the QRcode with the latest URL
-            await generateAndInsertQRCode();
-            // TODO: make sure it doesnt overflow the screen
-            // we need to add the qrCodeContainer to the body to get the correct size
-            document.body.appendChild(qrCodeContainer);
-            const containerRect = qrCodeElement.getBoundingClientRect();
-            const buttonRect = qrCodeButton.getBoundingClientRect();
-            qrCodeContainer.style.left = (buttonRect.left + buttonRect.width * .5 - containerRect.width * .5) + "px";
-            const isButtonInTopHalf = buttonRect.top < containerRect.height;
-            const padding = "1.3rem";
-            if (isButtonInTopHalf)
-                qrCodeContainer.style.top = `calc(${buttonRect.bottom}px + ${qrCodeContainer.style.padding} + 0.0rem)`;
-            else
-                qrCodeContainer.style.top = `calc(${buttonRect.top - containerRect.height}px - ${qrCodeContainer.style.padding} - ${padding})`;
-            qrCodeContainer.style.opacity = "0";
-            qrCodeContainer.style.pointerEvents = "all";
-            qrCodeContainer.style.transition = "opacity 0.2s ease-in-out";
-            // context click to hide the QR code again, if we dont timeout the event will be triggered immediately
-            setTimeout(() => {
-                qrCodeContainer.style.opacity = "1";
-                window.addEventListener("click", hideQRCode, { once: true });
-            });
-            window.addEventListener("resize", hideQRCode);
-            window.addEventListener("scroll", hideQRCode);
-            // if we're in fullscreen:
-            if (document.fullscreenElement) {
-                document.fullscreenElement.appendChild(qrCodeContainer);
-            }
-            else
-                document.body.appendChild(qrCodeContainer);
-        }
-        /** hides to QRCode overlay and unsubscribes from events */
-        function hideQRCode() {
-            qrCodeContainer.style.pointerEvents = "none";
-            qrCodeContainer.style.transition = "opacity 0.2s";
-            qrCodeContainer.style.opacity = "0";
-            setTimeout(() => qrCodeContainer.parentNode?.removeChild(qrCodeContainer), 500);
-            window.removeEventListener("click", hideQRCode);
-            window.removeEventListener("resize", hideQRCode);
-            window.removeEventListener("scroll", hideQRCode);
-        }
-        ;
-        /** generates a QR code and inserts it into the qrCodeElement */
-        async function generateAndInsertQRCode() {
-            const size = 200;
-            const code = await generateQRCode({
-                text: instance.qrButtonUrl,
-                width: size,
-                height: size,
-            });
-            qrCodeElement.innerHTML = "";
-            qrCodeElement.appendChild(code);
-        }
-        // lazily create the qr button
-        qrCodeButton.addEventListener("pointerenter", () => {
-            generateAndInsertQRCode();
-        }, { once: true });
-        return qrCodeButton;
-    }
-    hideElementDuringXRSession(element) {
-        onXRSessionStart(_ => {
-            element["previous-display"] = element.style.display;
-            element.style.display = "none";
-        });
-        onXRSessionEnd(_ => {
-            if (element["previous-display"] != undefined)
-                element.style.display = element["previous-display"];
-        });
-    }
-}
+import { isDevEnvironment, showBalloonWarning } from "../debug/debug.js";
+import { generateQRCode } from "../engine_utils.js";
+import { onXRSessionEnd, onXRSessionStart } from "../xr/events.js";
+import { getIconElement } from "./icons.js";
+/**
+ * Use the ButtonsFactory to create buttons with icons and functionality
+ * Get access to the default buttons by using `ButtonsFactory.instance`
+ * The factory will create the buttons if they don't exist yet, and return the existing ones if they do (this allows you to reparent or modify created buttons)
+ */
+export class ButtonsFactory {
+    static _instance;
+    /**
+     * Get access to the default HTML button factory.
+     * Use this to get or create default Needle Engine buttons that can be added to your HTML UI
+     * If you want to create a new factory and create new button instances instead of shared buttons, use `ButtonsFactory.create()` instead
+     */
+    static get instance() {
+        return this.getOrCreate();
+    }
+    /**
+     * Get access to the default HTML button factory.
+     * Use this to get or create default Needle Engine buttons that can be added to your HTML UI
+     * If you want to create a new factory and create new button instances instead of shared buttons, use `ButtonsFactory.create()` instead
+     */
+    static getOrCreate() {
+        if (!this._instance) {
+            this._instance = new ButtonsFactory();
+        }
+        return this._instance;
+    }
+    /** create a new buttons factory */
+    static create() {
+        return new ButtonsFactory();
+    }
+    _fullscreenButton;
+    /**
+     * Get the fullscreen button (or undefined if it doesn't exist yet). Call {@link ButtonsFactory.createFullscreenButton} to get or create it
+     */
+    get fullscreenButton() {
+        return this._fullscreenButton;
+    }
+    /** Create a fullscreen button (or return the existing one if it already exists) */
+    createFullscreenButton(ctx) {
+        if (this._fullscreenButton) {
+            return this._fullscreenButton;
+        }
+        // check for fullscreen support
+        if (!document.fullscreenEnabled) {
+            if (isDevEnvironment())
+                console.warn("NeedleMenu: Fullscreen button could not be created, device doesn't support the Fullscreen API");
+            return null;
+        }
+        const button = document.createElement("button");
+        this._fullscreenButton = button;
+        button.classList.add("fullscreen-button");
+        button.title = "Click to enter fullscreen mode";
+        const enterFullscreenIcon = getIconElement("fullscreen");
+        const exitFullscreenIcon = getIconElement("fullscreen_exit");
+        button.appendChild(enterFullscreenIcon);
+        button.onclick = () => {
+            if (document.fullscreenElement) {
+                document.exitFullscreen();
+            }
+            else {
+                if ("webkitRequestFullscreen" in ctx.domElement && typeof ctx.domElement["webkitRequestFullscreen"] === "function")
+                    ctx.domElement["webkitRequestFullscreen"]();
+                else if ("requestFullscreen" in ctx.domElement)
+                    ctx.domElement.requestFullscreen();
+            }
+        };
+        document.addEventListener("fullscreenchange", () => {
+            if (document.fullscreenElement) {
+                enterFullscreenIcon.remove();
+                button.appendChild(exitFullscreenIcon);
+                button.title = "Click to enter fullscreen mode";
+            }
+            else {
+                exitFullscreenIcon.remove();
+                button.appendChild(enterFullscreenIcon);
+                button.title = "Click to exit fullscreen mode";
+            }
+        });
+        // xr session started?
+        globalThis.addEventListener("needle-xrsession-start", () => {
+            button.style.display = "none";
+        });
+        globalThis.addEventListener("needle-xrsession-end", () => {
+            button.style.display = "";
+        });
+        return button;
+    }
+    _muteButton;
+    /** Get the mute button (or undefined if it doesn't exist yet). Call {@link ButtonsFactory.createMuteButton} to get or create it */
+    get muteButton() { return this._muteButton; }
+    /** Create a mute button (or return the existing one if it already exists) */
+    createMuteButton(ctx) {
+        if (this._muteButton) {
+            return this._muteButton;
+        }
+        const button = document.createElement("button");
+        this._muteButton = button;
+        button.classList.add("mute-button");
+        button.title = "Click to mute/unmute";
+        const muteIcon = getIconElement("volume_off");
+        const unmuteIcon = getIconElement("volume_up");
+        // save state in session storage (this needs consent)
+        // if (sessionStorage.getItem("muted") === "true") {
+        //     ctx.application.muted = true;
+        // }
+        // else {
+        //     ctx.application.muted = false;
+        // }
+        if (ctx.application.muted) {
+            button.appendChild(muteIcon);
+        }
+        else {
+            button.appendChild(unmuteIcon);
+        }
+        button.onclick = () => {
+            if (ctx.application.muted) {
+                muteIcon.remove();
+                button.appendChild(unmuteIcon);
+                ctx.application.muted = false;
+                // sessionStorage.setItem("muted", "false");
+            }
+            else {
+                unmuteIcon.remove();
+                button.appendChild(muteIcon);
+                ctx.application.muted = true;
+                // sessionStorage.setItem("muted", "true");
+            }
+        };
+        return button;
+    }
+    _qrButton;
+    /**
+     * Get the QR code button (or undefined if it doesn't exist yet). Call {@link ButtonsFactory.createQRCode} to get or create it
+     */
+    get qrButton() { return this._qrButton; }
+    _customQRButtonUrl;
+    /** Get or set the QR code button URL - this URL will open when scanning the QR code */
+    set qrButtonUrl(url) {
+        // make sure it's a URL
+        try {
+            new URL(url);
+            this._customQRButtonUrl = url;
+        }
+        catch (e) {
+            console.warn(`[Needle] QR code button URL is not a valid URL '${url}'`);
+        }
+    }
+    get qrButtonUrl() {
+        return this._customQRButtonUrl || window.location.href;
+    }
+    /** Create a QR code button (or return the existing one if it already exists)
+     * The QR code button will show a QR code that can be scanned to open the current page on a phone
+     * The QR code will be generated with the current URL when the button is clicked
+     * @returns the QR code button element
+     */
+    createQRCode() {
+        if (this._qrButton)
+            return this._qrButton;
+        const instance = this;
+        const qrCodeButton = document.createElement("button");
+        this._qrButton = qrCodeButton;
+        qrCodeButton.innerText = "QR Code";
+        qrCodeButton.prepend(getIconElement("qr_code"));
+        qrCodeButton.title = "Scan this QR code with your phone to open this page";
+        this.hideElementDuringXRSession(qrCodeButton);
+        const qrCodeContainer = document.createElement("div");
+        qrCodeContainer.style.cssText = `
+            position: fixed;
+            display: inline-block;
+            padding: 0.5rem;
+            background-color: white;
+            border-radius: 0.4rem;
+            cursor: pointer;
+            z-index: 1000;
+            box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
+        `;
+        const qrCodeElement = document.createElement("div");
+        qrCodeElement.classList.add("qr-code-container");
+        qrCodeContainer.appendChild(qrCodeElement);
+        qrCodeButton.addEventListener("click", () => {
+            if (qrCodeContainer.parentNode)
+                return hideQRCode();
+            if (isDevEnvironment() && window.location.href.includes("://localhost")) {
+                showBalloonWarning("To access your website from another device in the same local network you have to use the IP address instead of localhost. The IP address is logged in your development server console when you start the server.");
+            }
+            showQRCode();
+        });
+        /** shows the QRCode near the button */
+        async function showQRCode() {
+            // generate the qr code when the button is clicked
+            // this ensures that we get the QRcode with the latest URL
+            await generateAndInsertQRCode();
+            // TODO: make sure it doesnt overflow the screen
+            // we need to add the qrCodeContainer to the body to get the correct size
+            document.body.appendChild(qrCodeContainer);
+            const containerRect = qrCodeElement.getBoundingClientRect();
+            const buttonRect = qrCodeButton.getBoundingClientRect();
+            qrCodeContainer.style.left = (buttonRect.left + buttonRect.width * .5 - containerRect.width * .5) + "px";
+            const isButtonInTopHalf = buttonRect.top < containerRect.height;
+            const padding = "1.3rem";
+            if (isButtonInTopHalf)
+                qrCodeContainer.style.top = `calc(${buttonRect.bottom}px + ${qrCodeContainer.style.padding} + 0.0rem)`;
+            else
+                qrCodeContainer.style.top = `calc(${buttonRect.top - containerRect.height}px - ${qrCodeContainer.style.padding} - ${padding})`;
+            qrCodeContainer.style.opacity = "0";
+            qrCodeContainer.style.pointerEvents = "all";
+            qrCodeContainer.style.transition = "opacity 0.2s ease-in-out";
+            // context click to hide the QR code again, if we dont timeout the event will be triggered immediately
+            setTimeout(() => {
+                qrCodeContainer.style.opacity = "1";
+                window.addEventListener("click", hideQRCode, { once: true });
+            });
+            window.addEventListener("resize", hideQRCode);
+            window.addEventListener("scroll", hideQRCode);
+            // if we're in fullscreen:
+            if (document.fullscreenElement) {
+                document.fullscreenElement.appendChild(qrCodeContainer);
+            }
+            else
+                document.body.appendChild(qrCodeContainer);
+        }
+        /** hides to QRCode overlay and unsubscribes from events */
+        function hideQRCode() {
+            qrCodeContainer.style.pointerEvents = "none";
+            qrCodeContainer.style.transition = "opacity 0.2s";
+            qrCodeContainer.style.opacity = "0";
+            setTimeout(() => qrCodeContainer.parentNode?.removeChild(qrCodeContainer), 500);
+            window.removeEventListener("click", hideQRCode);
+            window.removeEventListener("resize", hideQRCode);
+            window.removeEventListener("scroll", hideQRCode);
+        }
+        ;
+        /** generates a QR code and inserts it into the qrCodeElement */
+        async function generateAndInsertQRCode() {
+            const size = 200;
+            const code = await generateQRCode({
+                text: instance.qrButtonUrl,
+                width: size,
+                height: size,
+            });
+            qrCodeElement.innerHTML = "";
+            qrCodeElement.appendChild(code);
+        }
+        // lazily create the qr button
+        qrCodeButton.addEventListener("pointerenter", () => {
+            generateAndInsertQRCode();
+        }, { once: true });
+        return qrCodeButton;
+    }
+    hideElementDuringXRSession(element) {
+        onXRSessionStart(_ => {
+            element["previous-display"] = element.style.display;
+            element.style.display = "none";
+        });
+        onXRSessionEnd(_ => {
+            if (element["previous-display"] != undefined)
+                element.style.display = element["previous-display"];
+        });
+    }
+}
 //# sourceMappingURL=buttons.js.map

package/lib/engine/webcomponents/fonts.d.ts

@@ -1,9 +1,9 @@
-declare type LoadFontOptions = {
-    element?: HTMLElement | DocumentFragment;
-    loadedCallback?: () => void;
-};
-export declare function loadFont(url: string, opts?: LoadFontOptions): void;
-/** Ensure the fonts that needle engine uses are loaded */
-export declare function ensureFonts(): void;
-export declare const iconFontUrl = "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=block";
-export {};
+declare type LoadFontOptions = {
+    element?: HTMLElement | DocumentFragment;
+    loadedCallback?: () => void;
+};
+export declare function loadFont(url: string, opts?: LoadFontOptions): void;
+/** Ensure the fonts that needle engine uses are loaded */
+export declare function ensureFonts(): void;
+export declare const iconFontUrl = "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=block";
+export {};

package/lib/engine/webcomponents/fonts.js

@@ -1,33 +1,33 @@
-export function loadFont(url, opts) {
-    const element = opts?.element || document.head;
-    // Workaround for font loading not being supported in ShadowDOM:
-    // Add font import to document header.
-    // Note that this is slower than it could be, ideally the font would be prefetched,
-    // but for that it needs to be in the actual document and not added by JS.
-    const elements = Array.from(element.querySelectorAll(`link[rel=stylesheet][href*='${url}']`));
-    if (elements.length <= 0) {
-        const fontLink = document.createElement("link");
-        fontLink.href = url;
-        fontLink.rel = "stylesheet";
-        element.appendChild(fontLink);
-        elements.push(fontLink);
-    }
-    if (opts?.loadedCallback) {
-        for (let i = 0; i < elements.length; i++) {
-            if (opts?.loadedCallback) {
-                const fontLink = elements[i];
-                fontLink.addEventListener("load", opts.loadedCallback);
-            }
-        }
-    }
-}
-/** Ensure the fonts that needle engine uses are loaded */
-export function ensureFonts() {
-    loadFont("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");
-}
-// add to document head AND shadow dom to work
-// using a static font because the variable font is quite large
-// eslint-disable-next-line no-secrets/no-secrets
-export const iconFontUrl = "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=block";
-// const fontUrl = "./include/fonts/MaterialSymbolsOutlined.css"; // for offline support
+export function loadFont(url, opts) {
+    const element = opts?.element || document.head;
+    // Workaround for font loading not being supported in ShadowDOM:
+    // Add font import to document header.
+    // Note that this is slower than it could be, ideally the font would be prefetched,
+    // but for that it needs to be in the actual document and not added by JS.
+    const elements = Array.from(element.querySelectorAll(`link[rel=stylesheet][href*='${url}']`));
+    if (elements.length <= 0) {
+        const fontLink = document.createElement("link");
+        fontLink.href = url;
+        fontLink.rel = "stylesheet";
+        element.appendChild(fontLink);
+        elements.push(fontLink);
+    }
+    if (opts?.loadedCallback) {
+        for (let i = 0; i < elements.length; i++) {
+            if (opts?.loadedCallback) {
+                const fontLink = elements[i];
+                fontLink.addEventListener("load", opts.loadedCallback);
+            }
+        }
+    }
+}
+/** Ensure the fonts that needle engine uses are loaded */
+export function ensureFonts() {
+    loadFont("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");
+}
+// add to document head AND shadow dom to work
+// using a static font because the variable font is quite large
+// eslint-disable-next-line no-secrets/no-secrets
+export const iconFontUrl = "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=block";
+// const fontUrl = "./include/fonts/MaterialSymbolsOutlined.css"; // for offline support
 //# sourceMappingURL=fonts.js.map

package/lib/engine/webcomponents/icons.d.ts

@@ -1,9 +1,9 @@
-import { Texture } from "three";
-/** Returns a HTML element containing an icon. Using https://fonts.google.com/icons
- * As a string you should pass in the name of the icon, e.g. "add" or "delete"
- * @returns HTMLElement containing the icon
-*/
-export declare function getIconElement(str: string): HTMLElement;
-/**@returns true if the element is an needle engine icon element */
-export declare function isIconElement(element: Node): boolean;
-export declare function getIconTexture(str: string): Promise<Texture | null>;
+import { Texture } from "three";
+/** Returns a HTML element containing an icon. Using https://fonts.google.com/icons
+ * As a string you should pass in the name of the icon, e.g. "add" or "delete"
+ * @returns HTMLElement containing the icon
+*/
+export declare function getIconElement(str: string): HTMLElement;
+/**@returns true if the element is an needle engine icon element */
+export declare function isIconElement(element: Node): boolean;
+export declare function getIconTexture(str: string): Promise<Texture | null>;