Effect editor

editor/package.json

@@ -60,6 +60,7 @@
 		"@radix-ui/react-popover": "^1.0.7",
 		"@radix-ui/react-progress": "^1.0.3",
 		"@radix-ui/react-radio-group": "^1.1.3",
+		"@radix-ui/react-scroll-area": "^1.2.10",
 		"@radix-ui/react-select": "^2.0.0",
 		"@radix-ui/react-separator": "^1.0.3",
 		"@radix-ui/react-slider": "^1.2.0",
@@ -73,6 +74,7 @@
 		"@recast-navigation/generators": "0.43.0",
 		"@xterm/addon-fit": "0.11.0",
 		"@xterm/xterm": "6.1.0-beta.22",
+		"adm-zip": "^0.5.16",
 		"assimpjs": "0.0.10",
 		"axios": "1.13.5",
 		"babylonjs": "9.0.0",
@@ -103,6 +105,7 @@
 		"framer-motion": "12.23.24",
 		"fs-extra": "11.2.0",
 		"glob": "11.1.0",
+		"js-yaml": "^4.1.1",
 		"markdown-to-jsx": "7.6.2",
 		"math-expression-evaluator": "^2.0.6",
 		"md5": "2.3.0",

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

@@ -1,4 +1,4 @@
-import { clipboard, webUtils } from "electron";
+import { clipboard, webUtils, ipcRenderer } from "electron";
 import { dirname, join, extname, basename } from "path/posix";
 import { copyFile, copy, mkdir, move, pathExists, readdir, stat, writeFile, writeJSON } from "fs-extra";
 
@@ -832,6 +832,8 @@ export class EditorAssetsBrowser extends Component<IEditorAssetsBrowserProps, IE
 
 				<ContextMenuSeparator />
 				<ContextMenuItem onClick={() => this._handleAddFullScreenGUI()}>Fullscreen GUI</ContextMenuItem>
+				<ContextMenuSeparator />
+				<ContextMenuItem onClick={() => this._handleAddFX()}>FX</ContextMenuItem>
 			</>
 		);
 	}
@@ -1296,6 +1298,25 @@ export class EditorAssetsBrowser extends Component<IEditorAssetsBrowserProps, IE
 		return this._refreshItems(this.state.browsedPath);
 	}
 
+	private async _handleAddFX(): Promise<void> {
+		if (!this.state.browsedPath) {
+			return;
+		}
+
+		const name = await findAvailableFilename(this.state.browsedPath, "New Effect", ".fx");
+		const defaultEffectFile = {
+			version: "1.0.0",
+			effects: [],
+		};
+
+		await writeJSON(join(this.state.browsedPath, name), defaultEffectFile, {
+			spaces: "\t",
+			encoding: "utf-8",
+		});
+
+		return this._refreshItems(this.state.browsedPath);
+	}
+
 	private async _handleAddFullScreenGUI(): Promise<void> {
 		if (!this.state.browsedPath) {
 			return;
@@ -1458,9 +1479,14 @@ export class EditorAssetsBrowser extends Component<IEditorAssetsBrowserProps, IE
 			case ".tsx":
 			case ".js":
 			case ".jsx":
-			case ".fx":
 			case ".json":
 				return execNodePty(`code "${item.props.absolutePath}"`);
+
+			case ".fx":
+				return ipcRenderer.send("window:open", "build/src/editor/windows/effect-editor", {
+					filePath: item.props.absolutePath,
+					projectConfiguration: { ...projectConfiguration },
+				});
 		}
 	}
 

editor/src/editor/layout/inspector/fields/geometry.tsx

@@ -0,0 +1,234 @@
+import { DragEvent, Component, PropsWithChildren, ReactNode } from "react";
+import { extname } from "path/posix";
+
+import { toast } from "sonner";
+
+import { XMarkIcon } from "@heroicons/react/20/solid";
+import { MdOutlineQuestionMark } from "react-icons/md";
+
+import { Scene, Mesh } from "babylonjs";
+
+import { isScene } from "../../../../tools/guards/scene";
+import { registerUndoRedo } from "../../../../tools/undoredo";
+
+import { configureImportedNodeIds, loadImportedSceneFile } from "../../preview/import/import";
+
+export interface IEditorInspectorGeometryFieldProps extends PropsWithChildren {
+	title: string;
+	property: string;
+	object: any;
+
+	noUndoRedo?: boolean;
+
+	scene?: Scene;
+	onChange?: (mesh: Mesh | null) => void;
+}
+
+export interface IEditorInspectorGeometryFieldState {
+	dragOver: boolean;
+	loading: boolean;
+}
+
+export class EditorInspectorGeometryField extends Component<IEditorInspectorGeometryFieldProps, IEditorInspectorGeometryFieldState> {
+	public constructor(props: IEditorInspectorGeometryFieldProps) {
+		super(props);
+
+		this.state = {
+			dragOver: false,
+			loading: false,
+		};
+	}
+
+	public render(): ReactNode {
+		const mesh = this.props.object[this.props.property] as Mesh | null | undefined;
+
+		return (
+			<div
+				onDrop={(ev) => this._handleDrop(ev)}
+				onDragOver={(ev) => this._handleDragOver(ev)}
+				onDragLeave={(ev) => this._handleDragLeave(ev)}
+				className={`flex flex-col w-full p-5 rounded-lg ${this.state.dragOver ? "bg-muted-foreground/75 dark:bg-muted-foreground/20" : "bg-muted-foreground/10 dark:bg-muted-foreground/5"} transition-all duration-300 ease-in-out`}
+			>
+				<div className="flex gap-4 w-full">
+					{this._getPreviewComponent(mesh)}
+
+					<div className="flex flex-col w-full">
+						<div className="flex flex-col px-2">
+							<div>{this.props.title}</div>
+							{mesh && <div className="text-sm text-muted-foreground">{mesh.name}</div>}
+						</div>
+
+						{mesh && (
+							<div className="flex flex-col gap-1 mt-1 w-full">
+								<div className="flex justify-between items-center px-2 py-2">
+									<div className="w-1/2">Vertices</div>
+									<div className="flex justify-between items-center w-full">
+										<div className="text-white/50">{mesh.getTotalVertices()}</div>
+									</div>
+								</div>
+								<div className="flex justify-between items-center px-2 py-2">
+									<div className="w-1/2">Faces</div>
+									<div className="flex justify-between items-center w-full">
+										<div className="text-white/50">{mesh.getTotalIndices() ? mesh.getTotalIndices() / 3 : 0}</div>
+									</div>
+								</div>
+							</div>
+						)}
+					</div>
+					<div
+						onClick={() => {
+							const oldMesh = this.props.object[this.props.property];
+
+							this.props.object[this.props.property] = null;
+							this.props.onChange?.(null);
+
+							if (!this.props.noUndoRedo) {
+								registerUndoRedo({
+									executeRedo: true,
+									undo: () => {
+										this.props.object[this.props.property] = oldMesh;
+									},
+									redo: () => {
+										this.props.object[this.props.property] = null;
+									},
+								});
+							}
+
+							this.forceUpdate();
+						}}
+						className="flex justify-center items-center w-24 h-full hover:bg-muted-foreground rounded-lg transition-all duration-300"
+					>
+						{mesh && <XMarkIcon className="w-6 h-6" />}
+					</div>
+				</div>
+
+				{mesh && this.props.children}
+			</div>
+		);
+	}
+
+	private _getPreviewComponent(mesh: Mesh | null | undefined): ReactNode {
+		return (
+			<div className={`flex justify-center items-center ${mesh ? "w-24 h-24" : "w-8 h-8"} aspect-square`}>
+				{mesh ? (
+					<div className="w-24 h-24 flex items-center justify-center bg-background rounded-lg">
+						<div className="text-xs text-center text-muted-foreground">{mesh.name}</div>
+					</div>
+				) : (
+					<MdOutlineQuestionMark className="w-8 h-8" />
+				)}
+			</div>
+		);
+	}
+
+	private _handleDragOver(ev: DragEvent<HTMLDivElement>): void {
+		ev.preventDefault();
+		this.setState({ dragOver: true });
+	}
+
+	private _handleDragLeave(ev: DragEvent<HTMLDivElement>): void {
+		ev.preventDefault();
+		this.setState({ dragOver: false });
+	}
+
+	private async _handleDrop(ev: DragEvent<HTMLDivElement>): Promise<void> {
+		ev.preventDefault();
+		this.setState({ dragOver: false, loading: true });
+
+		try {
+			const absolutePath = JSON.parse(ev.dataTransfer.getData("assets"))[0];
+			const extension = extname(absolutePath).toLowerCase();
+
+			const supportedExtensions = [".x", ".b3d", ".dae", ".glb", ".gltf", ".fbx", ".stl", ".lwo", ".dxf", ".obj", ".3ds", ".ms3d", ".blend", ".babylon"];
+
+			if (!supportedExtensions.includes(extension)) {
+				toast.error(`Unsupported geometry format: ${extension}`);
+				this.setState({ loading: false });
+				return;
+			}
+
+			const scene = this.props.scene ?? (isScene(this.props.object) ? this.props.object : this.props.object.getScene?.());
+
+			if (!scene) {
+				toast.error("Scene is not available");
+				this.setState({ loading: false });
+				return;
+			}
+
+			const result = await loadImportedSceneFile(scene, absolutePath);
+
+			if (!result || !result.meshes || result.meshes.length === 0) {
+				toast.error("Failed to load geometry file");
+				this.setState({ loading: false });
+				return;
+			}
+
+			// Use the first mesh or find a mesh without parent
+			let importedMesh: Mesh | null = null;
+			for (const m of result.meshes) {
+				if (m instanceof Mesh && !m.parent) {
+					importedMesh = m;
+					break;
+				}
+			}
+
+			if (!importedMesh && result.meshes.length > 0 && result.meshes[0] instanceof Mesh) {
+				importedMesh = result.meshes[0];
+			}
+
+			if (!importedMesh) {
+				toast.error("No valid mesh found in geometry file");
+				this.setState({ loading: false });
+				return;
+			}
+
+			// Configure imported mesh
+			configureImportedNodeIds(importedMesh);
+			importedMesh.setEnabled(false); // Hide the source mesh
+
+			const oldMesh = this.props.object[this.props.property];
+
+			this.props.object[this.props.property] = importedMesh;
+			this.props.onChange?.(importedMesh);
+
+			if (!this.props.noUndoRedo) {
+				registerUndoRedo({
+					executeRedo: true,
+					undo: () => {
+						this.props.object[this.props.property] = oldMesh;
+						if (importedMesh && importedMesh !== oldMesh) {
+							importedMesh.dispose();
+						}
+					},
+					redo: () => {
+						this.props.object[this.props.property] = importedMesh;
+					},
+					onLost: () => {
+						if (importedMesh && importedMesh !== oldMesh) {
+							importedMesh.dispose();
+						}
+					},
+				});
+			}
+
+			// Dispose other meshes from the imported file
+			for (const m of result.meshes) {
+				if (m !== importedMesh) {
+					m.dispose();
+				}
+			}
+
+			// Dispose transform nodes
+			for (const tn of result.transformNodes) {
+				tn.dispose();
+			}
+
+			this.forceUpdate();
+		} catch (error) {
+			console.error("Failed to load geometry:", error);
+			toast.error(`Failed to load geometry: ${error instanceof Error ? error.message : String(error)}`);
+		} finally {
+			this.setState({ loading: false });
+		}
+	}
+}