selected object highlight

src/components/ObjectView.tsx

@@ -2,6 +2,7 @@ import { observer } from "mobx-react-lite";
 import type { ObjectInstance } from "../types";
 import { useRef } from "react";
 import type { Mesh } from "three";
+import { Edges } from "@react-three/drei";
 import { state } from "../state";
 
 type ObjectViewProps = {
@@ -15,14 +16,28 @@ export const ObjectView = observer(function ({ object }: ObjectViewProps) {
     if (!objectType)
         return null;
 
+    const isSelected = state.worldEditor.selectedObjectId === object.id;
+
+    const handleClick = (e: { stopPropagation: () => void }) => {
+        if (!state.worldEditor.isEnabled)
+            return;
+        e.stopPropagation();
+        state.worldEditor.setSelectedObjectId(object.id);
+    };
+
     return (<>
-        <group position={object.position} rotation={object.rotation}>
+        <group
+            position={object.position}
+            rotation={object.rotation}
+            onClick={handleClick}
+        >
             {
                 objectType.voxels.map((v, idx) => {
                     const vt = state.world.getVoxelTypeById(v.typeId);
                     return <mesh key={idx} ref={meshRef} position={v.position}>
                         <boxGeometry args={[1, 1, 1]} />
                         <meshStandardMaterial color={(v.color ?? vt?.color) ?? 'white'} opacity={(v.opacity ?? vt?.opacity) ?? 1} />
+                        {isSelected && <Edges color="white" lineWidth={3} stencilWrite={false} />}
                     </mesh>
                 })
             }

src/state/worldEditor.ts

@@ -3,11 +3,13 @@ import type { WorldState } from "./world";
 import type { ObjectInstance } from "../types";
 import { createObjectInstance } from "../utils/object";
 import { randomId } from "../utils";
-import type { Pos3, V3 } from "../types/3d";
+import type { Pos3 } from "../types/3d";
 
 export class WorldEditorState {
     private readonly world: WorldState;
 
+    public selectedObjectId: string | undefined;
+
     constructor(world: WorldState) {
         this.world = world;
         makeAutoObservable(this);
@@ -23,6 +25,10 @@ export class WorldEditorState {
         this.world.save();
     }
 
+    public setSelectedObjectId(value: string | undefined): void {
+        this.selectedObjectId = value;
+    }
+
     public addObjectCloneAtRandomPosition(typeId: string): ObjectInstance {
         return this.addObjectClone(
             typeId,