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.7",
 	"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/assets/collect.mts

@@ -0,0 +1,55 @@
+import { extname, join } from "node:path/posix";
+
+import { pathExists } from "fs-extra";
+
+import { supportedExtensions } from "./process.mjs";
+import { allKtxFormats, getCompressedTextureFilename, ktxSupportedextensions } from "./ktx.mjs";
+
+const collectedSupportedExtensions: string[] = [...supportedExtensions, ".babylonbinarymeshdata"];
+
+export async function collectUsedAssetsForScene(scene: any, publicDir: string) {
+	const result: string[] = [];
+	const stringValues: string[] = [];
+
+	function recursivelyCollect(root: any) {
+		for (const thing in root) {
+			if (!root.hasOwnProperty(thing)) {
+				continue;
+			}
+
+			const value = root[thing];
+
+			if (typeof value === "string") {
+				const extension = extname(value).toLowerCase();
+				if (extension && collectedSupportedExtensions.includes(extension)) {
+					stringValues.push(value);
+				}
+			} else if (typeof value === "object") {
+				recursivelyCollect(value);
+			}
+		}
+	}
+
+	recursivelyCollect(scene);
+
+	await Promise.all(
+		stringValues.map(async (value) => {
+			const absolutePath = join(publicDir, value);
+			if (await pathExists(absolutePath)) {
+				result.push(value);
+
+				const extension = extname(value).toLowerCase();
+				if (ktxSupportedextensions.includes(extension)) {
+					for (const format of allKtxFormats) {
+						const compressedTexturePath = join(publicDir, getCompressedTextureFilename(value, format));
+						if (await pathExists(compressedTexturePath)) {
+							result.push(getCompressedTextureFilename(value, format));
+						}
+					}
+				}
+			}
+		})
+	);
+
+	return result;
+}

cli/src/pack/assets/ktx.mts

@@ -95,7 +95,7 @@ export async function compressFileToKtxFormat(absolutePath: string, options: Com
 			break;
 
 		case "-dxt.ktx":
-			command = `"${pvrTexToolAbsolutePath}" -i "${absolutePath}" -flip y -pot + -m -dither -ics lRGB ${hasAlpha ? "-l" : ""} -f ${hasAlpha ? "BC2" : "BC1"},UBN,lRGB -o "${options.destinationFolder}"`;
+			command = `"${pvrTexToolAbsolutePath}" -i "${absolutePath}" -flip y -pot + -m -dither -ics lRGB ${hasAlpha ? "-l" : ""} -f ${hasAlpha ? "BC3" : "BC1"},UBN,lRGB -o "${options.destinationFolder}"`;
 			break;
 
 		case "-pvrtc.ktx":

cli/src/pack/assets/process.mts

@@ -14,7 +14,7 @@ const supportedAudioExtensions: string[] = [".mp3", ".wav", ".wave", ".ogg"];
 const supportedJsonExtensions: string[] = [".material", ".gui", ".cinematic", ".npss", ".ragdoll", ".json"];
 const supportedMiscExtensions: string[] = [".3dl", ".exr", ".hdr"];
 
-const supportedExtensions: string[] = [
+export const supportedExtensions: string[] = [
 	...supportedImagesExtensions,
 	...supportedCubeTexturesExtensions,
 	...supportedAudioExtensions,

cli/src/pack/pack.mts

@@ -10,8 +10,8 @@ import { locatePVRTexTool, setPVRTexToolAbsolutePath } from "../tools/ktx.mjs";
 import { ensureSceneDirectories, readSceneDirectories } from "../tools/scene.mjs";
 
 import { createBabylonScene } from "./scene.mjs";
-import { createAssets } from "./assets/assets.mjs";
 import { createScriptsFile } from "./scripts.mjs";
+import { createAssets } from "./assets/assets.mjs";
 import { createGeometryFiles } from "./geometry.mjs";
 
 export type PackStepType = "assets" | "scenes" | "scripts" | "upload";
@@ -113,6 +113,8 @@ export async function pack(projectDir: string, options: IPackOptions) {
 	}
 
 	// Pack scenes
+	const scenesUsedFiles: Record<string, string[]> = {};
+
 	const sceneFiles = await normalizedGlob(`${assetsDirectory}/**/*`, {
 		nodir: false,
 		ignore: {
@@ -135,6 +137,8 @@ export async function pack(projectDir: string, options: IPackOptions) {
 		await ensureSceneDirectories(sceneFile);
 
 		const directories = await readSceneDirectories(sceneFile);
+
+		// Config
 		const sceneConfigPath = join(sceneFile, "config.json");
 		if (!(await pathExists(sceneConfigPath))) {
 			sceneLog.warn(`Scene ${sceneFilename} does not have a config.json file. Skipping...`);
@@ -143,11 +147,21 @@ export async function pack(projectDir: string, options: IPackOptions) {
 
 		const config = await fs.readJSON(sceneConfigPath);
 
+		// Attributes
+		const attributesPath = join(sceneFile, "attributes.json");
+		if (await pathExists(attributesPath)) {
+			const attributes = await fs.readJSON(attributesPath);
+			if (attributes.doNotExport) {
+				sceneLog.info(`Skipped scene ${sceneFilename} because scene is marked as doNotExport.`);
+				continue;
+			}
+		}
+
 		options.onStepChanged?.("scenes", {
 			message: `Packing scene ${sceneName}...`,
 		});
 
-		await createBabylonScene({
+		const sceneUsedFiles = await createBabylonScene({
 			...options,
 			...projectConfiguration,
 			config,
@@ -159,6 +173,8 @@ export async function pack(projectDir: string, options: IPackOptions) {
 			babylonjsEditorToolsVersion,
 		});
 
+		scenesUsedFiles[`${sceneName}.scene`] = sceneUsedFiles.map((asset) => asset.replace(publicDir + "/", ""));
+
 		options.onStepChanged?.("scenes", {
 			message: `Packing scene ${sceneName} geometries...`,
 		});
@@ -206,7 +222,7 @@ export async function pack(projectDir: string, options: IPackOptions) {
 			message: "Collected scripts",
 		});
 
-		// Write list of exported assets
+		// Write lists of exported assets
 		const assetsListPath = join(publicDir, "assets-list.json");
 		await fs.writeJSON(
 			assetsListPath,
@@ -219,6 +235,14 @@ export async function pack(projectDir: string, options: IPackOptions) {
 
 		exportedAssets.push(assetsListPath);
 
+		const scenesUsedFilesPath = join(publicDir, "scenes-used-files.json");
+		await fs.writeJSON(scenesUsedFilesPath, scenesUsedFiles, {
+			spaces: "\t",
+			encoding: "utf-8",
+		});
+
+		exportedAssets.push(scenesUsedFilesPath);
+
 		// Clean
 		if (options.optimize) {
 			const publicFiles = await normalizedGlob(join(publicDir, "**/*"), {

cli/src/pack/scene.mts

@@ -5,6 +5,7 @@ import fs from "fs-extra";
 import { readSceneDirectories } from "../tools/scene.mjs";
 
 import { compressFileToKtx } from "./assets/ktx.mjs";
+import { collectUsedAssetsForScene } from "./assets/collect.mjs";
 import { extractNodeMaterialTextures } from "./assets/material.mjs";
 import { getExtractedTextureOutputPath } from "./assets/texture.mjs";
 import { extractNodeParticleSystemSetTextures, extractParticleSystemTextures } from "./assets/particle-system.mjs";
@@ -226,6 +227,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 +250,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 +273,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) => {
@@ -593,4 +619,9 @@ export async function createBabylonScene(options: ICreateBabylonSceneOptions) {
 
 		options.exportedAssets.push(manifestDestination);
 	}
+
+	const usedFiles = await collectUsedAssetsForScene(scene, options.publicDir);
+	usedFiles.push(`${options.sceneName}.babylon`);
+
+	return usedFiles;
 }

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.7",
 	"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/dialogs/command-palette/command-palette.tsx

@@ -8,7 +8,7 @@ import { FaCirclePlus } from "react-icons/fa6";
 import { IoSparklesSharp } from "react-icons/io5";
 import { HiMiniCommandLine } from "react-icons/hi2";
 
-import { Node, IParticleSystem, Sound } from "babylonjs";
+import { Node, IParticleSystem } from "babylonjs";
 
 import { normalizedGlob } from "../../../tools/fs";
 import { isNodeVisibleInGraph } from "../../../tools/node/metadata";
@@ -168,10 +168,7 @@ export class CommandPalette extends Component<ICommandPaletteProps, ICommandPale
 	private _refreshEntities(): void {
 		const scene = this.props.editor.layout.preview.scene;
 
-		let objects = [...scene.meshes, ...scene.lights, ...scene.cameras, ...scene.particleSystems, ...scene.transformNodes] as (Node | IParticleSystem | Sound)[];
-		scene.soundTracks?.forEach((soundTrack) => {
-			objects.push(...soundTrack.soundCollection);
-		});
+		let objects = [...scene.meshes, ...scene.lights, ...scene.cameras, ...scene.particleSystems, ...scene.transformNodes] as (Node | IParticleSystem)[];
 
 		objects = objects.filter((o) => {
 			if (isNode(o) && !isNodeVisibleInGraph(o)) {