@pascal-app/editor 0.5.1 → 0.7.0

package/src/components/editor/wall-measurement-label.tsx

@@ -4,9 +4,15 @@ import {
   type AnyNodeId,
   calculateLevelMiters,
   DEFAULT_WALL_HEIGHT,
+  getWallCurveLength,
+  getWallMiterBoundaryPoints,
   getWallPlanFootprint,
+  getWallSurfacePolygon,
+  type ItemNode,
+  isCurvedWall,
   type Point2D,
   pointToKey,
+  sampleWallCenterline,
   sceneRegistry,
   useScene,
   type WallMiterData,
@@ -15,26 +21,39 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { Html } from '@react-three/drei'
 import { createPortal, useFrame } from '@react-three/fiber'
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import * as THREE from 'three'
 
 const GUIDE_Y_OFFSET = 0.08
 const LABEL_LIFT = 0.08
 const BAR_THICKNESS = 0.012
 const LINE_OPACITY = 0.95
+const HEIGHT_TICK_HALF_LENGTH = 0.14
+const HEIGHT_GUIDE_OUTSIDE_OFFSET = 0.16
 
 const BAR_AXIS = new THREE.Vector3(0, 1, 0)
 
 type Vec3 = [number, number, number]
 
 type MeasurementGuide = {
-  guideStart: Vec3
-  guideEnd: Vec3
+  guidePath: Vec3[]
   extStartStart: Vec3
   extStartEnd: Vec3
   extEndStart: Vec3
   extEndEnd: Vec3
   labelPosition: Vec3
+  heightStart: Vec3
+  heightEnd: Vec3
+  heightBottomTickStart: Vec3
+  heightBottomTickEnd: Vec3
+  heightTopTickStart: Vec3
+  heightTopTickEnd: Vec3
+  heightLabelPosition: Vec3
+}
+
+type WallFaceLine = {
+  start: Point2D
+  end: Point2D
 }
 
 function formatMeasurement(value: number, unit: 'metric' | 'imperial') {
@@ -53,27 +72,28 @@ export function WallMeasurementLabel() {
   const nodes = useScene((state) => state.nodes)
 
   const selectedId = selectedIds.length === 1 ? selectedIds[0] : null
-  const selectedNode = selectedId ? nodes[selectedId as WallNode['id']] : null
-  const wall = selectedNode?.type === 'wall' ? selectedNode : null
-
-  const [wallObject, setWallObject] = useState<THREE.Object3D | null>(null)
+  const selectedNode = selectedId ? nodes[selectedId as AnyNodeId] : null
+  const measurableNode =
+    selectedNode?.type === 'wall' || selectedNode?.type === 'item' ? selectedNode : null
 
-  useEffect(() => {
-    setWallObject(null)
-  }, [selectedId])
+  const [objectState, setObjectState] = useState<{
+    id: AnyNodeId
+    object: THREE.Object3D
+  } | null>(null)
+  const selectedObject = selectedId && objectState?.id === selectedId ? objectState.object : null
 
   useFrame(() => {
-    if (!selectedId || wallObject) return
+    if (!selectedId || selectedObject) return
 
-    const nextWallObject = sceneRegistry.nodes.get(selectedId)
-    if (nextWallObject) {
-      setWallObject(nextWallObject)
+    const nextObject = sceneRegistry.nodes.get(selectedId)
+    if (nextObject) {
+      setObjectState({ id: selectedId as AnyNodeId, object: nextObject })
     }
   })
 
-  if (!(wall && wallObject)) return null
+  if (!(measurableNode && selectedObject)) return null
 
-  return createPortal(<WallMeasurementAnnotation wall={wall} />, wallObject)
+  return createPortal(<SelectedMeasurementAnnotation node={measurableNode} />, selectedObject)
 }
 
 function getLevelWalls(
@@ -92,6 +112,114 @@ function getLevelWalls(
     .filter((node): node is WallNode => Boolean(node && node.type === 'wall'))
 }
 
+function pointMatchesWallPlanPoint(point: Point2D | undefined, planPoint: [number, number]) {
+  if (!point) return false
+
+  return Math.abs(point.x - planPoint[0]) < 1e-6 && Math.abs(point.y - planPoint[1]) < 1e-6
+}
+
+function getWallFaceLines(
+  wall: WallNode,
+  miterData: WallMiterData,
+): { left: WallFaceLine; right: WallFaceLine } | null {
+  if (isCurvedWall(wall)) return null
+
+  const footprint = getWallPlanFootprint(wall, miterData)
+  if (footprint.length < 4) return null
+
+  const startRight = footprint[0]
+  const endRight = footprint[1]
+  const hasEndCenterPoint = pointMatchesWallPlanPoint(footprint[2], wall.end)
+  const endLeft = footprint[hasEndCenterPoint ? 3 : 2]
+  const lastPoint = footprint[footprint.length - 1]
+  const hasStartCenterPoint = pointMatchesWallPlanPoint(lastPoint, wall.start)
+  const startLeft = footprint[hasStartCenterPoint ? footprint.length - 2 : footprint.length - 1]
+
+  if (!(startRight && endRight && endLeft && startLeft)) return null
+
+  return {
+    left: {
+      start: startLeft,
+      end: endLeft,
+    },
+    right: {
+      start: startRight,
+      end: endRight,
+    },
+  }
+}
+
+function getLineMidpoint(line: WallFaceLine): Point2D {
+  return {
+    x: (line.start.x + line.end.x) / 2,
+    y: (line.start.y + line.end.y) / 2,
+  }
+}
+
+function getLevelWallsCenter(levelWalls: WallNode[]): Point2D {
+  let minX = Number.POSITIVE_INFINITY
+  let maxX = Number.NEGATIVE_INFINITY
+  let minY = Number.POSITIVE_INFINITY
+  let maxY = Number.NEGATIVE_INFINITY
+
+  for (const candidateWall of levelWalls) {
+    minX = Math.min(minX, candidateWall.start[0], candidateWall.end[0])
+    maxX = Math.max(maxX, candidateWall.start[0], candidateWall.end[0])
+    minY = Math.min(minY, candidateWall.start[1], candidateWall.end[1])
+    maxY = Math.max(maxY, candidateWall.start[1], candidateWall.end[1])
+  }
+
+  return {
+    x: minX === Number.POSITIVE_INFINITY ? 0 : (minX + maxX) / 2,
+    y: minY === Number.POSITIVE_INFINITY ? 0 : (minY + maxY) / 2,
+  }
+}
+
+function getWallOuterFaceLine(
+  wall: WallNode,
+  miterData: WallMiterData,
+  levelWalls: WallNode[],
+): WallFaceLine | null {
+  const faceLines = getWallFaceLines(wall, miterData)
+  if (!faceLines) return null
+
+  if (wall.frontSide === 'exterior' && wall.backSide !== 'exterior') {
+    return faceLines.left
+  }
+
+  if (wall.backSide === 'exterior' && wall.frontSide !== 'exterior') {
+    return faceLines.right
+  }
+
+  const dx = wall.end[0] - wall.start[0]
+  const dy = wall.end[1] - wall.start[1]
+  const length = Math.hypot(dx, dy)
+  if (length < 1e-6) return null
+
+  const wallMidpoint = {
+    x: (wall.start[0] + wall.end[0]) / 2,
+    y: (wall.start[1] + wall.end[1]) / 2,
+  }
+  const levelCenter = getLevelWallsCenter(levelWalls)
+  const normal = { x: -dy / length, y: dx / length }
+  const fromCenter = {
+    x: wallMidpoint.x - levelCenter.x,
+    y: wallMidpoint.y - levelCenter.y,
+  }
+  const outwardNormal =
+    fromCenter.x * normal.x + fromCenter.y * normal.y >= 0 ? normal : { x: -normal.x, y: -normal.y }
+  const rightMidpoint = getLineMidpoint(faceLines.right)
+  const leftMidpoint = getLineMidpoint(faceLines.left)
+  const rightScore =
+    (rightMidpoint.x - wallMidpoint.x) * outwardNormal.x +
+    (rightMidpoint.y - wallMidpoint.y) * outwardNormal.y
+  const leftScore =
+    (leftMidpoint.x - wallMidpoint.x) * outwardNormal.x +
+    (leftMidpoint.y - wallMidpoint.y) * outwardNormal.y
+
+  return rightScore >= leftScore ? faceLines.right : faceLines.left
+}
+
 function getWallMiddlePoints(
   wall: WallNode,
   miterData: WallMiterData,
@@ -131,43 +259,171 @@ function worldPointToWallLocal(wall: WallNode, point: Point2D): Vec3 {
   return [dx * cosA - dz * sinA, 0, dx * sinA + dz * cosA]
 }
 
+function getWallExteriorOffsetSign(
+  wall: Pick<WallNode, 'start' | 'end' | 'frontSide' | 'backSide'>,
+  levelWalls: WallNode[],
+) {
+  if (wall.frontSide === 'exterior' && wall.backSide !== 'exterior') {
+    return 1
+  }
+
+  if (wall.backSide === 'exterior' && wall.frontSide !== 'exterior') {
+    return -1
+  }
+
+  const dx = wall.end[0] - wall.start[0]
+  const dy = wall.end[1] - wall.start[1]
+  const length = Math.hypot(dx, dy)
+
+  if (length < 1e-6) return 1
+
+  const wallMidpoint = {
+    x: (wall.start[0] + wall.end[0]) / 2,
+    y: (wall.start[1] + wall.end[1]) / 2,
+  }
+  const levelCenter = getLevelWallsCenter(levelWalls)
+  const normal = { x: -dy / length, y: dx / length }
+  const fromCenter = {
+    x: wallMidpoint.x - levelCenter.x,
+    y: wallMidpoint.y - levelCenter.y,
+  }
+
+  return fromCenter.x * normal.x + fromCenter.y * normal.y >= 0 ? 1 : -1
+}
+
+function getCurvedWallMeasurementPath(
+  wall: WallNode,
+  miterData: WallMiterData,
+  levelWalls: WallNode[],
+): Point2D[] | null {
+  const boundaryPoints = getWallMiterBoundaryPoints(wall, miterData)
+  if (!boundaryPoints) return null
+
+  const surface = getWallSurfacePolygon(wall, 24, boundaryPoints)
+  const sidePointCount = 25
+  if (surface.length < sidePointCount * 2) return null
+
+  const offsetSign = getWallExteriorOffsetSign(wall, levelWalls)
+  if (offsetSign >= 0) {
+    return surface.slice(sidePointCount).reverse()
+  }
+
+  return surface.slice(0, sidePointCount)
+}
+
 function buildMeasurementGuide(
   wall: WallNode,
   nodes: Record<string, WallNode | { type: string; children?: string[] }>,
 ): MeasurementGuide | null {
   const levelWalls = getLevelWalls(wall, nodes)
   const miterData = calculateLevelMiters(levelWalls)
-  const middlePoints = getWallMiddlePoints(wall, miterData)
-  if (!middlePoints) return null
+  const measurementLine = getWallOuterFaceLine(wall, miterData, levelWalls)
+  const fallbackMiddlePoints = measurementLine ? null : getWallMiddlePoints(wall, miterData)
+  const measurementPoints = measurementLine ?? fallbackMiddlePoints
+  if (!measurementPoints) return null
 
   const height = wall.height ?? DEFAULT_WALL_HEIGHT
-  const startLocal = worldPointToWallLocal(wall, middlePoints.start)
-  const endLocal = worldPointToWallLocal(wall, middlePoints.end)
-
-  const guideStart: Vec3 = [startLocal[0], height + GUIDE_Y_OFFSET, startLocal[2]]
-  const guideEnd: Vec3 = [endLocal[0], height + GUIDE_Y_OFFSET, endLocal[2]]
-
-  const dirX = guideEnd[0] - guideStart[0]
-  const dirZ = guideEnd[2] - guideStart[2]
-  const dirLength = Math.hypot(dirX, dirZ)
+  const startLocal = worldPointToWallLocal(wall, measurementPoints.start)
+  const endLocal = worldPointToWallLocal(wall, measurementPoints.end)
+  const curvedMeasurementPath = isCurvedWall(wall)
+    ? getCurvedWallMeasurementPath(wall, miterData, levelWalls)
+    : null
+  const guidePath: Vec3[] = curvedMeasurementPath
+    ? curvedMeasurementPath.map((point) => {
+        const localPoint = worldPointToWallLocal(wall, point)
+        return [localPoint[0], height + GUIDE_Y_OFFSET, localPoint[2]]
+      })
+    : isCurvedWall(wall)
+      ? sampleWallCenterline(wall, 24).map((point, index, points) => {
+          const localPoint =
+            index === 0
+              ? startLocal
+              : index === points.length - 1
+                ? endLocal
+                : worldPointToWallLocal(wall, point)
+
+          return [localPoint[0], height + GUIDE_Y_OFFSET, localPoint[2]]
+        })
+      : [
+          [startLocal[0], height + GUIDE_Y_OFFSET, startLocal[2]],
+          [endLocal[0], height + GUIDE_Y_OFFSET, endLocal[2]],
+        ]
+
+  if (guidePath.length < 2) return null
+
+  let guideLength = 0
+  for (let index = 1; index < guidePath.length; index += 1) {
+    const prev = guidePath[index - 1]!
+    const next = guidePath[index]!
+    guideLength += Math.hypot(next[0] - prev[0], next[2] - prev[2])
+  }
 
-  if (!Number.isFinite(dirLength) || dirLength < 0.001) return null
+  if (!Number.isFinite(guideLength) || guideLength < 0.001) return null
 
   // Extension lines coming out of the extremity markers of the wall
   const extOvershoot = 0.04
+  const guideStart = guidePath[0]!
+  const guideEnd = guidePath[guidePath.length - 1]!
+  const extensionStartBase = curvedMeasurementPath ? guideStart : startLocal
+  const extensionEndBase = curvedMeasurementPath ? guideEnd : endLocal
+  const midpoint = curvedMeasurementPath
+    ? guidePath[Math.floor(guidePath.length / 2)]!
+    : ([
+        (guideStart[0] + guideEnd[0]) / 2,
+        guideStart[1],
+        (guideStart[2] + guideEnd[2]) / 2,
+      ] as Vec3)
+  const rawHeightGuidePosition = [guideEnd[0], 0, guideEnd[2]] as Vec3
+  const beforeGuideEnd = guidePath[guidePath.length - 2] ?? guideStart
+  const tickDx = guideEnd[0] - beforeGuideEnd[0]
+  const tickDz = guideEnd[2] - beforeGuideEnd[2]
+  const tickLength = Math.hypot(tickDx, tickDz)
+  const tangentX = tickLength > 1e-6 ? tickDx / tickLength : 1
+  const tangentZ = tickLength > 1e-6 ? tickDz / tickLength : 0
+  const tickUnitX = -tangentZ
+  const tickUnitZ = tangentX
+  const wallEndLocal = worldPointToWallLocal(wall, { x: wall.end[0], y: wall.end[1] })
+  const endOutwardX = rawHeightGuidePosition[0] - wallEndLocal[0]
+  const endOutwardZ = rawHeightGuidePosition[2] - wallEndLocal[2]
+  const outsideSign = endOutwardX * tickUnitX + endOutwardZ * tickUnitZ >= 0 ? 1 : -1
+  const heightGuidePosition = [
+    rawHeightGuidePosition[0] + tickUnitX * outsideSign * HEIGHT_GUIDE_OUTSIDE_OFFSET,
+    0,
+    rawHeightGuidePosition[2] + tickUnitZ * outsideSign * HEIGHT_GUIDE_OUTSIDE_OFFSET,
+  ] as Vec3
+  const getHorizontalHeightTick = (y: number): { start: Vec3; end: Vec3 } => ({
+    start: [
+      heightGuidePosition[0] - tickUnitX * HEIGHT_TICK_HALF_LENGTH,
+      y,
+      heightGuidePosition[2] - tickUnitZ * HEIGHT_TICK_HALF_LENGTH,
+    ],
+    end: [
+      heightGuidePosition[0] + tickUnitX * HEIGHT_TICK_HALF_LENGTH,
+      y,
+      heightGuidePosition[2] + tickUnitZ * HEIGHT_TICK_HALF_LENGTH,
+    ],
+  })
+  const bottomHeightTick = getHorizontalHeightTick(0)
+  const topHeightTick = getHorizontalHeightTick(height)
 
   return {
-    guideStart,
-    guideEnd,
-    extStartStart: [startLocal[0], height, startLocal[2]],
-    extStartEnd: [startLocal[0], height + GUIDE_Y_OFFSET + extOvershoot, startLocal[2]],
-    extEndStart: [endLocal[0], height, endLocal[2]],
-    extEndEnd: [endLocal[0], height + GUIDE_Y_OFFSET + extOvershoot, endLocal[2]],
-    labelPosition: [
-      (guideStart[0] + guideEnd[0]) / 2,
-      guideStart[1] + LABEL_LIFT,
-      (guideStart[2] + guideEnd[2]) / 2,
+    guidePath,
+    extStartStart: [extensionStartBase[0], height, extensionStartBase[2]],
+    extStartEnd: [
+      extensionStartBase[0],
+      height + GUIDE_Y_OFFSET + extOvershoot,
+      extensionStartBase[2],
     ],
+    extEndStart: [extensionEndBase[0], height, extensionEndBase[2]],
+    extEndEnd: [extensionEndBase[0], height + GUIDE_Y_OFFSET + extOvershoot, extensionEndBase[2]],
+    labelPosition: [midpoint[0], midpoint[1] + LABEL_LIFT, midpoint[2]],
+    heightStart: [heightGuidePosition[0], 0, heightGuidePosition[2]],
+    heightEnd: [heightGuidePosition[0], height, heightGuidePosition[2]],
+    heightBottomTickStart: bottomHeightTick.start,
+    heightBottomTickEnd: bottomHeightTick.end,
+    heightTopTickStart: topHeightTick.start,
+    heightTopTickEnd: topHeightTick.end,
+    heightLabelPosition: [heightGuidePosition[0], height / 2, heightGuidePosition[2]],
   }
 }
 
@@ -208,6 +464,55 @@ function MeasurementBar({ start, end, color }: { start: Vec3; end: Vec3; color:
   )
 }
 
+function MeasurementPath({ path, color }: { path: Vec3[]; color: string }) {
+  return (
+    <>
+      {path.slice(1).map((point, index) => (
+        <MeasurementBar color={color} end={point} key={index} start={path[index]!} />
+      ))}
+    </>
+  )
+}
+
+function MeasurementLabel({
+  label,
+  position,
+  color,
+  shadowColor,
+}: {
+  label: string
+  position: Vec3
+  color: string
+  shadowColor: string
+}) {
+  return (
+    <Html
+      center
+      position={position}
+      style={{ pointerEvents: 'none', userSelect: 'none' }}
+      zIndexRange={[20, 0]}
+    >
+      <div
+        className="whitespace-nowrap font-bold font-mono text-[15px]"
+        style={{
+          color,
+          textShadow: `-1.5px -1.5px 0 ${shadowColor}, 1.5px -1.5px 0 ${shadowColor}, -1.5px 1.5px 0 ${shadowColor}, 1.5px 1.5px 0 ${shadowColor}, 0 0 4px ${shadowColor}, 0 0 4px ${shadowColor}`,
+        }}
+      >
+        {label}
+      </div>
+    </Html>
+  )
+}
+
+function SelectedMeasurementAnnotation({ node }: { node: WallNode | ItemNode }) {
+  if (node.type === 'wall') {
+    return <WallMeasurementAnnotation wall={node} />
+  }
+
+  return null
+}
+
 function WallMeasurementAnnotation({ wall }: { wall: WallNode }) {
   const nodes = useScene((state) => state.nodes)
   const theme = useViewer((state) => state.theme)
@@ -216,10 +521,6 @@ function WallMeasurementAnnotation({ wall }: { wall: WallNode }) {
   const color = isNight ? '#ffffff' : '#111111'
   const shadowColor = isNight ? '#111111' : '#ffffff'
 
-  const dx = wall.end[0] - wall.start[0]
-  const dz = wall.end[1] - wall.start[1]
-  const length = Math.hypot(dx, dz)
-  const label = formatMeasurement(length, unit)
   const guide = useMemo(
     () =>
       buildMeasurementGuide(
@@ -228,31 +529,49 @@ function WallMeasurementAnnotation({ wall }: { wall: WallNode }) {
       ),
     [nodes, wall],
   )
+  const length = useMemo(() => {
+    if (!guide?.guidePath?.length || guide.guidePath.length < 2) {
+      return getWallCurveLength(wall)
+    }
+
+    let total = 0
+    for (let index = 1; index < guide.guidePath.length; index += 1) {
+      const prev = guide.guidePath[index - 1]!
+      const next = guide.guidePath[index]!
+      total += Math.hypot(next[0] - prev[0], next[2] - prev[2])
+    }
+    return total
+  }, [guide, wall])
+  const label = formatMeasurement(length, unit)
+  const heightLabel = `H ${formatMeasurement(wall.height ?? DEFAULT_WALL_HEIGHT, unit)}`
 
   if (!(guide && Number.isFinite(length) && length >= 0.01)) return null
 
   return (
     <group>
-      <MeasurementBar color={color} end={guide.guideEnd} start={guide.guideStart} />
+      <MeasurementPath color={color} path={guide.guidePath} />
       <MeasurementBar color={color} end={guide.extStartEnd} start={guide.extStartStart} />
       <MeasurementBar color={color} end={guide.extEndEnd} start={guide.extEndStart} />
+      <MeasurementBar color={color} end={guide.heightEnd} start={guide.heightStart} />
+      <MeasurementBar
+        color={color}
+        end={guide.heightBottomTickEnd}
+        start={guide.heightBottomTickStart}
+      />
+      <MeasurementBar color={color} end={guide.heightTopTickEnd} start={guide.heightTopTickStart} />
 
-      <Html
-        center
+      <MeasurementLabel
+        color={color}
+        label={label}
         position={guide.labelPosition}
-        style={{ pointerEvents: 'none', userSelect: 'none' }}
-        zIndexRange={[20, 0]}
-      >
-        <div
-          className="whitespace-nowrap font-bold font-mono text-[15px]"
-          style={{
-            color,
-            textShadow: `-1.5px -1.5px 0 ${shadowColor}, 1.5px -1.5px 0 ${shadowColor}, -1.5px 1.5px 0 ${shadowColor}, 1.5px 1.5px 0 ${shadowColor}, 0 0 4px ${shadowColor}, 0 0 4px ${shadowColor}`,
-          }}
-        >
-          {label}
-        </div>
-      </Html>
+        shadowColor={shadowColor}
+      />
+      <MeasurementLabel
+        color={color}
+        label={heightLabel}
+        position={guide.heightLabelPosition}
+        shadowColor={shadowColor}
+      />
     </group>
   )
 }

package/src/components/editor-2d/floorplan-action-menu-layer.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import { memo, type MouseEvent as ReactMouseEvent } from 'react'
+import useEditor from '../../store/use-editor'
+import { NodeActionMenu } from '../editor/node-action-menu'
+
+type SvgPoint = {
+  x: number
+  y: number
+}
+
+export type FloorplanActionMenuHandler = (event: ReactMouseEvent<HTMLButtonElement>) => void
+
+export type FloorplanActionMenuEntry = {
+  position: SvgPoint | null
+  onDelete: FloorplanActionMenuHandler
+  onMove: FloorplanActionMenuHandler
+  onAddHole?: FloorplanActionMenuHandler
+  onDuplicate?: FloorplanActionMenuHandler
+}
+
+type FloorplanActionMenuLayerProps = {
+  item: FloorplanActionMenuEntry
+  wall: FloorplanActionMenuEntry
+  fence: FloorplanActionMenuEntry
+  slab: FloorplanActionMenuEntry
+  ceiling: FloorplanActionMenuEntry
+  opening: FloorplanActionMenuEntry
+  spawn: FloorplanActionMenuEntry
+  stair: FloorplanActionMenuEntry
+  roof: FloorplanActionMenuEntry
+  offsetY?: number
+}
+
+export const FloorplanActionMenuLayer = memo(function FloorplanActionMenuLayer({
+  item,
+  wall,
+  fence,
+  slab,
+  ceiling,
+  opening,
+  spawn,
+  stair,
+  roof,
+  offsetY = 10,
+}: FloorplanActionMenuLayerProps) {
+  const isFloorplanHovered = useEditor((state) => state.isFloorplanHovered)
+  const movingNode = useEditor((state) => state.movingNode)
+  const movingFenceEndpoint = useEditor((state) => state.movingFenceEndpoint)
+  const curvingWall = useEditor((state) => state.curvingWall)
+  const curvingFence = useEditor((state) => state.curvingFence)
+
+  if (!isFloorplanHovered || movingNode || movingFenceEndpoint || curvingWall || curvingFence) {
+    return null
+  }
+
+  const entries: FloorplanActionMenuEntry[] = [
+    item,
+    wall,
+    fence,
+    slab,
+    ceiling,
+    opening,
+    spawn,
+    stair,
+    roof,
+  ]
+
+  return (
+    <>
+      {entries.map((entry, index) =>
+        entry.position ? (
+          <div
+            className="absolute z-30"
+            key={index}
+            style={{
+              left: entry.position.x,
+              top: entry.position.y,
+              transform: `translate(-50%, calc(-100% - ${offsetY}px))`,
+            }}
+          >
+            <NodeActionMenu
+              onAddHole={entry.onAddHole}
+              onDelete={entry.onDelete}
+              onDuplicate={entry.onDuplicate}
+              onMove={entry.onMove}
+              onPointerDown={(event) => event.stopPropagation()}
+              onPointerUp={(event) => event.stopPropagation()}
+            />
+          </div>
+        ) : null,
+      )}
+    </>
+  )
+})