@pascal-app/editor 0.5.1 → 0.7.0

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

@@ -0,0 +1,105 @@
+import '../../../three-types'
+
+import {
+  type AnyNodeId,
+  ColumnNode,
+  type ColumnNode as ColumnNodeType,
+  emitter,
+  type GridEvent,
+  sceneRegistry,
+  useLiveTransforms,
+  useScene,
+} from '@pascal-app/core'
+import { useCallback, useEffect, 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'
+
+const roundToHalf = (value: number) => Math.round(value * 2) / 2
+
+export function MoveColumnTool({ node }: { node: ColumnNodeType }) {
+  const [previewPosition, setPreviewPosition] = useState<[number, number, number]>(node.position)
+
+  const exitMoveMode = useCallback(() => {
+    useEditor.getState().setMovingNode(null)
+  }, [])
+
+  useEffect(() => {
+    useScene.temporal.getState().pause()
+    let committed = false
+
+    const applyPreview = (position: [number, number, number]) => {
+      setPreviewPosition(position)
+      useLiveTransforms.getState().set(node.id, {
+        position,
+        rotation: node.rotation,
+      })
+      sceneRegistry.nodes.get(node.id)?.position.set(position[0], position[1], position[2])
+    }
+
+    const onGridMove = (event: GridEvent) => {
+      applyPreview([roundToHalf(event.localPosition[0]), 0, roundToHalf(event.localPosition[2])])
+    }
+
+    const onGridClick = (event: GridEvent) => {
+      const position: [number, number, number] = [
+        roundToHalf(event.localPosition[0]),
+        0,
+        roundToHalf(event.localPosition[2]),
+      ]
+      const nodeId = (node as { id?: ColumnNodeType['id'] }).id
+
+      if (nodeId && useScene.getState().nodes[nodeId]) {
+        committed = true
+        useLiveTransforms.getState().clear(nodeId)
+        useScene.temporal.getState().resume()
+        useScene.getState().updateNode(nodeId, { position })
+      } else if (node.parentId) {
+        const column = ColumnNode.parse({
+          ...node,
+          id: undefined,
+          metadata: {},
+          position,
+        })
+        committed = true
+        useScene.temporal.getState().resume()
+        useScene.getState().createNode(column, node.parentId as AnyNodeId)
+      }
+
+      useLiveTransforms.getState().clear(node.id)
+      sfxEmitter.emit('sfx:item-place')
+      exitMoveMode()
+      event.nativeEvent?.stopPropagation?.()
+    }
+
+    const onCancel = () => {
+      useLiveTransforms.getState().clear(node.id)
+      sceneRegistry.nodes
+        .get(node.id)
+        ?.position.set(node.position[0], node.position[1], node.position[2])
+      useScene.temporal.getState().resume()
+      markToolCancelConsumed()
+      exitMoveMode()
+    }
+
+    emitter.on('grid:move', onGridMove)
+    emitter.on('grid:click', onGridClick)
+    emitter.on('tool:cancel', onCancel)
+
+    return () => {
+      emitter.off('grid:move', onGridMove)
+      emitter.off('grid:click', onGridClick)
+      emitter.off('tool:cancel', onCancel)
+      useLiveTransforms.getState().clear(node.id)
+      if (!committed) {
+        sceneRegistry.nodes
+          .get(node.id)
+          ?.position.set(node.position[0], node.position[1], node.position[2])
+        useScene.temporal.getState().resume()
+      }
+    }
+  }, [exitMoveMode, node])
+
+  return <CursorSphere color="#a78bfa" height={node.height} position={previewPosition} />
+}

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

@@ -2,6 +2,7 @@ import {
   type AnyNodeId,
   DoorNode,
   emitter,
+  isCurvedWall,
   sceneRegistry,
   spatialGridManager,
   useScene,
@@ -84,6 +85,11 @@ export const DoorTool: React.FC = () => {
 
     const onWallEnter = (event: WallEvent) => {
       if (!isValidWallSideFace(event.normal)) return
+      if (isCurvedWall(event.node)) {
+        destroyDraft()
+        hideCursor()
+        return
+      }
       const levelId = getLevelId()
       if (!levelId) return
       if (event.node.parentId !== levelId) return
@@ -130,6 +136,11 @@ export const DoorTool: React.FC = () => {
 
     const onWallMove = (event: WallEvent) => {
       if (!isValidWallSideFace(event.normal)) return
+      if (isCurvedWall(event.node)) {
+        destroyDraft()
+        hideCursor()
+        return
+      }
       if (event.node.parentId !== getLevelId()) return
 
       const side = getSideFromNormal(event.normal)
@@ -190,6 +201,7 @@ export const DoorTool: React.FC = () => {
     const onWallClick = (event: WallEvent) => {
       if (!draftRef.current) return
       if (!isValidWallSideFace(event.normal)) return
+      if (isCurvedWall(event.node)) return
       if (event.node.parentId !== getLevelId()) return
 
       const side = getSideFromNormal(event.normal)
@@ -236,6 +248,13 @@ export const DoorTool: React.FC = () => {
         parentId: event.node.id,
         width: draft.width,
         height: draft.height,
+        doorCategory: draft.doorCategory,
+        doorType: draft.doorType,
+        leafCount: draft.leafCount,
+        operationState: draft.operationState,
+        slideDirection: draft.slideDirection,
+        trackStyle: draft.trackStyle,
+        garagePanelCount: draft.garagePanelCount,
         frameThickness: draft.frameThickness,
         frameDepth: draft.frameDepth,
         threshold: draft.threshold,

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

@@ -2,8 +2,10 @@ import {
   type AnyNodeId,
   DoorNode,
   emitter,
+  isCurvedWall,
   sceneRegistry,
   spatialGridManager,
+  useLiveTransforms,
   useScene,
   type WallEvent,
 } from '@pascal-app/core'
@@ -96,13 +98,27 @@ export const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNod
       edgeMaterial.color.setHex(valid ? 0x22_c5_5e : 0xef_44_44)
     }
 
+    const getPlacementOrientation = (event: WallEvent) => {
+      const faceSide = getSideFromNormal(event.normal)
+      const side = movingDoorNode.side ?? faceSide
+      const rotationOffset = side !== faceSide ? Math.PI : 0
+      return {
+        side,
+        itemRotation: calculateItemRotation(event.normal) + rotationOffset,
+        cursorRotation:
+          calculateCursorRotation(event.normal, event.node.start, event.node.end) + rotationOffset,
+      }
+    }
+
     const onWallEnter = (event: WallEvent) => {
       if (!isValidWallSideFace(event.normal)) return
+      if (isCurvedWall(event.node)) {
+        hideCursor()
+        return
+      }
       if (event.node.parentId !== getLevelId()) return
 
-      const side = getSideFromNormal(event.normal)
-      const itemRotation = calculateItemRotation(event.normal)
-      const cursorRotation = calculateCursorRotation(event.normal, event.node.start, event.node.end)
+      const { side, itemRotation, cursorRotation } = getPlacementOrientation(event)
 
       const localX = snapToHalf(event.localPosition[0])
       const { clampedX, clampedY } = clampToWall(
@@ -122,6 +138,10 @@ export const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNod
         parentId: event.node.id,
         wallId: event.node.id,
       })
+      useLiveTransforms.getState().set(movingDoorNode.id, {
+        position: [clampedX, clampedY, 0],
+        rotation: itemRotation,
+      })
 
       if (prevWallId && prevWallId !== event.node.id) markWallDirty(prevWallId)
       markWallDirty(event.node.id)
@@ -151,11 +171,13 @@ export const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNod
 
     const onWallMove = (event: WallEvent) => {
       if (!isValidWallSideFace(event.normal)) return
+      if (isCurvedWall(event.node)) {
+        hideCursor()
+        return
+      }
       if (event.node.parentId !== getLevelId()) return
 
-      const side = getSideFromNormal(event.normal)
-      const itemRotation = calculateItemRotation(event.normal)
-      const cursorRotation = calculateCursorRotation(event.normal, event.node.start, event.node.end)
+      const { side, itemRotation, cursorRotation } = getPlacementOrientation(event)
 
       const localX = snapToHalf(event.localPosition[0])
       const { clampedX, clampedY } = clampToWall(
@@ -186,6 +208,10 @@ export const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNod
           doorMesh.updateMatrixWorld(true)
         }
       }
+      useLiveTransforms.getState().set(movingDoorNode.id, {
+        position: [clampedX, clampedY, 0],
+        rotation: itemRotation,
+      })
       markWallDirty(event.node.id)
 
       const valid = !hasWallChildOverlap(
@@ -213,10 +239,10 @@ export const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNod
 
     const onWallClick = (event: WallEvent) => {
       if (!isValidWallSideFace(event.normal)) return
+      if (isCurvedWall(event.node)) return
       if (event.node.parentId !== getLevelId()) return
 
-      const side = getSideFromNormal(event.normal)
-      const itemRotation = calculateItemRotation(event.normal)
+      const { side, itemRotation } = getPlacementOrientation(event)
 
       const localX = snapToHalf(event.localPosition[0])
       const { clampedX, clampedY } = clampToWall(
@@ -281,6 +307,7 @@ export const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNod
       }
 
       markWallDirty(event.node.id)
+      useLiveTransforms.getState().clear(movingDoorNode.id)
       useScene.temporal.getState().pause()
 
       sfxEmitter.emit('sfx:item-place')
@@ -292,6 +319,7 @@ export const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNod
 
     const onWallLeave = () => {
       hideCursor()
+      useLiveTransforms.getState().clear(movingDoorNode.id)
       if (isNew) return
       if (currentWallId && currentWallId !== original.parentId) {
         markWallDirty(currentWallId)
@@ -308,6 +336,7 @@ export const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNod
     }
 
     const onCancel = () => {
+      useLiveTransforms.getState().clear(movingDoorNode.id)
       if (isNew) {
         useScene.getState().deleteNode(movingDoorNode.id)
         if (currentWallId) markWallDirty(currentWallId)
@@ -354,6 +383,7 @@ export const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNod
           if (original.parentId) markWallDirty(original.parentId)
         }
       }
+      useLiveTransforms.getState().clear(movingDoorNode.id)
       useScene.temporal.getState().resume()
       emitter.off('wall:enter', onWallEnter)
       emitter.off('wall:move', onWallMove)

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

@@ -1,12 +1,21 @@
-import { FenceNode, useScene, type WallNode } from '@pascal-app/core'
+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 {
-  type WallPlanPoint,
   findWallSnapTarget,
+  getWallAngleSnapStep,
+  getWallGridStep,
   isWallLongEnough,
   snapPointTo45Degrees,
   snapPointToGrid,
+  type WallPlanPoint,
 } from '../wall/wall-drafting'
 
 export type FencePlanPoint = WallPlanPoint
@@ -58,11 +67,16 @@ function findFenceSnapTarget(
       continue
     }
 
-    const candidates: Array<FencePlanPoint | null> = [
-      fence.start,
-      fence.end,
-      projectPointOntoSegment(point, fence),
-    ]
+    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) {
@@ -94,7 +108,12 @@ export function snapFenceDraftPoint(args: {
   ignoreFenceIds?: string[]
 }): FencePlanPoint {
   const { point, walls, fences, start, angleSnap = false, ignoreFenceIds } = args
-  const basePoint = start && angleSnap ? snapPointTo45Degrees(start, point) : snapPointToGrid(point)
+  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