draft wall builder

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";