@pascal-app/editor 0.4.0 → 0.6.0

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

@@ -4,9 +4,14 @@ import {
   type AnyNodeId,
   calculateLevelMiters,
   DEFAULT_WALL_HEIGHT,
+  getWallCurveLength,
+  getWallMiterBoundaryPoints,
   getWallPlanFootprint,
+  getWallSurfacePolygon,
+  isCurvedWall,
   type Point2D,
   pointToKey,
+  sampleWallCenterline,
   sceneRegistry,
   useScene,
   type WallMiterData,
@@ -15,7 +20,7 @@ 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
@@ -28,8 +33,7 @@ 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
@@ -56,18 +60,19 @@ export function WallMeasurementLabel() {
   const selectedNode = selectedId ? nodes[selectedId as WallNode['id']] : null
   const wall = selectedNode?.type === 'wall' ? selectedNode : null
 
-  const [wallObject, setWallObject] = useState<THREE.Object3D | null>(null)
-
-  useEffect(() => {
-    setWallObject(null)
-  }, [selectedId])
+  const [wallObjectState, setWallObjectState] = useState<{
+    id: WallNode['id']
+    object: THREE.Object3D
+  } | null>(null)
+  const wallObject =
+    selectedId && wallObjectState?.id === selectedId ? wallObjectState.object : null
 
   useFrame(() => {
     if (!selectedId || wallObject) return
 
     const nextWallObject = sceneRegistry.nodes.get(selectedId)
     if (nextWallObject) {
-      setWallObject(nextWallObject)
+      setWallObjectState({ id: selectedId as WallNode['id'], object: nextWallObject })
     }
   })
 
@@ -131,6 +136,34 @@ function worldPointToWallLocal(wall: WallNode, point: Point2D): Vec3 {
   return [dx * cosA - dz * sinA, 0, dx * sinA + dz * cosA]
 }
 
+function getWallExteriorOffsetSign(wall: Pick<WallNode, 'frontSide' | 'backSide'>) {
+  if (wall.frontSide === 'exterior' && wall.backSide !== 'exterior') {
+    return 1
+  }
+
+  if (wall.backSide === 'exterior' && wall.frontSide !== 'exterior') {
+    return -1
+  }
+
+  return 1
+}
+
+function getCurvedWallMeasurementPath(wall: WallNode, miterData: WallMiterData): 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)
+  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[] }>,
@@ -143,31 +176,66 @@ function buildMeasurementGuide(
   const height = wall.height ?? DEFAULT_WALL_HEIGHT
   const startLocal = worldPointToWallLocal(wall, middlePoints.start)
   const endLocal = worldPointToWallLocal(wall, middlePoints.end)
+  const curvedMeasurementPath = isCurvedWall(wall)
+    ? getCurvedWallMeasurementPath(wall, miterData)
+    : 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])
+  }
 
-  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)
-
-  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)
 
   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]],
   }
 }
 
@@ -208,6 +276,16 @@ 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 WallMeasurementAnnotation({ wall }: { wall: WallNode }) {
   const nodes = useScene((state) => state.nodes)
   const theme = useViewer((state) => state.theme)
@@ -216,10 +294,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,12 +302,26 @@ 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)
 
   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} />
 

package/src/components/systems/ceiling/ceiling-selection-affordance-system.tsx

@@ -0,0 +1,272 @@
+'use client'
+
+import {
+  type CeilingNode,
+  emitter,
+  resolveLevelId,
+  sceneRegistry,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { createPortal, type ThreeEvent } from '@react-three/fiber'
+import { useEffect, useMemo, useState } from 'react'
+import type { Object3D } from 'three'
+import { useShallow } from 'zustand/react/shallow'
+import useEditor from '../../../store/use-editor'
+
+const BRACKET_THICKNESS = 0.04
+const BRACKET_HEIGHT = 0.04
+const BRACKET_Y_OFFSET = 0.035
+const HIT_BOX_SIZE: [number, number, number] = [0.28, 0.08, 0.28]
+
+type CornerBracketData = {
+  corner: [number, number]
+  incomingDirection: [number, number]
+  outgoingDirection: [number, number]
+  incomingLength: number
+  outgoingLength: number
+  cornerStrength: number
+}
+
+export const CeilingSelectionAffordanceSystem = () => {
+  const phase = useEditor((state) => state.phase)
+  const mode = useEditor((state) => state.mode)
+  const structureLayer = useEditor((state) => state.structureLayer)
+  const movingNode = useEditor((state) => state.movingNode)
+  const curvingWall = useEditor((state) => state.curvingWall)
+  const currentLevelId = useViewer((state) => state.selection.levelId)
+
+  const ceilings = useScene(
+    useShallow((state) =>
+      Object.values(state.nodes).filter((node): node is CeilingNode => {
+        return (
+          node.type === 'ceiling' &&
+          node.visible !== false &&
+          currentLevelId !== null &&
+          resolveLevelId(node, state.nodes) === currentLevelId
+        )
+      }),
+    ),
+  )
+
+  const shouldRender =
+    phase === 'structure' &&
+    mode === 'select' &&
+    structureLayer === 'elements' &&
+    !movingNode &&
+    !curvingWall &&
+    currentLevelId !== null
+
+  if (!shouldRender) return null
+
+  return (
+    <>
+      {ceilings.map((ceiling) => (
+        <CeilingSelectionAffordance ceiling={ceiling} key={ceiling.id} levelId={currentLevelId} />
+      ))}
+    </>
+  )
+}
+
+const CeilingSelectionAffordance = ({
+  ceiling,
+  levelId,
+}: {
+  ceiling: CeilingNode
+  levelId: string
+}) => {
+  const [levelObject, setLevelObject] = useState<Object3D | null>(() => sceneRegistry.nodes.get(levelId) ?? null)
+
+  const corners = useMemo(() => buildCornerBrackets(ceiling.polygon), [ceiling.polygon])
+
+  useEffect(() => {
+    let frameId = 0
+
+    const resolveLevelObject = () => {
+      const nextLevelObject = sceneRegistry.nodes.get(levelId) ?? null
+      setLevelObject((currentLevelObject) => {
+        if (currentLevelObject === nextLevelObject) {
+          return currentLevelObject
+        }
+        return nextLevelObject
+      })
+
+      if (!nextLevelObject) {
+        frameId = window.requestAnimationFrame(resolveLevelObject)
+      }
+    }
+
+    resolveLevelObject()
+
+    return () => {
+      if (frameId) {
+        window.cancelAnimationFrame(frameId)
+      }
+    }
+  }, [levelId])
+
+  if (!levelObject || corners.length === 0) return null
+
+  return createPortal(
+    <group position={[0, (ceiling.height ?? 2.5) + BRACKET_Y_OFFSET, 0]}>
+      {corners.map((corner, index) => (
+        <CornerBracket
+          ceiling={ceiling}
+          corner={corner}
+          key={`${ceiling.id}-corner-${index}`}
+        />
+      ))}
+    </group>,
+    levelObject,
+  )
+}
+
+const CornerBracket = ({
+  ceiling,
+  corner,
+}: {
+  ceiling: CeilingNode
+  corner: CornerBracketData
+}) => {
+  const [isHovered, setIsHovered] = useState(false)
+  const color = '#d4d4d4'
+  const opacity = 0.72
+  const cubeColor = isHovered ? '#818cf8' : '#d4d4d4'
+  const cubeOpacity = isHovered ? 0.92 : 0.72
+
+  const handleClick = (e: ThreeEvent<MouseEvent>) => {
+    e.stopPropagation()
+
+    const nodes = useScene.getState().nodes
+
+    useEditor.getState().setMovingNode(null)
+    useEditor.getState().setMovingWallEndpoint(null)
+    useEditor.getState().setCurvingWall(null)
+    useEditor.getState().setEditingHole(null)
+    useEditor.getState().setMode('select')
+
+    emitter.emit('ceiling:click' as any, {
+      node: ceiling,
+      nativeEvent: e.nativeEvent,
+      localPosition: [0, 0, 0],
+      position: [corner.corner[0], ceiling.height ?? 2.5, corner.corner[1]],
+      stopPropagation: () => e.stopPropagation(),
+    })
+  }
+
+  return (
+    <group position={[corner.corner[0], 0, corner.corner[1]]}>
+      <BracketLeg
+        color={color}
+        direction={corner.incomingDirection}
+        length={corner.incomingLength}
+        onClick={handleClick}
+        opacity={opacity}
+      />
+      <BracketLeg
+        color={color}
+        direction={corner.outgoingDirection}
+        length={corner.outgoingLength}
+        onClick={handleClick}
+        opacity={opacity}
+      />
+
+      <mesh
+        onClick={handleClick}
+        onPointerEnter={(e) => {
+          e.stopPropagation()
+          setIsHovered(true)
+        }}
+        onPointerLeave={(e) => {
+          e.stopPropagation()
+          setIsHovered(false)
+        }}
+      >
+        <boxGeometry args={HIT_BOX_SIZE} />
+        <meshBasicMaterial color={cubeColor} depthWrite={false} opacity={cubeOpacity} transparent />
+      </mesh>
+    </group>
+  )
+}
+
+const BracketLeg = ({
+  direction,
+  length,
+  color,
+  onClick,
+  opacity,
+}: {
+  direction: [number, number]
+  length: number
+  color: string
+  onClick: (e: ThreeEvent<MouseEvent>) => void
+  opacity: number
+}) => {
+  const angle = Math.atan2(direction[1], direction[0])
+  const position: [number, number, number] = [
+    direction[0] * (length / 2),
+    0,
+    direction[1] * (length / 2),
+  ]
+
+  return (
+    <mesh
+      onClick={onClick}
+      position={position}
+      rotation={[0, angle, 0]}
+    >
+      <boxGeometry args={[length, BRACKET_HEIGHT, BRACKET_THICKNESS]} />
+      <meshBasicMaterial color={color} depthWrite={false} opacity={opacity} transparent />
+    </mesh>
+  )
+}
+
+function buildCornerBrackets(polygon: Array<[number, number]>): CornerBracketData[] {
+  if (polygon.length < 3) return []
+
+  const allCorners = polygon.map((corner, index) => {
+    const previous = polygon[(index - 1 + polygon.length) % polygon.length]!
+    const next = polygon[(index + 1) % polygon.length]!
+    const incomingVector = [previous[0] - corner[0], previous[1] - corner[1]] as [number, number]
+    const outgoingVector = [next[0] - corner[0], next[1] - corner[1]] as [number, number]
+    const incomingDirection = normalize2D(incomingVector)
+    const outgoingDirection = normalize2D(outgoingVector)
+
+    const incomingLength = Math.hypot(incomingVector[0], incomingVector[1])
+    const outgoingLength = Math.hypot(outgoingVector[0], outgoingVector[1])
+    const cornerStrength = 1 - Math.abs(incomingDirection[0] * outgoingDirection[0] + incomingDirection[1] * outgoingDirection[1])
+
+    return {
+      corner,
+      incomingDirection,
+      outgoingDirection,
+      incomingLength: getBracketLength(incomingLength),
+      outgoingLength: getBracketLength(outgoingLength),
+      cornerStrength,
+    }
+  })
+
+  if (allCorners.length <= 4) {
+    return allCorners
+  }
+
+  const selectedIndices = new Set(
+    allCorners
+      .map((corner, index) => ({ index, strength: corner.cornerStrength }))
+      .sort((a, b) => b.strength - a.strength)
+      .slice(0, 4)
+      .map(({ index }) => index),
+  )
+
+  return allCorners.filter((_, index) => selectedIndices.has(index))
+}
+
+function normalize2D(vector: [number, number]): [number, number] {
+  const length = Math.hypot(vector[0], vector[1])
+  if (length < 1e-6) return [1, 0]
+  return [vector[0] / length, vector[1] / length]
+}
+
+function getBracketLength(edgeLength: number): number {
+  return Math.max(0.14, Math.min(0.38, edgeLength * 0.22))
+}

package/src/components/systems/roof/roof-edit-system.tsx

@@ -6,7 +6,7 @@ import { useEffect, useRef } from 'react'
  * Imperatively toggles the Three.js visibility of roof objects based on the
  * editor selection — without causing React re-renders in RoofRenderer.
  *
- * When a roof (or one of its segments) is selected:
+ * When a roof-segment is selected:
  *   - merged-roof mesh is hidden
  *   - segments-wrapper group is shown (individual segments visible for editing)
  *   - all children are marked dirty so RoofSystem rebuilds their geometry
@@ -22,14 +22,14 @@ export const RoofEditSystem = () => {
   useEffect(() => {
     const nodes = useScene.getState().nodes
 
-    // Collect which roof nodes should be in "edit mode"
+    // Collect which roof nodes should be in "edit mode".
+    // Selecting the roof itself should keep the merged visual intact so
+    // material appearance does not jump between merged and per-segment meshes.
     const activeRoofIds = new Set<string>()
     for (const id of selectedIds) {
       const node = nodes[id as AnyNodeId]
       if (!node) continue
-      if (node.type === 'roof') {
-        activeRoofIds.add(id)
-      } else if (node.type === 'roof-segment' && node.parentId) {
+      if (node.type === 'roof-segment' && node.parentId) {
         activeRoofIds.add(node.parentId)
       }
     }

package/src/components/systems/stair/stair-edit-system.tsx

@@ -1,6 +1,6 @@
 import { type AnyNodeId, type StairNode, sceneRegistry, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 
 /**
  * Imperatively toggles the Three.js visibility of stair objects based on the
@@ -17,6 +17,27 @@ import { useEffect, useRef } from 'react'
  */
 export const StairEditSystem = () => {
   const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const selectedStairSignature = useScene(
+    useCallback(
+      (state) =>
+        selectedIds
+          .map((id) => {
+            const node = state.nodes[id as AnyNodeId]
+            if (!node) return null
+            if (node.type === 'stair') {
+              return `${node.id}:${node.stairType}`
+            }
+            if (node.type === 'stair-segment' && node.parentId) {
+              const parent = state.nodes[node.parentId as AnyNodeId] as StairNode | undefined
+              return parent?.type === 'stair' ? `${parent.id}:${parent.stairType}` : null
+            }
+            return null
+          })
+          .filter(Boolean)
+          .join('|'),
+      [selectedIds],
+    ),
+  )
   const prevActiveStairIds = useRef(new Set<string>())
 
   useEffect(() => {
@@ -41,14 +62,15 @@ export const StairEditSystem = () => {
       const group = sceneRegistry.nodes.get(stairId)
       if (!group) continue
 
+      const stairNode = nodes[stairId as AnyNodeId] as StairNode | undefined
+      const isCurved = stairNode?.stairType === 'curved' || stairNode?.stairType === 'spiral'
       const mergedMesh = group.getObjectByName('merged-stair')
       const segmentsWrapper = group.getObjectByName('segments-wrapper')
       const isActive = activeStairIds.has(stairId)
 
-      if (mergedMesh) mergedMesh.visible = !isActive
-      if (segmentsWrapper) segmentsWrapper.visible = isActive
+      if (mergedMesh) mergedMesh.visible = !isActive && !isCurved
+      if (segmentsWrapper) segmentsWrapper.visible = isActive && !isCurved
 
-      const stairNode = nodes[stairId as AnyNodeId] as StairNode | undefined
       if (stairNode?.children?.length) {
         const wasActive = prevActiveStairIds.current.has(stairId)
         if (isActive !== wasActive) {
@@ -63,7 +85,7 @@ export const StairEditSystem = () => {
     }
 
     prevActiveStairIds.current = activeStairIds
-  }, [selectedIds])
+  }, [selectedIds, selectedStairSignature])
 
   return null
 }