@pascal-app/editor 0.7.0 → 0.9.1

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

@@ -1,14 +1,17 @@
 import {
   type AnyNode,
   type AnyNodeId,
+  collectAlignmentAnchors,
   emitter,
   type GridEvent,
   type LevelNode,
   RoofNode,
   RoofSegmentNode,
   sceneRegistry,
+  snapScalar,
   useScene,
 } from '@pascal-app/core'
+import { useAlignmentGuides } from '@pascal-app/editor'
 import { useViewer } from '@pascal-app/viewer'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import * as THREE from 'three'
@@ -16,12 +19,22 @@ import { BufferGeometry, DoubleSide, type Group, type Line, Vector3 } from 'thre
 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 { CursorSphere } from '../shared/cursor-sphere'
 
 const DEFAULT_WALL_HEIGHT = 0.5
-const DEFAULT_ROOF_HEIGHT = 2.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)
+}
 
 /**
  * Creates a roof group with one default gable segment
@@ -34,6 +47,13 @@ const commitRoofPlacement = (
 ): AnyNode['id'] => {
   const { createNode, createNodes, nodes } = useScene.getState()
 
+  // A placed roof preset seeds `toolDefaults.roof` with the flattened
+  // subtree params (roofType, pitch, wallHeight, overhang, materials, …)
+  // before the tool activates. The footprint (width/depth) and placement
+  // come from the drawn rectangle and always win; the segment carries the
+  // shape/material params, the roof container picks up the materials.
+  const defaults = useEditor.getState().toolDefaults.roof ?? {}
+
   const centerX = (corner1[0] + corner2[0]) / 2
   const centerZ = (corner1[2] + corner2[2]) / 2
 
@@ -74,11 +94,12 @@ const commitRoofPlacement = (
     }
 
     const segment = RoofSegmentNode.parse({
-      width,
-      depth,
       wallHeight: DEFAULT_WALL_HEIGHT,
-      roofHeight: DEFAULT_ROOF_HEIGHT,
+      pitch: DEFAULT_PITCH_DEG,
       roofType: 'gable',
+      ...defaults,
+      width,
+      depth,
       position: [localX, 0, localZ],
     })
 
@@ -93,16 +114,19 @@ const commitRoofPlacement = (
 
   // Create the segment first (centered in its new parent)
   const segment = RoofSegmentNode.parse({
-    width,
-    depth,
     wallHeight: DEFAULT_WALL_HEIGHT,
-    roofHeight: DEFAULT_ROOF_HEIGHT,
+    pitch: DEFAULT_PITCH_DEG,
     roofType: 'gable',
+    ...defaults,
+    width,
+    depth,
     position: [0, 0, 0],
   })
 
-  // Create the roof container
+  // Create the roof container. Segment-shaped params (roofType, pitch, …) are
+  // dropped by the RoofNode schema; surface materials in `defaults` carry over.
   const roof = RoofNode.parse({
+    ...defaults,
     name,
     position: [centerX, 0, centerZ],
     children: [segment.id],
@@ -138,6 +162,10 @@ export const RoofTool: React.FC = () => {
     selectedIdsRef.current = selectedIds
   }, [selectedIds])
 
+  // Clear preset-seeded defaults on deactivation so a later manual roof draw
+  // isn't built with a stale preset's parameters. Unmount-only.
+  useEffect(() => () => useEditor.getState().setToolDefaults('roof', null), [])
+
   const corner1Ref = useRef<[number, number, number] | null>(null)
   const previousGridPosRef = useRef<[number, number] | null>(null)
   const [preview, setPreview] = useState<PreviewState>({
@@ -151,6 +179,45 @@ 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 }],
+        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]
+    }
+
     const updateOutline = (
       corner1: [number, number, number],
       corner2: [number, number, number],
@@ -173,8 +240,20 @@ export const RoofTool: React.FC = () => {
     const onGridMove = (event: GridEvent) => {
       if (!cursorRef.current) return
 
-      const gridX = Math.round(event.localPosition[0] * 2) / 2
-      const gridZ = Math.round(event.localPosition[2] * 2) / 2
+      // 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 y = event.localPosition[1]
 
       const cursorPosition: [number, number, number] = [gridX, y, gridZ]
@@ -206,8 +285,20 @@ export const RoofTool: React.FC = () => {
     const onGridClick = (event: GridEvent) => {
       if (!currentLevelId) return
 
-      const gridX = Math.round(event.localPosition[0] * 2) / 2
-      const gridZ = Math.round(event.localPosition[2] * 2) / 2
+      // 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 y = event.localPosition[1]
 
       if (corner1Ref.current) {
@@ -222,8 +313,11 @@ export const RoofTool: React.FC = () => {
 
         corner1Ref.current = null
         outlineRef.current.visible = false
+        alignmentCandidates = collectAlignmentAnchors(useScene.getState().nodes, '', currentLevelId)
+        useAlignmentGuides.getState().clear()
       } else {
         corner1Ref.current = [gridX, y, gridZ]
+        sfxEmitter.emit('sfx:structure-build-start')
         setPreview((prev) => ({
           ...prev,
           corner1: corner1Ref.current,
@@ -238,6 +332,7 @@ export const RoofTool: React.FC = () => {
         outlineRef.current.visible = false
         setPreview((prev) => ({ ...prev, corner1: null }))
       }
+      useAlignmentGuides.getState().clear()
     }
 
     emitter.on('grid:move', onGridMove)
@@ -248,6 +343,7 @@ export const RoofTool: React.FC = () => {
       emitter.off('grid:move', onGridMove)
       emitter.off('grid:click', onGridClick)
       emitter.off('tool:cancel', onCancel)
+      useAlignmentGuides.getState().clear()
 
       corner1Ref.current = null
     }

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

@@ -0,0 +1,77 @@
+export let boxSelectHandled = false
+
+let resetTimeout: ReturnType<typeof setTimeout> | null = null
+const suppressedPointerIds = new Set<number>()
+const suppressionCleanups = new Map<number, () => void>()
+
+type PointerEventLike = {
+  pointerId?: number
+  nativeEvent?: PointerEvent | PointerEventLike
+}
+
+function pointerIdFor(event: PointerEvent | PointerEventLike): number | null {
+  if ('pointerId' in event && typeof event.pointerId === 'number') {
+    return event.pointerId
+  }
+  const nativeEvent = 'nativeEvent' in event ? event.nativeEvent : undefined
+  return nativeEvent ? pointerIdFor(nativeEvent) : null
+}
+
+export function markBoxSelectHandled() {
+  boxSelectHandled = true
+  if (resetTimeout) {
+    clearTimeout(resetTimeout)
+  }
+  resetTimeout = setTimeout(() => {
+    boxSelectHandled = false
+    resetTimeout = null
+  }, 50)
+}
+
+export function suppressBoxSelectForPointer(event: PointerEvent | PointerEventLike) {
+  markBoxSelectHandled()
+
+  const pointerId = pointerIdFor(event)
+  if (pointerId === null || suppressedPointerIds.has(pointerId)) return
+
+  suppressedPointerIds.add(pointerId)
+
+  const clear = (releaseEvent?: PointerEvent) => {
+    if (releaseEvent && releaseEvent.pointerId !== pointerId) return
+    markBoxSelectHandled()
+    suppressedPointerIds.delete(pointerId)
+    const cleanup = suppressionCleanups.get(pointerId)
+    suppressionCleanups.delete(pointerId)
+    cleanup?.()
+  }
+
+  const onPointerUp = (releaseEvent: PointerEvent) => clear(releaseEvent)
+  const onPointerCancel = (releaseEvent: PointerEvent) => clear(releaseEvent)
+  const onBlur = () => clear()
+  const cleanup = () => {
+    window.removeEventListener('pointerup', onPointerUp)
+    window.removeEventListener('pointercancel', onPointerCancel)
+    window.removeEventListener('blur', onBlur)
+  }
+
+  suppressionCleanups.set(pointerId, cleanup)
+  window.addEventListener('pointerup', onPointerUp)
+  window.addEventListener('pointercancel', onPointerCancel)
+  window.addEventListener('blur', onBlur)
+}
+
+export function isBoxSelectPointerSuppressed(event: PointerEvent | PointerEventLike) {
+  const pointerId = pointerIdFor(event)
+  return pointerId !== null && suppressedPointerIds.has(pointerId)
+}
+
+export function clearBoxSelectHandled() {
+  if (resetTimeout) {
+    clearTimeout(resetTimeout)
+    resetTimeout = null
+  }
+  boxSelectHandled = false
+  for (const cleanup of suppressionCleanups.values()) cleanup()
+  suppressionCleanups.clear()
+  suppressedPointerIds.clear()
+}