@pascal-app/editor 0.5.1 → 0.7.0

package/src/components/tools/roof/move-roof-tool.tsx

@@ -1,7 +1,9 @@
 import {
   type AnyNodeId,
   emitter,
+  type FenceNode,
   type GridEvent,
+  type LevelNode,
   type RoofNode,
   type RoofSegmentNode,
   type StairNode,
@@ -9,13 +11,17 @@ import {
   sceneRegistry,
   useLiveTransforms,
   useScene,
+  type WallNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import * as THREE from 'three'
+import { clearRoofDuplicateMetadata } from '../../../lib/roof-duplication'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
+import { snapFenceDraftPoint } from '../fence/fence-drafting'
 import { CursorSphere } from '../shared/cursor-sphere'
+import type { WallPlanPoint } from '../wall/wall-drafting'
 
 export const MoveRoofTool: React.FC<{
   node: RoofNode | RoofSegmentNode | StairNode | StairSegmentNode
@@ -29,9 +35,13 @@ export const MoveRoofTool: React.FC<{
   const [cursorWorldPos, setCursorWorldPos] = useState<[number, number, number]>(() => {
     const obj = sceneRegistry.nodes.get(movingNode.id)
     if (obj) {
-      const pos = new THREE.Vector3()
-      obj.getWorldPosition(pos)
-      return [pos.x, pos.y, pos.z]
+      const worldPos = obj.getWorldPosition(new THREE.Vector3())
+      // Cursor renders inside the building-local ToolManager group, so convert
+      // world → building-local to honor any building rotation.
+      const buildingId = useViewer.getState().selection.buildingId
+      const buildingObj = buildingId ? sceneRegistry.nodes.get(buildingId as AnyNodeId) : null
+      if (buildingObj) buildingObj.worldToLocal(worldPos)
+      return [worldPos.x, worldPos.y, worldPos.z]
     }
     // Fallback if not registered (e.g. newly created duplicate without mesh yet)
     if (
@@ -91,6 +101,7 @@ export const MoveRoofTool: React.FC<{
     // resetting the mesh position (it resets on dirty) and from triggering
     // expensive merged-mesh CSG rebuilds on every frame.
     let wasCommitted = false
+    let wasCancelled = false
 
     // Track pending rotation — no store updates during drag
     let pendingRotation: number = movingNode.rotation as number
@@ -114,10 +125,55 @@ export const MoveRoofTool: React.FC<{
       }
     }
 
-    const computeLocal = (gridX: number, gridZ: number, y: number): [number, number] => {
-      let localX = gridX
-      let localZ = gridZ
+    const resolveLevelId = () => {
+      if (movingNode.type === 'roof' || movingNode.type === 'stair') {
+        return movingNode.parentId ?? null
+      }
 
+      if (
+        (movingNode.type === 'roof-segment' || movingNode.type === 'stair-segment') &&
+        movingNode.parentId
+      ) {
+        const parentNode = useScene.getState().nodes[movingNode.parentId as AnyNodeId]
+        return parentNode && 'parentId' in parentNode ? (parentNode.parentId ?? null) : null
+      }
+
+      return null
+    }
+
+    const levelId = resolveLevelId()
+    const levelNode =
+      levelId && useScene.getState().nodes[levelId as AnyNodeId]?.type === 'level'
+        ? (useScene.getState().nodes[levelId as AnyNodeId] as LevelNode)
+        : null
+    const levelChildren = levelNode?.children ?? []
+    const levelWalls = levelChildren
+      .map((childId) => useScene.getState().nodes[childId as AnyNodeId])
+      .filter((node): node is WallNode => node?.type === 'wall')
+    const levelFences = levelChildren
+      .map((childId) => useScene.getState().nodes[childId as AnyNodeId])
+      .filter((node): node is FenceNode => node?.type === 'fence')
+    const buildingId = useViewer.getState().selection.buildingId
+    const buildingObj = buildingId ? sceneRegistry.nodes.get(buildingId as AnyNodeId) : null
+
+    const localToWorldPoint = (localPoint: WallPlanPoint, y: number): [number, number, number] => {
+      if (buildingObj) {
+        const worldPoint = buildingObj.localToWorld(new THREE.Vector3(localPoint[0], y, localPoint[1]))
+        return [worldPoint.x, worldPoint.y, worldPoint.z]
+      }
+
+      return [localPoint[0], y, localPoint[1]]
+    }
+
+    const computeLocal = (
+      gridX: number,
+      gridZ: number,
+      y: number,
+      buildingLocalX: number,
+      buildingLocalZ: number,
+    ): [number, number] => {
+      // Segments have a transformed parent (stair/roof). Convert world → parent-local
+      // via Three.js hierarchy so the segment's stored position stays parent-relative.
       if (
         (movingNode.type === 'roof-segment' || movingNode.type === 'stair-segment') &&
         movingNode.parentId
@@ -128,40 +184,42 @@ export const MoveRoofTool: React.FC<{
           if (parentObj) {
             const worldVec = new THREE.Vector3(gridX, y, gridZ)
             parentObj.worldToLocal(worldVec)
-            localX = worldVec.x
-            localZ = worldVec.z
-          } else {
-            const dx = gridX - (parentNode.position[0] as number)
-            const dz = gridZ - (parentNode.position[2] as number)
-            const angle = -(parentNode.rotation as number)
-            localX = dx * Math.cos(angle) - dz * Math.sin(angle)
-            localZ = dx * Math.sin(angle) + dz * Math.cos(angle)
+            return [worldVec.x, worldVec.z]
           }
+          const dx = gridX - (parentNode.position[0] as number)
+          const dz = gridZ - (parentNode.position[2] as number)
+          const angle = -(parentNode.rotation as number)
+          return [
+            dx * Math.cos(angle) - dz * Math.sin(angle),
+            dx * Math.sin(angle) + dz * Math.cos(angle),
+          ]
         }
       }
 
-      return [localX, localZ]
+      // Stair/roof live directly in the level — their stored position is building-local.
+      // event.localPosition is already building-local, so using it handles building rotation.
+      return [buildingLocalX, buildingLocalZ]
     }
 
     const onGridMove = (event: GridEvent) => {
-      const gridX = Math.round(event.position[0] * 2) / 2
-      const gridZ = Math.round(event.position[2] * 2) / 2
       const y = event.position[1]
 
-      if (
-        previousGridPosRef.current &&
-        (gridX !== previousGridPosRef.current[0] || gridZ !== previousGridPosRef.current[1])
-      ) {
+      const snappedLocal = snapFenceDraftPoint({
+        point: [event.localPosition[0], event.localPosition[2]],
+        walls: levelWalls,
+        fences: levelFences,
+      })
+      const [gridX, , gridZ] = localToWorldPoint(snappedLocal, y)
+
+      if (previousGridPosRef.current && (gridX !== previousGridPosRef.current[0] || gridZ !== previousGridPosRef.current[1])) {
         sfxEmitter.emit('sfx:grid-snap')
       }
 
       previousGridPosRef.current = [gridX, gridZ]
-      // Cursor is inside the building-local ToolManager group — use local position
-      const lx = Math.round(event.localPosition[0] * 2) / 2
-      const lz = Math.round(event.localPosition[2] * 2) / 2
+      const [lx, lz] = snappedLocal
       setCursorWorldPos([lx, event.localPosition[1], lz])
 
-      const [localX, localZ] = computeLocal(gridX, gridZ, y)
+      const [localX, localZ] = computeLocal(gridX, gridZ, y, lx, lz)
 
       // Directly update the Three.js mesh — no store update during drag
       const mesh = sceneRegistry.nodes.get(movingNode.id)
@@ -178,11 +236,16 @@ export const MoveRoofTool: React.FC<{
     }
 
     const onGridClick = (event: GridEvent) => {
-      const gridX = Math.round(event.position[0] * 2) / 2 // world, for computeLocal
-      const gridZ = Math.round(event.position[2] * 2) / 2
       const y = event.position[1]
+      const snappedLocal = snapFenceDraftPoint({
+        point: [event.localPosition[0], event.localPosition[2]],
+        walls: levelWalls,
+        fences: levelFences,
+      })
+      const [gridX, , gridZ] = localToWorldPoint(snappedLocal, y)
+      const [lx, lz] = snappedLocal
 
-      const [localX, localZ] = computeLocal(gridX, gridZ, y)
+      const [localX, localZ] = computeLocal(gridX, gridZ, y, lx, lz)
 
       wasCommitted = true
 
@@ -190,11 +253,19 @@ export const MoveRoofTool: React.FC<{
       // Resume temporal and apply the final state as a single undoable step.
       useScene.temporal.getState().resume()
 
-      useScene.getState().updateNode(movingNode.id, {
-        position: [localX, movingNode.position[1], localZ],
-        rotation: pendingRotation,
-        metadata: committedMeta,
-      })
+      if (isNew && movingNode.type === 'roof') {
+        clearRoofDuplicateMetadata(movingNode.id as AnyNodeId, {
+          position: [localX, movingNode.position[1], localZ],
+          rotation: pendingRotation,
+          metadata: committedMeta,
+        })
+      } else {
+        useScene.getState().updateNode(movingNode.id, {
+          position: [localX, movingNode.position[1], localZ],
+          rotation: pendingRotation,
+          metadata: committedMeta,
+        })
+      }
 
       useScene.temporal.getState().pause()
 
@@ -206,6 +277,7 @@ export const MoveRoofTool: React.FC<{
     }
 
     const onCancel = () => {
+      wasCancelled = true
       useLiveTransforms.getState().clear(movingNode.id)
       if (isNew) {
         useScene.getState().deleteNode(movingNode.id)
@@ -264,16 +336,12 @@ export const MoveRoofTool: React.FC<{
       // Clear ephemeral live transform
       useLiveTransforms.getState().clear(movingNode.id)
 
-      if (!wasCommitted) {
-        if (isNew) {
-          useScene.getState().deleteNode(movingNode.id)
-        } else {
-          useScene.getState().updateNode(movingNode.id, {
-            position: original.position,
-            rotation: original.rotation,
-            metadata: original.metadata,
-          })
-        }
+      if (!(wasCommitted || wasCancelled || isNew)) {
+        useScene.getState().updateNode(movingNode.id, {
+          position: original.position,
+          rotation: original.rotation,
+          metadata: original.metadata,
+        })
       }
       useScene.temporal.getState().resume()
       emitter.off('grid:move', onGridMove)

package/src/components/tools/shared/polygon-editor.tsx

@@ -1,16 +1,21 @@
 import { emitter, type GridEvent, sceneRegistry } from '@pascal-app/core'
 import { createPortal } from '@react-three/fiber'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { BufferGeometry, Float32BufferAttribute, type Line } from 'three'
+import { BufferGeometry, Float32BufferAttribute, type Line, type Object3D } from 'three'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import { sfxEmitter } from '../../../lib/sfx-bus'
+import { snapToHalf } from '../item/placement-math'
 
 const Y_OFFSET = 0.02
 
 type DragState = {
   isDragging: boolean
-  vertexIndex: number
+  mode: 'vertex' | 'polygon' | 'edge'
+  vertexIndex: number | null
+  edgeIndex?: number
+  edgeNormal?: [number, number]
   initialPosition: [number, number]
+  initialPolygon: Array<[number, number]>
   pointerId: number
 }
 
@@ -23,6 +28,10 @@ export interface PolygonEditorProps {
   levelId?: string
   /** Height of the surface being edited (e.g. slab elevation). Handles adapt to this. */
   surfaceHeight?: number
+  /** Whether to show the center handle that moves the entire polygon. */
+  allowPolygonMove?: boolean
+  /** Whether polygon edges can be dragged along their perpendicular normal. */
+  allowEdgeMove?: boolean
 }
 
 /**
@@ -30,6 +39,17 @@ export interface PolygonEditorProps {
  * Used by zone and site boundary editors
  */
 const MIN_HANDLE_HEIGHT = 0.15
+const EDGE_HANDLE_HEIGHT = 0.06
+const EDGE_HANDLE_THICKNESS = 0.12
+
+function getEdgeNormal(start: [number, number], end: [number, number]): [number, number] | null {
+  const dx = end[0] - start[0]
+  const dz = end[1] - start[1]
+  const length = Math.hypot(dx, dz)
+  if (length < 1e-6) return null
+
+  return [-dz / length, dx / length]
+}
 
 export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   polygon,
@@ -38,9 +58,43 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   minVertices = 3,
   levelId,
   surfaceHeight = 0,
+  allowPolygonMove = false,
+  allowEdgeMove = false,
 }) => {
-  // Get level node from registry if levelId is provided
-  const levelNode = levelId ? sceneRegistry.nodes.get(levelId) : null
+  const [levelNode, setLevelNode] = useState<Object3D | null>(() =>
+    levelId ? (sceneRegistry.nodes.get(levelId) ?? null) : null,
+  )
+
+  useEffect(() => {
+    if (!levelId) {
+      setLevelNode(null)
+      return
+    }
+
+    let frameId = 0
+
+    const resolveLevelNode = () => {
+      const nextLevelNode = sceneRegistry.nodes.get(levelId) ?? null
+      setLevelNode((currentLevelNode) => {
+        if (currentLevelNode === nextLevelNode) {
+          return currentLevelNode
+        }
+        return nextLevelNode
+      })
+
+      if (!nextLevelNode) {
+        frameId = window.requestAnimationFrame(resolveLevelNode)
+      }
+    }
+
+    resolveLevelNode()
+
+    return () => {
+      if (frameId) {
+        window.cancelAnimationFrame(frameId)
+      }
+    }
+  }, [levelId])
 
   // When using portal, edit at Y_OFFSET (local to level)
   // When not using portal, edit at world origin
@@ -51,6 +105,11 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   const [previewPolygon, setPreviewPolygon] = useState<Array<[number, number]> | null>(null)
   const previewPolygonRef = useRef<Array<[number, number]> | null>(null)
 
+  const updatePreviewPolygon = useCallback((nextPolygon: Array<[number, number]> | null) => {
+    previewPolygonRef.current = nextPolygon
+    setPreviewPolygon(nextPolygon)
+  }, [])
+
   // Keep ref in sync
   useEffect(() => {
     previewPolygonRef.current = previewPolygon
@@ -58,6 +117,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
 
   const [hoveredVertex, setHoveredVertex] = useState<number | null>(null)
   const [hoveredMidpoint, setHoveredMidpoint] = useState<number | null>(null)
+  const [hoveredEdge, setHoveredEdge] = useState<number | null>(null)
   const [cursorPosition, setCursorPosition] = useState<[number, number]>([0, 0])
 
   const lineRef = useRef<Line>(null!)
@@ -68,13 +128,24 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   if (polygon !== lastPolygonRef.current) {
     lastPolygonRef.current = polygon
     // External change (e.g. undo/redo) — clear any stale preview/drag state
-    if (previewPolygon) setPreviewPolygon(null)
+    if (previewPolygon) updatePreviewPolygon(null)
     if (dragState) setDragState(null)
   }
 
   // The polygon to display (preview during drag, or actual polygon)
   const displayPolygon = previewPolygon ?? polygon
 
+  const polygonCenter = useMemo(() => {
+    if (displayPolygon.length === 0) return [0, 0] as [number, number]
+    let sumX = 0
+    let sumZ = 0
+    for (const [x, z] of displayPolygon) {
+      sumX += x
+      sumZ += z
+    }
+    return [sumX / displayPolygon.length, sumZ / displayPolygon.length] as [number, number]
+  }, [displayPolygon])
+
   // Calculate midpoints for adding new vertices
   const midpoints = useMemo(() => {
     if (displayPolygon.length < 2) return []
@@ -85,17 +156,37 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
     })
   }, [displayPolygon])
 
+  const edgeHandles = useMemo(() => {
+    if (displayPolygon.length < 2) return []
+
+    return displayPolygon.flatMap(([x1, z1], index) => {
+      const nextIndex = (index + 1) % displayPolygon.length
+      const [x2, z2] = displayPolygon[nextIndex]!
+      const dx = x2 - x1
+      const dz = z2 - z1
+      const length = Math.hypot(dx, dz)
+      if (length < 1e-6) return []
+
+      return [
+        {
+          index,
+          length,
+          midpoint: [(x1 + x2) / 2, (z1 + z2) / 2] as [number, number],
+          rotationY: -Math.atan2(dz, dx),
+        },
+      ]
+    })
+  }, [displayPolygon])
+
   // Update vertex position using grid cursor position
   const handleVertexDrag = useCallback(
     (vertexIndex: number, position: [number, number]) => {
-      setPreviewPolygon((prev) => {
-        const basePolygon = prev ?? polygon
-        const newPolygon = [...basePolygon]
-        newPolygon[vertexIndex] = position
-        return newPolygon
-      })
+      const basePolygon = previewPolygonRef.current ?? polygon
+      const newPolygon = [...basePolygon]
+      newPolygon[vertexIndex] = position
+      updatePreviewPolygon(newPolygon)
     },
-    [polygon],
+    [polygon, updatePreviewPolygon],
   )
 
   // Commit polygon changes
@@ -103,9 +194,9 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
     if (previewPolygonRef.current) {
       onPolygonChange(previewPolygonRef.current)
     }
-    setPreviewPolygon(null)
+    updatePreviewPolygon(null)
     setDragState(null)
-  }, [onPolygonChange])
+  }, [onPolygonChange, updatePreviewPolygon])
 
   // Handle adding a new vertex at midpoint
   const handleAddVertex = useCallback(
@@ -117,10 +208,13 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
         ...basePolygon.slice(afterIndex + 1),
       ]
 
-      setPreviewPolygon(newPolygon)
-      return afterIndex + 1 // Return new vertex index
+      updatePreviewPolygon(newPolygon)
+      return {
+        polygon: newPolygon,
+        vertexIndex: afterIndex + 1,
+      }
     },
-    [polygon, previewPolygon],
+    [polygon, previewPolygon, updatePreviewPolygon],
   )
 
   // Handle deleting a vertex
@@ -131,16 +225,16 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
 
       const newPolygon = basePolygon.filter((_, i) => i !== index)
       onPolygonChange(newPolygon)
-      setPreviewPolygon(null)
+      updatePreviewPolygon(null)
     },
-    [polygon, previewPolygon, onPolygonChange, minVertices],
+    [polygon, previewPolygon, onPolygonChange, minVertices, updatePreviewPolygon],
   )
 
   // Listen to grid:move events to track cursor position
   useEffect(() => {
     const onGridMove = (event: GridEvent) => {
-      const gridX = Math.round(event.localPosition[0] * 2) / 2
-      const gridZ = Math.round(event.localPosition[2] * 2) / 2
+      const gridX = snapToHalf(event.localPosition[0])
+      const gridZ = snapToHalf(event.localPosition[2])
       const newPosition: [number, number] = [gridX, gridZ]
 
       // Play snap sound when cursor moves to a new grid cell during drag
@@ -158,7 +252,37 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
 
       // Update vertex position during drag
       if (dragState?.isDragging) {
-        handleVertexDrag(dragState.vertexIndex, newPosition)
+        if (dragState.mode === 'vertex' && dragState.vertexIndex !== null) {
+          handleVertexDrag(dragState.vertexIndex, newPosition)
+        } else if (dragState.mode === 'polygon') {
+          const deltaX = newPosition[0] - dragState.initialPosition[0]
+          const deltaZ = newPosition[1] - dragState.initialPosition[1]
+          updatePreviewPolygon(
+            dragState.initialPolygon.map(([x, z]) => [x + deltaX, z + deltaZ] as [number, number]),
+          )
+        } else if (
+          dragState.mode === 'edge' &&
+          dragState.edgeIndex !== undefined &&
+          dragState.edgeNormal
+        ) {
+          const [normalX, normalZ] = dragState.edgeNormal
+          const pointerDeltaX = newPosition[0] - dragState.initialPosition[0]
+          const pointerDeltaZ = newPosition[1] - dragState.initialPosition[1]
+          const normalDistance = pointerDeltaX * normalX + pointerDeltaZ * normalZ
+          const edgeStartIndex = dragState.edgeIndex
+          const edgeEndIndex = (edgeStartIndex + 1) % dragState.initialPolygon.length
+          const nextPolygon = dragState.initialPolygon.map((point, index) => {
+            if (index !== edgeStartIndex && index !== edgeEndIndex) {
+              return point
+            }
+
+            return [point[0] + normalX * normalDistance, point[1] + normalZ * normalDistance] as [
+              number,
+              number,
+            ]
+          })
+          updatePreviewPolygon(nextPolygon)
+        }
       }
     }
 
@@ -166,7 +290,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
     return () => {
       emitter.off('grid:move', onGridMove)
     }
-  }, [dragState, handleVertexDrag])
+  }, [dragState, handleVertexDrag, updatePreviewPolygon])
 
   // Set up pointer up listener for ending drag
   useEffect(() => {
@@ -231,6 +355,8 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   if (displayPolygon.length < minVertices) return null
 
   const canDelete = displayPolygon.length > minVertices
+  const handleHeight = Math.max(MIN_HANDLE_HEIGHT, surfaceHeight + 0.02)
+  const edgeHandleY = editY + handleHeight - EDGE_HANDLE_HEIGHT / 2
 
   const editorContent = (
     <group>
@@ -257,9 +383,9 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
       {/* Vertex handles - blue cylinders that match surface height */}
       {displayPolygon.map(([x, z], index) => {
         const isHovered = hoveredVertex === index
-        const isDragging = dragState?.vertexIndex === index
+        const isDragging = dragState?.mode === 'vertex' && dragState.vertexIndex === index
         const radius = 0.1
-        const height = Math.max(MIN_HANDLE_HEIGHT, surfaceHeight + 0.02)
+        const height = handleHeight
 
         return (
           <mesh
@@ -280,10 +406,13 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
             onPointerDown={(e) => {
               if (e.button !== 0) return
               e.stopPropagation()
+              setHoveredEdge(null)
               setDragState({
                 isDragging: true,
+                mode: 'vertex',
                 vertexIndex: index,
                 initialPosition: [x!, z!],
+                initialPolygon: displayPolygon.map(([px, pz]) => [px, pz] as [number, number]),
                 pointerId: e.pointerId,
               })
             }}
@@ -305,12 +434,96 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
         )
       })}
 
+      {allowPolygonMove && (
+        <mesh
+          castShadow
+          layers={EDITOR_LAYER}
+          onClick={(e) => {
+            if (e.button !== 0) return
+            e.stopPropagation()
+          }}
+          onPointerDown={(e) => {
+            if (e.button !== 0) return
+            e.stopPropagation()
+            setHoveredEdge(null)
+            setDragState({
+              isDragging: true,
+              mode: 'polygon',
+              vertexIndex: null,
+              initialPosition: polygonCenter,
+              initialPolygon: displayPolygon.map(([px, pz]) => [px, pz] as [number, number]),
+              pointerId: e.pointerId,
+            })
+          }}
+          position={[polygonCenter[0], editY + handleHeight + 0.08, polygonCenter[1]]}
+        >
+          <sphereGeometry args={[0.09, 20, 20]} />
+          <meshStandardMaterial color={dragState?.mode === 'polygon' ? '#22c55e' : '#f59e0b'} />
+        </mesh>
+      )}
+
+      {allowEdgeMove &&
+        edgeHandles.map(({ index, length, midpoint, rotationY }) => {
+          const isHovered = hoveredEdge === index
+          const isDragging = dragState?.mode === 'edge' && dragState.edgeIndex === index
+
+          return (
+            <mesh
+              key={`edge-${index}`}
+              layers={EDITOR_LAYER}
+              onClick={(e) => {
+                if (e.button !== 0) return
+                e.stopPropagation()
+              }}
+              onPointerDown={(e) => {
+                if (e.button !== 0) return
+                e.stopPropagation()
+                const start = displayPolygon[index]
+                const end = displayPolygon[(index + 1) % displayPolygon.length]
+                if (!(start && end)) return
+
+                const edgeNormal = getEdgeNormal(start, end)
+                if (!edgeNormal) return
+
+                setHoveredEdge(null)
+                setDragState({
+                  isDragging: true,
+                  mode: 'edge',
+                  vertexIndex: null,
+                  edgeIndex: index,
+                  edgeNormal,
+                  initialPosition: cursorPosition,
+                  initialPolygon: displayPolygon.map(([px, pz]) => [px, pz] as [number, number]),
+                  pointerId: e.pointerId,
+                })
+              }}
+              onPointerEnter={(e) => {
+                e.stopPropagation()
+                setHoveredEdge(index)
+              }}
+              onPointerLeave={(e) => {
+                e.stopPropagation()
+                setHoveredEdge(null)
+              }}
+              position={[midpoint[0], edgeHandleY, midpoint[1]]}
+              rotation={[0, rotationY, 0]}
+            >
+              <boxGeometry args={[length, EDGE_HANDLE_HEIGHT, EDGE_HANDLE_THICKNESS]} />
+              <meshStandardMaterial
+                color={isDragging ? '#22c55e' : '#94a3b8'}
+                opacity={isDragging ? 0.5 : isHovered ? 0.38 : 0.14}
+                transparent
+              />
+            </mesh>
+          )
+        })}
+
       {/* Midpoint handles - smaller green cylinders for adding vertices (hidden while dragging) */}
       {!dragState &&
         midpoints.map(([x, z], index) => {
           const isHovered = hoveredMidpoint === index
           const radius = 0.06
-          const height = Math.max(MIN_HANDLE_HEIGHT, surfaceHeight + 0.02)
+          const height = handleHeight
 
           return (
             <mesh
@@ -323,12 +536,14 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
               onPointerDown={(e) => {
                 if (e.button !== 0) return
                 e.stopPropagation()
-                const newVertexIndex = handleAddVertex(index, [x!, z!])
-                if (newVertexIndex >= 0) {
+                const insertedVertex = handleAddVertex(index, [x!, z!])
+                if (insertedVertex.vertexIndex >= 0) {
                   setDragState({
                     isDragging: true,
-                    vertexIndex: newVertexIndex,
+                    mode: 'vertex',
+                    vertexIndex: insertedVertex.vertexIndex,
                     initialPosition: [x!, z!],
+                    initialPolygon: insertedVertex.polygon,
                     pointerId: e.pointerId,
                   })
                   setHoveredMidpoint(null)