@needle-tools/engine 2.65.1-pre → 2.66.1-pre

package/src/engine/engine_element.ts

@@ -69,6 +69,8 @@ export class EngineElement extends HTMLElement implements INeedleEngineComponent
         super();
         this._overlay_ar = new AROverlayHandler();
         this._context = new Context({ domElement: this });
+        // TODO: do we want to rename this event?
+        this.addEventListener("ready", this.onReady);
     }
 
     async connectedCallback() {
@@ -252,6 +254,7 @@ export class EngineElement extends HTMLElement implements INeedleEngineComponent
             console.error("Needle Engine: No files to load", src);
             return;
         }
+
         const currentHash = this.getAttribute("hash");
         if (currentHash !== null && currentHash !== undefined)
             this._context.hash = currentHash;
@@ -267,7 +270,7 @@ export class EngineElement extends HTMLElement implements INeedleEngineComponent
 
         this._loadingProgress01 = 1;
         if (useDefaultLoading)
-            this._loadingView?.onLoadingFinished("creating scene");
+            this._loadingView?.onLoadingUpdate(1, "creating scene");
         this.classList.remove("loading");
         this.classList.add("loading-finished");
         if (debug)
@@ -278,8 +281,12 @@ export class EngineElement extends HTMLElement implements INeedleEngineComponent
                 src: alias ?? src
             }
         }));
+
     }
 
+    private onReady = () => this._loadingView?.onLoadingFinished();
+
+
     private registerEventFromAttribute(eventName: string, code: string) {
         if (typeof code === "string" && code.length > 0) {
             // indirect eval https://esbuild.github.io/content-types/#direct-eval

package/src/engine/engine_element_loading.ts

@@ -14,7 +14,7 @@ export class LoadingElementOptions {
 
 export interface ILoadingViewHandler {
     onLoadingBegin(message?: string);
-    onLoadingUpdate(progress: LoadingProgressArgs, message?: string);
+    onLoadingUpdate(progress: LoadingProgressArgs | number, message?: string);
     onLoadingFinished(message?: string);
 }
 
@@ -110,9 +110,11 @@ export class EngineLoadingView implements ILoadingViewHandler {
         this.updateDisplay();
     }
 
-    onLoadingFinished(message?: string) {
+    onLoadingFinished() {
+        if (debug)
+            console.warn("Finished Loading");
         this.loadingProgress = 1;
-        this.setMessage(message ?? "");
+        this.onDoneLoading();
     }
 
     setMessage(message: string) {
@@ -125,27 +127,29 @@ export class EngineLoadingView implements ILoadingViewHandler {
     private smoothProgressLoop() {
         if (this._progressLoop) return;
         let dt = 1 / 12;
-        const max = 1 - .05;
         if (debugRendering) {
             dt = 1 / 500;
             if (typeof debugRendering === "number") dt *= debugRendering;
         }
         this._progressLoop = setInterval(() => {
-            if (this.loadingProgress >= 1 && this._progress >= max) {
-                if (this._loadingElement) {
-                    if (debug) console.log("Hiding loading element");
-                    this._loadingElement.style.display = "none";
-                    this._loadingElement.remove();
-                }
-                clearInterval(this._progressLoop);
-                this._progressLoop = null;
-                return;
-            }
+            // increate loading speed when almost done
+            if (this.loadingProgress >= .95) dt = .9;
             this._progress = Mathf.lerp(this._progress, this.loadingProgress, dt * this.loadingProgress);
             this.updateDisplay();
         }, dt);
     }
 
+    private onDoneLoading() {
+        if (this._loadingElement) {
+            if (debug) console.log("Hiding loading element");
+            this._loadingElement.style.display = "none";
+            this._loadingElement.remove();
+        }
+        if (this._progressLoop)
+            clearInterval(this._progressLoop);
+        this._progressLoop = null;
+    }
+
     private updateDisplay() {
         const t = this._progress;
         const percent = (t * 100).toFixed(0) + "%";