draft wall builder

packages/core/src/events/bus.ts

@@ -1,5 +1,5 @@
 import mitt from "mitt";
-import { ItemNode, WallNode } from "../schema";
+import { BuildingNode, ItemNode, WallNode } from "../schema";
 import { AnyNode } from "../schema/types";
 
 // Base event interfaces
@@ -16,6 +16,7 @@ export interface NodeEvent<T extends AnyNode = AnyNode> {
 
 export type WallEvent = NodeEvent<WallNode>;
 export type ItemEvent = NodeEvent<ItemNode>;
+export type BuildingEvent = NodeEvent<BuildingNode>;
 
 // Event suffixes - exported for use in hooks
 export const eventSuffixes = [
@@ -41,6 +42,7 @@ type GridEvents = {
 
 type EditorEvents = GridEvents &
   NodeEvents<"wall", WallEvent> &
-  NodeEvents<"item", ItemEvent>;
+  NodeEvents<"item", ItemEvent> &
+  NodeEvents<"building", BuildingEvent>;
 
 export const emitter = mitt<EditorEvents>();

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

@@ -20,6 +20,8 @@ type SceneState = {
   loadScene: () => void;
   markDirty: (id: AnyNodeId) => void;
   clearDirty: (id: AnyNodeId) => void;
+
+  createNode: (node: AnyNode, parentId?: AnyNodeId) => void;
 };
 
 const useScene = create<SceneState>()((set, get) => ({
@@ -123,6 +125,27 @@ const useScene = create<SceneState>()((set, get) => ({
   clearDirty: (id) => {
     get().dirtyNodes.delete(id);
   },
+
+  createNode: (node, parentId) => {
+      set((state) => {
+    const newNodes = { ...state.nodes, [node.id]: node };
+
+    if (parentId) {
+      const parent = state.nodes[parentId];
+      if (parent) {
+        newNodes[parentId] = {
+          ...parent,
+          children: [...parent.children, node.id], 
+        };
+      }
+    }
+
+    return { nodes: newNodes };
+  });
+
+  get().markDirty(node.id);
+  if (parentId) get().markDirty(parentId);
+  }
 }));
 
 useScene.getState().loadScene();

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

@@ -1,18 +1,16 @@
-import { BuildingNode, LevelNode, useRegistry } from "@pascal-app/core";
+import { BuildingNode, useRegistry } from "@pascal-app/core";
 import { useRef } from "react";
 import { Group } from "three";
 import { NodeRenderer } from "../node-renderer";
+import { useNodeEvents } from "../../../hooks/use-node-events";
 
 export const BuildingRenderer = ({ node }: { node: BuildingNode }) => {
   const ref = useRef<Group>(null!);
 
   useRegistry(node.id, node.type, ref);
+  const handlers = useNodeEvents(node, "building");
   return (
-    <group ref={ref}>
-      {/* <mesh receiveShadow>
-        <boxGeometry args={[10, 0.1, 10]} />
-        <meshStandardMaterial color="orange" />
-      </mesh> */}
+    <group ref={ref} {...handlers}>
       {node.children.map((childId) => (
         <NodeRenderer key={childId} nodeId={childId} />
       ))}

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

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

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

@@ -1,6 +1,5 @@
-import { emitter, useRegistry, WallNode } from "@pascal-app/core";
-import { ThreeEvent } from "@react-three/fiber";
-import { useCallback, useRef } from "react";
+import { useRegistry, WallNode } from "@pascal-app/core";
+import { useRef } from "react";
 import { Mesh } from "three";
 import { NodeRenderer } from "../node-renderer";
 import { useNodeEvents } from "../../../hooks/use-node-events";

packages/viewer/src/hooks/use-grid-events.ts

@@ -0,0 +1,33 @@
+import { emitter, EventSuffix, GridEvent } from "@pascal-app/core";
+import { ThreeEvent } from "@react-three/fiber";
+
+export function useGridEvents() {
+  const emit = (suffix: EventSuffix, e: ThreeEvent<PointerEvent>) => {
+    const eventKey = `grid:${suffix}` as `grid:${EventSuffix}`;
+    const payload: GridEvent = {
+      position: [e.point.x, e.point.z],
+    };
+
+    emitter.emit(eventKey, payload);
+  };
+
+  return {
+    onPointerDown: (e: ThreeEvent<PointerEvent>) => {
+      if (e.button !== 0) return;
+      emit("pointerdown", e);
+    },
+    onPointerUp: (e: ThreeEvent<PointerEvent>) => {
+      if (e.button !== 0) return;
+      emit("pointerup", e);
+    },
+    onClick: (e: ThreeEvent<PointerEvent>) => {
+      if (e.button !== 0) return;
+      emit("click", e);
+    },
+    onPointerEnter: (e: ThreeEvent<PointerEvent>) => emit("enter", e),
+    onPointerLeave: (e: ThreeEvent<PointerEvent>) => emit("leave", e),
+    onPointerMove: (e: ThreeEvent<PointerEvent>) => emit("move", e),
+    onDoubleClick: (e: ThreeEvent<PointerEvent>) => emit("double-click", e),
+    onContextMenu: (e: ThreeEvent<PointerEvent>) => emit("context-menu", e),
+  };
+}

packages/viewer/src/hooks/use-node-events.ts

@@ -1,4 +1,5 @@
 import {
+  BuildingNode,
   emitter,
   EventSuffix,
   ItemEvent,
@@ -7,10 +8,12 @@ import {
   WallNode,
 } from "@pascal-app/core";
 import { ThreeEvent } from "@react-three/fiber";
+import { BuildingEvent } from "../../../core/src/events/bus";
 
 type NodeConfig = {
   item: { node: ItemNode; event: ItemEvent };
   wall: { node: WallNode; event: WallEvent };
+  building: { node: BuildingNode; event: BuildingEvent };
 };
 
 type NodeType = keyof NodeConfig;

packages/viewer/src/index.ts

@@ -1,3 +1,7 @@
+import { useGridEvents } from "./hooks/use-grid-events";
+
 export { default as Viewer } from "./components/viewer/viewer";
 
 export { default as useViewer } from "./store/use-viewer";
+
+export { useGridEvents } from "./hooks/use-grid-events";