@pascal-app/editor 0.4.0 → 0.5.1

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

@@ -0,0 +1,125 @@
+import { FenceNode, useScene, type WallNode } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { sfxEmitter } from '../../../lib/sfx-bus'
+import {
+  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,
+      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 basePoint = start && angleSnap ? snapPointTo45Degrees(start, point) : snapPointToGrid(point)
+  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>
+  )
+}

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

@@ -0,0 +1,223 @@
+'use client'
+
+import { type AnyNodeId, type FenceNode, emitter, type GridEvent, 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'
+
+function snap(value: number) {
+  return Math.round(value * 2) / 2
+}
+
+function samePoint(a: [number, number], b: [number, number]) {
+  return a[0] === b[0] && a[1] === b[1]
+}
+
+type LinkedFenceSnapshot = {
+  id: FenceNode['id']
+  start: [number, number]
+  end: [number, number]
+}
+
+function getLinkedFenceSnapshots(args: {
+  fenceId: FenceNode['id']
+  originalStart: [number, number]
+  originalEnd: [number, number]
+}) {
+  const { fenceId, originalStart, originalEnd } = args
+  const { nodes } = useScene.getState()
+  const snapshots: LinkedFenceSnapshot[] = []
+
+  for (const node of Object.values(nodes)) {
+    if (!(node?.type === 'fence' && node.id !== fenceId)) {
+      continue
+    }
+
+    if (
+      !samePoint(node.start, originalStart) &&
+      !samePoint(node.start, originalEnd) &&
+      !samePoint(node.end, originalStart) &&
+      !samePoint(node.end, originalEnd)
+    ) {
+      continue
+    }
+
+    snapshots.push({
+      id: node.id,
+      start: [...node.start] as [number, number],
+      end: [...node.end] as [number, number],
+    })
+  }
+
+  return snapshots
+}
+
+function getLinkedFenceUpdates(
+  linkedFences: LinkedFenceSnapshot[],
+  originalStart: [number, number],
+  originalEnd: [number, number],
+  nextStart: [number, number],
+  nextEnd: [number, number],
+) {
+  return linkedFences.map((fence) => ({
+    id: fence.id,
+    start: samePoint(fence.start, originalStart)
+      ? nextStart
+      : samePoint(fence.start, originalEnd)
+        ? nextEnd
+        : fence.start,
+    end: samePoint(fence.end, originalStart)
+      ? nextStart
+      : samePoint(fence.end, originalEnd)
+        ? nextEnd
+        : fence.end,
+  }))
+}
+
+export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
+  const previousGridPosRef = useRef<[number, number] | null>(null)
+  const originalStartRef = useRef<[number, number]>([...node.start] as [number, number])
+  const originalEndRef = useRef<[number, number]>([...node.end] as [number, number])
+  const linkedOriginalsRef = useRef(
+    getLinkedFenceSnapshots({
+      fenceId: node.id,
+      originalStart: node.start,
+      originalEnd: node.end,
+    }),
+  )
+  const dragAnchorRef = useRef<[number, number] | null>(null)
+  const nodeIdRef = useRef(node.id)
+  const previewRef = useRef<{ start: [number, number]; end: [number, number] } | null>(null)
+
+  const [cursorLocalPos, setCursorLocalPos] = useState<[number, number, number]>(() => {
+    const centerX = (node.start[0] + node.end[0]) / 2
+    const centerZ = (node.start[1] + node.end[1]) / 2
+    return [centerX, 0, centerZ]
+  })
+
+  const exitMoveMode = useCallback(() => {
+    useEditor.getState().setMovingNode(null)
+  }, [])
+
+  useEffect(() => {
+    const nodeId = nodeIdRef.current
+    const originalStart = originalStartRef.current
+    const originalEnd = originalEndRef.current
+
+    useScene.temporal.getState().pause()
+    let wasCommitted = false
+
+    const applyNodePreview = (updates: Array<{ id: FenceNode['id']; start: [number, number]; end: [number, number] }>) => {
+      useScene.getState().updateNodes(
+        updates.map((entry) => ({
+          id: entry.id as AnyNodeId,
+          data: { start: entry.start, end: entry.end },
+        })),
+      )
+      for (const entry of updates) {
+        useScene.getState().markDirty(entry.id as AnyNodeId)
+      }
+    }
+
+    const applyPreview = (nextStart: [number, number], nextEnd: [number, number]) => {
+      previewRef.current = { start: nextStart, end: nextEnd }
+      const centerX = (nextStart[0] + nextEnd[0]) / 2
+      const centerZ = (nextStart[1] + nextEnd[1]) / 2
+      setCursorLocalPos([centerX, 0, centerZ])
+      applyNodePreview([
+        { id: nodeId, start: nextStart, end: nextEnd },
+        ...getLinkedFenceUpdates(
+          linkedOriginalsRef.current,
+          originalStart,
+          originalEnd,
+          nextStart,
+          nextEnd,
+        ),
+      ])
+    }
+
+    const onGridMove = (event: GridEvent) => {
+      const localX = snap(event.localPosition[0])
+      const localZ = snap(event.localPosition[2])
+
+      if (
+        previousGridPosRef.current &&
+        (localX !== previousGridPosRef.current[0] || localZ !== previousGridPosRef.current[1])
+      ) {
+        sfxEmitter.emit('sfx:grid-snap')
+      }
+      previousGridPosRef.current = [localX, localZ]
+
+      const anchor = dragAnchorRef.current ?? [localX, localZ]
+      dragAnchorRef.current = anchor
+
+      const deltaX = localX - anchor[0]
+      const deltaZ = localZ - anchor[1]
+
+      const nextStart: [number, number] = [originalStart[0] + deltaX, originalStart[1] + deltaZ]
+      const nextEnd: [number, number] = [originalEnd[0] + deltaX, originalEnd[1] + deltaZ]
+
+      applyPreview(nextStart, nextEnd)
+    }
+
+    const onGridClick = (event: GridEvent) => {
+      const preview = previewRef.current ?? { start: originalStart, end: originalEnd }
+
+      wasCommitted = true
+      useScene.temporal.getState().resume()
+      applyNodePreview([
+        { id: nodeId, start: preview.start, end: preview.end },
+        ...getLinkedFenceUpdates(
+          linkedOriginalsRef.current,
+          originalStart,
+          originalEnd,
+          preview.start,
+          preview.end,
+        ),
+      ])
+      useScene.temporal.getState().pause()
+
+      sfxEmitter.emit('sfx:item-place')
+      useViewer.getState().setSelection({ selectedIds: [nodeId] })
+      exitMoveMode()
+      event.nativeEvent?.stopPropagation?.()
+    }
+
+    const onCancel = () => {
+      applyNodePreview([
+        { id: nodeId, start: originalStart, end: originalEnd },
+        ...linkedOriginalsRef.current,
+      ])
+      useViewer.getState().setSelection({ selectedIds: [nodeId] })
+      useScene.temporal.getState().resume()
+      markToolCancelConsumed()
+      exitMoveMode()
+    }
+
+    emitter.on('grid:move', onGridMove)
+    emitter.on('grid:click', onGridClick)
+    emitter.on('tool:cancel', onCancel)
+
+    return () => {
+      if (!wasCommitted) {
+        applyNodePreview([
+          { id: nodeId, start: originalStart, end: originalEnd },
+          ...linkedOriginalsRef.current,
+        ])
+      }
+      useScene.temporal.getState().resume()
+      emitter.off('grid:move', onGridMove)
+      emitter.off('grid:click', onGridClick)
+      emitter.off('tool:cancel', onCancel)
+    }
+  }, [exitMoveMode])
+
+  return (
+    <group>
+      <CursorSphere position={cursorLocalPos} showTooltip={false} />
+    </group>
+  )
+}

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

@@ -8,11 +8,11 @@ export const ItemTool: React.FC = () => {
   const draftNode = useDraftNode()
 
   const cursor = usePlacementCoordinator({
-    asset: selectedItem!,
+    asset: selectedItem,
     draftNode,
     initDraft: (gridPosition) => {
-      if (!selectedItem?.attachTo) {
-        draftNode.create(gridPosition, selectedItem!)
+      if (selectedItem && !selectedItem.attachTo) {
+        draftNode.create(gridPosition, selectedItem)
       }
     },
     onCommitted: () => {

package/src/components/tools/item/move-tool.tsx

@@ -1,5 +1,7 @@
 import type {
+  BuildingNode,
   DoorNode,
+  FenceNode,
   ItemNode,
   RoofNode,
   RoofSegmentNode,
@@ -10,7 +12,9 @@ import type {
 import { Vector3 } from 'three'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
+import { MoveBuildingContent } from '../building/move-building-tool'
 import { MoveDoorTool } from '../door/move-door-tool'
+import { MoveFenceTool } from '../fence/move-fence-tool'
 import { MoveRoofTool } from '../roof/move-roof-tool'
 import { MoveWindowTool } from '../window/move-window-tool'
 import type { PlacementState } from './placement-types'
@@ -80,8 +84,11 @@ export const MoveTool: React.FC = () => {
   const movingNode = useEditor((state) => state.movingNode)
 
   if (!movingNode) return null
+  if (movingNode.type === 'building')
+    return <MoveBuildingContent node={movingNode as BuildingNode} />
   if (movingNode.type === 'door') return <MoveDoorTool node={movingNode as DoorNode} />
   if (movingNode.type === 'window') return <MoveWindowTool node={movingNode as WindowNode} />
+  if (movingNode.type === 'fence') return <MoveFenceTool node={movingNode as FenceNode} />
   if (movingNode.type === 'roof' || movingNode.type === 'roof-segment')
     return <MoveRoofTool node={movingNode as RoofNode | RoofSegmentNode} />
   if (movingNode.type === 'stair' || movingNode.type === 'stair-segment')

package/src/components/tools/item/placement-strategies.ts

@@ -47,12 +47,16 @@ export const floorStrategy = {
       ? getScaledDimensions(ctx.draftItem)
       : (ctx.asset.dimensions ?? DEFAULT_DIMENSIONS)
     const [dimX, , dimZ] = dims
-    const x = snapToGrid(event.position[0], dimX)
-    const z = snapToGrid(event.position[2], dimZ)
+    const rotY = ctx.draftItem?.rotation?.[1] ?? 0
+    const swapDims = Math.abs(Math.sin(rotY)) > 0.9
+    // event.localPosition is building-local; the coordinator cursor group is inside the
+    // building-local ToolManager group, so local coords are correct for both data and visuals.
+    const x = snapToGrid(event.localPosition[0], swapDims ? dimZ : dimX)
+    const z = snapToGrid(event.localPosition[2], swapDims ? dimX : dimZ)
 
     return {
       gridPosition: [x, 0, z],
-      cursorPosition: [x, event.position[1], z],
+      cursorPosition: [x, event.localPosition[1], z],
       cursorRotationY: 0,
       nodeUpdate: { position: [x, 0, z] },
       stopPropagation: false,
@@ -302,9 +306,11 @@ export const ceilingStrategy = {
       : (ctx.asset.dimensions ?? DEFAULT_DIMENSIONS)
     const [dimX, , dimZ] = dims
     const itemHeight = dims[1]
+    const rotY = ctx.draftItem?.rotation?.[1] ?? 0
+    const swapDims = Math.abs(Math.sin(rotY)) > 0.9
 
-    const x = snapToGrid(event.position[0], dimX)
-    const z = snapToGrid(event.position[2], dimZ)
+    const x = snapToGrid(event.position[0], swapDims ? dimZ : dimX)
+    const z = snapToGrid(event.position[2], swapDims ? dimX : dimZ)
 
     return {
       stateUpdate: { surface: 'ceiling', ceilingId: event.node.id },
@@ -329,9 +335,11 @@ export const ceilingStrategy = {
     const dims = getScaledDimensions(ctx.draftItem)
     const [dimX, , dimZ] = dims
     const itemHeight = dims[1]
+    const rotY = ctx.draftItem.rotation?.[1] ?? 0
+    const swapDims = Math.abs(Math.sin(rotY)) > 0.9
 
-    const x = snapToGrid(event.position[0], dimX)
-    const z = snapToGrid(event.position[2], dimZ)
+    const x = snapToGrid(event.position[0], swapDims ? dimZ : dimX)
+    const z = snapToGrid(event.position[2], swapDims ? dimX : dimZ)
 
     return {
       gridPosition: [x, -itemHeight, z],