@pascal-app/editor 0.4.0

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

@@ -0,0 +1,262 @@
+'use client'
+
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type MaterialSchema,
+  type RoofNode,
+  RoofNode as RoofNodeSchema,
+  type RoofSegmentNode,
+  RoofSegmentNode as RoofSegmentNodeSchema,
+  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 RoofPanel() {
+  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 RoofNode | undefined) : undefined
+
+  const handleUpdate = useCallback(
+    (updates: Partial<RoofNode>) => {
+      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 handleAddSegment = useCallback(() => {
+    if (!node) return
+    const segment = RoofSegmentNodeSchema.parse({
+      width: 6,
+      depth: 6,
+      wallHeight: 0.5,
+      roofHeight: 2.5,
+      roofType: 'gable',
+      position: [2, 0, 2],
+    })
+    createNode(segment, node.id as AnyNodeId)
+  }, [node, createNode])
+
+  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 }
+    // Offset slightly so it's visible
+    duplicateInfo.position = [
+      duplicateInfo.position[0] + 1,
+      duplicateInfo.position[1],
+      duplicateInfo.position[2] + 1,
+    ]
+
+    try {
+      const duplicate = RoofNodeSchema.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 === 'roof-segment') {
+          let childDuplicateInfo = structuredClone(childNode) as any
+          delete childDuplicateInfo.id
+          childDuplicateInfo.metadata = { ...childDuplicateInfo.metadata, isNew: true }
+          const childDuplicate = RoofSegmentNodeSchema.parse(childDuplicateInfo)
+          useScene.getState().createNode(childDuplicate, duplicate.id as AnyNodeId)
+        }
+      }
+
+      setSelection({ selectedIds: [] })
+      setMovingNode(duplicate)
+    } catch (e) {
+      console.error('Failed to duplicate roof', 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 !== 'roof' || selectedIds.length !== 1) return null
+
+  const segments = (node.children ?? [])
+    .map((childId) => nodes[childId as AnyNodeId] as RoofSegmentNode | undefined)
+    .filter((n): n is RoofSegmentNode => n?.type === 'roof-segment')
+
+  return (
+    <PanelWrapper
+      icon="/icons/roof.png"
+      onClose={handleClose}
+      title={node.name || 'Roof'}
+      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.roofType}</span>
+            </button>
+          ))}
+        </div>
+        <ActionButton
+          icon={<Plus className="h-3.5 w-3.5" />}
+          label="Add Segment"
+          onClick={handleAddSegment}
+        />
+      </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>
+  )
+}

package/src/components/ui/panels/roof-segment-panel.tsx

@@ -0,0 +1,326 @@
+'use client'
+
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type MaterialSchema,
+  type RoofSegmentNode,
+  RoofSegmentNode as RoofSegmentNodeSchema,
+  type RoofType,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Copy, Move, 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 { SegmentedControl } from '../controls/segmented-control'
+import { SliderControl } from '../controls/slider-control'
+import { PanelWrapper } from './panel-wrapper'
+
+const ROOF_TYPE_OPTIONS: { label: string; value: RoofType }[] = [
+  { label: 'Hip', value: 'hip' },
+  { label: 'Gable', value: 'gable' },
+  { label: 'Shed', value: 'shed' },
+  { label: 'Flat', value: 'flat' },
+]
+
+const ROOF_TYPE_OPTIONS_2: { label: string; value: RoofType }[] = [
+  { label: 'Gambrel', value: 'gambrel' },
+  { label: 'Dutch', value: 'dutch' },
+  { label: 'Mansard', value: 'mansard' },
+]
+
+export function RoofSegmentPanel() {
+  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 setMovingNode = useEditor((s) => s.setMovingNode)
+
+  const selectedId = selectedIds[0]
+  const node = selectedId
+    ? (nodes[selectedId as AnyNode['id']] as RoofSegmentNode | undefined)
+    : undefined
+
+  const handleUpdate = useCallback(
+    (updates: Partial<RoofSegmentNode>) => {
+      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 handleBack = useCallback(() => {
+    if (node?.parentId) {
+      setSelection({ selectedIds: [node.parentId] })
+    }
+  }, [node?.parentId, 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 }
+    // Offset slightly so it's visible
+    duplicateInfo.position = [
+      duplicateInfo.position[0] + 1,
+      duplicateInfo.position[1],
+      duplicateInfo.position[2] + 1,
+    ]
+
+    try {
+      const duplicate = RoofSegmentNodeSchema.parse(duplicateInfo)
+      useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
+      setSelection({ selectedIds: [] })
+      setMovingNode(duplicate)
+    } catch (e) {
+      console.error('Failed to duplicate roof segment', 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: [parentId] })
+    } else {
+      setSelection({ selectedIds: [] })
+    }
+  }, [selectedId, node, setSelection])
+
+  if (!node || node.type !== 'roof-segment' || selectedIds.length !== 1) return null
+
+  return (
+    <PanelWrapper
+      icon="/icons/roof.png"
+      onBack={handleBack}
+      onClose={handleClose}
+      title={node.name || 'Roof Segment'}
+      width={300}
+    >
+      <PanelSection title="Roof Type">
+        <SegmentedControl
+          onChange={(v) => handleUpdate({ roofType: v })}
+          options={ROOF_TYPE_OPTIONS}
+          value={node.roofType}
+        />
+        <SegmentedControl
+          onChange={(v) => handleUpdate({ roofType: v })}
+          options={ROOF_TYPE_OPTIONS_2}
+          value={node.roofType}
+        />
+      </PanelSection>
+
+      <PanelSection title="Footprint">
+        <SliderControl
+          label="Width"
+          max={25}
+          min={0.5}
+          onChange={(v) => handleUpdate({ width: v })}
+          precision={2}
+          step={0.5}
+          unit="m"
+          value={Math.round(node.width * 100) / 100}
+        />
+        <SliderControl
+          label="Depth"
+          max={25}
+          min={0.5}
+          onChange={(v) => handleUpdate({ depth: v })}
+          precision={2}
+          step={0.5}
+          unit="m"
+          value={Math.round(node.depth * 100) / 100}
+        />
+      </PanelSection>
+
+      <PanelSection title="Heights">
+        <SliderControl
+          label="Wall"
+          max={5}
+          min={0}
+          onChange={(v) => handleUpdate({ wallHeight: v })}
+          precision={2}
+          step={0.1}
+          unit="m"
+          value={Math.round(node.wallHeight * 100) / 100}
+        />
+        <SliderControl
+          label="Roof"
+          max={15}
+          min={0}
+          onChange={(v) => handleUpdate({ roofHeight: v })}
+          precision={2}
+          step={0.1}
+          unit="m"
+          value={Math.round(node.roofHeight * 100) / 100}
+        />
+      </PanelSection>
+
+      <PanelSection title="Structure">
+        <SliderControl
+          label="Wall Thick."
+          max={1}
+          min={0.05}
+          onChange={(v) => handleUpdate({ wallThickness: v })}
+          precision={2}
+          step={0.05}
+          unit="m"
+          value={Math.round(node.wallThickness * 100) / 100}
+        />
+        <SliderControl
+          label="Deck Thick."
+          max={0.3}
+          min={0.04}
+          onChange={(v) => handleUpdate({ deckThickness: v })}
+          precision={2}
+          step={0.01}
+          unit="m"
+          value={Math.round(node.deckThickness * 100) / 100}
+        />
+        <SliderControl
+          label="Overhang"
+          max={1}
+          min={0}
+          onChange={(v) => handleUpdate({ overhang: v })}
+          precision={2}
+          step={0.05}
+          unit="m"
+          value={Math.round(node.overhang * 100) / 100}
+        />
+        <SliderControl
+          label="Shingle Thick."
+          max={0.3}
+          min={0.02}
+          onChange={(v) => handleUpdate({ shingleThickness: v })}
+          precision={2}
+          step={0.01}
+          unit="m"
+          value={Math.round(node.shingleThickness * 100) / 100}
+        />
+      </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>
+  )
+}