@needle-tools/engine 3.5.2-alpha → 3.5.3-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "3.5.2-alpha",
+    "version": "3.5.3-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/src/engine/codegen/register_types.js

@@ -1,5 +1,5 @@
 import { TypeStore } from "./../engine_typestore"
-
+
 // Import types
 import { __Ignore } from "../../engine-components/codegen/components";
 import { ActionBuilder } from "../../engine-components/export/usdz/extensions/behavior/BehavioursBuilder";
@@ -14,6 +14,7 @@ import { Animator } from "../../engine-components/Animator";
 import { AnimatorController } from "../../engine-components/AnimatorController";
 import { Antialiasing } from "../../engine-components/postprocessing/Effects/Antialiasing";
 import { AttachedObject } from "../../engine-components/webxr/WebXRController";
+import { AudioExtension } from "../../engine-components/export/usdz/extensions/behavior/AudioExtension";
 import { AudioListener } from "../../engine-components/AudioListener";
 import { AudioSource } from "../../engine-components/AudioSource";
 import { AudioTrackHandler } from "../../engine-components/timeline/TimelineTracks";
@@ -116,6 +117,7 @@ import { ParticleSystemRenderer } from "../../engine-components/ParticleSystem";
 import { PixelationEffect } from "../../engine-components/postprocessing/Effects/Pixelation";
 import { PlayableDirector } from "../../engine-components/timeline/PlayableDirector";
 import { PlayAnimationOnClick } from "../../engine-components/export/usdz/extensions/behavior/BehaviourComponents";
+import { PlayAudioOnClick } from "../../engine-components/export/usdz/extensions/behavior/BehaviourComponents";
 import { PlayerColor } from "../../engine-components/PlayerColor";
 import { PlayerState } from "../../engine-components-experimental/networking/PlayerSync";
 import { PlayerSync } from "../../engine-components-experimental/networking/PlayerSync";
@@ -213,7 +215,7 @@ import { XRGrabModel } from "../../engine-components/webxr/WebXRGrabRendering";
 import { XRGrabRendering } from "../../engine-components/webxr/WebXRGrabRendering";
 import { XRRig } from "../../engine-components/webxr/WebXRRig";
 import { XRState } from "../../engine-components/XRFlag";
-
+
 // Register types
 TypeStore.add("__Ignore", __Ignore);
 TypeStore.add("ActionBuilder", ActionBuilder);
@@ -228,6 +230,7 @@ TypeStore.add("Animator", Animator);
 TypeStore.add("AnimatorController", AnimatorController);
 TypeStore.add("Antialiasing", Antialiasing);
 TypeStore.add("AttachedObject", AttachedObject);
+TypeStore.add("AudioExtension", AudioExtension);
 TypeStore.add("AudioListener", AudioListener);
 TypeStore.add("AudioSource", AudioSource);
 TypeStore.add("AudioTrackHandler", AudioTrackHandler);
@@ -330,6 +333,7 @@ TypeStore.add("ParticleSystemRenderer", ParticleSystemRenderer);
 TypeStore.add("PixelationEffect", PixelationEffect);
 TypeStore.add("PlayableDirector", PlayableDirector);
 TypeStore.add("PlayAnimationOnClick", PlayAnimationOnClick);
+TypeStore.add("PlayAudioOnClick", PlayAudioOnClick);
 TypeStore.add("PlayerColor", PlayerColor);
 TypeStore.add("PlayerState", PlayerState);
 TypeStore.add("PlayerSync", PlayerSync);

package/src/engine/debug/debug_overlay.ts

@@ -107,7 +107,8 @@ const currentMessages = new Set<string>();
 function showMessage(type: LogType, element: HTMLElement, msg: string) {
     const container = getLogsContainer(element);
     if (container.childElementCount >= 20) {
-        return;
+        const last = container.lastElementChild;
+        returnMessageContainer(last as HTMLElement);
     }
     // truncate long messages before they go into the cache/set
     if(msg.length > 300) msg = msg.substring(0, 300) + "...";

package/src/engine/engine_components.ts

@@ -160,7 +160,8 @@ export function getComponent<T>(obj: Object3D, componentType: Constructor<T>) {
 
 export function getComponents<T>(obj: Object3D, componentType: Constructor<T>, arr?: T[] | null): T[] {
     if (!arr) arr = [];
-    return onGetComponent(obj, componentType, arr);
+    onGetComponent(obj, componentType, arr);
+    return arr;
 }
 
 export function getComponentInChildren<T>(obj: Object3D, componentType: Constructor<T>, includeInactive?: boolean) {

package/src/engine/engine_element_loading.ts

@@ -186,7 +186,7 @@ export class EngineLoadingView implements ILoadingViewHandler {
             if (loadingStyle === "light")
                 this._loadingElement.style.backgroundColor = "#ddd";
             else
-                this._loadingElement.style.backgroundColor = "#000";
+                this._loadingElement.style.backgroundColor = "#222";
             this._loadingElement.style.display = "flex";
             this._loadingElement.style.alignItems = "center";
             this._loadingElement.style.justifyContent = "center";
@@ -289,7 +289,7 @@ export class EngineLoadingView implements ILoadingViewHandler {
         messageContainer.style.fontSize = ".8em";
         messageContainer.style.paddingTop = ".5em";
         messageContainer.style.fontWeight = "200";
-        messageContainer.style.fontFamily = "Roboto, sans-serif";
+        messageContainer.style.fontFamily = "Roboto, sans-serif, Arial";
         // messageContainer.style.border = "1px solid rgba(255,255,255,.1)";
         messageContainer.style.justifyContent = "center";
         this._loadingElement.appendChild(messageContainer);

package/src/engine/engine_gameobject.ts

@@ -113,6 +113,9 @@ export function destroy(instance: Object3D | Component, recursive: boolean = tru
 }
 
 function internalDestroy(instance: Object3D | Component, recursive: boolean = true, dispose: boolean = false, isRoot: boolean = true) {
+    if (instance === null || instance === undefined)
+        return;
+    
     const comp = instance as Component;
     if (comp.isComponent) {
         comp.__internalDisable();

package/src/engine/engine_input.ts

@@ -611,9 +611,12 @@ export class Input extends EventTarget implements IInput {
 
         const lf = this._pointerPositionsLastFrame[evt.button];
         lf.copy(this._pointerPositions[evt.button]);
+        // accumulate delta (it's reset in end of frame), if we just write it here it's not correct when the browser console is open
+        const delta = this._pointerPositionsDelta[evt.button];
         const dx = evt.clientX - lf.x;
         const dy = evt.clientY - lf.y;
-        this._pointerPositionsDelta[evt.button].set(dx, dy);
+        delta.x += dx;
+        delta.y += dy;
 
         this._pointerPositions[evt.button].x = evt.clientX;
         this._pointerPositions[evt.button].y = evt.clientY;

package/src/engine/engine_physics_rapier.ts

@@ -207,7 +207,8 @@ export class RapierPhysics implements IPhysicsEngine {
     private async internalInitialization() {
         // NEEDLE_PHYSICS_INIT_START
         // use .env file with VITE_NEEDLE_USE_RAPIER=false to treeshape rapier
-        if (import.meta.env.VITE_NEEDLE_USE_RAPIER === "false") {
+        // @ts-ignore
+        if ("env" in import.meta && import.meta.env.VITE_NEEDLE_USE_RAPIER === "false") {
             return false;
         }
         // Can be transformed during build time to disable rapier

package/src/engine/engine_serialization_core.ts

@@ -434,7 +434,14 @@ function implictlyAssignPrimitiveTypes(obj: any, serializedData: any) {
                 if (targetMember !== undefined) continue;
                 // resolve serialized primitive types
                 if (isPrimitiveType(data[key]) && !isPrimitiveType(member)) {
-                    // console.log("ASSIGN", key, member, member[key], targetMember, data[key]);
+
+                    const prop = tryFindPropertyDescriptor(member, key);
+                    if (!prop?.writable === false || (prop && prop.set === undefined)) {
+                        if (debug)
+                            console.warn("Property is not writable \"" + key + "\"", member, prop, data[key], member[key]);
+                        continue;
+                    }
+                    // console.log("ASSIGN", key, member, member[key], targetMember, data[key], prop);
                     member[key] = data[key];
                 }
             }
@@ -442,6 +449,15 @@ function implictlyAssignPrimitiveTypes(obj: any, serializedData: any) {
     }
 }
 
+function tryFindPropertyDescriptor(obj: object, key: string) : PropertyDescriptor | undefined {
+    while(obj){
+        const desc = Object.getOwnPropertyDescriptor(obj, key);
+        if(desc) return desc;
+        obj = Object.getPrototypeOf(obj);
+    }
+    return undefined;
+}
+
 function isPrimitiveType(val): boolean {
     switch (typeof val) {
         case "number":

package/src/engine/extensions/NEEDLE_lighting_settings.ts

@@ -48,8 +48,9 @@ export class NEEDLE_lighting_settings implements GLTFLoaderPlugin {
                 let settings: SceneLightSettings | undefined = undefined;
                 // If the result scene has only one child we add the LightingSettingsComponent to that child
                 if (_result.scene.children.length === 1) {
+                    const obj = _result.scene.children[0];
                     // add a component to the root of the scene
-                    settings = GameObject.addNewComponent(_result.scene.children[0], SceneLightSettings, false);
+                    settings = GameObject.addNewComponent(obj, SceneLightSettings, false);
                 }
                 // if the scene already has multiple children we add it as a new object
                 else {
@@ -117,6 +118,15 @@ export class SceneLightSettings extends Behaviour {
                 }
             });
         }
+
+        // make sure the component is in the end of the list 
+        // (e.g. if we have an animation on the first component from an instance and add the scenelightingcomponent the animation binding will break)
+        const comps = this.gameObject.userData?.components;
+        if (comps) {
+            const index = comps.indexOf(this);
+            comps.splice(index, 1);
+            comps.push(this);
+        }
     }
 
     onDestroy(): void {

package/src/engine-components/Component.ts

@@ -195,9 +195,6 @@ export abstract class GameObject extends Object3D implements Object3D, IGameObje
      * @param instance component to move to the GO
      */
     public static moveComponent(go: IGameObject, instance: Component): void {
-        if (instance.gameObject == null) {
-            throw new Error("Did you mean to create a new component? Use addNewComponent");
-        }
         moveComponentInstance(go, instance as any);
     }
 
@@ -277,6 +274,7 @@ export abstract class GameObject extends Object3D implements Object3D, IGameObje
     // these are implemented via threejs object extensions
     abstract activeSelf: boolean;
     abstract addNewComponent<T>(type: Constructor<T>): T | null;
+    // TODO: add method for addExisting component
     abstract removeComponent(comp: Component): Component;
     abstract getOrAddComponent<T>(typeName: Constructor<T> | null): T;
     abstract getComponent<T>(type: Constructor<T>): T | null;

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

@@ -12,6 +12,7 @@ export { Animator } from "../Animator";
 export { AnimatorController } from "../AnimatorController";
 export { Antialiasing } from "../postprocessing/Effects/Antialiasing";
 export { AttachedObject } from "../webxr/WebXRController";
+export { AudioExtension } from "../export/usdz/extensions/behavior/AudioExtension";
 export { AudioListener } from "../AudioListener";
 export { AudioSource } from "../AudioSource";
 export { AudioTrackHandler } from "../timeline/TimelineTracks";
@@ -114,6 +115,7 @@ export { ParticleSystemRenderer } from "../ParticleSystem";
 export { PixelationEffect } from "../postprocessing/Effects/Pixelation";
 export { PlayableDirector } from "../timeline/PlayableDirector";
 export { PlayAnimationOnClick } from "../export/usdz/extensions/behavior/BehaviourComponents";
+export { PlayAudioOnClick } from "../export/usdz/extensions/behavior/BehaviourComponents";
 export { PlayerColor } from "../PlayerColor";
 export { PointerEventData } from "../ui/PointerEvents";
 export { PostProcessingHandler } from "../postprocessing/PostProcessingHandler";

package/src/engine-components/export/usdz/Extension.ts

@@ -1,11 +1,12 @@
-import { USDObject } from "./ThreeUSDZExporter";
+import { USDObject, USDZExporterContext } from "./ThreeUSDZExporter";
+import { Object3D } from "three";
 
 export interface IUSDExporterExtension {
 
     get extensionName(): string;
     onBeforeBuildDocument?(context);
     onAfterBuildDocument?(context);
-    onExportObject?(object, model : USDObject, context);
+    onExportObject?(object: Object3D, model : USDObject, context: USDZExporterContext);
     onAfterSerialize?(context);
     onAfterHierarchy?(context, writer : any);
 }

package/src/engine-components/export/usdz/ThreeUSDZExporter.ts

@@ -1,3 +1,5 @@
+import { Renderer } from '../../Renderer';
+import { GameObject } from '../../Component';
 import {
 	PlaneGeometry,
 	Texture,
@@ -19,6 +21,9 @@ import {
 	MeshStandardMaterial,
 	sRGBEncoding,
 	MeshPhysicalMaterial,
+	Object3D,
+	MeshBasicMaterial,
+	SkinnedMesh,
 } from 'three';
 import * as fflate from 'three/examples/jsm/libs/fflate.module.js';
 
@@ -436,7 +441,7 @@ class USDZExporter {
 
 		parseDocument( context );
 
-		invokeAll( context, 'onAfterSerialize' );
+		await invokeAll( context, 'onAfterSerialize' );
 
 		context.output += buildMaterials( materials, textures );
 
@@ -509,21 +514,33 @@ class USDZExporter {
 
 }
 
-function traverseVisible( object, parentModel, context ) {
+function traverseVisible( object: Object3D, parentModel: USDObject, context: USDZExporterContext ) {
 
 	if ( ! object.visible ) return;
-
+	
 	let model: USDObject | undefined = undefined;
-	const geometry = object.geometry;
-	const material = object.material;
+	let geometry: BufferGeometry | undefined = undefined;
+	let material: Material | Material[] | undefined = undefined;
+	
+	if (object instanceof Mesh) {
+		geometry = object.geometry;
+		material = object.material;
+	}
 
+	// TODO what should be do with disabled renderers?
+	// Here we just assume they're off, and don't export them
+	const renderer = GameObject.getComponent( object, Renderer )
+	if (renderer && !renderer.enabled) {
+		geometry = undefined;
+		material = undefined;
+	}
 
-	if ( object.isMesh && material && (material.isMeshStandardMaterial || material.isMeshBasicMaterial) && ! object.isSkinnedMesh ) {
+	if ( object instanceof Mesh && material && (material instanceof MeshStandardMaterial || material instanceof MeshBasicMaterial) && ! (object instanceof SkinnedMesh )) {
 
 		const name = getObjectId( object );
 		model = new USDObject( object.uuid, name, object.matrix, geometry, material );
 
-	} else if ( object.isCamera ) {
+	} else if ( object instanceof Camera ) {
 
 		const name = getObjectId( object );
 		model = new USDObject( object.uuid, name, object.matrix, undefined, undefined, object );
@@ -577,7 +594,7 @@ function traverseVisible( object, parentModel, context ) {
 
 }
 
-function parseDocument( context: USDZExporterContext ) {
+async function parseDocument( context: USDZExporterContext ) {
 
 	for ( const child of context.document.children ) {
 
@@ -666,14 +683,27 @@ function addResources( object, context: USDZExporterContext ) {
 
 }
 
-function invokeAll( context: USDZExporterContext, name: string, writer: USDWriter | null = null ) {
+async function invokeAll( context: USDZExporterContext, name: string, writer: USDWriter | null = null ) {
 
 	if ( context.extensions ) {
 
 		for ( const ext of context.extensions ) {
 
-			if ( typeof ext[ name ] === 'function' )
-				ext[ name ]( context, writer );
+			if ( !ext ) continue;
+
+			if ( typeof ext[ name ] === 'function' ) {
+
+				const method = ext[ name ];
+
+				const isAsync = method.constructor.name === "AsyncFunction";
+				
+				if ( isAsync ) {
+					await method.call( ext, context, writer );
+				} else {
+					method.call( ext, context, writer );
+				}
+
+			}
 
 		}
 
@@ -841,6 +871,14 @@ export function buildXform( model, writer, context ) {
 	const material = model.material;
 	const camera = model.camera;
 	const name = model.name;
+
+	// postprocess node
+	if ( model.onBeforeSerialize ) {
+
+		model.onBeforeSerialize( writer, context );
+
+	}
+
 	const transform = buildMatrix( matrix );
 
 	if ( matrix.determinant() < 0 ) {
@@ -849,11 +887,12 @@ export function buildXform( model, writer, context ) {
 
 	}
 
-	if ( geometry )
+	if ( geometry ) {
 		writer.beginBlock( `def Xform "${name}" (
-			prepend references = @./geometries/Geometry_${geometry.id}.usd@</Geometry>
-			prepend apiSchemas = ["MaterialBindingAPI"]
+prepend references = @./geometries/Geometry_${geometry.id}.usd@</Geometry>
+prepend apiSchemas = ["MaterialBindingAPI"]
 		)` );
+	}
 	else if ( camera )
 		writer.beginBlock( `def Camera "${name}"` );
 	else

package/src/engine-components/export/usdz/USDZExporter.ts

@@ -14,6 +14,7 @@ import { Context } from "../../../engine/engine_setup";
 import { WebARSessionRoot } from "../../webxr/WebARSessionRoot";
 import { hasProLicense } from "../../../engine/engine_license";
 import { BehaviorExtension } from "./extensions/behavior/Behaviour";
+import { AudioExtension } from "./extensions/behavior/AudioExtension";
 
 const debug = getParam("debugusdz");
 
@@ -41,6 +42,9 @@ export class USDZExporter extends Behaviour {
     @serializable()
     exportFileName?: string;
 
+    @serializable(URL)
+    customUsdzFile?: string;
+
     @serializable(QuickLookOverlay)
     overlay?: QuickLookOverlay;
 
@@ -91,6 +95,7 @@ export class USDZExporter extends Behaviour {
 
         if (this.interactive) {
             this.extensions.push(new BehaviorExtension());
+            this.extensions.push(new AudioExtension());
         }
     }
 
@@ -120,6 +125,35 @@ export class USDZExporter extends Behaviour {
     }
 
     async exportAsync() {
+        
+        let name = this.exportFileName ?? this.objectToExport?.name ?? this.name;
+        if (!hasProLicense()) name += "-MadeWithNeedle";
+        name += "-" + getFormattedDate(); // seems iOS caches the file in some cases, this ensures we always have a fresh file
+
+        // ability to specify a custom USDZ file to be used instead of a dynamic one
+        if (this.customUsdzFile) {
+
+            // see https://developer.apple.com/documentation/arkit/adding_an_apple_pay_button_or_a_custom_action_in_ar_quick_look
+            const overlay = this.buildQuicklookOverlay();
+            if(debug) console.log(overlay);
+            const callToAction = overlay.callToAction ? encodeURIComponent(overlay.callToAction) : "";
+            const checkoutTitle = overlay.checkoutTitle ? encodeURIComponent(overlay.checkoutTitle) : "";
+            const checkoutSubtitle = overlay.checkoutSubtitle ? encodeURIComponent(overlay.checkoutSubtitle) : "";
+            this.link.href = this.customUsdzFile + `#callToAction=${callToAction}&checkoutTitle=${checkoutTitle}&checkoutSubtitle=${checkoutSubtitle}&callToActionURL=${overlay.callToActionURL}`;
+
+            console.log(this.link.href)
+
+            if (!this.lastCallback) {
+                this.lastCallback = this.quicklookCallback.bind(this)
+                this.link.addEventListener('message', this.lastCallback);
+            }
+
+            // open quicklook
+            this.link.download = name + ".usdz";
+            this.link.click();
+            return;
+        }
+
         if (!this.objectToExport) return;
 
         // make sure we apply the AR scale
@@ -145,10 +179,6 @@ export class USDZExporter extends Behaviour {
         const eventArgs = { self: this, exporter: exporter, extensions: extensions, object: this.objectToExport };
         this.dispatchEvent(new CustomEvent("before-export", { detail: eventArgs }))
 
-        let name = this.exportFileName ?? this.objectToExport?.name ?? this.name;
-        if (!hasProLicense()) name += "-MadeWithNeedle";
-        name += "-" + getFormattedDate(); // seems iOS caches the file in some cases, this ensures we always have a fresh file
-
         //@ts-ignore
         exporter.debug = debug;
         

package/src/engine-components/export/usdz/extensions/behavior/AudioExtension.ts

@@ -0,0 +1,63 @@
+import { GameObject } from "../../../../Component";
+import { IUSDExporterExtension } from "../../Extension";
+import { USDObject, USDWriter, USDZExporterContext } from "../../ThreeUSDZExporter";
+import { Object3D } from "three";
+import { AudioSource } from "../../../../AudioSource";
+
+export class AudioExtension implements IUSDExporterExtension {
+
+    get extensionName(): string {
+        return "Audio";
+    }
+
+    private files: string[] = [];
+
+    onExportObject?(object: Object3D, model : USDObject, _context: USDZExporterContext) {
+        // check if this object has an audio source, add the relevant schema in that case.
+        const audioSources = GameObject.getComponents(object, AudioSource);
+        if (audioSources.length) {
+            for (const audioSource of audioSources) {
+
+                // do nothing if this audio source is not set to play on awake - 
+                // should be controlled via PlayAudioOnClick instead then.
+                if (!audioSource.playOnAwake)
+                    continue;
+
+                const clipName = audioSource.clip.split("/").pop();
+
+                if (!this.files.includes(audioSource.clip)) {
+                    this.files.push(audioSource.clip);
+                }
+                
+                model.addEventListener('serialize', (writer: USDWriter, _context: USDZExporterContext) => {
+                    writer.appendLine();
+                    writer.beginBlock(`def SpatialAudio "${model.name}"`);
+                    writer.appendLine(`uniform asset filePath = @audio/${clipName}@`);
+                    writer.appendLine(`uniform token auralMode = "${ audioSource.spatialBlend > 0 ? "spatial" : "nonSpatial" }"`);
+                    // theoretically we could do timeline-like audio sequencing with this.
+                    writer.appendLine(`uniform token playbackMode = "${audioSource.loop ?  "loopFromStage" : "onceFromStart" }"`);
+                    writer.appendLine(`uniform float gain = ${audioSource.volume}`);
+                    writer.closeBlock();
+                });
+            }
+        }
+    }
+
+    async onAfterSerialize(context: USDZExporterContext) {
+        console.warn("onAfterSerialize", this);
+        // write the files to the context.
+        for (const file of this.files) {
+
+            const clipName = file.split("/").pop();
+
+            // convert file (which is a path) to a blob.
+            const audio = await fetch(file);
+            const audioBlob = await audio.blob();
+            const arrayBuffer = await audioBlob.arrayBuffer();
+
+            const audioData: Uint8Array = new Uint8Array(arrayBuffer)
+
+            context.files["audio/" + clipName] = audioData;
+        }
+    }
+}

package/src/engine-components/export/usdz/extensions/behavior/Behaviour.ts

@@ -8,6 +8,7 @@ export interface UsdzBehaviour {
     createBehaviours?(ext: BehaviorExtension, model: USDObject, context: IContext): void;
     beforeCreateDocument?(ext: BehaviorExtension, context: IContext): void;
     afterCreateDocument?(ext: BehaviorExtension, context: IContext): void;
+    afterSerialize?(ext: BehaviorExtension, context: IContext): void;
 }
 
 export class BehaviorExtension implements IUSDExporterExtension {
@@ -23,6 +24,7 @@ export class BehaviorExtension implements IUSDExporterExtension {
     }
 
     behaviourComponents: Array<UsdzBehaviour> = [];
+    private behaviourComponentsCopy: Array<UsdzBehaviour> = [];
 
 
     onBeforeBuildDocument(context) {
@@ -42,7 +44,6 @@ export class BehaviorExtension implements IUSDExporterExtension {
     }
 
     onExportObject(_object, model: USDObject, context) {
-
         for (const beh of this.behaviourComponents) {
             beh.createBehaviours?.call(beh, this, model, context);
         }
@@ -53,6 +54,7 @@ export class BehaviorExtension implements IUSDExporterExtension {
             if (typeof beh.afterCreateDocument === "function")
                 beh.afterCreateDocument(this, context);
         }
+        this.behaviourComponentsCopy = this.behaviourComponents.slice();
         this.behaviourComponents.length = 0;
     }
 
@@ -70,6 +72,26 @@ export class BehaviorExtension implements IUSDExporterExtension {
         }
     }
 
+    async onAfterSerialize(context) {
+        console.log("onAfterSerialize", this.behaviourComponentsCopy)
+        for (const beh of this.behaviourComponentsCopy) {
+            
+            console.log("behaviour", beh)
+            if (typeof beh.afterSerialize === "function") {
+
+                console.log("beh has afterSerialize", beh)
+
+                const isAsync = beh.afterSerialize.constructor.name === "AsyncFunction";
+				
+				if ( isAsync ) {
+					await beh.afterSerialize(this, context);
+				} else {
+					beh.afterSerialize(this, context);
+				}
+            }
+        }
+    }
+
     // combine behaviours that have tap triggers on the same object
     // private combineBehavioursWithSameTapActions() {
     //     // TODO: if behaviours have different settings (e.g. one is exclusive and another one is not) this wont work - we need more logic for that