rewrite selection system

apps/editor/components/editor/custom-camera-controls.tsx

@@ -6,9 +6,12 @@ import { CameraControls, CameraControlsImpl } from "@react-three/drei";
 import { useEffect, useMemo, useRef } from "react";
 import { Vector3 } from "three";
 
+const currentTarget = new Vector3();
+
 export const CustomCameraControls = () => {
   const controls = useRef<CameraControlsImpl>(null!);
-  const currentLevelId = useViewer((state) => state.currentLevelId);
+  const currentLevelId = useViewer((state) => state.selection.levelId);
+  const firstLoad = useRef(true);
 
   useEffect(() => {
     let targetY = 0;
@@ -18,7 +21,18 @@ export const CustomCameraControls = () => {
         targetY = levelMesh.position.y;
       }
     }
-    const currentTarget = new Vector3();
+    if (firstLoad.current) {
+      firstLoad.current = false;
+      (controls.current as CameraControlsImpl).setLookAt(
+        20,
+        20,
+        20,
+        0,
+        0,
+        0,
+        true,
+      );
+    }
     (controls.current as CameraControlsImpl).getTarget(currentTarget);
     (controls.current as CameraControlsImpl).moveTo(
       currentTarget.x,

apps/editor/components/editor/index.tsx

@@ -56,7 +56,7 @@ export default function Editor() {
         <Grid cellColor="#666" sectionColor="#999" fadeDistance={30} />
         <Passes />
         <ToolManager />
-        <CustomControls />
+        <CustomCameraControls />
       </Viewer>
     </div>
   );
@@ -232,7 +232,7 @@ const Grid = ({
   const gridRef = useRef<Mesh>(null!);
 
   useFrame((_, delta) => {
-    const currentLevelId = useViewer.getState().currentLevelId;
+    const currentLevelId = useViewer.getState().selection.levelId;
     let targetY = 0;
     if (currentLevelId) {
       const levelMesh = sceneRegistry.nodes.get(currentLevelId);

apps/editor/components/tools/item/item-tool.tsx

@@ -34,7 +34,7 @@ export const ItemTool: React.FC = () => {
     let currentWallId: string | null = null;
 
     const checkCanPlace = () => {
-      const currentLevelId = useViewer.getState().currentLevelId;
+      const currentLevelId = useViewer.getState().selection.levelId;
       if (currentLevelId && draftItem.current) {
         let placeable = true;
         if (draftItem.current.asset.attachTo) {
@@ -72,7 +72,7 @@ export const ItemTool: React.FC = () => {
       }
     };
     const createDraftItem = () => {
-      const { currentLevelId } = useViewer.getState();
+      const currentLevelId = useViewer.getState().selection.levelId;
       if (!currentLevelId) {
         return null;
       }
@@ -116,7 +116,7 @@ export const ItemTool: React.FC = () => {
       }
     };
     const onGridClick = (event: GridEvent) => {
-      const { currentLevelId } = useViewer.getState();
+      const currentLevelId = useViewer.getState().selection.levelId;
       if (isOnWall.current) return;
 
       if (!currentLevelId || !draftItem.current || !checkCanPlace()) return;
@@ -133,7 +133,7 @@ export const ItemTool: React.FC = () => {
 
     const onWallEnter = (event: WallEvent) => {
       if (
-        useViewer.getState().currentLevelId !==
+        useViewer.getState().selection.levelId !==
         resolveLevelId(event.node, useScene.getState().nodes)
       ) {
         return;
@@ -169,7 +169,7 @@ export const ItemTool: React.FC = () => {
       currentWallId = null;
       event.stopPropagation();
       if (!draftItem.current) return;
-      const currentLevelId = useViewer.getState().currentLevelId;
+      const currentLevelId = useViewer.getState().selection.levelId;
       draftItem.current.parentId = currentLevelId;
       useScene.getState().updateNode(draftItem.current.id, {
         position: [
@@ -186,7 +186,7 @@ export const ItemTool: React.FC = () => {
       event.stopPropagation();
       if (!isOnWall.current) return;
 
-      const currentLevelId = useViewer.getState().currentLevelId;
+      const currentLevelId = useViewer.getState().selection.levelId;
       if (!currentLevelId || !draftItem.current || !checkCanPlace()) return;
 
       useScene.temporal.getState().resume();

apps/editor/components/tools/wall/wall-tool.tsx

@@ -4,7 +4,7 @@ import { useEffect, useRef } from "react";
 import { Line, Mesh, Vector3 } from "three";
 
 const commitWallDrawing = (start: [number, number], end: [number, number]) => {
-  const { currentLevelId } = useViewer.getState();
+  const currentLevelId = useViewer.getState().selection.levelId;
   const { createNode } = useScene.getState();
 
   if (!currentLevelId) return;

apps/editor/components/ui/sidebar/app-sidebar.tsx

@@ -40,7 +40,7 @@ export function AppSidebar() {
   // const handleDeleteSelected = useEditor((state) => state.handleDeleteSelected);
   // const serializeLayout = useEditor((state) => state.serializeLayout);
   const activeTool = useEditor((state) => state.tool);
-  const currentLevelId = useViewer((state) => state.currentLevelId);
+  const currentLevelId = useViewer((state) => state.selection.levelId);
   const setActiveTool = useEditor((state) => state.setTool);
 
   const [jsonCollapsed, setJsonCollapsed] = useState<boolean | number>(1);

apps/editor/components/ui/sidebar/panels/site-panel/level-tree-node.tsx

@@ -11,11 +11,11 @@ interface LevelTreeNodeProps {
 
 export function LevelTreeNode({ node, depth }: LevelTreeNodeProps) {
   const [expanded, setExpanded] = useState(true);
-  const currentLevelId = useViewer((state) => state.currentLevelId);
-  const setCurrentLevel = useViewer((state) => state.setCurrentLevelId);
+  const currentLevelId = useViewer((state) => state.selection.levelId);
+  const setSelection = useViewer((state) => state.setSelection);
 
   const handleClick = () => {
-    setCurrentLevel(node.id);
+    setSelection({ levelId: node.id });
   };
 
   const isSelected = currentLevelId === node.id;

apps/editor/store/use-editor.tsx

@@ -73,25 +73,26 @@ const useEditor = create<EditorState>()((set, get) => ({
     switch (phase) {
       case "site":
         // In Site mode, we zoom out and deselect specific levels/buildings
-        viewer.setCurrentBuildingId(null);
-        viewer.setCurrentLevelId(null);
+        viewer.resetSelection();
         viewer.setLevelMode("stacked");
         break;
 
       case "structure":
         // In Structure mode, we often want to focus on a specific building/level
         // Auto-select the first building if none is selected
-        if (!viewer.currentBuildingId) {
+        if (!viewer.selection.buildingId) {
           const firstBuildingId = scene.rootNodeIds.find((id) => {
             const node = scene.nodes[id];
             return node?.type === "building" || null;
           });
           if (firstBuildingId) {
-            viewer.setCurrentBuildingId(firstBuildingId as BuildingNode["id"]);
+            viewer.setSelection({
+              buildingId: firstBuildingId as BuildingNode["id"],
+            });
             const buildingNode = scene.nodes[firstBuildingId] as BuildingNode;
             const firstLevelId = buildingNode.children[0];
             if (firstLevelId) {
-              viewer.setCurrentLevelId(firstLevelId as LevelNode["id"]);
+              viewer.setSelection({ levelId: firstLevelId as LevelNode["id"] });
             }
           }
         }