feat: rework UI for gizmo snapping

cli/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "babylonjs-editor-cli",
-	"version": "5.4.1-rc.0",
+	"version": "5.4.1-rc.1",
 	"description": "Babylon.js Editor CLI is a command line interface to help you package your scenes made using the Babylon.js Editor",
 	"productName": "Babylon.js Editor CLI",
 	"scripts": {

cli/src/pack/scene.mts

@@ -226,6 +226,7 @@ export async function createBabylonScene(options: ICreateBabylonSceneOptions) {
 		})
 	);
 
+	// Sprite managers
 	const spriteManagersResult = await Promise.all(
 		options.directories.spriteManagerFiles.map(async (file) => {
 			const data = await fs.readJSON(join(options.sceneFile, "sprite-managers", file));
@@ -248,6 +249,7 @@ export async function createBabylonScene(options: ICreateBabylonSceneOptions) {
 		})
 	);
 
+	// Sprite maps
 	const spriteMapsResult = await Promise.all(
 		options.directories.spriteMapFiles.map(async (file) => {
 			const data = await fs.readJSON(join(options.sceneFile, "sprite-maps", file));
@@ -270,6 +272,29 @@ export async function createBabylonScene(options: ICreateBabylonSceneOptions) {
 		})
 	);
 
+	// Sound nodes
+	const soundNodesResults = await Promise.all(
+		options.directories.soundNodeFiles.map(async (file) => {
+			const data = await fs.readJSON(join(options.sceneFile, "soundNodes", file));
+
+			if (data.metadata?.doNotSerialize) {
+				return null;
+			}
+
+			if (data.metadata?.parentId) {
+				data.parentId = data.metadata.parentId;
+			}
+
+			return data;
+		})
+	);
+
+	transformNodes.push(
+		...soundNodesResults.filter((soundNode) => {
+			return soundNode !== null;
+		})
+	);
+
 	// Lights
 	const lightsResult = await Promise.all(
 		options.directories.lightsFiles.map(async (file) => {

cli/src/tools/scene.mts

@@ -16,6 +16,7 @@ export async function ensureSceneDirectories(scenePath: string) {
 		fs.ensureDir(join(scenePath, "sceneLinks")),
 		fs.ensureDir(join(scenePath, "gui")),
 		fs.ensureDir(join(scenePath, "sounds")),
+		fs.ensureDir(join(scenePath, "soundNodes")),
 		fs.ensureDir(join(scenePath, "particleSystems")),
 		fs.ensureDir(join(scenePath, "morphTargetManagers")),
 		fs.ensureDir(join(scenePath, "morphTargets")),
@@ -38,6 +39,7 @@ export async function readSceneDirectories(scenePath: string) {
 		sceneLinkFiles,
 		guiFiles,
 		soundFiles,
+		soundNodeFiles,
 		particleSystemFiles,
 		morphTargetManagerFiles,
 		morphTargetFiles,
@@ -57,6 +59,7 @@ export async function readSceneDirectories(scenePath: string) {
 		readdir(join(scenePath, "sceneLinks")),
 		readdir(join(scenePath, "gui")),
 		readdir(join(scenePath, "sounds")),
+		readdir(join(scenePath, "soundNodes")),
 		readdir(join(scenePath, "particleSystems")),
 		readdir(join(scenePath, "morphTargetManagers")),
 		readdir(join(scenePath, "morphTargets")),
@@ -78,6 +81,7 @@ export async function readSceneDirectories(scenePath: string) {
 		sceneLinkFiles,
 		guiFiles,
 		soundFiles,
+		soundNodeFiles,
 		particleSystemFiles,
 		morphTargetManagerFiles,
 		morphTargetFiles,

editor/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "babylonjs-editor",
-	"version": "5.4.1-rc.0",
+	"version": "5.4.1-rc.1",
 	"description": "Babylon.js Editor is a Web Application helping artists to work with Babylon.js",
 	"productName": "Babylon.js Editor",
 	"main": "build/src/index.js",

editor/src/editor/layout/graph.tsx

@@ -1,3 +1,5 @@
+import { extname } from "path/posix";
+
 import { Component, DragEvent, ReactNode } from "react";
 import { Button, Tree, TreeNodeInfo } from "@blueprintjs/core";
 
@@ -31,13 +33,13 @@ import {
 	ContextMenuSubTrigger,
 } from "../../ui/shadcn/ui/context-menu";
 
-import { isSound } from "../../tools/guards/sound";
 import { cloneNode } from "../../tools/node/clone";
 import { registerUndoRedo } from "../../tools/undoredo";
 import { isDomTextInputFocused } from "../../tools/dom";
 import { isSceneLinkNode } from "../../tools/guards/scene";
 import { updateAllLights } from "../../tools/light/shadows";
 import { isClusteredLight } from "../../tools/light/cluster";
+import { isSound, isSoundNode } from "../../tools/guards/sound";
 import { getCollisionMeshFor } from "../../tools/mesh/collision";
 import { isNodeVisibleInGraph } from "../../tools/node/metadata";
 import { isAdvancedDynamicTexture } from "../../tools/guards/texture";
@@ -79,8 +81,11 @@ import { getLightCommands } from "../dialogs/command-palette/light";
 import { getCameraCommands } from "../dialogs/command-palette/camera";
 import { getSpriteCommands } from "../dialogs/command-palette/sprite";
 
+import { addSoundNode } from "../../project/add/sound";
 import { onProjectConfigurationChangedObservable } from "../../project/configuration";
 
+import { applySoundAsset } from "./preview/import/sound";
+
 import { EditorGraphLabel } from "./graph/label";
 import { EditorGraphContextMenu } from "./graph/context-menu";
 import { setNewParentForGraphSelectedNodes } from "./graph/move";
@@ -264,6 +269,8 @@ export class EditorGraph extends Component<IEditorGraphProps, IEditorGraphState>
 										);
 									})}
 									<ContextMenuSeparator />
+									<ContextMenuItem onClick={() => addSoundNode(this.props.editor)}>Sound Node</ContextMenuItem>
+									<ContextMenuSeparator />
 									{getSpriteCommands(this.props.editor).map((command) => {
 										return (
 											<ContextMenuItem key={command.key} disabled={command.disabled} onClick={command.action}>
@@ -1105,7 +1112,7 @@ export class EditorGraph extends Component<IEditorGraphProps, IEditorGraphState>
 			return <TbBrandAdobeIndesign className="w-4 h-4" />;
 		}
 
-		if (isSound(object)) {
+		if (isSound(object) || isSoundNode(object)) {
 			return <HiSpeakerWave className="w-4 h-4" />;
 		}
 
@@ -1158,10 +1165,28 @@ export class EditorGraph extends Component<IEditorGraphProps, IEditorGraphState>
 
 	private _handleDropEmpty(ev: DragEvent<HTMLDivElement>): void {
 		const node = ev.dataTransfer.getData("graph/node");
-		if (!node) {
-			return;
+		if (node) {
+			setNewParentForGraphSelectedNodes(this.props.editor, this.props.editor.layout.preview.scene, ev.shiftKey);
 		}
 
-		setNewParentForGraphSelectedNodes(this.props.editor, this.props.editor.layout.preview.scene, ev.shiftKey);
+		const asset = ev.dataTransfer.getData("assets");
+		if (asset) {
+			const absolutePaths = this.props.editor.layout.assets.state.selectedKeys;
+
+			absolutePaths.forEach((absolutePath) => {
+				const extension = extname(absolutePath).toLowerCase();
+
+				switch (extension) {
+					case ".mp3":
+					case ".ogg":
+					case ".wav":
+					case ".wave":
+						applySoundAsset(this.props.editor, this.props.editor.layout.preview.scene, absolutePath).then(() => {
+							this.props.editor.layout.graph.refresh();
+						});
+						break;
+				}
+			});
+		}
 	}
 }

editor/src/editor/layout/graph/context-menu.tsx

@@ -40,12 +40,14 @@ import { isAnyParticleSystem } from "../../../tools/guards/particles";
 import { isScene, isSceneLinkNode } from "../../../tools/guards/scene";
 import { cloneNode, ICloneNodeOptions } from "../../../tools/node/clone";
 import { isSprite, isSpriteMapNode } from "../../../tools/guards/sprites";
-import { isAbstractMesh, isCamera, isClusteredLightContainer, isLight, isMesh, isNode } from "../../../tools/guards/nodes";
 import { isNodeLocked, isNodeSerializable, isNodeVisibleInGraph, setNodeLocked, setNodeSerializable } from "../../../tools/node/metadata";
+import { isAbstractMesh, isCamera, isClusteredLightContainer, isLight, isMesh, isNode, isTransformNode } from "../../../tools/guards/nodes";
 
 import { addPointLight, addSpotLight } from "../../../project/add/light";
 import { addGPUParticleSystem, addParticleSystem } from "../../../project/add/particles";
 
+import { addSoundNode } from "../../../project/add/sound";
+
 import { EditorInspectorSwitchField } from "../inspector/fields/switch";
 
 import { configureImportedMaterial, configureImportedNodeIds } from "../preview/import/import";
@@ -203,6 +205,14 @@ export class EditorGraphContextMenu extends Component<IEditorGraphContextMenuPro
 													</ContextMenuItem>
 												</>
 											)}
+											{(isAbstractMesh(this.props.object) || isTransformNode(this.props.object) || isScene(this.props.object)) && (
+												<>
+													<ContextMenuSeparator />
+													<ContextMenuItem onClick={() => addSoundNode(this.props.editor, isScene(this.props.object) ? null : this.props.object)}>
+														Sound Node
+													</ContextMenuItem>
+												</>
+											)}
 											<ContextMenuSeparator />
 											{getSpriteCommands(this.props.editor, parent).map((command) => (
 												<ContextMenuItem key={command.key} disabled={command.disabled} onClick={command.action}>

editor/src/editor/layout/graph/label.tsx

@@ -11,7 +11,7 @@ import { isDarwin } from "../../../tools/os";
 import { isScene } from "../../../tools/guards/scene";
 import { registerUndoRedo } from "../../../tools/undoredo";
 import { isNodeSerializable, isNodeLocked } from "../../../tools/node/metadata";
-import { isClusteredLightContainer, isInstancedMesh, isMesh, isNode } from "../../../tools/guards/nodes";
+import { isClusteredLightContainer, isInstancedMesh, isMesh, isNode, isTransformNode } from "../../../tools/guards/nodes";
 
 import { applySoundAsset } from "../preview/import/sound";
 import { applyTextureAssetToObject } from "../preview/import/texture";
@@ -146,7 +146,7 @@ export function EditorGraphLabel(props: IEditorGraphLabelProps) {
 				case ".ogg":
 				case ".wav":
 				case ".wave":
-					if (isScene(props.object) || isMesh(props.object) || isInstancedMesh(props.object)) {
+					if (isScene(props.object) || isMesh(props.object) || isInstancedMesh(props.object) || isTransformNode(props.object)) {
 						applySoundAsset(props.editor, props.object, absolutePath).then(() => {
 							props.editor.layout.graph.refresh();
 						});

editor/src/editor/layout/inspector.tsx

@@ -36,6 +36,7 @@ import { EditorFreeCameraInspector } from "./inspector/camera/free";
 import { EditorArcRotateCameraInspector } from "./inspector/camera/arc-rotate";
 
 import { EditorSoundInspector } from "./inspector/sound/sound";
+import { EditorSoundNodeInspector } from "./inspector/sound/sound-node";
 
 import { EditorAdvancedDynamicTextureInspector } from "./inspector/gui/gui";
 
@@ -87,6 +88,8 @@ export class EditorInspector extends Component<IEditorInspectorProps, IEditorIns
 		EditorSceneInspector,
 
 		EditorSoundInspector,
+		EditorSoundNodeInspector,
+
 		EditorAdvancedDynamicTextureInspector,
 
 		EditorParticleSystemInspector,

editor/src/editor/layout/inspector/camera/free.tsx

@@ -7,7 +7,7 @@ import { FreeCamera, Node, Observer } from "babylonjs";
 import { isFreeCamera } from "../../../../tools/guards/nodes";
 import { onNodeModifiedObservable } from "../../../../tools/observables";
 
-import { onGizmoNodeChangedObservable } from "../../preview/gizmo";
+import { onGizmoNodeChangedObservable } from "../../preview/gizmo/gizmo";
 
 import { IEditorInspectorImplementationProps } from "../inspector";
 

editor/src/editor/layout/inspector/decals/decals.tsx

@@ -279,7 +279,7 @@ export class EditorDecalsInspector extends Component<IEditorDecalsInspectorProps
 	}
 
 	private _handleUpdateCurrentDecalMesh(): void {
-		if (!EditorDecalsInspector._lastPickedMesh || !EditorDecalsInspector._lastPickPosition || !this.state.material) {
+		if (!EditorDecalsInspector._lastPickedMesh || !EditorDecalsInspector._lastPickPosition || !this.state.material || !this.state.ctrlOrMetaKeyDown) {
 			return;
 		}
 
@@ -295,6 +295,7 @@ export class EditorDecalsInspector extends Component<IEditorDecalsInspectorProps
 			normal: EditorDecalsInspector._lastPickedNormal ?? undefined,
 		});
 
+		this._decalMesh.isPickable = false;
 		this._decalMesh.receiveShadows = true;
 		this._decalMesh.visibility = this.state.ctrlOrMetaKeyDown ? 1 : 0.35;
 
@@ -332,6 +333,7 @@ export class EditorDecalsInspector extends Component<IEditorDecalsInspectorProps
 			decalMesh.name = this.state.material!.name;
 			decalMesh.id = Tools.RandomId();
 			decalMesh.uniqueId = UniqueNumber.Get();
+			decalMesh.isPickable = false;
 
 			decalMesh.metadata = {
 				decal: {

editor/src/editor/layout/inspector/mesh/mesh.tsx

@@ -43,7 +43,7 @@ import { EditorInspectorSectionField } from "../fields/section";
 import { ScriptInspectorComponent } from "../script/script";
 import { CustomMetadataInspector } from "../metadata/custom-metadata";
 
-import { onGizmoNodeChangedObservable } from "../../preview/gizmo";
+import { onGizmoNodeChangedObservable } from "../../preview/gizmo/gizmo";
 
 import { EditorTransformNodeInspector } from "../transform";
 import { IEditorInspectorImplementationProps } from "../inspector";