zone editor

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

@@ -1,6 +1,8 @@
 import useEditor, { type Phase, type Tool } from "@/store/use-editor";
+import { useViewer } from "@pascal-app/viewer";
 import { ItemTool } from "./item/item-tool";
 import { WallTool } from "./wall/wall-tool";
+import { ZoneBoundaryEditor } from "./zone/zone-boundary-editor";
 import { ZoneTool } from "./zone/zone-tool";
 
 const tools: Record<Phase, Partial<Record<Tool, React.FC>>> = {
@@ -19,10 +21,21 @@ export const ToolManager: React.FC = () => {
   const phase = useEditor((state) => state.phase);
   const mode = useEditor((state) => state.mode);
   const tool = useEditor((state) => state.tool);
+  const selectedZoneId = useViewer((state) => state.selection.zoneId);
 
-  if (mode !== "build" || tool === null) return null;
+  // Show zone boundary editor when in structure/select mode with a zone selected
+  const showZoneBoundaryEditor =
+    phase === "structure" && mode === "select" && selectedZoneId !== null;
 
-  const Component = tools[phase]?.[tool];
+  // Show build tools when in build mode
+  const showBuildTool = mode === "build" && tool !== null;
 
-  return Component ? <Component /> : null;
+  const BuildToolComponent = showBuildTool ? tools[phase]?.[tool] : null;
+
+  return (
+    <>
+      {showZoneBoundaryEditor && <ZoneBoundaryEditor />}
+      {BuildToolComponent && <BuildToolComponent />}
+    </>
+  );
 };

apps/editor/components/tools/zone/zone-boundary-editor.tsx

@@ -0,0 +1,292 @@
+import { emitter, type GridEvent, useScene } from "@pascal-app/core";
+import { useViewer } from "@pascal-app/viewer";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  BufferGeometry,
+  Float32BufferAttribute,
+  type Mesh,
+  Plane,
+  Raycaster,
+  Vector2,
+  Vector3,
+} from "three";
+import { useThree } from "@react-three/fiber";
+
+const Y_OFFSET = 0.02;
+
+type DragState = {
+  isDragging: boolean;
+  vertexIndex: number;
+  initialPosition: [number, number];
+};
+
+/**
+ * Zone boundary editor - allows editing zone polygon vertices when a zone is selected
+ * Uses the event emitter system for grid interactions
+ */
+export const ZoneBoundaryEditor: React.FC = () => {
+  const { gl, camera } = useThree();
+  const selectedZoneId = useViewer((state) => state.selection.zoneId);
+  const zone = useScene((state) =>
+    selectedZoneId ? state.zones[selectedZoneId] : null
+  );
+  const updateZone = useScene((state) => state.updateZone);
+
+  // Local state for dragging
+  const [dragState, setDragState] = useState<DragState | null>(null);
+  const [previewPolygon, setPreviewPolygon] = useState<
+    Array<[number, number]> | null
+  >(null);
+  const [hoveredVertex, setHoveredVertex] = useState<number | null>(null);
+  const [hoveredMidpoint, setHoveredMidpoint] = useState<number | null>(null);
+
+  // Refs for raycasting during drag
+  const dragPlane = useRef(new Plane(new Vector3(0, 1, 0), -Y_OFFSET));
+  const raycaster = useRef(new Raycaster());
+  const lineRef = useRef<Mesh>(null!);
+
+  // The polygon to display (preview during drag, or actual zone polygon)
+  const displayPolygon = previewPolygon ?? zone?.polygon ?? [];
+
+  // Calculate midpoints for adding new vertices
+  const midpoints = useMemo(() => {
+    if (displayPolygon.length < 2) return [];
+    return displayPolygon.map(([x1, z1], index) => {
+      const nextIndex = (index + 1) % displayPolygon.length;
+      const [x2, z2] = displayPolygon[nextIndex]!;
+      return [(x1! + x2) / 2, (z1! + z2) / 2] as [number, number];
+    });
+  }, [displayPolygon]);
+
+  // Handle vertex drag
+  const handleVertexDrag = useCallback(
+    (clientX: number, clientY: number, vertexIndex: number) => {
+      if (!zone) return;
+
+      const canvas = gl.domElement;
+      const rect = canvas.getBoundingClientRect();
+      const x = ((clientX - rect.left) / rect.width) * 2 - 1;
+      const y = -((clientY - rect.top) / rect.height) * 2 + 1;
+
+      raycaster.current.setFromCamera(new Vector2(x, y), camera);
+      const intersection = new Vector3();
+      raycaster.current.ray.intersectPlane(dragPlane.current, intersection);
+
+      if (intersection) {
+        // Snap to 0.5 grid
+        const gridX = Math.round(intersection.x * 2) / 2;
+        const gridZ = Math.round(intersection.z * 2) / 2;
+
+        const basePolygon = previewPolygon ?? zone.polygon;
+        const newPolygon = [...basePolygon];
+        newPolygon[vertexIndex] = [gridX, gridZ];
+        setPreviewPolygon(newPolygon);
+      }
+    },
+    [zone, gl, camera, previewPolygon]
+  );
+
+  // Commit polygon changes
+  const commitPolygonChange = useCallback(() => {
+    if (previewPolygon && selectedZoneId) {
+      updateZone(selectedZoneId, { polygon: previewPolygon });
+    }
+    setPreviewPolygon(null);
+    setDragState(null);
+  }, [previewPolygon, selectedZoneId, updateZone]);
+
+  // Handle adding a new vertex at midpoint
+  const handleAddVertex = useCallback(
+    (afterIndex: number, position: [number, number]) => {
+      if (!zone) return -1;
+
+      const basePolygon = previewPolygon ?? zone.polygon;
+      const newPolygon = [
+        ...basePolygon.slice(0, afterIndex + 1),
+        position,
+        ...basePolygon.slice(afterIndex + 1),
+      ];
+
+      setPreviewPolygon(newPolygon);
+      return afterIndex + 1; // Return new vertex index
+    },
+    [zone, previewPolygon]
+  );
+
+  // Handle deleting a vertex
+  const handleDeleteVertex = useCallback(
+    (index: number) => {
+      if (!zone || !selectedZoneId) return;
+
+      const basePolygon = previewPolygon ?? zone.polygon;
+      if (basePolygon.length <= 3) return; // Need at least 3 points
+
+      const newPolygon = basePolygon.filter((_, i) => i !== index);
+      updateZone(selectedZoneId, { polygon: newPolygon });
+      setPreviewPolygon(null);
+    },
+    [zone, selectedZoneId, previewPolygon, updateZone]
+  );
+
+  // Set up pointer move/up listeners for dragging
+  useEffect(() => {
+    if (!dragState?.isDragging) return;
+
+    const canvas = gl.domElement;
+
+    const handlePointerMove = (e: PointerEvent) => {
+      handleVertexDrag(e.clientX, e.clientY, dragState.vertexIndex);
+    };
+
+    const handlePointerUp = () => {
+      commitPolygonChange();
+    };
+
+    canvas.addEventListener("pointermove", handlePointerMove);
+    canvas.addEventListener("pointerup", handlePointerUp);
+
+    return () => {
+      canvas.removeEventListener("pointermove", handlePointerMove);
+      canvas.removeEventListener("pointerup", handlePointerUp);
+    };
+  }, [dragState, gl, handleVertexDrag, commitPolygonChange]);
+
+  // Update line geometry when polygon changes
+  useEffect(() => {
+    if (!lineRef.current || displayPolygon.length < 2) return;
+
+    const positions: number[] = [];
+    for (const [x, z] of displayPolygon) {
+      positions.push(x!, Y_OFFSET + 0.01, z!);
+    }
+    // Close the loop
+    const first = displayPolygon[0]!;
+    positions.push(first[0]!, Y_OFFSET + 0.01, first[1]!);
+
+    const geometry = new BufferGeometry();
+    geometry.setAttribute(
+      "position",
+      new Float32BufferAttribute(positions, 3)
+    );
+
+    lineRef.current.geometry.dispose();
+    lineRef.current.geometry = geometry;
+  }, [displayPolygon]);
+
+  if (!zone || displayPolygon.length < 3) return null;
+
+  const canDelete = displayPolygon.length > 3;
+  const zoneColor = zone.color || "#3b82f6";
+
+  return (
+    <group>
+      {/* Border line */}
+      {/* @ts-ignore */}
+      <line ref={lineRef} frustumCulled={false} renderOrder={10}>
+        <bufferGeometry />
+        <lineBasicNodeMaterial
+          color={zoneColor}
+          linewidth={2}
+          depthTest={false}
+          depthWrite={false}
+          transparent
+          opacity={0.8}
+        />
+      </line>
+
+      {/* Vertex handles */}
+      {displayPolygon.map(([x, z], index) => {
+        const isHovered = hoveredVertex === index;
+        const isDragging = dragState?.vertexIndex === index;
+
+        return (
+          <mesh
+            key={`vertex-${index}`}
+            position={[x!, Y_OFFSET, z!]}
+            onPointerEnter={(e) => {
+              e.stopPropagation();
+              setHoveredVertex(index);
+            }}
+            onPointerLeave={(e) => {
+              e.stopPropagation();
+              setHoveredVertex(null);
+            }}
+            onPointerDown={(e) => {
+              e.stopPropagation();
+              setDragState({
+                isDragging: true,
+                vertexIndex: index,
+                initialPosition: [x!, z!],
+              });
+            }}
+            onDoubleClick={(e) => {
+              e.stopPropagation();
+              if (canDelete) {
+                handleDeleteVertex(index);
+              }
+            }}
+          >
+            <sphereGeometry
+              args={[isHovered || isDragging ? 0.2 : 0.15, 16, 16]}
+            />
+            <meshBasicMaterial
+              color={
+                isDragging
+                  ? "#22c55e"
+                  : isHovered
+                    ? canDelete
+                      ? "#ef4444"
+                      : "#ffffff"
+                    : zoneColor
+              }
+              depthTest={false}
+              depthWrite={false}
+            />
+          </mesh>
+        );
+      })}
+
+      {/* Midpoint handles for adding vertices (hidden while dragging) */}
+      {!dragState &&
+        midpoints.map(([x, z], index) => {
+          const isHovered = hoveredMidpoint === index;
+
+          return (
+            <mesh
+              key={`midpoint-${index}`}
+              position={[x!, Y_OFFSET, z!]}
+              onPointerEnter={(e) => {
+                e.stopPropagation();
+                setHoveredMidpoint(index);
+              }}
+              onPointerLeave={(e) => {
+                e.stopPropagation();
+                setHoveredMidpoint(null);
+              }}
+              onPointerDown={(e) => {
+                e.stopPropagation();
+                const newVertexIndex = handleAddVertex(index, [x!, z!]);
+                if (newVertexIndex >= 0) {
+                  setDragState({
+                    isDragging: true,
+                    vertexIndex: newVertexIndex,
+                    initialPosition: [x!, z!],
+                  });
+                  setHoveredMidpoint(null);
+                }
+              }}
+            >
+              <sphereGeometry args={[isHovered ? 0.12 : 0.08, 16, 16]} />
+              <meshBasicMaterial
+                color={isHovered ? "#22c55e" : zoneColor}
+                depthTest={false}
+                depthWrite={false}
+                transparent
+                opacity={isHovered ? 1 : 0.4}
+              />
+            </mesh>
+          );
+        })}
+    </group>
+  );
+};

packages/core/src/events/bus.ts

@@ -2,6 +2,7 @@ import type { ThreeEvent } from "@react-three/fiber";
 import mitt from "mitt";
 import type { BuildingNode, ItemNode, WallNode } from "../schema";
 import type { AnyNode } from "../schema/types";
+import type { Zone } from "../schema/zone";
 
 // Base event interfaces
 export interface GridEvent {
@@ -18,6 +19,13 @@ export interface NodeEvent<T extends AnyNode = AnyNode> {
   nativeEvent: ThreeEvent<PointerEvent>;
 }
 
+export interface ZoneEvent {
+  zone: Zone;
+  position: [number, number, number];
+  stopPropagation: () => void;
+  nativeEvent: ThreeEvent<PointerEvent>;
+}
+
 export type WallEvent = NodeEvent<WallNode>;
 export type ItemEvent = NodeEvent<ItemNode>;
 export type BuildingEvent = NodeEvent<BuildingNode>;
@@ -52,10 +60,15 @@ type CameraControlEvents = {
   "camera-controls:view": CameraControlEvent;
   "camera-controls:capture": CameraControlEvent;
 };
+type ZoneEvents = {
+  [K in `zone:${EventSuffix}`]: ZoneEvent;
+};
+
 type EditorEvents = GridEvents &
   NodeEvents<"wall", WallEvent> &
   NodeEvents<"item", ItemEvent> &
   NodeEvents<"building", BuildingEvent> &
+  ZoneEvents &
   CameraControlEvents;
 
 export const emitter = mitt<EditorEvents>();

packages/core/src/index.ts

@@ -7,6 +7,7 @@ export type {
   ItemEvent,
   NodeEvent,
   WallEvent,
+  ZoneEvent,
 } from './events/bus'
 // Events
 export { emitter, eventSuffixes } from './events/bus'

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

@@ -1,6 +1,7 @@
-import { useRegistry, useScene, type Zone } from "@pascal-app/core";
+import { emitter, useRegistry, useScene, type Zone } from "@pascal-app/core";
 
-import { useMemo, useRef } from "react";
+import type { ThreeEvent } from "@react-three/fiber";
+import { useCallback, useMemo, useRef } from "react";
 import {
   BufferGeometry,
   Color,
@@ -162,8 +163,26 @@ export const ZoneRenderer = ({ zoneId }: { zoneId: Zone["id"] }) => {
     return null;
   }
 
+  const emitZoneEvent = useCallback(
+    (suffix: string, e: ThreeEvent<PointerEvent>) => {
+      const eventKey = `zone:${suffix}` as `zone:${typeof suffix}`;
+      emitter.emit(eventKey, {
+        zone,
+        position: [e.point.x, e.point.y, e.point.z],
+        stopPropagation: () => e.stopPropagation(),
+        nativeEvent: e,
+      });
+    },
+    [zone]
+  );
+
   return (
-    <group ref={ref}>
+    <group
+      ref={ref}
+      onClick={(e) => emitZoneEvent("click", e)}
+      onPointerEnter={(e) => emitZoneEvent("enter", e)}
+      onPointerLeave={(e) => emitZoneEvent("leave", e)}
+    >
       {/* Floor fill */}
       <mesh
         position={[0, Y_OFFSET, 0]}

packages/viewer/src/store/use-viewer.ts

@@ -25,8 +25,8 @@ type Outliner = {
 
 type ViewerState = {
   selection: SelectionPath;
-  hoveredId: AnyNode["id"] | null;
-  setHoveredId: (id: AnyNode["id"] | null) => void;
+  hoveredId: AnyNode["id"] | Zone["id"] | null;
+  setHoveredId: (id: AnyNode["id"] | Zone["id"] | null) => void;
 
   cameraMode: "perspective" | "orthographic";
   setCameraMode: (mode: "perspective" | "orthographic") => void;