@pascal-app/editor 0.9.1 → 1.0.0-beta.1

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

@@ -1,16 +1,19 @@
 import { emitter, type GridEvent, sceneRegistry } from '@pascal-app/core'
 import { SCENE_LAYER, useViewer } from '@pascal-app/viewer'
-import { createPortal, type ThreeEvent } from '@react-three/fiber'
+import { createPortal, type ThreeEvent, useThree } from '@react-three/fiber'
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
+  BoxGeometry,
   BufferGeometry,
   Color,
   CylinderGeometry,
+  DoubleSide,
   ExtrudeGeometry,
   Float32BufferAttribute,
   type Line,
   type Object3D,
   Shape,
+  Vector3,
 } from 'three'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { EDITOR_LAYER } from '../../../lib/constants'
@@ -20,10 +23,10 @@ import {
   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'
+import { suppressBoxSelectForPointer } from '../select/box-select-state'
 
 const Y_OFFSET = 0.02
 // Per-side resize arrows: indigo chevrons that match the registry arrow
@@ -39,6 +42,19 @@ const EDGE_ARROW_OFFSET = 0.34
 // the `NO_RAYCAST` sentinel in node-arrow-handles.tsx.
 const NO_RAYCAST = () => null
 
+// Maps the screen-space direction of an edge's outward normal to the closest
+// directional resize cursor, so an edge arrow advertises the axis it will
+// actually drag along regardless of camera orbit. Input is an NDC delta
+// (y up); the angle is folded to [0°, 180°) since resize cursors are
+// bidirectional.
+function resizeCursorForScreenDirection(dx: number, dy: number): string {
+  const angle = ((((Math.atan2(dy, dx) * 180) / Math.PI) % 180) + 180) % 180
+  if (angle < 22.5 || angle >= 157.5) return 'ew-resize'
+  if (angle < 67.5) return 'nesw-resize'
+  if (angle < 112.5) return 'ns-resize'
+  return 'nwse-resize'
+}
+
 function createEdgeArrowGeometry() {
   const shape = new Shape()
   shape.moveTo(0.22, 0)
@@ -77,6 +93,17 @@ type DragState = {
   pointerId: number
 }
 
+export type PolygonEditorPlanPointSnapContext = {
+  rawPoint: [number, number]
+  gridPoint: [number, number]
+  mode: DragState['mode']
+  vertexIndex: number | null
+  edgeIndex?: number
+  initialPosition: [number, number]
+  initialPolygon: Array<[number, number]>
+  nativeEvent?: GridEvent['nativeEvent']
+}
+
 export interface PolygonEditorProps {
   polygon: Array<[number, number]>
   color?: string
@@ -104,6 +131,8 @@ export interface PolygonEditorProps {
   onVertexHoverChange?: (vertexIndex: number | null) => void
   /** Called when a midpoint add-vertex handle enters or leaves hover. */
   onMidpointHoverChange?: (edgeIndex: number | null) => void
+  /** Called when an edge move handle enters or leaves hover. */
+  onEdgeHoverChange?: (edgeIndex: number | null) => void
   /** Called when any polygon drag starts or ends. */
   onDragStateChange?: (isDragging: boolean) => void
   /** Called once when a polygon drag starts. */
@@ -114,6 +143,10 @@ export interface PolygonEditorProps {
   showBorderLine?: boolean
   /** Whether midpoint handles can add new vertices. */
   showMidpointHandles?: boolean
+  /** Whether hovering a handle should also tint its connected edges and endpoint handles. */
+  highlightConnectedHandles?: boolean
+  /** Optional host-owned point snapper. Defaults to the existing half-grid snap. */
+  resolvePlanPoint?: (context: PolygonEditorPlanPointSnapContext) => [number, number]
   /** Optional vertex handle renderer for host-specific affordances. */
   renderVertexHandle?: PolygonVertexHandleRenderer
   /** Optional midpoint handle renderer for host-specific add-vertex affordances. */
@@ -127,6 +160,7 @@ export interface PolygonEditorProps {
 const MIN_HANDLE_HEIGHT = 0.15
 const EDGE_HANDLE_HEIGHT = 0.06
 const EDGE_HANDLE_THICKNESS = 0.12
+const EDGE_HANDLE_GEOMETRY = new BoxGeometry(1, 1, 1)
 
 function getEdgeNormal(start: [number, number], end: [number, number]): [number, number] | null {
   const dx = end[0] - start[0]
@@ -137,6 +171,11 @@ function getEdgeNormal(start: [number, number], end: [number, number]): [number,
   return [-dz / length, dx / length]
 }
 
+function stopHandlePointerDown(event: ThreeEvent<PointerEvent>) {
+  event.stopPropagation()
+  suppressBoxSelectForPointer(event, { markHandled: false })
+}
+
 type HandleClickHandler = (event: ThreeEvent<MouseEvent>) => void
 type HandlePointerHandler = (event: ThreeEvent<PointerEvent>) => void
 
@@ -176,12 +215,16 @@ export type PolygonMidpointHandleRenderer = (
   props: PolygonMidpointHandleRenderProps,
 ) => React.ReactNode
 
-function usePolygonNodeMaterial(color: string, opacity = 1): MeshBasicNodeMaterial {
+function usePolygonNodeMaterial(
+  color: string,
+  opacity = 1,
+  depthTest = true,
+): MeshBasicNodeMaterial {
   const material = useMemo(
     () =>
       new MeshBasicNodeMaterial({
         color: new Color('#ffffff'),
-        depthTest: false,
+        depthTest: true,
         depthWrite: true,
         opacity: 1,
         transparent: true,
@@ -192,17 +235,31 @@ function usePolygonNodeMaterial(color: string, opacity = 1): MeshBasicNodeMateri
   useEffect(() => {
     material.color.set(color)
     material.opacity = opacity
-  }, [color, material, opacity])
+    material.depthTest = depthTest
+  }, [color, depthTest, material, opacity])
   useEffect(() => () => material.dispose(), [material])
 
   return material
 }
 
+function usePolygonArrowMaterial(): MeshBasicNodeMaterial {
+  return useMemo(
+    () =>
+      new MeshBasicNodeMaterial({
+        color: new Color(EDGE_ARROW_COLOR),
+        depthTest: false,
+        depthWrite: true,
+        opacity: 1,
+        side: DoubleSide,
+        transparent: true,
+      }),
+    [],
+  )
+}
+
 // 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.
+// post-processing ink-edge pass outlines it. Ignores scene depth like the
+// edge arrows so the handle stays visible through walls and slabs.
 function OutlinedCylinderHandle({
   radius,
   height,
@@ -218,7 +275,7 @@ function OutlinedCylinderHandle({
   position: [number, number, number]
 } & PolygonHandleHandlers) {
   const geometry = useMemo(() => new CylinderGeometry(radius, radius, height, 16), [height, radius])
-  const material = usePolygonNodeMaterial(color, opacity)
+  const material = usePolygonNodeMaterial(color, opacity, false)
   useEffect(() => () => geometry.dispose(), [geometry])
 
   return (
@@ -290,7 +347,7 @@ function OutlinedEdgeArrowHandle({
   rotationY: number
   scale: number
 } & PolygonHandleHandlers) {
-  const material = useArrowMaterial()
+  const material = usePolygonArrowMaterial()
   useEffect(() => {
     material.color.set(color)
   }, [color, material])
@@ -311,6 +368,47 @@ function OutlinedEdgeArrowHandle({
   )
 }
 
+function HighlightedEdgeSegment({
+  end,
+  start,
+  y,
+}: {
+  end: [number, number]
+  start: [number, number]
+  y: number
+}) {
+  const geometry = useMemo(() => {
+    const nextGeometry = new BufferGeometry()
+    nextGeometry.setAttribute(
+      'position',
+      new Float32BufferAttribute([start[0], y, start[1], end[0], y, end[1]], 3),
+    )
+    return nextGeometry
+  }, [end, start, y])
+
+  useEffect(() => () => geometry.dispose(), [geometry])
+
+  return (
+    <line
+      // @ts-expect-error R3F <line> element conflicts with SVG <line> type
+      frustumCulled={false}
+      geometry={geometry}
+      layers={EDITOR_LAYER}
+      raycast={NO_RAYCAST}
+      renderOrder={12}
+    >
+      <lineBasicNodeMaterial
+        color={EDGE_ARROW_HOVER_COLOR}
+        depthTest
+        depthWrite={false}
+        linewidth={4}
+        opacity={0.95}
+        transparent
+      />
+    </line>
+  )
+}
+
 export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   polygon,
   color = '#3b82f6',
@@ -324,11 +422,14 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   onBeforeVertexDrag,
   onVertexHoverChange,
   onMidpointHoverChange,
+  onEdgeHoverChange,
   onDragStateChange,
   onDragStart,
   onDragCommit,
   showBorderLine = true,
   showMidpointHandles = true,
+  highlightConnectedHandles = false,
+  resolvePlanPoint,
   renderMidpointHandle,
   renderVertexHandle,
 }) => {
@@ -371,6 +472,39 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   // When not using portal, edit at world origin
   const editY = levelNode ? Y_OFFSET : 0
 
+  const camera = useThree((state) => state.camera)
+
+  // Handle-hover cursor, applied to document.body like the registry arrow
+  // handles (see handle-arrow.tsx). Tracked in a ref so we only ever clear a
+  // cursor we set ourselves.
+  const activeBodyCursorRef = useRef<string | null>(null)
+  const setBodyCursor = useCallback((cursor: string) => {
+    activeBodyCursorRef.current = cursor
+    document.body.style.cursor = cursor
+  }, [])
+  const clearBodyCursor = useCallback(() => {
+    if (activeBodyCursorRef.current && document.body.style.cursor === activeBodyCursorRef.current) {
+      document.body.style.cursor = ''
+    }
+    activeBodyCursorRef.current = null
+  }, [])
+  useEffect(() => () => clearBodyCursor(), [clearBodyCursor])
+
+  const edgeResizeCursor = useCallback(
+    (midpoint: [number, number], outwardNormal: [number, number]) => {
+      const from = new Vector3(midpoint[0], editY, midpoint[1])
+      const to = new Vector3(midpoint[0] + outwardNormal[0], editY, midpoint[1] + outwardNormal[1])
+      if (levelNode) {
+        levelNode.localToWorld(from)
+        levelNode.localToWorld(to)
+      }
+      from.project(camera)
+      to.project(camera)
+      return resizeCursorForScreenDirection(to.x - from.x, to.y - from.y)
+    },
+    [camera, editY, levelNode],
+  )
+
   // Local state for dragging
   const [dragState, setDragState] = useState<DragState | null>(null)
   const [previewPolygon, setPreviewPolygon] = useState<Array<[number, number]> | null>(null)
@@ -429,6 +563,12 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
 
   useEffect(() => () => onMidpointHoverChange?.(null), [onMidpointHoverChange])
 
+  useEffect(() => {
+    onEdgeHoverChange?.(hoveredEdge)
+  }, [hoveredEdge, onEdgeHoverChange])
+
+  useEffect(() => () => onEdgeHoverChange?.(null), [onEdgeHoverChange])
+
   const lineRef = useRef<Line>(null!)
   const previousPositionRef = useRef<[number, number] | null>(null)
 
@@ -556,6 +696,47 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
     })
   }, [displayPolygon])
 
+  const activeVertexIndex = dragState?.mode === 'vertex' ? dragState.vertexIndex : hoveredVertex
+  const activeEdgeIndex = dragState?.mode === 'edge' ? dragState.edgeIndex : hoveredEdge
+
+  const highlightedEdgeIndices = useMemo(() => {
+    const next = new Set<number>()
+    const edgeCount = displayPolygon.length
+    if (!highlightConnectedHandles || edgeCount < 2) return next
+
+    if (activeVertexIndex !== null && activeVertexIndex !== undefined) {
+      next.add(activeVertexIndex)
+      next.add((activeVertexIndex - 1 + edgeCount) % edgeCount)
+    }
+    if (hoveredMidpoint !== null) {
+      next.add(hoveredMidpoint)
+    }
+    if (activeEdgeIndex !== null && activeEdgeIndex !== undefined) {
+      next.add(activeEdgeIndex)
+    }
+
+    return next
+  }, [
+    activeEdgeIndex,
+    activeVertexIndex,
+    displayPolygon.length,
+    highlightConnectedHandles,
+    hoveredMidpoint,
+  ])
+
+  const isVertexLinkedHighlighted = useCallback(
+    (index: number) => {
+      if (!highlightConnectedHandles || highlightedEdgeIndices.size === 0) return false
+      const edgeCount = displayPolygon.length
+      if (edgeCount < 2) return false
+      return (
+        highlightedEdgeIndices.has(index) ||
+        highlightedEdgeIndices.has((index - 1 + edgeCount) % edgeCount)
+      )
+    },
+    [displayPolygon.length, highlightConnectedHandles, highlightedEdgeIndices],
+  )
+
   const arrowGeometry = useMemo(() => createEdgeArrowGeometry(), [])
   useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry])
 
@@ -578,7 +759,8 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
     onDragCommitRef.current?.()
     updatePreviewPolygon(null)
     setDragState(null)
-  }, [onPolygonChange, updatePreviewPolygon])
+    clearBodyCursor()
+  }, [clearBodyCursor, onPolygonChange, updatePreviewPolygon])
 
   // Handle adding a new vertex at midpoint
   const handleAddVertex = useCallback(
@@ -616,9 +798,23 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   useEffect(() => {
     const onGridMove = (event: GridEvent) => {
       const point = levelNode ? event.localPosition : event.position
-      const gridX = snapToHalf(point[0])
-      const gridZ = snapToHalf(point[2])
-      const newPosition: [number, number] = [gridX, gridZ]
+      const rawPoint: [number, number] = [point[0], point[2]]
+      // Snapping follows the active mode (snapToHalf returns raw in Off / non-grid);
+      // no Shift bypass — Shift cycles the mode, Off is the bypass.
+      const gridPoint: [number, number] = [snapToHalf(rawPoint[0]), snapToHalf(rawPoint[1])]
+      const newPosition =
+        dragState?.isDragging && resolvePlanPoint
+          ? resolvePlanPoint({
+              rawPoint,
+              gridPoint,
+              mode: dragState.mode,
+              vertexIndex: dragState.vertexIndex,
+              edgeIndex: dragState.edgeIndex,
+              initialPosition: dragState.initialPosition,
+              initialPolygon: dragState.initialPolygon,
+              nativeEvent: event.nativeEvent,
+            })
+          : gridPoint
 
       // Play snap sound when cursor moves to a new grid cell during drag
       if (
@@ -673,7 +869,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
     return () => {
       emitter.off('grid:move', onGridMove)
     }
-  }, [dragState, handleVertexDrag, levelNode, updatePreviewPolygon])
+  }, [dragState, handleVertexDrag, levelNode, resolvePlanPoint, updatePreviewPolygon])
 
   // Set up pointer up listener for ending drag
   useEffect(() => {
@@ -741,9 +937,10 @@ 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
+  // Interactive handles are SCENE_LAYER node-material meshes so the ink-edge
+  // pass outlines them. Edge arrows ignore scene depth so the active resize
+  // affordance remains visible through walls and slabs. 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.
@@ -771,11 +968,32 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
         </line>
       )}
 
-      {/* Vertex handles - blue cylinders that match surface height */}
+      {highlightConnectedHandles &&
+        highlightedEdgeIndices.size > 0 &&
+        Array.from(highlightedEdgeIndices).map((edgeIndex) => {
+          const start = displayPolygon[edgeIndex]
+          const end = displayPolygon[(edgeIndex + 1) % displayPolygon.length]
+          if (!(start && end)) return null
+          return (
+            <HighlightedEdgeSegment
+              end={end}
+              key={`highlight-edge-${edgeIndex}`}
+              start={start}
+              y={edgeHandleY}
+            />
+          )
+        })}
+
+      {/* Vertex handles - blue cylinders that match surface height. During a
+          drag only the active handle stays mounted so the gesture reads
+          clearly (same rule for the cross / edge handles below). */}
       {displayPolygon.map(([x, z], index) => {
         const isHovered = hoveredVertex === index
         const isDragging = dragState?.mode === 'vertex' && dragState.vertexIndex === index
-        const radius = 0.1
+        if (dragState && !isDragging) return null
+        const isLinkedHighlighted = isVertexLinkedHighlighted(index)
+        const isHighlighted = isDragging || isHovered || isLinkedHighlighted
+        const radius = 0.08
         const height = handleHeight
         const point: [number, number] = [x!, z!]
         const position: [number, number, number] = [x!, editY + height / 2, z!]
@@ -793,7 +1011,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
           },
           onPointerDown: (e) => {
             if (e.button !== 0) return
-            e.stopPropagation()
+            stopHandlePointerDown(e)
             setHoveredEdge(null)
             onBeforeVertexDrag?.(index, point)
             startDrag({
@@ -808,10 +1026,14 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
           onPointerEnter: (e) => {
             e.stopPropagation()
             setHoveredVertex(index)
+            setBodyCursor('move')
           },
           onPointerLeave: (e) => {
             e.stopPropagation()
             setHoveredVertex(null)
+            // Keep the cursor for the whole gesture when the pointer slips
+            // off the handle mid-drag; commit clears it.
+            if (!dragState?.isDragging) clearBodyCursor()
           },
         }
 
@@ -835,7 +1057,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
 
         return (
           <OutlinedCylinderHandle
-            color={isDragging || isHovered ? EDGE_ARROW_HOVER_COLOR : EDGE_ARROW_COLOR}
+            color={isHighlighted ? EDGE_ARROW_HOVER_COLOR : EDGE_ARROW_COLOR}
             height={height}
             key={`vertex-${index}`}
             {...handleProps}
@@ -845,7 +1067,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
         )
       })}
 
-      {allowPolygonMove && (
+      {allowPolygonMove && (!dragState || dragState.mode === 'polygon') && (
         <OutlinedCrossHandle
           color={dragState?.mode === 'polygon' ? EDGE_ARROW_HOVER_COLOR : EDGE_ARROW_COLOR}
           onClick={(e) => {
@@ -854,7 +1076,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
           }}
           onPointerDown={(e) => {
             if (e.button !== 0) return
-            e.stopPropagation()
+            stopHandlePointerDown(e)
             setHoveredEdge(null)
             startDrag({
               isDragging: true,
@@ -865,14 +1087,24 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
               pointerId: e.pointerId,
             })
           }}
+          onPointerEnter={(e) => {
+            e.stopPropagation()
+            setBodyCursor('move')
+          }}
+          onPointerLeave={(e) => {
+            e.stopPropagation()
+            if (!dragState?.isDragging) clearBodyCursor()
+          }}
           position={[polygonCenter[0], editY + handleHeight + 0.08, polygonCenter[1]]}
         />
       )}
-
       {allowEdgeMove &&
         edgeHandles.map(({ index, length, midpoint, rotationY, outwardNormal, outwardAngle }) => {
           const isHovered = hoveredEdge === index
           const isDragging = dragState?.mode === 'edge' && dragState.edgeIndex === index
+          if (dragState && !isDragging) return null
+          const isLinkedHighlighted = highlightedEdgeIndices.has(index)
+          const isHighlighted = isDragging || isHovered || isLinkedHighlighted
           const arrowX = midpoint[0] + outwardNormal[0] * EDGE_ARROW_OFFSET
           const arrowZ = midpoint[1] + outwardNormal[1] * EDGE_ARROW_OFFSET
 
@@ -906,15 +1138,16 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
                   which sits outside the polygon and never overlaps a
                   vertex/midpoint handle. */}
               <mesh
+                geometry={EDGE_HANDLE_GEOMETRY}
                 layers={EDITOR_LAYER}
                 position={[midpoint[0], edgeHandleY, midpoint[1]]}
                 raycast={NO_RAYCAST}
                 rotation={[0, rotationY, 0]}
+                scale={[length, EDGE_HANDLE_HEIGHT, EDGE_HANDLE_THICKNESS]}
               >
-                <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}
+                  color={isHighlighted ? EDGE_ARROW_HOVER_COLOR : EDGE_ARROW_COLOR}
+                  opacity={isDragging ? 0.5 : isHighlighted ? 0.38 : 0.14}
                   transparent
                 />
               </mesh>
@@ -922,7 +1155,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
                   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}
+                color={isHighlighted ? EDGE_ARROW_HOVER_COLOR : EDGE_ARROW_COLOR}
                 geometry={arrowGeometry}
                 onClick={(e) => {
                   if (e.button !== 0) return
@@ -930,16 +1163,18 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
                 }}
                 onPointerDown={(e) => {
                   if (e.button !== 0) return
-                  e.stopPropagation()
+                  stopHandlePointerDown(e)
                   beginEdgeDrag(e)
                 }}
                 onPointerEnter={(e) => {
                   e.stopPropagation()
                   setHoveredEdge(index)
+                  setBodyCursor(edgeResizeCursor(midpoint, outwardNormal))
                 }}
                 onPointerLeave={(e) => {
                   e.stopPropagation()
                   setHoveredEdge(null)
+                  if (!dragState?.isDragging) clearBodyCursor()
                 }}
                 position={[arrowX, edgeHandleY, arrowZ]}
                 rotationY={outwardAngle}
@@ -954,7 +1189,9 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
         !dragState &&
         midpoints.map(([x, z], index) => {
           const isHovered = hoveredMidpoint === index
-          const radius = 0.06
+          const isLinkedHighlighted = highlightedEdgeIndices.has(index)
+          const isHighlighted = isHovered || isLinkedHighlighted
+          const radius = 0.05
           const height = handleHeight
           const point: [number, number] = [x!, z!]
           const position: [number, number, number] = [x!, editY + height / 2, z!]
@@ -965,7 +1202,7 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
             },
             onPointerDown: (e) => {
               if (e.button !== 0) return
-              e.stopPropagation()
+              stopHandlePointerDown(e)
               onBeforeVertexDrag?.(index + 1, point)
               const insertedVertex = handleAddVertex(index, point)
               if (insertedVertex.vertexIndex >= 0) {
@@ -983,10 +1220,12 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
             onPointerEnter: (e) => {
               e.stopPropagation()
               setHoveredMidpoint(index)
+              setBodyCursor('move')
             },
             onPointerLeave: (e) => {
               e.stopPropagation()
               setHoveredMidpoint(null)
+              clearBodyCursor()
             },
           }
 
@@ -1008,11 +1247,13 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
 
           return (
             <OutlinedCylinderHandle
-              color={isHovered ? EDGE_ARROW_HOVER_COLOR : EDGE_ARROW_COLOR}
+              // Midpoints read as secondary add-points: the brighter hover
+              // shade at rest distinguishes them from the vertex handles.
+              color={EDGE_ARROW_HOVER_COLOR}
               height={height}
               key={`midpoint-${index}`}
               {...handleProps}
-              opacity={isHovered ? 1 : 0.7}
+              opacity={isHighlighted ? 1 : 0.7}
               position={position}
               radius={radius}
             />