feat: auto select picked material from preview when available in MultiMaterial inspector

Author: julien-moreau

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

@@ -11,6 +11,8 @@ import { loadImportedMaterial } from "../../preview/import/import";
 
 import { registerUndoRedo } from "../../../../tools/undoredo";
 
+import { Editor } from "../../../main";
+
 import { EditorInspectorSectionField } from "../fields/section";
 
 import { EditorSkyMaterialInspector } from "./sky";
@@ -26,6 +28,7 @@ import { EditorStandardMaterialInspector } from "./standard";
 import { EditorTriPlanarMaterialInspector } from "./tri-planar";
 
 export interface IEditorPBRMaterialInspectorProps {
+	editor: Editor;
 	material: MultiMaterial;
 }
 
@@ -37,8 +40,10 @@ export class EditorMultiMaterialInspector extends Component<IEditorPBRMaterialIn
 	public constructor(props: IEditorPBRMaterialInspectorProps) {
 		super(props);
 
+		const subMeshId = props.editor.layout.preview.lastPickingInfo?.subMeshId ?? 0;
+
 		this.state = {
-			material: props.material.subMaterials[0] ?? null,
+			material: props.material.subMaterials[subMeshId] ?? null,
 		};
 	}
 

editor/src/editor/layout/inspector/mesh/mesh.tsx

@@ -413,7 +413,7 @@ export class EditorMeshInspector extends Component<IEditorInspectorImplementatio
 				return <EditorNodeMaterialInspector mesh={this.props.object} material={this.props.object.material as NodeMaterial} />;
 
 			case "MultiMaterial":
-				return <EditorMultiMaterialInspector material={this.props.object.material as MultiMaterial} />;
+				return <EditorMultiMaterialInspector editor={this.props.editor} material={this.props.object.material as MultiMaterial} />;
 
 			case "SkyMaterial":
 				return <EditorSkyMaterialInspector mesh={this.props.object} material={this.props.object.material as SkyMaterial} />;

editor/src/editor/layout/preview.tsx

@@ -170,6 +170,11 @@ export class EditorPreview extends Component<IEditorPreviewProps, IEditorPreview
 	 */
 	public canvas: HTMLCanvasElement | null = null;
 
+	/**
+	 * Defines the reference to the last picking info processed in the preview.
+	 */
+	public lastPickingInfo: PickingInfo | null = null;
+
 	private _renderScene: boolean = true;
 	private _mouseDownPosition: Vector2 = Vector2.Zero();
 
@@ -613,12 +618,15 @@ export class EditorPreview extends Component<IEditorPreviewProps, IEditorPreview
 	/** @internal */
 	public _handleMouseLeave(): void {
 		this._restoreCurrentMeshUnderPointer();
+		this.lastPickingInfo = null;
 		this._objectUnderPointer = null;
 	}
 
 	private _mouseMoveTimeoutId: number = -1;
 
 	private _handleMouseMove(x: number, y: number): void {
+		this.lastPickingInfo = null;
+
 		if (!this.state.pickingEnabled) {
 			return;
 		}
@@ -649,6 +657,8 @@ export class EditorPreview extends Component<IEditorPreviewProps, IEditorPreview
 	}
 
 	private _handleMouseDown(event: MouseEvent<HTMLCanvasElement, globalThis.MouseEvent>): void {
+		this.lastPickingInfo = null;
+
 		if (!this.state.pickingEnabled) {
 			return;
 		}
@@ -672,6 +682,8 @@ export class EditorPreview extends Component<IEditorPreviewProps, IEditorPreview
 	}
 
 	private _handleDoubleClick(_event: MouseEvent<HTMLCanvasElement, globalThis.MouseEvent>): void {
+		this.lastPickingInfo = null;
+
 		if (!this.state.pickingEnabled || this.axis._axisMeshUnderPointer) {
 			return;
 		}
@@ -683,6 +695,8 @@ export class EditorPreview extends Component<IEditorPreviewProps, IEditorPreview
 	}
 
 	private _handleMouseUp(event: MouseEvent<HTMLCanvasElement, globalThis.MouseEvent>): void {
+		this.lastPickingInfo = null;
+
 		if (!this.state.pickingEnabled) {
 			return;
 		}
@@ -711,6 +725,8 @@ export class EditorPreview extends Component<IEditorPreviewProps, IEditorPreview
 			}
 		}
 
+		this.lastPickingInfo = pickingInfo;
+
 		if (effectivePickedObject) {
 			if (event.shiftKey) {
 				this.props.editor.layout.graph.addToSelectedNodes(effectivePickedObject);

editor/src/editor/layout/preview/play.tsx

@@ -305,6 +305,7 @@ export class EditorPreviewPlayComponent extends Component<IEditorPreviewPlayComp
 
 			return true;
 		} catch (e) {
+			console.error("Failed to compile play scripts:", e);
 			if (e instanceof Error) {
 				this.props.editor.layout.console.error(`Failed to compile play scripts:\n${e.message}`);
 			}