@pascal-app/editor 0.6.0 → 0.7.0

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

@@ -0,0 +1,130 @@
+import '../../../three-types'
+
+import {
+  emitter,
+  type GridEvent,
+  type LevelNode,
+  SpawnNode,
+  type SpawnNode as SpawnNodeType,
+  sceneRegistry,
+  useScene,
+} from '@pascal-app/core'
+import { useEffect, useRef, useState } from 'react'
+import type { Group } from 'three'
+import { Vector3 } from 'three'
+import { sfxEmitter } from '../../../lib/sfx-bus'
+import useEditor from '../../../store/use-editor'
+import { CursorSphere } from '../shared/cursor-sphere'
+
+const SPAWN_ICON = (
+  // eslint-disable-next-line @next/next/no-img-element
+  <img
+    alt="Spawn Point"
+    src="/icons/site.png"
+    style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+  />
+)
+
+const roundToHalf = (value: number) => Math.round(value * 2) / 2
+const worldVector = new Vector3()
+
+function getExistingSpawnIds() {
+  const nodes = useScene.getState().nodes
+  return Object.values(nodes)
+    .filter((node) => node.type === 'spawn')
+    .map((node) => node.id)
+    .sort()
+}
+
+function getLevelLocalSpawnPosition(
+  levelId: LevelNode['id'],
+  event: GridEvent,
+): [number, number, number] {
+  const levelObject = sceneRegistry.nodes.get(levelId)
+  if (!levelObject) {
+    return [
+      roundToHalf(event.localPosition[0]),
+      event.localPosition[1],
+      roundToHalf(event.localPosition[2]),
+    ]
+  }
+
+  worldVector.set(event.position[0], event.position[1], event.position[2])
+  levelObject.updateWorldMatrix(true, false)
+  levelObject.worldToLocal(worldVector)
+
+  return [roundToHalf(worldVector.x), worldVector.y, roundToHalf(worldVector.z)]
+}
+
+type SpawnToolProps = {
+  currentLevelId: LevelNode['id'] | null
+  onPlaced?: (spawnId: SpawnNodeType['id']) => void
+}
+
+export const SpawnTool: React.FC<SpawnToolProps> = ({ currentLevelId, onPlaced }) => {
+  const [, setCursorPosition] = useState<[number, number, number] | null>(null)
+  const cursorRef = useRef<Group>(null)
+
+  useEffect(() => {
+    if (!currentLevelId) return
+
+    const onGridMove = (event: GridEvent) => {
+      const nextPosition: [number, number, number] = [
+        roundToHalf(event.localPosition[0]),
+        event.localPosition[1],
+        roundToHalf(event.localPosition[2]),
+      ]
+      setCursorPosition(nextPosition)
+      cursorRef.current?.position.set(nextPosition[0], nextPosition[1], nextPosition[2])
+    }
+
+    const onGridClick = (event: GridEvent) => {
+      const nextPosition = getLevelLocalSpawnPosition(currentLevelId, event)
+
+      const [existingSpawnId, ...duplicateSpawnIds] = getExistingSpawnIds()
+      if (existingSpawnId) {
+        useScene.getState().updateNode(existingSpawnId, {
+          parentId: currentLevelId,
+          position: nextPosition,
+          rotation: 0,
+        })
+        if (duplicateSpawnIds.length > 0) {
+          useScene.getState().deleteNodes(duplicateSpawnIds)
+        }
+        onPlaced?.(existingSpawnId)
+      } else {
+        const spawn = SpawnNode.parse({
+          name: 'Spawn Point',
+          position: nextPosition,
+          rotation: 0,
+        })
+        useScene.getState().createNode(spawn, currentLevelId)
+        onPlaced?.(spawn.id)
+      }
+
+      sfxEmitter.emit('sfx:structure-build')
+      useEditor.getState().setTool(null)
+      useEditor.getState().setMode('select')
+    }
+
+    emitter.on('grid:move', onGridMove)
+    emitter.on('grid:click', onGridClick)
+
+    return () => {
+      emitter.off('grid:move', onGridMove)
+      emitter.off('grid:click', onGridClick)
+    }
+  }, [currentLevelId, onPlaced])
+
+  if (!currentLevelId) return null
+
+  return (
+    <CursorSphere
+      color="#60a5fa"
+      height={2.2}
+      ref={cursorRef}
+      showTooltip
+      tooltipContent={SPAWN_ICON}
+    />
+  )
+}

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

@@ -10,6 +10,7 @@ import useEditor, { type Phase, type Tool } from '../../store/use-editor'
 import { CeilingBoundaryEditor } from './ceiling/ceiling-boundary-editor'
 import { CeilingHoleEditor } from './ceiling/ceiling-hole-editor'
 import { CeilingTool } from './ceiling/ceiling-tool'
+import { ColumnTool } from './column/column-tool'
 import { DoorTool } from './door/door-tool'
 import { CurveFenceTool } from './fence/curve-fence-tool'
 import { FenceTool } from './fence/fence-tool'
@@ -21,6 +22,7 @@ import { SiteBoundaryEditor } from './site/site-boundary-editor'
 import { SlabBoundaryEditor } from './slab/slab-boundary-editor'
 import { SlabHoleEditor } from './slab/slab-hole-editor'
 import { SlabTool } from './slab/slab-tool'
+import { SpawnTool } from './spawn/spawn-tool'
 import { StairTool } from './stair/stair-tool'
 import { CurveWallTool } from './wall/curve-wall-tool'
 import { MoveWallEndpointTool } from './wall/move-wall-endpoint-tool'
@@ -61,8 +63,10 @@ export const ToolManager: React.FC = () => {
   const curvingFence = useEditor((state) => state.curvingFence)
   const editingHole = useEditor((state) => state.editingHole)
   const selectedZoneId = useViewer((state) => state.selection.zoneId)
+  const selectedLevelId = useViewer((state) => state.selection.levelId)
   const buildingId = useViewer((state) => state.selection.buildingId)
   const selectedIds = useViewer((state) => state.selection.selectedIds)
+  const setSelection = useViewer((state) => state.setSelection)
   const nodes = useScene((state) => state.nodes)
 
   // Building transform for the local group — all building-relative tools live inside this group
@@ -123,12 +127,15 @@ export const ToolManager: React.FC = () => {
   const showBuildTool = mode === 'build' && tool !== null
 
   const BuildToolComponent = showBuildTool ? tools[phase]?.[tool] : null
+  const handlePlacedNodeSelected = (nodeId: AnyNodeId) => {
+    setSelection({ selectedIds: [nodeId] })
+  }
 
   return (
     <>
       {showSiteBoundaryEditor && <SiteBoundaryEditor />}
       {/* World-space tools: site boundary and building movement operate in world coordinates */}
-      {movingNode?.type === 'building' && <MoveTool />}
+      {movingNode?.type === 'building' && <MoveTool onSpawnMoved={handlePlacedNodeSelected} />}
 
       {/* Building-local group: all other tools are relative to the selected building.
           Cursor visuals set positions in building-local space; this group applies the
@@ -152,8 +159,16 @@ export const ToolManager: React.FC = () => {
         {movingFenceEndpoint && <MoveFenceEndpointTool target={movingFenceEndpoint} />}
         {curvingWall && <CurveWallTool node={curvingWall} />}
         {curvingFence && <CurveFenceTool node={curvingFence} />}
-        {movingNode && movingNode.type !== 'building' && <MoveTool />}
-        {!movingNode && BuildToolComponent && <BuildToolComponent />}
+        {movingNode && movingNode.type !== 'building' && (
+          <MoveTool onSpawnMoved={handlePlacedNodeSelected} />
+        )}
+        {!movingNode && showBuildTool && tool === 'spawn' && (
+          <SpawnTool currentLevelId={selectedLevelId} onPlaced={handlePlacedNodeSelected} />
+        )}
+        {!movingNode && showBuildTool && tool === 'column' && (
+          <ColumnTool currentLevelId={selectedLevelId} onPlaced={handlePlacedNodeSelected} />
+        )}
+        {!movingNode && BuildToolComponent && tool !== 'column' && <BuildToolComponent />}
       </group>
     </>
   )

package/src/components/tools/wall/move-wall-endpoint-tool.tsx

@@ -9,27 +9,87 @@ import {
   useScene,
   type WallNode,
 } from '@pascal-app/core'
-import { Html } from '@react-three/drei'
 import { useViewer } from '@pascal-app/viewer'
+import { Html } from '@react-three/drei'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor, { type MovingWallEndpoint } from '../../../store/use-editor'
 import { CursorSphere } from '../shared/cursor-sphere'
 import {
-  isWallLongEnough,
-  snapWallDraftPoint,
-  type WallPlanPoint,
-} from './wall-drafting'
+  formatAngleRadians,
+  getAngleToSegmentReference,
+  getSegmentAngleReferenceAtPoint,
+} from '../shared/segment-angle'
+import { isWallLongEnough, snapWallDraftPoint, type WallPlanPoint } from './wall-drafting'
 
 function samePoint(a: WallPlanPoint, b: WallPlanPoint) {
   return a[0] === b[0] && a[1] === b[1]
 }
 
+type WallSegmentLike = {
+  id: WallNode['id']
+  start: WallPlanPoint
+  end: WallPlanPoint
+  curveOffset?: number
+}
+
+type AngleLabelState = {
+  label: string
+  position: [number, number, number]
+} | null
+
+function getEndpointAngleLabel(args: {
+  preview: { start: WallPlanPoint; end: WallPlanPoint; curveOffset?: number }
+  walls: WallSegmentLike[]
+  nodeId: WallNode['id']
+}): AngleLabelState {
+  const { preview, walls, nodeId } = args
+  const endpoints = [
+    {
+      point: preview.start,
+    },
+    {
+      point: preview.end,
+    },
+  ]
+  const targetSegment: WallSegmentLike = {
+    id: nodeId,
+    start: preview.start,
+    end: preview.end,
+    curveOffset: preview.curveOffset,
+  }
+
+  for (const endpoint of endpoints) {
+    const targetReference = getSegmentAngleReferenceAtPoint(endpoint.point, targetSegment)
+    if (!targetReference) continue
+
+    const connectedWall = walls.find(
+      (wall) =>
+        wall.id !== nodeId && Boolean(getSegmentAngleReferenceAtPoint(endpoint.point, wall)),
+    )
+    if (!connectedWall) continue
+
+    const connectedReference = getSegmentAngleReferenceAtPoint(endpoint.point, connectedWall)
+    if (!connectedReference) continue
+
+    const angle = getAngleToSegmentReference(targetReference.vector, connectedReference)
+    if (angle === null) continue
+
+    return {
+      label: formatAngleRadians(angle),
+      position: [endpoint.point[0], 0.34, endpoint.point[1]],
+    }
+  }
+
+  return null
+}
+
 type LinkedWallSnapshot = {
   id: WallNode['id']
   start: WallPlanPoint
   end: WallPlanPoint
+  curveOffset?: number
 }
 
 function getLinkedWallSnapshots(args: {
@@ -64,6 +124,7 @@ function getLinkedWallSnapshots(args: {
       id: node.id,
       start: [...node.start] as WallPlanPoint,
       end: [...node.end] as WallPlanPoint,
+      curveOffset: node.curveOffset,
     })
   }
 
@@ -79,6 +140,7 @@ function getLinkedWallUpdates(
 ) {
   return linkedWalls.map((wall) => ({
     id: wall.id,
+    curveOffset: wall.curveOffset,
     start: samePoint(wall.start, originalStart)
       ? nextStart
       : samePoint(wall.start, originalEnd)
@@ -114,6 +176,7 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
     }),
   )
   const previewRef = useRef<{ start: WallPlanPoint; end: WallPlanPoint } | null>(null)
+  const [angleLabel, setAngleLabel] = useState<AngleLabelState>(null)
 
   const [cursorLocalPos, setCursorLocalPos] = useState<[number, number, number]>(() => {
     const point = target.endpoint === 'start' ? target.wall.start : target.wall.end
@@ -155,24 +218,43 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
     const applyPreview = (movingPoint: WallPlanPoint, detachLinkedWalls = false) => {
       const nextStart = target.endpoint === 'start' ? movingPoint : fixedPoint
       const nextEnd = target.endpoint === 'end' ? movingPoint : fixedPoint
+      const linkedUpdates = detachLinkedWalls
+        ? []
+        : getLinkedWallUpdates(
+            linkedOriginalsRef.current,
+            originalStart,
+            originalEnd,
+            nextStart,
+            nextEnd,
+          )
       previewRef.current = { start: nextStart, end: nextEnd }
       setCursorLocalPos([movingPoint[0], 0, movingPoint[1]])
-      applyNodePreview([
-        { id: nodeId, start: nextStart, end: nextEnd },
-        ...(detachLinkedWalls
-          ? []
-          : getLinkedWallUpdates(
-              linkedOriginalsRef.current,
-              originalStart,
-              originalEnd,
-              nextStart,
-              nextEnd,
-            )),
-      ])
+      setAngleLabel(
+        getEndpointAngleLabel({
+          preview: { start: nextStart, end: nextEnd, curveOffset: target.wall.curveOffset },
+          walls: [
+            ...levelWalls.map((wall) => ({
+              id: wall.id,
+              start: wall.start,
+              end: wall.end,
+              curveOffset: wall.curveOffset,
+            })),
+            ...linkedUpdates,
+          ],
+          nodeId,
+        }),
+      )
+      applyNodePreview([{ id: nodeId, start: nextStart, end: nextEnd }, ...linkedUpdates])
     }
 
-    const restoreOriginal = () => {
-      applyNodePreview([{ id: nodeId, start: originalStart, end: originalEnd }, ...linkedOriginalsRef.current])
+    const restoreOriginal = (clearAngleLabel = true) => {
+      applyNodePreview([
+        { id: nodeId, start: originalStart, end: originalEnd },
+        ...linkedOriginalsRef.current,
+      ])
+      if (clearAngleLabel) {
+        setAngleLabel(null)
+      }
     }
 
     const onGridMove = (event: GridEvent) => {
@@ -235,6 +317,7 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
       }
 
       useViewer.getState().setSelection({ selectedIds: [nodeId] })
+      setAngleLabel(null)
       exitMoveMode()
       event.nativeEvent?.stopPropagation?.()
     }
@@ -243,6 +326,7 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
       restoreOriginal()
       useViewer.getState().setSelection({ selectedIds: [nodeId] })
       resumeSceneHistory(useScene)
+      setAngleLabel(null)
       markToolCancelConsumed()
       exitMoveMode()
     }
@@ -285,7 +369,7 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
 
     return () => {
       if (!wasCommitted) {
-        restoreOriginal()
+        restoreOriginal(false)
       }
       resumeSceneHistory(useScene)
       emitter.off('grid:move', onGridMove)
@@ -317,6 +401,23 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({
           </div>
         </div>
       </Html>
+      {angleLabel && <EndpointAngleLabel label={angleLabel.label} position={angleLabel.position} />}
     </group>
   )
 }
+
+function EndpointAngleLabel({
+  label,
+  position,
+}: {
+  label: string
+  position: [number, number, number]
+}) {
+  return (
+    <Html center position={position} style={{ pointerEvents: 'none' }} zIndexRange={[100, 0]}>
+      <div className="whitespace-nowrap rounded-full border border-border bg-background/95 px-2 py-1 font-mono text-[11px] font-semibold text-foreground shadow-lg backdrop-blur-md">
+        {label}
+      </div>
+    </Html>
+  )
+}

package/src/components/tools/wall/wall-drafting.ts

@@ -3,7 +3,10 @@ import {
   type AnyNodeId,
   type DoorNode,
   getScaledDimensions,
+  getWallCurveFrameAt,
+  getWallCurveLength,
   type ItemNode,
+  isCurvedWall,
   useScene,
   type WallNode,
   WallNode as WallSchema,
@@ -62,10 +65,10 @@ export function snapPointTo45Degrees(
   const snappedAngle = Math.round(angle / angleStep) * angleStep
   const distance = Math.sqrt(dx * dx + dz * dz)
 
-  return snapPointToGrid([
-    start[0] + Math.cos(snappedAngle) * distance,
-    start[1] + Math.sin(snappedAngle) * distance,
-  ], step)
+  return snapPointToGrid(
+    [start[0] + Math.cos(snappedAngle) * distance, start[1] + Math.sin(snappedAngle) * distance],
+    step,
+  )
 }
 
 export function getWallAngleSnapStep(step = getWallGridStep()): number {
@@ -336,11 +339,17 @@ export function findWallSnapTarget(
       continue
     }
 
-    const candidates: Array<WallPlanPoint | null> = [
-      wall.start,
-      wall.end,
-      projectPointOntoWall(point, wall),
-    ]
+    const candidates: Array<WallPlanPoint | null> = [wall.start, wall.end]
+
+    if (isCurvedWall(wall)) {
+      const sampleCount = Math.max(8, Math.ceil(getWallCurveLength(wall) / 0.3))
+      for (let index = 0; index <= sampleCount; index += 1) {
+        const frame = getWallCurveFrameAt(wall, index / sampleCount)
+        candidates.push([frame.point.x, frame.point.y])
+      }
+    } else {
+      candidates.push(projectPointOntoWall(point, wall))
+    }
     for (const candidate of candidates) {
       if (!candidate) {
         continue

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

@@ -1,14 +1,100 @@
 import { emitter, type GridEvent, type LevelNode, useScene, type WallNode } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { useEffect, useRef } from 'react'
+import { Html } from '@react-three/drei'
+import { useEffect, useRef, useState } from 'react'
 import { DoubleSide, type Group, type Mesh, Shape, ShapeGeometry, Vector3 } from 'three'
 import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import { CursorSphere } from '../shared/cursor-sphere'
+import {
+  formatAngleRadians,
+  getAngleToSegmentReference,
+  getSegmentAngleReferenceAtPoint,
+} from '../shared/segment-angle'
 import { createWallOnCurrentLevel, snapWallDraftPoint, type WallPlanPoint } from './wall-drafting'
 
 const WALL_HEIGHT = 2.5
+const DRAFT_LABEL_Y = WALL_HEIGHT + 0.22
+const DRAFT_ANGLE_LABEL_Y = 0.28
+
+type DraftAngleLabel = {
+  id: string
+  label: string
+  position: [number, number, number]
+}
+
+type DraftMeasurementState = {
+  lengthLabel: string
+  lengthPosition: [number, number, number]
+  angleLabels: DraftAngleLabel[]
+} | null
+
+function formatMeasurement(value: number, unit: 'metric' | 'imperial') {
+  if (unit === 'imperial') {
+    const feet = value * 3.280_84
+    const wholeFeet = Math.floor(feet)
+    const inches = Math.round((feet - wholeFeet) * 12)
+    if (inches === 12) return `${wholeFeet + 1}'0"`
+    return `${wholeFeet}'${inches}"`
+  }
+
+  return `${Number.parseFloat(value.toFixed(2))}m`
+}
+
+function getDraftAngleLabels(
+  start: WallPlanPoint,
+  end: WallPlanPoint,
+  walls: WallNode[],
+): DraftAngleLabel[] {
+  const draftFromStart: WallPlanPoint = [end[0] - start[0], end[1] - start[1]]
+  const draftFromEnd: WallPlanPoint = [start[0] - end[0], start[1] - end[1]]
+  const endpoints = [
+    { id: 'start', point: start, draftVector: draftFromStart },
+    { id: 'end', point: end, draftVector: draftFromEnd },
+  ]
+  const labels: DraftAngleLabel[] = []
+
+  for (const endpoint of endpoints) {
+    const connectedWall = walls.find((wall) =>
+      Boolean(getSegmentAngleReferenceAtPoint(endpoint.point, wall)),
+    )
+    if (!connectedWall) continue
+
+    const connectedReference = getSegmentAngleReferenceAtPoint(endpoint.point, connectedWall)
+    if (!connectedReference) continue
+
+    const angle = getAngleToSegmentReference(endpoint.draftVector, connectedReference)
+    if (angle === null) continue
+
+    labels.push({
+      id: endpoint.id,
+      label: formatAngleRadians(angle),
+      position: [endpoint.point[0], DRAFT_ANGLE_LABEL_Y, endpoint.point[1]],
+    })
+  }
+
+  return labels
+}
+
+function getDraftMeasurementState(
+  start: WallPlanPoint,
+  end: WallPlanPoint,
+  walls: WallNode[],
+  unit: 'metric' | 'imperial',
+): DraftMeasurementState {
+  const dx = end[0] - start[0]
+  const dz = end[1] - start[1]
+  const length = Math.hypot(dx, dz)
+
+  if (length < 0.01) return null
+
+  return {
+    lengthLabel: formatMeasurement(length, unit),
+    lengthPosition: [(start[0] + end[0]) / 2, DRAFT_LABEL_Y, (start[1] + end[1]) / 2],
+    angleLabels: getDraftAngleLabels(start, end, walls),
+  }
+}
 
 /**
  * Update wall preview mesh geometry to create a vertical plane between two points
@@ -67,12 +153,14 @@ const getCurrentLevelWalls = (): WallNode[] => {
 }
 
 export const WallTool: React.FC = () => {
+  const unit = useViewer((state) => state.unit)
   const cursorRef = useRef<Group>(null)
   const wallPreviewRef = useRef<Mesh>(null!)
   const startingPoint = useRef(new Vector3(0, 0, 0))
   const endingPoint = useRef(new Vector3(0, 0, 0))
   const buildingState = useRef(0)
   const shiftPressed = useRef(false)
+  const [draftMeasurement, setDraftMeasurement] = useState<DraftMeasurementState>(null)
 
   useEffect(() => {
     let gridPosition: WallPlanPoint = [0, 0]
@@ -109,9 +197,18 @@ export const WallTool: React.FC = () => {
         previousWallEnd = currentWallEnd
 
         updateWallPreview(wallPreviewRef.current, startingPoint.current, endingPoint.current)
+        setDraftMeasurement(
+          getDraftMeasurementState(
+            [startingPoint.current.x, startingPoint.current.z],
+            snappedLocal,
+            walls,
+            unit,
+          ),
+        )
       } else {
         // Not drawing a wall yet, show the snapped anchor point.
         cursorRef.current.position.set(gridPosition[0], event.localPosition[1], gridPosition[1])
+        setDraftMeasurement(null)
       }
     }
 
@@ -126,6 +223,7 @@ export const WallTool: React.FC = () => {
         endingPoint.current.copy(startingPoint.current)
         buildingState.current = 1
         wallPreviewRef.current.visible = true
+        setDraftMeasurement(null)
       } else if (buildingState.current === 1) {
         const snappedEnd = snapWallDraftPoint({
           point: localClick,
@@ -140,6 +238,7 @@ export const WallTool: React.FC = () => {
         createWallOnCurrentLevel([startingPoint.current.x, startingPoint.current.z], snappedEnd)
         wallPreviewRef.current.visible = false
         buildingState.current = 0
+        setDraftMeasurement(null)
       }
     }
 
@@ -160,6 +259,7 @@ export const WallTool: React.FC = () => {
         markToolCancelConsumed()
         buildingState.current = 0
         wallPreviewRef.current.visible = false
+        setDraftMeasurement(null)
       }
     }
 
@@ -176,7 +276,7 @@ export const WallTool: React.FC = () => {
       window.removeEventListener('keydown', onKeyDown)
       window.removeEventListener('keyup', onKeyUp)
     }
-  }, [])
+  }, [unit])
 
   return (
     <group>
@@ -195,6 +295,38 @@ export const WallTool: React.FC = () => {
           transparent
         />
       </mesh>
+
+      {draftMeasurement && (
+        <>
+          <DraftMeasurementLabel
+            label={draftMeasurement.lengthLabel}
+            position={draftMeasurement.lengthPosition}
+          />
+          {draftMeasurement.angleLabels.map((angleLabel) => (
+            <DraftMeasurementLabel
+              key={angleLabel.id}
+              label={angleLabel.label}
+              position={angleLabel.position}
+            />
+          ))}
+        </>
+      )}
     </group>
   )
 }
+
+function DraftMeasurementLabel({
+  label,
+  position,
+}: {
+  label: string
+  position: [number, number, number]
+}) {
+  return (
+    <Html center position={position} style={{ pointerEvents: 'none' }} zIndexRange={[100, 0]}>
+      <div className="whitespace-nowrap rounded-full border border-border bg-background/95 px-2 py-1 font-mono text-[11px] font-semibold text-foreground shadow-lg backdrop-blur-md">
+        {label}
+      </div>
+    </Html>
+  )
+}