fix: import of filenamify in export node and put feature as experimental

Author: julien-moreau

editor/src/editor/dialogs/edit-preferences/edit-preferences.tsx

@@ -221,8 +221,8 @@ export class EditorEditPreferencesComponent extends Component<IEditorEditPrefere
 
 								trySetExperimentalFeaturesEnabledInLocalStorage(v);
 
-								this.props.editor.layout.graph.forceUpdate();
-								this.props.editor.layout.assets.forceUpdate();
+								this.props.editor.layout.graph.refresh();
+								this.props.editor.layout.assets.refresh();
 								this.props.editor.layout.preview.forceUpdate();
 								this.props.editor.layout.inspector.forceUpdate();
 								this.props.editor.layout.animations.forceUpdate();

editor/src/editor/layout/assets-browser.tsx

@@ -61,6 +61,8 @@ import {
 	ContextMenuSubContent,
 } from "../../ui/shadcn/ui/context-menu";
 
+import { exportNodeToPath } from "./graph/export";
+
 import { FileInspectorObject } from "./inspector/file";
 
 import { AssetBrowserGUIItem } from "./assets-browser/items/gui-item";
@@ -893,8 +895,12 @@ export class EditorAssetsBrowser extends Component<IEditorAssetsBrowserProps, IE
 
 	private _handleDragOver(event: DragEvent<HTMLDivElement>): void {
 		event.preventDefault();
+
+		const isGraphNode = event.dataTransfer.types.includes("graph/node");
+		const isFiles = event.dataTransfer.types.length === 1 && event.dataTransfer.types[0] === "Files";
+
 		this.setState({
-			dragAndDroppingFiles: event.dataTransfer.types.length === 1 && event.dataTransfer.types[0] === "Files",
+			dragAndDroppingFiles: isFiles || isGraphNode,
 		});
 	}
 
@@ -910,6 +916,17 @@ export class EditorAssetsBrowser extends Component<IEditorAssetsBrowserProps, IE
 			return;
 		}
 
+		// Nodes from graph?
+		try {
+			const data = JSON.parse(event.dataTransfer.getData("graph/node")) as string[];
+			if (data?.length) {
+				return this._handleDroppedNodesFromGraph(data);
+			}
+		} catch (e) {
+			// Catch silently.
+		}
+
+		// Those are files.
 		let assetFileNotInAssetsFolder = false;
 
 		const filesToCopy: Record<string, string> = {};
@@ -963,6 +980,34 @@ export class EditorAssetsBrowser extends Component<IEditorAssetsBrowserProps, IE
 		this.refresh();
 	}
 
+	private async _handleDroppedNodesFromGraph(nodeIds: string[]): Promise<void> {
+		if (!this.state.browsedPath || !this.props.editor.state.enableExperimentalFeatures) {
+			return;
+		}
+
+		if (!this.isAssetsFolder()) {
+			showAlert("Warning", <div>You can only export nodes to at least in the root "assets" folder.</div>, true);
+			return;
+		}
+
+		for (const nodeId of nodeIds) {
+			const node = this.props.editor.layout.preview.scene.getNodeById(nodeId);
+			if (node) {
+				const scenePath = join(this.state.browsedPath, `${filenamify(node.name)}.babylon`);
+				if (await pathExists(scenePath)) {
+					const overwrite = await showConfirm("Overwrite Scene?", `A scene named "${node.name}" already exists at this location. Do you want to overwrite it?`);
+					if (!overwrite) {
+						continue;
+					}
+				}
+
+				await exportNodeToPath(this.props.editor, node, join(this.state.browsedPath, `${filenamify(node.name)}.babylon`));
+			}
+		}
+
+		return this.refresh();
+	}
+
 	private async _handleCreateDirectory(): Promise<void> {
 		if (!this.state.browsedPath) {
 			return;

editor/src/editor/layout/graph/export.ts

@@ -1,16 +1,16 @@
-import { Node, SceneSerializer } from "babylonjs";
-
-import { saveSingleFileDialog } from "../../../tools/dialog";
+import filenamify from "filenamify";
 import { writeJSON } from "fs-extra";
+
 import { toast } from "sonner";
 
+import { Node, SceneSerializer, Scene, Material } from "babylonjs";
+
+import { isAbstractMesh } from "../../../tools/guards/nodes";
+import { saveSingleFileDialog } from "../../../tools/dialog";
+import { isMultiMaterial } from "../../../tools/guards/material";
+
 import { Editor } from "../../main";
-import filenamify from "filenamify/filenamify";
 
-const JSON_CONFIG = {
-	spaces: 4,
-	encoding: "utf8",
-};
 /**
  * Exports the entire scene to a .babylon file.
  * @param editor defines the reference to the editor used to get the scene.
@@ -28,9 +28,11 @@ export async function exportScene(editor: Editor): Promise<void> {
 
 	try {
 		const scene = editor.layout.preview.scene;
+
+		SceneSerializer.ClearCache();
 		const data = await SceneSerializer.SerializeAsync(scene);
 
-		await writeJSON(filePath, data, JSON_CONFIG);
+		await writeJSON(filePath, data);
 
 		editor.layout.console.log(`Scene exported successfully to ${filePath}`);
 		toast.success(`Scene exported successfully to ${filePath}`);
@@ -54,10 +56,17 @@ export async function exportNode(editor: Editor, node: Node): Promise<void> {
 		defaultPath: `${filenamify(node.name)}.babylon`,
 	});
 
-	if (!filePath) {
-		return;
+	if (filePath) {
+		return exportNodeToPath(editor, node, filePath);
 	}
+}
 
+/**
+ * Exports a specific node and all its children to a .babylon file.
+ * @param editor defines the reference to the editor used to get the scene.
+ * @param node defines the node to export along with its descendants.
+ */
+export async function exportNodeToPath(editor: Editor, node: Node, filePath: string): Promise<void> {
 	try {
 		const scene = editor.layout.preview.scene;
 
@@ -70,26 +79,29 @@ export async function exportNode(editor: Editor, node: Node): Promise<void> {
 		descendants.forEach((descendant) => nodesToInclude.add(descendant));
 
 		// Store original doNotSerialize values
-		const originalDoNotSerialize = new Map<Node, boolean>();
+		const originalNodesDoNotSerialize = new Map<Node, boolean>();
+		const originalMaterialsDoNotSerialize = new Map<Material, boolean>();
 
-		exportMeshes(scene, nodesToInclude, originalDoNotSerialize);
-		exportLights(scene, nodesToInclude, originalDoNotSerialize);
-		exportCameras(scene, nodesToInclude, originalDoNotSerialize);
-		exportTransformNodes(scene, nodesToInclude, originalDoNotSerialize);
+		exportMeshes(scene, nodesToInclude, originalNodesDoNotSerialize);
+		exportLights(scene, nodesToInclude, originalNodesDoNotSerialize);
+		exportCameras(scene, nodesToInclude, originalNodesDoNotSerialize);
+		exportTransformNodes(scene, nodesToInclude, originalNodesDoNotSerialize);
+		exportMaterials(scene, nodesToInclude, originalMaterialsDoNotSerialize);
 
 		const originalParticleSystems = exportParticleSystems(scene, nodesToInclude);
 		const originalSoundTracks = exportSounds(scene, nodesToInclude);
 
 		// Serialize the filtered scene
+		// SceneSerializer.ClearCache();
 		const data = await SceneSerializer.SerializeAsync(scene);
 
 		// Restore original scene state
-		restoreSceneState(scene, originalDoNotSerialize, {
+		restoreSceneState(scene, originalNodesDoNotSerialize, originalMaterialsDoNotSerialize, {
+			originalSoundTracks,
 			originalParticleSystems,
-			originalSoundTracks
 		});
 
-		await writeJSON(filePath, data, JSON_CONFIG);
+		await writeJSON(filePath, data);
 
 		editor.layout.console.log(`Node exported successfully to ${filePath}`);
 		toast.success(`Node exported successfully to ${filePath}`);
@@ -108,21 +120,24 @@ export async function exportNode(editor: Editor, node: Node): Promise<void> {
  * @param exportData Data needed for restoration
  */
 function restoreSceneState(
-	scene: any, 
+	scene: Scene,
 	originalDoNotSerialize: Map<Node, boolean>,
+	originalMaterialsDoNotSerialize: Map<Material, boolean>,
 	exportData: { originalParticleSystems: any[]; originalSoundTracks: any[] }
 ): void {
 	// Restore original doNotSerialize values
 	originalDoNotSerialize.forEach((value, node) => {
 		node.doNotSerialize = value;
 	});
-	
+
+	originalMaterialsDoNotSerialize.forEach((value, material) => {
+		material.doNotSerialize = value;
+	});
+
 	// Restore particle systems
 	scene.particleSystems.length = 0;
-	exportData.originalParticleSystems.forEach((ps: any) => 
-		scene.particleSystems.push(ps)
-	);
-	
+	exportData.originalParticleSystems.forEach((ps: any) => scene.particleSystems.push(ps));
+
 	// Restore soundtracks
 	scene.soundTracks = exportData.originalSoundTracks;
 }
@@ -133,29 +148,50 @@ function restoreSceneState(
  * @param nodesToInclude Set of nodes to include in the export
  * @param originalDoNotSerialize Map to store original serialization state
  */
-function exportMeshes(
-	scene: any, 
-	nodesToInclude: Set<Node>,
-	originalDoNotSerialize: Map<Node, boolean>
-): void {
-	scene.meshes.forEach((mesh: Node) => {
+function exportMeshes(scene: Scene, nodesToInclude: Set<Node>, originalDoNotSerialize: Map<Node, boolean>): void {
+	scene.meshes.forEach((mesh) => {
 		originalDoNotSerialize.set(mesh, mesh.doNotSerialize);
 		mesh.doNotSerialize = !nodesToInclude.has(mesh);
 	});
 }
 
+function exportMaterials(scene: Scene, nodesToInclude: Set<Node>, originalMaterialsDoNotSerialize: Map<Material, boolean>): void {
+	scene.materials.forEach((material) => {
+		let foundUsedMaterial = false;
+
+		for (const node of nodesToInclude) {
+			if (!isAbstractMesh(node) || !node.material) {
+				continue;
+			}
+
+			if (node.material === material) {
+				foundUsedMaterial = true;
+				break;
+			}
+
+			if (isMultiMaterial(node.material)) {
+				if (node.material.subMaterials.includes(material)) {
+					foundUsedMaterial = true;
+					break;
+				}
+			}
+		}
+
+		if (!foundUsedMaterial) {
+			originalMaterialsDoNotSerialize.set(material, material.doNotSerialize);
+			material.doNotSerialize = true;
+		}
+	});
+}
+
 /**
  * Configures light nodes for export.
  * @param scene The scene containing the lights
  * @param nodesToInclude Set of nodes to include in the export
  * @param originalDoNotSerialize Map to store original serialization state
  */
-function exportLights(
-	scene: any, 
-	nodesToInclude: Set<Node>,
-	originalDoNotSerialize: Map<Node, boolean>
-): void {
-	scene.lights.forEach((light: Node) => {
+function exportLights(scene: Scene, nodesToInclude: Set<Node>, originalDoNotSerialize: Map<Node, boolean>): void {
+	scene.lights.forEach((light) => {
 		originalDoNotSerialize.set(light, light.doNotSerialize);
 		light.doNotSerialize = !nodesToInclude.has(light);
 	});
@@ -167,12 +203,8 @@ function exportLights(
  * @param nodesToInclude Set of nodes to include in the export
  * @param originalDoNotSerialize Map to store original serialization state
  */
-function exportCameras(
-	scene: any, 
-	nodesToInclude: Set<Node>,
-	originalDoNotSerialize: Map<Node, boolean>
-): void {
-	scene.cameras.forEach((camera: Node) => {
+function exportCameras(scene: Scene, nodesToInclude: Set<Node>, originalDoNotSerialize: Map<Node, boolean>): void {
+	scene.cameras.forEach((camera) => {
 		originalDoNotSerialize.set(camera, camera.doNotSerialize);
 		camera.doNotSerialize = !nodesToInclude.has(camera);
 	});
@@ -184,12 +216,8 @@ function exportCameras(
  * @param nodesToInclude Set of nodes to include in the export
  * @param originalDoNotSerialize Map to store original serialization state
  */
-function exportTransformNodes(
-	scene: any, 
-	nodesToInclude: Set<Node>,
-	originalDoNotSerialize: Map<Node, boolean>
-): void {
-	scene.transformNodes.forEach((transformNode: Node) => {
+function exportTransformNodes(scene: Scene, nodesToInclude: Set<Node>, originalDoNotSerialize: Map<Node, boolean>): void {
+	scene.transformNodes.forEach((transformNode) => {
 		originalDoNotSerialize.set(transformNode, transformNode.doNotSerialize);
 		transformNode.doNotSerialize = !nodesToInclude.has(transformNode);
 	});
@@ -201,20 +229,22 @@ function exportTransformNodes(
  * @param nodesToInclude Set of nodes to include in the export
  * @returns The original array of particle systems (for restoration)
  */
-function exportParticleSystems(scene: any, nodesToInclude: Set<Node>): Array<any> {
+function exportParticleSystems(scene: Scene, nodesToInclude: Set<Node>): Array<any> {
 	// Save original particle systems
 	const originalParticleSystems = scene.particleSystems.slice();
-	
+
 	// Filter particle systems to only include those attached to our nodes
 	const particlesToKeep = originalParticleSystems.filter((ps: any) => {
 		const emitter = ps.emitter;
 		return emitter && nodesToInclude.has(emitter as Node);
 	});
-	
+
 	// Replace the scene's particle systems with only those we want to include
 	scene.particleSystems.length = 0;
-	particlesToKeep.forEach((ps: any) => scene.particleSystems.push(ps));
-	
+	particlesToKeep.forEach((ps: any) => {
+		scene.particleSystems.push(ps);
+	});
+
 	return originalParticleSystems;
 }
 
@@ -224,37 +254,39 @@ function exportParticleSystems(scene: any, nodesToInclude: Set<Node>): Array<any
  * @param nodesToInclude Set of nodes to include in the export
  * @returns The original array of soundtracks (for restoration)
  */
-function exportSounds(scene: any, nodesToInclude: Set<Node>): Array<any> {
+function exportSounds(scene: Scene, nodesToInclude: Set<Node>): Array<any> {
 	// Handle sounds - filter out sounds not attached to our nodes
 	let originalSoundTracks: any[] = [];
-	
+
 	if (scene.soundTracks) {
 		// Store original soundtracks to restore later
 		originalSoundTracks = scene.soundTracks.slice();
-		
+
 		// Filter each soundtrack to only include sounds attached to our nodes
-		const filteredSoundTracks = scene.soundTracks.map((soundtrack: any) => {
-			// Create a new sound collection with only the sounds attached to our nodes
-			const filteredSoundCollection = soundtrack.soundCollection.filter((sound: any) => {
-				if (sound.spatialSound && sound.metadata && sound.metadata.connectedMeshName) {
-					// Check if the connected mesh name matches any of our nodes
-					for (const meshNode of nodesToInclude) {
-						if (meshNode.name === sound.metadata.connectedMeshName) {
-							return true;
+		const filteredSoundTracks = scene.soundTracks
+			.map((soundtrack: any) => {
+				// Create a new sound collection with only the sounds attached to our nodes
+				const filteredSoundCollection = soundtrack.soundCollection.filter((sound: any) => {
+					if (sound.spatialSound && sound.metadata && sound.metadata.connectedMeshName) {
+						// Check if the connected mesh name matches any of our nodes
+						for (const meshNode of nodesToInclude) {
+							if (meshNode.name === sound.metadata.connectedMeshName) {
+								return true;
+							}
 						}
 					}
-				}
-				return false;
-			});
-			
-			// Replace the original sound collection with our filtered one
-			soundtrack.soundCollection = filteredSoundCollection;
-			return soundtrack;
-		}).filter((st: any) => st.soundCollection.length > 0); // Remove empty soundtracks
-		
+					return false;
+				});
+
+				// Replace the original sound collection with our filtered one
+				soundtrack.soundCollection = filteredSoundCollection;
+				return soundtrack;
+			})
+			.filter((st: any) => st.soundCollection.length > 0); // Remove empty soundtracks
+
 		// Replace scene soundtracks with our filtered ones
 		scene.soundTracks = filteredSoundTracks;
 	}
-	
+
 	return originalSoundTracks;
 }