@pascal-app/editor 0.5.1 → 0.7.0

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

@@ -1,12 +1,39 @@
-import { useScene, type WallNode, WallNode as WallSchema } from '@pascal-app/core'
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type DoorNode,
+  getScaledDimensions,
+  getWallCurveFrameAt,
+  getWallCurveLength,
+  type ItemNode,
+  isCurvedWall,
+  useScene,
+  type WallNode,
+  WallNode as WallSchema,
+  type WindowNode,
+} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { sfxEmitter } from '../../../lib/sfx-bus'
+import useEditor from '../../../store/use-editor'
 
 export type WallPlanPoint = [number, number]
 
 export const WALL_GRID_STEP = 0.5
 export const WALL_JOIN_SNAP_RADIUS = 0.35
 export const WALL_MIN_LENGTH = 0.01
+const DEFAULT_WALL_ANGLE_SNAP_STEP = Math.PI / 4
+
+const WALL_ANGLE_SNAP_BY_GRID_STEP: Record<number, number> = {
+  0.5: Math.PI / 4,
+  0.25: Math.PI / 8,
+  0.1: Math.PI / 12,
+  0.05: Math.PI / 36,
+}
+
+type WallSplitIntersection = {
+  wallId: WallNode['id']
+  point: WallPlanPoint
+}
 
 function distanceSquared(a: WallPlanPoint, b: WallPlanPoint): number {
   const dx = a[0] - b[0]
@@ -14,7 +41,11 @@ function distanceSquared(a: WallPlanPoint, b: WallPlanPoint): number {
   return dx * dx + dz * dz
 }
 
-function snapScalarToGrid(value: number, step = WALL_GRID_STEP): number {
+export function getWallGridStep(): number {
+  return useEditor.getState().gridSnapStep
+}
+
+export function snapScalarToGrid(value: number, step = WALL_GRID_STEP): number {
   return Math.round(value / step) * step
 }
 
@@ -22,17 +53,26 @@ export function snapPointToGrid(point: WallPlanPoint, step = WALL_GRID_STEP): Wa
   return [snapScalarToGrid(point[0], step), snapScalarToGrid(point[1], step)]
 }
 
-export function snapPointTo45Degrees(start: WallPlanPoint, cursor: WallPlanPoint): WallPlanPoint {
+export function snapPointTo45Degrees(
+  start: WallPlanPoint,
+  cursor: WallPlanPoint,
+  step = WALL_GRID_STEP,
+  angleStep = DEFAULT_WALL_ANGLE_SNAP_STEP,
+): WallPlanPoint {
   const dx = cursor[0] - start[0]
   const dz = cursor[1] - start[1]
   const angle = Math.atan2(dz, dx)
-  const snappedAngle = Math.round(angle / (Math.PI / 4)) * (Math.PI / 4)
+  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,
-  ])
+  return snapPointToGrid(
+    [start[0] + Math.cos(snappedAngle) * distance, start[1] + Math.sin(snappedAngle) * distance],
+    step,
+  )
+}
+
+export function getWallAngleSnapStep(step = getWallGridStep()): number {
+  return WALL_ANGLE_SNAP_BY_GRID_STEP[step] ?? DEFAULT_WALL_ANGLE_SNAP_STEP
 }
 
 function projectPointOntoWall(point: WallPlanPoint, wall: WallNode): WallPlanPoint | null {
@@ -53,6 +93,237 @@ function projectPointOntoWall(point: WallPlanPoint, wall: WallNode): WallPlanPoi
   return [x1 + dx * t, z1 + dz * t]
 }
 
+function splitWallAtPoint(wall: WallNode, splitPoint: WallPlanPoint): [WallNode, WallNode] {
+  const { id: _id, parentId: _parentId, children, ...rest } = wall
+
+  const first = WallSchema.parse({
+    ...rest,
+    start: wall.start,
+    end: splitPoint,
+    children: [],
+  })
+  const second = WallSchema.parse({
+    ...rest,
+    start: splitPoint,
+    end: wall.end,
+    children: [],
+  })
+
+  return [first, second]
+}
+
+function pointsEqual(a: WallPlanPoint, b: WallPlanPoint, tolerance = 1e-6): boolean {
+  return distanceSquared(a, b) <= tolerance * tolerance
+}
+
+function findWallIntersection(
+  point: WallPlanPoint,
+  walls: WallNode[],
+  ignoreWallIds?: string[],
+): WallSplitIntersection | null {
+  const ignore = new Set(ignoreWallIds ?? [])
+  let best: WallSplitIntersection | null = null
+  let bestDistanceSquared = Number.POSITIVE_INFINITY
+
+  for (const wall of walls) {
+    if (ignore.has(wall.id)) continue
+
+    const projected = projectPointOntoWall(point, wall)
+    if (!projected) continue
+
+    const candidateDistanceSquared = distanceSquared(point, projected)
+    if (
+      candidateDistanceSquared > WALL_JOIN_SNAP_RADIUS * WALL_JOIN_SNAP_RADIUS ||
+      candidateDistanceSquared >= bestDistanceSquared
+    ) {
+      continue
+    }
+
+    best = { wallId: wall.id, point: projected }
+    bestDistanceSquared = candidateDistanceSquared
+  }
+
+  return best
+}
+
+function wallHasAttachments(wall: WallNode, nodes: ReturnType<typeof useScene.getState>['nodes']) {
+  if ((wall.children?.length ?? 0) > 0) {
+    return true
+  }
+
+  return Object.values(nodes).some((node) => {
+    if (!node) return false
+    if ('parentId' in node && node.parentId === wall.id) return true
+    if ('wallId' in node && typeof node.wallId === 'string' && node.wallId === wall.id) return true
+    return false
+  })
+}
+
+function wallLength(wall: Pick<WallNode, 'start' | 'end'>) {
+  return Math.hypot(wall.end[0] - wall.start[0], wall.end[1] - wall.start[1])
+}
+
+function getWallAttachmentSpan(node: AnyNode): { min: number; max: number; center: number } | null {
+  if (node.type === 'door') {
+    const door = node as DoorNode
+    return {
+      min: door.position[0] - door.width / 2,
+      max: door.position[0] + door.width / 2,
+      center: door.position[0],
+    }
+  }
+
+  if (node.type === 'window') {
+    const win = node as WindowNode
+    return {
+      min: win.position[0] - win.width / 2,
+      max: win.position[0] + win.width / 2,
+      center: win.position[0],
+    }
+  }
+
+  if (node.type === 'item') {
+    const item = node as ItemNode
+    if (item.asset.attachTo !== 'wall' && item.asset.attachTo !== 'wall-side') {
+      return null
+    }
+
+    const [width] = getScaledDimensions(item)
+    return {
+      min: item.position[0] - width / 2,
+      max: item.position[0] + width / 2,
+      center: item.position[0],
+    }
+  }
+
+  return null
+}
+
+function remapAttachmentToWall(
+  node: AnyNode,
+  nextWallId: WallNode['id'],
+  nextLocalX: number,
+  nextWallLength: number,
+): Partial<AnyNode> | null {
+  const clampedX = Math.max(0, Math.min(nextWallLength, nextLocalX))
+
+  if (node.type === 'door' || node.type === 'window' || node.type === 'item') {
+    const currentPosition = 'position' in node ? node.position : null
+    if (!currentPosition) return null
+
+    const nextPosition: typeof currentPosition = [
+      clampedX,
+      currentPosition[1],
+      currentPosition[2],
+    ] as typeof currentPosition
+
+    return {
+      parentId: nextWallId,
+      position: nextPosition,
+      ...(node.type === 'item'
+        ? {
+            wallId: nextWallId,
+            wallT: nextWallLength > 1e-6 ? clampedX / nextWallLength : 0,
+          }
+        : {
+            wallId: nextWallId,
+          }),
+    } as Partial<AnyNode>
+  }
+
+  return null
+}
+
+function buildAttachmentMigrationPlan(
+  wall: WallNode,
+  splitPoint: WallPlanPoint,
+  firstWall: WallNode,
+  secondWall: WallNode,
+  nodes: ReturnType<typeof useScene.getState>['nodes'],
+): { id: AnyNodeId; data: Partial<AnyNode> }[] | null {
+  const splitDistance = Math.hypot(splitPoint[0] - wall.start[0], splitPoint[1] - wall.start[1])
+  const firstLength = wallLength(firstWall)
+  const secondLength = wallLength(secondWall)
+  const tolerance = 1e-4
+  const updates: { id: AnyNodeId; data: Partial<AnyNode> }[] = []
+
+  for (const childId of wall.children ?? []) {
+    const childNode = nodes[childId as AnyNodeId]
+    if (!childNode) continue
+
+    const span = getWallAttachmentSpan(childNode)
+    if (!span) {
+      return null
+    }
+
+    if (span.max <= splitDistance + tolerance) {
+      const nextUpdate = remapAttachmentToWall(childNode, firstWall.id, span.center, firstLength)
+      if (!nextUpdate) return null
+      updates.push({ id: childNode.id as AnyNodeId, data: nextUpdate })
+      continue
+    }
+
+    if (span.min >= splitDistance - tolerance) {
+      const nextUpdate = remapAttachmentToWall(
+        childNode,
+        secondWall.id,
+        span.center - splitDistance,
+        secondLength,
+      )
+      if (!nextUpdate) return null
+      updates.push({ id: childNode.id as AnyNodeId, data: nextUpdate })
+      continue
+    }
+
+    return null
+  }
+
+  return updates
+}
+
+function splitWallIfNeeded(
+  intersection: WallSplitIntersection | null,
+  walls: WallNode[],
+  nodes: ReturnType<typeof useScene.getState>['nodes'],
+  createNodes: ReturnType<typeof useScene.getState>['createNodes'],
+  updateNodes: ReturnType<typeof useScene.getState>['updateNodes'],
+  deleteNode: ReturnType<typeof useScene.getState>['deleteNode'],
+): { walls: WallNode[]; point: WallPlanPoint } | null {
+  if (!intersection) return null
+
+  const wallToSplit = walls.find((wall) => wall.id === intersection.wallId)
+  if (!wallToSplit) {
+    return { walls, point: intersection.point }
+  }
+
+  const [first, second] = splitWallAtPoint(wallToSplit, intersection.point)
+  const attachmentUpdates = buildAttachmentMigrationPlan(
+    wallToSplit,
+    intersection.point,
+    first,
+    second,
+    nodes,
+  )
+
+  if (wallHasAttachments(wallToSplit, nodes) && !attachmentUpdates) {
+    return { walls, point: intersection.point }
+  }
+
+  createNodes([
+    { node: first, parentId: wallToSplit.parentId as AnyNodeId | undefined },
+    { node: second, parentId: wallToSplit.parentId as AnyNodeId | undefined },
+  ])
+  if (attachmentUpdates && attachmentUpdates.length > 0) {
+    updateNodes(attachmentUpdates)
+  }
+  deleteNode(wallToSplit.id as AnyNodeId)
+
+  return {
+    walls: [...walls.filter((wall) => wall.id !== wallToSplit.id), first, second],
+    point: intersection.point,
+  }
+}
+
 export function findWallSnapTarget(
   point: WallPlanPoint,
   walls: WallNode[],
@@ -68,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
@@ -102,7 +379,12 @@ export function snapWallDraftPoint(args: {
   ignoreWallIds?: string[]
 }): WallPlanPoint {
   const { point, walls, start, angleSnap = false, ignoreWallIds } = args
-  const basePoint = start && angleSnap ? snapPointTo45Degrees(start, point) : snapPointToGrid(point)
+  const step = getWallGridStep()
+  const angleStep = getWallAngleSnapStep(step)
+  const basePoint =
+    start && angleSnap
+      ? snapPointTo45Degrees(start, point, step, angleStep)
+      : snapPointToGrid(point, step)
 
   return (
     findWallSnapTarget(basePoint, walls, {
@@ -120,17 +402,66 @@ export function createWallOnCurrentLevel(
   end: WallPlanPoint,
 ): WallNode | null {
   const currentLevelId = useViewer.getState().selection.levelId
-  const { createNode, nodes } = useScene.getState()
+  const { createNode, createNodes, deleteNode, nodes } = useScene.getState()
+  const { updateNodes } = useScene.getState()
 
   if (!(currentLevelId && isWallLongEnough(start, end))) {
     return null
   }
 
+  let workingWalls = Object.values(nodes).filter(
+    (node): node is WallNode => node?.type === 'wall' && node.parentId === currentLevelId,
+  )
+
+  let resolvedStart = start
+  let resolvedEnd = end
+
+  const endIntersection = findWallIntersection(resolvedEnd, workingWalls)
+  const splitEnd = splitWallIfNeeded(
+    endIntersection,
+    workingWalls,
+    nodes,
+    createNodes,
+    updateNodes,
+    deleteNode,
+  )
+  if (splitEnd) {
+    workingWalls = splitEnd.walls
+    resolvedEnd = splitEnd.point
+  }
+
+  const startIntersection = findWallIntersection(resolvedStart, workingWalls)
+  const splitStart = splitWallIfNeeded(
+    startIntersection,
+    workingWalls,
+    nodes,
+    createNodes,
+    updateNodes,
+    deleteNode,
+  )
+  if (splitStart) {
+    workingWalls = splitStart.walls
+    resolvedStart = splitStart.point
+  }
+
+  if (!isWallLongEnough(resolvedStart, resolvedEnd) || pointsEqual(resolvedStart, resolvedEnd)) {
+    return null
+  }
+
+  const duplicateWall = workingWalls.some(
+    (wall) =>
+      (pointsEqual(wall.start, resolvedStart) && pointsEqual(wall.end, resolvedEnd)) ||
+      (pointsEqual(wall.start, resolvedEnd) && pointsEqual(wall.end, resolvedStart)),
+  )
+  if (duplicateWall) {
+    return null
+  }
+
   const wallCount = Object.values(nodes).filter((node) => node.type === 'wall').length
   const wall = WallSchema.parse({
     name: `Wall ${wallCount + 1}`,
-    start,
-    end,
+    start: resolvedStart,
+    end: resolvedEnd,
   })
 
   createNode(wall, currentLevelId)

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>
+  )
+}