@pascal-app/editor 0.8.0 → 0.9.2

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

@@ -1,325 +0,0 @@
-'use client'
-
-import {
-  type AnyNode,
-  type AnyNodeId,
-  type AttachmentSide,
-  type StairSegmentNode,
-  StairSegmentNode as StairSegmentNodeSchema,
-  type StairSegmentType,
-  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 { PanelSection } from '../controls/panel-section'
-import { SegmentedControl } from '../controls/segmented-control'
-import { SliderControl } from '../controls/slider-control'
-import { PanelWrapper } from './panel-wrapper'
-
-const SEGMENT_TYPE_OPTIONS: { label: string; value: StairSegmentType }[] = [
-  { label: 'Flight', value: 'stair' },
-  { label: 'Landing', value: 'landing' },
-]
-
-const ATTACHMENT_SIDE_OPTIONS: { label: string; value: AttachmentSide }[] = [
-  { label: 'Front', value: 'front' },
-  { label: 'Left', value: 'left' },
-  { label: 'Right', value: 'right' },
-]
-
-export function StairSegmentPanel() {
-  const selectedId = useViewer((s) => s.selection.selectedIds[0])
-  const setSelection = useViewer((s) => s.setSelection)
-  const updateNode = useScene((s) => s.updateNode)
-  const setMovingNode = useEditor((s) => s.setMovingNode)
-
-  const node = useScene((s) =>
-    selectedId ? (s.nodes[selectedId as AnyNode['id']] as StairSegmentNode | undefined) : undefined,
-  )
-
-  // Boolean selector — re-renders only when this segment's position among the
-  // parent stair's children flips to/from "first".
-  const isFirstSegment = useScene((s) => {
-    if (!node?.parentId) return true
-    const parent = s.nodes[node.parentId as AnyNodeId]
-    if (!parent || parent.type !== 'stair') return true
-    const children = (parent as any).children ?? []
-    return children[0] === node.id
-  })
-
-  const handleUpdate = useCallback(
-    (updates: Partial<StairSegmentNode>) => {
-      if (!selectedId) return
-      updateNode(selectedId as AnyNode['id'], updates)
-    },
-    [selectedId, updateNode],
-  )
-
-  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 }
-    duplicateInfo.position = [
-      duplicateInfo.position[0] + 1,
-      duplicateInfo.position[1],
-      duplicateInfo.position[2] + 1,
-    ]
-
-    try {
-      const duplicate = StairSegmentNodeSchema.parse(duplicateInfo)
-      useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
-      setSelection({ selectedIds: [] })
-      setMovingNode(duplicate)
-    } catch (e) {
-      console.error('Failed to duplicate stair 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 === 'stair-segment' && selectedId)) return null
-
-  return (
-    <PanelWrapper
-      icon="/icons/stairs.png"
-      onBack={handleBack}
-      onClose={handleClose}
-      title={node.name || 'Stair Segment'}
-      width={300}
-    >
-      <PanelSection title="Type">
-        <SegmentedControl
-          onChange={(v) => {
-            const updates: Partial<StairSegmentNode> = { segmentType: v }
-            if (v === 'landing') {
-              updates.height = 0
-              updates.stepCount = 0
-              updates.length = 1.0
-            } else {
-              updates.height = 2.5
-              updates.stepCount = 10
-              updates.length = 3.0
-            }
-            handleUpdate(updates)
-          }}
-          options={SEGMENT_TYPE_OPTIONS}
-          value={node.segmentType}
-        />
-      </PanelSection>
-
-      {!isFirstSegment && (
-        <PanelSection title="Attachment">
-          <SegmentedControl
-            onChange={(v) => handleUpdate({ attachmentSide: v })}
-            options={ATTACHMENT_SIDE_OPTIONS}
-            value={node.attachmentSide}
-          />
-        </PanelSection>
-      )}
-
-      <PanelSection title="Dimensions">
-        <SliderControl
-          label="Width"
-          max={5}
-          min={0.5}
-          onChange={(v) => handleUpdate({ width: v })}
-          precision={2}
-          step={0.1}
-          unit="m"
-          value={Math.round(node.width * 100) / 100}
-        />
-        <SliderControl
-          label="Length"
-          max={10}
-          min={0.5}
-          onChange={(v) => handleUpdate({ length: v })}
-          precision={2}
-          step={0.1}
-          unit="m"
-          value={Math.round(node.length * 100) / 100}
-        />
-        {node.segmentType === 'stair' && (
-          <>
-            <SliderControl
-              label="Height"
-              max={10}
-              min={0.5}
-              onChange={(v) => handleUpdate({ height: v })}
-              precision={2}
-              step={0.1}
-              unit="m"
-              value={Math.round(node.height * 100) / 100}
-            />
-            <SliderControl
-              label="Steps"
-              max={30}
-              min={2}
-              onChange={(v) => handleUpdate({ stepCount: Math.round(v) })}
-              precision={0}
-              step={1}
-              unit=""
-              value={node.stepCount}
-            />
-          </>
-        )}
-      </PanelSection>
-
-      <PanelSection title="Structure">
-        <div className="flex items-center justify-between px-1 py-1">
-          <span className="text-muted-foreground text-xs">Fill to floor</span>
-          <button
-            className={`relative h-5 w-10 rounded-full transition-colors ${
-              node.fillToFloor ? 'bg-blue-500' : 'bg-[#3e3e3e]'
-            }`}
-            onClick={() => handleUpdate({ fillToFloor: !node.fillToFloor })}
-            type="button"
-          >
-            <div
-              className={`absolute top-1 h-3 w-3 rounded-full bg-white transition-transform ${
-                node.fillToFloor ? 'left-6' : 'left-1'
-              }`}
-            />
-          </button>
-        </div>
-        {!node.fillToFloor && (
-          <SliderControl
-            label="Thickness"
-            max={1}
-            min={0.05}
-            onChange={(v) => handleUpdate({ thickness: v })}
-            precision={2}
-            step={0.05}
-            unit="m"
-            value={Math.round((node.thickness ?? 0.25) * 100) / 100}
-          />
-        )}
-      </PanelSection>
-
-      <PanelSection title="Position">
-        <SliderControl
-          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}
-        />
-        <SliderControl
-          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}
-        />
-        <SliderControl
-          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>
-    </PanelWrapper>
-  )
-}

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

@@ -1,273 +0,0 @@
-'use client'
-
-import {
-  type AnyNode,
-  type AnyNodeId,
-  getClampedWallCurveOffset,
-  getEffectiveWallSurfaceMaterial,
-  getMaxWallCurveOffset,
-  getWallCurveLength,
-  getWallSurfaceMaterialSignature,
-  type MaterialSchema,
-  normalizeWallCurveOffset,
-  useScene,
-  type WallNode,
-  type WallSurfaceSide,
-} from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
-import { Move, Spline } from 'lucide-react'
-import { useCallback, useMemo } 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 { SliderControl } from '../controls/slider-control'
-import { PanelWrapper } from './panel-wrapper'
-
-function buildWallSurfaceMaterialPatch(
-  node: WallNode,
-  targetSide: WallSurfaceSide | null,
-  material: MaterialSchema | undefined,
-  materialPreset: string | undefined,
-): Partial<WallNode> {
-  const nextSurfaceMaterial = { material, materialPreset }
-  const nextInterior =
-    targetSide === null || targetSide === 'interior'
-      ? nextSurfaceMaterial
-      : getEffectiveWallSurfaceMaterial(node, 'interior')
-  const nextExterior =
-    targetSide === null || targetSide === 'exterior'
-      ? nextSurfaceMaterial
-      : getEffectiveWallSurfaceMaterial(node, 'exterior')
-
-  return {
-    interiorMaterial: nextInterior.material,
-    interiorMaterialPreset: nextInterior.materialPreset,
-    exteriorMaterial: nextExterior.material,
-    exteriorMaterialPreset: nextExterior.materialPreset,
-    material: undefined,
-    materialPreset: undefined,
-  }
-}
-
-export function WallPanel() {
-  const selectedId = useViewer((s) => s.selection.selectedIds[0])
-  const setSelection = useViewer((s) => s.setSelection)
-  const updateNode = useScene((s) => s.updateNode)
-  const setMovingNode = useEditor((s) => s.setMovingNode)
-  const setCurvingWall = useEditor((s) => s.setCurvingWall)
-  const selectedMaterialTarget = useEditor((s) => s.selectedMaterialTarget)
-
-  const node = useScene((s) =>
-    selectedId ? (s.nodes[selectedId as AnyNode['id']] as WallNode | undefined) : undefined,
-  )
-
-  // Boolean selector — re-renders only when this specific wall's child
-  // composition crosses the "has a door/window/wall-item" threshold.
-  const hasWallChildrenBlockingCurve = useScene((s) => {
-    if (!node) return false
-    return (node.children ?? []).some((childId) => {
-      const child = s.nodes[childId as AnyNodeId]
-      if (!child) return false
-      if (child.type === 'door' || child.type === 'window') return true
-      if (child.type === 'item') {
-        const attachTo = child.asset?.attachTo
-        return attachTo === 'wall' || attachTo === 'wall-side'
-      }
-      return false
-    })
-  })
-
-  const handleUpdate = useCallback(
-    (updates: Partial<WallNode>) => {
-      if (!selectedId) return
-      updateNode(selectedId as AnyNode['id'], updates)
-      useScene.getState().dirtyNodes.add(selectedId as AnyNodeId)
-    },
-    [selectedId, updateNode],
-  )
-
-  const effectiveInteriorMaterial = useMemo(
-    () => (node ? getEffectiveWallSurfaceMaterial(node, 'interior') : {}),
-    [node],
-  )
-  const effectiveExteriorMaterial = useMemo(
-    () => (node ? getEffectiveWallSurfaceMaterial(node, 'exterior') : {}),
-    [node],
-  )
-  const surfaceMaterialsMatch = useMemo(
-    () =>
-      getWallSurfaceMaterialSignature(effectiveInteriorMaterial) ===
-      getWallSurfaceMaterialSignature(effectiveExteriorMaterial),
-    [effectiveExteriorMaterial, effectiveInteriorMaterial],
-  )
-  const materialTargetSide =
-    selectedMaterialTarget &&
-    selectedMaterialTarget.nodeId === node?.id &&
-    (selectedMaterialTarget.role === 'interior' || selectedMaterialTarget.role === 'exterior')
-      ? selectedMaterialTarget.role
-      : null
-  const materialPickerValue =
-    materialTargetSide === 'interior'
-      ? effectiveInteriorMaterial
-      : materialTargetSide === 'exterior'
-        ? effectiveExteriorMaterial
-        : surfaceMaterialsMatch
-          ? effectiveInteriorMaterial
-          : {}
-
-  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 handleMaterialPresetChange = useCallback(
-    (materialPreset: string) => {
-      if (!(node && materialTargetSide)) return
-      handleUpdate(
-        buildWallSurfaceMaterialPatch(node, materialTargetSide, undefined, materialPreset),
-      )
-    },
-    [handleUpdate, materialTargetSide, node],
-  )
-
-  const handleCustomMaterialChange = useCallback(
-    (material: MaterialSchema) => {
-      if (!(node && materialTargetSide)) return
-      handleUpdate(buildWallSurfaceMaterialPatch(node, materialTargetSide, material, undefined))
-    },
-    [handleUpdate, materialTargetSide, node],
-  )
-
-  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')
-    setCurvingWall(node)
-    setSelection({ selectedIds: [] })
-  }, [node, setCurvingWall, setSelection])
-
-  if (!(node && node.type === 'wall' && selectedId)) return null
-
-  const dx = node.end[0] - node.start[0]
-  const dz = node.end[1] - node.start[1]
-  const length = getWallCurveLength(node)
-
-  const height = node.height ?? 2.5
-  const thickness = node.thickness ?? 0.1
-  const curveOffset = getClampedWallCurveOffset(node)
-  const maxCurveOffset = getMaxWallCurveOffset(node)
-
-  return (
-    <PanelWrapper
-      icon="/icons/wall.png"
-      onClose={handleClose}
-      title={node.name || 'Wall'}
-      width={280}
-    >
-      <PanelSection title="Dimensions">
-        <SliderControl
-          label="Length"
-          max={20}
-          min={0.1}
-          onChange={handleUpdateLength}
-          precision={2}
-          step={0.01}
-          unit="m"
-          value={length}
-        />
-        <SliderControl
-          label="Height"
-          max={6}
-          min={0.1}
-          onChange={(v) => handleUpdate({ height: Math.max(0.1, v) })}
-          precision={2}
-          step={0.1}
-          unit="m"
-          value={Math.round(height * 100) / 100}
-        />
-        <SliderControl
-          label="Thickness"
-          max={1}
-          min={0.05}
-          onChange={(v) => handleUpdate({ thickness: Math.max(0.05, v) })}
-          precision={3}
-          step={0.01}
-          unit="m"
-          value={Math.round(thickness * 1000) / 1000}
-        />
-        {!hasWallChildrenBlockingCurve && (
-          <SliderControl
-            label="Curve"
-            max={Math.max(0.01, maxCurveOffset)}
-            min={-Math.max(0.01, maxCurveOffset)}
-            onChange={(v) => handleUpdate({ curveOffset: normalizeWallCurveOffset(node, v) })}
-            precision={2}
-            step={0.1}
-            unit="m"
-            value={Math.round(curveOffset * 100) / 100}
-          />
-        )}
-      </PanelSection>
-
-      <PanelSection title="Material">
-        {materialTargetSide ? null : (
-          <div className="mb-3 rounded-lg border border-border/50 bg-[#2C2C2E] px-3 py-2 text-[11px] text-muted-foreground">
-            Click the wall face you want to edit. Materials now apply to one side at a time.
-          </div>
-        )}
-        <MaterialPicker
-          disabled={!materialTargetSide}
-          hideSideControl
-          nodeType="wall"
-          onChange={handleCustomMaterialChange}
-          onSelectMaterialPreset={handleMaterialPresetChange}
-          selectedMaterialPreset={materialPickerValue.materialPreset}
-          value={materialPickerValue.material}
-        />
-      </PanelSection>
-
-      <PanelSection title="Actions">
-        <ActionGroup>
-          <ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />
-          {!hasWallChildrenBlockingCurve && (
-            <ActionButton
-              icon={<Spline className="h-3.5 w-3.5" />}
-              label="Curve"
-              onClick={handleCurve}
-            />
-          )}
-        </ActionGroup>
-      </PanelSection>
-    </PanelWrapper>
-  )
-}