feat: Add context menu item to export scene

Author: Yuri Pourre

editor/src/editor/layout/toolbar.tsx

@@ -2,12 +2,14 @@ import { ipcRenderer } from "electron";
 import { dirname, join } from "path/posix";
 
 import { Component, ReactNode } from "react";
+import { writeJSON } from "fs-extra";
+import { toast } from "sonner";
 
 import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarTrigger } from "../../ui/shadcn/ui/menubar";
 
 import { isDarwin } from "../../tools/os";
 import { execNodePty } from "../../tools/node-pty";
-import { openSingleFileDialog } from "../../tools/dialog";
+import { openSingleFileDialog, openSingleFolderDialog } from "../../tools/dialog";
 import { visualStudioCodeAvailable } from "../../tools/process";
 
 import { showConfirm } from "../../ui/dialog";
@@ -22,6 +24,7 @@ import { getMeshCommands } from "../dialogs/command-palette/mesh";
 import { getLightCommands } from "../dialogs/command-palette/light";
 import { getCameraCommands } from "../dialogs/command-palette/camera";
 import { ICommandPaletteType } from "../dialogs/command-palette/command-palette";
+import { SceneSerializer } from "babylonjs";
 
 export interface IEditorToolbarProps {
 	editor: Editor;
@@ -37,6 +40,7 @@ export class EditorToolbar extends Component<IEditorToolbarProps> {
 
 		ipcRenderer.on("editor:open-project", () => this._handleOpenProject());
 		ipcRenderer.on("editor:open-vscode", () => this._handleOpenVisualStudioCode());
+		ipcRenderer.on("editor:export-scene-babylon", () => this._handleExportSceneBabylon());
 
 		this._meshCommands = getMeshCommands(this.props.editor);
 		this._lightCommands = getLightCommands(this.props.editor);
@@ -83,6 +87,8 @@ export class EditorToolbar extends Component<IEditorToolbarProps> {
 								Export <MenubarShortcut>CTRL+G</MenubarShortcut>
 							</MenubarItem>
 
+							<MenubarItem onClick={() => this._handleExportSceneBabylon()}>Export Scene (.babylon)</MenubarItem>
+
 							<MenubarSeparator />
 
 							<MenubarItem disabled={!visualStudioCodeAvailable} onClick={() => this._handleOpenVisualStudioCode()}>
@@ -224,4 +230,35 @@ export class EditorToolbar extends Component<IEditorToolbarProps> {
 		const p = await execNodePty(`code "${join(dirname(this.props.editor.state.projectPath), "/")}"`);
 		await p.wait();
 	}
+
+	private async _handleExportSceneBabylon(): Promise<void> {
+		const folderPath = openSingleFolderDialog("Select folder to save the .babylon file");
+		if (!folderPath) {
+			return;
+		}
+
+		try {
+			const scene = this.props.editor.layout.preview.scene;
+			const data = await SceneSerializer.SerializeAsync(scene);
+
+			// Generate a filename with date and time
+			const now = new Date();
+			const dateStr = now.toISOString().replace(/[:.]/g, "-").replace("T", "_").split("Z")[0];
+			const fileName = `scene_${dateStr}.babylon`;
+			const filePath = join(folderPath, fileName);
+
+			await writeJSON(filePath, data, {
+				spaces: 4,
+				encoding: "utf8",
+			});
+
+			this.props.editor.layout.console.log(`Scene exported successfully to ${filePath}`);
+			toast.success(`Scene exported successfully to ${filePath}`);
+		} catch (e) {
+			if (e instanceof Error) {
+				this.props.editor.layout.console.error(`Error exporting scene: ${e.message}`);
+				toast.error("Error exporting scene");
+			}
+		}
+	}
 }

editor/src/editor/menu.ts

@@ -52,6 +52,10 @@ export function setupEditorMenu(): void {
 						accelerator: "CommandOrControl+G",
 						click: () => BrowserWindow.getFocusedWindow()?.webContents.send("export"),
 					},
+					{
+						label: "Export Scene (.babylon)",
+						click: () => BrowserWindow.getFocusedWindow()?.webContents.send("editor:export-scene-babylon"),
+					},
 					{
 						type: "separator",
 					},