@needle-tools/engine 4.2.0 → 4.2.3

package/src/engine/engine_input.ts

@@ -3,7 +3,7 @@ import { Intersection, Matrix4, Object3D, Ray, Vector2, Vector3 } from 'three';
 import { showBalloonMessage, showBalloonWarning } from './debug/debug.js';
 import { Context } from './engine_setup.js';
 import { getTempVector, getWorldQuaternion } from './engine_three_utils.js';
-import type { ButtonName, IGameObject, IInput, MouseButtonName, Vec2 } from './engine_types.js';
+import type { ButtonName, CursorTypeName, IGameObject, IInput, MouseButtonName, Vec2 } from './engine_types.js';
 import { DeviceUtilities, type EnumToPrimitiveUnion, getParam } from './engine_utils.js';
 
 const debug = getParam("debuginput");
@@ -394,21 +394,46 @@ export class Input implements IInput {
     get mouseWheelChanged(): boolean { return this.getMouseWheelChanged(0); }
 
     /** Is the primary pointer double clicked (usually the left button). This is equivalent to `input.mouseDoubleClick` */
-    get click() : boolean { return this._pointerClick[0]; }
+    get click(): boolean { return this._pointerClick[0]; }
     /** Was a double click detected for the primary pointer? */
-    get doubleClick() : boolean { return this._pointerDoubleClick[0]; }
+    get doubleClick(): boolean { return this._pointerDoubleClick[0]; }
 
-    private _specialCursorTrigger: number = 0;
+    private readonly _setCursorTypes: CursorTypeName[] = [];
 
+    /** @deprecated use setCursor("pointer") */
     setCursorPointer() {
-        this._specialCursorTrigger += 1;
-        this.context.domElement.style.cursor = "pointer";
+        this.setCursor("pointer");
     }
+    /** @deprecated use unsetCursor() */
     setCursorNormal() {
-        this._specialCursorTrigger -= 1;
-        this._specialCursorTrigger = Math.max(0, this._specialCursorTrigger);
-        if (this._specialCursorTrigger === 0)
+        this.unsetCursor("pointer");
+    }
+    /**
+     * Set a custom cursor. This will set the cursor type until unsetCursor is called
+     */
+    setCursor(type: CursorTypeName) {
+        this._setCursorTypes.push(type);
+        if (this._setCursorTypes.length > 10) {
+            this._setCursorTypes.shift();
+        }
+        this.updateCursor();
+    }
+    /**
+     * Unset a custom cursor. This will set the cursor type to the previous type or default
+     */
+    unsetCursor(type: CursorTypeName) {
+        for (let i = this._setCursorTypes.length - 1; i >= 0; i--) {
+            if (this._setCursorTypes[i] === type) {
+                this._setCursorTypes.splice(i, 1);
+                this.updateCursor();
+                break;
+            }
+        }
+    }
+    private updateCursor() {
+        if (this._setCursorTypes?.length == 0)
             this.context.domElement.style.cursor = "default";
+        else this.context.domElement.style.cursor = this._setCursorTypes[this._setCursorTypes.length - 1];
     }
 
     /**
@@ -756,6 +781,10 @@ export class Input implements IInput {
         window.removeEventListener('pointerup', this.onPointerUp);
         window.removeEventListener('pointercancel', this.onPointerCancel);
 
+        window.removeEventListener("touchstart", this.onTouchStart);
+        window.removeEventListener("touchmove", this.onTouchMove);
+        window.removeEventListener("touchend", this.onTouchEnd);
+
         this._htmlEventSource?.removeEventListener('wheel', this.onMouseWheel, false);
         window.removeEventListener("wheel", this.onWheelWindow, false);
 
@@ -778,7 +807,10 @@ export class Input implements IInput {
         }
     }
 
+    private readonly _receivedPointerMoveEventsThisFrame = new Array<number>;
+
     private onEndOfFrame = () => {
+        this._receivedPointerMoveEventsThisFrame.length = 0;
         for (let i = 0; i < this._pointerUp.length; i++)
             this._pointerUp[i] = false;
         for (let i = 0; i < this._pointerDown.length; i++)
@@ -901,8 +933,14 @@ export class Input implements IInput {
     }
     private onPointerMove = (evt: PointerEvent) => {
         if (this.context.isInAR) return;
+
+        // Prevent multiple pointerMove events per frame
+        if (this._receivedPointerMoveEventsThisFrame.includes(evt.pointerId)) return;
+        this._receivedPointerMoveEventsThisFrame.push(evt.pointerId);
+
         // We want to keep receiving move events until pointerUp and not stop handling events just because we're hovering over *some* HTML element
         // if (this.canReceiveInput(evt) === false) return;
+
         let button = evt.button;
         if (evt.pointerType === "mouse") {
             const pressedButton = this.getFirstPressedButtonForPointer(0);

package/src/engine/engine_loaders.ts

@@ -23,26 +23,22 @@ function ensureLoaders() {
 export function setDracoDecoderPath(path: string | undefined) {
     if (path !== undefined && typeof path === "string") {
         setDracoDecoderLocation(path);
-        const loaders = ensureLoaders();
-        if (debug) console.log("Setting draco decoder path to", path);
-        loaders.dracoLoader.setDecoderPath(path);
     }
 }
 
 export function setDracoDecoderType(type: string | undefined) {
     if (type !== undefined && typeof type === "string") {
-        const loaders = ensureLoaders();
-        if (debug) console.log("Setting draco decoder type to", type);
-        loaders.dracoLoader.setDecoderConfig({ type: type });
+        if (type !== "js") {
+            const loaders = ensureLoaders();
+            if (debug) console.log("Setting draco decoder type to", type);
+            loaders.dracoLoader.setDecoderConfig({ type: type });
+        }
     }
 }
 
 export function setKtx2TranscoderPath(path: string) {
     if (path !== undefined && typeof path === "string") {
         setKTX2TranscoderLocation(path);
-        const loaders = ensureLoaders();
-        if (debug) console.log("Setting ktx2 transcoder path to", path);
-        loaders.ktx2Loader.setTranscoderPath(path);
     }
 }
 
@@ -78,7 +74,7 @@ export function addDracoAndKTX2Loaders(loader: GLTFLoader, context: Pick<Context
     if (!(loader as any).meshoptDecoder)
         loader.setMeshoptDecoder(loaders.meshoptDecoder);
 
-    configureLoader(loader, { 
+    configureLoader(loader, {
         progressive: true,
     });
 

package/src/engine/engine_physics_rapier.ts

@@ -710,7 +710,7 @@ export class RapierPhysics implements IPhysicsEngine {
                 positions = this._meshCache.get(key)!;
             }
             else {
-                if (debugPhysics || isDevEnvironment()) console.warn(`Your MeshCollider \"${collider.name}\" is scaled: consider applying the scale to the collider mesh instead (${scale.x}, ${scale.y}, ${scale.z})`);
+                if (debugPhysics || isDevEnvironment()) console.debug(`[Performance] Your MeshCollider \"${collider.name}\" is scaled: consider applying the scale to the collider mesh instead (${scale.x}, ${scale.y}, ${scale.z})`);
                 const scaledPositions = new Float32Array(positions.length);
                 for (let i = 0; i < positions.length; i += 3) {
                     scaledPositions[i] = positions[i] * scale.x;

package/src/engine/engine_serialization_core.ts

@@ -1,8 +1,8 @@
-import { AnimationClip, Material, Mesh, Object3D, Texture } from "three";
+import { AnimationClip, BufferGeometry, InstancedBufferGeometry, Material, Mesh, Object3D, Texture, WireframeGeometry } from "three";
 import { type GLTF } from "three/examples/jsm/loaders/GLTFLoader.js";
 
 import { debugExtension } from "../engine/engine_default_parameters.js";
-import { addLog,LogType } from "./debug/debug_overlay.js";
+import { addLog, LogType } from "./debug/debug_overlay.js";
 import { isLocalNetwork } from "./engine_networking_utils.js";
 import { Context } from "./engine_setup.js";
 import type { Constructor, ConstructorConcrete, SourceIdentifier } from "./engine_types.js";
@@ -515,8 +515,17 @@ function deserializeObjectWithType(data: any, typeOrConstructor: ConstructorConc
 
     // e.g. when @serializable(Texture) and the texture is already resolved via json pointer from gltf
     // then we dont need to do anything else
-    if (!typeIsFunction && currentValue instanceof type) return currentValue;
-    
+    if (!typeIsFunction && currentValue) {
+        if (currentValue instanceof Material) return currentValue;
+        if (currentValue instanceof Texture) return currentValue;
+        if (currentValue instanceof Mesh) return currentValue;
+        if (currentValue instanceof BufferGeometry) return currentValue;
+        if (currentValue instanceof AnimationClip) return currentValue;
+    }
+    // Removed this line because it prevents assigning serialized values to existing instances for e.g. EventList
+    // https://linear.app/needle/issue/NE-5350
+    // if (!typeIsFunction && currentValue instanceof type) return currentValue;
+
     // try to resolve the serializer for a type only once
     if (!typeContext) {
         typeContext = {

package/src/engine/engine_types.ts

@@ -528,6 +528,11 @@ export interface IPhysicsEngine {
     debugRenderRaycasts: boolean;
 }
 
+/**
+ * Available cursor types 
+ * @link https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
+ */
+export type CursorTypeName = "auto" | "default" | "none" | "context-menu" | "help" | "pointer" | "progress" | "wait" | "cell" | "crosshair" | "text" | "vertical-text" | "alias" | "copy" | "move" | "no-drop" | "not-allowed" | "grab" | "grabbing" | "all-scroll" | "col-resize" | "row-resize" | "n-resize" | "e-resize" | "s-resize" | "w-resize" | "nw-resize" | "se-resize" | "sw-resize" | "ew-resize" | "ns-resize" | "nesw-resize" | "nwse-resize" | "zoom-in" | "zoom-out";
 
 /** Typical mouse button names for most devices */
 export type MouseButtonName = "left" | "right" | "middle";

package/src/engine/webcomponents/needle menu/needle-menu-spatial.ts

@@ -548,14 +548,14 @@ class OnClick implements Pick<IComponent, "__internalAwake"> {
     }
 
     onPointerEnter() {
-        this.context.input.setCursorPointer();
+        this.context.input.setCursor("pointer");
         if (this.allowModifyUI) {
             this.element.set({ backgroundOpacity: 1 });
             ThreeMeshUI.update();
         }
     }
     onPointerExit() {
-        this.context.input.setCursorNormal();
+        this.context.input.unsetCursor("pointer");
         if (this.allowModifyUI) {
             this.element.set({ backgroundOpacity: 0 });
             ThreeMeshUI.update();

package/src/engine-components/Duplicatable.ts

@@ -105,14 +105,14 @@ export class Duplicatable extends Behaviour implements IPointerEventHandler {
         if (!this.object) return;
         if (!this.context.connection.allowEditing) return;
         if (args.button !== 0) return;
-        this.context.input.setCursorPointer();
+        this.context.input.setCursor("pointer");
     }
     onPointerExit(args: PointerEventData) {
         if (args.used) return;
         if (!this.object) return;
         if (!this.context.connection.allowEditing) return;
         if (args.button !== 0) return;
-        this.context.input.setCursorNormal();
+        this.context.input.unsetCursor("pointer");
     }
 
     /** @internal */

package/src/engine-components/EventTrigger.ts

@@ -1,4 +1,5 @@
 import { serializable } from "../engine/engine_serialization.js";
+import { EventSystem } from "./api.js";
 import { Behaviour } from "./Component.js"
 import { EventList } from "./EventList.js";
 import { EventType } from "./EventType.js"
@@ -33,6 +34,13 @@ export class EventTrigger extends Behaviour implements IPointerEventHandler {
         }
     }
 
+    private hasTrigger(type: EventType) {
+        return this.triggers?.some(t => t.eventID === type) ?? false;
+    }
+    private shouldChangeCursor() {
+        return this.hasTrigger(EventType.PointerClick) || this.hasTrigger(EventType.PointerDown) || this.hasTrigger(EventType.PointerUp);
+    }
+
     /** @internal */
     onPointerClick(_: PointerEventData) {
         this.invoke(EventType.PointerClick);
@@ -40,11 +48,17 @@ export class EventTrigger extends Behaviour implements IPointerEventHandler {
 
     /** @internal */
     onPointerEnter(_: PointerEventData) {
+        if (this.shouldChangeCursor()) {
+            this.context.input.setCursor("pointer");
+        }
         this.invoke(EventType.PointerEnter);
     }
 
     /** @internal */
     onPointerExit(_: PointerEventData) {
+        if (this.shouldChangeCursor()) {
+            this.context.input.unsetCursor("pointer");
+        }
         this.invoke(EventType.PointerExit);
     }
 

package/src/engine-components/OrbitControls.ts

@@ -1,13 +1,14 @@
-import { Box3Helper, Object3D, PerspectiveCamera, Ray, Vector2, Vector3, Vector3Like } from "three";
+import { Box3Helper, Euler, Object3D, PerspectiveCamera, Quaternion, Ray, Vector2, Vector3, Vector3Like } from "three";
 import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 
+import { isDevEnvironment } from "../engine/debug/index.js";
 import { setCameraController } from "../engine/engine_camera.js";
 import { Gizmos } from "../engine/engine_gizmos.js";
 import { InputEventQueue, NEPointerEvent } from "../engine/engine_input.js";
 import { Mathf } from "../engine/engine_math.js";
 import { RaycastOptions } from "../engine/engine_physics.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
-import { getBoundingBox, getWorldDirection, getWorldPosition, getWorldRotation, setWorldRotation } from "../engine/engine_three_utils.js";
+import { getBoundingBox, getTempVector, getWorldDirection, getWorldPosition, getWorldRotation, setWorldRotation } from "../engine/engine_three_utils.js";
 import type { ICameraController } from "../engine/engine_types.js";
 import { DeviceUtilities, getParam } from "../engine/engine_utils.js";
 import { Camera } from "./Camera.js";
@@ -616,14 +617,38 @@ export class OrbitControls extends Behaviour implements ICameraController {
 
 
     /** 
-     * Sets camera target position and look direction. Does perform a raycast in the forward direction of the passed in object to find an orbit point 
+     * Sets camera target position and look direction using a raycast in forward direction of the object.  
+     * 
+     * @param source The object to raycast from. If a camera is passed in the camera position will be used as the source.
+     * @param immediateOrDuration If true the camera target will move immediately to the new position, otherwise it will lerp. If a number is passed in it will be used as the duration of the lerp.
+     * 
+     * This is useful for example if you want to align your camera with an object in your scene (or another camera). Simply pass in this other camera object
+     * @returns true if the target was set successfully
      */
-    public setCameraAndLookTarget(target: Object3D) {
-        if (!target || !(target instanceof Object3D)) return;
-        const worldPosition = getWorldPosition(target);
-        const forward = getWorldDirection(target);
-        this.setTargetFromRaycast(new Ray(worldPosition, forward));
-        this.setCameraTargetPosition(worldPosition);
+    public setCameraAndLookTarget(source: Object3D | Camera, immediateOrDuration: number | boolean = false): boolean {
+        if (!source) {
+            if (isDevEnvironment()) console.warn("[OrbitControls] setCameraAndLookTarget target is null");
+            return false;
+        }
+        if (!(source instanceof Object3D) && !(source instanceof Camera)) {
+            if (isDevEnvironment()) console.warn("[OrbitControls] setCameraAndLookTarget target is not an Object3D or Camera");
+            return false;
+        }
+        if (source instanceof Camera) {
+            source = source.gameObject;
+        }
+        const worldPosition = source.worldPosition;
+        const forward = source.worldForward;
+        const ray = new Ray(worldPosition, forward.multiplyScalar(-1));
+
+        if (debug) Gizmos.DrawRay(ray.origin, ray.direction, 0xff0000, 10);
+
+        if (!this.setTargetFromRaycast(ray, immediateOrDuration)) {
+            this.setLookTargetPosition(ray.at(2, getTempVector()), immediateOrDuration);
+        }
+
+        this.setCameraTargetPosition(worldPosition, immediateOrDuration);
+        return true;
     }
 
     /** Moves the camera to position smoothly. 
@@ -653,6 +678,38 @@ export class OrbitControls extends Behaviour implements ICameraController {
             else this._cameraLerpDuration = this.targetLerpDuration;
         }
     }
+    // public setCameraTargetRotation(rotation: Vector3 | Euler | Quaternion, immediateOrDuration: boolean | number = false): void {
+    //     if (!this._cameraObject) return;
+
+    //     if (typeof immediateOrDuration === "boolean") immediateOrDuration = immediateOrDuration ? 0 : this.targetLerpDuration;
+
+    //     const ray = new Ray(this._cameraObject.worldPosition, getTempVector(0, 0, 1));
+
+    //     // if the camera is in the middle of lerping we use the end position for the raycast
+    //     if (immediateOrDuration > 0 && this._cameraEndPosition && this._cameraLerpActive) {
+    //         ray.origin = getTempVector(this._cameraEndPosition)
+    //     }
+
+    //     if (rotation instanceof Vector3) {
+    //         rotation = new Euler().setFromVector3(rotation);
+    //     }
+    //     if (rotation instanceof Euler) {
+    //         rotation = new Quaternion().setFromEuler(rotation);
+    //     }
+
+    //     ray.direction.applyQuaternion(rotation);
+    //     ray.direction.multiplyScalar(-1);
+
+    //     const hits = this.context.physics.raycastFromRay(ray);
+
+    //     if (hits.length > 0) {
+    //         this.setCameraTargetPosition(hits[0].point, immediateOrDuration);
+    //     }
+    //     else {
+    //         this.setLookTargetPosition(ray.at(2, getTempVector()));
+    //     }
+    // }
+
     /** True while the camera position is being lerped */
     get cameraLerpActive() { return this._cameraLerpActive; }
     /** Call to stop camera position lerping */
@@ -747,8 +804,8 @@ export class OrbitControls extends Behaviour implements ICameraController {
         else this._controls.target.lerp(position, delta);
     }
 
-    private setTargetFromRaycast(ray?: Ray) {
-        if (!this.controls) return;
+    private setTargetFromRaycast(ray?: Ray, immediateOrDuration: number | boolean = false): boolean {
+        if (!this.controls) return false;
         const rc = ray ? this.context.physics.raycastFromRay(ray) : this.context.physics.raycast();
         for (const hit of rc) {
             if (hit.distance > 0 && GameObject.isActiveInHierarchy(hit.object)) {
@@ -760,18 +817,11 @@ export class OrbitControls extends Behaviour implements ICameraController {
                         break;
                     }
                 }
-
-                this.setLookTargetPosition(hit.point);
-
-                // if (this.context.mainCamera) {
-                //     const pos = getWorldPosition(this.context.mainCamera);
-                //     const cameraTarget = pos.clone().sub(this.controls.target).add(this._lookTargetEndPosition);
-                //     this._cameraObject?.parent?.worldToLocal(cameraTarget);
-                //     this.setCameraTargetPosition(cameraTarget);
-                // }
-                break;
+                this.setLookTargetPosition(hit.point, immediateOrDuration);
+                return true;
             }
         }
+        return false;
     }
 
     // Adapted from https://discourse.threejs.org/t/camera-zoom-to-fit-object/936/24

package/src/engine-components/Renderer.ts

@@ -716,6 +716,11 @@ export class Renderer extends Behaviour implements IRenderer {
             const factor = this.hasLightmap ? Math.PI : 1;
             const environmentIntensity = this.context.mainCameraComponent?.environmentIntensity ?? 1;
             material.envMapIntensity = Math.max(0, environmentIntensity * this.context.sceneLighting.environmentIntensity / factor);
+            
+            // since three 163 we need to set the envMap to the scene envMap if it is not set
+            // otherwise the envmapIntensity has no effect: https://github.com/mrdoob/three.js/pull/27903
+            // internal issue: https://linear.app/needle/issue/NE-6363
+            if (!material.envMap) material.envMap = this.context.scene.environment;
         }
 
         if (this._lightmaps) {

package/src/engine-components/ScreenCapture.ts

@@ -88,13 +88,13 @@ export class ScreenCapture extends Behaviour implements IPointerClickHandler {
     onPointerEnter() {
         if (this.context.connection.allowEditing == false) return;
         if (!this.allowStartOnClick) return;
-        this.context.input.setCursorPointer();
+        this.context.input.setCursor("pointer");
     }
     /** @internal */
     onPointerExit() {
         if (this.context.connection.allowEditing == false) return;
         if (!this.allowStartOnClick) return;
-        this.context.input.setCursorNormal();
+        this.context.input.unsetCursor("pointer");
     }
 
     /** @internal */

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

@@ -1966,7 +1966,6 @@ function buildMaterial( material: MeshBasicMaterial, textures: TextureMap, quick
 
 	const materialName = getMaterialName(material);
 
-	console.log(material);
 	// Special case: occluder material
 	// Supported on iOS 18+ and visionOS 1+
 	const isShadowCatcherMaterial = 

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

@@ -403,7 +403,7 @@ export class USDZExporter extends Behaviour {
         if (this.autoExportAnimations) {
             implicitBehaviors.push(...registerAnimatorsImplictly(objectToExport, animExt));
         }
-        const audioExt = this.extensions.find(ext => ext.extensionName === "Audio");
+        const audioExt = extensions.find(ext => ext.extensionName === "Audio");
         if (audioExt && this.autoExportAudioSources)
             implicitBehaviors.push(...registerAudioSourcesImplictly(objectToExport, audioExt as AudioExtension));
 
@@ -454,7 +454,7 @@ export class USDZExporter extends Behaviour {
             });
         }
 
-        const behaviorExt = this.extensions.find(ext => ext.extensionName === "Behaviour") as BehaviorExtension | undefined;
+        const behaviorExt = extensions.find(ext => ext.extensionName === "Behaviour") as BehaviorExtension | undefined;
         if (this.interactive && behaviorExt && objectsToDisableAtSceneStart.length > 0) {
             behaviorExt.addBehavior(disableObjectsAtStart(objectsToDisableAtSceneStart));
         }

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

@@ -120,19 +120,21 @@ export class BehaviorExtension implements IUSDExporterExtension {
                 if (actionModel.tokenId === "StartAnimation") {
                     playAnimationActions.add(actionModel);
                 }
+                let actionType = actionModel.tokenId;
+                if (actionModel.type !== undefined) actionType += ":" + actionModel.type;
                 const affected = actionModel.affectedObjects;
                 if (affected) {
                     if (Array.isArray(affected)) {
                         for (const a of affected) {
                             actionTargets.add(a as Target);
                             //@ts-ignore
-                            if (createMermaidGraphForDebugging) mermaidGraphTopLevel += `${actionModel.id}[${actionModel.id}] -- ${actionModel.tokenId} --> ${a.uuid}(("${a.displayName || a.name || a.uuid}"))\n`;
+                            if (createMermaidGraphForDebugging) mermaidGraphTopLevel += `${actionModel.id}[${actionModel.id}\n${actionType}] -- ${actionType} --> ${a.uuid}(("${a.displayName || a.name || a.uuid}"))\n`;
                         }
                     }
                     else if (typeof affected === "object") {
                         actionTargets.add(affected as Target);
                         //@ts-ignore
-                        if (createMermaidGraphForDebugging) mermaidGraphTopLevel += `${actionModel.id}[${actionModel.id}] -- ${actionModel.tokenId} --> ${affected.uuid}(("${affected.displayName || affected.name || affected.uuid}"))\n`;
+                        if (createMermaidGraphForDebugging) mermaidGraphTopLevel += `${actionModel.id}[${actionModel.id}\n${actionType}] -- ${actionType} --> ${affected.uuid}(("${affected.displayName || affected.name || affected.uuid}"))\n`;
                     }
                     else if (typeof affected === "string") {
                         actionTargets.add({uuid: affected} as any as Target);
@@ -144,7 +146,7 @@ export class BehaviorExtension implements IUSDExporterExtension {
                     if (typeof xform === "object") {
                         actionTargets.add(xform as Target);
                         //@ts-ignore
-                        if (createMermaidGraphForDebugging) mermaidGraphTopLevel += `${actionModel.id}[${actionModel.id}] -- ${actionModel.tokenId} --> ${xform.uuid}(("${xform.displayName || xform.name || xform.uuid}"))\n`;
+                        if (createMermaidGraphForDebugging) mermaidGraphTopLevel += `${actionModel.id}[${actionModel.id}\n${actionType}] -- ${actionType} --> ${xform.uuid}(("${xform.displayName || xform.name || xform.uuid}"))\n`;
                     }
                     else if (typeof xform === "string") {
                         actionTargets.add({uuid: xform} as any as Target);
@@ -159,19 +161,21 @@ export class BehaviorExtension implements IUSDExporterExtension {
                     collectTrigger(t, action);
             }
             else if (trigger instanceof TriggerModel) {
+                let triggerType = trigger.tokenId;
+                if (trigger.type !== undefined) triggerType += ":" + trigger.type;
                 if (typeof trigger.targetId === "object") {
                     triggerSources.add(trigger.targetId as Target);
                     //@ts-ignore
-                    if (createMermaidGraphForDebugging) mermaidGraphTopLevel += `${trigger.targetId.uuid}(("${trigger.targetId.displayName}")) --> ${trigger.id}[${trigger.id}]\n`;
+                    if (createMermaidGraphForDebugging) mermaidGraphTopLevel += `${trigger.targetId.uuid}(("${trigger.targetId.displayName}")) --> ${trigger.id}[${trigger.id}\n${triggerType}]\n`;
                 }
                 //@ts-ignore
-                if (createMermaidGraphForDebugging) mermaidGraph += `${trigger.id}((${trigger.id})) -- ${trigger.tokenId}${trigger.type ? ":" + trigger.type : ""} --> ${action.id}[${action.tokenId || action.id}]\n`;
+                if (createMermaidGraphForDebugging) mermaidGraph += `${trigger.id}((${trigger.id})) -- ${triggerType} --> ${action.id}[${action.tokenId || action.id}]\n`;
             }
         }
 
         // collect all targets of all triggers and actions
         for (const beh of this.behaviours) {
-            if (createMermaidGraphForDebugging) mermaidGraph += `subgraph Behavior_${beh.id}\n`;
+            if (createMermaidGraphForDebugging) mermaidGraph += `subgraph ${beh.id}\n`;
             collectAction(beh.action);
             collectTrigger(beh.trigger, beh.action);
             if (createMermaidGraphForDebugging) mermaidGraph += `end\n`;
@@ -180,10 +184,12 @@ export class BehaviorExtension implements IUSDExporterExtension {
         
         if (createMermaidGraphForDebugging) {
             console.log("All USDZ behaviours", this.behaviours);
-            console.warn("The Mermaid graph can be pasted into https://massive-mermaid.glitch.me/ or https://mermaid.live/edit. It should be in your clipboard already!");
-            console.log(mermaidGraph);
-            // copy to clipboard, can be pasted into https://massive-mermaid.glitch.me/ or https://mermaid.live/edit
-            navigator.clipboard.writeText(mermaidGraph);
+            if (this.behaviours.length) {
+                console.warn("The Mermaid graph can be pasted into https://massive-mermaid.glitch.me/ or https://mermaid.live/edit. It should be in your clipboard already!");
+                console.log(mermaidGraph);
+                // copy to clipboard, can be pasted into https://massive-mermaid.glitch.me/ or https://mermaid.live/edit
+                navigator.clipboard.writeText(mermaidGraph);
+            }
         }
 
         {
@@ -212,7 +218,7 @@ export class BehaviorExtension implements IUSDExporterExtension {
                 }
             }
 
-            if (createMermaidGraphForDebugging) {
+            if (createMermaidGraphForDebugging && playAnimationActions.size) {
                 console.log(animationsGraph);
             }