@pascal-app/editor 0.4.0

package/src/components/tools/wall/wall-drafting.ts

@@ -0,0 +1,140 @@
+import { useScene, type WallNode, WallNode as WallSchema } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { sfxEmitter } from '../../../lib/sfx-bus'
+
+export type WallPlanPoint = [number, number]
+
+export const WALL_GRID_STEP = 0.5
+export const WALL_JOIN_SNAP_RADIUS = 0.35
+export const WALL_MIN_LENGTH = 0.01
+
+function distanceSquared(a: WallPlanPoint, b: WallPlanPoint): number {
+  const dx = a[0] - b[0]
+  const dz = a[1] - b[1]
+  return dx * dx + dz * dz
+}
+
+function snapScalarToGrid(value: number, step = WALL_GRID_STEP): number {
+  return Math.round(value / step) * step
+}
+
+export function snapPointToGrid(point: WallPlanPoint, step = WALL_GRID_STEP): WallPlanPoint {
+  return [snapScalarToGrid(point[0], step), snapScalarToGrid(point[1], step)]
+}
+
+export function snapPointTo45Degrees(start: WallPlanPoint, cursor: WallPlanPoint): WallPlanPoint {
+  const dx = cursor[0] - start[0]
+  const dz = cursor[1] - start[1]
+  const angle = Math.atan2(dz, dx)
+  const snappedAngle = Math.round(angle / (Math.PI / 4)) * (Math.PI / 4)
+  const distance = Math.sqrt(dx * dx + dz * dz)
+
+  return snapPointToGrid([
+    start[0] + Math.cos(snappedAngle) * distance,
+    start[1] + Math.sin(snappedAngle) * distance,
+  ])
+}
+
+function projectPointOntoWall(point: WallPlanPoint, wall: WallNode): WallPlanPoint | null {
+  const [x1, z1] = wall.start
+  const [x2, z2] = wall.end
+  const dx = x2 - x1
+  const dz = z2 - z1
+  const lengthSquared = dx * dx + dz * dz
+  if (lengthSquared < 1e-9) {
+    return null
+  }
+
+  const t = ((point[0] - x1) * dx + (point[1] - z1) * dz) / lengthSquared
+  if (t <= 0 || t >= 1) {
+    return null
+  }
+
+  return [x1 + dx * t, z1 + dz * t]
+}
+
+export function findWallSnapTarget(
+  point: WallPlanPoint,
+  walls: WallNode[],
+  options?: { ignoreWallIds?: string[]; radius?: number },
+): WallPlanPoint | null {
+  const ignoreWallIds = new Set(options?.ignoreWallIds ?? [])
+  const radiusSquared = (options?.radius ?? WALL_JOIN_SNAP_RADIUS) ** 2
+  let bestTarget: WallPlanPoint | null = null
+  let bestDistanceSquared = Number.POSITIVE_INFINITY
+
+  for (const wall of walls) {
+    if (ignoreWallIds.has(wall.id)) {
+      continue
+    }
+
+    const candidates: Array<WallPlanPoint | null> = [
+      wall.start,
+      wall.end,
+      projectPointOntoWall(point, wall),
+    ]
+    for (const candidate of candidates) {
+      if (!candidate) {
+        continue
+      }
+
+      const candidateDistanceSquared = distanceSquared(point, candidate)
+      if (
+        candidateDistanceSquared > radiusSquared ||
+        candidateDistanceSquared >= bestDistanceSquared
+      ) {
+        continue
+      }
+
+      bestTarget = candidate
+      bestDistanceSquared = candidateDistanceSquared
+    }
+  }
+
+  return bestTarget
+}
+
+export function snapWallDraftPoint(args: {
+  point: WallPlanPoint
+  walls: WallNode[]
+  start?: WallPlanPoint
+  angleSnap?: boolean
+  ignoreWallIds?: string[]
+}): WallPlanPoint {
+  const { point, walls, start, angleSnap = false, ignoreWallIds } = args
+  const basePoint = start && angleSnap ? snapPointTo45Degrees(start, point) : snapPointToGrid(point)
+
+  return (
+    findWallSnapTarget(basePoint, walls, {
+      ignoreWallIds,
+    }) ?? basePoint
+  )
+}
+
+export function isWallLongEnough(start: WallPlanPoint, end: WallPlanPoint): boolean {
+  return distanceSquared(start, end) >= WALL_MIN_LENGTH * WALL_MIN_LENGTH
+}
+
+export function createWallOnCurrentLevel(
+  start: WallPlanPoint,
+  end: WallPlanPoint,
+): WallNode | null {
+  const currentLevelId = useViewer.getState().selection.levelId
+  const { createNode, nodes } = useScene.getState()
+
+  if (!(currentLevelId && isWallLongEnough(start, end))) {
+    return null
+  }
+
+  const wallCount = Object.values(nodes).filter((node) => node.type === 'wall').length
+  const wall = WallSchema.parse({
+    name: `Wall ${wallCount + 1}`,
+    start,
+    end,
+  })
+
+  createNode(wall, currentLevelId)
+  sfxEmitter.emit('sfx:structure-build')
+
+  return wall
+}

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

@@ -0,0 +1,210 @@
+import { emitter, type GridEvent, type LevelNode, useScene, type WallNode } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useEffect, useRef } from 'react'
+import { DoubleSide, type Group, type Mesh, Shape, ShapeGeometry, 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'
+import { createWallOnCurrentLevel, snapWallDraftPoint, type WallPlanPoint } from './wall-drafting'
+
+const WALL_HEIGHT = 2.5
+
+/**
+ * Update wall preview mesh geometry to create a vertical plane between two points
+ */
+const updateWallPreview = (mesh: Mesh, start: Vector3, end: Vector3) => {
+  // Calculate direction and perpendicular for wall thickness
+  const direction = new Vector3(end.x - start.x, 0, end.z - start.z)
+  const length = direction.length()
+
+  if (length < 0.01) {
+    mesh.visible = false
+    return
+  }
+
+  mesh.visible = true
+  direction.normalize()
+
+  // Create wall shape (vertical rectangle in XY plane)
+  const shape = new Shape()
+  shape.moveTo(0, 0)
+  shape.lineTo(length, 0)
+  shape.lineTo(length, WALL_HEIGHT)
+  shape.lineTo(0, WALL_HEIGHT)
+  shape.closePath()
+
+  // Create geometry
+  const geometry = new ShapeGeometry(shape)
+
+  // Calculate rotation angle
+  // Negate the angle to fix the opposite direction issue
+  const angle = -Math.atan2(direction.z, direction.x)
+
+  // Position at start point and rotate
+  mesh.position.set(start.x, start.y, start.z)
+  mesh.rotation.y = angle
+
+  // Dispose old geometry and assign new one
+  if (mesh.geometry) {
+    mesh.geometry.dispose()
+  }
+  mesh.geometry = geometry
+}
+
+const getCurrentLevelWalls = (): WallNode[] => {
+  const currentLevelId = useViewer.getState().selection.levelId
+  const { nodes } = useScene.getState()
+
+  if (!currentLevelId) return []
+
+  const levelNode = nodes[currentLevelId]
+  if (!levelNode || levelNode.type !== 'level') return []
+
+  return (levelNode as LevelNode).children
+    .map((childId) => nodes[childId])
+    .filter((node): node is WallNode => node?.type === 'wall')
+}
+
+export const WallTool: React.FC = () => {
+  const cursorRef = useRef<Group>(null)
+  const wallPreviewRef = useRef<Mesh>(null!)
+  const startingPoint = useRef(new Vector3(0, 0, 0))
+  const endingPoint = useRef(new Vector3(0, 0, 0))
+  const buildingState = useRef(0)
+  const shiftPressed = useRef(false)
+
+  useEffect(() => {
+    let gridPosition: WallPlanPoint = [0, 0]
+    let previousWallEnd: [number, number] | null = null
+
+    const onGridMove = (event: GridEvent) => {
+      if (!(cursorRef.current && wallPreviewRef.current)) return
+
+      const walls = getCurrentLevelWalls()
+      const cursorPoint: WallPlanPoint = [event.position[0], event.position[2]]
+      gridPosition = snapWallDraftPoint({
+        point: cursorPoint,
+        walls,
+      })
+
+      if (buildingState.current === 1) {
+        const snappedPoint = snapWallDraftPoint({
+          point: cursorPoint,
+          walls,
+          start: [startingPoint.current.x, startingPoint.current.z],
+          angleSnap: !shiftPressed.current,
+        })
+        const snapped = new Vector3(snappedPoint[0], event.position[1], snappedPoint[1])
+        endingPoint.current.copy(snapped)
+
+        // Position the cursor at the end of the wall being drawn
+        cursorRef.current.position.set(snapped.x, snapped.y, snapped.z)
+
+        // Play snap sound only when the actual wall end position changes
+        const currentWallEnd: [number, number] = [endingPoint.current.x, endingPoint.current.z]
+        if (
+          previousWallEnd &&
+          (currentWallEnd[0] !== previousWallEnd[0] || currentWallEnd[1] !== previousWallEnd[1])
+        ) {
+          sfxEmitter.emit('sfx:grid-snap')
+        }
+        previousWallEnd = currentWallEnd
+
+        // Update wall preview geometry
+        updateWallPreview(wallPreviewRef.current, startingPoint.current, endingPoint.current)
+      } else {
+        // Not drawing a wall yet, show the snapped anchor point.
+        cursorRef.current.position.set(gridPosition[0], event.position[1], gridPosition[1])
+      }
+    }
+
+    const onGridClick = (event: GridEvent) => {
+      const walls = getCurrentLevelWalls()
+      const clickPoint: WallPlanPoint = [event.position[0], event.position[2]]
+
+      if (buildingState.current === 0) {
+        const snappedStart = snapWallDraftPoint({
+          point: clickPoint,
+          walls,
+        })
+        gridPosition = snappedStart
+        startingPoint.current.set(snappedStart[0], event.position[1], snappedStart[1])
+        endingPoint.current.copy(startingPoint.current)
+        buildingState.current = 1
+        wallPreviewRef.current.visible = true
+      } else if (buildingState.current === 1) {
+        const snappedEnd = snapWallDraftPoint({
+          point: clickPoint,
+          walls,
+          start: [startingPoint.current.x, startingPoint.current.z],
+          angleSnap: !shiftPressed.current,
+        })
+        endingPoint.current.set(snappedEnd[0], event.position[1], snappedEnd[1])
+        const dx = endingPoint.current.x - startingPoint.current.x
+        const dz = endingPoint.current.z - startingPoint.current.z
+        if (dx * dx + dz * dz < 0.01 * 0.01) return
+        createWallOnCurrentLevel(
+          [startingPoint.current.x, startingPoint.current.z],
+          [endingPoint.current.x, endingPoint.current.z],
+        )
+        wallPreviewRef.current.visible = false
+        buildingState.current = 0
+      }
+    }
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Shift') {
+        shiftPressed.current = true
+      }
+    }
+
+    const onKeyUp = (e: KeyboardEvent) => {
+      if (e.key === 'Shift') {
+        shiftPressed.current = false
+      }
+    }
+
+    const onCancel = () => {
+      if (buildingState.current === 1) {
+        markToolCancelConsumed()
+        buildingState.current = 0
+        wallPreviewRef.current.visible = false
+      }
+    }
+
+    emitter.on('grid:move', onGridMove)
+    emitter.on('grid:click', onGridClick)
+    emitter.on('tool:cancel', onCancel)
+    window.addEventListener('keydown', onKeyDown)
+    window.addEventListener('keyup', onKeyUp)
+
+    return () => {
+      emitter.off('grid:move', onGridMove)
+      emitter.off('grid:click', onGridClick)
+      emitter.off('tool:cancel', onCancel)
+      window.removeEventListener('keydown', onKeyDown)
+      window.removeEventListener('keyup', onKeyUp)
+    }
+  }, [])
+
+  return (
+    <group>
+      {/* Cursor indicator */}
+      <CursorSphere ref={cursorRef} />
+
+      {/* Wall preview */}
+      <mesh layers={EDITOR_LAYER} ref={wallPreviewRef} renderOrder={1} visible={false}>
+        <shapeGeometry />
+        <meshBasicMaterial
+          color="#818cf8"
+          depthTest={false}
+          depthWrite={false}
+          opacity={0.5}
+          side={DoubleSide}
+          transparent
+        />
+      </mesh>
+    </group>
+  )
+}