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

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

@@ -1,4 +1,5 @@
 import {
+  type AlignmentAnchor,
   type AnyNode,
   type AnyNodeId,
   collectAlignmentAnchors,
@@ -7,33 +8,94 @@ import {
   type LevelNode,
   RoofNode,
   RoofSegmentNode,
+  resolveBuildingForLevel,
   sceneRegistry,
-  snapScalar,
   useScene,
+  type WallNode,
+  wallSegmentAnchors,
 } from '@pascal-app/core'
-import { useAlignmentGuides } from '@pascal-app/editor'
+import { clearSurfacePlanSnapFeedback, resolveSurfacePlanPointSnap } from '@pascal-app/editor'
 import { useViewer } from '@pascal-app/viewer'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import * as THREE from 'three'
-import { BufferGeometry, DoubleSide, type Group, type Line, Vector3 } from 'three'
+import {
+  BufferGeometry,
+  DoubleSide,
+  Float32BufferAttribute,
+  type Group,
+  type Line,
+  Vector3,
+} from 'three'
 import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import { sfxEmitter } from '../../../lib/sfx-bus'
-import {
-  resolveAlignmentForActiveBuilding,
-  snapWorldXZForActiveBuilding,
-} from '../../../lib/world-grid-snap'
-import useEditor from '../../../store/use-editor'
+import { snapWorldXZForActiveBuilding } from '../../../lib/world-grid-snap'
+import useEditor, { isGridSnapActive, isMagneticSnapActive } from '../../../store/use-editor'
+import { useFloorplanDraftPreview } from '../../../store/use-floorplan-draft-preview'
 import { CursorSphere } from '../shared/cursor-sphere'
 
 const DEFAULT_WALL_HEIGHT = 0.5
 const DEFAULT_PITCH_DEG = 40
 const GRID_OFFSET = 0.02
-/** Figma-style alignment-snap threshold (meters), matching the move tools. */
-const ALIGNMENT_THRESHOLD_M = 0.08
 
-function snapToActiveGrid(value: number): number {
-  return snapScalar(value, useEditor.getState().gridSnapStep)
+// Walls that are direct children of a level.
+function getLevelWalls(
+  levelId: string | null,
+  nodes: Readonly<Record<string, AnyNode>>,
+): WallNode[] {
+  if (!levelId) return []
+  const levelNode = nodes[levelId]
+  if (levelNode?.type !== 'level') return []
+  return (levelNode as LevelNode).children
+    .map((childId) => nodes[childId])
+    .filter((node): node is WallNode => node?.type === 'wall')
+}
+
+// Walls on the level directly beneath the active one. Levels share the same
+// local XZ origin (they only differ in world Y), so these walls live in the
+// identical coordinate frame and feed straight into both the alignment pool
+// and the magnetic wall-snap pipeline — letting a roof drawn on the upper
+// floor snap onto the wall corners of the floor below.
+function getBelowLevelWalls(
+  currentLevelId: string | null,
+  nodes: Readonly<Record<string, AnyNode>>,
+): WallNode[] {
+  if (!currentLevelId) return []
+  const currentLevel = nodes[currentLevelId]
+  if (currentLevel?.type !== 'level') return []
+  const buildingId = resolveBuildingForLevel(currentLevel.id, nodes)
+  if (!buildingId) return []
+  const building = nodes[buildingId]
+  if (building?.type !== 'building') return []
+  const currentIndex = (currentLevel as LevelNode).level
+  const belowLevel = (building.children ?? [])
+    .map((childId) => nodes[childId])
+    .filter((node): node is LevelNode => node?.type === 'level' && node.level < currentIndex)
+    .sort((a, b) => b.level - a.level)[0]
+  return getLevelWalls(belowLevel?.id ?? null, nodes)
+}
+
+// Current-level + floor-below walls — the magnetic snap targets the roof draft
+// locks onto (corners, midpoints, crossings, wall bodies), matching the wall
+// tool. Same coordinate frame, so no transform is needed.
+function getRoofSnapWalls(
+  currentLevelId: string | null,
+  nodes: Readonly<Record<string, AnyNode>>,
+): WallNode[] {
+  return [...getLevelWalls(currentLevelId, nodes), ...getBelowLevelWalls(currentLevelId, nodes)]
+}
+
+// Current-level alignment anchors plus the floor-below wall corners.
+function collectRoofAlignmentAnchors(
+  nodes: Readonly<Record<string, AnyNode>>,
+  currentLevelId: string | null,
+): AlignmentAnchor[] {
+  return [
+    ...collectAlignmentAnchors(nodes, '', currentLevelId),
+    ...getBelowLevelWalls(currentLevelId, nodes).flatMap((wall) =>
+      wallSegmentAnchors(wall.id, wall.start, wall.end, wall.thickness),
+    ),
+  ]
 }
 
 /**
@@ -148,14 +210,168 @@ type PreviewState = {
   levelY: number
 }
 
+function buildRoofGhostGeometry(
+  width: number,
+  depth: number,
+  wallHeight: number,
+  pitchDeg: number,
+) {
+  const safeWidth = Math.max(width, 0.1)
+  const safeDepth = Math.max(depth, 0.1)
+  const halfWidth = safeWidth / 2
+  const halfDepth = safeDepth / 2
+  const ridgeHeight = wallHeight + Math.tan((pitchDeg * Math.PI) / 180) * halfDepth
+
+  const vertices = [
+    // Front slope
+    -halfWidth,
+    wallHeight,
+    -halfDepth,
+    halfWidth,
+    wallHeight,
+    -halfDepth,
+    halfWidth,
+    ridgeHeight,
+    0,
+
+    -halfWidth,
+    wallHeight,
+    -halfDepth,
+    halfWidth,
+    ridgeHeight,
+    0,
+    -halfWidth,
+    ridgeHeight,
+    0,
+
+    // Back slope
+    -halfWidth,
+    ridgeHeight,
+    0,
+    halfWidth,
+    ridgeHeight,
+    0,
+    halfWidth,
+    wallHeight,
+    halfDepth,
+
+    -halfWidth,
+    ridgeHeight,
+    0,
+    halfWidth,
+    wallHeight,
+    halfDepth,
+    -halfWidth,
+    wallHeight,
+    halfDepth,
+
+    // Left gable
+    -halfWidth,
+    wallHeight,
+    -halfDepth,
+    -halfWidth,
+    ridgeHeight,
+    0,
+    -halfWidth,
+    wallHeight,
+    halfDepth,
+
+    // Right gable
+    halfWidth,
+    wallHeight,
+    -halfDepth,
+    halfWidth,
+    wallHeight,
+    halfDepth,
+    halfWidth,
+    ridgeHeight,
+    0,
+  ]
+
+  const geometry = new BufferGeometry()
+  geometry.setAttribute('position', new Float32BufferAttribute(vertices, 3))
+  geometry.computeVertexNormals()
+  return geometry
+}
+
+function buildRoofGhostEdges(width: number, depth: number, wallHeight: number, pitchDeg: number) {
+  const safeWidth = Math.max(width, 0.1)
+  const safeDepth = Math.max(depth, 0.1)
+  const halfWidth = safeWidth / 2
+  const halfDepth = safeDepth / 2
+  const ridgeHeight = wallHeight + Math.tan((pitchDeg * Math.PI) / 180) * halfDepth
+
+  const vertices = [
+    // Base rectangle
+    -halfWidth,
+    wallHeight,
+    -halfDepth,
+    halfWidth,
+    wallHeight,
+    -halfDepth,
+    halfWidth,
+    wallHeight,
+    -halfDepth,
+    halfWidth,
+    wallHeight,
+    halfDepth,
+    halfWidth,
+    wallHeight,
+    halfDepth,
+    -halfWidth,
+    wallHeight,
+    halfDepth,
+    -halfWidth,
+    wallHeight,
+    halfDepth,
+    -halfWidth,
+    wallHeight,
+    -halfDepth,
+
+    // Ridge + gable edges
+    -halfWidth,
+    ridgeHeight,
+    0,
+    halfWidth,
+    ridgeHeight,
+    0,
+    -halfWidth,
+    wallHeight,
+    -halfDepth,
+    -halfWidth,
+    ridgeHeight,
+    0,
+    -halfWidth,
+    ridgeHeight,
+    0,
+    -halfWidth,
+    wallHeight,
+    halfDepth,
+    halfWidth,
+    wallHeight,
+    -halfDepth,
+    halfWidth,
+    ridgeHeight,
+    0,
+    halfWidth,
+    ridgeHeight,
+    0,
+    halfWidth,
+    wallHeight,
+    halfDepth,
+  ]
+
+  const geometry = new BufferGeometry()
+  geometry.setAttribute('position', new Float32BufferAttribute(vertices, 3))
+  return geometry
+}
+
 export const RoofTool: React.FC = () => {
   const cursorRef = useRef<Group>(null)
   const outlineRef = useRef<Line>(null!)
   const currentLevelId = useViewer((state) => state.selection.levelId)
   const selectedIds = useViewer((state) => state.selection.selectedIds)
   const setSelection = useViewer((state) => state.setSelection)
-  const setTool = useEditor((state) => state.setTool)
-  const setMode = useEditor((state) => state.setMode)
 
   const selectedIdsRef = useRef(selectedIds)
   useEffect(() => {
@@ -179,43 +395,38 @@ export const RoofTool: React.FC = () => {
 
     outlineRef.current.geometry = new BufferGeometry()
 
-    // Alignment candidates — anchors of every alignable object; refreshed
-    // after each roof commits. Both corners of the rectangle align.
-    let alignmentCandidates = collectAlignmentAnchors(useScene.getState().nodes, '', currentLevelId)
-    // Snap the drafted corner onto another object's nearest real anchor and
-    // publish the guide. The probe is the RAW cursor, NOT the 0.5m-grid-snapped
-    // point: resolving against the grid point would only ever catch anchors
-    // that happen to sit on a grid line, so off-grid items (furniture, angled
-    // walls) would never surface a guide. The matched axis locks exactly to the
-    // candidate's coordinate; the other axis keeps its grid snap. Alt bypasses.
-    const alignPoint = (
-      gridX: number,
-      gridZ: number,
-      rawX: number,
-      rawZ: number,
-      bypass: boolean,
-    ): [number, number] => {
-      if (bypass || alignmentCandidates.length === 0) {
-        useAlignmentGuides.getState().clear()
-        return [gridX, gridZ]
-      }
-      const ar = resolveAlignmentForActiveBuilding({
-        moving: [{ nodeId: '__roof-draft__', kind: 'corner', x: rawX, z: rawZ }],
+    // Alignment candidates — anchors of every alignable object on the active
+    // level plus the wall corners of the floor directly below, so a roof drawn
+    // on the upper floor aligns to the walls beneath it. Refreshed after each
+    // roof commits. Both corners of the rectangle align.
+    let alignmentCandidates = collectRoofAlignmentAnchors(useScene.getState().nodes, currentLevelId)
+
+    // Resolve a grid:move/click into the drafted corner via the shared surface
+    // snap pipeline: magnetic lock onto wall corners / midpoints / crossings /
+    // bodies on the active level + floor below (raising the green beacon),
+    // falling back to alignment guides, then to the world-grid snap. The same
+    // path the slab/ceiling tools use, so the beacon and coloring match. The
+    // pipeline reads the snapping mode itself (Shift bypass, magnetic on/off),
+    // so this tool never inspects the flags. `levelId` is intentionally omitted
+    // so the explicit floor-below `walls` aren't filtered back out.
+    const resolveDraftPoint = (event: GridEvent): [number, number] => {
+      const rawPoint: [number, number] = [event.localPosition[0], event.localPosition[2]]
+      const gridFallback: [number, number] = isGridSnapActive()
+        ? snapWorldXZForActiveBuilding(
+            event.position[0],
+            event.position[2],
+            useEditor.getState().gridSnapStep,
+          ).local
+        : rawPoint
+      const nodes = useScene.getState().nodes
+      return resolveSurfacePlanPointSnap({
+        rawPoint,
+        fallbackPoint: gridFallback,
+        walls: getRoofSnapWalls(currentLevelId, nodes),
         candidates: alignmentCandidates,
-        threshold: ALIGNMENT_THRESHOLD_M,
-      })
-      if (ar.guides.length === 0) {
-        useAlignmentGuides.getState().clear()
-        return [gridX, gridZ]
-      }
-      useAlignmentGuides.getState().set(ar.guides)
-      let x = gridX
-      let z = gridZ
-      for (const guide of ar.guides) {
-        if (guide.axis === 'x') x = guide.coord
-        else z = guide.coord
-      }
-      return [x, z]
+        movingId: '__roof-draft__',
+        highlightWalls: true,
+      }).point
     }
 
     const updateOutline = (
@@ -240,20 +451,7 @@ export const RoofTool: React.FC = () => {
     const onGridMove = (event: GridEvent) => {
       if (!cursorRef.current) return
 
-      // World-grid snap projected into building-local; rotated buildings
-      // used to drag every roof corner off the visible grid.
-      const snapped = snapWorldXZForActiveBuilding(
-        event.position[0],
-        event.position[2],
-        useEditor.getState().gridSnapStep,
-      ).local
-      const [gridX, gridZ] = alignPoint(
-        snapped[0],
-        snapped[1],
-        event.localPosition[0],
-        event.localPosition[2],
-        event.nativeEvent?.altKey === true,
-      )
+      const [gridX, gridZ] = resolveDraftPoint(event)
       const y = event.localPosition[1]
 
       const cursorPosition: [number, number, number] = [gridX, y, gridZ]
@@ -262,6 +460,7 @@ export const RoofTool: React.FC = () => {
       cursorRef.current.position.set(gridX, gridY, gridZ)
 
       if (
+        (isGridSnapActive() || isMagneticSnapActive()) &&
         corner1Ref.current &&
         previousGridPosRef.current &&
         (gridX !== previousGridPosRef.current[0] || gridZ !== previousGridPosRef.current[1])
@@ -278,6 +477,9 @@ export const RoofTool: React.FC = () => {
       })
 
       if (corner1Ref.current) {
+        const draftPreview = useFloorplanDraftPreview.getState()
+        draftPreview.setRoofDraftStart([corner1Ref.current[0], corner1Ref.current[2]])
+        draftPreview.setRoofDraftEnd([gridX, gridZ])
         updateOutline(corner1Ref.current, cursorPosition)
       }
     }
@@ -285,20 +487,7 @@ export const RoofTool: React.FC = () => {
     const onGridClick = (event: GridEvent) => {
       if (!currentLevelId) return
 
-      // World-grid snap projected into building-local; rotated buildings
-      // used to drag every roof corner off the visible grid.
-      const snapped = snapWorldXZForActiveBuilding(
-        event.position[0],
-        event.position[2],
-        useEditor.getState().gridSnapStep,
-      ).local
-      const [gridX, gridZ] = alignPoint(
-        snapped[0],
-        snapped[1],
-        event.localPosition[0],
-        event.localPosition[2],
-        event.nativeEvent?.altKey === true,
-      )
+      const [gridX, gridZ] = resolveDraftPoint(event)
       const y = event.localPosition[1]
 
       if (corner1Ref.current) {
@@ -312,11 +501,17 @@ export const RoofTool: React.FC = () => {
         setSelection({ selectedIds: [roofId as AnyNode['id']] })
 
         corner1Ref.current = null
+        const draftPreview = useFloorplanDraftPreview.getState()
+        draftPreview.setRoofDraftStart(null)
+        draftPreview.setRoofDraftEnd(null)
         outlineRef.current.visible = false
-        alignmentCandidates = collectAlignmentAnchors(useScene.getState().nodes, '', currentLevelId)
-        useAlignmentGuides.getState().clear()
+        alignmentCandidates = collectRoofAlignmentAnchors(useScene.getState().nodes, currentLevelId)
+        clearSurfacePlanSnapFeedback()
       } else {
         corner1Ref.current = [gridX, y, gridZ]
+        const draftPreview = useFloorplanDraftPreview.getState()
+        draftPreview.setRoofDraftStart([gridX, gridZ])
+        draftPreview.setRoofDraftEnd([gridX, gridZ])
         sfxEmitter.emit('sfx:structure-build-start')
         setPreview((prev) => ({
           ...prev,
@@ -329,10 +524,13 @@ export const RoofTool: React.FC = () => {
       if (corner1Ref.current) {
         markToolCancelConsumed()
         corner1Ref.current = null
+        const draftPreview = useFloorplanDraftPreview.getState()
+        draftPreview.setRoofDraftStart(null)
+        draftPreview.setRoofDraftEnd(null)
         outlineRef.current.visible = false
         setPreview((prev) => ({ ...prev, corner1: null }))
       }
-      useAlignmentGuides.getState().clear()
+      clearSurfacePlanSnapFeedback()
     }
 
     emitter.on('grid:move', onGridMove)
@@ -343,9 +541,12 @@ export const RoofTool: React.FC = () => {
       emitter.off('grid:move', onGridMove)
       emitter.off('grid:click', onGridClick)
       emitter.off('tool:cancel', onCancel)
-      useAlignmentGuides.getState().clear()
+      clearSurfacePlanSnapFeedback()
 
       corner1Ref.current = null
+      const draftPreview = useFloorplanDraftPreview.getState()
+      draftPreview.setRoofDraftStart(null)
+      draftPreview.setRoofDraftEnd(null)
     }
   }, [currentLevelId, setSelection])
 
@@ -360,6 +561,34 @@ export const RoofTool: React.FC = () => {
     return { length, width, centerX, centerZ }
   }, [corner1, cursorPosition])
 
+  const roofGhostGeometry = useMemo(() => {
+    if (!previewDimensions) return null
+    return buildRoofGhostGeometry(
+      previewDimensions.length,
+      previewDimensions.width,
+      DEFAULT_WALL_HEIGHT,
+      DEFAULT_PITCH_DEG,
+    )
+  }, [previewDimensions])
+
+  const roofGhostEdges = useMemo(() => {
+    if (!previewDimensions) return null
+    return buildRoofGhostEdges(
+      previewDimensions.length,
+      previewDimensions.width,
+      DEFAULT_WALL_HEIGHT,
+      DEFAULT_PITCH_DEG,
+    )
+  }, [previewDimensions])
+
+  useEffect(
+    () => () => {
+      roofGhostGeometry?.dispose()
+      roofGhostEdges?.dispose()
+    },
+    [roofGhostEdges, roofGhostGeometry],
+  )
+
   return (
     <group>
       <CursorSphere ref={cursorRef} />
@@ -393,21 +622,34 @@ export const RoofTool: React.FC = () => {
       )}
 
       {previewDimensions && previewDimensions.length > 0.1 && previewDimensions.width > 0.1 && (
-        <mesh
+        <group
           layers={EDITOR_LAYER}
           position={[previewDimensions.centerX, levelY + GRID_OFFSET, previewDimensions.centerZ]}
-          rotation={[-Math.PI / 2, 0, 0]}
         >
-          <planeGeometry args={[previewDimensions.length, previewDimensions.width]} />
-          <meshBasicMaterial
-            color="#818cf8"
-            depthTest={false}
-            depthWrite={false}
-            opacity={0.1}
-            side={DoubleSide}
-            transparent
-          />
-        </mesh>
+          {roofGhostGeometry && (
+            <mesh geometry={roofGhostGeometry} layers={EDITOR_LAYER} renderOrder={1}>
+              <meshBasicMaterial
+                color="#818cf8"
+                depthTest={false}
+                depthWrite={false}
+                opacity={0.16}
+                side={DoubleSide}
+                transparent
+              />
+            </mesh>
+          )}
+          {roofGhostEdges && (
+            <lineSegments geometry={roofGhostEdges} layers={EDITOR_LAYER} renderOrder={2}>
+              <lineBasicMaterial
+                color="#818cf8"
+                depthTest={false}
+                depthWrite={false}
+                opacity={0.5}
+                transparent
+              />
+            </lineSegments>
+          )}
+        </group>
       )}
     </group>
   )

package/src/components/tools/select/box-select-state.ts

@@ -9,6 +9,10 @@ type PointerEventLike = {
   nativeEvent?: PointerEvent | PointerEventLike
 }
 
+type SuppressBoxSelectOptions = {
+  markHandled?: boolean
+}
+
 function pointerIdFor(event: PointerEvent | PointerEventLike): number | null {
   if ('pointerId' in event && typeof event.pointerId === 'number') {
     return event.pointerId
@@ -28,8 +32,12 @@ export function markBoxSelectHandled() {
   }, 50)
 }
 
-export function suppressBoxSelectForPointer(event: PointerEvent | PointerEventLike) {
-  markBoxSelectHandled()
+export function suppressBoxSelectForPointer(
+  event: PointerEvent | PointerEventLike,
+  options: SuppressBoxSelectOptions = {},
+) {
+  const markHandled = options.markHandled ?? true
+  if (markHandled) markBoxSelectHandled()
 
   const pointerId = pointerIdFor(event)
   if (pointerId === null || suppressedPointerIds.has(pointerId)) return
@@ -38,7 +46,7 @@ export function suppressBoxSelectForPointer(event: PointerEvent | PointerEventLi
 
   const clear = (releaseEvent?: PointerEvent) => {
     if (releaseEvent && releaseEvent.pointerId !== pointerId) return
-    markBoxSelectHandled()
+    if (markHandled) markBoxSelectHandled()
     suppressedPointerIds.delete(pointerId)
     const cleanup = suppressionCleanups.get(pointerId)
     suppressionCleanups.delete(pointerId)
@@ -48,15 +56,18 @@ export function suppressBoxSelectForPointer(event: PointerEvent | PointerEventLi
   const onPointerUp = (releaseEvent: PointerEvent) => clear(releaseEvent)
   const onPointerCancel = (releaseEvent: PointerEvent) => clear(releaseEvent)
   const onBlur = () => clear()
+  // Click-preserving handle interactions need suppression cleared before
+  // canvas-level pointerup handlers decide whether to block the follow-up click.
+  const releaseListenerOptions = markHandled ? undefined : { capture: true }
   const cleanup = () => {
-    window.removeEventListener('pointerup', onPointerUp)
-    window.removeEventListener('pointercancel', onPointerCancel)
+    window.removeEventListener('pointerup', onPointerUp, releaseListenerOptions)
+    window.removeEventListener('pointercancel', onPointerCancel, releaseListenerOptions)
     window.removeEventListener('blur', onBlur)
   }
 
   suppressionCleanups.set(pointerId, cleanup)
-  window.addEventListener('pointerup', onPointerUp)
-  window.addEventListener('pointercancel', onPointerCancel)
+  window.addEventListener('pointerup', onPointerUp, releaseListenerOptions)
+  window.addEventListener('pointercancel', onPointerCancel, releaseListenerOptions)
   window.addEventListener('blur', onBlur)
 }