@pascal-app/editor 0.9.1 → 1.0.0-beta.1

package/src/components/editor/use-floorplan-hit-testing.ts

@@ -1,195 +1,178 @@
 'use client'
 
-import type {
-  AnyNode,
-  CeilingNode,
-  ColumnNode,
-  DoorNode,
-  ElevatorNode,
-  ItemNode,
-  Point2D,
-  RoofNode,
-  RoofSegmentNode,
-  SlabNode,
-  StairNode,
-  StairSegmentNode,
-  WallNode,
-  WindowNode,
-} from '@pascal-app/core'
-import { useCallback } from 'react'
-import {
-  getFloorplanHitNodeId,
-  getFloorplanSelectionIdsInBounds,
-} from '../../lib/floorplan/selection-tool'
+import { type RefObject, useCallback } from 'react'
 import type { FloorplanSelectionBounds } from '../../lib/floorplan/types'
+import {
+  type Point2 as MarqueePoint2,
+  polygonsIntersect,
+  segmentIntersectsPolygon,
+} from '../tools/select/marquee-geometry'
+import { collectSelectableCandidateIds } from '../tools/select/select-candidates'
 import type { WallPlanPoint } from '../tools/wall/wall-drafting'
 
-type OpeningNode = WindowNode | DoorNode
+const REGISTRY_ENTRY_SELECTOR = '.floorplan-registry-base .floorplan-registry-entry[data-node-id]'
+const REGISTRY_GEOMETRY_SELECTOR = 'path, polygon, polyline, rect, circle, line, image'
+const POINT_HIT_EPSILON = 1e-4
 
-type WallPolygonEntry = {
-  wall: WallNode
-  polygon: Point2D[]
+type FloorplanHitTestingOptions = {
+  sceneRef: RefObject<SVGGElement | null>
 }
 
-type OpeningPolygonEntry = {
-  opening: OpeningNode
-  polygon: Point2D[]
+function boundsPolygon(bounds: FloorplanSelectionBounds): MarqueePoint2[] {
+  return [
+    [bounds.minX, bounds.minY],
+    [bounds.maxX, bounds.minY],
+    [bounds.maxX, bounds.maxY],
+    [bounds.minX, bounds.maxY],
+  ]
 }
 
-type SlabPolygonEntry = {
-  slab: SlabNode
-  polygon: Point2D[]
-  holes: Point2D[][]
-}
+function transformElementBoxToScene(
+  element: SVGGraphicsElement,
+  scene: SVGGElement,
+): MarqueePoint2[] | null {
+  const elementMatrix = element.getScreenCTM()
+  const sceneMatrix = scene.getScreenCTM()
+  const svg = scene.ownerSVGElement
+  if (!(elementMatrix && sceneMatrix && svg)) {
+    return null
+  }
 
-type CeilingPolygonEntry = {
-  ceiling: CeilingNode
-  polygon: Point2D[]
-  holes: Point2D[][]
-}
+  let box: DOMRect
+  try {
+    box = element.getBBox()
+  } catch {
+    return null
+  }
 
-type ColumnPolygonEntry = {
-  column: ColumnNode
-  polygon: Point2D[]
+  const inverseSceneMatrix = sceneMatrix.inverse()
+  const corners: MarqueePoint2[] = [
+    [box.x, box.y],
+    [box.x + box.width, box.y],
+    [box.x + box.width, box.y + box.height],
+    [box.x, box.y + box.height],
+  ]
+  return corners.map(([x, y]) => {
+    const point = svg.createSVGPoint()
+    point.x = x
+    point.y = y
+    const screenPoint = point.matrixTransform(elementMatrix)
+    const scenePoint = screenPoint.matrixTransform(inverseSceneMatrix)
+    return [scenePoint.x, scenePoint.y] as MarqueePoint2
+  })
 }
 
-type ElevatorPolygonEntry = {
-  elevator: ElevatorNode
-  polygon: Point2D[]
-}
+function elementIntersectsPlanPolygon(
+  element: SVGGraphicsElement,
+  scene: SVGGElement,
+  selectionPolygon: MarqueePoint2[],
+): boolean {
+  const polygon = transformElementBoxToScene(element, scene)
+  if (!polygon) {
+    return false
+  }
 
-type FloorplanRoofEntry = {
-  roof: RoofNode
-  segments: Array<{
-    polygon: Point2D[]
-    segment: RoofSegmentNode
-  }>
-}
+  const [first, second, third] = polygon
+  if (!(first && second && third)) {
+    return false
+  }
 
-type FloorplanItemEntry = {
-  item: ItemNode
-  polygon: Point2D[]
-}
+  const width = Math.hypot(second[0] - first[0], second[1] - first[1])
+  const height = Math.hypot(third[0] - second[0], third[1] - second[1])
+  if (width <= POINT_HIT_EPSILON || height <= POINT_HIT_EPSILON) {
+    const end = width >= height ? second : third
+    return segmentIntersectsPolygon(first, end, selectionPolygon)
+  }
 
-type FloorplanStairSegmentEntry = {
-  polygon: Point2D[]
-  segment: StairSegmentNode | AnyNode
+  return polygonsIntersect(polygon, selectionPolygon)
 }
 
-type FloorplanStairEntry = {
-  hitPolygons: Point2D[][]
-  stair: StairNode
-  segments: FloorplanStairSegmentEntry[]
+export function collectRegistrySelectionIdsInBounds(
+  scene: SVGGElement,
+  bounds: FloorplanSelectionBounds,
+  candidateIds = collectSelectableCandidateIds(),
+): string[] {
+  const candidateIdSet = new Set(candidateIds)
+  const selectionPolygon = boundsPolygon(bounds)
+  const hitIds = new Set<string>()
+
+  for (const entry of scene.querySelectorAll<SVGGElement>(REGISTRY_ENTRY_SELECTOR)) {
+    const nodeId = entry.dataset.nodeId
+    if (!nodeId || !candidateIdSet.has(nodeId)) {
+      continue
+    }
+
+    const geometry = entry.querySelectorAll<SVGGraphicsElement>(REGISTRY_GEOMETRY_SELECTOR)
+    const elements = geometry.length > 0 ? Array.from(geometry) : [entry]
+    if (
+      elements.some((element) => elementIntersectsPlanPolygon(element, scene, selectionPolygon))
+    ) {
+      hitIds.add(nodeId)
+    }
+  }
+
+  return candidateIds.filter((id) => hitIds.has(id))
 }
 
-type UseFloorplanHitTestingArgs = {
-  ceilingPolygons: CeilingPolygonEntry[]
-  columnPolygons: ColumnPolygonEntry[]
-  displaySlabPolygons: SlabPolygonEntry[]
-  displayWallPolygons: WallPolygonEntry[]
-  floorplanElevatorEntries: ElevatorPolygonEntry[]
-  floorplanItemEntries: FloorplanItemEntry[]
-  floorplanOpeningHitTolerance: number
-  floorplanRoofEntries: FloorplanRoofEntry[]
-  floorplanStairEntries: FloorplanStairEntry[]
-  floorplanWallHitTolerance: number
-  getOpeningCenterLine: (polygon: Point2D[]) => { start: Point2D; end: Point2D } | null
-  isFloorplanItemContextActive: boolean
-  openingsPolygons: OpeningPolygonEntry[]
-  phase: 'site' | 'structure' | 'furnish'
-  toPoint2D: (point: WallPlanPoint) => Point2D
+export function getRegistryHitIdAtPlanPoint(
+  scene: SVGGElement,
+  planPoint: WallPlanPoint,
+  candidateIds = collectSelectableCandidateIds(),
+): string | null {
+  const sceneMatrix = scene.getScreenCTM()
+  const svg = scene.ownerSVGElement
+  if (!(sceneMatrix && svg)) {
+    return null
+  }
+
+  const point = svg.createSVGPoint()
+  point.x = planPoint[0]
+  point.y = planPoint[1]
+  const screenPoint = point.matrixTransform(sceneMatrix)
+  const candidateIdSet = new Set(candidateIds)
+
+  if (typeof document !== 'undefined' && typeof document.elementsFromPoint === 'function') {
+    for (const element of document.elementsFromPoint(screenPoint.x, screenPoint.y)) {
+      const entry = element.closest<SVGGElement>('.floorplan-registry-entry[data-node-id]')
+      const nodeId = entry?.dataset.nodeId
+      if (entry && nodeId && candidateIdSet.has(nodeId) && scene.contains(entry)) {
+        return nodeId
+      }
+    }
+  }
+
+  const hits = collectRegistrySelectionIdsInBounds(
+    scene,
+    {
+      minX: planPoint[0] - POINT_HIT_EPSILON,
+      maxX: planPoint[0] + POINT_HIT_EPSILON,
+      minY: planPoint[1] - POINT_HIT_EPSILON,
+      maxY: planPoint[1] + POINT_HIT_EPSILON,
+    },
+    candidateIds,
+  )
+  return hits.at(-1) ?? null
 }
 
-export function useFloorplanHitTesting({
-  ceilingPolygons,
-  columnPolygons,
-  displaySlabPolygons,
-  displayWallPolygons,
-  floorplanElevatorEntries,
-  floorplanItemEntries,
-  floorplanOpeningHitTolerance,
-  floorplanRoofEntries,
-  floorplanStairEntries,
-  floorplanWallHitTolerance,
-  getOpeningCenterLine,
-  isFloorplanItemContextActive,
-  openingsPolygons,
-  phase,
-  toPoint2D,
-}: UseFloorplanHitTestingArgs) {
+export function useFloorplanHitTesting({ sceneRef }: FloorplanHitTestingOptions) {
   const getFloorplanHitIdAtPoint = useCallback(
     (planPoint: WallPlanPoint) => {
-      const point = toPoint2D(planPoint)
-      return getFloorplanHitNodeId({
-        point,
-        ceilings: ceilingPolygons,
-        phase,
-        isItemContextActive: isFloorplanItemContextActive,
-        items: floorplanItemEntries,
-        openings: openingsPolygons,
-        roofs: floorplanRoofEntries,
-        stairs: floorplanStairEntries,
-        elevators: floorplanElevatorEntries,
-        walls: displayWallPolygons,
-        slabs: displaySlabPolygons,
-        openingHitTolerance: floorplanOpeningHitTolerance,
-        wallHitTolerance: floorplanWallHitTolerance,
-        columns: columnPolygons,
-        getOpeningCenterLine,
-      })
+      const scene = sceneRef.current
+      return scene ? getRegistryHitIdAtPlanPoint(scene, planPoint) : null
     },
-    [
-      ceilingPolygons,
-      columnPolygons,
-      displaySlabPolygons,
-      displayWallPolygons,
-      floorplanItemEntries,
-      floorplanElevatorEntries,
-      floorplanOpeningHitTolerance,
-      floorplanRoofEntries,
-      floorplanStairEntries,
-      floorplanWallHitTolerance,
-      getOpeningCenterLine,
-      isFloorplanItemContextActive,
-      openingsPolygons,
-      phase,
-      toPoint2D,
-    ],
+    [sceneRef],
   )
 
-  const getFloorplanSelectionIdsInBoundsForArea = useCallback(
-    (bounds: FloorplanSelectionBounds) =>
-      getFloorplanSelectionIdsInBounds({
-        bounds,
-        ceilings: ceilingPolygons,
-        phase,
-        isItemContextActive: isFloorplanItemContextActive,
-        items: floorplanItemEntries,
-        walls: displayWallPolygons,
-        openings: openingsPolygons,
-        roofs: floorplanRoofEntries,
-        slabs: displaySlabPolygons,
-        columns: columnPolygons,
-        elevators: floorplanElevatorEntries,
-        stairs: floorplanStairEntries,
-      }),
-    [
-      ceilingPolygons,
-      columnPolygons,
-      displaySlabPolygons,
-      displayWallPolygons,
-      floorplanItemEntries,
-      floorplanElevatorEntries,
-      floorplanRoofEntries,
-      floorplanStairEntries,
-      isFloorplanItemContextActive,
-      openingsPolygons,
-      phase,
-    ],
+  const getFloorplanSelectionIdsInBounds = useCallback(
+    (bounds: FloorplanSelectionBounds) => {
+      const scene = sceneRef.current
+      return scene ? collectRegistrySelectionIdsInBounds(scene, bounds) : []
+    },
+    [sceneRef],
   )
 
   return {
     getFloorplanHitIdAtPoint,
-    getFloorplanSelectionIdsInBounds: getFloorplanSelectionIdsInBoundsForArea,
+    getFloorplanSelectionIdsInBounds,
   }
 }

package/src/components/editor/use-floorplan-scene-data.ts

@@ -36,7 +36,7 @@ function useLevelChildren<TNode extends AnyNode>(
       }
 
       const levelNode = state.nodes[levelId]
-      if (!levelNode || levelNode.type !== 'level') {
+      if (levelNode?.type !== 'level') {
         return [] as TNode[]
       }
 
@@ -105,7 +105,7 @@ export function useFloorplanSceneData({
       }
 
       const buildingNode = state.nodes[currentBuildingId]
-      if (!buildingNode || buildingNode.type !== 'building') {
+      if (buildingNode?.type !== 'building') {
         return [] as LevelNode[]
       }
 
@@ -133,7 +133,7 @@ export function useFloorplanSceneData({
       }
 
       const nextLevelNode = state.nodes[levelId]
-      if (!nextLevelNode || nextLevelNode.type !== 'level') {
+      if (nextLevelNode?.type !== 'level') {
         return [] as RoofNode[]
       }
 
@@ -149,7 +149,7 @@ export function useFloorplanSceneData({
       }
 
       const nextLevelNode = state.nodes[levelId]
-      if (!nextLevelNode || nextLevelNode.type !== 'level') {
+      if (nextLevelNode?.type !== 'level') {
         return [] as OpeningNode[]
       }
 
@@ -171,7 +171,7 @@ export function useFloorplanSceneData({
       }
 
       const nextLevelNode = state.nodes[levelId]
-      if (!nextLevelNode || nextLevelNode.type !== 'level') {
+      if (nextLevelNode?.type !== 'level') {
         return [] as AnyNode[]
       }
 

package/src/components/editor/use-mesh-settle-epoch.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * Bumps after the 3D meshes have had a chance to settle following a scene
+ * change. `computeGroupBox` reads mesh WORLD bounds, but a scene commit
+ * (undo/redo included) reaches the meshes asynchronously — renderers
+ * reconcile on the next React commit and the geometry systems rebuild in the
+ * next frame — so anything that derives geometry from the meshes in the same
+ * render as the `nodes` change reads STALE positions. Depend on this epoch
+ * (alongside `nodes`) to recompute once more after two animation frames,
+ * when transforms and rebuilt geometry are in place.
+ */
+export function useMeshSettleEpoch(nodes: unknown): number {
+  const [epoch, setEpoch] = useState(0)
+  useEffect(() => {
+    void nodes
+    let raf2 = 0
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setEpoch((e) => e + 1))
+    })
+    return () => {
+      cancelAnimationFrame(raf1)
+      cancelAnimationFrame(raf2)
+    }
+  }, [nodes])
+  return epoch
+}

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

@@ -1,10 +1,11 @@
 'use client'
 
 import {
+  type AnyNode,
   type AnyNodeId,
   calculateLevelMiters,
-  DEFAULT_WALL_HEIGHT,
   getWallCurveLength,
+  getWallEffectiveHeightForNodes,
   getWallMiterBoundaryPoints,
   getWallPlanFootprint,
   getWallSurfacePolygon,
@@ -23,6 +24,7 @@ import { Html } from '@react-three/drei'
 import { createPortal, useFrame } from '@react-three/fiber'
 import { useMemo, useState } from 'react'
 import * as THREE from 'three'
+import { formatLinearMeasurement } from '../../lib/measurements'
 
 const GUIDE_Y_OFFSET = 0.08
 const LABEL_LIFT = 0.08
@@ -62,17 +64,6 @@ type WallFaceLine = {
   end: Point2D
 }
 
-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`
-}
-
 export function WallMeasurementLabel() {
   const selectedIds = useViewer((state) => state.selection.selectedIds)
   const nodes = useScene((state) => state.nodes)
@@ -101,10 +92,7 @@ export function WallMeasurementLabel() {
   return createPortal(<SelectedMeasurementAnnotation node={measurableNode} />, selectedObject)
 }
 
-function getLevelWalls(
-  wall: WallNode,
-  nodes: Record<string, WallNode | { type: string; children?: string[] }>,
-): WallNode[] {
+function getLevelWalls(wall: WallNode, nodes: Record<string, AnyNode>): WallNode[] {
   if (!wall.parentId) return [wall]
 
   const levelNode = nodes[wall.parentId as AnyNodeId]
@@ -318,7 +306,7 @@ function getCurvedWallMeasurementPath(
 
 function buildMeasurementGuide(
   wall: WallNode,
-  nodes: Record<string, WallNode | { type: string; children?: string[] }>,
+  nodes: Record<string, AnyNode>,
 ): MeasurementGuide | null {
   const levelWalls = getLevelWalls(wall, nodes)
   const miterData = calculateLevelMiters(levelWalls)
@@ -327,7 +315,7 @@ function buildMeasurementGuide(
   const measurementPoints = measurementLine ?? fallbackMiddlePoints
   if (!measurementPoints) return null
 
-  const height = wall.height ?? DEFAULT_WALL_HEIGHT
+  const height = getWallEffectiveHeightForNodes(wall, nodes)
   const startLocal = worldPointToWallLocal(wall, measurementPoints.start)
   const endLocal = worldPointToWallLocal(wall, measurementPoints.end)
   const curvedMeasurementPath = isCurvedWall(wall)
@@ -526,14 +514,7 @@ function WallMeasurementAnnotation({ wall }: { wall: WallNode }) {
   const color = isNight ? '#ffffff' : '#111111'
   const shadowColor = isNight ? '#111111' : '#ffffff'
 
-  const guide = useMemo(
-    () =>
-      buildMeasurementGuide(
-        wall,
-        nodes as Record<string, WallNode | { type: string; children?: string[] }>,
-      ),
-    [nodes, wall],
-  )
+  const guide = useMemo(() => buildMeasurementGuide(wall, nodes), [nodes, wall])
   const length = useMemo(() => {
     if (!guide?.guidePath?.length || guide.guidePath.length < 2) {
       return getWallCurveLength(wall)
@@ -547,8 +528,9 @@ function WallMeasurementAnnotation({ wall }: { wall: WallNode }) {
     }
     return total
   }, [guide, wall])
-  const label = formatMeasurement(length, unit)
-  const heightLabel = `H ${formatMeasurement(wall.height ?? DEFAULT_WALL_HEIGHT, unit)}`
+  const label = formatLinearMeasurement(length, unit)
+  const height = useMemo(() => getWallEffectiveHeightForNodes(wall, nodes), [nodes, wall])
+  const heightLabel = `H ${formatLinearMeasurement(height, unit)}`
 
   if (!(guide && Number.isFinite(length) && length >= 0.01)) return null