@pascal-app/editor 0.6.0 → 0.8.0

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

@@ -7,19 +7,129 @@ import {
   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 {
   createFenceOnCurrentLevel,
-  snapFenceDraftPoint,
   type FencePlanPoint,
+  snapFenceDraftPoint,
 } from './fence-drafting'
 
 const FENCE_PREVIEW_HEIGHT = 1.8
+const DRAFT_LABEL_Y = FENCE_PREVIEW_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
+
+type SegmentLike = {
+  id: string
+  start: FencePlanPoint
+  end: FencePlanPoint
+  curveOffset?: number
+}
+
+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: FencePlanPoint,
+  end: FencePlanPoint,
+  segments: SegmentLike[],
+): DraftAngleLabel[] {
+  const draftFromStart: FencePlanPoint = [end[0] - start[0], end[1] - start[1]]
+  const draftFromEnd: FencePlanPoint = [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 connectedSegment = segments.find((segment) =>
+      Boolean(getSegmentAngleReferenceAtPoint(endpoint.point, segment)),
+    )
+    if (!connectedSegment) continue
+
+    const connectedReference = getSegmentAngleReferenceAtPoint(endpoint.point, connectedSegment)
+    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: FencePlanPoint,
+  end: FencePlanPoint,
+  segments: SegmentLike[],
+  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, segments),
+  }
+}
+
+function getReferenceSegments(walls: WallNode[], fences: FenceNode[]): SegmentLike[] {
+  return [
+    ...walls.map((wall) => ({
+      id: wall.id,
+      start: wall.start,
+      end: wall.end,
+      curveOffset: wall.curveOffset,
+    })),
+    ...fences.map((fence) => ({
+      id: fence.id,
+      start: fence.start,
+      end: fence.end,
+      curveOffset: fence.curveOffset,
+    })),
+  ]
+}
 
 const updateFencePreview = (mesh: Mesh, start: Vector3, end: Vector3) => {
   const direction = new Vector3(end.x - start.x, 0, end.z - start.z)
@@ -70,12 +180,14 @@ const getCurrentLevelElements = (): { walls: WallNode[]; fences: FenceNode[] } =
 }
 
 export const FenceTool: React.FC = () => {
+  const unit = useViewer((state) => state.unit)
   const cursorRef = useRef<Group>(null)
   const previewRef = 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 previousFenceEnd: [number, number] | null = null
@@ -107,9 +219,18 @@ export const FenceTool: React.FC = () => {
         previousFenceEnd = currentFenceEnd
 
         updateFencePreview(previewRef.current, startingPoint.current, endingPoint.current)
+        setDraftMeasurement(
+          getDraftMeasurementState(
+            [startingPoint.current.x, startingPoint.current.z],
+            snappedLocal,
+            getReferenceSegments(walls, fences),
+            unit,
+          ),
+        )
       } else {
         const snappedPoint = snapFenceDraftPoint({ point: localPoint, walls, fences })
         cursorRef.current.position.set(snappedPoint[0], event.localPosition[1], snappedPoint[1])
+        setDraftMeasurement(null)
       }
     }
 
@@ -123,6 +244,7 @@ export const FenceTool: React.FC = () => {
         endingPoint.current.copy(startingPoint.current)
         buildingState.current = 1
         previewRef.current.visible = true
+        setDraftMeasurement(null)
       } else {
         const snappedEnd = snapFenceDraftPoint({
           point: localClick,
@@ -137,6 +259,7 @@ export const FenceTool: React.FC = () => {
         createFenceOnCurrentLevel([startingPoint.current.x, startingPoint.current.z], snappedEnd)
         previewRef.current.visible = false
         buildingState.current = 0
+        setDraftMeasurement(null)
       }
     }
 
@@ -153,6 +276,7 @@ export const FenceTool: React.FC = () => {
         markToolCancelConsumed()
         buildingState.current = 0
         previewRef.current.visible = false
+        setDraftMeasurement(null)
       }
     }
 
@@ -169,11 +293,11 @@ export const FenceTool: React.FC = () => {
       window.removeEventListener('keydown', onKeyDown)
       window.removeEventListener('keyup', onKeyUp)
     }
-  }, [])
+  }, [unit])
 
   return (
     <group>
-      <CursorSphere ref={cursorRef} height={FENCE_PREVIEW_HEIGHT} />
+      <CursorSphere height={FENCE_PREVIEW_HEIGHT} ref={cursorRef} />
       <mesh layers={EDITOR_LAYER} ref={previewRef} renderOrder={1} visible={false}>
         <shapeGeometry />
         <meshBasicMaterial
@@ -185,6 +309,38 @@ export const FenceTool: 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 font-semibold text-[11px] text-foreground shadow-lg backdrop-blur-md">
+        {label}
+      </div>
+    </Html>
+  )
+}

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

@@ -2,32 +2,113 @@
 
 import {
   type AnyNodeId,
-  type FenceNode,
-  type WallNode,
   emitter,
+  type FenceNode,
   type GridEvent,
   pauseSceneHistory,
   resumeSceneHistory,
   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 MovingFenceEndpoint } from '../../../store/use-editor'
 import { CursorSphere } from '../shared/cursor-sphere'
-import { snapFenceDraftPoint, type FencePlanPoint } from './fence-drafting'
+import {
+  formatAngleRadians,
+  getAngleToSegmentReference,
+  getSegmentAngleReferenceAtPoint,
+} from '../shared/segment-angle'
 import { isWallLongEnough } from '../wall/wall-drafting'
+import { type FencePlanPoint, snapFenceDraftPoint } from './fence-drafting'
 
 function samePoint(a: FencePlanPoint, b: FencePlanPoint) {
   return a[0] === b[0] && a[1] === b[1]
 }
 
+type SegmentLike = {
+  id: string
+  start: FencePlanPoint
+  end: FencePlanPoint
+  curveOffset?: number
+}
+
+type AngleLabelState = {
+  label: string
+  position: [number, number, number]
+} | null
+
+function getEndpointAngleLabel(args: {
+  preview: { start: FencePlanPoint; end: FencePlanPoint; curveOffset?: number }
+  segments: SegmentLike[]
+  nodeId: FenceNode['id']
+}): AngleLabelState {
+  const { preview, segments, nodeId } = args
+  const endpoints = [
+    {
+      point: preview.start,
+    },
+    {
+      point: preview.end,
+    },
+  ]
+  const targetSegment: SegmentLike = {
+    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 connectedSegment = segments.find(
+      (segment) =>
+        segment.id !== nodeId && Boolean(getSegmentAngleReferenceAtPoint(endpoint.point, segment)),
+    )
+    if (!connectedSegment) continue
+
+    const connectedReference = getSegmentAngleReferenceAtPoint(endpoint.point, connectedSegment)
+    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
+}
+
+function getReferenceSegments(walls: WallNode[], fences: FenceNode[]): SegmentLike[] {
+  return [
+    ...walls.map((wall) => ({
+      id: wall.id,
+      start: wall.start,
+      end: wall.end,
+      curveOffset: wall.curveOffset,
+    })),
+    ...fences.map((fence) => ({
+      id: fence.id,
+      start: fence.start,
+      end: fence.end,
+      curveOffset: fence.curveOffset,
+    })),
+  ]
+}
+
 type LinkedFenceSnapshot = {
   id: FenceNode['id']
   start: FencePlanPoint
   end: FencePlanPoint
+  curveOffset?: number
 }
 
 function getLinkedFenceSnapshots(args: {
@@ -50,10 +131,12 @@ function getLinkedFenceSnapshots(args: {
     }
 
     if (
-      !samePoint(node.start, originalStart) &&
-      !samePoint(node.start, originalEnd) &&
-      !samePoint(node.end, originalStart) &&
-      !samePoint(node.end, originalEnd)
+      !(
+        samePoint(node.start, originalStart) ||
+        samePoint(node.start, originalEnd) ||
+        samePoint(node.end, originalStart) ||
+        samePoint(node.end, originalEnd)
+      )
     ) {
       continue
     }
@@ -62,6 +145,7 @@ function getLinkedFenceSnapshots(args: {
       id: node.id,
       start: [...node.start] as FencePlanPoint,
       end: [...node.end] as FencePlanPoint,
+      curveOffset: node.curveOffset,
     })
   }
 
@@ -77,6 +161,7 @@ function getLinkedFenceUpdates(
 ) {
   return linkedFences.map((fence) => ({
     id: fence.id,
+    curveOffset: fence.curveOffset,
     start: samePoint(fence.start, originalStart)
       ? nextStart
       : samePoint(fence.start, originalEnd)
@@ -112,6 +197,7 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> =
     }),
   )
   const previewRef = useRef<{ start: FencePlanPoint; end: FencePlanPoint } | null>(null)
+  const [angleLabel, setAngleLabel] = useState<AngleLabelState>(null)
 
   const [cursorLocalPos, setCursorLocalPos] = useState<[number, number, number]>(() => {
     const point = target.endpoint === 'start' ? target.fence.start : target.fence.end
@@ -158,27 +244,35 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> =
     const applyPreview = (movingPoint: FencePlanPoint, detachLinkedFences = false) => {
       const nextStart = target.endpoint === 'start' ? movingPoint : fixedPoint
       const nextEnd = target.endpoint === 'end' ? movingPoint : fixedPoint
+      const linkedUpdates = detachLinkedFences
+        ? []
+        : getLinkedFenceUpdates(
+            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 },
-        ...(detachLinkedFences
-          ? []
-          : getLinkedFenceUpdates(
-              linkedOriginalsRef.current,
-              originalStart,
-              originalEnd,
-              nextStart,
-              nextEnd,
-            )),
-      ])
+      setAngleLabel(
+        getEndpointAngleLabel({
+          preview: { start: nextStart, end: nextEnd, curveOffset: target.fence.curveOffset },
+          segments: [...getReferenceSegments(levelWalls, levelFences), ...linkedUpdates],
+          nodeId,
+        }),
+      )
+      applyNodePreview([{ id: nodeId, start: nextStart, end: nextEnd }, ...linkedUpdates])
     }
 
-    const restoreOriginal = () => {
+    const restoreOriginal = (clearAngleLabel = true) => {
       applyNodePreview([
         { id: nodeId, start: originalStart, end: originalEnd },
         ...linkedOriginalsRef.current,
       ])
+      if (clearAngleLabel) {
+        setAngleLabel(null)
+      }
     }
 
     const onGridMove = (event: GridEvent) => {
@@ -211,8 +305,9 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> =
       }
 
       const preview = previewRef.current ?? { start: originalStart, end: originalEnd }
-      const hasChanged =
-        !samePoint(preview.start, originalStart) || !samePoint(preview.end, originalEnd)
+      const hasChanged = !(
+        samePoint(preview.start, originalStart) && samePoint(preview.end, originalEnd)
+      )
 
       if (hasChanged && isWallLongEnough(preview.start, preview.end)) {
         wasCommitted = true
@@ -240,6 +335,7 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> =
       }
 
       useViewer.getState().setSelection({ selectedIds: [nodeId] })
+      setAngleLabel(null)
       exitMoveMode()
       event.nativeEvent?.stopPropagation?.()
     }
@@ -248,6 +344,7 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> =
       restoreOriginal()
       useViewer.getState().setSelection({ selectedIds: [nodeId] })
       resumeSceneHistory(useScene)
+      setAngleLabel(null)
       markToolCancelConsumed()
       exitMoveMode()
     }
@@ -290,7 +387,7 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> =
 
     return () => {
       if (!wasCommitted) {
-        restoreOriginal()
+        restoreOriginal(false)
       }
       resumeSceneHistory(useScene)
       emitter.off('grid:move', onGridMove)
@@ -312,7 +409,7 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> =
       >
         <div className="translate-y-10">
           <div
-            className={`whitespace-nowrap rounded-full border px-2 py-1 text-[11px] font-medium shadow-lg backdrop-blur-md transition-colors ${
+            className={`whitespace-nowrap rounded-full border px-2 py-1 font-medium text-[11px] shadow-lg backdrop-blur-md transition-colors ${
               altPressed
                 ? 'border-amber-500/70 bg-amber-500/15 text-amber-100'
                 : 'border-border/70 bg-background/90 text-foreground/80'
@@ -322,6 +419,23 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> =
           </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 font-semibold text-[11px] text-foreground shadow-lg backdrop-blur-md">
+        {label}
+      </div>
+    </Html>
+  )
+}