feat: add support of "locked" mode for objects in graph

Author: julien-moreau

editor/package.json

@@ -55,6 +55,7 @@
 		"@radix-ui/react-context-menu": "^2.1.5",
 		"@radix-ui/react-dialog": "^1.0.5",
 		"@radix-ui/react-dropdown-menu": "^2.0.6",
+		"@radix-ui/react-hover-card": "1.1.14",
 		"@radix-ui/react-icons": "^1.3.0",
 		"@radix-ui/react-label": "^2.0.2",
 		"@radix-ui/react-menubar": "^1.0.4",

editor/src/editor/layout/graph.tsx

@@ -34,10 +34,10 @@ import { isSound } from "../../tools/guards/sound";
 import { isSceneLinkNode } from "../../tools/guards/scene";
 import { updateAllLights } from "../../tools/light/shadows";
 import { getCollisionMeshFor } from "../../tools/mesh/collision";
+import { isNodeVisibleInGraph } from "../../tools/node/metadata";
 import { isAdvancedDynamicTexture } from "../../tools/guards/texture";
 import { updateIblShadowsRenderPipeline } from "../../tools/light/ibl";
 import { UniqueNumber, waitNextAnimationFrame } from "../../tools/tools";
-import { isMeshMetadataNotVisibleInGraph } from "../../tools/mesh/metadata";
 import { isAnyParticleSystem, isGPUParticleSystem, isParticleSystem } from "../../tools/guards/particles";
 import {
 	isAbstractMesh,
@@ -676,7 +676,7 @@ export class EditorGraph extends Component<IEditorGraphProps, IEditorGraphState>
 	}
 
 	private _parseSceneNode(node: Node, noChildren?: boolean): TreeNodeInfo | null {
-		if ((isMesh(node) && (node._masterMesh || isMeshMetadataNotVisibleInGraph(node))) || isCollisionMesh(node) || isCollisionInstancedMesh(node)) {
+		if ((isMesh(node) && (node._masterMesh || !isNodeVisibleInGraph(node))) || isCollisionMesh(node) || isCollisionInstancedMesh(node)) {
 			return null;
 		}
 
@@ -773,7 +773,19 @@ export class EditorGraph extends Component<IEditorGraphProps, IEditorGraphState>
 		return (
 			<div
 				onClick={(ev) => {
-					node.setEnabled(!node.isEnabled());
+					const enabled = !node.isEnabled();
+
+					let selectedNodeData = this.getSelectedNodes().map((n) => n.nodeData);
+					if (!selectedNodeData.includes(node)) {
+						selectedNodeData = [node];
+					}
+
+					selectedNodeData.forEach((node) => {
+						if (isNode(node)) {
+							node.setEnabled(enabled);
+						}
+					});
+
 					this.refresh();
 					ev.stopPropagation();
 

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

@@ -30,6 +30,7 @@ import { registerUndoRedo } from "../../../tools/undoredo";
 import { isScene, isSceneLinkNode } from "../../../tools/guards/scene";
 import { UniqueNumber, waitNextAnimationFrame } from "../../../tools/tools";
 import { isAbstractMesh, isMesh, isNode } from "../../../tools/guards/nodes";
+import { isNodeLocked, isNodeSerializable, setNodeLocked, setNodeSerializable } from "../../../tools/node/metadata";
 
 import { addGPUParticleSystem, addParticleSystem } from "../../../project/add/particles";
 
@@ -113,12 +114,29 @@ export class EditorGraphContextMenu extends Component<IEditorGraphContextMenuPro
 									<ContextMenuSeparator />
 
 									<ContextMenuCheckboxItem
-										checked={this.props.object.metadata?.doNotSerialize ?? false}
+										checked={isNodeLocked(this.props.object)}
 										onClick={() => {
+											const locked = !isNodeLocked(this.props.object);
+
+											this.props.editor.layout.graph.getSelectedNodes().forEach((node) => {
+												if (isNode(node.nodeData)) {
+													setNodeLocked(node.nodeData, locked);
+												}
+											});
+											this.props.editor.layout.graph.refresh();
+										}}
+									>
+										Locked
+									</ContextMenuCheckboxItem>
+
+									<ContextMenuCheckboxItem
+										checked={!isNodeSerializable(this.props.object)}
+										onClick={() => {
+											const serializable = !isNodeSerializable(this.props.object);
+
 											this.props.editor.layout.graph.getSelectedNodes().forEach((node) => {
 												if (isNode(node.nodeData)) {
-													node.nodeData.metadata ??= {};
-													node.nodeData.metadata.doNotSerialize = node.nodeData.metadata.doNotSerialize ? false : true;
+													setNodeSerializable(node.nodeData, serializable);
 												}
 											});
 											this.props.editor.layout.graph.refresh();

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

@@ -2,6 +2,7 @@ import { extname } from "path/posix";
 
 import { DragEvent, useEffect, useRef, useState } from "react";
 
+import { FaLock } from "react-icons/fa";
 import { useEventListener } from "usehooks-ts";
 
 import { Node, TransformNode, AbstractMesh } from "babylonjs";
@@ -12,6 +13,7 @@ import { isScene } from "../../../tools/guards/scene";
 import { isSound } from "../../../tools/guards/sound";
 import { registerUndoRedo } from "../../../tools/undoredo";
 import { isAnyParticleSystem } from "../../../tools/guards/particles";
+import { isNodeSerializable, isNodeLocked } from "../../../tools/node/metadata";
 import { isAbstractMesh, isInstancedMesh, isMesh, isNode, isTransformNode } from "../../../tools/guards/nodes";
 
 import { applySoundAsset } from "../preview/import/sound";
@@ -246,14 +248,50 @@ export function EditorGraphLabel(props: IEditorGraphLabelProps) {
 		props.editor.layout.graph.refresh();
 	}
 
+	function getLabel() {
+		if (doubleClicked) {
+			return (
+				<Input
+					value={name}
+					ref={inputRef}
+					className="w-fit h-7"
+					onCopy={(ev) => ev.stopPropagation()}
+					onPaste={(ev) => ev.stopPropagation()}
+					onChange={(ev) => setName(ev.currentTarget.value)}
+				/>
+			);
+		}
+
+		const label = (
+			<div
+				className={`
+					${!isNodeSerializable(props.object) ? "line-through" : ""}
+					${!isNodeSerializable(props.object) || isNodeLocked(props.object) ? "text-foreground/35" : ""}
+					transition-all duration-300 ease-in-out
+				`}
+			>
+				{props.name}
+			</div>
+		);
+
+		if (isNodeLocked(props.object)) {
+			return (
+				<div className="flex gap-2 items-center justify-between">
+					{label}
+					<FaLock className="w-4 h-4 opacity-50 mr-2" />
+				</div>
+			);
+		}
+
+		return label;
+	}
+
 	return (
 		<div
 			draggable
 			className={`
                 ml-2 p-1 w-full
                 ${over ? "bg-muted" : ""}
-                ${props.object.metadata?.doNotSerialize ? "text-foreground/35 line-through" : ""}
-                transition-all duration-300 ease-in-out
             `}
 			onDragStart={(ev) => handleDragStart(ev)}
 			onDragOver={(ev) => handleDragOver(ev)}
@@ -262,18 +300,7 @@ export function EditorGraphLabel(props: IEditorGraphLabelProps) {
 			onDoubleClick={() => handleDoubleClick()}
 			onBlur={() => handleInputNameBlurred()}
 		>
-			{doubleClicked ? (
-				<Input
-					value={name}
-					ref={inputRef}
-					className="w-fit h-7"
-					onCopy={(ev) => ev.stopPropagation()}
-					onPaste={(ev) => ev.stopPropagation()}
-					onChange={(ev) => setName(ev.currentTarget.value)}
-				/>
-			) : (
-				props.name
-			)}
+			{getLabel()}
 		</div>
 	);
 }

editor/src/editor/layout/inspector.tsx

@@ -1,13 +1,19 @@
 import { Component, ReactNode } from "react";
 import { Icon, NonIdealState } from "@blueprintjs/core";
 
+import { FaInfoCircle } from "react-icons/fa";
 import { FaCube, FaSprayCanSparkles } from "react-icons/fa6";
 
 import { Tools } from "babylonjs";
 
 import { Editor } from "../main";
 
+import { Badge } from "../../ui/shadcn/ui/badge";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/shadcn/ui/tabs";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "../../ui/shadcn/ui/hover-card";
+
+import { isNode } from "../../tools/guards/nodes";
+import { isNodeLocked } from "../../tools/node/metadata";
 
 import { setInspectorSearch } from "./inspector/fields/field";
 import { IEditorInspectorImplementationProps } from "./inspector/inspector";
@@ -86,6 +92,8 @@ export class EditorInspector extends Component<IEditorInspectorProps, IEditorIns
 	}
 
 	public render(): ReactNode {
+		const disabled = (this.state.editedObject && isNode(this.state.editedObject) && isNodeLocked(this.state.editedObject)) ?? false;
+
 		return (
 			<div className="flex flex-col gap-2 w-full h-full p-2 text-foreground overflow-hidden">
 				<Tabs defaultValue="entity" className="flex flex-col gap-2 w-full h-full">
@@ -99,6 +107,18 @@ export class EditorInspector extends Component<IEditorInspectorProps, IEditorIns
 						</TabsTrigger>
 					</TabsList>
 
+					{disabled && (
+						<HoverCard openDelay={150} closeDelay={150}>
+							<HoverCardTrigger className="w-full">
+								<Badge variant="secondary" className="flex items-center gap-2 w-full">
+									<FaInfoCircle className="w-6 h-6" />
+									Object is locked and cannot be edited.
+								</Badge>
+							</HoverCardTrigger>
+							<HoverCardContent>The object is locked, meaning it cannot be modified in the inspector. You can unlock it in the scene graph.</HoverCardContent>
+						</HoverCard>
+					)}
+
 					<input
 						type="text"
 						placeholder="Search..."
@@ -108,7 +128,7 @@ export class EditorInspector extends Component<IEditorInspectorProps, IEditorIns
 					/>
 
 					<TabsContent value="entity" className="w-full h-full overflow-auto">
-						<div className="flex flex-col gap-2 h-full">{this._getContent()}</div>
+						<div className={`flex flex-col gap-2 h-full ${disabled ? "pointer-events-none opacity-50 cursor-not-allowed" : ""}`}>{this._getContent()}</div>
 					</TabsContent>
 
 					<TabsContent value="decals" className="w-full h-full overflow-auto">

editor/src/editor/layout/inspector/decals/decals.tsx

@@ -14,7 +14,7 @@ import { Editor } from "../../../main";
 import { isDarwin } from "../../../../tools/os";
 import { registerUndoRedo } from "../../../../tools/undoredo";
 import { UniqueNumber, waitNextAnimationFrame } from "../../../../tools/tools";
-import { setMeshMetadataNotSerializable, setMeshMetadataNotVisibleInGraph } from "../../../../tools/mesh/metadata";
+import { setNodeSerializable, setNodeVisibleInGraph } from "../../../../tools/node/metadata";
 
 import { loadImportedMaterial } from "../../preview/import/import";
 
@@ -298,8 +298,8 @@ export class EditorDecalsInspector extends Component<IEditorDecalsInspectorProps
 		this._decalMesh.receiveShadows = true;
 		this._decalMesh.visibility = this.state.ctrlOrMetaKeyDown ? 1 : 0.35;
 
-		setMeshMetadataNotSerializable(this._decalMesh, true);
-		setMeshMetadataNotVisibleInGraph(this._decalMesh, true);
+		setNodeSerializable(this._decalMesh, false);
+		setNodeVisibleInGraph(this._decalMesh, false);
 
 		if (this.state.material.zOffset === 0) {
 			this.state.material.zOffset = -3;
@@ -345,8 +345,8 @@ export class EditorDecalsInspector extends Component<IEditorDecalsInspectorProps
 				},
 			};
 
-			setMeshMetadataNotSerializable(decalMesh, false);
-			setMeshMetadataNotVisibleInGraph(decalMesh, false);
+			setNodeSerializable(decalMesh, true);
+			setNodeVisibleInGraph(decalMesh, true);
 
 			registerUndoRedo({
 				executeRedo: false,

editor/src/editor/layout/inspector/material/pbr.tsx

@@ -57,6 +57,7 @@ export class EditorPBRMaterialInspector extends Component<IEditorPBRMaterialInsp
 						object={this.props.material}
 						property="transparencyMode"
 						items={[
+							{ text: "None", value: null },
 							{ text: "Opaque", value: PBRMaterial.MATERIAL_OPAQUE },
 							{ text: "Alpha Test", value: PBRMaterial.MATERIAL_ALPHATEST },
 							{ text: "Alpha Blend", value: PBRMaterial.MATERIAL_ALPHABLEND },