@pascal-app/editor 0.8.0 → 0.9.1

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

@@ -1,332 +0,0 @@
-import {
-  type AnyNodeId,
-  emitter,
-  isCurvedWall,
-  sceneRegistry,
-  spatialGridManager,
-  useScene,
-  type WallEvent,
-  WindowNode,
-} from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { useEffect, useRef } from 'react'
-import { BoxGeometry, EdgesGeometry, type Group, type LineSegments } from 'three'
-import { LineBasicNodeMaterial } from 'three/webgpu'
-import { EDITOR_LAYER } from '../../../lib/constants'
-import { sfxEmitter } from '../../../lib/sfx-bus'
-import {
-  calculateCursorRotation,
-  calculateItemRotation,
-  getSideFromNormal,
-  isValidWallSideFace,
-  snapToHalf,
-} from '../item/placement-math'
-import { clampToWall, hasWallChildOverlap, wallLocalToWorld } from './window-math'
-
-// Shared edge material — reuse across renders, just toggle color
-const edgeMaterial = new LineBasicNodeMaterial({
-  color: 0xef_44_44, // red-500 default (invalid)
-  linewidth: 3,
-  depthTest: false,
-  depthWrite: false,
-})
-
-/**
- * Window tool — places WindowNodes on walls only.
- * Shows a rectangle cursor (green = valid, red = invalid) matching window dimensions.
- */
-export const WindowTool: React.FC = () => {
-  const draftRef = useRef<WindowNode | null>(null)
-  const cursorGroupRef = useRef<Group>(null!)
-  const edgesRef = useRef<LineSegments>(null!)
-
-  useEffect(() => {
-    useScene.temporal.getState().pause()
-
-    const getLevelId = () => useViewer.getState().selection.levelId
-    const getLevelYOffset = () => {
-      const id = getLevelId()
-      return id ? (sceneRegistry.nodes.get(id as AnyNodeId)?.position.y ?? 0) : 0
-    }
-    const getSlabElevation = (wallEvent: WallEvent) =>
-      spatialGridManager.getSlabElevationForWall(
-        wallEvent.node.parentId ?? '',
-        wallEvent.node.start,
-        wallEvent.node.end,
-      )
-
-    const markWallDirty = (wallId: string) => {
-      useScene.getState().dirtyNodes.add(wallId as AnyNodeId)
-    }
-
-    const destroyDraft = () => {
-      if (!draftRef.current) return
-      const wallId = draftRef.current.parentId
-      useScene.getState().deleteNode(draftRef.current.id)
-      draftRef.current = null
-      // Rebuild wall so it removes the cutout from the deleted draft
-      if (wallId) markWallDirty(wallId)
-    }
-
-    const hideCursor = () => {
-      if (cursorGroupRef.current) cursorGroupRef.current.visible = false
-    }
-
-    const updateCursor = (
-      worldPosition: [number, number, number],
-      cursorRotationY: number,
-      valid: boolean,
-    ) => {
-      const group = cursorGroupRef.current
-      if (!group) return
-      group.visible = true
-      group.position.set(...worldPosition)
-      group.rotation.y = cursorRotationY
-      edgeMaterial.color.setHex(valid ? 0x22_c5_5e : 0xef_44_44)
-    }
-
-    const onWallEnter = (event: WallEvent) => {
-      if (!isValidWallSideFace(event.normal)) return
-      if (isCurvedWall(event.node)) {
-        destroyDraft()
-        hideCursor()
-        return
-      }
-      const levelId = getLevelId()
-      if (!levelId) return
-      // Only interact with walls on the current level
-      if (event.node.parentId !== levelId) return
-
-      destroyDraft()
-
-      const side = getSideFromNormal(event.normal)
-      const itemRotation = calculateItemRotation(event.normal)
-      const cursorRotation = calculateCursorRotation(event.normal, event.node.start, event.node.end)
-
-      const localX = snapToHalf(event.localPosition[0])
-      const localY = snapToHalf(event.localPosition[1])
-
-      const width = 1.5
-      const height = 1.5
-
-      const { clampedX, clampedY } = clampToWall(event.node, localX, localY, width, height)
-
-      const node = WindowNode.parse({
-        position: [clampedX, clampedY, 0],
-        rotation: [0, itemRotation, 0],
-        side,
-        wallId: event.node.id,
-        parentId: event.node.id,
-        metadata: { isTransient: true },
-      })
-
-      useScene.getState().createNode(node, event.node.id as AnyNodeId)
-      draftRef.current = node
-
-      const valid = !hasWallChildOverlap(event.node.id, clampedX, clampedY, width, height, node.id)
-
-      updateCursor(
-        wallLocalToWorld(
-          event.node,
-          clampedX,
-          clampedY,
-          getLevelYOffset(),
-          getSlabElevation(event),
-        ),
-        cursorRotation,
-        valid,
-      )
-      event.stopPropagation()
-    }
-
-    const onWallMove = (event: WallEvent) => {
-      if (!isValidWallSideFace(event.normal)) return
-      if (isCurvedWall(event.node)) {
-        destroyDraft()
-        hideCursor()
-        return
-      }
-      // Only interact with walls on the current level
-      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 localX = snapToHalf(event.localPosition[0])
-      const localY = snapToHalf(event.localPosition[1])
-
-      const width = draftRef.current?.width ?? 1.5
-      const height = draftRef.current?.height ?? 1.5
-
-      const { clampedX, clampedY } = clampToWall(event.node, localX, localY, width, height)
-
-      if (draftRef.current) {
-        if (event.node.id !== draftRef.current.parentId) {
-          // Wall changed without enter/leave: must updateNode to reparent
-          useScene.getState().updateNode(draftRef.current.id, {
-            position: [clampedX, clampedY, 0],
-            rotation: [0, itemRotation, 0],
-            side,
-            parentId: event.node.id,
-            wallId: event.node.id,
-          })
-        } else {
-          // Same wall: update Three.js mesh directly to avoid store churn
-          const draftMesh = sceneRegistry.nodes.get(draftRef.current.id as AnyNodeId)
-          if (draftMesh) {
-            draftMesh.position.set(clampedX, clampedY, 0)
-            draftMesh.rotation.set(0, itemRotation, 0)
-            draftMesh.updateMatrixWorld(true)
-          }
-          markWallDirty(event.node.id)
-        }
-      }
-
-      const valid = !hasWallChildOverlap(
-        event.node.id,
-        clampedX,
-        clampedY,
-        width,
-        height,
-        draftRef.current?.id,
-      )
-
-      updateCursor(
-        wallLocalToWorld(
-          event.node,
-          clampedX,
-          clampedY,
-          getLevelYOffset(),
-          getSlabElevation(event),
-        ),
-        cursorRotation,
-        valid,
-      )
-      event.stopPropagation()
-    }
-
-    const onWallClick = (event: WallEvent) => {
-      if (!draftRef.current) return
-      if (!isValidWallSideFace(event.normal)) return
-      if (isCurvedWall(event.node)) return
-      // Only interact with walls on the current level
-      if (event.node.parentId !== getLevelId()) return
-
-      const side = getSideFromNormal(event.normal)
-      const itemRotation = calculateItemRotation(event.normal)
-
-      const localX = snapToHalf(event.localPosition[0])
-      const localY = snapToHalf(event.localPosition[1])
-      const { clampedX, clampedY } = clampToWall(
-        event.node,
-        localX,
-        localY,
-        draftRef.current.width,
-        draftRef.current.height,
-      )
-      const valid = !hasWallChildOverlap(
-        event.node.id,
-        clampedX,
-        clampedY,
-        draftRef.current.width,
-        draftRef.current.height,
-        draftRef.current.id,
-      )
-      if (!valid) return
-
-      const draft = draftRef.current
-      draftRef.current = null
-
-      // Delete transient draft (paused, invisible to undo)
-      useScene.getState().deleteNode(draft.id)
-
-      // Resume → create permanent node (single undoable action)
-      useScene.temporal.getState().resume()
-
-      const levelId = getLevelId()
-      const state = useScene.getState()
-      const windowCount = Object.values(state.nodes).filter((n) => {
-        if (n.type !== 'window') return false
-        const wall = n.parentId ? state.nodes[n.parentId as AnyNodeId] : undefined
-        return wall?.parentId === levelId
-      }).length
-      const name = `Window ${windowCount + 1}`
-
-      const node = WindowNode.parse({
-        name,
-        position: [clampedX, clampedY, 0],
-        rotation: [0, itemRotation, 0],
-        side,
-        wallId: event.node.id,
-        parentId: event.node.id,
-        width: draft.width,
-        height: draft.height,
-        windowType: draft.windowType,
-        operationState: draft.operationState,
-        awningDirection: draft.awningDirection,
-        casementStyle: draft.casementStyle,
-        hingesSide: draft.hingesSide,
-        frameThickness: draft.frameThickness,
-        frameDepth: draft.frameDepth,
-        columnRatios: draft.columnRatios,
-        rowRatios: draft.rowRatios,
-        columnDividerThickness: draft.columnDividerThickness,
-        rowDividerThickness: draft.rowDividerThickness,
-        sill: draft.sill,
-        sillDepth: draft.sillDepth,
-        sillThickness: draft.sillThickness,
-      })
-
-      useScene.getState().createNode(node, event.node.id as AnyNodeId)
-      useViewer.getState().setSelection({ selectedIds: [node.id] })
-      useScene.temporal.getState().pause()
-      sfxEmitter.emit('sfx:item-place')
-
-      event.stopPropagation()
-    }
-
-    const onWallLeave = () => {
-      destroyDraft()
-      hideCursor()
-    }
-
-    const onCancel = () => {
-      destroyDraft()
-      hideCursor()
-    }
-
-    emitter.on('wall:enter', onWallEnter)
-    emitter.on('wall:move', onWallMove)
-    emitter.on('wall:click', onWallClick)
-    emitter.on('wall:leave', onWallLeave)
-    emitter.on('tool:cancel', onCancel)
-
-    return () => {
-      destroyDraft()
-      hideCursor()
-      useScene.temporal.getState().resume()
-      emitter.off('wall:enter', onWallEnter)
-      emitter.off('wall:move', onWallMove)
-      emitter.off('wall:click', onWallClick)
-      emitter.off('wall:leave', onWallLeave)
-      emitter.off('tool:cancel', onCancel)
-    }
-  }, [])
-
-  // Cursor geometry: window outline rectangle (width × height × frameDepth)
-  const boxGeo = new BoxGeometry(1.5, 1.5, 0.07)
-  const edgesGeo = new EdgesGeometry(boxGeo)
-  boxGeo.dispose()
-
-  return (
-    <group ref={cursorGroupRef} visible={false}>
-      <lineSegments
-        geometry={edgesGeo}
-        layers={EDITOR_LAYER}
-        material={edgeMaterial}
-        ref={edgesRef}
-      />
-    </group>
-  )
-}

package/src/components/ui/helpers/ceiling-helper.tsx

@@ -1,20 +0,0 @@
-import { ShortcutToken } from '../primitives/shortcut-token'
-
-export function CeilingHelper() {
-  return (
-    <div className="pointer-events-none fixed top-1/2 right-4 z-40 flex -translate-y-1/2 flex-col gap-2 rounded-lg border border-border bg-background/95 px-4 py-3 shadow-lg backdrop-blur-md">
-      <div className="flex items-center gap-2 text-sm">
-        <ShortcutToken value="Left click" />
-        <span className="text-muted-foreground">Add point</span>
-      </div>
-      <div className="flex items-center gap-2 text-sm">
-        <ShortcutToken value="Shift" />
-        <span className="text-muted-foreground">Allow non-45° angles</span>
-      </div>
-      <div className="flex items-center gap-2 text-sm">
-        <ShortcutToken value="Esc" />
-        <span className="text-muted-foreground">Cancel</span>
-      </div>
-    </div>
-  )
-}

package/src/components/ui/helpers/slab-helper.tsx

@@ -1,20 +0,0 @@
-import { ShortcutToken } from '../primitives/shortcut-token'
-
-export function SlabHelper() {
-  return (
-    <div className="pointer-events-none fixed top-1/2 right-4 z-40 flex -translate-y-1/2 flex-col gap-2 rounded-lg border border-border bg-background/95 px-4 py-3 shadow-lg backdrop-blur-md">
-      <div className="flex items-center gap-2 text-sm">
-        <ShortcutToken value="Left click" />
-        <span className="text-muted-foreground">Add point</span>
-      </div>
-      <div className="flex items-center gap-2 text-sm">
-        <ShortcutToken value="Shift" />
-        <span className="text-muted-foreground">Allow non-45° angles</span>
-      </div>
-      <div className="flex items-center gap-2 text-sm">
-        <ShortcutToken value="Esc" />
-        <span className="text-muted-foreground">Cancel</span>
-      </div>
-    </div>
-  )
-}

package/src/components/ui/helpers/wall-helper.tsx

@@ -1,20 +0,0 @@
-import { ShortcutToken } from '../primitives/shortcut-token'
-
-export function WallHelper() {
-  return (
-    <div className="pointer-events-none fixed top-1/2 right-4 z-40 flex -translate-y-1/2 flex-col gap-2 rounded-lg border border-border bg-background/95 px-4 py-3 shadow-lg backdrop-blur-md">
-      <div className="flex items-center gap-2 text-sm">
-        <ShortcutToken value="Left click" />
-        <span className="text-muted-foreground">Set wall start / end</span>
-      </div>
-      <div className="flex items-center gap-2 text-sm">
-        <ShortcutToken value="Shift" />
-        <span className="text-muted-foreground">Allow non-45° angles</span>
-      </div>
-      <div className="flex items-center gap-2 text-sm">
-        <ShortcutToken value="Esc" />
-        <span className="text-muted-foreground">Cancel</span>
-      </div>
-    </div>
-  )
-}

package/src/components/ui/panels/ceiling-panel.tsx

@@ -1,249 +0,0 @@
-'use client'
-
-import { type AnyNode, type CeilingNode, useScene } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { Edit, Move, Plus, Trash2 } from 'lucide-react'
-import { useCallback, useEffect } from 'react'
-import { sfxEmitter } from '../../../lib/sfx-bus'
-import useEditor from '../../../store/use-editor'
-import { ActionButton, ActionGroup } from '../controls/action-button'
-import { PanelSection } from '../controls/panel-section'
-import { SliderControl } from '../controls/slider-control'
-import { PanelWrapper } from './panel-wrapper'
-
-export function CeilingPanel() {
-  const selectedId = useViewer((s) => s.selection.selectedIds[0])
-  const setSelection = useViewer((s) => s.setSelection)
-  const updateNode = useScene((s) => s.updateNode)
-  const editingHole = useEditor((s) => s.editingHole)
-  const setEditingHole = useEditor((s) => s.setEditingHole)
-  const setMovingNode = useEditor((s) => s.setMovingNode)
-
-  const node = useScene((s) =>
-    selectedId ? (s.nodes[selectedId as AnyNode['id']] as CeilingNode | undefined) : undefined,
-  )
-
-  const handleUpdate = useCallback(
-    (updates: Partial<CeilingNode>) => {
-      if (!selectedId) return
-      updateNode(selectedId as AnyNode['id'], updates)
-    },
-    [selectedId, updateNode],
-  )
-
-  const handleClose = useCallback(() => {
-    setSelection({ selectedIds: [] })
-    setEditingHole(null)
-  }, [setSelection, setEditingHole])
-
-  useEffect(() => {
-    if (!node) {
-      setEditingHole(null)
-    }
-  }, [node, setEditingHole])
-
-  useEffect(() => {
-    return () => {
-      setEditingHole(null)
-    }
-  }, [setEditingHole])
-
-  const handleAddHole = useCallback(() => {
-    if (!(node && selectedId)) return
-
-    const polygon = node.polygon
-    let cx = 0
-    let cz = 0
-    for (const [x, z] of polygon) {
-      cx += x
-      cz += z
-    }
-    cx /= polygon.length
-    cz /= polygon.length
-
-    const holeSize = 0.5
-    const newHole: Array<[number, number]> = [
-      [cx - holeSize, cz - holeSize],
-      [cx + holeSize, cz - holeSize],
-      [cx + holeSize, cz + holeSize],
-      [cx - holeSize, cz + holeSize],
-    ]
-    const currentHoles = node?.holes || []
-    const currentMetadata = currentHoles.map(
-      (_, index) => node?.holeMetadata?.[index] ?? { source: 'manual' as const },
-    )
-    handleUpdate({
-      holes: [...currentHoles, newHole],
-      holeMetadata: [...currentMetadata, { source: 'manual' }],
-    })
-    setEditingHole({ nodeId: selectedId, holeIndex: currentHoles.length })
-  }, [node, selectedId, handleUpdate, setEditingHole])
-
-  const handleEditHole = useCallback(
-    (index: number) => {
-      if (!selectedId) return
-      setEditingHole({ nodeId: selectedId, holeIndex: index })
-    },
-    [selectedId, setEditingHole],
-  )
-
-  const handleDeleteHole = useCallback(
-    (index: number) => {
-      if (!selectedId) return
-      const currentHoles = node?.holes || []
-      if (node?.holeMetadata?.[index]?.source === 'stair') return
-      const newHoles = currentHoles.filter((_, i) => i !== index)
-      const currentMetadata = currentHoles.map(
-        (_, metadataIndex) => node?.holeMetadata?.[metadataIndex] ?? { source: 'manual' as const },
-      )
-      const newMetadata = currentMetadata.filter((_, i) => i !== index)
-      handleUpdate({ holes: newHoles, holeMetadata: newMetadata })
-      if (editingHole?.nodeId === selectedId && editingHole?.holeIndex === index) {
-        setEditingHole(null)
-      }
-    },
-    [selectedId, node?.holes, node?.holeMetadata, handleUpdate, editingHole, setEditingHole],
-  )
-
-  const handleMove = useCallback(() => {
-    if (!node) return
-    sfxEmitter.emit('sfx:item-pick')
-    setMovingNode(node)
-    setSelection({ selectedIds: [] })
-  }, [node, setMovingNode, setSelection])
-
-  if (!(node && node.type === 'ceiling' && selectedId)) return null
-
-  const calculateArea = (polygon: Array<[number, number]>): number => {
-    if (polygon.length < 3) return 0
-    let area = 0
-    const n = polygon.length
-    for (let i = 0; i < n; i++) {
-      const j = (i + 1) % n
-      const current = polygon[i]!
-      const next = polygon[j]!
-      area += current[0] * next[1]
-      area -= next[0] * current[1]
-    }
-    return Math.abs(area) / 2
-  }
-
-  const area = calculateArea(node.polygon)
-
-  return (
-    <PanelWrapper
-      icon="/icons/ceiling.png"
-      onClose={handleClose}
-      title={node.name || 'Ceiling'}
-      width={320}
-    >
-      <PanelSection title="Height">
-        <SliderControl
-          label="Height"
-          max={6}
-          min={0}
-          onChange={(v) => handleUpdate({ height: v })}
-          precision={3}
-          step={0.01}
-          unit="m"
-          value={Math.round(node.height * 1000) / 1000}
-        />
-
-        <div className="mt-2 grid grid-cols-3 gap-1.5 px-1 pb-1">
-          <ActionButton label="Low (2.4m)" onClick={() => handleUpdate({ height: 2.4 })} />
-          <ActionButton label="Standard (2.5m)" onClick={() => handleUpdate({ height: 2.5 })} />
-          <ActionButton label="High (3.0m)" onClick={() => handleUpdate({ height: 3.0 })} />
-        </div>
-      </PanelSection>
-
-      <PanelSection title="Info">
-        <div className="flex items-center justify-between px-2 py-1 text-muted-foreground text-sm">
-          <span>Area</span>
-          <span className="font-mono text-white">{area.toFixed(2)} m²</span>
-        </div>
-      </PanelSection>
-
-      <PanelSection title="Holes">
-        {node.holes && node.holes.length > 0 ? (
-          <div className="flex flex-col gap-1 pb-2">
-            {node.holes.map((hole, index) => {
-              const holeArea = calculateArea(hole)
-              const isEditing =
-                editingHole?.nodeId === selectedId && editingHole?.holeIndex === index
-              const source = node.holeMetadata?.[index]?.source ?? 'manual'
-              const isAutoHole = source === 'stair'
-              return (
-                <div
-                  className={`flex items-center justify-between rounded-lg border p-2 transition-colors ${
-                    isEditing
-                      ? 'border-primary/50 bg-primary/10'
-                      : 'border-transparent hover:bg-accent/30'
-                  }`}
-                  key={index}
-                >
-                  <div className="min-w-0 flex-1">
-                    <p
-                      className={`font-medium text-xs ${isEditing ? 'text-primary' : 'text-white'}`}
-                    >
-                      Hole {index + 1} {isEditing && '(Editing)'}
-                    </p>
-                    <p className="text-[10px] text-muted-foreground">
-                      {holeArea.toFixed(2)} m² · {hole.length} pts ·{' '}
-                      {isAutoHole ? 'Auto stair cutout' : 'Manual'}
-                    </p>
-                  </div>
-                  <div className="flex items-center gap-1">
-                    {isEditing ? (
-                      <ActionButton
-                        className="h-7 bg-primary text-primary-foreground hover:bg-primary/90"
-                        label="Done"
-                        onClick={() => setEditingHole(null)}
-                      />
-                    ) : isAutoHole ? (
-                      <div className="rounded-md bg-[#2C2C2E] px-2 py-1 text-[10px] text-muted-foreground">
-                        Auto
-                      </div>
-                    ) : (
-                      <>
-                        <button
-                          className="flex h-7 w-7 items-center justify-center rounded-md bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground"
-                          onClick={() => handleEditHole(index)}
-                          type="button"
-                        >
-                          <Edit className="h-3.5 w-3.5" />
-                        </button>
-                        <button
-                          className="flex h-7 w-7 items-center justify-center rounded-md bg-red-500/10 text-red-400 hover:bg-red-500/20 hover:text-red-300"
-                          onClick={() => handleDeleteHole(index)}
-                          type="button"
-                        >
-                          <Trash2 className="h-3.5 w-3.5" />
-                        </button>
-                      </>
-                    )}
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-        ) : (
-          <div className="px-2 py-3 text-center text-muted-foreground text-xs">No holes</div>
-        )}
-
-        <div className="px-1 pt-1 pb-1">
-          <ActionButton
-            className="w-full"
-            disabled={editingHole?.nodeId === selectedId}
-            icon={<Plus className="h-3.5 w-3.5" />}
-            label="Add Hole"
-            onClick={handleAddHole}
-          />
-        </div>
-      </PanelSection>
-
-      <ActionGroup>
-        <ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />
-      </ActionGroup>
-    </PanelWrapper>
-  )
-}