draft item tool

apps/editor/components/editor.tsx

@@ -51,10 +51,10 @@ export default function Editor() {
 }
 
 const TestUndo = () => {
-  const {undo, redo, futureStates, pastStates} = useScene.temporal.getState();
+  const { undo, redo, futureStates, pastStates } = useScene.temporal.getState();
 
-
-  return (    <div className="absolute top-4 right-4 z-10 flex gap-2">
+  return (
+    <div className="absolute top-4 right-4 z-10 flex gap-2">
       <button
         className="px-4 py-2 rounded bg-white"
         onClick={() => {
@@ -73,7 +73,7 @@ const TestUndo = () => {
       </button>
     </div>
   );
-}
+};
 
 export const Passes = ({}) => {
   const { gl: renderer, scene, camera } = useThree();
@@ -169,13 +169,13 @@ const Grid = ({
         grid.x
           .div(fw.x)
           .add(1 - thickness)
-          .min(1)
+          .min(1),
       );
       const lineY = float(1).sub(
         grid.y
           .div(fw.y)
           .add(1 - thickness)
-          .min(1)
+          .min(1),
       );
       // Combine both axes - max gives us lines in both directions
       return lineX.max(lineY);
@@ -192,7 +192,7 @@ const Grid = ({
     const gridColor = mix(
       color(cellColor),
       color(sectionColor),
-      float(sectionThickness).mul(g2).min(1)
+      float(sectionThickness).mul(g2).min(1),
     );
 
     // Combined alpha
@@ -229,37 +229,36 @@ const DraftSelector = () => {
   const selectedItemId = useRef<ItemNode["id"] | WallNode["id"]>(null);
   const itemSelectedAt = useRef<number>(0);
   useEffect(() => {
-    emitter.on('building:enter', (event) => {
-      console.log('Entered building:', event.node.id);
+    emitter.on("building:enter", (event) => {
+      console.log("Entered building:", event.node.id);
       const itemMesh = sceneRegistry.nodes.get(event.node.id);
       selectedObjects.length = 0;
       selectedObjects.push(itemMesh);
     });
-    emitter.on('building:leave', (event) => {
-      console.log('Leaving building:', event.node.id);
+    emitter.on("building:leave", (event) => {
+      console.log("Leaving building:", event.node.id);
       selectedObjects.length = 0;
     });
 
+    // emitter.on("item:click", (event) => {
+    //   event.stopPropagation();
+    //   if (Date.now() - itemSelectedAt.current < 50) {
+    //     return;
+    //   }
+    //   itemSelectedAt.current = Date.now();
+    //   if (selectedItemId.current === event.node.id) {
+    //     selectedItemId.current = null;
+    //     console.log("Deselected item:", event.node.id);
+    //     selectedObjects.length = 0;
+    //     return;
+    //   }
+    //   selectedItemId.current = event.node.id;
+    //   const itemMesh = sceneRegistry.nodes.get(event.node.id);
+    //   if (!itemMesh) return;
+    //   selectedObjects.push(itemMesh);
 
-    emitter.on("item:click", (event) => {
-      event.stopPropagation();
-      if (Date.now() - itemSelectedAt.current < 50) {
-        return;
-      }
-      itemSelectedAt.current = Date.now();
-      if (selectedItemId.current === event.node.id) {
-        selectedItemId.current = null;
-        console.log("Deselected item:", event.node.id);
-        selectedObjects.length = 0;
-        return;
-      }
-      selectedItemId.current = event.node.id;
-      const itemMesh = sceneRegistry.nodes.get(event.node.id);
-      if (!itemMesh) return;
-      selectedObjects.push(itemMesh);
-
-      console.log("Selected item:", event.node.id);
-    });
+    //   console.log("Selected item:", event.node.id);
+    // });
 
     emitter.on("wall:click", (event) => {
       if (Date.now() - itemSelectedAt.current < 50) {
@@ -294,14 +293,14 @@ const DraftSelector = () => {
       itemMesh.position.set(
         event.position[0],
         event.position[1],
-        event.position[2]
+        event.position[2],
       );
       useScene.getState().dirtyNodes.add(wallNode.id);
       console.log(
         "Wall move event:",
         wallNode.id,
         "Point  position:",
-        event.position
+        event.position,
       );
     });
   }, []);

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

@@ -0,0 +1,108 @@
+import {
+  emitter,
+  GridEvent,
+  ItemNode,
+  sceneRegistry,
+  useRegistry,
+  useScene,
+  WallNode,
+} from "@pascal-app/core";
+import { useViewer } from "@pascal-app/viewer";
+import { useFrame } from "@react-three/fiber";
+import { use, useEffect, useRef } from "react";
+import { Line, Mesh, Vector3 } from "three";
+import { randInt } from "three/src/math/MathUtils.js";
+
+export const ItemTool: React.FC = () => {
+  const cursorRef = useRef<Mesh>(null);
+  const draftItem = useRef<ItemNode | null>(null);
+  const gridPosition = useRef(new Vector3(0, 0, 0));
+
+  useEffect(() => {
+    const createDraftItem = () => {
+      const { currentLevelId } = useViewer.getState();
+      if (!currentLevelId) {
+        return null;
+      }
+      useScene.temporal.getState().pause();
+      draftItem.current = ItemNode.parse({
+        position: [randInt(-10, 10), 0, randInt(-10, 10)],
+        name: "Draft Item",
+        asset: {
+          category: "furniture",
+          src: "/items/couch-small/model.glb",
+          dimensions: [2, 1, 3],
+        },
+      });
+      useScene.getState().createNode(draftItem.current, currentLevelId);
+    };
+    createDraftItem();
+
+    const onGridMove = (event: GridEvent) => {
+      if (!cursorRef.current) return;
+
+      gridPosition.current.set(
+        Math.round(event.position[0] * 2) / 2,
+        0,
+        Math.round(event.position[1] * 2) / 2,
+      );
+      cursorRef.current.position.set(
+        gridPosition.current.x,
+        0.1,
+        gridPosition.current.z,
+      );
+      if (draftItem.current) {
+        draftItem.current.position = [
+          gridPosition.current.x,
+          0,
+          gridPosition.current.z,
+        ];
+      }
+    };
+    const onGridClick = (event: GridEvent) => {
+      const { currentLevelId } = useViewer.getState();
+
+      console.log("oh", currentLevelId, draftItem.current);
+      if (!currentLevelId || !draftItem.current) return;
+
+      console.log("oh");
+      useScene.temporal.getState().resume();
+      useScene.getState().updateNode(draftItem.current.id, {
+        position: [gridPosition.current.x, 0, gridPosition.current.z],
+      });
+      draftItem.current = null;
+
+      useScene.temporal.getState().pause();
+      createDraftItem();
+    };
+
+    emitter.on("grid:move", onGridMove);
+    emitter.on("grid:click", onGridClick);
+
+    return () => {
+      if (draftItem.current) {
+        useScene.getState().deleteNode(draftItem.current.id);
+      }
+      emitter.off("grid:move", onGridMove);
+      emitter.off("grid:click", onGridClick);
+    };
+  }, []);
+
+  useFrame((_, delta) => {
+    if (draftItem.current) {
+      const draftItemMesh = sceneRegistry.nodes.get(draftItem.current.id);
+      if (draftItemMesh) {
+        draftItemMesh.position.lerp(gridPosition.current, delta * 10);
+      }
+    }
+  });
+
+  return (
+    <group>
+      <mesh ref={cursorRef}>
+        <boxGeometry args={[0.2, 0.2, 0.2]} />
+        <meshStandardMaterial color="red" />
+      </mesh>
+    </group>
+  );
+};

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

@@ -1,13 +1,16 @@
 import useEditor, { Phase, Tool } from "@/store/use-editor";
 import { WallTool } from "./wall/wall-tool";
+import { ItemTool } from "./item/item-tool";
 
 const tools: Record<Phase, Partial<Record<Tool, React.FC>>> = {
   site: {
   },
   structure: {
     wall: WallTool,
+    item: ItemTool,
   },
   furnish: {
+    item: ItemTool
   },
 };
 

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

@@ -3,6 +3,18 @@ import { useViewer } from "@pascal-app/viewer";
 import { useEffect, useRef } from "react"
 import { Line, Mesh, Vector3 } from "three";
 
+
+const commitWallDrawing = (start: [number, number], end: [number, number]) => {
+  const { currentLevelId } = useViewer.getState();
+  const { createNode } = useScene.getState();
+  
+  if (!currentLevelId) return;
+
+  const wall = WallNode.parse({ start, end });
+  
+  createNode(wall, currentLevelId);
+};
+
 export const WallTool: React.FC = () => {
 
   const cursorRef = useRef<Mesh>(null);
@@ -42,15 +54,7 @@ export const WallTool: React.FC = () => {
         drawingLineRef.current.visible = true;
 
       } else if (buildingState === 1) {
-        const currentLevelId = useViewer.getState().currentLevelId;
-        console.log('currentLevelId:', currentLevelId);
-        if (currentLevelId) {
-          const wallNode = WallNode.parse({
-            start: [startingPoint.x, startingPoint.z],
-            end: [gridPosition[0], gridPosition[1]],
-          })
-          useScene.getState().createNode(wallNode, currentLevelId);
-        }
+        commitWallDrawing([startingPoint.x, startingPoint.z], [gridPosition[0], gridPosition[1]]);
         drawingLineRef.current.visible = false;
         buildingState = 0;
       }

packages/core/src/store/use-scene.ts

@@ -24,173 +24,278 @@ type SceneState = {
 
   createNode: (node: AnyNode, parentId?: AnyNodeId) => void;
   createNodes: (ops: { node: AnyNode; parentId?: AnyNodeId }[]) => void;
+
+  updateNode: (id: AnyNodeId, data: Partial<AnyNode>) => void;
+  updateNodes: (updates: { id: AnyNodeId; data: Partial<AnyNode> }[]) => void;
+
+  deleteNode: (id: AnyNodeId) => void;
+  deleteNodes: (ids: AnyNodeId[]) => void;
 };
 
-type PartializedStoreState = Pick<SceneState, 'rootNodeIds' | 'nodes'>;
+// type PartializedStoreState = Pick<SceneState, 'rootNodeIds' | 'nodes'>;
 
-const useScene = create<SceneState>()(temporal((set, get) => ({
+const useScene = create<SceneState>()(
+  temporal(
+    (set, get) => ({
+      // 1. Flat dictionary of all nodes
+      nodes: {},
 
-  // 1. Flat dictionary of all nodes
-  nodes: {},
+      // 2. Root node IDs
+      rootNodeIds: [],
 
-  // 2. Root node IDs
-  rootNodeIds: [],
+      // 3. Dirty set
+      dirtyNodes: new Set<AnyNodeId>(),
 
-  // 3. Dirty set
-  dirtyNodes: new Set<AnyNodeId>(),
+      loadScene: () => {
+        const building = BuildingNode.parse({
+          children: [],
+        });
 
-  loadScene: () => {
+        const level0 = LevelNode.parse({
+          level: 0,
+          children: [],
+        });
+        const level1 = LevelNode.parse({
+          level: 1,
+          children: [],
+        });
+        const level2 = LevelNode.parse({
+          level: 2,
+          children: [],
+        });
 
-    const building = BuildingNode.parse({
-        children: [],
-    });
+        const wall0 = WallNode.parse({
+          start: [0, 0],
+          end: [5, 0],
+          children: [],
+        });
 
+        const wall1 = WallNode.parse({
+          start: [0, 0],
+          end: [0, 5],
+          children: [],
+        });
 
-    const level0 = LevelNode.parse({
-      level: 0,
-      children: [],
-    });
-    const level1 = LevelNode.parse({
-      level: 1,
-      children: [],
-    });
-    const level2 = LevelNode.parse({
-      level: 2,
-      children: [],
-    });
+        const wall2 = WallNode.parse({
+          start: [5, 5],
+          end: [0, 5],
+          children: [],
+        });
 
-    const wall0 = WallNode.parse({
-      start: [0, 0],
-      end: [5, 0],
-      children: [],
-    });
+        const wall3 = WallNode.parse({
+          start: [5, 5],
+          end: [5, 0],
+          children: [],
+        });
 
-    const wall1 = WallNode.parse({
-      start: [0, 0],
-      end: [0, 5],
-      children: [],
-    });
+        const window1 = ItemNode.parse({
+          type: "item",
+          name: "Window",
+          position: [2.5, 0.5, 0],
+          asset: {
+            category: "windows",
+            attachTo: "wall",
+            src: "/items/window-round/model.glb",
+          },
+        });
 
-    const wall2 = WallNode.parse({
-      start: [5, 5],
-      end: [0, 5],
-      children: [],
-    });
+        wall0.children.push(window1.id);
 
-    const wall3 = WallNode.parse({
-      start: [5, 5],
-      end: [5, 0],
-      children: [],
-    });
+        level0.children.push(wall0.id, wall1.id, wall2.id, wall3.id);
 
-    const window1 = ItemNode.parse({
-      type: "item",
-      name: "Window",
-      position: [2.5, 0.5, 0],
-      asset: {
-        category: "windows",
-        attachTo: "wall",
-        src: "/items/window-round/model.glb",
+        building.children.push(level0.id, level1.id, level2.id);
+
+        // Define all nodes flat
+        const nodes: Record<AnyNodeId, AnyNode> = {
+          [building.id]: building,
+          [level0.id]: level0,
+          [level1.id]: level1,
+          [level2.id]: level2,
+          [wall0.id]: wall0,
+          [wall1.id]: wall1,
+          [wall2.id]: wall2,
+          [wall3.id]: wall3,
+          [window1.id]: window1,
+        };
+
+        // Root nodes are the levels
+        const rootNodeIds = [building.id];
+
+        get().dirtyNodes.add(wall0.id);
+        get().dirtyNodes.add(wall1.id);
+        get().dirtyNodes.add(wall2.id);
+        get().dirtyNodes.add(wall3.id);
+        set({ nodes, rootNodeIds });
       },
-    });
 
-    wall0.children.push(window1.id);
+      markDirty: (id) => {
+        get().dirtyNodes.add(id);
+      },
 
-    level0.children.push(wall0.id, wall1.id, wall2.id, wall3.id);
+      clearDirty: (id) => {
+        get().dirtyNodes.delete(id);
+      },
 
-    building.children.push(level0.id, level1.id, level2.id);
+      createNodes: (ops) => {
+        set((state) => {
+          const nextNodes = { ...state.nodes };
+          const nextRootIds = [...state.rootNodeIds];
 
-    // Define all nodes flat
-    const nodes: Record<AnyNodeId, AnyNode> = {
-      [building.id]: building,
-      [level0.id]: level0,
-      [level1.id]: level1,
-      [level2.id]: level2,
-      [wall0.id]: wall0,
-      [wall1.id]: wall1,
-      [wall2.id]: wall2,
-      [wall3.id]: wall3,
-      [window1.id]: window1,
-    };
+          for (const { node, parentId } of ops) {
+            // 1. Assign parentId to the child (Safe because BaseNode has parentId)
+            const newNode = {
+              ...node,
+              parentId: parentId ?? null,
+            };
 
-    // Root nodes are the levels
-    const rootNodeIds = [building.id];
+            nextNodes[newNode.id] = newNode;
 
-    get().dirtyNodes.add(wall0.id);
-    get().dirtyNodes.add(wall1.id);
-    get().dirtyNodes.add(wall2.id);
-    get().dirtyNodes.add(wall3.id);
-    set({ nodes, rootNodeIds });
-  },
+            // 2. Update the Parent's children list
+            if (parentId && nextNodes[parentId]) {
+              const parent = nextNodes[parentId];
 
-  markDirty: (id) => {
-    get().dirtyNodes.add(id);
-  },
+              // Type Guard: Check if the parent node is a container that supports children
+              if ("children" in parent && Array.isArray(parent.children)) {
+                nextNodes[parentId] = {
+                  ...parent,
+                  // Use Set to prevent duplicate IDs if createNode is called twice
+                  children: Array.from(
+                    new Set([...parent.children, newNode.id]),
+                  ) as any, // We don't verify child types here
+                };
+              }
+            } else if (!parentId) {
+              // 3. Handle Root nodes
+              if (!nextRootIds.includes(newNode.id)) {
+                nextRootIds.push(newNode.id);
+              }
+            }
+          }
 
-  clearDirty: (id) => {
-    get().dirtyNodes.delete(id);
-  },
+          return { nodes: nextNodes, rootNodeIds: nextRootIds };
+        });
 
-  createNodes: (ops) => {
-  set((state) => {
-    const nextNodes = { ...state.nodes };
-    const nextRootIds = [...state.rootNodeIds];
+        // 4. System Sync
+        ops.forEach(({ node, parentId }) => {
+          get().markDirty(node.id);
+          if (parentId) get().markDirty(parentId);
+        });
+      },
 
-    for (const { node, parentId } of ops) {
-      // 1. Assign parentId to the child (Safe because BaseNode has parentId)
-      const newNode = { 
-        ...node, 
-        parentId: parentId ?? null 
-      };
+      // 3. The CONVENIENCE (Singular)
+      createNode: (node, parentId) => get().createNodes([{ node, parentId }]),
 
-      nextNodes[newNode.id] = newNode;
+      updateNodes: (updates) => {
+        const parentsToUpdate = new Set<string>();
 
-      // 2. Update the Parent's children list
-      if (parentId && nextNodes[parentId]) {
-        const parent = nextNodes[parentId];
+        set((state) => {
+          const nextNodes = { ...state.nodes };
 
-        // Type Guard: Check if the parent node is a container that supports children
-        if ("children" in parent && Array.isArray(parent.children)) {
-          nextNodes[parentId] = {
-            ...parent,
-            // Use Set to prevent duplicate IDs if createNode is called twice
-            children: Array.from(new Set([...parent.children, newNode.id])) as any, // We don't verify child types here
-          };
-        }
-      } else if (!parentId) {
-        // 3. Handle Root nodes
-        if (!nextRootIds.includes(newNode.id)) {
-          nextRootIds.push(newNode.id);
-        }
-      }
-    }
+          for (const { id, data } of updates) {
+            const currentNode = nextNodes[id];
+            if (!currentNode) continue;
 
-    return { nodes: nextNodes, rootNodeIds: nextRootIds };
-  });
+            // Handle Reparenting Logic
+            if (
+              data.parentId !== undefined &&
+              data.parentId !== currentNode.parentId
+            ) {
+              // 1. Remove from old parent
+              if (currentNode.parentId && nextNodes[currentNode.parentId]) {
+                const oldParent = nextNodes[
+                  currentNode.parentId
+                ] as AnyContainerNode;
+                nextNodes[oldParent.id] = {
+                  ...oldParent,
+                  children: oldParent.children.filter(
+                    (childId) => childId !== id,
+                  ),
+                };
+                parentsToUpdate.add(oldParent.id);
+              }
 
-  // 4. System Sync
-  ops.forEach(({ node, parentId }) => {
-    get().markDirty(node.id);
-    if (parentId) get().markDirty(parentId);
-  });
-},
+              // 2. Add to new parent
+              if (data.parentId && nextNodes[data.parentId]) {
+                const newParent = nextNodes[data.parentId] as AnyContainerNode;
+                nextNodes[newParent.id] = {
+                  ...newParent,
+                  children: Array.from(new Set([...newParent.children, id])),
+                };
+                parentsToUpdate.add(newParent.id);
+              }
+            }
 
-  // 3. The CONVENIENCE (Singular)
-  createNode: (node, parentId) => get().createNodes([{ node, parentId }]),
+            // Apply the update
+            nextNodes[id] = { ...nextNodes[id], ...data };
+          }
 
+          return { nodes: nextNodes };
+        });
 
-}), {
-  partialize: (state) => {
-    const { nodes, rootNodeIds } = state; // Only track nodes and rootNodeIds in history
-    return { nodes, rootNodeIds}
-  },
-  limit: 50, // Limit to last 50 actions
-}));
+        // Mark dirty
+        updates.forEach((u) => get().markDirty(u.id));
+        parentsToUpdate.forEach((pId) => get().markDirty(pId));
+      },
+
+      updateNode: (id, data) => get().updateNodes([{ id, data }]),
+
+      // --- DELETE ---
+
+      deleteNodes: (ids) => {
+        const parentsToMarkDirty = new Set<string>();
+
+        set((state) => {
+          const nextNodes = { ...state.nodes };
+          let nextRootIds = [...state.rootNodeIds];
+
+          for (const id of ids) {
+            const node = nextNodes[id];
+            if (!node) continue;
+
+            // 1. Remove reference from Parent
+            if (node.parentId && nextNodes[node.parentId]) {
+              const parent = nextNodes[node.parentId] as AnyContainerNode;
+              if (parent.children) {
+                nextNodes[parent.id] = {
+                  ...parent,
+                  children: parent.children.filter((cid) => cid !== id),
+                };
+                parentsToMarkDirty.add(parent.id);
+              }
+            }
+
+            // 2. Remove from Root list
+            nextRootIds = nextRootIds.filter((rid) => rid !== id);
+
+            // 3. Delete the node itself
+            delete nextNodes[id];
+
+            // Note: If you want "Recursive Delete" (deleting a level deletes its walls),
+            // you would call deleteNodes recursively here for node.children.
+          }
+
+          return { nodes: nextNodes, rootNodeIds: nextRootIds };
+        });
+
+        // Notify systems that the parent has changed (e.g. Wall needs to fill a window hole)
+        parentsToMarkDirty.forEach((pId) => get().markDirty(pId));
+      },
+
+      deleteNode: (id) => get().deleteNodes([id]),
+    }),
+    {
+      partialize: (state) => {
+        const { nodes, rootNodeIds } = state; // Only track nodes and rootNodeIds in history
+        return { nodes, rootNodeIds };
+      },
+      limit: 50, // Limit to last 50 actions
+    },
+  ),
+);
 
 useScene.getState().loadScene();
 export default useScene;
 
-
 // Subscribe to the temporal store (Undo/Redo events)
 useScene.temporal.subscribe((state, prevState) => {
   // Check if we just jumped in time (Undo/Redo)
@@ -198,9 +303,9 @@ useScene.temporal.subscribe((state, prevState) => {
   const currentNodes = useScene.getState().nodes;
 
   // Trigger a full scene re-validation
-  Object.values(currentNodes).forEach(node => {
-    if (node.type === 'wall') {
-       useScene.getState().markDirty(node.id);
+  Object.values(currentNodes).forEach((node) => {
+    if (node.type === "wall") {
+      useScene.getState().markDirty(node.id);
     }
   });
 });

packages/viewer/src/components/renderers/level/level-renderer.tsx

@@ -8,7 +8,6 @@ export const LevelRenderer = ({ node }: { node: LevelNode }) => {
 
   useRegistry(node.id, node.type, ref);
 
-  console.log('rendering level:', node.id, node.children);
   return (
     <group ref={ref}>
       {/* <mesh receiveShadow>