@pascal-app/editor 0.8.0 → 0.9.2

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

@@ -1,17 +1,38 @@
 import {
   type AnyNode,
+  collectAlignmentAnchors,
+  createSurfaceOpeningPreviewController,
+  type EventSuffix,
   emitter,
   type GridEvent,
   type LevelNode,
+  movingAlignmentAnchors,
+  type NodeEvent,
+  resolveAlignment,
   StairNode,
   StairSegmentNode,
+  syncAutoStairOpenings,
   useScene,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useEffect, useMemo, useRef } from 'react'
 import * as THREE from 'three'
 import { sfxEmitter } from '../../../lib/sfx-bus'
+import {
+  resolveStairDestinationLevel,
+  resolveStairPlacementLevelId,
+} from '../../../lib/stair-levels'
+
+import useAlignmentGuides from '../../../store/use-alignment-guides'
+import useEditor, {
+  isAlignmentGuideActive,
+  isGridSnapActive,
+  isMagneticSnapActive,
+} from '../../../store/use-editor'
+
+import useFacingPose from '../../../store/use-facing-pose'
 import { CursorSphere } from '../shared/cursor-sphere'
+import { getFloorStackPreviewPosition } from '../shared/floor-stack-preview'
 import {
   DEFAULT_CURVED_STAIR_INNER_RADIUS,
   DEFAULT_CURVED_STAIR_SWEEP_ANGLE,
@@ -23,6 +44,7 @@ import {
   DEFAULT_STAIR_FILL_TO_FLOOR,
   DEFAULT_STAIR_HEIGHT,
   DEFAULT_STAIR_LENGTH,
+  DEFAULT_STAIR_OPENING_OFFSET,
   DEFAULT_STAIR_RAILING_HEIGHT,
   DEFAULT_STAIR_RAILING_MODE,
   DEFAULT_STAIR_STEP_COUNT,
@@ -32,6 +54,23 @@ import {
 } from './stair-defaults'
 
 const GRID_OFFSET = 0.02
+/** Figma-style alignment-snap threshold (meters), matching the move tools. */
+const ALIGNMENT_THRESHOLD_M = 0.08
+type ClickTriggerEvent = GridEvent | NodeEvent<AnyNode>
+
+const CLICK_TRIGGER_KINDS = [
+  'shelf',
+  'item',
+  'slab',
+  'ceiling',
+  'wall',
+  'fence',
+  'column',
+  'roof',
+  'roof-segment',
+  'stair',
+  'stair-segment',
+] as const
 
 /**
  * Generates the step-profile geometry for the ghost preview.
@@ -69,19 +108,10 @@ function createStairPreviewGeometry(): THREE.BufferGeometry {
 }
 
 /**
- * Creates a stair group with one default stair segment at the given position/rotation.
+ * Creates a default straight stair segment.
  */
-function commitStairPlacement(
-  levelId: LevelNode['id'],
-  position: [number, number, number],
-  rotation: number,
-): void {
-  const { createNodes, nodes } = useScene.getState()
-
-  const stairCount = Object.values(nodes).filter((n) => n.type === 'stair').length
-  const name = `Staircase ${stairCount + 1}`
-
-  const segment = StairSegmentNode.parse({
+function createDefaultStairSegment() {
+  return StairSegmentNode.parse({
     segmentType: 'stair',
     width: DEFAULT_STAIR_WIDTH,
     length: DEFAULT_STAIR_LENGTH,
@@ -92,14 +122,24 @@ function commitStairPlacement(
     thickness: DEFAULT_STAIR_THICKNESS,
     position: [0, 0, 0],
   })
+}
 
-  const sortedLevels = Object.values(nodes)
-    .filter((node): node is LevelNode => node.type === 'level')
-    .sort((left, right) => left.level - right.level)
-  const currentLevelIndex = sortedLevels.findIndex((level) => level.id === levelId)
-  const nextLevelId = sortedLevels[currentLevelIndex + 1]?.id ?? levelId
-
-  const stair = StairNode.parse({
+function createDefaultStairNode({
+  name,
+  levelId,
+  nextLevelId,
+  position,
+  rotation,
+  segmentId,
+}: {
+  name: string
+  levelId: LevelNode['id']
+  nextLevelId: LevelNode['id']
+  position: [number, number, number]
+  rotation: number
+  segmentId: StairSegmentNode['id']
+}) {
+  return StairNode.parse({
     name,
     position,
     rotation,
@@ -107,7 +147,7 @@ function commitStairPlacement(
     fromLevelId: levelId,
     toLevelId: nextLevelId,
     slabOpeningMode: 'destination',
-    openingOffset: 0.08,
+    openingOffset: DEFAULT_STAIR_OPENING_OFFSET,
     width: DEFAULT_STAIR_WIDTH,
     totalRise: DEFAULT_STAIR_HEIGHT,
     stepCount: DEFAULT_STAIR_STEP_COUNT,
@@ -121,11 +161,55 @@ function commitStairPlacement(
     showStepSupports: DEFAULT_SPIRAL_SHOW_STEP_SUPPORTS,
     railingHeight: DEFAULT_STAIR_RAILING_HEIGHT,
     railingMode: DEFAULT_STAIR_RAILING_MODE,
-    children: [segment.id],
+    children: [segmentId],
+  })
+}
+
+/**
+ * Creates a stair group with one default stair segment at the given position/rotation.
+ */
+function commitStairPlacement(
+  levelId: LevelNode['id'],
+  position: [number, number, number],
+  rotation: number,
+): void {
+  const { createNodes, nodes } = useScene.getState()
+  const placementLevelId = resolveStairPlacementLevelId(
+    nodes,
+    levelId,
+    useViewer.getState().selection.buildingId,
+  )
+  if (!placementLevelId) return
+
+  const stairCount = Object.values(nodes).filter((n) => n.type === 'stair').length
+  const name = `Staircase ${stairCount + 1}`
+  const segment = createDefaultStairSegment()
+
+  const destinationPlan = resolveStairDestinationLevel({
+    createMissing: true,
+    fromLevelId: placementLevelId,
+    nodes,
   })
+  const nextLevelId = destinationPlan?.toLevel.id ?? placementLevelId
+
+  const stair = createDefaultStairNode({
+    name,
+    levelId: placementLevelId,
+    nextLevelId,
+    position,
+    rotation,
+    segmentId: segment.id,
+  })
+
+  const createdLevel = destinationPlan?.createdLevel
+  const levelCreateOps =
+    createdLevel && destinationPlan.buildingId
+      ? [{ node: createdLevel, parentId: destinationPlan.buildingId }]
+      : []
 
   createNodes([
-    { node: stair, parentId: levelId },
+    ...levelCreateOps,
+    { node: stair, parentId: placementLevelId },
     { node: segment, parentId: stair.id },
   ])
 
@@ -137,6 +221,7 @@ export const StairTool: React.FC = () => {
   const previewRef = useRef<THREE.Group>(null)
   const rotationRef = useRef(0)
   const previousGridPosRef = useRef<[number, number] | null>(null)
+  const lastCanonicalPositionRef = useRef<[number, number, number] | null>(null)
   const currentLevelId = useViewer((state) => state.selection.levelId)
 
   const previewGeometry = useMemo(() => createStairPreviewGeometry(), [])
@@ -144,24 +229,187 @@ export const StairTool: React.FC = () => {
   useEffect(() => {
     if (!currentLevelId) return
 
+    const openingPreview = createSurfaceOpeningPreviewController()
+
     // Reset rotation when tool activates
     rotationRef.current = 0
     if (previewRef.current) previewRef.current.rotation.y = 0
+    lastCanonicalPositionRef.current = null
+
+    const buildPreviewScene = (position: [number, number, number], rotation: number) => {
+      const nodes = useScene.getState().nodes
+      const placementLevelId = resolveStairPlacementLevelId(
+        nodes,
+        currentLevelId,
+        useViewer.getState().selection.buildingId,
+      )
+      if (!placementLevelId) return null
+
+      const destinationPlan = resolveStairDestinationLevel({
+        createMissing: true,
+        fromLevelId: placementLevelId,
+        nodes,
+      })
+      const nextLevelId = destinationPlan?.toLevel.id ?? placementLevelId
+      const segment = createDefaultStairSegment()
+      const stair = createDefaultStairNode({
+        name: 'Staircase Preview',
+        levelId: placementLevelId,
+        nextLevelId,
+        position,
+        rotation,
+        segmentId: segment.id,
+      })
+      const previewNodes = {
+        ...nodes,
+        ...(destinationPlan?.createdLevel
+          ? { [destinationPlan.createdLevel.id]: destinationPlan.createdLevel }
+          : {}),
+        [stair.id]: { ...stair, parentId: placementLevelId },
+        [segment.id]: { ...segment, parentId: stair.id },
+      } as Record<string, AnyNode>
+
+      return { placementLevelId, previewNodes, stair }
+    }
 
-    const onGridMove = (event: GridEvent) => {
-      const gridX = Math.round(event.localPosition[0] * 2) / 2
-      const gridZ = Math.round(event.localPosition[2] * 2) / 2
-      const y = event.localPosition[1]
-
+    // The preview rebuild (full-scene copy + destination-level resolution +
+    // auto-opening CSG) is expensive; `grid:move` fires it every pointer event
+    // but the placed position is grid-snapped, so within a cell every rebuild
+    // is identical. Dedupe on the snapped position + rotation so we rebuild
+    // only when the staircase would actually land somewhere new — this is the
+    // difference between a smooth and a stuttering stair tool (the elevator is
+    // cheap because it has no opening sync).
+    let lastPreviewKey: string | null = null
+
+    const applyDraftPreview = (position: [number, number, number], rotation: number) => {
+      const key = `${position[0].toFixed(3)},${position[2].toFixed(3)},${rotation.toFixed(4)}`
+      if (key === lastPreviewKey) return
+      lastPreviewKey = key
+      const preview = buildPreviewScene(position, rotation)
+      const visualPosition = preview
+        ? getFloorStackPreviewPosition({
+            node: preview.stair,
+            position,
+            rotation,
+            levelId: preview.placementLevelId,
+            nodes: preview.previewNodes,
+          })
+        : position
       if (cursorRef.current) {
-        cursorRef.current.position.set(gridX, y + GRID_OFFSET, gridZ)
+        cursorRef.current.position.set(
+          visualPosition[0],
+          visualPosition[1] + GRID_OFFSET,
+          visualPosition[2],
+        )
       }
 
       if (previewRef.current) {
-        previewRef.current.position.set(gridX, y, gridZ)
+        previewRef.current.position.set(...visualPosition)
+        previewRef.current.rotation.y = rotation
+      }
+
+      // Forward-facing triangle (editor-side overlay). The run ascends along
+      // local +Z from the entry at z≈0; the stair's front is the -Z entry side,
+      // so `reversed` points the triangle out of the entry (where you approach
+      // from), sitting just before it — not inside the footprint or at the
+      // elevated far end. Centre is the footprint mid-run (origin is the entry).
+      useFacingPose.getState().set({
+        position: visualPosition,
+        rotationY: rotation,
+        depth: DEFAULT_STAIR_LENGTH,
+        center: [0, DEFAULT_STAIR_LENGTH / 2],
+        reversed: true,
+      })
+
+      if (!preview) {
+        openingPreview.clear()
+        return
+      }
+
+      openingPreview.apply(syncAutoStairOpenings(preview.previewNodes))
+    }
+
+    // Alignment candidates — anchors of every alignable object; refreshed
+    // after each placement. The moving stair aligns by its footprint edges so
+    // users can snap the run side against walls, slabs, elevators, or another
+    // stair instead of only lining up the invisible origin point.
+    let alignmentCandidates = collectAlignmentAnchors(useScene.getState().nodes, '', currentLevelId)
+    const resolveStairFootprintAlignment = (
+      x: number,
+      z: number,
+      rotation: number,
+    ): ReturnType<typeof resolveAlignment> | null => {
+      const preview = buildPreviewScene([x, 0, z], rotation)
+      const moving = preview
+        ? movingAlignmentAnchors(preview.stair, preview.previewNodes, x, z, rotation)
+        : []
+      if (moving.length === 0) return null
+      return resolveAlignment({
+        moving,
+        candidates: alignmentCandidates,
+        threshold: ALIGNMENT_THRESHOLD_M,
+      })
+    }
+    // The probe is the RAW cursor, not the grid-snapped point: resolving
+    // against the grid point would only catch anchors that happen to sit near
+    // a grid line. Matched axes use the raw probe + snap delta; unmatched axes
+    // keep the normal grid snap. Guides are published in every snapping mode
+    // (including Off); the magnetic pull toward them (applySnap) applies only in
+    // 'lines' mode.
+    const alignPoint = (
+      gridX: number,
+      gridZ: number,
+      rawX: number,
+      rawZ: number,
+      bypass: boolean,
+      applySnap: boolean,
+    ): [number, number] => {
+      if (bypass || alignmentCandidates.length === 0) {
+        useAlignmentGuides.getState().clear()
+        return [gridX, gridZ]
+      }
+      const ar = resolveStairFootprintAlignment(rawX, rawZ, rotationRef.current)
+      if (!ar || ar.guides.length === 0) {
+        useAlignmentGuides.getState().clear()
+        return [gridX, gridZ]
       }
+      if (!applySnap) {
+        useAlignmentGuides.getState().set(ar.guides)
+        return [gridX, gridZ]
+      }
+      let x = gridX
+      let z = gridZ
+      if (ar.snap) {
+        if (ar.guides.some((guide) => guide.axis === 'x')) x = rawX + ar.snap.dx
+        if (ar.guides.some((guide) => guide.axis === 'z')) z = rawZ + ar.snap.dz
+      }
+      const finalAlignment = resolveStairFootprintAlignment(x, z, rotationRef.current)
+      useAlignmentGuides.getState().set(finalAlignment?.guides ?? ar.guides)
+      return [x, z]
+    }
+
+    const onGridMove = (event: GridEvent) => {
+      // Grid snap follows the global mode (live step so the HUD chip is
+      // honest); Off keeps the raw cursor. Shift cycles the mode centrally.
+      const step = useEditor.getState().gridSnapStep
+      const [gridX, gridZ] = alignPoint(
+        isGridSnapActive()
+          ? Math.round(event.localPosition[0] / step) * step
+          : event.localPosition[0],
+        isGridSnapActive()
+          ? Math.round(event.localPosition[2] / step) * step
+          : event.localPosition[2],
+        event.localPosition[0],
+        event.localPosition[2],
+        !isAlignmentGuideActive(),
+        isMagneticSnapActive(),
+      )
+      const position: [number, number, number] = [gridX, 0, gridZ]
+      lastCanonicalPositionRef.current = position
+      applyDraftPreview(position, rotationRef.current)
 
       if (
+        (isGridSnapActive() || isMagneticSnapActive()) &&
         previousGridPosRef.current &&
         (gridX !== previousGridPosRef.current[0] || gridZ !== previousGridPosRef.current[1])
       ) {
@@ -171,12 +419,52 @@ export const StairTool: React.FC = () => {
       previousGridPosRef.current = [gridX, gridZ]
     }
 
-    const onGridClick = (event: GridEvent) => {
+    const getAlignedGridPosition = (event: GridEvent): [number, number, number] => {
+      const step = useEditor.getState().gridSnapStep
+      const [gridX, gridZ] = alignPoint(
+        isGridSnapActive()
+          ? Math.round(event.localPosition[0] / step) * step
+          : event.localPosition[0],
+        isGridSnapActive()
+          ? Math.round(event.localPosition[2] / step) * step
+          : event.localPosition[2],
+        event.localPosition[0],
+        event.localPosition[2],
+        !isAlignmentGuideActive(),
+        isMagneticSnapActive(),
+      )
+      return [gridX, 0, gridZ]
+    }
+
+    const commitAtCursor = (event: ClickTriggerEvent) => {
       if (!currentLevelId) return
+      const nodeEvent = 'node' in event ? (event as NodeEvent<AnyNode>) : null
+      if (nodeEvent) {
+        nodeEvent.stopPropagation()
+        nodeEvent.nativeEvent.stopPropagation()
+      }
 
-      const gridX = Math.round(event.localPosition[0] * 2) / 2
-      const gridZ = Math.round(event.localPosition[2] * 2) / 2
-      commitStairPlacement(currentLevelId, [gridX, 0, gridZ], rotationRef.current)
+      const position = nodeEvent
+        ? lastCanonicalPositionRef.current
+        : getAlignedGridPosition(event as GridEvent)
+      if (!position) return
+
+      commitStairPlacement(currentLevelId, position, rotationRef.current)
+      openingPreview.clear()
+      // Commit cleared the opening preview, so force the next hover (even on the
+      // same cell) to rebuild rather than dedupe against the just-placed key.
+      lastPreviewKey = null
+      useAlignmentGuides.getState().clear()
+
+      // Single by default; the C-toggle ('point' context, shared with every
+      // other placement tool) opts into placing more. On single, drop the tool
+      // and the facing triangle so we fall back to select after one stair.
+      if (useEditor.getState().getContinuation('point') === 'repeat') {
+        alignmentCandidates = collectAlignmentAnchors(useScene.getState().nodes, '', currentLevelId)
+      } else {
+        useFacingPose.getState().clear()
+        useEditor.getState().setTool(null)
+      }
     }
 
     const onKeyDown = (event: KeyboardEvent) => {
@@ -193,20 +481,35 @@ export const StairTool: React.FC = () => {
         event.preventDefault()
         sfxEmitter.emit('sfx:item-rotate')
         rotationRef.current += rotationDelta
-        if (previewRef.current) {
+        if (lastCanonicalPositionRef.current) {
+          applyDraftPreview(lastCanonicalPositionRef.current, rotationRef.current)
+        } else if (previewRef.current) {
           previewRef.current.rotation.y = rotationRef.current
         }
       }
     }
 
     emitter.on('grid:move', onGridMove)
-    emitter.on('grid:click', onGridClick)
+    emitter.on('grid:click', commitAtCursor)
+    type SuffixedKey<K extends string> = `${K}:${EventSuffix}`
+    type ClickKey = SuffixedKey<(typeof CLICK_TRIGGER_KINDS)[number]>
+    for (const kind of CLICK_TRIGGER_KINDS) {
+      const key = `${kind}:click` as ClickKey
+      emitter.on(key, commitAtCursor as never)
+    }
     window.addEventListener('keydown', onKeyDown)
 
     return () => {
       emitter.off('grid:move', onGridMove)
-      emitter.off('grid:click', onGridClick)
+      emitter.off('grid:click', commitAtCursor)
+      for (const kind of CLICK_TRIGGER_KINDS) {
+        const key = `${kind}:click` as ClickKey
+        emitter.off(key, commitAtCursor as never)
+      }
       window.removeEventListener('keydown', onKeyDown)
+      useAlignmentGuides.getState().clear()
+      openingPreview.clear()
+      useFacingPose.getState().clear()
     }
   }, [currentLevelId])
 
@@ -214,7 +517,9 @@ export const StairTool: React.FC = () => {
     <group>
       <CursorSphere ref={cursorRef} />
 
-      {/* 3D ghost preview — position/rotation updated imperatively */}
+      {/* 3D ghost preview — position/rotation updated imperatively. The
+          forward-facing triangle is drawn by the editor-side overlay from the
+          pose published in `applyDraftPreview`. */}
       <group ref={previewRef}>
         <mesh castShadow geometry={previewGeometry}>
           <meshStandardMaterial color="#818cf8" depthWrite={false} opacity={0.35} transparent />