@needle-tools/engine 3.2.11-alpha → 3.2.13-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "3.2.11-alpha",
+    "version": "3.2.13-alpha",
     "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in",
     "main": "dist/needle-engine.umd.cjs",
     "type": "module",

package/plugins/vite/alias.js

@@ -33,10 +33,7 @@ export const needleViteAlias = (command, config, userSettings) => {
     return {
         name: "needle-alias",
         config(config) {
-            setTimeout(() => {
-                console.log('[needle-alias] ProjectDirectory: ' + projectDir);
-            }, 150);
-
+            console.log('[needle-alias] ProjectDirectory: ' + projectDir);
             if (!config.resolve) config.resolve = {};
             if (!config.resolve.alias) config.resolve.alias = {};
             const aliasDict = config.resolve.alias;

package/plugins/vite/copyfiles.js

@@ -11,57 +11,63 @@ export const needleCopyFiles = (command, config, userSettings) => {
         return;
     }
 
-    const copyIncludesFromEngine = config?.copyIncludesFromEngine ?? true;
-
     return {
         name: 'needle-copy-files',
-        apply: 'build',
-        async closeBundle() {
-            const baseDir = process.cwd();
-            const pluginName = "needle-copy-files";
+        buildStart() {
+            return run(false, config);
+        },
+        closeBundle() {
+            return run(true, config);
+        },
+    }
+}
+
+async function run(isBuild, config) {
+    const copyIncludesFromEngine = config?.copyIncludesFromEngine ?? true;
 
-            let assetsDirName = "assets";
-            let outdirName = "dist";
+    const baseDir = process.cwd();
+    const pluginName = "needle-copy-files";
 
-            const needleConfig = tryLoadProjectConfig();
-            if(needleConfig){
-                assetsDirName = needleConfig.assetsDirectory;
-            }
+    let assetsDirName = "assets";
+    let outdirName = "dist";
 
-            const outDir = resolve(baseDir, outdirName);
-            if (!existsSync(outDir)) {
-                mkdirSync(outDir);
-            }
+    const needleConfig = tryLoadProjectConfig();
+    if (needleConfig) {
+        assetsDirName = needleConfig.assetsDirectory;
+    }
 
-            if (copyIncludesFromEngine !== false) {
-                // copy include from engine
-                const engineIncludeDir = resolve(baseDir, 'node_modules', '@needle-tools', 'engine', 'src', 'include');
-                if (existsSync(engineIncludeDir)) {
-                    console.log(`[${pluginName}] - Copy engine include to ${baseDir}/include`)
-                    const targetDir = resolve(baseDir, 'include');
-                    copyRecursiveSync(engineIncludeDir, targetDir);
-                }
-            }
+    if (copyIncludesFromEngine !== false) {
+        // copy include from engine
+        const engineIncludeDir = resolve(baseDir, 'node_modules', '@needle-tools', 'engine', 'src', 'include');
+        if (existsSync(engineIncludeDir)) {
+            console.log(`[${pluginName}] - Copy engine include to ${baseDir}/include`)
+            const projectIncludeDir = resolve(baseDir, 'include');
+            copyRecursiveSync(engineIncludeDir, projectIncludeDir);
+        }
+    }
 
-            // copy assets dir
-            const assetsDir = resolve(baseDir, assetsDirName);
-            if (existsSync(assetsDir)) {
-                console.log(`[${pluginName}] - Copy assets to ${outdirName}/${builtAssetsDirectory()}`)
-                const targetDir = resolve(outDir, 'assets');
-                copyRecursiveSync(assetsDir, targetDir);
-            }
-            // copy include dir
-            const includeDir = resolve(baseDir, 'include');
-            if (existsSync(includeDir)) {
-                console.log(`[${pluginName}] - Copy include to ${outdirName}/include`)
-                const targetDir = resolve(outDir, 'include');
-                copyRecursiveSync(includeDir, targetDir);
-            }
+    if (isBuild) {
+        const outDir = resolve(baseDir, outdirName);
+        if (!existsSync(outDir)) {
+            mkdirSync(outDir);
+        }
+        // copy assets dir
+        const assetsDir = resolve(baseDir, assetsDirName);
+        if (existsSync(assetsDir)) {
+            console.log(`[${pluginName}] - Copy assets to ${outdirName}/${builtAssetsDirectory()}`)
+            const targetDir = resolve(outDir, 'assets');
+            copyRecursiveSync(assetsDir, targetDir);
+        }
+        // copy include dir
+        const includeDir = resolve(baseDir, 'include');
+        if (existsSync(includeDir)) {
+            console.log(`[${pluginName}] - Copy include to ${outdirName}/include`)
+            const targetDir = resolve(outDir, 'include');
+            copyRecursiveSync(includeDir, targetDir);
         }
     }
 }
 
-
 function copyRecursiveSync(src, dest) {
     var exists = existsSync(src);
     var stats = exists && statSync(src);

package/plugins/vite/index.js

@@ -8,6 +8,7 @@ import { needleCopyFiles } from "./copyfiles.js";
 import { needleViteAlias } from "./alias.js";
 import { needleTransformCodegen } from "./transform-codegen.js";
 import { needleLicense } from "./license.js";
+import { needlePeerjs } from "./peer.js";
 
 export * from "./gzip.js";
 export * from "./config.js";
@@ -30,6 +31,7 @@ export const needlePlugins = async (command, config, userSettings) => {
         needleCopyFiles(command, config, userSettings),
         needleTransformCodegen(command, config, userSettings),
         needleDrop(command, config, userSettings),
+        needlePeerjs(command, config, userSettings)
     ];
     array.push(await editorConnection(command, config, userSettings, array));
     return array;

package/plugins/vite/meta.js

@@ -91,6 +91,9 @@ export const needleMeta = (command, config, userSettings) => {
                     }
                 }
 
+                // if(!tags.filter(t => t.attrs?.name === "generator"))
+                    tags.push({ tag: 'meta', attrs: { name: 'generator', content: 'Needle' } });
+
                 return { html, tags }
             },
         }
@@ -124,8 +127,8 @@ function removeMetaTag(html, name) {
 function insertNeedleCredits(html) {
     const needleCredits = `<!-- 🌵 Made with Needle — https://needle.tools -->`;
     html = html.replace(
-        /<head>/,
-        needleCredits + "\n<head>",
+        /<head/,
+        needleCredits + "\n<head",
     );
     return html;
 }

package/plugins/vite/peer.js

@@ -0,0 +1,28 @@
+
+const peerjsString = `/* needle: injected fix for peerjs */
+window.global = window;
+var parcelRequire;`
+
+export const needlePeerjs = (command, config, userSettings) => {
+
+    if (userSettings.noPeer === true) return;
+
+    return {
+        name: 'needle-peerjs',
+        transformIndexHtml: {
+            enforce: 'pre',
+            transform(html, _ctx) {
+                return {
+                    html,
+                    tags: [
+                        {
+                            tag: 'script',
+                            children: peerjsString,
+                            injectTo: 'body-prepend',
+                        },
+                    ]
+                }
+            }
+        }
+    }
+}

package/plugins/vite/reload.js

@@ -61,22 +61,26 @@ export const needleReload = (command, config, userSettings) => {
         transformIndexHtml: {
             enforce: 'pre',
             transform(html, _) {
-                if (config?.allowHotReload === false) return [html];
-                if (userSettings?.allowHotReload === false) return [html];
+                if (config?.allowHotReload === false) return html;
+                if (userSettings?.allowHotReload === false) return html;
                 const file = path.join(__dirname, 'reload-client.js');
-                return [
-                    {
-                        tag: 'script',
-                        attrs: {
-                            type: 'module',
+                return {
+                    html,
+                    tags: [
+                        {
+                            tag: 'script',
+                            attrs: {
+                                type: 'module',
+                            },
+                            children: readFileSync(file, 'utf8'),
+                            injectTo: 'body',
                         },
-                        children: readFileSync(file, 'utf8'),
-                        injectTo: 'body',
-                    },
-                ];
+                    ]
+                }
+
             },
-        },
-    };
+        }
+    }
 }
 
 

package/src/engine/codegen/register_types.js

@@ -108,6 +108,7 @@ import { PlayerSync } from "../../engine-components-experimental/networking/Play
 import { PointerEventData } from "../../engine-components/ui/PointerEvents";
 import { PostProcessingHandler } from "../../engine-components/postprocessing/PostProcessingHandler";
 import { PresentationMode } from "../../engine-components-experimental/Presentation";
+import { QuickLookOverlay } from "../../engine-components/export/usdz/USDZExporter";
 import { RawImage } from "../../engine-components/ui/Image";
 import { Raycaster } from "../../engine-components/ui/Raycaster";
 import { Rect } from "../../engine-components/ui/RectTransform";
@@ -296,6 +297,7 @@ TypeStore.add("PlayerSync", PlayerSync);
 TypeStore.add("PointerEventData", PointerEventData);
 TypeStore.add("PostProcessingHandler", PostProcessingHandler);
 TypeStore.add("PresentationMode", PresentationMode);
+TypeStore.add("QuickLookOverlay", QuickLookOverlay);
 TypeStore.add("RawImage", RawImage);
 TypeStore.add("Raycaster", Raycaster);
 TypeStore.add("Rect", Rect);

package/src/engine/engine_context.ts

@@ -34,6 +34,7 @@ const debug = utils.getParam("debugSetup");
 const stats = utils.getParam("stats");
 const debugActive = utils.getParam("debugactive");
 const debugframerate = utils.getParam("debugframerate");
+const debugCoroutine = utils.getParam("debugcoroutine");
 
 // this is where functions that setup unity scenes will be pushed into
 // those will be accessed from our custom html element to load them into their context
@@ -859,6 +860,7 @@ export class Context implements IContext {
 					// TODO we might want to keep coroutines playing even if the component is disabled or inactive
 					const remove = !evt.comp || evt.comp.destroyed || !evt.main || evt.comp["enabled"] === false;
 					if (remove) {
+						if (debugCoroutine) console.log("Removing coroutine", evt.comp, evt.comp["enabled"])
 						evts.splice(i, 1);
 						--i;
 						continue;

package/src/engine/engine_mainloop_utils.ts

@@ -150,7 +150,7 @@ export function processNewScripts(context: IContext) {
 
 export function processRemoveFromScene(script: IComponent) {
     if (!script) return;
-    script.__internalDisable();
+    script.__internalDisable(true);
     removeScriptFromContext(script, script.context);
 }
 

package/src/engine/engine_serialization_core.ts

@@ -279,7 +279,7 @@ export function deserializeObject(obj: ISerializable, serializedData: object, co
             for (const key in typeInfo) {
                 const serializedEntryInfo = typeInfo[key];
                 const data = serializedData[key];
-
+                if(debug) console.log(key, data, obj, serializedEntryInfo)
 
                 if (obj[key] !== undefined && data === undefined) {
                     // if a field is marked as serialized and has some default value

package/src/engine/engine_types.ts

@@ -123,9 +123,9 @@ export interface IComponent {
     /** @internal */
     __internalStart();
     /** @internal */
-    __internalEnable();
+    __internalEnable(isAddingOrRemovingFromScene?: boolean);
     /** @internal */
-    __internalDisable();
+    __internalDisable(isAddingOrRemovingFromScene?: boolean);
     /** @internal */
     __internalDestroy();
     /** @internal */

package/src/engine/engine_utils.ts

@@ -97,12 +97,12 @@ export function setOrAddParamsToUrl(url: URLSearchParams, paramName: string, par
         url.append(paramName, paramValue.toString());
 }
 
-export function pushState(title: string, urlParams: URLSearchParams) {
-    window.history.pushState(null, title, "?" + urlParams.toString());
+export function pushState(title: string, urlParams: URLSearchParams, state?: any) {
+    window.history.pushState(state, title, "?" + urlParams.toString());
 }
 
-export function setState(title: string, urlParams: URLSearchParams) {
-    window.history.replaceState(null, title, "?" + urlParams.toString());
+export function setState(title: string, urlParams: URLSearchParams, state?: any) {
+    window.history.replaceState(state, title, "?" + urlParams.toString());
 }
 
 // for room id
@@ -212,7 +212,7 @@ const debugGetPath = getParam("debugresolveurl");
 export const relativePathPrefix = "rel:";
 
 /** @deprecated use resolveUrl instead */
-export function getPath(source:SourceIdentifier|undefined, uri:string) : string {
+export function getPath(source: SourceIdentifier | undefined, uri: string): string {
     return resolveUrl(source, uri);
 }
 /**
@@ -226,7 +226,7 @@ export function resolveUrl(source: SourceIdentifier | undefined, uri: string): s
         if (debugGetPath) console.warn("getPath: uri is undefined, returning uri", uri);
         return uri;
     }
-    if(uri.startsWith("./")) {
+    if (uri.startsWith("./")) {
         return uri;
     }
     if (uri.startsWith("http")) {
@@ -237,7 +237,7 @@ export function resolveUrl(source: SourceIdentifier | undefined, uri: string): s
         if (debugGetPath) console.warn("getPath: source is undefined, returning uri", uri);
         return uri;
     }
-    if(uri.startsWith(relativePathPrefix)){
+    if (uri.startsWith(relativePathPrefix)) {
         uri = uri.substring(4);
     }
     const pathIndex = source.lastIndexOf("/");

package/src/engine-components/Component.ts

@@ -470,7 +470,7 @@ export class Component implements IComponent, EventTarget {
 
 
     /** @internal */
-    __internalEnable(): boolean {
+    __internalEnable(isAddingToScene?: boolean): boolean {
         if (this.__destroyed) {
             if (isDevEnvironment()) {
                 console.warn("[Needle Engine Dev] Trying to enable destroyed component");
@@ -481,7 +481,10 @@ export class Component implements IComponent, EventTarget {
         // But a user can change enable during awake
         if (!this.__didAwake) return false;
         if (this.__didEnable) {
-            this.__isEnabled = true;
+            // We dont want to change the enable state if we are adding to scene
+            // But we want to change the state when e.g. a user changes the enable state during awake
+            if (isAddingToScene !== true)
+                this.__isEnabled = true;
             return false;
         }
         // console.trace("INTERNAL ENABLE");
@@ -492,12 +495,14 @@ export class Component implements IComponent, EventTarget {
     }
 
     /** @internal */
-    __internalDisable() {
+    __internalDisable(isRemovingFromScene?: boolean) {
         // Don't change enable before awake
         // But a user can change enable during awake
         if (!this.__didAwake) return;
         if (!this.__didEnable) {
-            this.__isEnabled = false;
+            // We dont want to change the enable state if we are removing from a scene
+            if (isRemovingFromScene !== true)
+                this.__isEnabled = false;
             return;
         }
         this.__didEnable = false;

package/src/engine-components/SceneSwitcher.ts

@@ -14,7 +14,7 @@ ContextRegistry.registerCallback(ContextEvent.ContextRegistered, async _ => {
     // We need to defer import to not get issues with circular dependencies
     import("../engine/engine_element").then(res => {
         const webcomponent = res.NeedleEngineHTMLElement;
-        if(debug) console.log("SceneSwitcher: registering scene attribute", webcomponent.observedAttributes);
+        if (debug) console.log("SceneSwitcher: registering scene attribute", webcomponent.observedAttributes);
         if (!webcomponent.observedAttributes.includes(ENGINE_ELEMENT_SCENE_ATTRIBUTE_NAME))
             webcomponent.observedAttributes.push(ENGINE_ELEMENT_SCENE_ATTRIBUTE_NAME);
     });
@@ -22,6 +22,12 @@ ContextRegistry.registerCallback(ContextEvent.ContextRegistered, async _ => {
 
 const couldNotLoadScenePromise = Promise.resolve(false);
 
+export type LoadSceneEvent = {
+    switcher: SceneSwitcher;
+    scene: AssetReference;
+    index: number;
+}
+
 export class SceneSwitcher extends Behaviour {
 
     @serializable(AssetReference)
@@ -108,7 +114,17 @@ export class SceneSwitcher extends Behaviour {
         let wasUsingHistory = this.useHistory;
         try {
             this.useHistory = false;
-            await this.tryLoadFromQueryParam();
+            let didResolve = false;
+            if (this.queryParameterName)
+                didResolve = await this.tryLoadFromQueryParam();
+            if (!didResolve) {
+                const state = _state.state;
+                if (state !== null && state.startsWith(this.guid)) {
+                    const value = state.substr(this.guid.length + 2);
+                    console.log(value);
+                    await this.trySelectSceneFromValue(value);
+                }
+            }
         }
         finally {
             this.useHistory = wasUsingHistory;
@@ -192,7 +208,15 @@ export class SceneSwitcher extends Behaviour {
         const index = this._currentIndex = this.scenes?.indexOf(scene) ?? -1;
         this._currentScene = scene;
         try {
+            const loadStartEvt = new CustomEvent<LoadSceneEvent>("loadscene-start", { detail: { scene: scene, switcher: this, index: index } })
+            this.dispatchEvent(loadStartEvt);
             await scene.loadAssetAsync();
+            const finishedEvt = new CustomEvent<LoadSceneEvent>("loadscene-finished", { detail: { scene: scene, switcher: this, index: index } });
+            this.dispatchEvent(finishedEvt);
+            if (finishedEvt.defaultPrevented) {
+                if (debug) console.warn("Adding loaded scene prevented:", scene, finishedEvt);
+                return false;
+            }
             if (!scene.asset) {
                 if (debug) console.warn("Failed loading scene:", scene);
                 return false;
@@ -201,9 +225,18 @@ export class SceneSwitcher extends Behaviour {
                 GameObject.add(scene.asset, this.gameObject);
                 if (this.useSceneLighting)
                     this.context.sceneLighting.enable(scene)
-                // save the loaded scene as an url parameter
-                if (this.queryParameterName?.length)
-                    setParamWithoutReload(this.queryParameterName, index.toString(), this.useHistory);
+                if (this.useHistory) {
+                    // save the loaded scene as an url parameter
+                    if (this.queryParameterName?.length)
+                        setParamWithoutReload(this.queryParameterName, index.toString(), this.useHistory);
+                    // or set the history state without updating the url parameter
+                    else {
+                        const lastState = history.state;
+                        const stateName = this.guid + "::" + index;
+                        if (lastState !== stateName)
+                            history.pushState(stateName, "unused", location.href);
+                    }
+                }
                 return true;
             }
         }

package/src/engine-components/codegen/components.ts

@@ -103,6 +103,7 @@ export { PlayableDirector } from "../timeline/PlayableDirector";
 export { PlayerColor } from "../PlayerColor";
 export { PointerEventData } from "../ui/PointerEvents";
 export { PostProcessingHandler } from "../postprocessing/PostProcessingHandler";
+export { QuickLookOverlay } from "../export/usdz/USDZExporter";
 export { RawImage } from "../ui/Image";
 export { Raycaster } from "../ui/Raycaster";
 export { Rect } from "../ui/RectTransform";