@pascal-app/editor 0.4.0

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

@@ -0,0 +1,228 @@
+'use client'
+
+import { type AnyNode, type MaterialSchema, type SlabNode, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Edit, Plus, Trash2 } from 'lucide-react'
+import { useCallback, useEffect } from 'react'
+import useEditor from '../../../store/use-editor'
+import { ActionButton, ActionGroup } from '../controls/action-button'
+import { MaterialPicker } from '../controls/material-picker'
+import { PanelSection } from '../controls/panel-section'
+import { SliderControl } from '../controls/slider-control'
+import { PanelWrapper } from './panel-wrapper'
+
+export function SlabPanel() {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const setSelection = useViewer((s) => s.setSelection)
+  const nodes = useScene((s) => s.nodes)
+  const updateNode = useScene((s) => s.updateNode)
+  const editingHole = useEditor((s) => s.editingHole)
+  const setEditingHole = useEditor((s) => s.setEditingHole)
+
+  const selectedId = selectedIds[0]
+  const node = selectedId ? (nodes[selectedId as AnyNode['id']] as SlabNode | undefined) : undefined
+
+  const handleUpdate = useCallback(
+    (updates: Partial<SlabNode>) => {
+      if (!selectedId) return
+      updateNode(selectedId as AnyNode['id'], updates)
+    },
+    [selectedId, updateNode],
+  )
+
+  const handleMaterialChange = useCallback(
+    (material: MaterialSchema) => {
+      handleUpdate({ material })
+    },
+    [handleUpdate],
+  )
+
+  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 || []
+    handleUpdate({ holes: [...currentHoles, newHole] })
+    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 || []
+      const newHoles = currentHoles.filter((_, i) => i !== index)
+      handleUpdate({ holes: newHoles })
+      if (editingHole?.nodeId === selectedId && editingHole?.holeIndex === index) {
+        setEditingHole(null)
+      }
+    },
+    [selectedId, node?.holes, handleUpdate, editingHole, setEditingHole],
+  )
+
+  if (!node || node.type !== 'slab' || selectedIds.length !== 1) 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
+      area += polygon[i]?.[0] * polygon[j]?.[1]
+      area -= polygon[j]?.[0] * polygon[i]?.[1]
+    }
+    return Math.abs(area) / 2
+  }
+
+  const area = calculateArea(node.polygon)
+
+  return (
+    <PanelWrapper
+      icon="/icons/floor.png"
+      onClose={handleClose}
+      title={node.name || 'Slab'}
+      width={320}
+    >
+      <PanelSection title="Elevation">
+        <SliderControl
+          label="Height"
+          max={1}
+          min={-1}
+          onChange={(v) => handleUpdate({ elevation: v })}
+          precision={3}
+          step={0.01}
+          unit="m"
+          value={Math.round(node.elevation * 1000) / 1000}
+        />
+
+        <div className="mt-2 grid grid-cols-2 gap-1.5 px-1 pb-1">
+          <ActionButton label="Sunken (-15cm)" onClick={() => handleUpdate({ elevation: -0.15 })} />
+          <ActionButton label="Ground (0m)" onClick={() => handleUpdate({ elevation: 0 })} />
+          <ActionButton label="Raised (+5cm)" onClick={() => handleUpdate({ elevation: 0.05 })} />
+          <ActionButton label="Step (+15cm)" onClick={() => handleUpdate({ elevation: 0.15 })} />
+        </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
+              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
+                    </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)}
+                      />
+                    ) : (
+                      <>
+                        <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>
+      <PanelSection title="Material">
+        <MaterialPicker onChange={handleMaterialChange} value={node.material} />
+      </PanelSection>
+    </PanelWrapper>
+  )
+}

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

@@ -0,0 +1,304 @@
+'use client'
+
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type MaterialSchema,
+  type StairNode,
+  StairNode as StairNodeSchema,
+  type StairSegmentNode,
+  StairSegmentNode as StairSegmentNodeSchema,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Copy, Move, Plus, Trash2 } from 'lucide-react'
+import { useCallback } from 'react'
+import { sfxEmitter } from '../../../lib/sfx-bus'
+import useEditor from '../../../store/use-editor'
+import { ActionButton, ActionGroup } from '../controls/action-button'
+import { MaterialPicker } from '../controls/material-picker'
+import { MetricControl } from '../controls/metric-control'
+import { PanelSection } from '../controls/panel-section'
+import { SliderControl } from '../controls/slider-control'
+import { PanelWrapper } from './panel-wrapper'
+
+export function StairPanel() {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const setSelection = useViewer((s) => s.setSelection)
+  const nodes = useScene((s) => s.nodes)
+  const updateNode = useScene((s) => s.updateNode)
+  const createNode = useScene((s) => s.createNode)
+  const setMovingNode = useEditor((s) => s.setMovingNode)
+
+  const selectedId = selectedIds[0]
+  const node = selectedId
+    ? (nodes[selectedId as AnyNode['id']] as StairNode | undefined)
+    : undefined
+
+  const handleUpdate = useCallback(
+    (updates: Partial<StairNode>) => {
+      if (!selectedId) return
+      updateNode(selectedId as AnyNode['id'], updates)
+    },
+    [selectedId, updateNode],
+  )
+
+  const handleMaterialChange = useCallback(
+    (material: MaterialSchema) => {
+      handleUpdate({ material })
+    },
+    [handleUpdate],
+  )
+
+  const handleClose = useCallback(() => {
+    setSelection({ selectedIds: [] })
+  }, [setSelection])
+
+  const getLastSegmentFillDefaults = useCallback(() => {
+    if (!node) return { fillToFloor: true }
+    const children = node.children ?? []
+    const lastChildId = children[children.length - 1]
+    if (lastChildId) {
+      const lastChild = nodes[lastChildId as AnyNodeId] as StairSegmentNode | undefined
+      if (lastChild?.type === 'stair-segment') {
+        return { fillToFloor: lastChild.fillToFloor }
+      }
+    }
+    return { fillToFloor: true }
+  }, [node, nodes])
+
+  const handleAddFlight = useCallback(() => {
+    if (!node) return
+    const { fillToFloor } = getLastSegmentFillDefaults()
+    const segment = StairSegmentNodeSchema.parse({
+      segmentType: 'stair',
+      width: 1.0,
+      length: 3.0,
+      height: 2.5,
+      stepCount: 10,
+      attachmentSide: 'front',
+      fillToFloor,
+      thickness: 0.25,
+      position: [0, 0, 0],
+    })
+    createNode(segment, node.id as AnyNodeId)
+  }, [node, createNode, getLastSegmentFillDefaults])
+
+  const handleAddLanding = useCallback(() => {
+    if (!node) return
+    const { fillToFloor } = getLastSegmentFillDefaults()
+    const segment = StairSegmentNodeSchema.parse({
+      segmentType: 'landing',
+      width: 1.0,
+      length: 1.0,
+      height: 0,
+      stepCount: 0,
+      attachmentSide: 'front',
+      fillToFloor,
+      thickness: 0.32,
+      position: [0, 0, 0],
+    })
+    createNode(segment, node.id as AnyNodeId)
+  }, [node, createNode, getLastSegmentFillDefaults])
+
+  const handleSelectSegment = useCallback(
+    (segmentId: string) => {
+      setSelection({ selectedIds: [segmentId as AnyNode['id']] })
+    },
+    [setSelection],
+  )
+
+  const handleDuplicate = useCallback(() => {
+    if (!node?.parentId) return
+    sfxEmitter.emit('sfx:item-pick')
+
+    let duplicateInfo = structuredClone(node) as any
+    delete duplicateInfo.id
+    duplicateInfo.metadata = { ...duplicateInfo.metadata, isNew: true }
+    duplicateInfo.position = [
+      duplicateInfo.position[0] + 1,
+      duplicateInfo.position[1],
+      duplicateInfo.position[2] + 1,
+    ]
+
+    try {
+      const duplicate = StairNodeSchema.parse(duplicateInfo)
+      useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
+
+      // Also duplicate all child segments
+      const nodesState = useScene.getState().nodes
+      const children = node.children || []
+
+      for (const childId of children) {
+        const childNode = nodesState[childId]
+        if (childNode && childNode.type === 'stair-segment') {
+          let childDuplicateInfo = structuredClone(childNode) as any
+          delete childDuplicateInfo.id
+          childDuplicateInfo.metadata = { ...childDuplicateInfo.metadata, isNew: true }
+          const childDuplicate = StairSegmentNodeSchema.parse(childDuplicateInfo)
+          useScene.getState().createNode(childDuplicate, duplicate.id as AnyNodeId)
+        }
+      }
+
+      setSelection({ selectedIds: [] })
+      setMovingNode(duplicate)
+    } catch (e) {
+      console.error('Failed to duplicate stair', e)
+    }
+  }, [node, setSelection, setMovingNode])
+
+  const handleMove = useCallback(() => {
+    if (node) {
+      sfxEmitter.emit('sfx:item-pick')
+      setMovingNode(node)
+      setSelection({ selectedIds: [] })
+    }
+  }, [node, setMovingNode, setSelection])
+
+  const handleDelete = useCallback(() => {
+    if (!(selectedId && node)) return
+    sfxEmitter.emit('sfx:item-delete')
+    const parentId = node.parentId
+    useScene.getState().deleteNode(selectedId as AnyNodeId)
+    if (parentId) {
+      useScene.getState().dirtyNodes.add(parentId as AnyNodeId)
+    }
+    setSelection({ selectedIds: [] })
+  }, [selectedId, node, setSelection])
+
+  if (!node || node.type !== 'stair' || selectedIds.length !== 1) return null
+
+  const segments = (node.children ?? [])
+    .map((childId) => nodes[childId as AnyNodeId] as StairSegmentNode | undefined)
+    .filter((n): n is StairSegmentNode => n?.type === 'stair-segment')
+
+  return (
+    <PanelWrapper
+      icon="/icons/stairs.png"
+      onClose={handleClose}
+      title={node.name || 'Staircase'}
+      width={300}
+    >
+      <PanelSection title="Segments">
+        <div className="flex flex-col gap-1">
+          {segments.map((seg, i) => (
+            <button
+              className="flex items-center justify-between rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-foreground text-sm transition-colors hover:bg-[#3e3e3e]"
+              key={seg.id}
+              onClick={() => handleSelectSegment(seg.id)}
+              type="button"
+            >
+              <span className="truncate">{seg.name || `Segment ${i + 1}`}</span>
+              <span className="text-muted-foreground text-xs capitalize">{seg.segmentType}</span>
+            </button>
+          ))}
+        </div>
+        <div className="flex gap-1.5">
+          <ActionButton
+            icon={<Plus className="h-3.5 w-3.5" />}
+            label="Add flight"
+            onClick={handleAddFlight}
+          />
+          <ActionButton
+            icon={<Plus className="h-3.5 w-3.5" />}
+            label="Add landing"
+            onClick={handleAddLanding}
+          />
+        </div>
+      </PanelSection>
+
+      <PanelSection title="Position">
+        <MetricControl
+          label="X"
+          max={50}
+          min={-50}
+          onChange={(v) => {
+            const pos = [...node.position] as [number, number, number]
+            pos[0] = v
+            handleUpdate({ position: pos })
+          }}
+          precision={2}
+          step={0.05}
+          unit="m"
+          value={Math.round(node.position[0] * 100) / 100}
+        />
+        <MetricControl
+          label="Y"
+          max={50}
+          min={-50}
+          onChange={(v) => {
+            const pos = [...node.position] as [number, number, number]
+            pos[1] = v
+            handleUpdate({ position: pos })
+          }}
+          precision={2}
+          step={0.05}
+          unit="m"
+          value={Math.round(node.position[1] * 100) / 100}
+        />
+        <MetricControl
+          label="Z"
+          max={50}
+          min={-50}
+          onChange={(v) => {
+            const pos = [...node.position] as [number, number, number]
+            pos[2] = v
+            handleUpdate({ position: pos })
+          }}
+          precision={2}
+          step={0.05}
+          unit="m"
+          value={Math.round(node.position[2] * 100) / 100}
+        />
+        <SliderControl
+          label="Rotation"
+          max={180}
+          min={-180}
+          onChange={(degrees) => {
+            handleUpdate({ rotation: (degrees * Math.PI) / 180 })
+          }}
+          precision={0}
+          step={1}
+          unit="°"
+          value={Math.round((node.rotation * 180) / Math.PI)}
+        />
+        <div className="flex gap-1.5 px-1 pt-2 pb-1">
+          <ActionButton
+            label="-45°"
+            onClick={() => {
+              sfxEmitter.emit('sfx:item-rotate')
+              handleUpdate({ rotation: node.rotation - Math.PI / 4 })
+            }}
+          />
+          <ActionButton
+            label="+45°"
+            onClick={() => {
+              sfxEmitter.emit('sfx:item-rotate')
+              handleUpdate({ rotation: node.rotation + Math.PI / 4 })
+            }}
+          />
+        </div>
+      </PanelSection>
+
+      <PanelSection title="Actions">
+        <ActionGroup>
+          <ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />
+          <ActionButton
+            icon={<Copy className="h-3.5 w-3.5" />}
+            label="Duplicate"
+            onClick={handleDuplicate}
+          />
+          <ActionButton
+            className="hover:bg-red-500/20"
+            icon={<Trash2 className="h-3.5 w-3.5 text-red-400" />}
+            label="Delete"
+            onClick={handleDelete}
+          />
+        </ActionGroup>
+      </PanelSection>
+      <PanelSection title="Material">
+        <MaterialPicker onChange={handleMaterialChange} value={node.material} />
+      </PanelSection>
+    </PanelWrapper>
+  )
+}