@pascal-app/editor 0.7.0 → 0.9.1

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

@@ -1,12 +1,70 @@
 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, type Object3D } from 'three'
+import { SCENE_LAYER, useViewer } from '@pascal-app/viewer'
+import { createPortal, type ThreeEvent } from '@react-three/fiber'
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  BufferGeometry,
+  Color,
+  CylinderGeometry,
+  ExtrudeGeometry,
+  Float32BufferAttribute,
+  type Line,
+  type Object3D,
+  Shape,
+} from 'three'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import { sfxEmitter } from '../../../lib/sfx-bus'
+import {
+  createMoveCrossHandleGeometry,
+  ARROW_COLOR as EDGE_ARROW_COLOR,
+  ARROW_HOVER_COLOR as EDGE_ARROW_HOVER_COLOR,
+  ARROW_SCALE as EDGE_ARROW_SCALE,
+  useArrowMaterial,
+  useInvisibleHitAreaMaterial,
+} from '../../editor/node-arrow-handles'
 import { snapToHalf } from '../item/placement-math'
 
 const Y_OFFSET = 0.02
+// Per-side resize arrows: indigo chevrons that match the registry arrow
+// handles (wall / column / fence). Each arrow sits just outside an edge
+// midpoint, pointing along the edge's outward normal — dragging an arrow
+// translates that edge only (its two vertices), leaving the opposite side
+// fixed. Reuses the existing 'edge' drag mode in PolygonEditor.
+const EDGE_ARROW_OFFSET = 0.34
+
+// Disables R3F pointer-picking on a mesh. Used on the visual-only meshes —
+// the edge bar and the border line — so they render without stealing pointer
+// events that belong to the vertex/midpoint handles overlapping them. Mirrors
+// the `NO_RAYCAST` sentinel in node-arrow-handles.tsx.
+const NO_RAYCAST = () => null
+
+function createEdgeArrowGeometry() {
+  const shape = new Shape()
+  shape.moveTo(0.22, 0)
+  shape.lineTo(-0.04, 0.12)
+  shape.lineTo(-0.04, 0.035)
+  shape.lineTo(-0.2, 0.035)
+  shape.lineTo(-0.2, -0.035)
+  shape.lineTo(-0.04, -0.035)
+  shape.lineTo(-0.04, -0.12)
+  shape.lineTo(0.22, 0)
+  const geometry = new ExtrudeGeometry(shape, {
+    depth: 0.045,
+    bevelEnabled: true,
+    bevelThickness: 0.018,
+    bevelSize: 0.02,
+    bevelOffset: 0,
+    bevelSegments: 8,
+    curveSegments: 16,
+    steps: 1,
+  })
+  geometry.translate(0, 0, -0.0225)
+  geometry.rotateX(-Math.PI / 2)
+  geometry.computeVertexNormals()
+  geometry.computeBoundingSphere()
+  return geometry
+}
 
 type DragState = {
   isDragging: boolean
@@ -23,6 +81,14 @@ export interface PolygonEditorProps {
   polygon: Array<[number, number]>
   color?: string
   onPolygonChange: (polygon: Array<[number, number]>) => void
+  /**
+   * Fires on every drag tick with the in-flight polygon, then once with
+   * `null` when the drag commits or is otherwise cleared. Hosts wire
+   * this to `useLiveNodeOverrides` so the underlying mesh rebuilds at
+   * pointer rate while `onPolygonChange` stays a single store commit
+   * on release.
+   */
+  onPolygonPreview?: (polygon: ReadonlyArray<readonly [number, number]> | null) => void
   minVertices?: number
   /** Level ID to mount the editor to. If provided, uses createPortal for automatic level animation following. */
   levelId?: string
@@ -32,6 +98,26 @@ export interface PolygonEditorProps {
   allowPolygonMove?: boolean
   /** Whether polygon edges can be dragged along their perpendicular normal. */
   allowEdgeMove?: boolean
+  /** Called just before a vertex drag session starts. */
+  onBeforeVertexDrag?: (vertexIndex: number, position: [number, number]) => void
+  /** Called when a vertex handle enters or leaves hover. */
+  onVertexHoverChange?: (vertexIndex: number | null) => void
+  /** Called when a midpoint add-vertex handle enters or leaves hover. */
+  onMidpointHoverChange?: (edgeIndex: number | null) => void
+  /** Called when any polygon drag starts or ends. */
+  onDragStateChange?: (isDragging: boolean) => void
+  /** Called once when a polygon drag starts. */
+  onDragStart?: () => void
+  /** Called once when a polygon drag commits on pointer release. */
+  onDragCommit?: () => void
+  /** Whether to render the editor-owned polygon outline. */
+  showBorderLine?: boolean
+  /** Whether midpoint handles can add new vertices. */
+  showMidpointHandles?: boolean
+  /** Optional vertex handle renderer for host-specific affordances. */
+  renderVertexHandle?: PolygonVertexHandleRenderer
+  /** Optional midpoint handle renderer for host-specific add-vertex affordances. */
+  renderMidpointHandle?: PolygonMidpointHandleRenderer
 }
 
 /**
@@ -51,15 +137,200 @@ function getEdgeNormal(start: [number, number], end: [number, number]): [number,
   return [-dz / length, dx / length]
 }
 
+type HandleClickHandler = (event: ThreeEvent<MouseEvent>) => void
+type HandlePointerHandler = (event: ThreeEvent<PointerEvent>) => void
+
+export type PolygonHandleHandlers = {
+  onClick?: HandleClickHandler
+  onDoubleClick?: HandleClickHandler
+  onPointerDown?: HandlePointerHandler
+  onPointerEnter?: HandlePointerHandler
+  onPointerLeave?: HandlePointerHandler
+}
+
+export type PolygonVertexHandleRenderProps = {
+  canDelete: boolean
+  handleProps: PolygonHandleHandlers
+  height: number
+  index: number
+  isDragging: boolean
+  isHovered: boolean
+  point: [number, number]
+  position: [number, number, number]
+  radius: number
+}
+
+export type PolygonVertexHandleRenderer = (props: PolygonVertexHandleRenderProps) => React.ReactNode
+
+export type PolygonMidpointHandleRenderProps = {
+  handleProps: PolygonHandleHandlers
+  height: number
+  index: number
+  isHovered: boolean
+  point: [number, number]
+  position: [number, number, number]
+  radius: number
+}
+
+export type PolygonMidpointHandleRenderer = (
+  props: PolygonMidpointHandleRenderProps,
+) => React.ReactNode
+
+function usePolygonNodeMaterial(color: string, opacity = 1): MeshBasicNodeMaterial {
+  const material = useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color('#ffffff'),
+        depthTest: false,
+        depthWrite: true,
+        opacity: 1,
+        transparent: true,
+      }),
+    [],
+  )
+
+  useEffect(() => {
+    material.color.set(color)
+    material.opacity = opacity
+  }, [color, material, opacity])
+  useEffect(() => () => material.dispose(), [material])
+
+  return material
+}
+
+// One mesh per handle: lives on SCENE_LAYER with a node material so the
+// post-processing ink-edge pass outlines it, and carries the pointer handlers
+// directly so it stays grabbable — matching the registry arrow gizmos in
+// node-arrow-handles.tsx. No paired hit mesh is needed; the R3F event
+// raycaster picks SCENE_LAYER meshes too.
+function OutlinedCylinderHandle({
+  radius,
+  height,
+  color,
+  opacity = 1,
+  position,
+  ...handlers
+}: {
+  radius: number
+  height: number
+  color: string
+  opacity?: number
+  position: [number, number, number]
+} & PolygonHandleHandlers) {
+  const geometry = useMemo(() => new CylinderGeometry(radius, radius, height, 16), [height, radius])
+  const material = usePolygonNodeMaterial(color, opacity)
+  useEffect(() => () => geometry.dispose(), [geometry])
+
+  return (
+    <mesh
+      frustumCulled={false}
+      geometry={geometry}
+      layers={SCENE_LAYER}
+      material={material}
+      position={position}
+      renderOrder={1010}
+      {...handlers}
+    />
+  )
+}
+
+// Whole-polygon move grip — the generic 4-way cross-arrow (matching the node
+// move handles) with an invisible cylinder hit area, replacing the old sphere.
+// The cross sits on SCENE_LAYER (so the ink pass outlines it) while the
+// cylinder hit mesh is on EDITOR_LAYER (grabbable, out of the MRT scene pass).
+function OutlinedCrossHandle({
+  color,
+  position,
+  ...handlers
+}: {
+  color: string
+  position: [number, number, number]
+} & PolygonHandleHandlers) {
+  const geometry = useMemo(() => createMoveCrossHandleGeometry(), [])
+  const material = usePolygonNodeMaterial(color)
+  const hitGeometry = useMemo(() => new CylinderGeometry(0.24, 0.24, 0.18, 24), [])
+  const hitMaterial = useInvisibleHitAreaMaterial()
+  useEffect(() => () => geometry.dispose(), [geometry])
+  useEffect(() => () => hitGeometry.dispose(), [hitGeometry])
+
+  return (
+    <group position={position}>
+      <mesh
+        frustumCulled={false}
+        geometry={geometry}
+        layers={SCENE_LAYER}
+        material={material}
+        raycast={NO_RAYCAST}
+        renderOrder={1010}
+        scale={EDGE_ARROW_SCALE}
+      />
+      <mesh
+        frustumCulled={false}
+        geometry={hitGeometry}
+        layers={EDITOR_LAYER}
+        material={hitMaterial}
+        renderOrder={1011}
+        {...handlers}
+      />
+    </group>
+  )
+}
+
+function OutlinedEdgeArrowHandle({
+  geometry,
+  color,
+  position,
+  rotationY,
+  scale,
+  ...handlers
+}: {
+  geometry: BufferGeometry
+  color: string
+  position: [number, number, number]
+  rotationY: number
+  scale: number
+} & PolygonHandleHandlers) {
+  const material = useArrowMaterial()
+  useEffect(() => {
+    material.color.set(color)
+  }, [color, material])
+  useEffect(() => () => material.dispose(), [material])
+
+  return (
+    <mesh
+      frustumCulled={false}
+      geometry={geometry}
+      layers={SCENE_LAYER}
+      material={material}
+      position={position}
+      renderOrder={1010}
+      rotation={[0, rotationY, 0]}
+      scale={scale}
+      {...handlers}
+    />
+  )
+}
+
 export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   polygon,
   color = '#3b82f6',
   onPolygonChange,
+  onPolygonPreview,
   minVertices = 3,
   levelId,
   surfaceHeight = 0,
   allowPolygonMove = false,
   allowEdgeMove = false,
+  onBeforeVertexDrag,
+  onVertexHoverChange,
+  onMidpointHoverChange,
+  onDragStateChange,
+  onDragStart,
+  onDragCommit,
+  showBorderLine = true,
+  showMidpointHandles = true,
+  renderMidpointHandle,
+  renderVertexHandle,
 }) => {
   const [levelNode, setLevelNode] = useState<Object3D | null>(() =>
     levelId ? (sceneRegistry.nodes.get(levelId) ?? null) : null,
@@ -104,10 +375,36 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   const [dragState, setDragState] = useState<DragState | null>(null)
   const [previewPolygon, setPreviewPolygon] = useState<Array<[number, number]> | null>(null)
   const previewPolygonRef = useRef<Array<[number, number]> | null>(null)
+  const previousInputDraggingRef = useRef(false)
+
+  const onDragStateChangeRef = useRef(onDragStateChange)
+  useEffect(() => {
+    onDragStateChangeRef.current = onDragStateChange
+  }, [onDragStateChange])
+
+  const onDragStartRef = useRef(onDragStart)
+  useEffect(() => {
+    onDragStartRef.current = onDragStart
+  }, [onDragStart])
+
+  const onDragCommitRef = useRef(onDragCommit)
+  useEffect(() => {
+    onDragCommitRef.current = onDragCommit
+  }, [onDragCommit])
+
+  const onPolygonPreviewRef = useRef(onPolygonPreview)
+  useEffect(() => {
+    onPolygonPreviewRef.current = onPolygonPreview
+  }, [onPolygonPreview])
 
   const updatePreviewPolygon = useCallback((nextPolygon: Array<[number, number]> | null) => {
     previewPolygonRef.current = nextPolygon
     setPreviewPolygon(nextPolygon)
+    // Notify the host so it can mirror the in-flight polygon onto
+    // `useLiveNodeOverrides` (drag rebuilds the mesh at pointer rate)
+    // and clear that override when we hand `null` back at commit /
+    // cancel / external-undo time.
+    onPolygonPreviewRef.current?.(nextPolygon)
   }, [])
 
   // Keep ref in sync
@@ -120,18 +417,77 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   const [hoveredEdge, setHoveredEdge] = useState<number | null>(null)
   const [cursorPosition, setCursorPosition] = useState<[number, number]>([0, 0])
 
+  useEffect(() => {
+    onVertexHoverChange?.(hoveredVertex)
+  }, [hoveredVertex, onVertexHoverChange])
+
+  useEffect(() => () => onVertexHoverChange?.(null), [onVertexHoverChange])
+
+  useEffect(() => {
+    onMidpointHoverChange?.(hoveredMidpoint)
+  }, [hoveredMidpoint, onMidpointHoverChange])
+
+  useEffect(() => () => onMidpointHoverChange?.(null), [onMidpointHoverChange])
+
   const lineRef = useRef<Line>(null!)
   const previousPositionRef = useRef<[number, number] | null>(null)
 
-  // Track the last polygon prop to detect external changes (undo/redo)
+  useEffect(() => {
+    onDragStateChangeRef.current?.(dragState?.isDragging ?? false)
+  }, [dragState?.isDragging])
+
+  useEffect(() => () => onDragStateChangeRef.current?.(false), [])
+
+  const startDrag = useCallback((nextDragState: DragState) => {
+    previousInputDraggingRef.current = useViewer.getState().inputDragging
+    useViewer.getState().setInputDragging(true)
+    setDragState(nextDragState)
+    onDragStartRef.current?.()
+  }, [])
+
+  useEffect(() => {
+    if (!dragState?.isDragging) return
+
+    return () => {
+      useViewer.getState().setInputDragging(previousInputDraggingRef.current)
+    }
+  }, [dragState?.isDragging])
+
+  // Track the last polygon prop to detect external changes (undo/redo) or
+  // our own post-commit prop update arriving while a preview is still in
+  // flight. Either way, drop the stale preview/drag.
+  //
+  // This block runs during render, so it may only touch THIS component's
+  // own state (setPreviewPolygon / setDragState — React re-renders in
+  // place, which is the sanctioned "adjust state on prop change" pattern).
+  // The host `onPolygonPreview(null)` notification clears
+  // `useLiveNodeOverrides` — a store OTHER components subscribe to (e.g.
+  // NodeArrowHandles) — so calling it here throws "Cannot update a
+  // component while rendering a different component". Defer it to the
+  // effect below.
   const lastPolygonRef = useRef(polygon)
+  const pendingPreviewClearRef = useRef(false)
   if (polygon !== lastPolygonRef.current) {
     lastPolygonRef.current = polygon
-    // External change (e.g. undo/redo) — clear any stale preview/drag state
-    if (previewPolygon) updatePreviewPolygon(null)
+    // `previewPolygonRef` is the synchronously-updated source of truth for
+    // an in-flight preview (state can lag it by a render).
+    if (previewPolygonRef.current !== null || previewPolygon !== null) {
+      previewPolygonRef.current = null
+      setPreviewPolygon(null)
+      pendingPreviewClearRef.current = true
+    }
     if (dragState) setDragState(null)
   }
 
+  // Flush the deferred host preview-clear (see note above) after the
+  // commit, where writing to other stores is allowed.
+  useEffect(() => {
+    if (pendingPreviewClearRef.current) {
+      pendingPreviewClearRef.current = false
+      onPolygonPreviewRef.current?.(null)
+    }
+  })
+
   // The polygon to display (preview during drag, or actual polygon)
   const displayPolygon = previewPolygon ?? polygon
 
@@ -159,6 +515,15 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   const edgeHandles = useMemo(() => {
     if (displayPolygon.length < 2) return []
 
+    let cx = 0
+    let cz = 0
+    for (const [x, z] of displayPolygon) {
+      cx += x
+      cz += z
+    }
+    cx /= displayPolygon.length
+    cz /= displayPolygon.length
+
     return displayPolygon.flatMap(([x1, z1], index) => {
       const nextIndex = (index + 1) % displayPolygon.length
       const [x2, z2] = displayPolygon[nextIndex]!
@@ -167,17 +532,33 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
       const length = Math.hypot(dx, dz)
       if (length < 1e-6) return []
 
+      const midpoint: [number, number] = [(x1 + x2) / 2, (z1 + z2) / 2]
+      // Outward normal: edge perpendicular flipped to point away from the
+      // polygon centroid. Independent of winding order so arrows always
+      // face outward even on hand-traced (mixed-winding) polygons.
+      let nx = -dz / length
+      let nz = dx / length
+      if (nx * (midpoint[0] - cx) + nz * (midpoint[1] - cz) < 0) {
+        nx = -nx
+        nz = -nz
+      }
+
       return [
         {
           index,
           length,
-          midpoint: [(x1 + x2) / 2, (z1 + z2) / 2] as [number, number],
+          midpoint,
           rotationY: -Math.atan2(dz, dx),
+          outwardNormal: [nx, nz] as [number, number],
+          outwardAngle: -Math.atan2(nz, nx),
         },
       ]
     })
   }, [displayPolygon])
 
+  const arrowGeometry = useMemo(() => createEdgeArrowGeometry(), [])
+  useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
+
   // Update vertex position using grid cursor position
   const handleVertexDrag = useCallback(
     (vertexIndex: number, position: [number, number]) => {
@@ -194,6 +575,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
     if (previewPolygonRef.current) {
       onPolygonChange(previewPolygonRef.current)
     }
+    onDragCommitRef.current?.()
     updatePreviewPolygon(null)
     setDragState(null)
   }, [onPolygonChange, updatePreviewPolygon])
@@ -233,8 +615,9 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   // Listen to grid:move events to track cursor position
   useEffect(() => {
     const onGridMove = (event: GridEvent) => {
-      const gridX = snapToHalf(event.localPosition[0])
-      const gridZ = snapToHalf(event.localPosition[2])
+      const point = levelNode ? event.localPosition : event.position
+      const gridX = snapToHalf(point[0])
+      const gridZ = snapToHalf(point[2])
       const newPosition: [number, number] = [gridX, gridZ]
 
       // Play snap sound when cursor moves to a new grid cell during drag
@@ -290,7 +673,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
     return () => {
       emitter.off('grid:move', onGridMove)
     }
-  }, [dragState, handleVertexDrag, updatePreviewPolygon])
+  }, [dragState, handleVertexDrag, levelNode, updatePreviewPolygon])
 
   // Set up pointer up listener for ending drag
   useEffect(() => {
@@ -335,7 +718,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
 
   // Update line geometry when polygon changes
   useEffect(() => {
-    if (!lineRef.current || displayPolygon.length < 2) return
+    if (!showBorderLine || !lineRef.current || displayPolygon.length < 2) return
 
     const positions: number[] = []
     for (const [x, z] of displayPolygon) {
@@ -350,7 +733,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
 
     lineRef.current.geometry.dispose()
     lineRef.current.geometry = geometry
-  }, [displayPolygon, editY])
+  }, [displayPolygon, editY, showBorderLine])
 
   if (displayPolygon.length < minVertices) return null
 
@@ -358,27 +741,35 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   const handleHeight = Math.max(MIN_HANDLE_HEIGHT, surfaceHeight + 0.02)
   const edgeHandleY = editY + handleHeight - EDGE_HANDLE_HEIGHT / 2
 
+  // Interactive handles are single SCENE_LAYER node-material meshes (like the
+  // registry arrow gizmos) so the ink-edge pass outlines them while they stay
+  // grabbable. The edge BAR and border line stay on EDITOR_LAYER, visual-only
+  // (raycast disabled) so they never steal clicks from the vertex/midpoint
+  // handles overlapping them — edge dragging starts from the chevron arrow
+  // outside the polygon edge.
   const editorContent = (
     <group>
       {/* Border line */}
-      <line
-        frustumCulled={false}
-        layers={EDITOR_LAYER}
-        raycast={() => {}}
-        // @ts-expect-error R3F <line> element conflicts with SVG <line> type
-        ref={lineRef}
-        renderOrder={10}
-      >
-        <bufferGeometry />
-        <lineBasicNodeMaterial
-          color={color}
-          depthTest={false}
-          depthWrite={false}
-          linewidth={2}
-          opacity={0.8}
-          transparent
-        />
-      </line>
+      {showBorderLine && (
+        <line
+          frustumCulled={false}
+          layers={EDITOR_LAYER}
+          raycast={NO_RAYCAST}
+          // @ts-expect-error R3F <line> element conflicts with SVG <line> type
+          ref={lineRef}
+          renderOrder={10}
+        >
+          <bufferGeometry />
+          <lineBasicNodeMaterial
+            color={color}
+            depthTest={false}
+            depthWrite={false}
+            linewidth={2}
+            opacity={0.8}
+            transparent
+          />
+        </line>
+      )}
 
       {/* Vertex handles - blue cylinders that match surface height */}
       {displayPolygon.map(([x, z], index) => {
@@ -386,58 +777,77 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
         const isDragging = dragState?.mode === 'vertex' && dragState.vertexIndex === index
         const radius = 0.1
         const height = handleHeight
+        const point: [number, number] = [x!, z!]
+        const position: [number, number, number] = [x!, editY + height / 2, z!]
+        const handleProps: PolygonHandleHandlers = {
+          onClick: (e) => {
+            if (e.button !== 0) return
+            e.stopPropagation()
+          },
+          onDoubleClick: (e) => {
+            if (e.button !== 0) return
+            e.stopPropagation()
+            if (canDelete) {
+              handleDeleteVertex(index)
+            }
+          },
+          onPointerDown: (e) => {
+            if (e.button !== 0) return
+            e.stopPropagation()
+            setHoveredEdge(null)
+            onBeforeVertexDrag?.(index, point)
+            startDrag({
+              isDragging: true,
+              mode: 'vertex',
+              vertexIndex: index,
+              initialPosition: [x!, z!],
+              initialPolygon: displayPolygon.map(([px, pz]) => [px, pz] as [number, number]),
+              pointerId: e.pointerId,
+            })
+          },
+          onPointerEnter: (e) => {
+            e.stopPropagation()
+            setHoveredVertex(index)
+          },
+          onPointerLeave: (e) => {
+            e.stopPropagation()
+            setHoveredVertex(null)
+          },
+        }
+
+        if (renderVertexHandle) {
+          return (
+            <Fragment key={`vertex-${index}`}>
+              {renderVertexHandle({
+                canDelete,
+                handleProps,
+                height,
+                index,
+                isDragging,
+                isHovered,
+                point,
+                position,
+                radius,
+              })}
+            </Fragment>
+          )
+        }
 
         return (
-          <mesh
-            castShadow
+          <OutlinedCylinderHandle
+            color={isDragging || isHovered ? EDGE_ARROW_HOVER_COLOR : EDGE_ARROW_COLOR}
+            height={height}
             key={`vertex-${index}`}
-            layers={EDITOR_LAYER}
-            onClick={(e) => {
-              if (e.button !== 0) return
-              e.stopPropagation()
-            }}
-            onDoubleClick={(e) => {
-              if (e.button !== 0) return
-              e.stopPropagation()
-              if (canDelete) {
-                handleDeleteVertex(index)
-              }
-            }}
-            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,
-              })
-            }}
-            onPointerEnter={(e) => {
-              e.stopPropagation()
-              setHoveredVertex(index)
-            }}
-            onPointerLeave={(e) => {
-              e.stopPropagation()
-              setHoveredVertex(null)
-            }}
-            position={[x!, editY + height / 2, z!]}
-          >
-            <cylinderGeometry args={[radius, radius, height, 16]} />
-            <meshStandardMaterial
-              color={isDragging ? '#22c55e' : isHovered ? '#60a5fa' : '#3b82f6'}
-            />
-          </mesh>
+            {...handleProps}
+            position={position}
+            radius={radius}
+          />
         )
       })}
 
       {allowPolygonMove && (
-        <mesh
-          castShadow
-          layers={EDITOR_LAYER}
+        <OutlinedCrossHandle
+          color={dragState?.mode === 'polygon' ? EDGE_ARROW_HOVER_COLOR : EDGE_ARROW_COLOR}
           onClick={(e) => {
             if (e.button !== 0) return
             e.stopPropagation()
@@ -446,7 +856,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
             if (e.button !== 0) return
             e.stopPropagation()
             setHoveredEdge(null)
-            setDragState({
+            startDrag({
               isDragging: true,
               mode: 'polygon',
               vertexIndex: null,
@@ -456,116 +866,156 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
             })
           }}
           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 }) => {
+        edgeHandles.map(({ index, length, midpoint, rotationY, outwardNormal, outwardAngle }) => {
           const isHovered = hoveredEdge === index
           const isDragging = dragState?.mode === 'edge' && dragState.edgeIndex === index
+          const arrowX = midpoint[0] + outwardNormal[0] * EDGE_ARROW_OFFSET
+          const arrowZ = midpoint[1] + outwardNormal[1] * EDGE_ARROW_OFFSET
+
+          const beginEdgeDrag = (e: { button: number; pointerId: number }) => {
+            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)
+            startDrag({
+              isDragging: true,
+              mode: 'edge',
+              vertexIndex: null,
+              edgeIndex: index,
+              edgeNormal,
+              initialPosition: cursorPosition,
+              initialPolygon: displayPolygon.map(([px, pz]) => [px, pz] as [number, number]),
+              pointerId: e.pointerId,
+            })
+          }
 
           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
+            <group key={`edge-${index}`}>
+              {/* Edge bar — VISUAL ONLY (raycast disabled). It runs the full
+                  length of the edge and overlaps the vertex/midpoint handles at
+                  its ends + centre, so making it pickable let edges steal those
+                  clicks. Edge dragging runs through the chevron arrow below,
+                  which sits outside the polygon and never overlaps a
+                  vertex/midpoint handle. */}
+              <mesh
+                layers={EDITOR_LAYER}
+                position={[midpoint[0], edgeHandleY, midpoint[1]]}
+                raycast={NO_RAYCAST}
+                rotation={[0, rotationY, 0]}
+              >
+                <boxGeometry args={[length, EDGE_HANDLE_HEIGHT, EDGE_HANDLE_THICKNESS]} />
+                <meshBasicMaterial
+                  color={isDragging ? EDGE_ARROW_HOVER_COLOR : EDGE_ARROW_COLOR}
+                  opacity={isDragging ? 0.5 : isHovered ? 0.38 : 0.14}
+                  transparent
+                />
+              </mesh>
+              {/* Per-side resize arrow — the interactive edge-drag handle.
+                  Points outward from the edge; dragging it translates only this
+                  edge's two vertices along the outward normal. */}
+              <OutlinedEdgeArrowHandle
+                color={isDragging || isHovered ? EDGE_ARROW_HOVER_COLOR : EDGE_ARROW_COLOR}
+                geometry={arrowGeometry}
+                onClick={(e) => {
+                  if (e.button !== 0) return
+                  e.stopPropagation()
+                }}
+                onPointerDown={(e) => {
+                  if (e.button !== 0) return
+                  e.stopPropagation()
+                  beginEdgeDrag(e)
+                }}
+                onPointerEnter={(e) => {
+                  e.stopPropagation()
+                  setHoveredEdge(index)
+                }}
+                onPointerLeave={(e) => {
+                  e.stopPropagation()
+                  setHoveredEdge(null)
+                }}
+                position={[arrowX, edgeHandleY, arrowZ]}
+                rotationY={outwardAngle}
+                scale={EDGE_ARROW_SCALE}
               />
-            </mesh>
+            </group>
           )
         })}
 
       {/* Midpoint handles - smaller green cylinders for adding vertices (hidden while dragging) */}
-      {!dragState &&
+      {showMidpointHandles &&
+        !dragState &&
         midpoints.map(([x, z], index) => {
           const isHovered = hoveredMidpoint === index
           const radius = 0.06
           const height = handleHeight
+          const point: [number, number] = [x!, z!]
+          const position: [number, number, number] = [x!, editY + height / 2, z!]
+          const handleProps: PolygonHandleHandlers = {
+            onClick: (e) => {
+              if (e.button !== 0) return
+              e.stopPropagation()
+            },
+            onPointerDown: (e) => {
+              if (e.button !== 0) return
+              e.stopPropagation()
+              onBeforeVertexDrag?.(index + 1, point)
+              const insertedVertex = handleAddVertex(index, point)
+              if (insertedVertex.vertexIndex >= 0) {
+                startDrag({
+                  isDragging: true,
+                  mode: 'vertex',
+                  vertexIndex: insertedVertex.vertexIndex,
+                  initialPosition: point,
+                  initialPolygon: insertedVertex.polygon,
+                  pointerId: e.pointerId,
+                })
+                setHoveredMidpoint(null)
+              }
+            },
+            onPointerEnter: (e) => {
+              e.stopPropagation()
+              setHoveredMidpoint(index)
+            },
+            onPointerLeave: (e) => {
+              e.stopPropagation()
+              setHoveredMidpoint(null)
+            },
+          }
+
+          if (renderMidpointHandle) {
+            return (
+              <Fragment key={`midpoint-${index}`}>
+                {renderMidpointHandle({
+                  handleProps,
+                  height,
+                  index,
+                  isHovered,
+                  point,
+                  position,
+                  radius,
+                })}
+              </Fragment>
+            )
+          }
 
           return (
-            <mesh
+            <OutlinedCylinderHandle
+              color={isHovered ? EDGE_ARROW_HOVER_COLOR : EDGE_ARROW_COLOR}
+              height={height}
               key={`midpoint-${index}`}
-              layers={EDITOR_LAYER}
-              onClick={(e) => {
-                if (e.button !== 0) return
-                e.stopPropagation()
-              }}
-              onPointerDown={(e) => {
-                if (e.button !== 0) return
-                e.stopPropagation()
-                const insertedVertex = handleAddVertex(index, [x!, z!])
-                if (insertedVertex.vertexIndex >= 0) {
-                  setDragState({
-                    isDragging: true,
-                    mode: 'vertex',
-                    vertexIndex: insertedVertex.vertexIndex,
-                    initialPosition: [x!, z!],
-                    initialPolygon: insertedVertex.polygon,
-                    pointerId: e.pointerId,
-                  })
-                  setHoveredMidpoint(null)
-                }
-              }}
-              onPointerEnter={(e) => {
-                e.stopPropagation()
-                setHoveredMidpoint(index)
-              }}
-              onPointerLeave={(e) => {
-                e.stopPropagation()
-                setHoveredMidpoint(null)
-              }}
-              position={[x!, editY + height / 2, z!]}
-            >
-              <cylinderGeometry args={[radius, radius, height, 16]} />
-              <meshStandardMaterial
-                color={isHovered ? '#4ade80' : '#22c55e'}
-                opacity={isHovered ? 1 : 0.7}
-                transparent
-              />
-            </mesh>
+              {...handleProps}
+              opacity={isHovered ? 1 : 0.7}
+              position={position}
+              radius={radius}
+            />
           )
         })}
     </group>