@needle-tools/engine 2.34.0-pre → 2.35.1-pre

package/src/engine/{engine_components.js → engine_components.ts}

@@ -1,55 +1,59 @@
-import { activeInHierarchyFieldName } from './engine_constants';
-import { removeScriptFromContext } from './engine_mainloop_utils';
-import { Context } from './engine_setup';
-import * as main from "../engine/engine_mainloop_utils";
-import { getParam } from './engine_utils';
+import { Object3D, Scene } from "three";
+import { Constructor, ConstructorConcrete, IComponent as Component, IComponent, IGameObject } from "./engine_types";
+import { Context, registerComponent } from "./engine_setup";
+import { getParam } from "./engine_utils";
+import { removeScriptFromContext, updateActiveInHierarchyWithoutEventCall } from "./engine_mainloop_utils";
+import { activeInHierarchyFieldName } from "./engine_constants";
 
 const debug = getParam("debuggetcomponent");
 
+
 function tryGetObject(obj) {
-    if(obj === null || obj === undefined) return obj;
-    if(obj.isObject3D) return obj;
+    if (obj === null || obj === undefined) return obj;
+    if (obj.isObject3D) return obj;
     // handle threejs intersection object
     if (obj.object && obj.object.isObject3D) return obj.object;
     return obj;
 }
 
-export function registerComponent(script, context) {
-    if (!script) return;
-    const new_scripts = context?.new_scripts ?? Context.Current.new_scripts;
-    if (!new_scripts.includes(script)) {
-        new_scripts.push(script);
-    }
-}
 
-export const removeComponent = function (go, componentInstance) {
+export function removeComponent(go: Object3D, componentInstance: IComponent) {
     if (!go) return;
     if (!go.userData.components) return;
     const index = go.userData.components.indexOf(componentInstance);
     if (index < 0) return;
+    //@ts-ignore
     componentInstance.gameObject = null;
     go.userData.components.splice(index, 1);
 }
 
-const addNewComponentInstance = function (componentInstance, obj, callAwake = true) {
+export function getOrAddComponent<T extends IComponent>(go: Object3D, typeName: ConstructorConcrete<T>): T {
+    const comp = getComponent(go, typeName);
+    if (comp) return comp;
+    const newInstance = new typeName();
+    return addNewComponentInstance(go, newInstance) as unknown as T;
+}
+
+export function addNewComponentInstance<T extends IComponent>(obj: Object3D, componentInstance: T, callAwake = true): IComponent {
     if (!obj.userData) obj.userData = {};
     if (!obj.userData.components) obj.userData.components = [];
     obj.userData.components.push(componentInstance);
-    componentInstance.gameObject = obj;
+    componentInstance.gameObject = obj as IGameObject;
     // componentInstance.transform = obj;
     registerComponent(componentInstance);
     try {
         if (componentInstance.__internalAwake && callAwake) {
-            main.updateActiveInHierarchyWithoutEventCall(obj);
+            updateActiveInHierarchyWithoutEventCall(obj);
             componentInstance.__internalAwake();
         }
     }
     catch (err) {
         console.error(err);
     }
+    return componentInstance;
 }
 
-const moveComponentInstance = function (componentInstance, obj) {
+export function moveComponentInstance(obj: Object3D, componentInstance: IComponent) {
     if (componentInstance.gameObject === obj) return;
     // TODO: update raycast array
     if (componentInstance.gameObject && componentInstance.gameObject.userData.components) {
@@ -59,12 +63,12 @@ const moveComponentInstance = function (componentInstance, obj) {
     if (!obj.userData.components) obj.userData.components = [];
     else if (obj.userData.components.includes(componentInstance)) return;
     obj.userData.components.push(componentInstance);
-    componentInstance.gameObject = obj;
+    componentInstance.gameObject = obj as IGameObject;
     // componentInstance.transform = obj;
 }
 
 
-const destroyComponentInstance = function (componentInstance) {
+export function destroyComponentInstance(componentInstance: IComponent) {
     // console.log("destroy", componentInstance, componentInstance.onDestroy);
     // TODO: update raycast array
     if (componentInstance.gameObject && componentInstance.gameObject.userData.components) {
@@ -75,18 +79,25 @@ const destroyComponentInstance = function (componentInstance) {
     if (componentInstance.__internalDisable) componentInstance.__internalDisable();
     if (componentInstance.onDestroy) componentInstance.onDestroy();
     removeScriptFromContext(componentInstance, componentInstance.context ?? Context.Current);
-    componentInstance.__destroyed = true;
+    componentInstance.__internalDestroy();
+    //@ts-ignore
     componentInstance.gameObject = null;
     // console.log("destroyed", index, componentInstance);
 }
 
-const onGetComponent = function (componentType, obj, arr) {
+function onGetComponent<T>(obj: Object3D | null | undefined, componentType: Constructor<T>, arr?: T[]) {
+    if (obj === null || obj === undefined) return;
+    if (!obj.isObject3D) {
+        console.error("Object is not object3D");
+        return;
+    }
     if (!(obj?.userData?.components)) return null;
     if (debug)
         console.log("FIND", componentType);
+    if (componentType === undefined || componentType === null) return;
     for (let i = 0; i < obj.userData.components.length; i++) {
         const component = obj.userData.components[i];
-        if (componentType === null || component.constructor.name === componentType.name || component.constructor.name === componentType) {
+        if (componentType === null || component.constructor.name === componentType["name"] || component.constructor.name === componentType) {
             if (debug)
                 console.log("MATCH BY NAME", component)
             if (arr) arr.push(component);
@@ -111,59 +122,63 @@ const onGetComponent = function (componentType, obj, arr) {
     return arr;
 }
 
-const getComponent = function (componentType, obj) {
-    return onGetComponent(componentType, obj, null);
+export function getComponent<T>(obj: Object3D, componentType: Constructor<T>) {
+    return onGetComponent(obj, componentType);
 }
 
-const getComponents = function (componentType, obj, arr) {
+export function getComponents<T>(obj: Object3D, componentType: Constructor<T>, arr?: T[] | null): T[] {
     if (!arr) arr = [];
-    return onGetComponent(componentType, obj, arr);
+    return onGetComponent(obj, componentType, arr);
 }
 
-const getComponentInChildren = function (componentType, obj, includeInactive) {
-    const res = getComponent(componentType, obj);
+export function getComponentInChildren<T>(obj: Object3D, componentType: Constructor<T>, includeInactive?: boolean) {
+    const res = getComponent(obj, componentType);
     if (includeInactive === false && res.enabled === false) return null;
     if (res) return res;
     for (let i = 0; i < obj?.children?.length; i++) {
-        const res = getComponentInChildren(componentType, obj.children[i]);
+        const res = getComponentInChildren(obj.children[i], componentType);
         if (res) return res;
     }
     return null;
 }
 
-const getComponentsInChildren = function (componentType, obj, arr) {
+export function getComponentsInChildren<T>(obj: Object3D, componentType: Constructor<T>, arr?: T[]) {
     if (!arr) arr = [];
-    getComponents(componentType, obj, arr);
+    getComponents(obj, componentType, arr);
     for (let i = 0; i < obj?.children?.length; i++) {
-        getComponentsInChildren(componentType, obj.children[i], arr);
+        getComponentsInChildren(obj.children[i], componentType, arr);
     }
     return arr;
 }
 
-const getComponentInParent = function (componentType, obj) {
+export function getComponentInParent<T>(obj: Object3D, componentType: Constructor<T>) {
     if (!obj) return null;
     if (Array.isArray(obj)) {
         for (let i = 0; i < obj.length; i++) {
             const o = tryGetObject(obj[i]);
-            const res = getComponentInParent(componentType, o);
+            const res = getComponentInParent(o, componentType);
             if (res) return res;
         }
         return null;
     }
     // console.log(obj);
-    const res = getComponent(componentType, obj);
+    const res = getComponent(obj, componentType);
     if (res) return res;
-    return getComponentInParent(componentType, obj.parent);
+    if (obj.parent)
+        return getComponentInParent(obj.parent, componentType);
+    return null;
 }
 
-const getComponentsInParent = function (componentType, obj, arr) {
+export function getComponentsInParent<T>(obj: Object3D, componentType: Constructor<T>, arr?: T[] | null): T[] {
     if (!arr) arr = [];
     if (!obj) return arr;
-    getComponents(componentType, obj, arr);
-    return getComponentsInParent(componentType, obj.parent, arr);
+    getComponents(obj, componentType, arr);
+    if (obj.parent)
+        return getComponentsInParent(obj.parent, componentType, arr);
+    return arr;
 }
 
-const findObjectOfType = function (type, contextOrScene, includeInactive) {
+export function findObjectOfType<T>(type: Constructor<T>, contextOrScene: Object3D | { scene: Scene }, includeInactive) {
     if (!type) return null;
     if (!contextOrScene) {
         contextOrScene = Context.Current;
@@ -172,18 +187,23 @@ const findObjectOfType = function (type, contextOrScene, includeInactive) {
             return null;
         }
     }
-    const scene = contextOrScene.isScene === true || contextOrScene.isObject3D === true ? contextOrScene : contextOrScene?.scene;
+
+    let scene = contextOrScene as Scene;
+    if (!scene.isScene) scene = (contextOrScene as { scene: Scene })?.scene;
+    if (!scene) return null;
+
+    // const scene = contextOrScene.isScene === true || contextOrScene.isObject3D === true ? contextOrScene : contextOrScene?.scene;
     for (const i in scene.children) {
         const child = scene.children[i];
         if (includeInactive === false && child[activeInHierarchyFieldName] === false) continue;
         if (child.constructor == type) return child;
-        const res = getComponentInChildren(type, child);
+        const res = getComponentInChildren(child, type);
         if (res) return res;
     }
     return null;
 }
 
-const findObjectsOfType = function (type, array, contextOrScene) {
+export function findObjectsOfType<T>(type: Constructor<T>, array: T[], contextOrScene) : T[] {
     if (!type) return array;
     if (!contextOrScene) {
         contextOrScene = Context.Current;
@@ -197,22 +217,7 @@ const findObjectsOfType = function (type, array, contextOrScene) {
     for (const i in scene.children) {
         const child = scene.children[i];
         if (child.constructor == type) return child;
-        getComponentsInChildren(type, child, array);
+        getComponentsInChildren(child, type, array);
     }
     return array;
-}
-
-
-export {
-    addNewComponentInstance,
-    moveComponentInstance,
-    destroyComponentInstance,
-    getComponent,
-    getComponents,
-    getComponentInChildren,
-    getComponentsInChildren,
-    getComponentInParent,
-    getComponentsInParent,
-    findObjectOfType,
-    findObjectsOfType,
 }

package/src/engine/engine_element.ts

@@ -1,11 +1,11 @@
 import { Context, build_scene_functions, LoadingOptions, LoadingProgressArgs } from "./engine_setup";
 import { AROverlayHandler, arContainerClassName } from "./engine_element_overlay";
 import { GameObject } from "../engine-components/Component";
-import { loadSync } from "./engine_scenetools";
 import { processNewScripts } from "./engine_mainloop_utils";
 import { calculateProgress01, EngineLoadingView, ILoadingViewHandler } from "./engine_element_loading";
 import { delay, getParam } from "./engine_utils";
 import { setDracoDecoderPath, setDracoDecoderType, setKtx2TranscoderPath } from "./engine_loaders";
+import { getLoader } from "../engine/engine_gltf";
 
 const debug = getParam("debugwebcomponent");
 
@@ -42,7 +42,7 @@ class EngineElementSourceFileWatcher {
 
         this.previousSource = newSource;
         Context.Current = this.context;
-        const res = await loadSync(this.context, newSource, this.getHashFromString(newSource));
+        const res = await getLoader().loadSync(this.context, newSource, this.getHashFromString(newSource), false);
         if (!isStartup)
             processNewScripts(this.context);
         const obj = res?.scene;
@@ -162,13 +162,14 @@ export class EngineElement extends HTMLElement {
             if (fn) {
                 this.classList.add("loading");
                 console.log("Needle Engine: Begin loading", alias ?? "");
+                const allowOverridingDefaultLoading = false;
                 // 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: true
+                    cancelable: allowOverridingDefaultLoading
                 }));
                 if (!this._loadingView && useDefaultLoading)
                     this._loadingView = new EngineLoadingView(this);

package/src/engine/engine_element_loading.ts

@@ -127,6 +127,8 @@ export class EngineLoadingView implements ILoadingViewHandler {
 
     private createLoadingElement(existing?: HTMLElement): HTMLElement {
         this._loadingElement = existing || document.createElement("div");
+        this._loadingElement.style.width = "100%";
+
         const className = this._loadingElementOptions?.className ?? "loading";
         this._loadingElement.classList.add(className);
         if (this._loadingElementOptions?.additionalClasses) {
@@ -141,7 +143,7 @@ export class EngineLoadingView implements ILoadingViewHandler {
         }
 
         const loadingBarContainer = document.createElement("div");
-        const maxWidth = 20;
+        const maxWidth = 30;
         loadingBarContainer.style.display = "flex";
         loadingBarContainer.style.width = maxWidth + "%";
         loadingBarContainer.style.height = "2px";
@@ -171,6 +173,8 @@ export class EngineLoadingView implements ILoadingViewHandler {
         messageContainer.style.fontSize = ".8em";
         messageContainer.style.paddingTop = ".5em";
         messageContainer.style.color = "rgba(255,255,255,.5)";
+        // messageContainer.style.border = "1px solid rgba(255,255,255,.1)";
+        messageContainer.style.justifyContent = "center";
         this._loadingElement.appendChild(messageContainer);
 
         return this._loadingElement;