@pascal-app/editor 0.5.1 → 0.6.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,16 @@ 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 { 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 +34,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 (
@@ -114,10 +123,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 +182,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 +234,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
 

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

@@ -1,16 +1,19 @@
 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'
+  vertexIndex: number | null
   initialPosition: [number, number]
+  initialPolygon: Array<[number, number]>
   pointerId: number
 }
 
@@ -23,6 +26,8 @@ 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
 }
 
 /**
@@ -38,9 +43,42 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   minVertices = 3,
   levelId,
   surfaceHeight = 0,
+  allowPolygonMove = 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
@@ -75,6 +113,17 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   // 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 []
@@ -139,8 +188,8 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
   // 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 +207,15 @@ 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]
+          setPreviewPolygon(
+            dragState.initialPolygon.map(([x, z]) => [x + deltaX, z + deltaZ] as [number, number]),
+          )
+        }
       }
     }
 
@@ -257,7 +314,7 @@ 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)
 
@@ -282,8 +339,10 @@ export const PolygonEditor: React.FC<PolygonEditorProps> = ({
               e.stopPropagation()
               setDragState({
                 isDragging: true,
+                mode: 'vertex',
                 vertexIndex: index,
                 initialPosition: [x!, z!],
+                initialPolygon: displayPolygon.map(([px, pz]) => [px, pz] as [number, number]),
                 pointerId: e.pointerId,
               })
             }}
@@ -305,6 +364,37 @@ 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()
+            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 + Math.max(MIN_HANDLE_HEIGHT, surfaceHeight + 0.02) + 0.08,
+            polygonCenter[1],
+          ]}
+        >
+          <sphereGeometry args={[0.09, 20, 20]} />
+          <meshStandardMaterial color={dragState?.mode === 'polygon' ? '#22c55e' : '#f59e0b'} />
+        </mesh>
+      )}
+
       {/* Midpoint handles - smaller green cylinders for adding vertices (hidden while dragging) */}
       {!dragState &&
         midpoints.map(([x, z], index) => {

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

@@ -0,0 +1,182 @@
+'use client'
+
+import {
+  type AnyNodeId,
+  emitter,
+  type FenceNode,
+  type GridEvent,
+  type LevelNode,
+  type SlabNode,
+  useScene,
+  type WallNode,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
+import { sfxEmitter } from '../../../lib/sfx-bus'
+import useEditor from '../../../store/use-editor'
+import { snapFenceDraftPoint } from '../fence/fence-drafting'
+import { CursorSphere } from '../shared/cursor-sphere'
+
+function translatePolygon(
+  polygon: Array<[number, number]>,
+  deltaX: number,
+  deltaZ: number,
+): Array<[number, number]> {
+  return polygon.map(([x, z]) => [x + deltaX, z + deltaZ] as [number, number])
+}
+
+function getPolygonCenter(polygon: Array<[number, number]>): [number, number] {
+  if (polygon.length === 0) return [0, 0]
+  let sumX = 0
+  let sumZ = 0
+  for (const [x, z] of polygon) {
+    sumX += x
+    sumZ += z
+  }
+  return [sumX / polygon.length, sumZ / polygon.length]
+}
+
+export const MoveSlabTool: React.FC<{ node: SlabNode }> = ({ node }) => {
+  const activatedAtRef = useRef<number>(Date.now())
+  const originalPolygonRef = useRef(node.polygon.map(([x, z]) => [x, z] as [number, number]))
+  const originalHolesRef = useRef(
+    (node.holes ?? []).map((hole) => hole.map(([x, z]) => [x, z] as [number, number])),
+  )
+  const dragAnchorRef = useRef<[number, number] | null>(null)
+  const previousGridPosRef = useRef<[number, number] | null>(null)
+  const previewRef = useRef<{
+    polygon: Array<[number, number]>
+    holes: Array<Array<[number, number]>>
+  } | null>(null)
+
+  const [cursorLocalPos, setCursorLocalPos] = useState<[number, number, number]>(() => {
+    const center = getPolygonCenter(node.polygon)
+    return [center[0], 0, center[1]]
+  })
+
+  const exitMoveMode = useCallback(() => {
+    useEditor.getState().setMovingNode(null)
+  }, [])
+
+  useEffect(() => {
+    const originalPolygon = originalPolygonRef.current
+    const originalHoles = originalHolesRef.current
+    const levelNode =
+      node.parentId && useScene.getState().nodes[node.parentId as AnyNodeId]?.type === 'level'
+        ? (useScene.getState().nodes[node.parentId as AnyNodeId] as LevelNode)
+        : null
+    const levelChildren = levelNode?.children ?? []
+    const levelWalls = levelChildren
+      .map((childId) => useScene.getState().nodes[childId as AnyNodeId])
+      .filter((child): child is WallNode => child?.type === 'wall')
+    const levelFences = levelChildren
+      .map((childId) => useScene.getState().nodes[childId as AnyNodeId])
+      .filter((child): child is FenceNode => child?.type === 'fence')
+
+    useScene.temporal.getState().pause()
+    let wasCommitted = false
+
+    const applyPreview = (
+      polygon: Array<[number, number]>,
+      holes: Array<Array<[number, number]>>,
+    ) => {
+      previewRef.current = { polygon, holes }
+      const center = getPolygonCenter(polygon)
+      setCursorLocalPos([center[0], 0, center[1]])
+      useScene.getState().updateNode(node.id, { polygon, holes })
+      useScene.getState().markDirty(node.id as AnyNodeId)
+    }
+
+    const restoreOriginal = () => {
+      useScene.getState().updateNode(node.id, {
+        holes: originalHoles,
+        polygon: originalPolygon,
+      })
+      useScene.getState().markDirty(node.id as AnyNodeId)
+    }
+
+    const onGridMove = (event: GridEvent) => {
+      const [localX, localZ] = snapFenceDraftPoint({
+        point: [event.localPosition[0], event.localPosition[2]],
+        walls: levelWalls,
+        fences: levelFences,
+      })
+
+      if (
+        previousGridPosRef.current &&
+        (localX !== previousGridPosRef.current[0] || localZ !== previousGridPosRef.current[1])
+      ) {
+        sfxEmitter.emit('sfx:grid-snap')
+      }
+      previousGridPosRef.current = [localX, localZ]
+
+      const anchor = dragAnchorRef.current ?? [localX, localZ]
+      dragAnchorRef.current = anchor
+
+      const deltaX = localX - anchor[0]
+      const deltaZ = localZ - anchor[1]
+
+      applyPreview(
+        translatePolygon(originalPolygon, deltaX, deltaZ),
+        originalHoles.map((hole) => translatePolygon(hole, deltaX, deltaZ)),
+      )
+    }
+
+    const onGridClick = (event: GridEvent) => {
+      if (Date.now() - activatedAtRef.current < 150) {
+        event.nativeEvent?.stopPropagation?.()
+        return
+      }
+
+      const preview = previewRef.current ?? { polygon: originalPolygon, holes: originalHoles }
+
+      wasCommitted = true
+
+      // Restore original baseline while paused so the next resume+update
+      // registers as a single tracked change (undo reverts to original).
+      useScene.getState().updateNode(node.id, {
+        polygon: originalPolygon,
+        holes: originalHoles,
+      })
+
+      useScene.temporal.getState().resume()
+      useScene.getState().updateNode(node.id, preview)
+      useScene.getState().markDirty(node.id as AnyNodeId)
+      useScene.temporal.getState().pause()
+
+      sfxEmitter.emit('sfx:item-place')
+      useViewer.getState().setSelection({ selectedIds: [node.id] })
+      exitMoveMode()
+      event.nativeEvent?.stopPropagation?.()
+    }
+
+    const onCancel = () => {
+      restoreOriginal()
+      useViewer.getState().setSelection({ selectedIds: [node.id] })
+      useScene.temporal.getState().resume()
+      markToolCancelConsumed()
+      exitMoveMode()
+    }
+
+    emitter.on('grid:move', onGridMove)
+    emitter.on('grid:click', onGridClick)
+    emitter.on('tool:cancel', onCancel)
+
+    return () => {
+      if (!wasCommitted) {
+        restoreOriginal()
+      }
+      useScene.temporal.getState().resume()
+      emitter.off('grid:move', onGridMove)
+      emitter.off('grid:click', onGridClick)
+      emitter.off('tool:cancel', onCancel)
+    }
+  }, [exitMoveMode, node.id])
+
+  return (
+    <group>
+      <CursorSphere position={cursorLocalPos} showTooltip={false} />
+    </group>
+  )
+}

package/src/components/tools/slab/slab-hole-editor.tsx

@@ -36,6 +36,7 @@ export const SlabHoleEditor: React.FC<SlabHoleEditorProps> = ({ slabId, holeInde
 
   return (
     <PolygonEditor
+      allowPolygonMove
       color="#ef4444"
       levelId={resolveLevelId(slab, useScene.getState().nodes)} // red for holes
       minVertices={3}

package/src/components/tools/stair/stair-tool.tsx

@@ -93,11 +93,21 @@ function commitStairPlacement(
     position: [0, 0, 0],
   })
 
+  const sortedLevels = Object.values(nodes)
+    .filter((node): node is LevelNode => node.type === 'level')
+    .sort((left, right) => left.level - right.level)
+  const currentLevelIndex = sortedLevels.findIndex((level) => level.id === levelId)
+  const nextLevelId = sortedLevels[currentLevelIndex + 1]?.id ?? levelId
+
   const stair = StairNode.parse({
     name,
     position,
     rotation,
     stairType: DEFAULT_STAIR_TYPE,
+    fromLevelId: levelId,
+    toLevelId: nextLevelId,
+    slabOpeningMode: 'destination',
+    openingOffset: 0.08,
     width: DEFAULT_STAIR_WIDTH,
     totalRise: DEFAULT_STAIR_HEIGHT,
     stepCount: DEFAULT_STAIR_STEP_COUNT,
@@ -166,9 +176,7 @@ export const StairTool: React.FC = () => {
 
       const gridX = Math.round(event.localPosition[0] * 2) / 2
       const gridZ = Math.round(event.localPosition[2] * 2) / 2
-      const y = event.localPosition[1]
-
-      commitStairPlacement(currentLevelId, [gridX, y, gridZ], rotationRef.current)
+      commitStairPlacement(currentLevelId, [gridX, 0, gridZ], rotationRef.current)
     }
 
     const onKeyDown = (event: KeyboardEvent) => {

package/src/components/tools/tool-manager.tsx

@@ -11,7 +11,9 @@ import { CeilingBoundaryEditor } from './ceiling/ceiling-boundary-editor'
 import { CeilingHoleEditor } from './ceiling/ceiling-hole-editor'
 import { CeilingTool } from './ceiling/ceiling-tool'
 import { DoorTool } from './door/door-tool'
+import { CurveFenceTool } from './fence/curve-fence-tool'
 import { FenceTool } from './fence/fence-tool'
+import { MoveFenceEndpointTool } from './fence/move-fence-endpoint-tool'
 import { ItemTool } from './item/item-tool'
 import { MoveTool } from './item/move-tool'
 import { RoofTool } from './roof/roof-tool'
@@ -20,6 +22,8 @@ import { SlabBoundaryEditor } from './slab/slab-boundary-editor'
 import { SlabHoleEditor } from './slab/slab-hole-editor'
 import { SlabTool } from './slab/slab-tool'
 import { StairTool } from './stair/stair-tool'
+import { CurveWallTool } from './wall/curve-wall-tool'
+import { MoveWallEndpointTool } from './wall/move-wall-endpoint-tool'
 import { WallTool } from './wall/wall-tool'
 import { WindowTool } from './window/window-tool'
 import { ZoneBoundaryEditor } from './zone/zone-boundary-editor'
@@ -51,6 +55,10 @@ export const ToolManager: React.FC = () => {
   const mode = useEditor((state) => state.mode)
   const tool = useEditor((state) => state.tool)
   const movingNode = useEditor((state) => state.movingNode)
+  const movingWallEndpoint = useEditor((state) => state.movingWallEndpoint)
+  const movingFenceEndpoint = useEditor((state) => state.movingFenceEndpoint)
+  const curvingWall = useEditor((state) => state.curvingWall)
+  const curvingFence = useEditor((state) => state.curvingFence)
   const editingHole = useEditor((state) => state.editingHole)
   const selectedZoneId = useViewer((state) => state.selection.zoneId)
   const buildingId = useViewer((state) => state.selection.buildingId)
@@ -140,6 +148,10 @@ export const ToolManager: React.FC = () => {
         {showCeilingHoleEditor && selectedCeilingId && editingHole && (
           <CeilingHoleEditor ceilingId={selectedCeilingId} holeIndex={editingHole.holeIndex} />
         )}
+        {movingWallEndpoint && <MoveWallEndpointTool target={movingWallEndpoint} />}
+        {movingFenceEndpoint && <MoveFenceEndpointTool target={movingFenceEndpoint} />}
+        {curvingWall && <CurveWallTool node={curvingWall} />}
+        {curvingFence && <CurveFenceTool node={curvingFence} />}
         {movingNode && movingNode.type !== 'building' && <MoveTool />}
         {!movingNode && BuildToolComponent && <BuildToolComponent />}
       </group>