@pascal-app/editor 0.4.0

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

@@ -0,0 +1,465 @@
+import { CeilingNode, emitter, type GridEvent, type LevelNode, 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 { mix, positionLocal } from 'three/tsl'
+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 CEILING_HEIGHT = 2.52
+const GRID_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 ceiling with the given polygon points and returns its ID
+ */
+const commitCeilingDrawing = (
+  levelId: LevelNode['id'],
+  points: Array<[number, number]>,
+): string => {
+  const { createNode, nodes } = useScene.getState()
+
+  // Count existing ceilings for naming
+  const ceilingCount = Object.values(nodes).filter((n) => n.type === 'ceiling').length
+  const name = `Ceiling ${ceilingCount + 1}`
+
+  const ceiling = CeilingNode.parse({
+    name,
+    polygon: points,
+  })
+
+  createNode(ceiling, levelId)
+  sfxEmitter.emit('sfx:structure-build')
+  return ceiling.id
+}
+
+export const CeilingTool: React.FC = () => {
+  const cursorRef = useRef<Group>(null)
+  const gridCursorRef = useRef<Group>(null)
+  const mainLineRef = useRef<Line>(null!)
+  const closingLineRef = useRef<Line>(null!)
+  const groundMainLineRef = useRef<Line>(null!)
+  const groundClosingLineRef = useRef<Line>(null!)
+  const verticalLineRef = 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)
+
+  // Static geometry: local y goes 0 (grid) → H (ceiling), mesh is positioned at gridY
+  const verticalGeo = useMemo(
+    () =>
+      new BufferGeometry().setFromPoints([
+        new Vector3(0, 0, 0),
+        new Vector3(0, CEILING_HEIGHT - GRID_OFFSET, 0),
+      ]),
+    [],
+  )
+
+  // opacityNode: positionLocal.y is 0 at grid, H at ceiling → fade from 0.6 to 0
+  const gradientOpacityNode = useMemo(
+    () => mix(0.6, 0.0, positionLocal.y.div(CEILING_HEIGHT - GRID_OFFSET).clamp()),
+    [],
+  )
+
+  // Update cursor position and lines on grid move
+  useEffect(() => {
+    if (!currentLevelId) return
+
+    const onGridMove = (event: GridEvent) => {
+      if (!(cursorRef.current && gridCursorRef.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])
+
+      const ceilingY = event.position[1] + CEILING_HEIGHT
+      const gridY = event.position[1] + GRID_OFFSET
+
+      // 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], ceilingY, displayPoint[1])
+      gridCursorRef.current.position.set(displayPoint[0], gridY, displayPoint[1])
+
+      if (verticalLineRef.current) {
+        verticalLineRef.current.position.set(displayPoint[0], gridY, 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 ceiling and select it
+        const ceilingId = commitCeilingDrawing(currentLevelId, points)
+        setSelection({ selectedIds: [ceilingId] })
+        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 ceilingId = commitCeilingDrawing(currentLevelId, points)
+        setSelection({ selectedIds: [ceilingId] })
+        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 ceilingY = levelY + CEILING_HEIGHT
+    const snappedCursor = snappedCursorPosition
+
+    // Build main line points
+    const linePoints: Vector3[] = points.map(([x, z]) => new Vector3(x, ceilingY, z))
+    linePoints.push(new Vector3(snappedCursor[0], ceilingY, snappedCursor[1]))
+
+    const gridY = levelY + GRID_OFFSET
+    const groundLinePoints: Vector3[] = points.map(([x, z]) => new Vector3(x, gridY, z))
+    groundLinePoints.push(new Vector3(snappedCursor[0], gridY, snappedCursor[1]))
+
+    // Update main line
+    if (linePoints.length >= 2) {
+      mainLineRef.current.geometry.dispose()
+      mainLineRef.current.geometry = new BufferGeometry().setFromPoints(linePoints)
+      mainLineRef.current.visible = true
+
+      groundMainLineRef.current.geometry.dispose()
+      groundMainLineRef.current.geometry = new BufferGeometry().setFromPoints(groundLinePoints)
+      groundMainLineRef.current.visible = true
+    } else {
+      mainLineRef.current.visible = false
+      groundMainLineRef.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], ceilingY, snappedCursor[1]),
+        new Vector3(firstPoint[0], ceilingY, firstPoint[1]),
+      ]
+      closingLineRef.current.geometry.dispose()
+      closingLineRef.current.geometry = new BufferGeometry().setFromPoints(closingPoints)
+      closingLineRef.current.visible = true
+
+      const groundClosingPoints = [
+        new Vector3(snappedCursor[0], gridY, snappedCursor[1]),
+        new Vector3(firstPoint[0], gridY, firstPoint[1]),
+      ]
+      groundClosingLineRef.current.geometry.dispose()
+      groundClosingLineRef.current.geometry = new BufferGeometry().setFromPoints(
+        groundClosingPoints,
+      )
+      groundClosingLineRef.current.visible = true
+    } else {
+      closingLineRef.current.visible = false
+      groundClosingLineRef.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 at ceiling height */}
+      <CursorSphere ref={cursorRef} />
+
+      {/* Grid-level cursor indicator */}
+      <mesh
+        layers={EDITOR_LAYER}
+        ref={gridCursorRef}
+        renderOrder={2}
+        rotation={[-Math.PI / 2, 0, 0]}
+      >
+        <ringGeometry args={[0.15, 0.2, 32]} />
+        <meshBasicMaterial
+          color="#818cf8"
+          depthTest={false}
+          depthWrite={true}
+          opacity={0.5}
+          side={DoubleSide}
+          transparent
+        />
+      </mesh>
+
+      {/* Vertical connector: local y=0 at grid, y=H at ceiling; position.y set to gridY on move */}
+      {/* @ts-ignore */}
+      <line geometry={verticalGeo} layers={EDITOR_LAYER} ref={verticalLineRef} renderOrder={1}>
+        <lineBasicNodeMaterial
+          color="#818cf8"
+          depthTest={false}
+          depthWrite={false}
+          opacityNode={gradientOpacityNode}
+          transparent
+        />
+      </line>
+
+      {/* Preview fill (Top) */}
+      {previewShape && (
+        <mesh
+          frustumCulled={false}
+          layers={EDITOR_LAYER}
+          position={[0, levelY + CEILING_HEIGHT, 0]}
+          rotation={[-Math.PI / 2, 0, 0]}
+        >
+          <shapeGeometry args={[previewShape]} />
+          <meshBasicMaterial
+            color="#818cf8"
+            depthTest={false}
+            opacity={0.15}
+            side={DoubleSide}
+            transparent
+          />
+        </mesh>
+      )}
+
+      {/* Preview fill (Ground) */}
+      {previewShape && (
+        <mesh
+          frustumCulled={false}
+          layers={EDITOR_LAYER}
+          position={[0, levelY + GRID_OFFSET, 0]}
+          rotation={[-Math.PI / 2, 0, 0]}
+        >
+          <shapeGeometry args={[previewShape]} />
+          <meshBasicMaterial
+            color="#818cf8"
+            depthTest={false}
+            opacity={0.1}
+            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>
+
+      {/* Ground main line */}
+      {/* @ts-ignore */}
+      <line
+        frustumCulled={false}
+        layers={EDITOR_LAYER}
+        // @ts-expect-error
+        ref={groundMainLineRef}
+        renderOrder={1}
+        visible={false}
+      >
+        <bufferGeometry />
+        <lineBasicNodeMaterial
+          color="#818cf8"
+          depthTest={false}
+          depthWrite={false}
+          linewidth={3}
+          opacity={0.3}
+          transparent
+        />
+      </line>
+
+      {/* Ground closing line */}
+      {/* @ts-ignore */}
+      <line
+        frustumCulled={false}
+        layers={EDITOR_LAYER}
+        // @ts-expect-error
+        ref={groundClosingLineRef}
+        renderOrder={1}
+        visible={false}
+      >
+        <bufferGeometry />
+        <lineBasicNodeMaterial
+          color="#818cf8"
+          depthTest={false}
+          depthWrite={false}
+          linewidth={2}
+          opacity={0.15}
+          transparent
+        />
+      </line>
+
+      {/* Point markers */}
+      {points.map(([x, z], index) => (
+        <CursorSphere
+          color="#818cf8"
+          key={index}
+          position={[x, levelY + CEILING_HEIGHT + 0.01, z]}
+          showTooltip={false}
+        />
+      ))}
+    </group>
+  )
+}

package/src/components/tools/door/door-math.ts

@@ -0,0 +1,110 @@
+import {
+  type AnyNodeId,
+  type DoorNode,
+  getScaledDimensions,
+  type ItemNode,
+  useScene,
+  type WallNode,
+  type WindowNode,
+} from '@pascal-app/core'
+
+/**
+ * Converts wall-local (X along wall, Y = height above wall base) to world XYZ.
+ */
+export function wallLocalToWorld(
+  wallNode: WallNode,
+  localX: number,
+  localY: number,
+  levelYOffset = 0,
+  slabElevation = 0,
+): [number, number, number] {
+  const wallAngle = Math.atan2(
+    wallNode.end[1] - wallNode.start[1],
+    wallNode.end[0] - wallNode.start[0],
+  )
+  return [
+    wallNode.start[0] + localX * Math.cos(wallAngle),
+    slabElevation + localY + levelYOffset,
+    wallNode.start[1] + localX * Math.sin(wallAngle),
+  ]
+}
+
+/**
+ * Clamps door center X so it stays fully within wall bounds.
+ * Y is always height/2 — doors sit at floor level.
+ */
+export function clampToWall(
+  wallNode: WallNode,
+  localX: number,
+  width: number,
+  height: number,
+): { clampedX: number; clampedY: number } {
+  const dx = wallNode.end[0] - wallNode.start[0]
+  const dz = wallNode.end[1] - wallNode.start[1]
+  const wallLength = Math.sqrt(dx * dx + dz * dz)
+
+  const clampedX = Math.max(width / 2, Math.min(wallLength - width / 2, localX))
+  const clampedY = height / 2 // Doors always sit at floor level
+  return { clampedX, clampedY }
+}
+
+/**
+ * Checks if a proposed door position overlaps any existing wall children.
+ * Handles item, window, and door types.
+ */
+export function hasWallChildOverlap(
+  wallId: string,
+  clampedX: number,
+  clampedY: number,
+  width: number,
+  height: number,
+  ignoreId?: string,
+): boolean {
+  const nodes = useScene.getState().nodes
+  const wallNode = nodes[wallId as AnyNodeId] as WallNode | undefined
+  if (!wallNode) return true
+  const halfW = width / 2
+  const halfH = height / 2
+  const newBottom = clampedY - halfH
+  const newTop = clampedY + halfH
+  const newLeft = clampedX - halfW
+  const newRight = clampedX + halfW
+
+  for (const childId of wallNode.children) {
+    if (childId === ignoreId) continue
+    const child = nodes[childId as AnyNodeId]
+    if (!child) continue
+
+    let childLeft: number, childRight: number, childBottom: number, childTop: number
+
+    if (child.type === 'item') {
+      const item = child as ItemNode
+      if (item.asset.attachTo !== 'wall' && item.asset.attachTo !== 'wall-side') continue
+      const [w, h] = getScaledDimensions(item)
+      childLeft = item.position[0] - w / 2
+      childRight = item.position[0] + w / 2
+      childBottom = item.position[1]
+      childTop = item.position[1] + h
+    } else if (child.type === 'window') {
+      const win = child as WindowNode
+      childLeft = win.position[0] - win.width / 2
+      childRight = win.position[0] + win.width / 2
+      childBottom = win.position[1] - win.height / 2
+      childTop = win.position[1] + win.height / 2
+    } else if (child.type === 'door') {
+      const door = child as DoorNode
+      childLeft = door.position[0] - door.width / 2
+      childRight = door.position[0] + door.width / 2
+      childBottom = door.position[1] - door.height / 2
+      childTop = door.position[1] + door.height / 2
+    } else {
+      continue
+    }
+
+    const xOverlap = newLeft < childRight && newRight > childLeft
+    const yOverlap = newBottom < childTop && newTop > childBottom
+    if (xOverlap && yOverlap) return true
+  }
+
+  return false
+}