Add menu item to export .babylon

Author: yuripourre

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

@@ -0,0 +1,113 @@
+import { Node, SceneSerializer } from "babylonjs";
+
+import { saveSingleFileDialog } from "../../../tools/dialog";
+import { writeJSON } from "fs-extra";
+import { toast } from "sonner";
+
+import { Editor } from "../../main";
+
+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.
+ */
+export async function exportScene(editor: Editor): Promise<void> {
+	const filePath = saveSingleFileDialog({
+		title: "Export Scene",
+		filters: [{ name: "Babylon Scene Files", extensions: ["babylon"] }],
+		defaultPath: "scene.babylon",
+	});
+
+	if (!filePath) {
+		return;
+	}
+
+	try {
+		const scene = editor.layout.preview.scene;
+		const data = await SceneSerializer.SerializeAsync(scene);
+
+		await writeJSON(filePath, data, JSON_CONFIG);
+
+		editor.layout.console.log(`Scene exported successfully to ${filePath}`);
+		toast.success(`Scene exported successfully to ${filePath}`);
+	} catch (e) {
+		if (e instanceof Error) {
+			editor.layout.console.error(`Error exporting scene: ${e.message}`);
+			toast.error("Error exporting scene");
+		}
+	}
+}
+
+/**
+ * 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 exportNode(editor: Editor, node: Node): Promise<void> {
+	const filePath = saveSingleFileDialog({
+		title: "Export Node",
+		filters: [{ name: "Babylon Scene Files", extensions: ["babylon"] }],
+		defaultPath: `${node.name}.babylon`,
+	});
+
+	if (!filePath) {
+		return;
+	}
+
+	try {
+		const scene = editor.layout.preview.scene;
+
+		// Get all nodes that should be included (selected node + descendants)
+		const nodesToInclude = new Set<Node>();
+		nodesToInclude.add(node);
+
+		// Add all descendants
+		const descendants = node.getDescendants(false);
+		descendants.forEach((descendant) => nodesToInclude.add(descendant));
+
+		// Store original doNotSerialize values
+		const originalDoNotSerialize = new Map<Node, boolean>();
+
+		// Temporarily set doNotSerialize = true for all nodes except the ones we want to include
+		scene.meshes.forEach((mesh) => {
+			originalDoNotSerialize.set(mesh, mesh.doNotSerialize);
+			mesh.doNotSerialize = !nodesToInclude.has(mesh);
+		});
+
+		scene.lights.forEach((light) => {
+			originalDoNotSerialize.set(light, light.doNotSerialize);
+			light.doNotSerialize = !nodesToInclude.has(light);
+		});
+
+		scene.cameras.forEach((camera) => {
+			originalDoNotSerialize.set(camera, camera.doNotSerialize);
+			camera.doNotSerialize = !nodesToInclude.has(camera);
+		});
+
+		scene.transformNodes.forEach((transformNode) => {
+			originalDoNotSerialize.set(transformNode, transformNode.doNotSerialize);
+			transformNode.doNotSerialize = !nodesToInclude.has(transformNode);
+		});
+
+		// Serialize the filtered scene
+		const data = await SceneSerializer.SerializeAsync(scene);
+
+		// Restore original doNotSerialize values
+		originalDoNotSerialize.forEach((value, node) => {
+			node.doNotSerialize = value;
+		});
+
+		await writeJSON(filePath, data, JSON_CONFIG);
+
+		editor.layout.console.log(`Node exported successfully to ${filePath}`);
+		toast.success(`Node exported successfully to ${filePath}`);
+	} catch (e) {
+		if (e instanceof Error) {
+			editor.layout.console.error(`Error exporting node: ${e.message}`);
+			toast.error("Error exporting node");
+		}
+	}
+}

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

@@ -42,6 +42,7 @@ import { EditorInspectorSwitchField } from "../inspector/fields/switch";
 
 import { Editor } from "../../main";
 
+import { exportScene, exportNode } from "./export";
 import { removeNodes } from "./remove";
 
 export interface IEditorGraphContextMenuProps extends PropsWithChildren {
@@ -71,10 +72,6 @@ export class EditorGraphContextMenu extends Component<IEditorGraphContextMenuPro
 
 							{!isScene(this.props.object) && !isSound(this.props.object) && (
 								<>
-									<ContextMenuItem onClick={() => this._cloneNode(this.props.object)}>Clone</ContextMenuItem>
-
-									<ContextMenuSeparator />
-
 									<ContextMenuItem onClick={() => this.props.editor.layout.graph.copySelectedNodes()}>
 										Copy <ContextMenuShortcut>{platform() === "darwin" ? "⌘+C" : "CTRL+C"}</ContextMenuShortcut>
 									</ContextMenuItem>
@@ -86,11 +83,26 @@ export class EditorGraphContextMenu extends Component<IEditorGraphContextMenuPro
 									)}
 
 									<ContextMenuSeparator />
+
+									<ContextMenuItem onClick={() => this._cloneNode(this.props.object)}>Clone</ContextMenuItem>
+
+									{isNode(this.props.object) && !isScene(this.props.object) && (
+										<ContextMenuItem onClick={() => exportNode(this.props.editor, this.props.object)}>Export Node (.babylon)</ContextMenuItem>
+									)}
+
+									<ContextMenuSeparator />
 								</>
 							)}
 
 							{isSound(this.props.object) && <ContextMenuItem onClick={() => this._reloadSound()}>Reload</ContextMenuItem>}
 
+							{isScene(this.props.object) && (
+								<>
+									<ContextMenuItem onClick={() => exportScene(this.props.editor)}>Export Scene (.babylon)</ContextMenuItem>
+									<ContextMenuSeparator />
+								</>
+							)}
+
 							{(isNode(this.props.object) || isScene(this.props.object)) && !isSceneLinkNode(this.props.object) && (
 								<ContextMenuSub>
 									<ContextMenuSubTrigger className="flex items-center gap-2">