scans and ref image

2026-01-29 09:38:24 +09:00
parent a1a0e78384
commit c94f661bf9
20 changed files with 688 additions and 7 deletions
@@ -13,6 +13,7 @@ import { useKeyboard } from '@/hooks/use-keyboard'
 import { ZoneSystem } from '../systems/zone/zone-system'
 import { ToolManager } from '../tools/tool-manager'
 import { ActionMenu } from '../ui/action-menu'
+import { ReferencePanel } from '../ui/panels/reference-panel'
 import { SidebarProvider } from '../ui/primitives/sidebar'
 import { AppSidebar } from '../ui/sidebar/app-sidebar'
 import { CustomCameraControls } from './custom-camera-controls'
@@ -31,6 +32,7 @@ export default function Editor() {

      <TestUndo />
      <ActionMenu />
+      <ReferencePanel />

      <SidebarProvider className="fixed z-10">
        <AppSidebar />
@@ -0,0 +1,176 @@
+'use client'
+
+import { type AnyNode, type GuideNode, type ScanNode, useScene } from '@pascal-app/core'
+import { Box, Image, X } from 'lucide-react'
+import { useCallback } from 'react'
+import useEditor from '@/store/use-editor'
+
+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 handleUpdate = useCallback(
+    (updates: Partial<ReferenceNode>) => {
+      if (!selectedReferenceId) return
+      updateNode(selectedReferenceId as AnyNode['id'], updates)
+    },
+    [selectedReferenceId, updateNode],
+  )
+
+  const handleClose = useCallback(() => {
+    setSelectedReferenceId(null)
+  }, [setSelectedReferenceId])
+
+  if (!node || (node.type !== 'scan' && node.type !== 'guide')) return null
+
+  const isScan = node.type === 'scan'
+
+  return (
+    <div className="pointer-events-auto fixed top-20 right-4 z-50 flex w-72 flex-col overflow-hidden rounded-lg border border-border bg-background/95 shadow-xl backdrop-blur-md">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b p-3">
+        <div className="flex items-center gap-2">
+          {isScan ? (
+            <Box className="h-4 w-4 text-muted-foreground" />
+          ) : (
+            <Image className="h-4 w-4 text-muted-foreground" />
+          )}
+          <h2 className="font-semibold text-foreground text-sm">
+            {node.name || (isScan ? '3D Scan' : 'Guide Image')}
+          </h2>
+        </div>
+        <button
+          className="rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground cursor-pointer"
+          onClick={handleClose}
+        >
+          <X className="h-4 w-4" />
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-3">
+        <div className="space-y-4">
+          {/* Position */}
+          <div className="space-y-2">
+            <label className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+              Position
+            </label>
+            <div className="grid grid-cols-3 gap-2">
+              {([0, 1, 2] as const).map((i) => (
+                <div key={i} className="space-y-1">
+                  <label className="text-muted-foreground text-xs">{['X', 'Y', 'Z'][i]}</label>
+                  <input
+                    className="w-full rounded border border-input bg-background px-2 py-1 text-foreground text-sm outline-none focus:border-primary"
+                    onChange={(e) => {
+                      const value = Number.parseFloat(e.target.value)
+                      if (!Number.isNaN(value)) {
+                        const pos = [...node.position] as [number, number, number]
+                        pos[i] = value
+                        handleUpdate({ position: pos })
+                      }
+                    }}
+                    step="0.1"
+                    type="number"
+                    value={Math.round(node.position[i] * 100) / 100}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Rotation Y */}
+          <div className="space-y-2">
+            <label className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+              Rotation
+            </label>
+            <div className="flex items-center gap-1.5">
+              <input
+                className="min-w-0 flex-1 rounded border border-input bg-background px-2 py-1 text-foreground text-sm outline-none focus:border-primary"
+                onChange={(e) => {
+                  const degrees = Number.parseFloat(e.target.value)
+                  if (!Number.isNaN(degrees)) {
+                    const radians = (degrees * Math.PI) / 180
+                    handleUpdate({
+                      rotation: [node.rotation[0], radians, node.rotation[2]],
+                    })
+                  }
+                }}
+                step="1"
+                type="number"
+                value={Math.round((node.rotation[1] * 180) / Math.PI)}
+              />
+              <span className="text-muted-foreground text-xs shrink-0">&deg;</span>
+              <button
+                className="shrink-0 rounded border border-border px-1.5 py-0.5 text-xs hover:bg-accent cursor-pointer"
+                onClick={() =>
+                  handleUpdate({
+                    rotation: [node.rotation[0], node.rotation[1] - Math.PI / 4, node.rotation[2]],
+                  })
+                }
+              >
+                &minus;45
+              </button>
+              <button
+                className="shrink-0 rounded border border-border px-1.5 py-0.5 text-xs hover:bg-accent cursor-pointer"
+                onClick={() =>
+                  handleUpdate({
+                    rotation: [node.rotation[0], node.rotation[1] + Math.PI / 4, node.rotation[2]],
+                  })
+                }
+              >
+                +45
+              </button>
+            </div>
+          </div>
+
+          {/* Scale */}
+          <div className="space-y-2">
+            <label className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+              Scale
+            </label>
+            <input
+              className="w-full rounded border border-input bg-background px-2 py-1 text-foreground text-sm outline-none focus:border-primary"
+              min="0.01"
+              onChange={(e) => {
+                const value = Number.parseFloat(e.target.value)
+                if (!Number.isNaN(value) && value > 0) {
+                  handleUpdate({ scale: value })
+                }
+              }}
+              step="0.1"
+              type="number"
+              value={Math.round(node.scale * 100) / 100}
+            />
+          </div>
+
+          {/* Opacity */}
+          <div className="space-y-2">
+            <div className="flex justify-between">
+              <label className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+                Opacity
+              </label>
+              <span className="text-muted-foreground text-xs">{node.opacity}%</span>
+            </div>
+            <input
+              className="w-full cursor-pointer"
+              max="100"
+              min="0"
+              onChange={(e) => handleUpdate({ opacity: Number.parseInt(e.target.value, 10) })}
+              step="1"
+              type="range"
+              value={node.opacity}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -10,12 +10,15 @@ import {
  ChevronDown,
  Hexagon,
  Layers,
+  MoreHorizontal,
  Plus,
  Trash2,
 } from "lucide-react";
+import { useState } from "react";
 import { cn } from "@/lib/utils";
 import useEditor from "@/store/use-editor";
 import { TreeNode } from "./tree-node";
+import { ReferencesDialog } from "./references-dialog";
 import {
  Popover,
  PopoverContent,
@@ -156,6 +159,8 @@ function LevelsSection() {
  const selectedLevelId = useViewer((state) => state.selection.levelId);
  const setSelection = useViewer((state) => state.setSelection);

+  const [referencesLevelId, setReferencesLevelId] = useState<string | null>(null);
+
  const building = selectedBuildingId
    ? (nodes[selectedBuildingId] as BuildingNode)
    : null;
@@ -194,19 +199,46 @@ function LevelsSection() {
      {/* Level buttons */}
      <div className="flex flex-col gap-0.5 px-2 pb-2">
        {levels.map((level) => (
-          <button
+          <div
            key={level.id}
            className={cn(
-              "flex items-center gap-2 px-2 py-1.5 rounded text-sm transition-colors cursor-pointer",
+              "flex items-center group/level rounded transition-colors",
              selectedLevelId === level.id
                ? "bg-primary text-primary-foreground"
                : "hover:bg-accent/50 text-foreground"
            )}
-            onClick={() => setSelection({ levelId: level.id })}
          >
-            <Layers className="w-3.5 h-3.5 shrink-0" />
-            <span className="truncate">{level.name || `Level ${level.level}`}</span>
-          </button>
+            <button
+              className="flex-1 flex items-center gap-2 px-2 py-1.5 text-sm cursor-pointer min-w-0"
+              onClick={() => setSelection({ levelId: level.id })}
+            >
+              <Layers className="w-3.5 h-3.5 shrink-0" />
+              <span className="truncate">{level.name || `Level ${level.level}`}</span>
+            </button>
+            <Popover>
+              <PopoverTrigger asChild>
+                <button
+                  className={cn(
+                    "opacity-0 group-hover/level:opacity-100 w-6 h-6 mr-1 flex items-center justify-center rounded cursor-pointer shrink-0",
+                    selectedLevelId === level.id
+                      ? "hover:bg-primary-foreground/20"
+                      : "hover:bg-accent"
+                  )}
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <MoreHorizontal className="w-3.5 h-3.5" />
+                </button>
+              </PopoverTrigger>
+              <PopoverContent align="start" side="right" className="w-40 p-1">
+                <button
+                  className="flex items-center gap-2 w-full px-3 py-1.5 rounded text-sm hover:bg-accent cursor-pointer"
+                  onClick={() => setReferencesLevelId(level.id)}
+                >
+                  References
+                </button>
+              </PopoverContent>
+            </Popover>
+          </div>
        ))}
        {levels.length === 0 && (
          <div className="text-xs text-muted-foreground px-2 py-1">
@@ -214,6 +246,17 @@ function LevelsSection() {
          </div>
        )}
      </div>
+
+      {/* References dialog */}
+      {referencesLevelId && (
+        <ReferencesDialog
+          levelId={referencesLevelId}
+          open={!!referencesLevelId}
+          onOpenChange={(open) => {
+            if (!open) setReferencesLevelId(null);
+          }}
+        />
+      )}
    </div>
  );
 }
@@ -0,0 +1,186 @@
+import {
+  type AnyNodeId,
+  type GuideNode,
+  GuideNode as GuideNodeSchema,
+  type LevelNode,
+  type ScanNode,
+  ScanNode as ScanNodeSchema,
+  saveAsset,
+  useScene,
+} from '@pascal-app/core'
+import { Box, Image, Pencil, Plus, Trash2 } from 'lucide-react'
+import { useCallback, useRef } from 'react'
+import useEditor from '@/store/use-editor'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/primitives/dialog'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/primitives/popover'
+
+interface ReferencesDialogProps {
+  levelId: string
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function ReferencesDialog({ levelId, open, onOpenChange }: ReferencesDialogProps) {
+  const nodes = useScene((s) => s.nodes)
+  const createNode = useScene((s) => s.createNode)
+  const deleteNode = useScene((s) => s.deleteNode)
+  const setSelectedReferenceId = useEditor((s) => s.setSelectedReferenceId)
+
+  const scanInputRef = useRef<HTMLInputElement>(null)
+  const guideInputRef = useRef<HTMLInputElement>(null)
+
+  const level = nodes[levelId as AnyNodeId] as LevelNode | undefined
+  if (!level) return null
+
+  // Find all scan and guide children of this level
+  const references = Object.values(nodes).filter(
+    (node): node is ScanNode | GuideNode =>
+      (node.type === 'scan' || node.type === 'guide') && node.parentId === levelId,
+  )
+
+  const handleAddScan = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0]
+      if (!file) return
+      const url = await saveAsset(file)
+      const node = ScanNodeSchema.parse({
+        url,
+        name: file.name,
+        parentId: levelId,
+      })
+      createNode(node, levelId as AnyNodeId)
+      e.target.value = ''
+    },
+    [levelId, createNode],
+  )
+
+  const handleAddGuide = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0]
+      if (!file) return
+      const url = await saveAsset(file)
+      const node = GuideNodeSchema.parse({
+        url,
+        name: file.name,
+        parentId: levelId,
+      })
+      createNode(node, levelId as AnyNodeId)
+      e.target.value = ''
+    },
+    [levelId, createNode],
+  )
+
+  const handleEdit = useCallback(
+    (nodeId: string) => {
+      setSelectedReferenceId(nodeId)
+      onOpenChange(false)
+    },
+    [setSelectedReferenceId, onOpenChange],
+  )
+
+  const handleDelete = useCallback(
+    (nodeId: string) => {
+      deleteNode(nodeId as AnyNodeId)
+    },
+    [deleteNode],
+  )
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>References — {level.name || `Level ${level.level}`}</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-1 max-h-64 overflow-y-auto">
+          {references.length === 0 && (
+            <p className="text-sm text-muted-foreground py-4 text-center">
+              No references yet. Add a 3D scan or guide image.
+            </p>
+          )}
+
+          {references.map((ref) => (
+            <div
+              key={ref.id}
+              className="flex items-center gap-2 px-2 py-1.5 rounded text-sm hover:bg-accent/50 group"
+            >
+              {ref.type === 'scan' ? (
+                <Box className="w-4 h-4 shrink-0 text-muted-foreground" />
+              ) : (
+                <Image className="w-4 h-4 shrink-0 text-muted-foreground" />
+              )}
+              <span className="flex-1 truncate">
+                {ref.name || (ref.type === 'scan' ? '3D Scan' : 'Guide Image')}
+              </span>
+              <button
+                className="opacity-0 group-hover:opacity-100 w-6 h-6 flex items-center justify-center rounded hover:bg-accent cursor-pointer"
+                onClick={() => handleEdit(ref.id)}
+                title="Edit"
+              >
+                <Pencil className="w-3 h-3" />
+              </button>
+              <button
+                className="opacity-0 group-hover:opacity-100 w-6 h-6 flex items-center justify-center rounded hover:bg-destructive/10 text-destructive cursor-pointer"
+                onClick={() => handleDelete(ref.id)}
+                title="Delete"
+              >
+                <Trash2 className="w-3 h-3" />
+              </button>
+            </div>
+          ))}
+        </div>
+
+        <div className="flex justify-end pt-2 border-t border-border/50">
+          <input
+            ref={scanInputRef}
+            type="file"
+            accept=".glb,.gltf"
+            className="hidden"
+            onChange={handleAddScan}
+          />
+          <input
+            ref={guideInputRef}
+            type="file"
+            accept="image/*"
+            className="hidden"
+            onChange={handleAddGuide}
+          />
+
+          <Popover>
+            <PopoverTrigger asChild>
+              <button className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm bg-primary text-primary-foreground hover:bg-primary/90 cursor-pointer">
+                <Plus className="w-3.5 h-3.5" />
+                Add
+              </button>
+            </PopoverTrigger>
+            <PopoverContent align="end" className="w-44 p-1">
+              <button
+                className="flex items-center gap-2 w-full px-3 py-2 rounded-md text-sm hover:bg-accent cursor-pointer"
+                onClick={() => scanInputRef.current?.click()}
+              >
+                <Box className="w-4 h-4" />
+                3D Scan
+              </button>
+              <button
+                className="flex items-center gap-2 w-full px-3 py-2 rounded-md text-sm hover:bg-accent cursor-pointer"
+                onClick={() => guideInputRef.current?.click()}
+              >
+                <Image className="w-4 h-4" />
+                Guide Image
+              </button>
+            </PopoverContent>
+          </Popover>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
@@ -58,6 +58,8 @@ type EditorState = {
  setSelectedItem: (item: Asset) => void
  movingNode: ItemNode | null
  setMovingNode: (node: ItemNode | null) => void
+  selectedReferenceId: string | null
+  setSelectedReferenceId: (id: string | null) => void
 }

 const useEditor = create<EditorState>()((set, get) => ({
@@ -173,6 +175,8 @@ const useEditor = create<EditorState>()((set, get) => ({
  setSelectedItem: (item) => set({ selectedItem: item }),
  movingNode: null,
  setMovingNode: (node) => set({ movingNode: node }),
+  selectedReferenceId: null,
+  setSelectedReferenceId: (id) => set({ selectedReferenceId: id }),
 }))

 export default useEditor