@pascal-app/editor 0.6.0 → 0.7.0

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

@@ -2,32 +2,113 @@
 
 import {
   type AnyNodeId,
-  type FenceNode,
-  type WallNode,
   emitter,
+  type FenceNode,
   type GridEvent,
   pauseSceneHistory,
   resumeSceneHistory,
   useScene,
+  type WallNode,
 } from '@pascal-app/core'
-import { Html } from '@react-three/drei'
 import { useViewer } from '@pascal-app/viewer'
+import { Html } from '@react-three/drei'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor, { type MovingFenceEndpoint } from '../../../store/use-editor'
 import { CursorSphere } from '../shared/cursor-sphere'
-import { snapFenceDraftPoint, type FencePlanPoint } from './fence-drafting'
+import {
+  formatAngleRadians,
+  getAngleToSegmentReference,
+  getSegmentAngleReferenceAtPoint,
+} from '../shared/segment-angle'
 import { isWallLongEnough } from '../wall/wall-drafting'
+import { type FencePlanPoint, snapFenceDraftPoint } from './fence-drafting'
 
 function samePoint(a: FencePlanPoint, b: FencePlanPoint) {
   return a[0] === b[0] && a[1] === b[1]
 }
 
+type SegmentLike = {
+  id: string
+  start: FencePlanPoint
+  end: FencePlanPoint
+  curveOffset?: number
+}
+
+type AngleLabelState = {
+  label: string
+  position: [number, number, number]
+} | null
+
+function getEndpointAngleLabel(args: {
+  preview: { start: FencePlanPoint; end: FencePlanPoint; curveOffset?: number }
+  segments: SegmentLike[]
+  nodeId: FenceNode['id']
+}): AngleLabelState {
+  const { preview, segments, nodeId } = args
+  const endpoints = [
+    {
+      point: preview.start,
+    },
+    {
+      point: preview.end,
+    },
+  ]
+  const targetSegment: SegmentLike = {
+    id: nodeId,
+    start: preview.start,
+    end: preview.end,
+    curveOffset: preview.curveOffset,
+  }
+
+  for (const endpoint of endpoints) {
+    const targetReference = getSegmentAngleReferenceAtPoint(endpoint.point, targetSegment)
+    if (!targetReference) continue
+
+    const connectedSegment = segments.find(
+      (segment) =>
+        segment.id !== nodeId && Boolean(getSegmentAngleReferenceAtPoint(endpoint.point, segment)),
+    )
+    if (!connectedSegment) continue
+
+    const connectedReference = getSegmentAngleReferenceAtPoint(endpoint.point, connectedSegment)
+    if (!connectedReference) continue
+
+    const angle = getAngleToSegmentReference(targetReference.vector, connectedReference)
+    if (angle === null) continue
+
+    return {
+      label: formatAngleRadians(angle),
+      position: [endpoint.point[0], 0.34, endpoint.point[1]],
+    }
+  }
+
+  return null
+}
+
+function getReferenceSegments(walls: WallNode[], fences: FenceNode[]): SegmentLike[] {
+  return [
+    ...walls.map((wall) => ({
+      id: wall.id,
+      start: wall.start,
+      end: wall.end,
+      curveOffset: wall.curveOffset,
+    })),
+    ...fences.map((fence) => ({
+      id: fence.id,
+      start: fence.start,
+      end: fence.end,
+      curveOffset: fence.curveOffset,
+    })),
+  ]
+}
+
 type LinkedFenceSnapshot = {
   id: FenceNode['id']
   start: FencePlanPoint
   end: FencePlanPoint
+  curveOffset?: number
 }
 
 function getLinkedFenceSnapshots(args: {
@@ -62,6 +143,7 @@ function getLinkedFenceSnapshots(args: {
       id: node.id,
       start: [...node.start] as FencePlanPoint,
       end: [...node.end] as FencePlanPoint,
+      curveOffset: node.curveOffset,
     })
   }
 
@@ -77,6 +159,7 @@ function getLinkedFenceUpdates(
 ) {
   return linkedFences.map((fence) => ({
     id: fence.id,
+    curveOffset: fence.curveOffset,
     start: samePoint(fence.start, originalStart)
       ? nextStart
       : samePoint(fence.start, originalEnd)
@@ -112,6 +195,7 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> =
     }),
   )
   const previewRef = useRef<{ start: FencePlanPoint; end: FencePlanPoint } | null>(null)
+  const [angleLabel, setAngleLabel] = useState<AngleLabelState>(null)
 
   const [cursorLocalPos, setCursorLocalPos] = useState<[number, number, number]>(() => {
     const point = target.endpoint === 'start' ? target.fence.start : target.fence.end
@@ -158,27 +242,35 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> =
     const applyPreview = (movingPoint: FencePlanPoint, detachLinkedFences = false) => {
       const nextStart = target.endpoint === 'start' ? movingPoint : fixedPoint
       const nextEnd = target.endpoint === 'end' ? movingPoint : fixedPoint
+      const linkedUpdates = detachLinkedFences
+        ? []
+        : getLinkedFenceUpdates(
+            linkedOriginalsRef.current,
+            originalStart,
+            originalEnd,
+            nextStart,
+            nextEnd,
+          )
       previewRef.current = { start: nextStart, end: nextEnd }
       setCursorLocalPos([movingPoint[0], 0, movingPoint[1]])
-      applyNodePreview([
-        { id: nodeId, start: nextStart, end: nextEnd },
-        ...(detachLinkedFences
-          ? []
-          : getLinkedFenceUpdates(
-              linkedOriginalsRef.current,
-              originalStart,
-              originalEnd,
-              nextStart,
-              nextEnd,
-            )),
-      ])
+      setAngleLabel(
+        getEndpointAngleLabel({
+          preview: { start: nextStart, end: nextEnd, curveOffset: target.fence.curveOffset },
+          segments: [...getReferenceSegments(levelWalls, levelFences), ...linkedUpdates],
+          nodeId,
+        }),
+      )
+      applyNodePreview([{ id: nodeId, start: nextStart, end: nextEnd }, ...linkedUpdates])
     }
 
-    const restoreOriginal = () => {
+    const restoreOriginal = (clearAngleLabel = true) => {
       applyNodePreview([
         { id: nodeId, start: originalStart, end: originalEnd },
         ...linkedOriginalsRef.current,
       ])
+      if (clearAngleLabel) {
+        setAngleLabel(null)
+      }
     }
 
     const onGridMove = (event: GridEvent) => {
@@ -240,6 +332,7 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> =
       }
 
       useViewer.getState().setSelection({ selectedIds: [nodeId] })
+      setAngleLabel(null)
       exitMoveMode()
       event.nativeEvent?.stopPropagation?.()
     }
@@ -248,6 +341,7 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> =
       restoreOriginal()
       useViewer.getState().setSelection({ selectedIds: [nodeId] })
       resumeSceneHistory(useScene)
+      setAngleLabel(null)
       markToolCancelConsumed()
       exitMoveMode()
     }
@@ -290,7 +384,7 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> =
 
     return () => {
       if (!wasCommitted) {
-        restoreOriginal()
+        restoreOriginal(false)
       }
       resumeSceneHistory(useScene)
       emitter.off('grid:move', onGridMove)
@@ -322,6 +416,23 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> =
           </div>
         </div>
       </Html>
+      {angleLabel && <EndpointAngleLabel label={angleLabel.label} position={angleLabel.position} />}
     </group>
   )
 }
+
+function EndpointAngleLabel({
+  label,
+  position,
+}: {
+  label: string
+  position: [number, number, number]
+}) {
+  return (
+    <Html center position={position} style={{ pointerEvents: 'none' }} zIndexRange={[100, 0]}>
+      <div className="whitespace-nowrap rounded-full border border-border bg-background/95 px-2 py-1 font-mono text-[11px] font-semibold text-foreground shadow-lg backdrop-blur-md">
+        {label}
+      </div>
+    </Html>
+  )
+}

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

@@ -1,17 +1,25 @@
 'use client'
 
-import { type AnyNodeId, type FenceNode, emitter, type GridEvent, useScene } from '@pascal-app/core'
+import {
+  type AnyNodeId,
+  emitter,
+  type FenceNode,
+  type GridEvent,
+  type LevelNode,
+  sceneRegistry,
+  useLiveTransforms,
+  useScene,
+  type WallNode,
+} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback, useEffect, useRef, useState } from 'react'
+import type * as THREE from 'three'
 import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
+import { snapFenceDraftPoint } from './fence-drafting'
 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]
 }
@@ -24,10 +32,11 @@ type LinkedFenceSnapshot = {
 
 function getLinkedFenceSnapshots(args: {
   fenceId: FenceNode['id']
+  fenceParentId: string | null
   originalStart: [number, number]
   originalEnd: [number, number]
 }) {
-  const { fenceId, originalStart, originalEnd } = args
+  const { fenceId, fenceParentId, originalStart, originalEnd } = args
   const { nodes } = useScene.getState()
   const snapshots: LinkedFenceSnapshot[] = []
 
@@ -36,6 +45,10 @@ function getLinkedFenceSnapshots(args: {
       continue
     }
 
+    if ((node.parentId ?? null) !== fenceParentId) {
+      continue
+    }
+
     if (
       !samePoint(node.start, originalStart) &&
       !samePoint(node.start, originalEnd) &&
@@ -78,12 +91,14 @@ function getLinkedFenceUpdates(
 }
 
 export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
+  const activatedAtRef = useRef<number>(Date.now())
   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,
+      fenceParentId: node.parentId ?? null,
       originalStart: node.start,
       originalEnd: node.end,
     }),
@@ -106,10 +121,49 @@ export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
     const nodeId = nodeIdRef.current
     const originalStart = originalStartRef.current
     const originalEnd = originalEndRef.current
+    const levelNode =
+      node.parentId && useScene.getState().nodes[node.parentId as AnyNodeId]?.type === 'level'
+        ? (useScene.getState().nodes[node.parentId as AnyNodeId] as LevelNode)
+        : null
+    const levelChildren = levelNode?.children ?? []
+    const levelWalls = levelChildren
+      .map((childId) => useScene.getState().nodes[childId as AnyNodeId])
+      .filter((child): child is WallNode => child?.type === 'wall')
+    const levelFences = levelChildren
+      .map((childId) => useScene.getState().nodes[childId as AnyNodeId])
+      .filter((child): child is FenceNode => child?.type === 'fence')
 
     useScene.temporal.getState().pause()
     let wasCommitted = false
 
+    const setMeshOffset = (fenceId: FenceNode['id'], deltaX: number, deltaZ: number) => {
+      const mesh = sceneRegistry.nodes.get(fenceId) as THREE.Object3D | undefined
+      if (!mesh) {
+        return
+      }
+
+      mesh.position.set(deltaX, 0, deltaZ)
+    }
+
+    const setFenceLiveTransform = (fence: FenceNode, deltaX: number, deltaZ: number) => {
+      const originalCenterX = (fence.start[0] + fence.end[0]) / 2
+      const originalCenterZ = (fence.start[1] + fence.end[1]) / 2
+      useLiveTransforms.getState().set(fence.id, {
+        position: [originalCenterX + deltaX, 0, originalCenterZ + deltaZ],
+        rotation: 0,
+      })
+    }
+
+    const clearPreviewState = () => {
+      setMeshOffset(nodeId, 0, 0)
+      useLiveTransforms.getState().clear(nodeId)
+
+      for (const linkedFence of linkedOriginalsRef.current) {
+        setMeshOffset(linkedFence.id, 0, 0)
+        useLiveTransforms.getState().clear(linkedFence.id)
+      }
+    }
+
     const applyNodePreview = (updates: Array<{ id: FenceNode['id']; start: [number, number]; end: [number, number] }>) => {
       useScene.getState().updateNodes(
         updates.map((entry) => ({
@@ -127,21 +181,33 @@ export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
       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 deltaX = nextStart[0] - originalStart[0]
+      const deltaZ = nextStart[1] - originalStart[1]
+      setMeshOffset(nodeId, deltaX, deltaZ)
+      setFenceLiveTransform(node, deltaX, deltaZ)
+
+      for (const linkedFence of linkedOriginalsRef.current) {
+        setMeshOffset(linkedFence.id, deltaX, deltaZ)
+        setFenceLiveTransform(
+          {
+            ...node,
+            id: linkedFence.id,
+            start: linkedFence.start,
+            end: linkedFence.end,
+          },
+          deltaX,
+          deltaZ,
+        )
+      }
     }
 
     const onGridMove = (event: GridEvent) => {
-      const localX = snap(event.localPosition[0])
-      const localZ = snap(event.localPosition[2])
+      const [localX, localZ] = snapFenceDraftPoint({
+        point: [event.localPosition[0], event.localPosition[2]],
+        walls: levelWalls,
+        fences: levelFences,
+        ignoreFenceIds: [nodeId],
+      })
 
       if (
         previousGridPosRef.current &&
@@ -164,17 +230,15 @@ export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
     }
 
     const onGridClick = (event: GridEvent) => {
+      if (Date.now() - activatedAtRef.current < 150) {
+        event.nativeEvent?.stopPropagation?.()
+        return
+      }
+
       const preview = previewRef.current ?? { start: originalStart, end: originalEnd }
 
       wasCommitted = true
 
-      // Restore original baseline while paused so the next resume+update
-      // registers as a single tracked change (undo reverts to original).
-      applyNodePreview([
-        { id: nodeId, start: originalStart, end: originalEnd },
-        ...linkedOriginalsRef.current,
-      ])
-
       useScene.temporal.getState().resume()
       applyNodePreview([
         { id: nodeId, start: preview.start, end: preview.end },
@@ -186,6 +250,10 @@ export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
           preview.end,
         ),
       ])
+      useLiveTransforms.getState().clear(nodeId)
+      for (const linkedFence of linkedOriginalsRef.current) {
+        useLiveTransforms.getState().clear(linkedFence.id)
+      }
       useScene.temporal.getState().pause()
 
       sfxEmitter.emit('sfx:item-place')
@@ -195,10 +263,7 @@ export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
     }
 
     const onCancel = () => {
-      applyNodePreview([
-        { id: nodeId, start: originalStart, end: originalEnd },
-        ...linkedOriginalsRef.current,
-      ])
+      clearPreviewState()
       useViewer.getState().setSelection({ selectedIds: [nodeId] })
       useScene.temporal.getState().resume()
       markToolCancelConsumed()
@@ -211,17 +276,19 @@ export const MoveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
 
     return () => {
       if (!wasCommitted) {
-        applyNodePreview([
-          { id: nodeId, start: originalStart, end: originalEnd },
-          ...linkedOriginalsRef.current,
-        ])
+        clearPreviewState()
+      } else {
+        useLiveTransforms.getState().clear(nodeId)
+        for (const linkedFence of linkedOriginalsRef.current) {
+          useLiveTransforms.getState().clear(linkedFence.id)
+        }
       }
       useScene.temporal.getState().resume()
       emitter.off('grid:move', onGridMove)
       emitter.off('grid:click', onGridClick)
       emitter.off('tool:cancel', onCancel)
     }
-  }, [exitMoveMode])
+  }, [exitMoveMode, node])
 
   return (
     <group>

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

@@ -1,12 +1,14 @@
 import type {
   BuildingNode,
   CeilingNode,
+  ColumnNode,
   DoorNode,
   FenceNode,
   ItemNode,
   RoofNode,
   RoofSegmentNode,
   SlabNode,
+  SpawnNode,
   StairNode,
   StairSegmentNode,
   WallNode,
@@ -17,10 +19,12 @@ import { sfxEmitter } from '../../../lib/sfx-bus'
 import useEditor from '../../../store/use-editor'
 import { MoveBuildingContent } from '../building/move-building-tool'
 import { MoveCeilingTool } from '../ceiling/move-ceiling-tool'
+import { MoveColumnTool } from '../column/move-column-tool'
 import { MoveDoorTool } from '../door/move-door-tool'
 import { MoveFenceTool } from '../fence/move-fence-tool'
 import { MoveRoofTool } from '../roof/move-roof-tool'
 import { MoveSlabTool } from '../slab/move-slab-tool'
+import { MoveSpawnTool } from '../spawn/move-spawn-tool'
 import { MoveWallTool } from '../wall/move-wall-tool'
 import { MoveWindowTool } from '../window/move-window-tool'
 import type { PlacementState } from './placement-types'
@@ -86,7 +90,9 @@ function MoveItemContent({ movingNode }: { movingNode: ItemNode }) {
   return <>{cursor}</>
 }
 
-export const MoveTool: React.FC = () => {
+export const MoveTool: React.FC<{
+  onSpawnMoved?: (nodeId: SpawnNode['id']) => void
+}> = ({ onSpawnMoved }) => {
   const movingNode = useEditor((state) => state.movingNode)
 
   if (!movingNode) return null
@@ -96,10 +102,13 @@ export const MoveTool: React.FC = () => {
   if (movingNode.type === 'window') return <MoveWindowTool node={movingNode as WindowNode} />
   if (movingNode.type === 'fence') return <MoveFenceTool node={movingNode as FenceNode} />
   if (movingNode.type === 'ceiling') return <MoveCeilingTool node={movingNode as CeilingNode} />
+  if (movingNode.type === 'column') return <MoveColumnTool node={movingNode as ColumnNode} />
   if (movingNode.type === 'slab') return <MoveSlabTool node={movingNode as SlabNode} />
   if (movingNode.type === 'wall') return <MoveWallTool node={movingNode as WallNode} />
   if (movingNode.type === 'roof' || movingNode.type === 'roof-segment')
     return <MoveRoofTool node={movingNode as RoofNode | RoofSegmentNode} />
+  if (movingNode.type === 'spawn')
+    return <MoveSpawnTool node={movingNode as SpawnNode} onCommitted={onSpawnMoved} />
   if (movingNode.type === 'stair' || movingNode.type === 'stair-segment')
     return <MoveRoofTool node={movingNode as StairNode | StairSegmentNode} />
   return <MoveItemContent movingNode={movingNode as ItemNode} />

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

@@ -1,4 +1,4 @@
-import { isObject } from '@pascal-app/core'
+import { type AssetInput, isObject } from '@pascal-app/core'
 import useEditor from '../../../store/use-editor'
 
 function getGridSnapStep(): number {
@@ -27,6 +27,35 @@ export function snapToHalf(value: number, step = getGridSnapStep()): number {
   return Math.round(value / step) * step
 }
 
+/**
+ * Round a value up to the next multiple of `step`, with a minimum of `step`.
+ */
+export function snapUpToGridStep(value: number, step = getGridSnapStep()): number {
+  return Math.max(step, Math.ceil(value / step) * step)
+}
+
+/**
+ * Expand an item's scaled dimensions up to the active grid step on the axes
+ * the placement grid covers. Used for the placement wireframe, snap math, and
+ * collision against the draft so a small item visually reserves a full grid
+ * cell.
+ *
+ * - Floor / ceiling / item-surface: X + Z (footprint) expand; Y stays exact.
+ * - Wall / wall-side: X (along wall) + Y (height) expand; Z (depth) stays exact
+ *   so wall-thickness offsets aren't disturbed.
+ */
+export function getGridAlignedDimensions(
+  scaledDims: [number, number, number],
+  attachTo: AssetInput['attachTo'] | null | undefined,
+  step = getGridSnapStep(),
+): [number, number, number] {
+  const [w, h, d] = scaledDims
+  if (attachTo === 'wall' || attachTo === 'wall-side') {
+    return [snapUpToGridStep(w, step), snapUpToGridStep(h, step), d]
+  }
+  return [snapUpToGridStep(w, step), h, snapUpToGridStep(d, step)]
+}
+
 /**
  * Calculate cursor rotation in WORLD space from wall normal and orientation.
  */