@pascal-app/editor 0.4.0

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

@@ -0,0 +1,322 @@
+import { emitter, type GridEvent, type LevelNode, SlabNode, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { BufferGeometry, DoubleSide, type Group, type Line, Shape, Vector3 } from 'three'
+import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
+import { EDITOR_LAYER } from '../../../lib/constants'
+import { sfxEmitter } from '../../../lib/sfx-bus'
+import { CursorSphere } from '../shared/cursor-sphere'
+
+const Y_OFFSET = 0.02
+
+/**
+ * Snaps a point to the nearest axis-aligned or 45-degree diagonal from the last point
+ */
+const calculateSnapPoint = (
+  lastPoint: [number, number],
+  currentPoint: [number, number],
+): [number, number] => {
+  const [x1, y1] = lastPoint
+  const [x, y] = currentPoint
+
+  const dx = x - x1
+  const dy = y - y1
+  const absDx = Math.abs(dx)
+  const absDy = Math.abs(dy)
+
+  // Calculate distances to horizontal, vertical, and diagonal lines
+  const horizontalDist = absDy
+  const verticalDist = absDx
+  const diagonalDist = Math.abs(absDx - absDy)
+
+  // Find the minimum distance to determine which axis to snap to
+  const minDist = Math.min(horizontalDist, verticalDist, diagonalDist)
+
+  if (minDist === diagonalDist) {
+    // Snap to 45° diagonal
+    const diagonalLength = Math.min(absDx, absDy)
+    return [x1 + Math.sign(dx) * diagonalLength, y1 + Math.sign(dy) * diagonalLength]
+  }
+  if (minDist === horizontalDist) {
+    // Snap to horizontal
+    return [x, y1]
+  }
+  // Snap to vertical
+  return [x1, y]
+}
+
+/**
+ * Creates a slab with the given polygon points and returns its ID
+ */
+const commitSlabDrawing = (levelId: LevelNode['id'], points: Array<[number, number]>): string => {
+  const { createNode, nodes } = useScene.getState()
+
+  // Count existing slabs for naming
+  const slabCount = Object.values(nodes).filter((n) => n.type === 'slab').length
+  const name = `Slab ${slabCount + 1}`
+
+  const slab = SlabNode.parse({
+    name,
+    polygon: points,
+  })
+
+  createNode(slab, levelId)
+  sfxEmitter.emit('sfx:structure-build')
+  return slab.id
+}
+
+export const SlabTool: React.FC = () => {
+  const cursorRef = useRef<Group>(null)
+  const mainLineRef = useRef<Line>(null!)
+  const closingLineRef = useRef<Line>(null!)
+  const currentLevelId = useViewer((state) => state.selection.levelId)
+  const setSelection = useViewer((state) => state.setSelection)
+
+  const [points, setPoints] = useState<Array<[number, number]>>([])
+  const [cursorPosition, setCursorPosition] = useState<[number, number]>([0, 0])
+  const [snappedCursorPosition, setSnappedCursorPosition] = useState<[number, number]>([0, 0])
+  const [levelY, setLevelY] = useState(0)
+  const previousSnappedPointRef = useRef<[number, number] | null>(null)
+  const shiftPressed = useRef(false)
+
+  // Update cursor position and lines on grid move
+  useEffect(() => {
+    if (!currentLevelId) return
+
+    const onGridMove = (event: GridEvent) => {
+      if (!cursorRef.current) return
+
+      const gridX = Math.round(event.position[0] * 2) / 2
+      const gridZ = Math.round(event.position[2] * 2) / 2
+      const gridPosition: [number, number] = [gridX, gridZ]
+
+      setCursorPosition(gridPosition)
+      setLevelY(event.position[1])
+
+      // Calculate snapped display position (bypass snap when Shift is held)
+      const lastPoint = points[points.length - 1]
+      const displayPoint =
+        shiftPressed.current || !lastPoint
+          ? gridPosition
+          : calculateSnapPoint(lastPoint, gridPosition)
+      setSnappedCursorPosition(displayPoint)
+
+      // Play snap sound when the snapped position actually changes (only when drawing)
+      if (
+        points.length > 0 &&
+        previousSnappedPointRef.current &&
+        (displayPoint[0] !== previousSnappedPointRef.current[0] ||
+          displayPoint[1] !== previousSnappedPointRef.current[1])
+      ) {
+        sfxEmitter.emit('sfx:grid-snap')
+      }
+
+      previousSnappedPointRef.current = displayPoint
+      cursorRef.current.position.set(displayPoint[0], event.position[1], displayPoint[1])
+    }
+
+    const onGridClick = (_event: GridEvent) => {
+      if (!currentLevelId) return
+
+      // Use the last displayed snapped position (respects Shift state from onGridMove)
+      const clickPoint = previousSnappedPointRef.current ?? cursorPosition
+
+      // Check if clicking on the first point to close the shape
+      const firstPoint = points[0]
+      if (
+        points.length >= 3 &&
+        firstPoint &&
+        Math.abs(clickPoint[0] - firstPoint[0]) < 0.25 &&
+        Math.abs(clickPoint[1] - firstPoint[1]) < 0.25
+      ) {
+        // Create the slab and select it
+        const slabId = commitSlabDrawing(currentLevelId, points)
+        setSelection({ selectedIds: [slabId] })
+        setPoints([])
+      } else {
+        // Add point to polygon
+        setPoints([...points, clickPoint])
+      }
+    }
+
+    const onGridDoubleClick = (_event: GridEvent) => {
+      if (!currentLevelId) return
+
+      // Need at least 3 points to form a polygon
+      if (points.length >= 3) {
+        const slabId = commitSlabDrawing(currentLevelId, points)
+        setSelection({ selectedIds: [slabId] })
+        setPoints([])
+      }
+    }
+
+    const onCancel = () => {
+      if (points.length > 0) markToolCancelConsumed()
+      setPoints([])
+    }
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Shift') shiftPressed.current = true
+    }
+    const onKeyUp = (e: KeyboardEvent) => {
+      if (e.key === 'Shift') shiftPressed.current = false
+    }
+    document.addEventListener('keydown', onKeyDown)
+    document.addEventListener('keyup', onKeyUp)
+
+    emitter.on('grid:move', onGridMove)
+    emitter.on('grid:click', onGridClick)
+    emitter.on('grid:double-click', onGridDoubleClick)
+    emitter.on('tool:cancel', onCancel)
+
+    return () => {
+      document.removeEventListener('keydown', onKeyDown)
+      document.removeEventListener('keyup', onKeyUp)
+      emitter.off('grid:move', onGridMove)
+      emitter.off('grid:click', onGridClick)
+      emitter.off('grid:double-click', onGridDoubleClick)
+      emitter.off('tool:cancel', onCancel)
+    }
+  }, [currentLevelId, points, cursorPosition, setSelection])
+
+  // Update line geometries when points change
+  useEffect(() => {
+    if (!(mainLineRef.current && closingLineRef.current)) return
+
+    if (points.length === 0) {
+      mainLineRef.current.visible = false
+      closingLineRef.current.visible = false
+      return
+    }
+
+    const y = levelY + Y_OFFSET
+    const snappedCursor = snappedCursorPosition
+
+    // Build main line points
+    const linePoints: Vector3[] = points.map(([x, z]) => new Vector3(x, y, z))
+    linePoints.push(new Vector3(snappedCursor[0], y, snappedCursor[1]))
+
+    // Update main line
+    if (linePoints.length >= 2) {
+      mainLineRef.current.geometry.dispose()
+      mainLineRef.current.geometry = new BufferGeometry().setFromPoints(linePoints)
+      mainLineRef.current.visible = true
+    } else {
+      mainLineRef.current.visible = false
+    }
+
+    // Update closing line (from cursor back to first point)
+    const firstPoint = points[0]
+    if (points.length >= 2 && firstPoint) {
+      const closingPoints = [
+        new Vector3(snappedCursor[0], y, snappedCursor[1]),
+        new Vector3(firstPoint[0], y, firstPoint[1]),
+      ]
+      closingLineRef.current.geometry.dispose()
+      closingLineRef.current.geometry = new BufferGeometry().setFromPoints(closingPoints)
+      closingLineRef.current.visible = true
+    } else {
+      closingLineRef.current.visible = false
+    }
+  }, [points, snappedCursorPosition, levelY])
+
+  // Create preview shape when we have 3+ points
+  const previewShape = useMemo(() => {
+    if (points.length < 3) return null
+
+    const snappedCursor = snappedCursorPosition
+
+    const allPoints = [...points, snappedCursor]
+
+    // THREE.Shape is in X-Y plane. After rotation of -PI/2 around X:
+    // - Shape X -> World X
+    // - Shape Y -> World -Z (so we negate Z to get correct orientation)
+    const firstPt = allPoints[0]
+    if (!firstPt) return null
+
+    const shape = new Shape()
+    shape.moveTo(firstPt[0], -firstPt[1])
+
+    for (let i = 1; i < allPoints.length; i++) {
+      const pt = allPoints[i]
+      if (pt) {
+        shape.lineTo(pt[0], -pt[1])
+      }
+    }
+    shape.closePath()
+
+    return shape
+  }, [points, snappedCursorPosition])
+
+  return (
+    <group>
+      {/* Cursor */}
+      <CursorSphere ref={cursorRef} />
+
+      {/* Preview fill */}
+      {previewShape && (
+        <mesh
+          frustumCulled={false}
+          layers={EDITOR_LAYER}
+          position={[0, levelY + Y_OFFSET, 0]}
+          rotation={[-Math.PI / 2, 0, 0]}
+        >
+          <shapeGeometry args={[previewShape]} />
+          <meshBasicMaterial
+            color="#818cf8"
+            depthTest={false}
+            opacity={0.15}
+            side={DoubleSide}
+            transparent
+          />
+        </mesh>
+      )}
+
+      {/* Main line */}
+      {/* @ts-ignore */}
+      <line
+        frustumCulled={false}
+        layers={EDITOR_LAYER}
+        // @ts-expect-error
+        ref={mainLineRef}
+        renderOrder={1}
+        visible={false}
+      >
+        <bufferGeometry />
+        <lineBasicNodeMaterial color="#818cf8" depthTest={false} depthWrite={false} linewidth={3} />
+      </line>
+
+      {/* Closing line */}
+      {/* @ts-ignore */}
+      <line
+        frustumCulled={false}
+        layers={EDITOR_LAYER}
+        // @ts-expect-error
+        ref={closingLineRef}
+        renderOrder={1}
+        visible={false}
+      >
+        <bufferGeometry />
+        <lineBasicNodeMaterial
+          color="#818cf8"
+          depthTest={false}
+          depthWrite={false}
+          linewidth={2}
+          opacity={0.5}
+          transparent
+        />
+      </line>
+
+      {/* Point markers */}
+      {points.map(([x, z], index) => (
+        <CursorSphere
+          color="#818cf8"
+          height={0}
+          key={index}
+          position={[x, levelY + Y_OFFSET + 0.01, z]}
+          showTooltip={false}
+        />
+      ))}
+    </group>
+  )
+}

package/src/components/tools/stair/stair-defaults.ts

@@ -0,0 +1,7 @@
+export const DEFAULT_STAIR_WIDTH = 1.0
+export const DEFAULT_STAIR_LENGTH = 3.0
+export const DEFAULT_STAIR_HEIGHT = 2.5
+export const DEFAULT_STAIR_STEP_COUNT = 10
+export const DEFAULT_STAIR_ATTACHMENT_SIDE = 'front' as const
+export const DEFAULT_STAIR_FILL_TO_FLOOR = true
+export const DEFAULT_STAIR_THICKNESS = 0.25

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

@@ -0,0 +1,194 @@
+import {
+  type AnyNode,
+  emitter,
+  type GridEvent,
+  type LevelNode,
+  StairNode,
+  StairSegmentNode,
+  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 { CursorSphere } from '../shared/cursor-sphere'
+import {
+  DEFAULT_STAIR_ATTACHMENT_SIDE,
+  DEFAULT_STAIR_FILL_TO_FLOOR,
+  DEFAULT_STAIR_HEIGHT,
+  DEFAULT_STAIR_LENGTH,
+  DEFAULT_STAIR_STEP_COUNT,
+  DEFAULT_STAIR_THICKNESS,
+  DEFAULT_STAIR_WIDTH,
+} from './stair-defaults'
+
+const GRID_OFFSET = 0.02
+
+/**
+ * Generates the step-profile geometry for the ghost preview.
+ * Same algorithm as StairSystem's generateStairSegmentGeometry.
+ */
+function createStairPreviewGeometry(): THREE.BufferGeometry {
+  const riserHeight = DEFAULT_STAIR_HEIGHT / DEFAULT_STAIR_STEP_COUNT
+  const treadDepth = DEFAULT_STAIR_LENGTH / DEFAULT_STAIR_STEP_COUNT
+
+  const shape = new THREE.Shape()
+  shape.moveTo(0, 0)
+
+  for (let i = 0; i < DEFAULT_STAIR_STEP_COUNT; i++) {
+    shape.lineTo(i * treadDepth, (i + 1) * riserHeight)
+    shape.lineTo((i + 1) * treadDepth, (i + 1) * riserHeight)
+  }
+
+  // Fill to floor (absoluteHeight = 0)
+  shape.lineTo(DEFAULT_STAIR_LENGTH, 0)
+  shape.lineTo(0, 0)
+
+  const geometry = new THREE.ExtrudeGeometry(shape, {
+    steps: 1,
+    depth: DEFAULT_STAIR_WIDTH,
+    bevelEnabled: false,
+  })
+
+  // Rotate so extrusion is along X (width), shape profile in XZ plane
+  const matrix = new THREE.Matrix4()
+  matrix.makeRotationY(-Math.PI / 2)
+  matrix.setPosition(DEFAULT_STAIR_WIDTH / 2, 0, 0)
+  geometry.applyMatrix4(matrix)
+
+  return geometry
+}
+
+/**
+ * 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 stairCount = Object.values(nodes).filter((n) => n.type === 'stair').length
+  const name = `Staircase ${stairCount + 1}`
+
+  const segment = StairSegmentNode.parse({
+    segmentType: 'stair',
+    width: DEFAULT_STAIR_WIDTH,
+    length: DEFAULT_STAIR_LENGTH,
+    height: DEFAULT_STAIR_HEIGHT,
+    stepCount: DEFAULT_STAIR_STEP_COUNT,
+    attachmentSide: DEFAULT_STAIR_ATTACHMENT_SIDE,
+    fillToFloor: DEFAULT_STAIR_FILL_TO_FLOOR,
+    thickness: DEFAULT_STAIR_THICKNESS,
+    position: [0, 0, 0],
+  })
+
+  const stair = StairNode.parse({
+    name,
+    position,
+    rotation,
+    children: [segment.id],
+  })
+
+  createNodes([
+    { node: stair, parentId: levelId },
+    { node: segment, parentId: stair.id },
+  ])
+
+  sfxEmitter.emit('sfx:structure-build')
+}
+
+export const StairTool: React.FC = () => {
+  const cursorRef = useRef<THREE.Group>(null)
+  const previewRef = useRef<THREE.Group>(null)
+  const rotationRef = useRef(0)
+  const previousGridPosRef = useRef<[number, number] | null>(null)
+  const currentLevelId = useViewer((state) => state.selection.levelId)
+
+  const previewGeometry = useMemo(() => createStairPreviewGeometry(), [])
+
+  useEffect(() => {
+    if (!currentLevelId) return
+
+    // Reset rotation when tool activates
+    rotationRef.current = 0
+    if (previewRef.current) previewRef.current.rotation.y = 0
+
+    const onGridMove = (event: GridEvent) => {
+      const gridX = Math.round(event.position[0] * 2) / 2
+      const gridZ = Math.round(event.position[2] * 2) / 2
+      const y = event.position[1]
+
+      if (cursorRef.current) {
+        cursorRef.current.position.set(gridX, y + GRID_OFFSET, gridZ)
+      }
+
+      if (previewRef.current) {
+        previewRef.current.position.set(gridX, y, gridZ)
+      }
+
+      if (
+        previousGridPosRef.current &&
+        (gridX !== previousGridPosRef.current[0] || gridZ !== previousGridPosRef.current[1])
+      ) {
+        sfxEmitter.emit('sfx:grid-snap')
+      }
+
+      previousGridPosRef.current = [gridX, gridZ]
+    }
+
+    const onGridClick = (event: GridEvent) => {
+      if (!currentLevelId) return
+
+      const gridX = Math.round(event.position[0] * 2) / 2
+      const gridZ = Math.round(event.position[2] * 2) / 2
+      const y = event.position[1]
+
+      commitStairPlacement(currentLevelId, [gridX, y, gridZ], rotationRef.current)
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
+        return
+      }
+
+      const ROTATION_STEP = Math.PI / 4
+      let rotationDelta = 0
+      if (event.key === 'r' || event.key === 'R') rotationDelta = ROTATION_STEP
+      else if (event.key === 't' || event.key === 'T') rotationDelta = -ROTATION_STEP
+
+      if (rotationDelta !== 0) {
+        event.preventDefault()
+        sfxEmitter.emit('sfx:item-rotate')
+        rotationRef.current += rotationDelta
+        if (previewRef.current) {
+          previewRef.current.rotation.y = rotationRef.current
+        }
+      }
+    }
+
+    emitter.on('grid:move', onGridMove)
+    emitter.on('grid:click', onGridClick)
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      emitter.off('grid:move', onGridMove)
+      emitter.off('grid:click', onGridClick)
+      window.removeEventListener('keydown', onKeyDown)
+    }
+  }, [currentLevelId])
+
+  return (
+    <group>
+      <CursorSphere ref={cursorRef} />
+
+      {/* 3D ghost preview — position/rotation updated imperatively */}
+      <group ref={previewRef}>
+        <mesh castShadow geometry={previewGeometry}>
+          <meshStandardMaterial color="#818cf8" depthWrite={false} opacity={0.35} transparent />
+        </mesh>
+      </group>
+    </group>
+  )
+}

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

@@ -0,0 +1,120 @@
+import { type AnyNodeId, type CeilingNode, type SlabNode, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import useEditor, { type Phase, type Tool } from '../../store/use-editor'
+import { CeilingBoundaryEditor } from './ceiling/ceiling-boundary-editor'
+import { CeilingHoleEditor } from './ceiling/ceiling-hole-editor'
+import { CeilingTool } from './ceiling/ceiling-tool'
+import { DoorTool } from './door/door-tool'
+import { ItemTool } from './item/item-tool'
+import { MoveTool } from './item/move-tool'
+import { RoofTool } from './roof/roof-tool'
+import { SiteBoundaryEditor } from './site/site-boundary-editor'
+import { SlabBoundaryEditor } from './slab/slab-boundary-editor'
+import { SlabHoleEditor } from './slab/slab-hole-editor'
+import { SlabTool } from './slab/slab-tool'
+import { StairTool } from './stair/stair-tool'
+import { WallTool } from './wall/wall-tool'
+import { WindowTool } from './window/window-tool'
+import { ZoneBoundaryEditor } from './zone/zone-boundary-editor'
+import { ZoneTool } from './zone/zone-tool'
+
+const tools: Record<Phase, Partial<Record<Tool, React.FC>>> = {
+  site: {
+    'property-line': SiteBoundaryEditor,
+  },
+  structure: {
+    wall: WallTool,
+    slab: SlabTool,
+    ceiling: CeilingTool,
+    roof: RoofTool,
+    stair: StairTool,
+    door: DoorTool,
+    item: ItemTool,
+    zone: ZoneTool,
+    window: WindowTool,
+  },
+  furnish: {
+    item: ItemTool,
+  },
+}
+
+export const ToolManager: React.FC = () => {
+  const phase = useEditor((state) => state.phase)
+  const mode = useEditor((state) => state.mode)
+  const tool = useEditor((state) => state.tool)
+  const movingNode = useEditor((state) => state.movingNode)
+  const editingHole = useEditor((state) => state.editingHole)
+  const selectedZoneId = useViewer((state) => state.selection.zoneId)
+  const selectedIds = useViewer((state) => state.selection.selectedIds)
+  const nodes = useScene((state) => state.nodes)
+
+  // Check if a slab is selected
+  const selectedSlabId = selectedIds.find((id) => nodes[id as AnyNodeId]?.type === 'slab') as
+    | SlabNode['id']
+    | undefined
+
+  // Check if a ceiling is selected
+  const selectedCeilingId = selectedIds.find((id) => nodes[id as AnyNodeId]?.type === 'ceiling') as
+    | CeilingNode['id']
+    | undefined
+
+  // Show site boundary editor when in site phase (toggle controls entry/exit)
+  const showSiteBoundaryEditor = phase === 'site'
+
+  // Show slab boundary editor when in structure/select mode with a slab selected (but not editing a hole)
+  const showSlabBoundaryEditor =
+    phase === 'structure' &&
+    mode === 'select' &&
+    selectedSlabId !== undefined &&
+    (!editingHole || editingHole.nodeId !== selectedSlabId)
+
+  // Show slab hole editor when editing a hole on the selected slab
+  const showSlabHoleEditor =
+    selectedSlabId !== undefined && editingHole !== null && editingHole.nodeId === selectedSlabId
+
+  // Show ceiling boundary editor when in structure/select mode with a ceiling selected (but not editing a hole)
+  const showCeilingBoundaryEditor =
+    phase === 'structure' &&
+    mode === 'select' &&
+    selectedCeilingId !== undefined &&
+    (!editingHole || editingHole.nodeId !== selectedCeilingId)
+
+  // Show ceiling hole editor when editing a hole on the selected ceiling
+  const showCeilingHoleEditor =
+    selectedCeilingId !== undefined &&
+    editingHole !== null &&
+    editingHole.nodeId === selectedCeilingId
+
+  // Show zone boundary editor when in structure/select mode with a zone selected
+  // Hide when editing a slab or ceiling to avoid overlapping handles
+  const showZoneBoundaryEditor =
+    phase === 'structure' &&
+    mode === 'select' &&
+    selectedZoneId !== null &&
+    !showSlabBoundaryEditor &&
+    !showCeilingBoundaryEditor
+
+  // Show build tools when in build mode
+  const showBuildTool = mode === 'build' && tool !== null
+
+  const BuildToolComponent = showBuildTool ? tools[phase]?.[tool] : null
+
+  return (
+    <>
+      {showSiteBoundaryEditor && <SiteBoundaryEditor />}
+      {showZoneBoundaryEditor && selectedZoneId && <ZoneBoundaryEditor zoneId={selectedZoneId} />}
+      {showSlabBoundaryEditor && selectedSlabId && <SlabBoundaryEditor slabId={selectedSlabId} />}
+      {showSlabHoleEditor && selectedSlabId && editingHole && (
+        <SlabHoleEditor holeIndex={editingHole.holeIndex} slabId={selectedSlabId} />
+      )}
+      {showCeilingBoundaryEditor && selectedCeilingId && (
+        <CeilingBoundaryEditor ceilingId={selectedCeilingId} />
+      )}
+      {showCeilingHoleEditor && selectedCeilingId && editingHole && (
+        <CeilingHoleEditor ceilingId={selectedCeilingId} holeIndex={editingHole.holeIndex} />
+      )}
+      {movingNode && <MoveTool />}
+      {!movingNode && BuildToolComponent && <BuildToolComponent />}
+    </>
+  )
+}