@pascal-app/editor 0.4.0 → 0.6.0

package/src/components/tools/fence/curve-fence-tool.tsx

@@ -0,0 +1,179 @@
+'use client'
+
+import {
+  type AnyNodeId,
+  emitter,
+  type FenceNode,
+  type GridEvent,
+  getClampedWallCurveOffset,
+  getMaxWallCurveOffset,
+  getWallChordFrame,
+  getWallMidpointHandlePoint,
+  normalizeWallCurveOffset,
+  pauseSceneHistory,
+  resumeSceneHistory,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
+import { sfxEmitter } from '../../../lib/sfx-bus'
+import useEditor from '../../../store/use-editor'
+import { CursorSphere } from '../shared/cursor-sphere'
+import { getWallGridStep, snapScalarToGrid } from '../wall/wall-drafting'
+
+export const CurveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
+  const activatedAtRef = useRef<number>(Date.now())
+  const originalCurveOffsetRef = useRef(getClampedWallCurveOffset(node))
+  const previousCurveOffsetRef = useRef<number | null>(null)
+  const shiftPressedRef = useRef(false)
+  const previewOffsetRef = useRef<number>(originalCurveOffsetRef.current)
+
+  const initialHandle = getWallMidpointHandlePoint(node)
+  const [cursorLocalPos, setCursorLocalPos] = useState<[number, number, number]>([
+    initialHandle.x,
+    0,
+    initialHandle.y,
+  ])
+
+  const exitCurveMode = useCallback(() => {
+    useEditor.getState().setCurvingFence(null)
+  }, [])
+
+  useEffect(() => {
+    const nodeId = node.id
+    const originalCurveOffset = originalCurveOffsetRef.current
+    const chord = getWallChordFrame(node)
+    const maxCurveOffset = getMaxWallCurveOffset(node)
+
+    pauseSceneHistory(useScene)
+    let wasCommitted = false
+
+    const applyPreview = (curveOffset: number) => {
+      if (previewOffsetRef.current === curveOffset) {
+        return
+      }
+      previewOffsetRef.current = curveOffset
+
+      const nextNode = {
+        ...node,
+        curveOffset,
+      }
+      const handlePoint = getWallMidpointHandlePoint(nextNode)
+      setCursorLocalPos([handlePoint.x, 0, handlePoint.y])
+      useScene.getState().updateNode(nodeId, { curveOffset })
+      useScene.getState().markDirty(nodeId as AnyNodeId)
+    }
+
+    const restoreOriginal = () => {
+      if (previewOffsetRef.current === originalCurveOffset) {
+        return
+      }
+      previewOffsetRef.current = originalCurveOffset
+      useScene.getState().updateNode(nodeId, { curveOffset: originalCurveOffset })
+      useScene.getState().markDirty(nodeId as AnyNodeId)
+    }
+
+    const onGridMove = (event: GridEvent) => {
+      const snapStep = getWallGridStep()
+      const localX = shiftPressedRef.current
+        ? event.localPosition[0]
+        : snapScalarToGrid(event.localPosition[0], snapStep)
+      const localZ = shiftPressedRef.current
+        ? event.localPosition[2]
+        : snapScalarToGrid(event.localPosition[2], snapStep)
+
+      const offsetFromMidpoint =
+        -(
+          (localX - chord.midpoint.x) * chord.normal.x +
+          (localZ - chord.midpoint.y) * chord.normal.y
+        )
+      const snappedOffset = shiftPressedRef.current
+        ? offsetFromMidpoint
+        : snapScalarToGrid(offsetFromMidpoint, snapStep)
+      const nextCurveOffset = normalizeWallCurveOffset(
+        node,
+        Math.max(-maxCurveOffset, Math.min(maxCurveOffset, snappedOffset)),
+      )
+
+      if (
+        previousCurveOffsetRef.current !== null &&
+        nextCurveOffset !== previousCurveOffsetRef.current
+      ) {
+        sfxEmitter.emit('sfx:grid-snap')
+      }
+      previousCurveOffsetRef.current = nextCurveOffset
+
+      applyPreview(nextCurveOffset)
+    }
+
+    const onGridClick = (event: GridEvent) => {
+      if (Date.now() - activatedAtRef.current < 150) {
+        event.nativeEvent?.stopPropagation?.()
+        return
+      }
+
+      const curveOffset = previewOffsetRef.current
+      wasCommitted = true
+
+      if (curveOffset !== originalCurveOffset) {
+        useScene.getState().updateNode(nodeId, { curveOffset: originalCurveOffset })
+        useScene.getState().markDirty(nodeId as AnyNodeId)
+
+        resumeSceneHistory(useScene)
+        useScene.getState().updateNode(nodeId, { curveOffset })
+        useScene.getState().markDirty(nodeId as AnyNodeId)
+        pauseSceneHistory(useScene)
+      }
+
+      sfxEmitter.emit('sfx:item-place')
+      useViewer.getState().setSelection({ selectedIds: [nodeId] })
+      exitCurveMode()
+      event.nativeEvent?.stopPropagation?.()
+    }
+
+    const onCancel = () => {
+      restoreOriginal()
+      useViewer.getState().setSelection({ selectedIds: [nodeId] })
+      resumeSceneHistory(useScene)
+      markToolCancelConsumed()
+      exitCurveMode()
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Shift') {
+        shiftPressedRef.current = true
+      }
+    }
+
+    const onKeyUp = (event: KeyboardEvent) => {
+      if (event.key === 'Shift') {
+        shiftPressedRef.current = 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 () => {
+      if (!wasCommitted) {
+        restoreOriginal()
+      }
+      resumeSceneHistory(useScene)
+      emitter.off('grid:move', onGridMove)
+      emitter.off('grid:click', onGridClick)
+      emitter.off('tool:cancel', onCancel)
+      window.removeEventListener('keydown', onKeyDown)
+      window.removeEventListener('keyup', onKeyUp)
+    }
+  }, [exitCurveMode, node])
+
+  return (
+    <group>
+      <CursorSphere position={cursorLocalPos} showTooltip={false} />
+    </group>
+  )
+}

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

@@ -0,0 +1,137 @@
+import { FenceNode, getWallCurveFrameAt, getWallCurveLength, isCurvedWall, useScene, type WallNode } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { sfxEmitter } from '../../../lib/sfx-bus'
+import {
+  getWallAngleSnapStep,
+  getWallGridStep,
+  type WallPlanPoint,
+  findWallSnapTarget,
+  isWallLongEnough,
+  snapPointTo45Degrees,
+  snapPointToGrid,
+} from '../wall/wall-drafting'
+
+export type FencePlanPoint = WallPlanPoint
+
+type SegmentNode = {
+  start: FencePlanPoint
+  end: FencePlanPoint
+}
+
+function distanceSquared(a: FencePlanPoint, b: FencePlanPoint): number {
+  const dx = a[0] - b[0]
+  const dz = a[1] - b[1]
+  return dx * dx + dz * dz
+}
+
+function projectPointOntoSegment(
+  point: FencePlanPoint,
+  segment: SegmentNode,
+): FencePlanPoint | null {
+  const [x1, z1] = segment.start
+  const [x2, z2] = segment.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]
+}
+
+function findFenceSnapTarget(
+  point: FencePlanPoint,
+  fences: FenceNode[],
+  ignoreFenceIds: string[] = [],
+): FencePlanPoint | null {
+  const radiusSquared = 0.35 ** 2
+  const ignoredFenceIds = new Set(ignoreFenceIds)
+  let bestTarget: FencePlanPoint | null = null
+  let bestDistanceSquared = Number.POSITIVE_INFINITY
+
+  for (const fence of fences) {
+    if (ignoredFenceIds.has(fence.id)) {
+      continue
+    }
+
+    const candidates: Array<FencePlanPoint | null> = [fence.start, fence.end]
+    if (isCurvedWall(fence)) {
+      const sampleCount = Math.max(8, Math.ceil(getWallCurveLength(fence) / 0.3))
+      for (let index = 0; index <= sampleCount; index += 1) {
+        const frame = getWallCurveFrameAt(fence, index / sampleCount)
+        candidates.push([frame.point.x, frame.point.y])
+      }
+    } else {
+      candidates.push(projectPointOntoSegment(point, fence))
+    }
+
+    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 snapFenceDraftPoint(args: {
+  point: FencePlanPoint
+  walls: WallNode[]
+  fences: FenceNode[]
+  start?: FencePlanPoint
+  angleSnap?: boolean
+  ignoreFenceIds?: string[]
+}): FencePlanPoint {
+  const { point, walls, fences, start, angleSnap = false, ignoreFenceIds } = args
+  const gridStep = getWallGridStep()
+  const angleStep = getWallAngleSnapStep(gridStep)
+  const basePoint =
+    start && angleSnap
+      ? snapPointTo45Degrees(start, point, gridStep, angleStep)
+      : snapPointToGrid(point, gridStep)
+  const fenceSnapTarget = findFenceSnapTarget(basePoint, fences, ignoreFenceIds)
+
+  return fenceSnapTarget ?? findWallSnapTarget(basePoint, walls) ?? basePoint
+}
+
+export function createFenceOnCurrentLevel(
+  start: FencePlanPoint,
+  end: FencePlanPoint,
+): FenceNode | null {
+  const currentLevelId = useViewer.getState().selection.levelId
+  const { createNode, nodes } = useScene.getState()
+
+  if (!(currentLevelId && isWallLongEnough(start, end))) {
+    return null
+  }
+
+  const fenceCount = Object.values(nodes).filter((node) => node.type === 'fence').length
+  const fence = FenceNode.parse({
+    name: `Fence ${fenceCount + 1}`,
+    start,
+    end,
+  })
+
+  createNode(fence, currentLevelId)
+  sfxEmitter.emit('sfx:structure-build')
+
+  return fence
+}

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

@@ -0,0 +1,190 @@
+import {
+  emitter,
+  type FenceNode,
+  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 {
+  createFenceOnCurrentLevel,
+  snapFenceDraftPoint,
+  type FencePlanPoint,
+} from './fence-drafting'
+
+const FENCE_PREVIEW_HEIGHT = 1.8
+
+const updateFencePreview = (mesh: Mesh, start: Vector3, end: Vector3) => {
+  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()
+
+  const shape = new Shape()
+  shape.moveTo(0, 0)
+  shape.lineTo(length, 0)
+  shape.lineTo(length, FENCE_PREVIEW_HEIGHT)
+  shape.lineTo(0, FENCE_PREVIEW_HEIGHT)
+  shape.closePath()
+
+  const geometry = new ShapeGeometry(shape)
+  const angle = -Math.atan2(direction.z, direction.x)
+
+  mesh.position.set(start.x, start.y, start.z)
+  mesh.rotation.y = angle
+
+  if (mesh.geometry) {
+    mesh.geometry.dispose()
+  }
+  mesh.geometry = geometry
+}
+
+const getCurrentLevelElements = (): { walls: WallNode[]; fences: FenceNode[] } => {
+  const currentLevelId = useViewer.getState().selection.levelId
+  const { nodes } = useScene.getState()
+
+  if (!currentLevelId) return { walls: [], fences: [] }
+
+  const levelNode = nodes[currentLevelId]
+  if (!levelNode || levelNode.type !== 'level') return { walls: [], fences: [] }
+
+  const children = (levelNode as LevelNode).children.map((childId) => nodes[childId])
+
+  return {
+    walls: children.filter((node): node is WallNode => node?.type === 'wall'),
+    fences: children.filter((node): node is FenceNode => node?.type === 'fence'),
+  }
+}
+
+export const FenceTool: React.FC = () => {
+  const cursorRef = useRef<Group>(null)
+  const previewRef = 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 previousFenceEnd: [number, number] | null = null
+
+    const onGridMove = (event: GridEvent) => {
+      if (!(cursorRef.current && previewRef.current)) return
+
+      const { walls, fences } = getCurrentLevelElements()
+      const localPoint: FencePlanPoint = [event.localPosition[0], event.localPosition[2]]
+
+      if (buildingState.current === 1) {
+        const snappedLocal = snapFenceDraftPoint({
+          point: localPoint,
+          walls,
+          fences,
+          start: [startingPoint.current.x, startingPoint.current.z],
+          angleSnap: !shiftPressed.current,
+        })
+        endingPoint.current.set(snappedLocal[0], event.localPosition[1], snappedLocal[1])
+        cursorRef.current.position.copy(endingPoint.current)
+
+        const currentFenceEnd: [number, number] = [snappedLocal[0], snappedLocal[1]]
+        if (
+          previousFenceEnd &&
+          (currentFenceEnd[0] !== previousFenceEnd[0] || currentFenceEnd[1] !== previousFenceEnd[1])
+        ) {
+          sfxEmitter.emit('sfx:grid-snap')
+        }
+        previousFenceEnd = currentFenceEnd
+
+        updateFencePreview(previewRef.current, startingPoint.current, endingPoint.current)
+      } else {
+        const snappedPoint = snapFenceDraftPoint({ point: localPoint, walls, fences })
+        cursorRef.current.position.set(snappedPoint[0], event.localPosition[1], snappedPoint[1])
+      }
+    }
+
+    const onGridClick = (event: GridEvent) => {
+      const { walls, fences } = getCurrentLevelElements()
+      const localClick: FencePlanPoint = [event.localPosition[0], event.localPosition[2]]
+
+      if (buildingState.current === 0) {
+        const snappedStart = snapFenceDraftPoint({ point: localClick, walls, fences })
+        startingPoint.current.set(snappedStart[0], event.localPosition[1], snappedStart[1])
+        endingPoint.current.copy(startingPoint.current)
+        buildingState.current = 1
+        previewRef.current.visible = true
+      } else {
+        const snappedEnd = snapFenceDraftPoint({
+          point: localClick,
+          walls,
+          fences,
+          start: [startingPoint.current.x, startingPoint.current.z],
+          angleSnap: !shiftPressed.current,
+        })
+        const dx = snappedEnd[0] - startingPoint.current.x
+        const dz = snappedEnd[1] - startingPoint.current.z
+        if (dx * dx + dz * dz < 0.01 * 0.01) return
+        createFenceOnCurrentLevel([startingPoint.current.x, startingPoint.current.z], snappedEnd)
+        previewRef.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
+        previewRef.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>
+      <CursorSphere ref={cursorRef} height={FENCE_PREVIEW_HEIGHT} />
+      <mesh layers={EDITOR_LAYER} ref={previewRef} renderOrder={1} visible={false}>
+        <shapeGeometry />
+        <meshBasicMaterial
+          color="#ffffff"
+          depthTest={false}
+          depthWrite={false}
+          opacity={0.45}
+          side={DoubleSide}
+          transparent
+        />
+      </mesh>
+    </group>
+  )
+}