@needle-tools/engine 2.64.0-pre → 2.65.0-pre

package/src/engine/engine_element.ts

@@ -8,64 +8,12 @@ import { setDracoDecoderPath, setDracoDecoderType, setKtx2TranscoderPath } from
 import { getLoader, registerLoader } from "../engine/engine_gltf";
 import { NeedleGltfLoader } from "./engine_scenetools";
 import { INeedleEngineComponent } from "./engine_types";
-
+// 
 // registering loader here too to make sure it's imported when using engine via vanilla js
 registerLoader(NeedleGltfLoader);
 
 const debug = getParam("debugwebcomponent");
 
-class EngineElementSourceFileWatcher {
-
-    private id: string;
-    private context: Context;
-    private previouslyAdded: any;
-    private previousSource?: string;
-    private networkEvent: string;
-
-    constructor(id: string, context: Context) {
-        this.id = id;
-        this.context = context;
-        this.networkEvent = "needle-engine-source-changed";
-        if (this.id) this.networkEvent += "-" + this.id;
-        this.context.connection.beginListen(this.networkEvent, fn => {
-            this.onSourceChanged(fn, true);
-        });
-    }
-
-    async onSourceChanged(newSource: string, dontSend: boolean = false, isStartup: boolean = false) {
-        if (this.previouslyAdded) {
-            // if event was from remote and source didnt change do nothing
-            if (dontSend && newSource === this.previousSource) { }
-            else
-                GameObject.destroySynced(this.previouslyAdded);
-        }
-        this.previouslyAdded = null;
-
-        if (!dontSend) {
-            this.context.connection.send(this.networkEvent, newSource);
-        }
-
-        this.previousSource = newSource;
-        Context.Current = this.context;
-        const res = await getLoader().loadSync(this.context, newSource, this.getHashFromString(newSource), false);
-        if (!isStartup)
-            processNewScripts(this.context);
-        const obj = res?.scene;
-        if (obj) {
-            this.previouslyAdded = obj;
-            this.context.scene.add(obj);
-        }
-    }
-
-    private getHashFromString(str: string) {
-        let hash = 0;
-        for (let i = 0; i < str.length; i++) {
-            hash = str.charCodeAt(i) + ((hash << 5) - hash);
-        }
-        return hash;
-    }
-}
-
 const htmlTagName = "needle-engine";
 const vrContainerClassName = "vr";
 const desktopContainerClassname = "desktop";
@@ -81,7 +29,7 @@ export class EngineElement extends HTMLElement implements INeedleEngineComponent
 
     public get cameraControls(): boolean {
         const attr = this.getAttribute("camera-controls");
-        if(attr === null || attr === "False" || attr === "false" || attr === "0") return false;
+        if (attr === null || attr === "False" || attr === "false" || attr === "0") return false;
         return true;
     }
 
@@ -102,144 +50,42 @@ export class EngineElement extends HTMLElement implements INeedleEngineComponent
         });
     }
 
-    public get Context() { return this._context; }
+    public get context() { return this._context; }
 
-    /**@obsolete use GameObject */
-    private gameObject = GameObject; // used to access static methods from regular js
+    /**@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 | null = null;
+    private _context: Context;
     private _overlay_ar: AROverlayHandler;
     private _loadingProgress01: number = 0;
-
-    private _watcher?: EngineElementSourceFileWatcher;
     private _loadingView?: ILoadingViewHandler;
 
     constructor() {
         super();
         this._overlay_ar = new AROverlayHandler();
+        this._context = new Context({ domElement: this });
     }
 
     async connectedCallback() {
-        this.onSetupDesktop();
-
-        var observer = new MutationObserver(this.onElementsChanged.bind(this));
-        observer.observe(this, { childList: true })
-
-        // user can set a function name or a path to a gltf or glb to be loaded
-        const srcFile = () => {
-            const srcVal = this.getAttribute("src");
-            if (srcVal?.endsWith(".glb") || srcVal?.endsWith(".gltf")) {
-                return srcVal;
-            }
-            return null;
-        };
-        let src: string | null = "loadScene";
-        const srcAttributeValue = srcFile();
-        if (srcAttributeValue) src = srcAttributeValue;
-
-        const alias = this.getAttribute("alias");
-        const hash = this.getAttribute("hash");
-        this._context = new Context({ name: src, domElement: this, alias: alias, hash: hash ?? undefined });
-        this._watcher = new EngineElementSourceFileWatcher(this.getAttribute("id") ?? alias ?? "", this._context);
+        if (debug) {
+            console.log("<needle-engine> connected");
+            console.dir(this);
+        }
 
+        this.onSetupDesktop();
+        const src = this.getAttribute("src");
         if (src && src.length > 0) {
-            // try to get the load function
-
-            // HACK: if no explicit glb is assigned we have to wait for the codegen function to be available
-            // it happened in one case during local development where the function was not yet registered
-            // but this component was connected already
-            if (!srcAttributeValue) {
-                while (Object.keys(build_scene_functions).length <= 0) {
-                    if (!this.isConnected) return;
-                    await delay(10);
-                }
-            }
-
-            let fn: (context: Context) => Promise<void> = build_scene_functions[src] ?? window[src];
-            // if no load function is found (e.g. when generated code was deleted or import removed) then just load the glb
-            // or if an explicit src file is provided
-            let previousFileLoaded: string | null = null;
-            if (!fn || srcAttributeValue) {
-                if (srcAttributeValue)
-                    src = srcAttributeValue;
-                fn = async _ => {
-                    const file = srcFile();
-                    if (file && this._watcher) {
-                        previousFileLoaded = file;
-                        await this._watcher.onSourceChanged(file, true, true);
-                    }
-                }
-            }
-            if (fn) {
-                this.classList.add("loading");
-                if (debug)
-                    console.log("Needle Engine: Begin loading", alias ?? "");
-                const allowOverridingDefaultLoading = true;
-                // default loading can be overriden by calling preventDefault in the onload start event
-                const useDefaultLoading = this.dispatchEvent(new CustomEvent("loadstart", {
-                    detail: {
-                        context: this._context,
-                        alias: alias
-                    },
-                    cancelable: allowOverridingDefaultLoading
-                }));
-                if (!this._loadingView && useDefaultLoading)
-                    this._loadingView = new EngineLoadingView(this);
-                if (useDefaultLoading)
-                    this._loadingView?.onLoadingBegin("begin load");
-                // setup the loading callback for the default loading handler and the user defined one
-                const loadingCallback = (progress: LoadingProgressArgs, message?: string) => {
-                    this._loadingProgress01 = calculateProgress01(progress);
-                    if (useDefaultLoading)
-                        this._loadingView?.onLoadingUpdate(progress, message);
-                    this.dispatchEvent(new CustomEvent("progress", {
-                        detail: {
-                            context: this._context,
-                            name: progress.name,
-                            progress: progress.progress,
-                            index: progress.index,
-                            count: progress.count,
-                            totalProgress01: this._loadingProgress01
-                        }
-                    }));
-                }
-                this.onBeforeBeginLoading();
-                await this._context.onCreate(fn, { progress: loadingCallback });
-                const file = srcFile();
-                if (file) {
-                    // only if we didnt load this file here already
-                    if (file !== previousFileLoaded)
-                        await this._watcher.onSourceChanged(file, true, true);
-                }
-                this._loadingProgress01 = 1;
-                if (useDefaultLoading)
-                    this._loadingView?.onLoadingFinished("creating scene");
-                this.classList.remove("loading");
-                this.classList.add("loading-finished");
-                if (debug)
-                    console.log("Needle Engine: finished loading", alias ?? "");
-                this.dispatchEvent(new CustomEvent("loadfinished", {
-                    detail: {
-                        context: this._context,
-                        src: alias ?? src
-                    }
-                }));
-                this.onSetupDesktop();
-            }
-            else {
-                console.error("Could not find scene function named \"" + src + "\", it must be either in global scope " +
-                    "or added to build_scene_functions", build_scene_functions);
-            }
-        } else {
-            console.error("Missing src attribute - please provide a function name", this);
+            await this.onLoad(src, true);
         }
+        this.onSetupDesktop();
     }
 
     disconnectedCallback() {
-        if (this._context) {
-            this._context.onDestroy();
-        }
+        this._context?.onDestroy();
     }
 
     static get observedAttributes() {
@@ -260,7 +106,14 @@ export class EngineElement extends HTMLElement implements INeedleEngineComponent
         // console.log(name, oldValue, newValue);
         switch (name) {
             case "src":
-                this._watcher?.onSourceChanged(newValue);
+                if (debug) console.log("src changed to type:", typeof newValue, ", from \"", _oldValue, "\" to \"", newValue)
+                this.onLoad(newValue, false);
+                // this._watcher?.onSourceChanged(newValue);
+                break;
+            case "hash":
+                if (this._context) {
+                    this._context.hash = newValue;
+                }
                 break;
             case "loadstart":
             case "progress":
@@ -288,6 +141,119 @@ export class EngineElement extends HTMLElement implements INeedleEngineComponent
         }
     }
 
+    private async onLoad(src: string | null, isStartup: boolean) {
+        if (!src || !src.length) {
+            console.error("Needle Engine: No source specified", src);
+            return;
+        }
+        if (!this._context) {
+            console.error("Needle Engine: Context not initialized");
+            return;
+        }
+        const alias = this.getAttribute("alias");
+        this.classList.add("loading");
+        if (debug) console.log("Needle Engine: Begin loading", alias ?? "");
+
+
+        // Loading start events
+        const allowOverridingDefaultLoading = true;
+        // default loading can be overriden by calling preventDefault in the onload start event
+        const useDefaultLoading = this.dispatchEvent(new CustomEvent("loadstart", {
+            detail: {
+                context: this._context,
+                alias: alias
+            },
+            cancelable: allowOverridingDefaultLoading
+        }));
+        if (!this._loadingView && useDefaultLoading)
+            this._loadingView = new EngineLoadingView(this);
+        if (useDefaultLoading)
+            this._loadingView?.onLoadingBegin("begin load");
+        this.onBeforeBeginLoading();
+
+        if (debug) console.log(src);
+        let filesToLoad: Array<string>;
+        if (src.startsWith("[") && src.endsWith("]")) {
+            filesToLoad = JSON.parse(src);
+        }
+        else filesToLoad = [src];
+
+        let loadFunction: any = null;
+
+        if (typeof src === "string") {
+            loadFunction = async (ctx: Context) => {
+                let hash = 0;
+                if (ctx.hash) hash = Number.parseInt(ctx.hash) ?? 0;
+                const loader = getLoader();
+                for (let i = 0; i < filesToLoad.length; i++) {
+                    const url = filesToLoad[i];
+                    const fileName = getNameFromUrl(url);
+                    const progress: LoadingProgressArgs = {
+                        name: fileName,
+                        progress: null!,
+                        index: i,
+                        count: filesToLoad.length
+                    };
+                    const progressEventArgs = {
+                        detail: {
+                            context: ctx,
+                            name: fileName,
+                            progress: progress.progress,
+                            index: i,
+                            count: filesToLoad.length,
+                            totalProgress01: this._loadingProgress01
+                        }
+                    }
+                    const res = await loader.loadSync(ctx, url, hash, false, prog => {
+                        // Calc progress
+                        progress.progress = prog;
+                        this._loadingProgress01 = calculateProgress01(progress);
+                        // Update overlay if we use it
+                        if (useDefaultLoading) this._loadingView?.onLoadingUpdate(progress);
+                        // Dispatch event
+                        progressEventArgs.detail.progress = prog;
+                        progressEventArgs.detail.totalProgress01 = this._loadingProgress01;
+                        this.dispatchEvent(new CustomEvent("progress", progressEventArgs));
+                    });
+                    const obj = res?.scene;
+                    if (obj) GameObject.add(obj, ctx.scene, ctx);
+                }
+                if (!isStartup)
+                    processNewScripts(ctx);
+            };
+        }
+        if (!loadFunction) {
+            console.error("Needle Engine: No load function found", src);
+            return;
+        }
+        const currentHash = this.getAttribute("hash");
+        if (currentHash !== null && currentHash !== undefined)
+            this._context.hash = currentHash;
+        this._context.alias = alias;
+        if (!this._context.isCreated)
+            await this._context.onCreate(loadFunction);
+        else {
+            await loadFunction(this._context);
+        }
+
+
+
+
+        this._loadingProgress01 = 1;
+        if (useDefaultLoading)
+            this._loadingView?.onLoadingFinished("creating scene");
+        this.classList.remove("loading");
+        this.classList.add("loading-finished");
+        if (debug)
+            console.log("Needle Engine: finished loading", alias ?? "");
+        this.dispatchEvent(new CustomEvent("loadfinished", {
+            detail: {
+                context: this._context,
+                src: alias ?? src
+            }
+        }));
+    }
+
     private registerEventFromAttribute(eventName: string, code: string) {
         if (typeof code === "string" && code.length > 0) {
             // indirect eval https://esbuild.github.io/content-types/#direct-eval
@@ -334,10 +300,6 @@ export class EngineElement extends HTMLElement implements INeedleEngineComponent
         this.dispatchEvent(new CustomEvent("exit-vr", { detail: { session: session, context: this._context } }));
     }
 
-    private onElementsChanged() {
-
-    }
-
     private onSetupAR() {
         this.classList.add(arSessionActiveClassName);
         this.classList.remove(desktopSessionActiveClassName);
@@ -425,3 +387,25 @@ if (!window.customElements.get(htmlTagName))
 
 
 
+
+
+
+
+
+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
+    let index = name.indexOf("?")
+    if (index > 0)
+        name = name.substring(0, index);
+    return name;
+}