@pascal-app/editor 0.4.0 → 0.6.0

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

@@ -25,17 +25,17 @@ import { PanelWrapper } from './panel-wrapper'
 import { PresetsPopover } from './presets/presets-popover'
 
 export function DoorPanel() {
-  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const selectedId = useViewer((s) => s.selection.selectedIds[0])
   const setSelection = useViewer((s) => s.setSelection)
-  const nodes = useScene((s) => s.nodes)
   const updateNode = useScene((s) => s.updateNode)
   const deleteNode = useScene((s) => s.deleteNode)
   const setMovingNode = useEditor((s) => s.setMovingNode)
 
   const adapter = usePresetsAdapter()
 
-  const selectedId = selectedIds[0]
-  const node = selectedId ? (nodes[selectedId as AnyNode['id']] as DoorNode | undefined) : undefined
+  const node = useScene((s) =>
+    selectedId ? (s.nodes[selectedId as AnyNode['id']] as DoorNode | undefined) : undefined,
+  )
 
   const handleUpdate = useCallback(
     (updates: Partial<DoorNode>) => {
@@ -182,7 +182,7 @@ export function DoorPanel() {
     [handleUpdate],
   )
 
-  if (!node || node.type !== 'door' || selectedIds.length !== 1) return null
+  if (!(node && node.type === 'door' && selectedId)) return null
 
   const hSum = node.segments.reduce((s, seg) => s + seg.heightRatio, 0)
   const normHeights = node.segments.map((seg) => seg.heightRatio / hSum)

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

@@ -0,0 +1,269 @@
+'use client'
+
+import {
+  type AnyNode,
+  type AnyNodeId,
+  type FenceNode,
+  getClampedWallCurveOffset,
+  getMaxWallCurveOffset,
+  getWallCurveLength,
+  type MaterialSchema,
+  normalizeWallCurveOffset,
+  useScene,
+} from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import { Move, Spline } 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 { PanelSection } from '../controls/panel-section'
+import { SegmentedControl } from '../controls/segmented-control'
+import { SliderControl } from '../controls/slider-control'
+import { PanelWrapper } from './panel-wrapper'
+
+type FenceStyleValue = 'slat' | 'rail' | 'privacy'
+type FenceBaseStyleValue = 'grounded' | 'floating'
+
+const FENCE_STYLE_OPTIONS: { label: string; value: FenceStyleValue }[] = [
+  { label: 'Slat', value: 'slat' },
+  { label: 'Rail', value: 'rail' },
+  { label: 'Privacy', value: 'privacy' },
+]
+
+const FENCE_BASE_STYLE_OPTIONS: { label: string; value: FenceBaseStyleValue }[] = [
+  { label: 'Grounded', value: 'grounded' },
+  { label: 'Floating', value: 'floating' },
+]
+
+export function FencePanel() {
+  const selectedId = useViewer((s) => s.selection.selectedIds[0])
+  const selectedCount = useViewer((s) => s.selection.selectedIds.length)
+  const setSelection = useViewer((s) => s.setSelection)
+  const updateNode = useScene((s) => s.updateNode)
+  const setMovingNode = useEditor((s) => s.setMovingNode)
+  const setCurvingFence = useEditor((s) => s.setCurvingFence)
+
+  const node = useScene((s) =>
+    selectedId ? (s.nodes[selectedId as AnyNode['id']] as FenceNode | undefined) : undefined,
+  )
+
+  const handleUpdate = useCallback(
+    (updates: Partial<FenceNode>) => {
+      if (!selectedId) return
+      updateNode(selectedId as AnyNode['id'], updates)
+      useScene.getState().dirtyNodes.add(selectedId as AnyNodeId)
+    },
+    [selectedId, updateNode],
+  )
+
+  const handleUpdateLength = useCallback(
+    (newLength: number) => {
+      if (!node || newLength <= 0) return
+
+      const dx = node.end[0] - node.start[0]
+      const dz = node.end[1] - node.start[1]
+      const currentLength = Math.sqrt(dx * dx + dz * dz)
+      if (currentLength === 0) return
+
+      const dirX = dx / currentLength
+      const dirZ = dz / currentLength
+      const newEnd: [number, number] = [
+        node.start[0] + dirX * newLength,
+        node.start[1] + dirZ * newLength,
+      ]
+
+      handleUpdate({ end: newEnd })
+    },
+    [node, handleUpdate],
+  )
+
+  const handleClose = useCallback(() => {
+    setSelection({ selectedIds: [] })
+  }, [setSelection])
+
+  const handleMove = useCallback(() => {
+    if (!node) return
+    sfxEmitter.emit('sfx:item-pick')
+    setMovingNode(node)
+    setSelection({ selectedIds: [] })
+  }, [node, setMovingNode, setSelection])
+
+  const handleCurve = useCallback(() => {
+    if (!node) return
+    sfxEmitter.emit('sfx:item-pick')
+    setCurvingFence(node)
+    setSelection({ selectedIds: [] })
+  }, [node, setCurvingFence, setSelection])
+
+  const handleMaterialPresetChange = useCallback(
+    (materialPreset: string) => {
+      handleUpdate({ materialPreset, material: undefined })
+    },
+    [handleUpdate],
+  )
+
+  const handleCustomMaterialChange = useCallback(
+    (material: MaterialSchema) => {
+      handleUpdate({ material, materialPreset: undefined })
+    },
+    [handleUpdate],
+  )
+
+  if (!(node && node.type === 'fence' && selectedId && selectedCount === 1)) return null
+
+  const length = getWallCurveLength(node)
+  const curveOffset = getClampedWallCurveOffset(node)
+  const maxCurveOffset = getMaxWallCurveOffset(node)
+
+  return (
+    <PanelWrapper
+      icon="/icons/build.png"
+      onClose={handleClose}
+      title={node.name || 'Fence'}
+      width={300}
+    >
+      <PanelSection title="Style">
+        <SegmentedControl
+          onChange={(value) => handleUpdate({ style: value })}
+          options={FENCE_STYLE_OPTIONS}
+          value={node.style}
+        />
+        <SegmentedControl
+          className="mt-2"
+          onChange={(value) => handleUpdate({ baseStyle: value })}
+          options={FENCE_BASE_STYLE_OPTIONS}
+          value={node.baseStyle}
+        />
+      </PanelSection>
+
+      <PanelSection title="Dimensions">
+        <SliderControl
+          label="Length"
+          max={50}
+          min={0.1}
+          onChange={handleUpdateLength}
+          precision={2}
+          step={0.01}
+          unit="m"
+          value={length}
+        />
+        <SliderControl
+          label="Curve"
+          max={Math.max(0.01, maxCurveOffset)}
+          min={-Math.max(0.01, maxCurveOffset)}
+          onChange={(value) => handleUpdate({ curveOffset: normalizeWallCurveOffset(node, value) })}
+          precision={2}
+          step={0.1}
+          unit="m"
+          value={Math.round(curveOffset * 100) / 100}
+        />
+        <SliderControl
+          label="Height"
+          max={4}
+          min={0.4}
+          onChange={(value) => handleUpdate({ height: Math.max(0.4, value) })}
+          precision={2}
+          step={0.05}
+          unit="m"
+          value={node.height}
+        />
+        <SliderControl
+          label="Thickness"
+          max={0.5}
+          min={0.03}
+          onChange={(value) => handleUpdate({ thickness: Math.max(0.03, value) })}
+          precision={3}
+          step={0.005}
+          unit="m"
+          value={node.thickness}
+        />
+      </PanelSection>
+
+      <PanelSection title="Structure">
+        <SliderControl
+          label="Base Height"
+          max={1}
+          min={0.04}
+          onChange={(value) => handleUpdate({ baseHeight: Math.max(0.04, value) })}
+          precision={3}
+          step={0.01}
+          unit="m"
+          value={node.baseHeight}
+        />
+        <SliderControl
+          label="Top Rail"
+          max={0.25}
+          min={0.01}
+          onChange={(value) => handleUpdate({ topRailHeight: Math.max(0.01, value) })}
+          precision={3}
+          step={0.005}
+          unit="m"
+          value={node.topRailHeight}
+        />
+        <SliderControl
+          label="Post Spacing"
+          max={5}
+          min={0.2}
+          onChange={(value) => handleUpdate({ postSpacing: Math.max(0.2, value) })}
+          precision={2}
+          step={0.05}
+          unit="m"
+          value={node.postSpacing}
+        />
+        <SliderControl
+          label="Post Size"
+          max={0.4}
+          min={0.01}
+          onChange={(value) => handleUpdate({ postSize: Math.max(0.01, value) })}
+          precision={3}
+          step={0.005}
+          unit="m"
+          value={node.postSize}
+        />
+        <SliderControl
+          label="Ground Clear"
+          max={0.6}
+          min={0}
+          onChange={(value) => handleUpdate({ groundClearance: Math.max(0, value) })}
+          precision={3}
+          step={0.005}
+          unit="m"
+          value={node.groundClearance}
+        />
+        <SliderControl
+          label="Edge Inset"
+          max={0.25}
+          min={0.005}
+          onChange={(value) => handleUpdate({ edgeInset: Math.max(0.005, value) })}
+          precision={3}
+          step={0.005}
+          unit="m"
+          value={node.edgeInset}
+        />
+      </PanelSection>
+
+      <PanelSection title="Material">
+        <MaterialPicker
+          nodeType="fence"
+          onChange={handleCustomMaterialChange}
+          onSelectMaterialPreset={handleMaterialPresetChange}
+          selectedMaterialPreset={node.materialPreset}
+          value={node.material}
+        />
+      </PanelSection>
+
+      <PanelSection title="Actions">
+        <ActionGroup>
+          <ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />
+          <ActionButton
+            icon={<Spline className="h-3.5 w-3.5" />}
+            label="Curve"
+            onClick={handleCurve}
+          />
+        </ActionGroup>
+      </PanelSection>
+    </PanelWrapper>
+  )
+}

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

@@ -14,15 +14,15 @@ import { CollectionsPopover } from './collections/collections-popover'
 import { PanelWrapper } from './panel-wrapper'
 
 export function ItemPanel() {
-  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const selectedId = useViewer((s) => s.selection.selectedIds[0])
   const setSelection = useViewer((s) => s.setSelection)
-  const nodes = useScene((s) => s.nodes)
   const updateNode = useScene((s) => s.updateNode)
   const deleteNode = useScene((s) => s.deleteNode)
   const setMovingNode = useEditor((s) => s.setMovingNode)
 
-  const selectedId = selectedIds[0]
-  const node = selectedId ? (nodes[selectedId as AnyNode['id']] as ItemNode | undefined) : undefined
+  const node = useScene((s) =>
+    selectedId ? (s.nodes[selectedId as AnyNode['id']] as ItemNode | undefined) : undefined,
+  )
 
   const [uniformScale, setUniformScale] = useState(true)
 
@@ -75,7 +75,7 @@ export function ItemPanel() {
     setSelection({ selectedIds: [] })
   }, [selectedId, deleteNode, setSelection])
 
-  if (!node || node.type !== 'item' || selectedIds.length !== 1) return null
+  if (!(node && node.type === 'item' && selectedId)) return null
 
   return (
     <PanelWrapper

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

@@ -5,6 +5,7 @@ import { useViewer } from '@pascal-app/viewer'
 import useEditor from '../../../store/use-editor'
 import { CeilingPanel } from './ceiling-panel'
 import { DoorPanel } from './door-panel'
+import { FencePanel } from './fence-panel'
 import { ItemPanel } from './item-panel'
 import { ReferencePanel } from './reference-panel'
 import { RoofPanel } from './roof-panel'
@@ -18,7 +19,13 @@ import { WindowPanel } from './window-panel'
 export function PanelManager() {
   const selectedIds = useViewer((s) => s.selection.selectedIds)
   const selectedReferenceId = useEditor((s) => s.selectedReferenceId)
-  const nodes = useScene((s) => s.nodes)
+  // Only subscribe to the *type* of the single-selected node — string primitive
+  // so we don't re-render on unrelated scene mutations.
+  const selectedNodeType = useScene((s) => {
+    if (selectedIds.length !== 1) return null
+    const id = selectedIds[0]
+    return id ? (s.nodes[id as AnyNodeId]?.type ?? null) : null
+  })
 
   // Show reference panel if a reference is selected
   if (selectedReferenceId) {
@@ -26,32 +33,30 @@ export function PanelManager() {
   }
 
   // Show appropriate panel based on selected node type
-  if (selectedIds.length === 1) {
-    const selectedNode = selectedIds[0]
-    const node = nodes[selectedNode as AnyNodeId]
-    if (node) {
-      switch (node.type) {
-        case 'item':
-          return <ItemPanel />
-        case 'roof':
-          return <RoofPanel />
-        case 'roof-segment':
-          return <RoofSegmentPanel />
-        case 'stair':
-          return <StairPanel />
-        case 'stair-segment':
-          return <StairSegmentPanel />
-        case 'slab':
-          return <SlabPanel />
-        case 'ceiling':
-          return <CeilingPanel />
-        case 'wall':
-          return <WallPanel />
-        case 'door':
-          return <DoorPanel />
-        case 'window':
-          return <WindowPanel />
-      }
+  if (selectedNodeType) {
+    switch (selectedNodeType) {
+      case 'item':
+        return <ItemPanel />
+      case 'roof':
+        return <RoofPanel />
+      case 'roof-segment':
+        return <RoofSegmentPanel />
+      case 'stair':
+        return <StairPanel />
+      case 'stair-segment':
+        return <StairSegmentPanel />
+      case 'slab':
+        return <SlabPanel />
+      case 'ceiling':
+        return <CeilingPanel />
+      case 'wall':
+        return <WallPanel />
+      case 'fence':
+        return <FencePanel />
+      case 'door':
+        return <DoorPanel />
+      case 'window':
+        return <WindowPanel />
     }
   }
 

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

@@ -15,12 +15,13 @@ type ReferenceNode = ScanNode | GuideNode
 export function ReferencePanel() {
   const selectedReferenceId = useEditor((s) => s.selectedReferenceId)
   const setSelectedReferenceId = useEditor((s) => s.setSelectedReferenceId)
-  const nodes = useScene((s) => s.nodes)
   const updateNode = useScene((s) => s.updateNode)
 
-  const node = selectedReferenceId
-    ? (nodes[selectedReferenceId as AnyNode['id']] as ReferenceNode | undefined)
-    : undefined
+  const node = useScene((s) =>
+    selectedReferenceId
+      ? (s.nodes[selectedReferenceId as AnyNode['id']] as ReferenceNode | undefined)
+      : undefined,
+  )
 
   const handleUpdate = useCallback(
     (updates: Partial<ReferenceNode>) => {

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

@@ -3,8 +3,10 @@
 import {
   type AnyNode,
   type AnyNodeId,
+  getEffectiveRoofSurfaceMaterial,
   type MaterialSchema,
   type RoofNode,
+  type RoofSurfaceMaterialRole,
   RoofNode as RoofNodeSchema,
   type RoofSegmentNode,
   RoofSegmentNode as RoofSegmentNodeSchema,
@@ -13,25 +15,61 @@ import {
 import { useViewer } from '@pascal-app/viewer'
 import { Copy, Move, Plus, Trash2 } from 'lucide-react'
 import { useCallback } from 'react'
+import { useShallow } from 'zustand/react/shallow'
 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'
 
+function buildRoofSurfaceMaterialPatch(
+  node: RoofNode,
+  targetRole: RoofSurfaceMaterialRole,
+  material: MaterialSchema | undefined,
+  materialPreset: string | undefined,
+): Partial<RoofNode> {
+  const nextSurfaceMaterial = { material, materialPreset }
+  const nextTop =
+    targetRole === 'top' ? nextSurfaceMaterial : getEffectiveRoofSurfaceMaterial(node, 'top')
+  const nextEdge =
+    targetRole === 'edge' ? nextSurfaceMaterial : getEffectiveRoofSurfaceMaterial(node, 'edge')
+  const nextWall =
+    targetRole === 'wall' ? nextSurfaceMaterial : getEffectiveRoofSurfaceMaterial(node, 'wall')
+
+  return {
+    topMaterial: nextTop.material,
+    topMaterialPreset: nextTop.materialPreset,
+    edgeMaterial: nextEdge.material,
+    edgeMaterialPreset: nextEdge.materialPreset,
+    wallMaterial: nextWall.material,
+    wallMaterialPreset: nextWall.materialPreset,
+    material: undefined,
+    materialPreset: undefined,
+  }
+}
+
 export function RoofPanel() {
-  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const selectedId = useViewer((s) => s.selection.selectedIds[0])
   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 selectedMaterialTarget = useEditor((s) => s.selectedMaterialTarget)
 
-  const selectedId = selectedIds[0]
-  const node = selectedId ? (nodes[selectedId as AnyNode['id']] as RoofNode | undefined) : undefined
+  const node = useScene((s) =>
+    selectedId ? (s.nodes[selectedId as AnyNode['id']] as RoofNode | undefined) : undefined,
+  )
+  // Shallow selector — only re-renders when the segment list content changes.
+  const segments = useScene(
+    useShallow((s) => {
+      if (!node) return []
+      return (node.children ?? [])
+        .map((childId) => s.nodes[childId as AnyNodeId] as RoofSegmentNode | undefined)
+        .filter((n): n is RoofSegmentNode => n?.type === 'roof-segment')
+    }),
+  )
 
   const handleUpdate = useCallback(
     (updates: Partial<RoofNode>) => {
@@ -41,11 +79,31 @@ export function RoofPanel() {
     [selectedId, updateNode],
   )
 
-  const handleMaterialChange = useCallback(
+  const materialTargetRole =
+    selectedMaterialTarget &&
+    selectedMaterialTarget.nodeId === node?.id &&
+    (selectedMaterialTarget.role === 'top' ||
+      selectedMaterialTarget.role === 'edge' ||
+      selectedMaterialTarget.role === 'wall')
+      ? selectedMaterialTarget.role
+      : null
+  const materialPickerValue =
+    node && materialTargetRole ? getEffectiveRoofSurfaceMaterial(node, materialTargetRole) : {}
+
+  const handleTargetedMaterialChange = useCallback(
     (material: MaterialSchema) => {
-      handleUpdate({ material })
+      if (!node || !materialTargetRole) return
+      handleUpdate(buildRoofSurfaceMaterialPatch(node, materialTargetRole, material, undefined))
     },
-    [handleUpdate],
+    [handleUpdate, materialTargetRole, node],
+  )
+
+  const handleTargetedMaterialPresetChange = useCallback(
+    (materialPreset: string) => {
+      if (!node || !materialTargetRole) return
+      handleUpdate(buildRoofSurfaceMaterialPatch(node, materialTargetRole, undefined, materialPreset))
+    },
+    [handleUpdate, materialTargetRole, node],
   )
 
   const handleClose = useCallback(() => {
@@ -131,11 +189,7 @@ export function RoofPanel() {
     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')
+  if (!(node && node.type === 'roof' && selectedId)) return null
 
   return (
     <PanelWrapper
@@ -158,15 +212,17 @@ export function RoofPanel() {
             </button>
           ))}
         </div>
-        <ActionButton
-          icon={<Plus className="h-3.5 w-3.5" />}
-          label="Add Segment"
-          onClick={handleAddSegment}
-        />
+        <ActionGroup>
+          <ActionButton
+            icon={<Plus className="h-3.5 w-3.5" />}
+            label="Add Segment"
+            onClick={handleAddSegment}
+          />
+        </ActionGroup>
       </PanelSection>
 
       <PanelSection title="Position">
-        <MetricControl
+        <SliderControl
           label="X"
           max={50}
           min={-50}
@@ -180,7 +236,7 @@ export function RoofPanel() {
           unit="m"
           value={Math.round(node.position[0] * 100) / 100}
         />
-        <MetricControl
+        <SliderControl
           label="Y"
           max={50}
           min={-50}
@@ -194,7 +250,7 @@ export function RoofPanel() {
           unit="m"
           value={Math.round(node.position[1] * 100) / 100}
         />
-        <MetricControl
+        <SliderControl
           label="Z"
           max={50}
           min={-50}
@@ -255,7 +311,20 @@ export function RoofPanel() {
         </ActionGroup>
       </PanelSection>
       <PanelSection title="Material">
-        <MaterialPicker onChange={handleMaterialChange} value={node.material} />
+        {!materialTargetRole ? (
+          <div className="mb-3 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-[11px] text-muted-foreground">
+            Click the roof surface you want to edit. Materials apply to one target at a time.
+          </div>
+        ) : null}
+        <MaterialPicker
+          disabled={!materialTargetRole}
+          hideSideControl
+          nodeType="roof"
+          onChange={handleTargetedMaterialChange}
+          onSelectMaterialPreset={handleTargetedMaterialPresetChange}
+          selectedMaterialPreset={materialPickerValue.materialPreset}
+          value={materialPickerValue.material}
+        />
       </PanelSection>
     </PanelWrapper>
   )