@needle-tools/engine 3.28.7-beta → 3.28.7-beta.1

package/src/engine/engine_element.ts

@@ -1,593 +1,593 @@
-import { Context, ContextCreateArgs, LoadingProgressArgs } from "./engine_setup.js";
-import { AROverlayHandler, arContainerClassName } from "./engine_element_overlay.js";
-import { GameObject } from "../engine-components/Component.js";
-import { calculateProgress01, EngineLoadingView, type ILoadingViewHandler } from "./engine_element_loading.js";
-import { getParam } from "./engine_utils.js";
-import { setDracoDecoderPath, setDracoDecoderType, setKtx2TranscoderPath } from "./engine_loaders.js";
-import { getLoader, registerLoader } from "../engine/engine_gltf.js";
-import { NeedleGltfLoader } from "./engine_scenetools.js";
-import { type INeedleEngineComponent, type LoadedGLTF } from "./engine_types.js";
-import { isDevEnvironment, showBalloonWarning } from "./debug/index.js";
-import { hasCommercialLicense } from "./engine_license.js";
-import { VERSION } from "./engine_constants.js";
-
-// 
-// registering loader here too to make sure it's imported when using engine via vanilla js
-registerLoader(NeedleGltfLoader);
-
-const debug = getParam("debugwebcomponent");
-
-const htmlTagName = "needle-engine";
-const vrContainerClassName = "vr";
-const desktopContainerClassname = "desktop";
-const knownClasses = [arContainerClassName, vrContainerClassName, desktopContainerClassname];
-const arSessionActiveClassName = "ar-session-active";
-const desktopSessionActiveClassName = "desktop-session-active";
-
-const observedAttributes = [
-    "hash",
-    "src",
-    "camera-controls",
-    "loadstart",
-    "progress",
-    "loadfinished",
-    "dracoDecoderPath",
-    "dracoDecoderType",
-    "ktx2DecoderPath"
-]
-
-// https://developers.google.com/web/fundamentals/web-components/customelements
-/** <needle-engine> web component. See @type {NeedleEngineAttributes} attributes for supported attributes 
- * @type {import ("./engine_element_attributes.js").NeedleEngineAttributes}
-*/
-export class NeedleEngineHTMLElement extends HTMLElement implements INeedleEngineComponent {
-
-    static get observedAttributes() {
-        return observedAttributes
-    }
-
-    public get loadingProgress01(): number { return this._loadingProgress01; }
-    public get loadingFinished(): boolean { return this.loadingProgress01 > .999; }
-
-    public get cameraControls(): boolean {
-        const attr = this.getAttribute("camera-controls");
-        if (attr === null || attr === "False" || attr === "false" || attr === "0") return false;
-        return true;
-    }
-
-    public getContext(): Promise<Context> {
-        return new Promise((res, _rej) => {
-            if (this._context && this.loadingFinished) {
-                res(this._context);
-            }
-            else {
-                const cb = () => {
-                    this.removeEventListener("loadfinished", cb);
-                    if (this._context && this.loadingFinished) {
-                        res(this._context);
-                    }
-                };
-                this.addEventListener("loadfinished", cb);
-            }
-        });
-    }
-
-    public get context() { return this._context; }
-
-    /**@obsolete use context */
-    public get Context() { return this._context; }
-    /**@obsolete use Needle.GameObject */
-    private gameObject = GameObject;
-    /**@obsolete use Needle.GameObject */
-    private GameObject = GameObject;
-
-    private _context: Context;
-    private _overlay_ar: AROverlayHandler;
-    private _loadingProgress01: number = 0;
-    private _loadingView?: ILoadingViewHandler;
-    private _previousSrc: string | null | string[] = null;
-    /** set to true after <needle-engine> did load completely at least once. Set to false when <needle-engine> is removed from the document */
-    private _didFullyLoad: boolean = false;
-
-    constructor() {
-        super();
-        this._overlay_ar = new AROverlayHandler();
-        // TODO: do we want to rename this event?
-        this.addEventListener("ready", this.onReady);
- 
-        this.attachShadow({ mode: 'open' });
-        const template = document.createElement('template');
-        template.innerHTML = `<style>
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
-
-    :host {
-        position: absolute;
-        display: block;
-        width: max(600px, 100%);
-        height: max(300px, 100%);
-    }
-
-    @media (max-width: 600px) {
-        :host {
-            width: 100%;
-        }
-    }
-    @media (max-height: 300px) {
-        :host {
-            height: 100%;
-        }
-    }
-    :host canvas {   
-        position: absolute;
-        user-select: none;
-        /** allow touch panning but no pinch zoom **/
-        /** but this doesnt work yet: 
-         * touch-action: pan-x, pan-y;
-         **/
-    }
-    :host .content {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        visibility: visible;
-        z-index: 500; /* < must be less than the webxr buttons element */
-        pointer-events: none;
-    }
-    :host .overlay-content {
-        position: absolute;
-        user-select: auto;
-        pointer-events: all;
-    }
-    :host slot[name="quit-ar"]:hover {
-        cursor: pointer;
-    }
-    :host .quit-ar-button {
-        position: absolute;
-        top: 40px;
-        right: 20px;
-        z-index: 9999;
-    }
-</style>
-<canvas></canvas>
-<div class="content">
-    <slot class="overlay-content"></slot>
-</div>
-`;
-
-        if (this.shadowRoot)
-            this.shadowRoot.appendChild(template.content.cloneNode(true));
-
-        this._context = new Context({ domElement: this });
-        this.addEventListener("error", this.onError);
-    }
-
-
-    async connectedCallback() {
-        if (debug) {
-            console.log("<needle-engine> connected");
-        }
-
-        this.onSetupDesktop();
-
-        if (!this.getAttribute("src")) {
-            const global = globalThis["needle:codegen_files"] as unknown as string;
-            if (global) {
-                if (debug) console.log("globalThis[\"needle:codegen_files\"]", global);
-                this.setAttribute("src", global);
-            }
-        }
-
-        // we have to wait because codegen does set the src attribute when it's loaded
-        // which might happen after the element is connected
-        // if the `src` is then still null we want to initialize the default scene
-        const loadId = this._loadId;
-        setTimeout(() => {
-            if (this.isConnected === false) return;
-            if (loadId !== this._loadId) return;
-            this.onLoad();
-        }, 1);
-
-        if (VERSION?.length) {
-            this.setAttribute("version", VERSION);
-        }
-    }
-
-    disconnectedCallback() {
-        this._didFullyLoad = false;
-        const keepAlive = this.getAttribute("keep-alive");
-        if (debug) console.warn("<needle-engine> disconnected, keep-alive:", keepAlive);
-        if (keepAlive === undefined || keepAlive !== "true") {
-            console.warn("<needle-engine> dispose!");
-            this._context?.dispose();
-            this._context = null!;
-            this._lastSourceFiles = null;
-            this._loadId += 1;
-        }
-    }
-
-    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
-        if (debug) console.log("attributeChangedCallback", name, _oldValue, newValue);
-        switch (name) {
-            case "src":
-                if (debug) console.warn("src changed to type:", typeof newValue, ", from \"", _oldValue, "\" to \"", newValue, "\"")
-                this.onLoad();
-                // this._watcher?.onSourceChanged(newValue);
-                break;
-            case "hash":
-                if (this._context) {
-                    this._context.hash = newValue;
-                }
-                break;
-            case "loadstart":
-            case "progress":
-            case "loadfinished":
-                if (typeof newValue === "string" && newValue.length > 0) {
-                    if (debug) console.log(name + " attribute changed", newValue);
-                    this.registerEventFromAttribute(name, newValue);
-                }
-                break;
-            case "dracoDecoderPath":
-                if (debug) console.log("dracoDecoderPath", newValue);
-                setDracoDecoderPath(newValue);
-                break;
-            case "dracoDecoderType":
-                if (newValue === "wasm" || newValue === "js") {
-                    if (debug) console.log("dracoDecoderType", newValue);
-                    setDracoDecoderType(newValue);
-                }
-                else console.error("Invalid dracoDecoderType", newValue, "expected js or wasm");
-                break;
-            case "ktx2DecoderPath":
-                if (debug) console.log("ktx2DecoderPath", newValue);
-                setKtx2TranscoderPath(newValue);
-                break;
-        }
-    }
-
-    private _loadId: number = 0;
-    private _lastSourceFiles: Array<string> | null = null;
-
-    private async onLoad() {
-
-        if (!this.isConnected) return;
-        if (!this._context) {
-            if (debug) console.warn("Create new context");
-            this._context = new Context({ domElement: this });
-        }
-
-        if (!this._context) {
-            console.error("Needle Engine: Context not initialized");
-            return;
-        }
-
-        const filesToLoad = this.getSourceFiles();
-        if (filesToLoad === null || filesToLoad === undefined || filesToLoad.length <= 0) {
-            if (debug) console.warn("Clear scene", filesToLoad);
-            this._context.clear();
-        }
-        else if (!this.checkIfSourceHasChanged(filesToLoad, this._lastSourceFiles)) {
-            return;
-        }
-
-        this._lastSourceFiles = filesToLoad;
-        const loadId = ++this._loadId;
-        const alias = this.getAttribute("alias");
-        this.classList.add("loading");
-
-
-
-        // Loading start events
-        const allowOverridingDefaultLoading = hasCommercialLicense();
-        // default loading can be overriden by calling preventDefault in the onload start event
-        this.ensureLoadStartIsRegistered();
-        let useDefaultLoading = this.dispatchEvent(new CustomEvent("loadstart", {
-            detail: {
-                context: this._context,
-                alias: alias
-            },
-            cancelable: true
-        }));
-        if (allowOverridingDefaultLoading) {
-            // Handle the <needle-engine hide-loading-overlay> attribute
-            const hideOverlay = this.getAttribute("hide-loading-overlay");
-            if (hideOverlay !== null  && hideOverlay !== undefined && hideOverlay !== "0") {
-                useDefaultLoading = false;
-            }
-        }
-        // for local development we allow overriding the loading screen - but we notify the user that it won't work in a deployed environment
-        if (useDefaultLoading === false && !allowOverridingDefaultLoading) {
-            if (!isDevEnvironment())
-                useDefaultLoading = true;
-            console.warn("Needle Engine: You need a commercial license to override the default loading view. Visit https://needle.tools/pricing");
-            if (isDevEnvironment()) showBalloonWarning("You need a <a target=\"_blank\" href=\"https://needle.tools/pricing\">commercial license</a> to override the default loading view. This will not work in production.");
-        }
-        // create the loading view idf necessary
-        if (!this._loadingView && useDefaultLoading)
-            this._loadingView = new EngineLoadingView(this);
-        if (useDefaultLoading) {
-            // Only show the loading screen immedialty if we haven't loaded anything before
-            if (this._didFullyLoad !== true)
-                this._loadingView?.onLoadingBegin("begin load");
-            else {
-                // If we have loaded a glb previously and are loading a new glb due to e.g. src change
-                // we don't want to show the loading screen immediately to avoid blinking if the glb to be loaded is tiny
-                // so we wait a bit and only show the loading screen if the loading takes longer than a short moment
-                setTimeout(() => {
-                    // If the loading progress is already above ~ 70% we also don't need to show the loading screen anymore
-                    if (this._loadingView && this._loadingProgress01 < 0.3 && this._loadId === loadId)
-                        this._loadingView.onLoadingBegin("begin load");
-                }, 300)
-            }
-        }
-        if (debug) console.warn("--------------", loadId, "Needle Engine: Begin loading", alias ?? "", filesToLoad);
-        this.onBeforeBeginLoading();
-
-        const loadedFiles: Array<LoadedGLTF> = [];
-        const progressEventDetail = {
-            context: this._context,
-            name: "",
-            progress: {} as ProgressEvent,
-            index: 0,
-            count: filesToLoad.length,
-            totalProgress01: this._loadingProgress01
-        };
-        const progressEvent = new CustomEvent("progress", { detail: progressEventDetail });
-        const args: ContextCreateArgs = {
-            files: filesToLoad,
-            onLoadingProgress: evt => {
-                evt.name = getNameFromUrl(evt.name);
-                if (useDefaultLoading) this._loadingView?.onLoadingUpdate(evt);
-                progressEventDetail.name = evt.name;
-                progressEventDetail.progress = evt.progress;
-                this._loadingProgress01 = calculateProgress01(evt);
-                progressEventDetail.totalProgress01 = this._loadingProgress01;
-                this.dispatchEvent(progressEvent);
-            },
-            onLoadingFinished: (_index, file, glTF) => {
-                if (glTF) {
-                    loadedFiles.push({
-                        src: file,
-                        file: glTF
-                    });
-                }
-            }
-        }
-
-        const currentHash = this.getAttribute("hash");
-        if (currentHash !== null && currentHash !== undefined)
-            this._context.hash = currentHash;
-        this._context.alias = alias;
-        await this._context.create(args);
-        if (this._loadId !== loadId) return;
-        if (debug) console.warn("--------------", loadId, "Needle Engine: finished loading", alias ?? "", filesToLoad);
-        this._loadingProgress01 = 1;
-        if (useDefaultLoading) {
-            this._loadingView?.onLoadingUpdate(1, "creating scene");
-        }
-        this._didFullyLoad = true;
-        this.classList.remove("loading");
-        this.classList.add("loading-finished");
-        this.dispatchEvent(new CustomEvent("loadfinished", {
-            detail: {
-                context: this._context,
-                src: alias,
-                loadedFiles: loadedFiles,
-            }
-        }));
-    }
-
-    /** called by the context when the first frame has been rendered */
-    private onReady = () => this._loadingView?.onLoadingFinished();
-    private onError = () => this._loadingView?.setMessage("Loading failed!");
-
-    private internalSetLoadingMessage(str: string) {
-        this._loadingView?.setMessage(str);
-    }
-
-    private getSourceFiles(): Array<string> {
-        const src: string | null | string[] = this.getAttribute("src");
-        if (!src) return [];
-
-        let filesToLoad: Array<string>;
-        // When using globalThis the src is an array already
-        if (Array.isArray(src)) {
-            filesToLoad = src;
-        }
-        // When assigned from codegen the src is a stringified array
-        else if (src.startsWith("[") && src.endsWith("]")) {
-            filesToLoad = JSON.parse(src);
-        }
-        // src.toString for an array produces a comma separated list
-        else if (src.includes(",")) {
-            filesToLoad = src.split(",");
-        }
-        else filesToLoad = [src];
-
-        // filter out invalid or empty strings
-        for (let i = filesToLoad.length - 1; i >= 0; i--) {
-            const file = filesToLoad[i];
-            if (file === "null" || file === "undefined" || file?.length <= 0)
-                filesToLoad.splice(i, 1);
-        }
-
-        return filesToLoad;
-    }
-
-    private checkIfSourceHasChanged(current: Array<string> | null, previous: Array<string> | null): boolean {
-        if (current?.length !== previous?.length) return true;
-        if (current == null && previous !== null) return true;
-        if (current !== null && previous == null) return true;
-        if (current !== null && previous !== null) {
-            for (let i = 0; i < current?.length; i++) {
-                if (current[i] !== previous[i]) return true;
-            }
-        }
-        return false;
-    }
-
-    private _previouslyRegisteredMap: Map<string, Function> = new Map();
-    private ensureLoadStartIsRegistered() {
-        const attributeValue = this.getAttribute("loadstart");
-        if (attributeValue)
-            this.registerEventFromAttribute("loadstart", attributeValue);
-    }
-    private registerEventFromAttribute(eventName: string, code: string) {
-        const prev = this._previouslyRegisteredMap.get(eventName);
-        if (prev) {
-            this._previouslyRegisteredMap.delete(eventName);
-            this.removeEventListener(eventName, prev as any);
-        }
-        if (typeof code === "string" && code.length > 0) {
-            try {
-                // indirect eval https://esbuild.github.io/content-types/#direct-eval
-                const fn = (0, eval)(code);
-                // const fn = new Function(newValue);
-                if (typeof fn === "function") {
-                    this._previouslyRegisteredMap.set(eventName, fn);
-                    this.addEventListener(eventName, evt => fn?.call(globalThis, this._context, evt));
-                }
-            }
-            catch (err) {
-                console.error("Error registering event " + eventName + "=\"" + code + "\" failed with the following error:\n", err);
-            }
-        }
-    }
-
-    getAROverlayContainer(): HTMLElement {
-        return this._overlay_ar.createOverlayContainer(this);
-    }
-
-    getVROverlayContainer(): HTMLElement | null {
-        for (let i = 0; i < this.children.length; i++) {
-            const ch = this.children[i] as HTMLElement;
-            if (ch.classList.contains("vr"))
-                return ch;
-        }
-        return null;
-    }
-
-    onEnterAR(session: XRSession, overlayContainer: HTMLElement) {
-        this.onSetupAR();
-        this._overlay_ar.onBegin(this._context!, overlayContainer, session);
-        this.dispatchEvent(new CustomEvent("enter-ar", { detail: { session: session, context: this._context, htmlContainer: this._overlay_ar?.ARContainer } }));
-    }
-
-    onExitAR(session: XRSession) {
-        this._overlay_ar.onEnd(this._context!);
-        this.onSetupDesktop();
-        this.dispatchEvent(new CustomEvent("exit-ar", { detail: { session: session, context: this._context, htmlContainer: this._overlay_ar?.ARContainer } }));
-    }
-
-    onEnterVR(session: XRSession) {
-        this.onSetupVR();
-        this.dispatchEvent(new CustomEvent("enter-vr", { detail: { session: session, context: this._context } }));
-    }
-
-    onExitVR(session: XRSession) {
-        this.onSetupDesktop();
-        this.dispatchEvent(new CustomEvent("exit-vr", { detail: { session: session, context: this._context } }));
-    }
-
-    private onSetupAR() {
-        this.classList.add(arSessionActiveClassName);
-        this.classList.remove(desktopSessionActiveClassName);
-        const arContainer = this.getAROverlayContainer();
-        if (debug) console.warn("onSetupAR:", arContainer)
-        if (arContainer) {
-            arContainer.classList.add(arSessionActiveClassName);
-            arContainer.classList.remove(desktopSessionActiveClassName);
-        }
-        this.foreachHtmlElement(ch => this.setupElementsForMode(ch, arContainerClassName));
-    }
-
-    private onSetupVR() {
-        this.classList.remove(arSessionActiveClassName);
-        this.classList.remove(desktopSessionActiveClassName);
-        this.foreachHtmlElement(ch => this.setupElementsForMode(ch, vrContainerClassName));
-    }
-
-    private onSetupDesktop() {
-        this.classList.remove(arSessionActiveClassName);
-        this.classList.add(desktopSessionActiveClassName);
-        const arContainer = this.getAROverlayContainer();
-        if (arContainer) {
-            arContainer.classList.remove(arSessionActiveClassName);
-            arContainer.classList.add(desktopSessionActiveClassName);
-        }
-        this.foreachHtmlElement(ch => this.setupElementsForMode(ch, desktopContainerClassname));
-    }
-
-    private setupElementsForMode(el: HTMLElement, currentSessionType: string, _session: XRSession | null = null) {
-        if (el === this._context?.renderer?.domElement) return;
-        if (el.id === "VRButton" || el.id === "ARButton") return;
-
-        const classList = el.classList;
-        if (classList.contains(currentSessionType)) {
-            el.style.visibility = "visible";
-            if (el.style.display === "none")
-                el.style.display = "block";
-        }
-        else {
-            // only modify style for elements that have a known class (e.g. marked as vr ar desktop)
-            for (const known of knownClasses) {
-                if (el.classList.contains(known)) {
-                    el.style.visibility = "hidden";
-                    el.style.display = "none";
-                }
-            }
-        }
-    }
-
-    private foreachHtmlElement(cb: (HTMLElement) => void) {
-        for (let i = 0; i < this.children.length; i++) {
-            const ch = this.children[i] as HTMLElement;
-            if (ch.style) cb(ch);
-        }
-    }
-
-    private onBeforeBeginLoading() {
-        const customDracoDecoderPath = this.getAttribute("dracoDecoderPath");
-        if (customDracoDecoderPath) {
-            if (debug) console.log("using custom draco decoder path", customDracoDecoderPath);
-            setDracoDecoderPath(customDracoDecoderPath);
-        }
-        const customDracoDecoderType = this.getAttribute("dracoDecoderType");
-        if (customDracoDecoderType) {
-            if (debug) console.log("using custom draco decoder type", customDracoDecoderType);
-            setDracoDecoderType(customDracoDecoderType);
-        }
-        const customKtx2DecoderPath = this.getAttribute("ktx2DecoderPath");
-        if (customKtx2DecoderPath) {
-            if (debug) console.log("using custom ktx2 decoder path", customKtx2DecoderPath);
-            setKtx2TranscoderPath(customKtx2DecoderPath);
-        }
-    }
-}
-
-if (typeof window !== "undefined" && !window.customElements.get(htmlTagName))
-    window.customElements.define(htmlTagName, NeedleEngineHTMLElement);
-
-
-
-
-
-
-
-
-function getHashFromString(str: string) {
-    let hash = 0;
-    for (let i = 0; i < str.length; i++) {
-        hash = str.charCodeAt(i) + ((hash << 5) - hash);
-    }
-    return hash;
-}
-
-function getNameFromUrl(str: string) {
-    const parts = str.split("/");
-    let name = parts[parts.length - 1];
-    // Remove params
-    const index = name.indexOf("?")
-    if (index > 0)
-        name = name.substring(0, index);
-    return decodeURIComponent(name);
+import { Context, ContextCreateArgs, LoadingProgressArgs } from "./engine_setup.js";
+import { AROverlayHandler, arContainerClassName } from "./engine_element_overlay.js";
+import { GameObject } from "../engine-components/Component.js";
+import { calculateProgress01, EngineLoadingView, type ILoadingViewHandler } from "./engine_element_loading.js";
+import { getParam } from "./engine_utils.js";
+import { setDracoDecoderPath, setDracoDecoderType, setKtx2TranscoderPath } from "./engine_loaders.js";
+import { getLoader, registerLoader } from "../engine/engine_gltf.js";
+import { NeedleGltfLoader } from "./engine_scenetools.js";
+import { type INeedleEngineComponent, type LoadedGLTF } from "./engine_types.js";
+import { isDevEnvironment, showBalloonWarning } from "./debug/index.js";
+import { hasCommercialLicense } from "./engine_license.js";
+import { VERSION } from "./engine_constants.js";
+
+// 
+// registering loader here too to make sure it's imported when using engine via vanilla js
+registerLoader(NeedleGltfLoader);
+
+const debug = getParam("debugwebcomponent");
+
+const htmlTagName = "needle-engine";
+const vrContainerClassName = "vr";
+const desktopContainerClassname = "desktop";
+const knownClasses = [arContainerClassName, vrContainerClassName, desktopContainerClassname];
+const arSessionActiveClassName = "ar-session-active";
+const desktopSessionActiveClassName = "desktop-session-active";
+
+const observedAttributes = [
+    "hash",
+    "src",
+    "camera-controls",
+    "loadstart",
+    "progress",
+    "loadfinished",
+    "dracoDecoderPath",
+    "dracoDecoderType",
+    "ktx2DecoderPath"
+]
+
+// https://developers.google.com/web/fundamentals/web-components/customelements
+/** <needle-engine> web component. See @type {NeedleEngineAttributes} attributes for supported attributes 
+ * @type {import ("./engine_element_attributes.js").NeedleEngineAttributes}
+*/
+export class NeedleEngineHTMLElement extends HTMLElement implements INeedleEngineComponent {
+
+    static get observedAttributes() {
+        return observedAttributes
+    }
+
+    public get loadingProgress01(): number { return this._loadingProgress01; }
+    public get loadingFinished(): boolean { return this.loadingProgress01 > .999; }
+
+    public get cameraControls(): boolean {
+        const attr = this.getAttribute("camera-controls");
+        if (attr === null || attr === "False" || attr === "false" || attr === "0") return false;
+        return true;
+    }
+
+    public getContext(): Promise<Context> {
+        return new Promise((res, _rej) => {
+            if (this._context && this.loadingFinished) {
+                res(this._context);
+            }
+            else {
+                const cb = () => {
+                    this.removeEventListener("loadfinished", cb);
+                    if (this._context && this.loadingFinished) {
+                        res(this._context);
+                    }
+                };
+                this.addEventListener("loadfinished", cb);
+            }
+        });
+    }
+
+    public get context() { return this._context; }
+
+    /**@obsolete use context */
+    public get Context() { return this._context; }
+    /**@obsolete use Needle.GameObject */
+    private gameObject = GameObject;
+    /**@obsolete use Needle.GameObject */
+    private GameObject = GameObject;
+
+    private _context: Context;
+    private _overlay_ar: AROverlayHandler;
+    private _loadingProgress01: number = 0;
+    private _loadingView?: ILoadingViewHandler;
+    private _previousSrc: string | null | string[] = null;
+    /** set to true after <needle-engine> did load completely at least once. Set to false when <needle-engine> is removed from the document */
+    private _didFullyLoad: boolean = false;
+
+    constructor() {
+        super();
+        this._overlay_ar = new AROverlayHandler();
+        // TODO: do we want to rename this event?
+        this.addEventListener("ready", this.onReady);
+ 
+        this.attachShadow({ mode: 'open' });
+        const template = document.createElement('template');
+        template.innerHTML = `<style>
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
+
+    :host {
+        position: absolute;
+        display: block;
+        width: max(600px, 100%);
+        height: max(300px, 100%);
+    }
+
+    @media (max-width: 600px) {
+        :host {
+            width: 100%;
+        }
+    }
+    @media (max-height: 300px) {
+        :host {
+            height: 100%;
+        }
+    }
+    :host canvas {   
+        position: absolute;
+        user-select: none;
+        /** allow touch panning but no pinch zoom **/
+        /** but this doesnt work yet: 
+         * touch-action: pan-x, pan-y;
+         **/
+    }
+    :host .content {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        visibility: visible;
+        z-index: 500; /* < must be less than the webxr buttons element */
+        pointer-events: none;
+    }
+    :host .overlay-content {
+        position: absolute;
+        user-select: auto;
+        pointer-events: all;
+    }
+    :host slot[name="quit-ar"]:hover {
+        cursor: pointer;
+    }
+    :host .quit-ar-button {
+        position: absolute;
+        top: 40px;
+        right: 20px;
+        z-index: 9999;
+    }
+</style>
+<canvas></canvas>
+<div class="content">
+    <slot class="overlay-content"></slot>
+</div>
+`;
+
+        if (this.shadowRoot)
+            this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+        this._context = new Context({ domElement: this });
+        this.addEventListener("error", this.onError);
+    }
+
+
+    async connectedCallback() {
+        if (debug) {
+            console.log("<needle-engine> connected");
+        }
+
+        this.onSetupDesktop();
+
+        if (!this.getAttribute("src")) {
+            const global = globalThis["needle:codegen_files"] as unknown as string;
+            if (global) {
+                if (debug) console.log("globalThis[\"needle:codegen_files\"]", global);
+                this.setAttribute("src", global);
+            }
+        }
+
+        // we have to wait because codegen does set the src attribute when it's loaded
+        // which might happen after the element is connected
+        // if the `src` is then still null we want to initialize the default scene
+        const loadId = this._loadId;
+        setTimeout(() => {
+            if (this.isConnected === false) return;
+            if (loadId !== this._loadId) return;
+            this.onLoad();
+        }, 1);
+
+        if (VERSION?.length) {
+            this.setAttribute("version", VERSION);
+        }
+    }
+
+    disconnectedCallback() {
+        this._didFullyLoad = false;
+        const keepAlive = this.getAttribute("keep-alive");
+        if (debug) console.warn("<needle-engine> disconnected, keep-alive:", keepAlive);
+        if (keepAlive === undefined || keepAlive !== "true") {
+            console.warn("<needle-engine> dispose!");
+            this._context?.dispose();
+            this._context = null!;
+            this._lastSourceFiles = null;
+            this._loadId += 1;
+        }
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        if (debug) console.log("attributeChangedCallback", name, _oldValue, newValue);
+        switch (name) {
+            case "src":
+                if (debug) console.warn("src changed to type:", typeof newValue, ", from \"", _oldValue, "\" to \"", newValue, "\"")
+                this.onLoad();
+                // this._watcher?.onSourceChanged(newValue);
+                break;
+            case "hash":
+                if (this._context) {
+                    this._context.hash = newValue;
+                }
+                break;
+            case "loadstart":
+            case "progress":
+            case "loadfinished":
+                if (typeof newValue === "string" && newValue.length > 0) {
+                    if (debug) console.log(name + " attribute changed", newValue);
+                    this.registerEventFromAttribute(name, newValue);
+                }
+                break;
+            case "dracoDecoderPath":
+                if (debug) console.log("dracoDecoderPath", newValue);
+                setDracoDecoderPath(newValue);
+                break;
+            case "dracoDecoderType":
+                if (newValue === "wasm" || newValue === "js") {
+                    if (debug) console.log("dracoDecoderType", newValue);
+                    setDracoDecoderType(newValue);
+                }
+                else console.error("Invalid dracoDecoderType", newValue, "expected js or wasm");
+                break;
+            case "ktx2DecoderPath":
+                if (debug) console.log("ktx2DecoderPath", newValue);
+                setKtx2TranscoderPath(newValue);
+                break;
+        }
+    }
+
+    private _loadId: number = 0;
+    private _lastSourceFiles: Array<string> | null = null;
+
+    private async onLoad() {
+
+        if (!this.isConnected) return;
+        if (!this._context) {
+            if (debug) console.warn("Create new context");
+            this._context = new Context({ domElement: this });
+        }
+
+        if (!this._context) {
+            console.error("Needle Engine: Context not initialized");
+            return;
+        }
+
+        const filesToLoad = this.getSourceFiles();
+        if (filesToLoad === null || filesToLoad === undefined || filesToLoad.length <= 0) {
+            if (debug) console.warn("Clear scene", filesToLoad);
+            this._context.clear();
+        }
+        else if (!this.checkIfSourceHasChanged(filesToLoad, this._lastSourceFiles)) {
+            return;
+        }
+
+        this._lastSourceFiles = filesToLoad;
+        const loadId = ++this._loadId;
+        const alias = this.getAttribute("alias");
+        this.classList.add("loading");
+
+
+
+        // Loading start events
+        const allowOverridingDefaultLoading = hasCommercialLicense();
+        // default loading can be overriden by calling preventDefault in the onload start event
+        this.ensureLoadStartIsRegistered();
+        let useDefaultLoading = this.dispatchEvent(new CustomEvent("loadstart", {
+            detail: {
+                context: this._context,
+                alias: alias
+            },
+            cancelable: true
+        }));
+        if (allowOverridingDefaultLoading) {
+            // Handle the <needle-engine hide-loading-overlay> attribute
+            const hideOverlay = this.getAttribute("hide-loading-overlay");
+            if (hideOverlay !== null  && hideOverlay !== undefined && hideOverlay !== "0") {
+                useDefaultLoading = false;
+            }
+        }
+        // for local development we allow overriding the loading screen - but we notify the user that it won't work in a deployed environment
+        if (useDefaultLoading === false && !allowOverridingDefaultLoading) {
+            if (!isDevEnvironment())
+                useDefaultLoading = true;
+            console.warn("Needle Engine: You need a commercial license to override the default loading view. Visit https://needle.tools/pricing");
+            if (isDevEnvironment()) showBalloonWarning("You need a <a target=\"_blank\" href=\"https://needle.tools/pricing\">commercial license</a> to override the default loading view. This will not work in production.");
+        }
+        // create the loading view idf necessary
+        if (!this._loadingView && useDefaultLoading)
+            this._loadingView = new EngineLoadingView(this);
+        if (useDefaultLoading) {
+            // Only show the loading screen immedialty if we haven't loaded anything before
+            if (this._didFullyLoad !== true)
+                this._loadingView?.onLoadingBegin("begin load");
+            else {
+                // If we have loaded a glb previously and are loading a new glb due to e.g. src change
+                // we don't want to show the loading screen immediately to avoid blinking if the glb to be loaded is tiny
+                // so we wait a bit and only show the loading screen if the loading takes longer than a short moment
+                setTimeout(() => {
+                    // If the loading progress is already above ~ 70% we also don't need to show the loading screen anymore
+                    if (this._loadingView && this._loadingProgress01 < 0.3 && this._loadId === loadId)
+                        this._loadingView.onLoadingBegin("begin load");
+                }, 300)
+            }
+        }
+        if (debug) console.warn("--------------", loadId, "Needle Engine: Begin loading", alias ?? "", filesToLoad);
+        this.onBeforeBeginLoading();
+
+        const loadedFiles: Array<LoadedGLTF> = [];
+        const progressEventDetail = {
+            context: this._context,
+            name: "",
+            progress: {} as ProgressEvent,
+            index: 0,
+            count: filesToLoad.length,
+            totalProgress01: this._loadingProgress01
+        };
+        const progressEvent = new CustomEvent("progress", { detail: progressEventDetail });
+        const args: ContextCreateArgs = {
+            files: filesToLoad,
+            onLoadingProgress: evt => {
+                evt.name = getNameFromUrl(evt.name);
+                if (useDefaultLoading) this._loadingView?.onLoadingUpdate(evt);
+                progressEventDetail.name = evt.name;
+                progressEventDetail.progress = evt.progress;
+                this._loadingProgress01 = calculateProgress01(evt);
+                progressEventDetail.totalProgress01 = this._loadingProgress01;
+                this.dispatchEvent(progressEvent);
+            },
+            onLoadingFinished: (_index, file, glTF) => {
+                if (glTF) {
+                    loadedFiles.push({
+                        src: file,
+                        file: glTF
+                    });
+                }
+            }
+        }
+
+        const currentHash = this.getAttribute("hash");
+        if (currentHash !== null && currentHash !== undefined)
+            this._context.hash = currentHash;
+        this._context.alias = alias;
+        await this._context.create(args);
+        if (this._loadId !== loadId) return;
+        if (debug) console.warn("--------------", loadId, "Needle Engine: finished loading", alias ?? "", filesToLoad);
+        this._loadingProgress01 = 1;
+        if (useDefaultLoading) {
+            this._loadingView?.onLoadingUpdate(1, "creating scene");
+        }
+        this._didFullyLoad = true;
+        this.classList.remove("loading");
+        this.classList.add("loading-finished");
+        this.dispatchEvent(new CustomEvent("loadfinished", {
+            detail: {
+                context: this._context,
+                src: alias,
+                loadedFiles: loadedFiles,
+            }
+        }));
+    }
+
+    /** called by the context when the first frame has been rendered */
+    private onReady = () => this._loadingView?.onLoadingFinished();
+    private onError = () => this._loadingView?.setMessage("Loading failed!");
+
+    private internalSetLoadingMessage(str: string) {
+        this._loadingView?.setMessage(str);
+    }
+
+    private getSourceFiles(): Array<string> {
+        const src: string | null | string[] = this.getAttribute("src");
+        if (!src) return [];
+
+        let filesToLoad: Array<string>;
+        // When using globalThis the src is an array already
+        if (Array.isArray(src)) {
+            filesToLoad = src;
+        }
+        // When assigned from codegen the src is a stringified array
+        else if (src.startsWith("[") && src.endsWith("]")) {
+            filesToLoad = JSON.parse(src);
+        }
+        // src.toString for an array produces a comma separated list
+        else if (src.includes(",")) {
+            filesToLoad = src.split(",");
+        }
+        else filesToLoad = [src];
+
+        // filter out invalid or empty strings
+        for (let i = filesToLoad.length - 1; i >= 0; i--) {
+            const file = filesToLoad[i];
+            if (file === "null" || file === "undefined" || file?.length <= 0)
+                filesToLoad.splice(i, 1);
+        }
+
+        return filesToLoad;
+    }
+
+    private checkIfSourceHasChanged(current: Array<string> | null, previous: Array<string> | null): boolean {
+        if (current?.length !== previous?.length) return true;
+        if (current == null && previous !== null) return true;
+        if (current !== null && previous == null) return true;
+        if (current !== null && previous !== null) {
+            for (let i = 0; i < current?.length; i++) {
+                if (current[i] !== previous[i]) return true;
+            }
+        }
+        return false;
+    }
+
+    private _previouslyRegisteredMap: Map<string, Function> = new Map();
+    private ensureLoadStartIsRegistered() {
+        const attributeValue = this.getAttribute("loadstart");
+        if (attributeValue)
+            this.registerEventFromAttribute("loadstart", attributeValue);
+    }
+    private registerEventFromAttribute(eventName: string, code: string) {
+        const prev = this._previouslyRegisteredMap.get(eventName);
+        if (prev) {
+            this._previouslyRegisteredMap.delete(eventName);
+            this.removeEventListener(eventName, prev as any);
+        }
+        if (typeof code === "string" && code.length > 0) {
+            try {
+                // indirect eval https://esbuild.github.io/content-types/#direct-eval
+                const fn = (0, eval)(code);
+                // const fn = new Function(newValue);
+                if (typeof fn === "function") {
+                    this._previouslyRegisteredMap.set(eventName, fn);
+                    this.addEventListener(eventName, evt => fn?.call(globalThis, this._context, evt));
+                }
+            }
+            catch (err) {
+                console.error("Error registering event " + eventName + "=\"" + code + "\" failed with the following error:\n", err);
+            }
+        }
+    }
+
+    getAROverlayContainer(): HTMLElement {
+        return this._overlay_ar.createOverlayContainer(this);
+    }
+
+    getVROverlayContainer(): HTMLElement | null {
+        for (let i = 0; i < this.children.length; i++) {
+            const ch = this.children[i] as HTMLElement;
+            if (ch.classList.contains("vr"))
+                return ch;
+        }
+        return null;
+    }
+
+    onEnterAR(session: XRSession, overlayContainer: HTMLElement) {
+        this.onSetupAR();
+        this._overlay_ar.onBegin(this._context!, overlayContainer, session);
+        this.dispatchEvent(new CustomEvent("enter-ar", { detail: { session: session, context: this._context, htmlContainer: this._overlay_ar?.ARContainer } }));
+    }
+
+    onExitAR(session: XRSession) {
+        this._overlay_ar.onEnd(this._context!);
+        this.onSetupDesktop();
+        this.dispatchEvent(new CustomEvent("exit-ar", { detail: { session: session, context: this._context, htmlContainer: this._overlay_ar?.ARContainer } }));
+    }
+
+    onEnterVR(session: XRSession) {
+        this.onSetupVR();
+        this.dispatchEvent(new CustomEvent("enter-vr", { detail: { session: session, context: this._context } }));
+    }
+
+    onExitVR(session: XRSession) {
+        this.onSetupDesktop();
+        this.dispatchEvent(new CustomEvent("exit-vr", { detail: { session: session, context: this._context } }));
+    }
+
+    private onSetupAR() {
+        this.classList.add(arSessionActiveClassName);
+        this.classList.remove(desktopSessionActiveClassName);
+        const arContainer = this.getAROverlayContainer();
+        if (debug) console.warn("onSetupAR:", arContainer)
+        if (arContainer) {
+            arContainer.classList.add(arSessionActiveClassName);
+            arContainer.classList.remove(desktopSessionActiveClassName);
+        }
+        this.foreachHtmlElement(ch => this.setupElementsForMode(ch, arContainerClassName));
+    }
+
+    private onSetupVR() {
+        this.classList.remove(arSessionActiveClassName);
+        this.classList.remove(desktopSessionActiveClassName);
+        this.foreachHtmlElement(ch => this.setupElementsForMode(ch, vrContainerClassName));
+    }
+
+    private onSetupDesktop() {
+        this.classList.remove(arSessionActiveClassName);
+        this.classList.add(desktopSessionActiveClassName);
+        const arContainer = this.getAROverlayContainer();
+        if (arContainer) {
+            arContainer.classList.remove(arSessionActiveClassName);
+            arContainer.classList.add(desktopSessionActiveClassName);
+        }
+        this.foreachHtmlElement(ch => this.setupElementsForMode(ch, desktopContainerClassname));
+    }
+
+    private setupElementsForMode(el: HTMLElement, currentSessionType: string, _session: XRSession | null = null) {
+        if (el === this._context?.renderer?.domElement) return;
+        if (el.id === "VRButton" || el.id === "ARButton") return;
+
+        const classList = el.classList;
+        if (classList.contains(currentSessionType)) {
+            el.style.visibility = "visible";
+            if (el.style.display === "none")
+                el.style.display = "block";
+        }
+        else {
+            // only modify style for elements that have a known class (e.g. marked as vr ar desktop)
+            for (const known of knownClasses) {
+                if (el.classList.contains(known)) {
+                    el.style.visibility = "hidden";
+                    el.style.display = "none";
+                }
+            }
+        }
+    }
+
+    private foreachHtmlElement(cb: (HTMLElement) => void) {
+        for (let i = 0; i < this.children.length; i++) {
+            const ch = this.children[i] as HTMLElement;
+            if (ch.style) cb(ch);
+        }
+    }
+
+    private onBeforeBeginLoading() {
+        const customDracoDecoderPath = this.getAttribute("dracoDecoderPath");
+        if (customDracoDecoderPath) {
+            if (debug) console.log("using custom draco decoder path", customDracoDecoderPath);
+            setDracoDecoderPath(customDracoDecoderPath);
+        }
+        const customDracoDecoderType = this.getAttribute("dracoDecoderType");
+        if (customDracoDecoderType) {
+            if (debug) console.log("using custom draco decoder type", customDracoDecoderType);
+            setDracoDecoderType(customDracoDecoderType);
+        }
+        const customKtx2DecoderPath = this.getAttribute("ktx2DecoderPath");
+        if (customKtx2DecoderPath) {
+            if (debug) console.log("using custom ktx2 decoder path", customKtx2DecoderPath);
+            setKtx2TranscoderPath(customKtx2DecoderPath);
+        }
+    }
+}
+
+if (typeof window !== "undefined" && !window.customElements.get(htmlTagName))
+    window.customElements.define(htmlTagName, NeedleEngineHTMLElement);
+
+
+
+
+
+
+
+
+function getHashFromString(str: string) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return hash;
+}
+
+function getNameFromUrl(str: string) {
+    const parts = str.split("/");
+    let name = parts[parts.length - 1];
+    // Remove params
+    const index = name.indexOf("?")
+    if (index > 0)
+        name = name.substring(0, index);
+    return decodeURIComponent(name);
 }