@pascal-app/editor 0.6.0 → 0.8.0

package/src/components/systems/ceiling/ceiling-selection-affordance-system.tsx

@@ -75,7 +75,9 @@ const CeilingSelectionAffordance = ({
   ceiling: CeilingNode
   levelId: string
 }) => {
-  const [levelObject, setLevelObject] = useState<Object3D | null>(() => sceneRegistry.nodes.get(levelId) ?? null)
+  const [levelObject, setLevelObject] = useState<Object3D | null>(
+    () => sceneRegistry.nodes.get(levelId) ?? null,
+  )
 
   const corners = useMemo(() => buildCornerBrackets(ceiling.polygon), [ceiling.polygon])
 
@@ -110,11 +112,7 @@ const CeilingSelectionAffordance = ({
   return createPortal(
     <group position={[0, (ceiling.height ?? 2.5) + BRACKET_Y_OFFSET, 0]}>
       {corners.map((corner, index) => (
-        <CornerBracket
-          ceiling={ceiling}
-          corner={corner}
-          key={`${ceiling.id}-corner-${index}`}
-        />
+        <CornerBracket ceiling={ceiling} corner={corner} key={`${ceiling.id}-corner-${index}`} />
       ))}
     </group>,
     levelObject,
@@ -210,11 +208,7 @@ const BracketLeg = ({
   ]
 
   return (
-    <mesh
-      onClick={onClick}
-      position={position}
-      rotation={[0, angle, 0]}
-    >
+    <mesh onClick={onClick} position={position} rotation={[0, angle, 0]}>
       <boxGeometry args={[length, BRACKET_HEIGHT, BRACKET_THICKNESS]} />
       <meshBasicMaterial color={color} depthWrite={false} opacity={opacity} transparent />
     </mesh>
@@ -234,7 +228,11 @@ function buildCornerBrackets(polygon: Array<[number, number]>): CornerBracketDat
 
     const incomingLength = Math.hypot(incomingVector[0], incomingVector[1])
     const outgoingLength = Math.hypot(outgoingVector[0], outgoingVector[1])
-    const cornerStrength = 1 - Math.abs(incomingDirection[0] * outgoingDirection[0] + incomingDirection[1] * outgoingDirection[1])
+    const cornerStrength =
+      1 -
+      Math.abs(
+        incomingDirection[0] * outgoingDirection[0] + incomingDirection[1] * outgoingDirection[1],
+      )
 
     return {
       corner,

package/src/components/systems/roof/roof-edit-system.tsx

@@ -6,7 +6,7 @@ import { useEffect, useRef } from 'react'
  * Imperatively toggles the Three.js visibility of roof objects based on the
  * editor selection — without causing React re-renders in RoofRenderer.
  *
- * When a roof-segment is selected:
+ * When a roof (or one of its segments) is selected:
  *   - merged-roof mesh is hidden
  *   - segments-wrapper group is shown (individual segments visible for editing)
  *   - all children are marked dirty so RoofSystem rebuilds their geometry

package/src/components/systems/stair/stair-edit-system.tsx

@@ -68,7 +68,7 @@ export const StairEditSystem = () => {
       const segmentsWrapper = group.getObjectByName('segments-wrapper')
       const isActive = activeStairIds.has(stairId)
 
-      if (mergedMesh) mergedMesh.visible = !isActive && !isCurved
+      if (mergedMesh) mergedMesh.visible = !(isActive || isCurved)
       if (segmentsWrapper) segmentsWrapper.visible = isActive && !isCurved
 
       if (stairNode?.children?.length) {

package/src/components/tools/ceiling/ceiling-boundary-editor.tsx

@@ -31,6 +31,7 @@ export const CeilingBoundaryEditor: React.FC<CeilingBoundaryEditorProps> = ({ ce
 
   return (
     <PolygonEditor
+      allowEdgeMove
       color="#d4d4d4"
       levelId={resolveLevelId(ceiling, useScene.getState().nodes)}
       minVertices={3}

package/src/components/tools/ceiling/ceiling-hole-editor.tsx

@@ -36,6 +36,7 @@ export const CeilingHoleEditor: React.FC<CeilingHoleEditorProps> = ({ ceilingId,
 
   return (
     <PolygonEditor
+      allowEdgeMove
       allowPolygonMove
       color="#ef4444"
       levelId={resolveLevelId(ceiling, useScene.getState().nodes)} // red for holes

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

@@ -111,15 +111,15 @@ export const CeilingTool: React.FC = () => {
     const onGridMove = (event: GridEvent) => {
       if (!(cursorRef.current && gridCursorRef.current)) return
 
-      const gridX = Math.round(event.position[0] * 2) / 2
-      const gridZ = Math.round(event.position[2] * 2) / 2
+      const gridX = Math.round(event.localPosition[0] * 2) / 2
+      const gridZ = Math.round(event.localPosition[2] * 2) / 2
       const gridPosition: [number, number] = [gridX, gridZ]
 
       setCursorPosition(gridPosition)
-      setLevelY(event.position[1])
+      setLevelY(event.localPosition[1])
 
-      const ceilingY = event.position[1] + CEILING_HEIGHT
-      const gridY = event.position[1] + GRID_OFFSET
+      const ceilingY = event.localPosition[1] + CEILING_HEIGHT
+      const gridY = event.localPosition[1] + GRID_OFFSET
 
       // Calculate snapped display position (bypass snap when Shift is held)
       const lastPoint = points[points.length - 1]

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

@@ -1,13 +1,19 @@
 'use client'
 
-import { type AnyNodeId, emitter, type GridEvent, useScene, type CeilingNode } from '@pascal-app/core'
+import {
+  type AnyNodeId,
+  type CeilingNode,
+  emitter,
+  type GridEvent,
+  useScene,
+} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { BufferGeometry, DoubleSide, Path, Shape, ShapeGeometry, Vector3 } from 'three'
 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 { BufferGeometry, DoubleSide, Path, Shape, ShapeGeometry, Vector3 } from 'three'
 
 function snap(value: number) {
   return Math.round(value * 2) / 2
@@ -202,6 +208,7 @@ export const MoveCeilingTool: React.FC<{ node: CeilingNode }> = ({ node }) => {
           transparent
         />
       </mesh>
+      {/* @ts-ignore */}
       <line geometry={previewOutlineGeometry} position={[0, (node.height ?? 2.5) + 0.02, 0]}>
         <lineBasicMaterial color="#ffffff" depthWrite={false} opacity={0.95} transparent />
       </line>

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

@@ -0,0 +1,97 @@
+import '../../../three-types'
+
+import {
+  COLUMN_PRESETS,
+  ColumnNode,
+  type ColumnNode as ColumnNodeType,
+  type ColumnPresetId,
+  emitter,
+  type GridEvent,
+  type LevelNode,
+  useScene,
+} from '@pascal-app/core'
+import { useEffect, useRef, useState } from 'react'
+import type { Group } from 'three'
+import { sfxEmitter } from '../../../lib/sfx-bus'
+import useEditor from '../../../store/use-editor'
+import { CursorSphere } from '../shared/cursor-sphere'
+
+const COLUMN_ICON = (
+  // eslint-disable-next-line @next/next/no-img-element
+  <img
+    alt="Column"
+    src="/icons/column.png"
+    style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+  />
+)
+
+const roundToHalf = (value: number) => Math.round(value * 2) / 2
+const DEFAULT_COLUMN_PRESET_ID = 'basicPillar' satisfies ColumnPresetId
+
+function createColumnFromPreset(presetId: ColumnPresetId, position: [number, number, number]) {
+  const { label, ...preset } = COLUMN_PRESETS[presetId]
+  return ColumnNode.parse({
+    name: label,
+    position,
+    rotation: 0,
+    ...preset,
+  })
+}
+
+type ColumnToolProps = {
+  currentLevelId: LevelNode['id'] | null
+  onPlaced?: (nodeId: ColumnNodeType['id']) => void
+}
+
+export const ColumnTool: React.FC<ColumnToolProps> = ({ currentLevelId, onPlaced }) => {
+  const [, setCursorPosition] = useState<[number, number, number] | null>(null)
+  const cursorRef = useRef<Group>(null)
+
+  useEffect(() => {
+    if (!currentLevelId) return
+
+    const onGridMove = (event: GridEvent) => {
+      const nextPosition: [number, number, number] = [
+        roundToHalf(event.localPosition[0]),
+        0,
+        roundToHalf(event.localPosition[2]),
+      ]
+      setCursorPosition(nextPosition)
+      cursorRef.current?.position.set(nextPosition[0], event.localPosition[1], nextPosition[2])
+    }
+
+    const onGridClick = (event: GridEvent) => {
+      const position: [number, number, number] = [
+        roundToHalf(event.localPosition[0]),
+        0,
+        roundToHalf(event.localPosition[2]),
+      ]
+      const column = createColumnFromPreset(DEFAULT_COLUMN_PRESET_ID, position)
+      useScene.getState().createNode(column, currentLevelId)
+      onPlaced?.(column.id)
+      sfxEmitter.emit('sfx:structure-build')
+      useEditor.getState().setTool(null)
+      useEditor.getState().setMode('select')
+    }
+
+    emitter.on('grid:move', onGridMove)
+    emitter.on('grid:click', onGridClick)
+
+    return () => {
+      emitter.off('grid:move', onGridMove)
+      emitter.off('grid:click', onGridClick)
+    }
+  }, [currentLevelId, onPlaced])
+
+  if (!currentLevelId) return null
+
+  return (
+    <CursorSphere
+      color="#a78bfa"
+      height={2.8}
+      ref={cursorRef}
+      showTooltip
+      tooltipContent={COLUMN_ICON}
+    />
+  )
+}

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

@@ -248,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

@@ -5,6 +5,7 @@ import {
   isCurvedWall,
   sceneRegistry,
   spatialGridManager,
+  useLiveTransforms,
   useScene,
   type WallEvent,
 } from '@pascal-app/core'
@@ -97,6 +98,18 @@ 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)) {
@@ -105,9 +118,7 @@ export const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNod
       }
       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(
@@ -127,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)
@@ -162,9 +177,7 @@ export const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNod
       }
       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(
@@ -195,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(
@@ -225,8 +242,7 @@ export const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNod
       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(
@@ -291,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')
@@ -302,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)
@@ -318,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)
@@ -364,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

@@ -83,11 +83,10 @@ export const CurveFenceTool: React.FC<{ node: FenceNode }> = ({ node }) => {
         ? 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 offsetFromMidpoint = -(
+        (localX - chord.midpoint.x) * chord.normal.x +
+        (localZ - chord.midpoint.y) * chord.normal.y
+      )
       const snappedOffset = shiftPressedRef.current
         ? offsetFromMidpoint
         : snapScalarToGrid(offsetFromMidpoint, snapStep)

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

@@ -1,14 +1,21 @@
-import { FenceNode, getWallCurveFrameAt, getWallCurveLength, isCurvedWall, 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 {
+  findWallSnapTarget,
   getWallAngleSnapStep,
   getWallGridStep,
-  type WallPlanPoint,
-  findWallSnapTarget,
   isWallLongEnough,
   snapPointTo45Degrees,
   snapPointToGrid,
+  type WallPlanPoint,
 } from '../wall/wall-drafting'
 
 export type FencePlanPoint = WallPlanPoint