@pascal-app/editor 0.5.1 → 0.7.0

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

@@ -1,26 +1,53 @@
 'use client'
 
-import { type AnyNode, type GuideNode, type ScanNode, useScene } from '@pascal-app/core'
-import { Box, Image as ImageIcon } from 'lucide-react'
-import { useCallback } from 'react'
+import {
+  type AnyNode,
+  type GuideNode,
+  loadAssetUrl,
+  saveAsset,
+  type ScanNode,
+  useScene,
+} from '@pascal-app/core'
+import { Eye, EyeOff, LocateFixed, Lock, RotateCcw, Ruler, Trash2, Unlock, Upload } from 'lucide-react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { guideEmitter } from '../../../lib/guide-events'
+import { getGuideImageName } from '../../../lib/local-guide-image'
 import useEditor from '../../../store/use-editor'
 import { ActionButton, ActionGroup } from '../controls/action-button'
-import { MetricControl } from '../controls/metric-control'
 import { PanelSection } from '../controls/panel-section'
 import { SliderControl } from '../controls/slider-control'
 import { PanelWrapper } from './panel-wrapper'
 
 type ReferenceNode = ScanNode | GuideNode
 
+function getScaleStatus(guide: GuideNode, scaleReferenceVisible: boolean) {
+  const reference = guide.scaleReference
+  if (!reference) {
+    return 'Uncalibrated'
+  }
+
+  return `${scaleReferenceVisible ? 'Scaled' : 'Scaled (hidden)'} · ${reference.label}`
+}
+
 export function ReferencePanel() {
   const selectedReferenceId = useEditor((s) => s.selectedReferenceId)
   const setSelectedReferenceId = useEditor((s) => s.setSelectedReferenceId)
-  const nodes = useScene((s) => s.nodes)
+  const guideUi = useEditor((s) => (selectedReferenceId ? s.guideUi[selectedReferenceId] : undefined))
+  const setGuideLocked = useEditor((s) => s.setGuideLocked)
+  const setGuideScaleReferenceVisible = useEditor((s) => s.setGuideScaleReferenceVisible)
+  const clearGuideUi = useEditor((s) => s.clearGuideUi)
   const updateNode = useScene((s) => s.updateNode)
+  const deleteNode = useScene((s) => s.deleteNode)
+  const replaceInputRef = useRef<HTMLInputElement>(null)
+  const [isReplacing, setIsReplacing] = useState(false)
+  const [replaceError, setReplaceError] = useState<string | null>(null)
+  const [isAssetMissing, setIsAssetMissing] = useState(false)
 
-  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>) => {
@@ -34,17 +61,224 @@ export function ReferencePanel() {
     setSelectedReferenceId(null)
   }, [setSelectedReferenceId])
 
+  const handleReplaceFile = useCallback(
+    async (file: File) => {
+      if (!(selectedReferenceId && node?.type === 'guide')) {
+        return
+      }
+
+      if (!file.type.startsWith('image/')) {
+        setReplaceError('Choose a PNG, JPEG, or WebP image.')
+        return
+      }
+
+      setIsReplacing(true)
+      setReplaceError(null)
+
+      try {
+        const assetUrl = await saveAsset(file)
+        updateNode(selectedReferenceId as AnyNode['id'], {
+          name: getGuideImageName(file.name),
+          url: assetUrl,
+          scaleReference: null,
+        } as Partial<GuideNode>)
+        setGuideScaleReferenceVisible(selectedReferenceId, true)
+      } catch {
+        setReplaceError('Could not replace that image.')
+      } finally {
+        setIsReplacing(false)
+      }
+    },
+    [node?.type, selectedReferenceId, setGuideScaleReferenceVisible, updateNode],
+  )
+
+  const handleDeleteGuide = useCallback(() => {
+    if (!(selectedReferenceId && node?.type === 'guide')) {
+      return
+    }
+
+    deleteNode(selectedReferenceId as AnyNode['id'])
+    guideEmitter.emit('guide:deleted', { guideId: selectedReferenceId as GuideNode['id'] })
+    clearGuideUi(selectedReferenceId)
+    setSelectedReferenceId(null)
+  }, [clearGuideUi, deleteNode, node?.type, selectedReferenceId, setSelectedReferenceId])
+
+  const handleStartScale = useCallback(() => {
+    if (node?.type !== 'guide') {
+      return
+    }
+
+    guideEmitter.emit('guide:set-reference-scale', { guideId: node.id })
+  }, [node])
+
+  const handleCancelScale = useCallback(() => {
+    guideEmitter.emit('guide:cancel-reference-scale')
+  }, [])
+
+  useEffect(() => {
+    if (node?.type !== 'guide' || !node.url.startsWith('asset://')) {
+      setIsAssetMissing(false)
+      return
+    }
+
+    let cancelled = false
+    loadAssetUrl(node.url).then((resolvedUrl) => {
+      if (!cancelled) {
+        setIsAssetMissing(!resolvedUrl)
+      }
+    })
+
+    return () => {
+      cancelled = true
+    }
+  }, [node])
+
   if (!node || (node.type !== 'scan' && node.type !== 'guide')) return null
 
   const isScan = node.type === 'scan'
+  const guideLocked = !isScan && guideUi?.locked === true
+  const scaleReferenceVisible = !isScan && guideUi?.scaleReferenceVisible !== false
+  const scaleStatus = !isScan ? getScaleStatus(node, scaleReferenceVisible) : null
 
   return (
     <PanelWrapper
-      icon={isScan ? undefined : undefined}
       onClose={handleClose}
       title={node.name || (isScan ? '3D Scan' : 'Guide Image')}
       width={300}
     >
+      {!isScan && (
+        <>
+          <PanelSection title="Image">
+            <input
+              accept="image/*"
+              className="hidden"
+              onChange={(event) => {
+                const file = event.currentTarget.files?.[0]
+                event.currentTarget.value = ''
+                if (file) {
+                  void handleReplaceFile(file)
+                }
+              }}
+              ref={replaceInputRef}
+              type="file"
+            />
+
+            <ActionGroup>
+              <ActionButton
+                icon={<Upload className="h-3.5 w-3.5" />}
+                label={isReplacing ? 'Replacing...' : 'Replace'}
+                onClick={() => replaceInputRef.current?.click()}
+                disabled={isReplacing}
+              />
+              <ActionButton
+                icon={<Trash2 className="h-3.5 w-3.5" />}
+                label="Delete"
+                onClick={handleDeleteGuide}
+                className="text-destructive hover:bg-destructive/10"
+              />
+            </ActionGroup>
+
+            <ActionGroup>
+              <ActionButton
+                icon={
+                  node.visible === false ? (
+                    <EyeOff className="h-3.5 w-3.5" />
+                  ) : (
+                    <Eye className="h-3.5 w-3.5" />
+                  )
+                }
+                label={node.visible === false ? 'Show' : 'Hide'}
+                onClick={() => handleUpdate({ visible: node.visible === false })}
+              />
+              <ActionButton
+                icon={
+                  guideLocked ? (
+                    <Lock className="h-3.5 w-3.5" />
+                  ) : (
+                    <Unlock className="h-3.5 w-3.5" />
+                  )
+                }
+                label={guideLocked ? 'Unlock' : 'Lock'}
+                onClick={() => setGuideLocked(node.id, !guideLocked)}
+              />
+            </ActionGroup>
+
+            {replaceError && (
+              <div className="rounded-md border border-destructive/30 bg-destructive/10 px-2 py-1.5 text-destructive text-xs">
+                {replaceError}
+              </div>
+            )}
+
+            {isAssetMissing && (
+              <div className="rounded-md border border-amber-500/35 bg-amber-500/10 px-2 py-1.5 text-amber-700 text-xs dark:text-amber-300">
+                Overlay image unavailable. Replace the image to restore it.
+              </div>
+            )}
+          </PanelSection>
+
+          <PanelSection title="Reference Scale">
+            <div className="flex items-center gap-2 rounded-md border border-border/50 bg-background/40 px-2.5 py-2 text-sm">
+              <Ruler className="h-4 w-4 shrink-0 text-primary" />
+              <span className="truncate text-muted-foreground">{scaleStatus}</span>
+            </div>
+
+            <ActionGroup>
+              <ActionButton
+                label={node.scaleReference ? 'Edit Scale' : 'Set Scale'}
+                onClick={handleStartScale}
+              />
+              <ActionButton label="Cancel" onClick={handleCancelScale} />
+            </ActionGroup>
+
+            <ActionGroup>
+              <ActionButton
+                label={scaleReferenceVisible ? 'Hide Scale' : 'Show Scale'}
+                disabled={!node.scaleReference}
+                onClick={() => {
+                  if (!node.scaleReference) return
+                  setGuideScaleReferenceVisible(node.id, !scaleReferenceVisible)
+                }}
+              />
+              <ActionButton
+                label="Clear Scale"
+                disabled={!node.scaleReference}
+                onClick={() => handleUpdate({ scaleReference: null } as Partial<GuideNode>)}
+              />
+            </ActionGroup>
+          </PanelSection>
+
+          <PanelSection title="Quick Actions">
+            <ActionGroup>
+              <ActionButton
+                icon={<LocateFixed className="h-3.5 w-3.5" />}
+                label="Center"
+                onClick={() =>
+                  handleUpdate({
+                    position: [0, node.position[1], 0],
+                  } as Partial<GuideNode>)
+                }
+              />
+              <ActionButton
+                icon={<RotateCcw className="h-3.5 w-3.5" />}
+                label="Reset Rotation"
+                onClick={() =>
+                  handleUpdate({
+                    rotation: [node.rotation[0], 0, node.rotation[2]],
+                  } as Partial<GuideNode>)
+                }
+              />
+            </ActionGroup>
+            <ActionGroup>
+              <ActionButton
+                icon={<Ruler className="h-3.5 w-3.5" />}
+                label="Reset Image Scale"
+                onClick={() => handleUpdate({ scale: 1 } as Partial<GuideNode>)}
+              />
+            </ActionGroup>
+          </PanelSection>
+        </>
+      )}
+
       <PanelSection title="Position">
         <SliderControl
           label={

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

@@ -3,8 +3,8 @@
 import {
   type AnyNode,
   type AnyNodeId,
-  type MaterialSchema,
   type RoofNode,
+  type RoofSurfaceMaterialRole,
   RoofNode as RoofNodeSchema,
   type RoofSegmentNode,
   RoofSegmentNode as RoofSegmentNodeSchema,
@@ -13,25 +13,34 @@ 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 { duplicateRoofSubtree } from '../../../lib/roof-duplication'
 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 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 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,13 +50,6 @@ export function RoofPanel() {
     [selectedId, updateNode],
   )
 
-  const handleMaterialChange = useCallback(
-    (material: MaterialSchema) => {
-      handleUpdate({ material })
-    },
-    [handleUpdate],
-  )
-
   const handleClose = useCallback(() => {
     setSelection({ selectedIds: [] })
   }, [setSelection])
@@ -73,44 +75,15 @@ export function RoofPanel() {
   )
 
   const handleDuplicate = useCallback(() => {
-    if (!node?.parentId) return
+    if (!node) 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)
+      duplicateRoofSubtree(node.id as AnyNodeId, { mode: 'move' })
     } catch (e) {
       console.error('Failed to duplicate roof', e)
     }
-  }, [node, setSelection, setMovingNode])
+  }, [node])
 
   const handleMove = useCallback(() => {
     if (node) {
@@ -131,11 +104,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 +127,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 +151,7 @@ export function RoofPanel() {
           unit="m"
           value={Math.round(node.position[0] * 100) / 100}
         />
-        <MetricControl
+        <SliderControl
           label="Y"
           max={50}
           min={-50}
@@ -194,7 +165,7 @@ export function RoofPanel() {
           unit="m"
           value={Math.round(node.position[1] * 100) / 100}
         />
-        <MetricControl
+        <SliderControl
           label="Z"
           max={50}
           min={-50}
@@ -254,9 +225,6 @@ export function RoofPanel() {
           />
         </ActionGroup>
       </PanelSection>
-      <PanelSection title="Material">
-        <MaterialPicker onChange={handleMaterialChange} value={node.material} />
-      </PanelSection>
     </PanelWrapper>
   )
 }

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

@@ -3,7 +3,6 @@
 import {
   type AnyNode,
   type AnyNodeId,
-  type MaterialSchema,
   type RoofSegmentNode,
   RoofSegmentNode as RoofSegmentNodeSchema,
   type RoofType,
@@ -15,8 +14,6 @@ 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'
@@ -36,16 +33,14 @@ const ROOF_TYPE_OPTIONS_2: { label: string; value: RoofType }[] = [
 ]
 
 export function RoofSegmentPanel() {
-  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 setMovingNode = useEditor((s) => s.setMovingNode)
 
-  const selectedId = selectedIds[0]
-  const node = selectedId
-    ? (nodes[selectedId as AnyNode['id']] as RoofSegmentNode | undefined)
-    : undefined
+  const node = useScene((s) =>
+    selectedId ? (s.nodes[selectedId as AnyNode['id']] as RoofSegmentNode | undefined) : undefined,
+  )
 
   const handleUpdate = useCallback(
     (updates: Partial<RoofSegmentNode>) => {
@@ -55,13 +50,6 @@ export function RoofSegmentPanel() {
     [selectedId, updateNode],
   )
 
-  const handleMaterialChange = useCallback(
-    (material: MaterialSchema) => {
-      handleUpdate({ material })
-    },
-    [handleUpdate],
-  )
-
   const handleClose = useCallback(() => {
     setSelection({ selectedIds: [] })
   }, [setSelection])
@@ -117,7 +105,7 @@ export function RoofSegmentPanel() {
     }
   }, [selectedId, node, setSelection])
 
-  if (!node || node.type !== 'roof-segment' || selectedIds.length !== 1) return null
+  if (!(node && node.type === 'roof-segment' && selectedId)) return null
 
   return (
     <PanelWrapper
@@ -230,7 +218,7 @@ export function RoofSegmentPanel() {
       </PanelSection>
 
       <PanelSection title="Position">
-        <MetricControl
+        <SliderControl
           label="X"
           max={50}
           min={-50}
@@ -244,7 +232,7 @@ export function RoofSegmentPanel() {
           unit="m"
           value={Math.round(node.position[0] * 100) / 100}
         />
-        <MetricControl
+        <SliderControl
           label="Y"
           max={50}
           min={-50}
@@ -258,7 +246,7 @@ export function RoofSegmentPanel() {
           unit="m"
           value={Math.round(node.position[1] * 100) / 100}
         />
-        <MetricControl
+        <SliderControl
           label="Z"
           max={50}
           min={-50}
@@ -318,9 +306,6 @@ export function RoofSegmentPanel() {
           />
         </ActionGroup>
       </PanelSection>
-      <PanelSection title="Material">
-        <MaterialPicker onChange={handleMaterialChange} value={node.material} />
-      </PanelSection>
     </PanelWrapper>
   )
 }