@ifc-lite/viewer 1.1.6 → 1.5.0

package/src/components/viewer/SheetSetupPanel.tsx

@@ -0,0 +1,502 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * SheetSetupPanel - Configure drawing sheet for architectural output
+ *
+ * Provides controls for:
+ * - Paper size selection (ISO, ANSI, ARCH)
+ * - Drawing frame style
+ * - Scale selection
+ * - Title block configuration
+ * - Scale bar and north arrow
+ */
+
+import React, { useCallback, useState, useMemo } from 'react';
+import {
+  X,
+  FileText,
+  ChevronDown,
+  ChevronRight,
+  Ruler,
+  Compass,
+  Edit3,
+  Save,
+  Trash2,
+  Plus,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+import { useViewerStore } from '@/store';
+import {
+  PAPER_SIZE_REGISTRY,
+  FRAME_PRESETS,
+  TITLE_BLOCK_PRESETS,
+  COMMON_SCALES,
+  type FrameStyle,
+  type TitleBlockLayout,
+  type DrawingScale,
+} from '@ifc-lite/drawing-2d';
+
+interface SheetSetupPanelProps {
+  onClose: () => void;
+  onOpenTitleBlockEditor?: () => void;
+}
+
+// Group paper sizes by category
+const PAPER_SIZE_GROUPS = {
+  ISO: ['A0_PORTRAIT', 'A0_LANDSCAPE', 'A1_PORTRAIT', 'A1_LANDSCAPE', 'A2_PORTRAIT', 'A2_LANDSCAPE', 'A3_PORTRAIT', 'A3_LANDSCAPE', 'A4_PORTRAIT', 'A4_LANDSCAPE'],
+  ANSI: ['LETTER_PORTRAIT', 'LETTER_LANDSCAPE', 'LEGAL_PORTRAIT', 'LEGAL_LANDSCAPE', 'TABLOID_PORTRAIT', 'TABLOID_LANDSCAPE', 'ANSI_C', 'ANSI_D', 'ANSI_E'],
+  ARCH: ['ARCH_A', 'ARCH_B', 'ARCH_C', 'ARCH_D', 'ARCH_E', 'ARCH_E1'],
+};
+
+const FRAME_STYLE_OPTIONS: { value: FrameStyle; label: string }[] = [
+  { value: 'simple', label: 'Simple' },
+  { value: 'professional', label: 'Professional' },
+  { value: 'minimal', label: 'Minimal' },
+  { value: 'iso', label: 'ISO Standard' },
+];
+
+const TITLE_BLOCK_LAYOUT_OPTIONS: { value: TitleBlockLayout; label: string }[] = [
+  { value: 'standard', label: 'Standard (Bottom Right)' },
+  { value: 'extended', label: 'Extended (Full Width)' },
+  { value: 'compact', label: 'Compact (Smaller)' },
+];
+
+export function SheetSetupPanel({ onClose, onOpenTitleBlockEditor }: SheetSetupPanelProps): React.ReactElement {
+  const activeSheet = useViewerStore((s) => s.activeSheet);
+  const sheetEnabled = useViewerStore((s) => s.sheetEnabled);
+  const setSheetEnabled = useViewerStore((s) => s.setSheetEnabled);
+  const createSheet = useViewerStore((s) => s.createSheet);
+  const setPaperSize = useViewerStore((s) => s.setPaperSize);
+  const setFrameStyle = useViewerStore((s) => s.setFrameStyle);
+  const setDrawingScale = useViewerStore((s) => s.setDrawingScale);
+  const setTitleBlockLayout = useViewerStore((s) => s.setTitleBlockLayout);
+  const toggleScaleBar = useViewerStore((s) => s.toggleScaleBar);
+  const toggleNorthArrow = useViewerStore((s) => s.toggleNorthArrow);
+  const savedSheetTemplates = useViewerStore((s) => s.savedSheetTemplates);
+  const saveAsTemplate = useViewerStore((s) => s.saveAsTemplate);
+  const loadTemplate = useViewerStore((s) => s.loadTemplate);
+  const deleteTemplate = useViewerStore((s) => s.deleteTemplate);
+
+  // Section state
+  const [paperSizeOpen, setPaperSizeOpen] = useState(true);
+  const [frameOpen, setFrameOpen] = useState(true);
+  const [scaleOpen, setScaleOpen] = useState(true);
+  const [titleBlockOpen, setTitleBlockOpen] = useState(true);
+  const [scaleBarOpen, setScaleBarOpen] = useState(true);
+  const [templatesOpen, setTemplatesOpen] = useState(false);
+  const [newTemplateName, setNewTemplateName] = useState('');
+
+  // Get current paper size ID
+  const currentPaperId = useMemo(() => {
+    if (!activeSheet) return 'A3_LANDSCAPE';
+    const paper = activeSheet.paper;
+    // Find matching paper in registry
+    for (const [id, def] of Object.entries(PAPER_SIZE_REGISTRY)) {
+      if (def.widthMm === paper.widthMm && def.heightMm === paper.heightMm) {
+        return id;
+      }
+    }
+    return 'A3_LANDSCAPE';
+  }, [activeSheet]);
+
+  // Initialize sheet if needed
+  const handleEnableSheet = useCallback((enabled: boolean) => {
+    if (enabled && !activeSheet) {
+      createSheet();
+    }
+    setSheetEnabled(enabled);
+  }, [activeSheet, createSheet, setSheetEnabled]);
+
+  // Paper size change
+  const handlePaperSizeChange = useCallback((paperId: string) => {
+    setPaperSize(paperId);
+  }, [setPaperSize]);
+
+  // Frame style change
+  const handleFrameStyleChange = useCallback((style: string) => {
+    setFrameStyle(style as FrameStyle);
+  }, [setFrameStyle]);
+
+  // Scale change
+  const handleScaleChange = useCallback((scaleName: string) => {
+    const scale = COMMON_SCALES.find((s) => s.name === scaleName);
+    if (scale) {
+      setDrawingScale(scale);
+    }
+  }, [setDrawingScale]);
+
+  // Title block layout change
+  const handleTitleBlockLayoutChange = useCallback((layout: string) => {
+    setTitleBlockLayout(layout as TitleBlockLayout);
+  }, [setTitleBlockLayout]);
+
+  // Save template
+  const handleSaveTemplate = useCallback(() => {
+    if (newTemplateName.trim()) {
+      saveAsTemplate(newTemplateName.trim());
+      setNewTemplateName('');
+    }
+  }, [newTemplateName, saveAsTemplate]);
+
+  return (
+    <div className="flex flex-col h-full bg-background border-l">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b bg-muted/50">
+        <div className="flex items-center gap-2">
+          <FileText className="h-5 w-5 text-primary" />
+          <h2 className="font-semibold text-sm">Drawing Sheet</h2>
+        </div>
+        <div className="flex items-center gap-2">
+          <Switch
+            checked={sheetEnabled}
+            onCheckedChange={handleEnableSheet}
+          />
+          <Button variant="ghost" size="icon-sm" onClick={onClose}>
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto">
+        {!activeSheet && !sheetEnabled ? (
+          <div className="p-4 text-center text-muted-foreground">
+            <p className="text-sm">Enable drawing sheet to configure paper size, frame, and title block.</p>
+            <Button
+              variant="outline"
+              size="sm"
+              className="mt-4"
+              onClick={() => handleEnableSheet(true)}
+            >
+              Enable Sheet
+            </Button>
+          </div>
+        ) : (
+          <>
+            {/* Paper Size Section */}
+            <Collapsible open={paperSizeOpen} onOpenChange={setPaperSizeOpen}>
+              <CollapsibleTrigger asChild>
+                <button className="w-full flex items-center justify-between px-4 py-2 hover:bg-muted/50 transition-colors border-b">
+                  <span className="text-sm font-medium">Paper Size</span>
+                  {paperSizeOpen ? (
+                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                  )}
+                </button>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="px-4 py-3 space-y-3">
+                  <Select value={currentPaperId} onValueChange={handlePaperSizeChange}>
+                    <SelectTrigger className="h-8 text-sm">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {Object.entries(PAPER_SIZE_GROUPS).map(([group, ids]) => (
+                        <React.Fragment key={group}>
+                          <div className="px-2 py-1 text-xs font-semibold text-muted-foreground">
+                            {group}
+                          </div>
+                          {ids.filter((id) => id in PAPER_SIZE_REGISTRY).map((id) => {
+                            const paper = PAPER_SIZE_REGISTRY[id];
+                            return (
+                              <SelectItem key={id} value={id}>
+                                {paper.name} ({paper.widthMm}×{paper.heightMm}mm)
+                              </SelectItem>
+                            );
+                          })}
+                        </React.Fragment>
+                      ))}
+                    </SelectContent>
+                  </Select>
+
+                  {activeSheet && (
+                    <div className="text-xs text-muted-foreground">
+                      {activeSheet.paper.widthMm} × {activeSheet.paper.heightMm} mm
+                    </div>
+                  )}
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+            {/* Frame Section */}
+            <Collapsible open={frameOpen} onOpenChange={setFrameOpen}>
+              <CollapsibleTrigger asChild>
+                <button className="w-full flex items-center justify-between px-4 py-2 hover:bg-muted/50 transition-colors border-b">
+                  <span className="text-sm font-medium">Frame Style</span>
+                  {frameOpen ? (
+                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                  )}
+                </button>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="px-4 py-3 space-y-3">
+                  <Select
+                    value={activeSheet?.frame.style || 'professional'}
+                    onValueChange={handleFrameStyleChange}
+                  >
+                    <SelectTrigger className="h-8 text-sm">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {FRAME_STYLE_OPTIONS.map((opt) => (
+                        <SelectItem key={opt.value} value={opt.value}>
+                          {opt.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+
+                  {activeSheet && (
+                    <div className="text-xs text-muted-foreground">
+                      Margins: {activeSheet.frame.margins.top}/{activeSheet.frame.margins.right}/{activeSheet.frame.margins.bottom}/{activeSheet.frame.margins.left}mm
+                    </div>
+                  )}
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+            {/* Scale Section */}
+            <Collapsible open={scaleOpen} onOpenChange={setScaleOpen}>
+              <CollapsibleTrigger asChild>
+                <button className="w-full flex items-center justify-between px-4 py-2 hover:bg-muted/50 transition-colors border-b">
+                  <div className="flex items-center gap-2">
+                    <Ruler className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-sm font-medium">Drawing Scale</span>
+                  </div>
+                  {scaleOpen ? (
+                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                  )}
+                </button>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="px-4 py-3 space-y-3">
+                  <Select
+                    value={activeSheet?.scale.name || '1:100'}
+                    onValueChange={handleScaleChange}
+                  >
+                    <SelectTrigger className="h-8 text-sm">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {COMMON_SCALES.map((scale) => (
+                        <SelectItem key={scale.name} value={scale.name}>
+                          {scale.name} - {scale.useCase}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+            {/* Title Block Section */}
+            <Collapsible open={titleBlockOpen} onOpenChange={setTitleBlockOpen}>
+              <CollapsibleTrigger asChild>
+                <button className="w-full flex items-center justify-between px-4 py-2 hover:bg-muted/50 transition-colors border-b">
+                  <span className="text-sm font-medium">Title Block</span>
+                  {titleBlockOpen ? (
+                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                  )}
+                </button>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="px-4 py-3 space-y-3">
+                  <div>
+                    <Label className="text-xs">Layout</Label>
+                    <Select
+                      value={activeSheet?.titleBlock.layout || 'standard'}
+                      onValueChange={handleTitleBlockLayoutChange}
+                    >
+                      <SelectTrigger className="h-8 text-sm mt-1">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {TITLE_BLOCK_LAYOUT_OPTIONS.map((opt) => (
+                          <SelectItem key={opt.value} value={opt.value}>
+                            {opt.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {activeSheet && (
+                    <div className="text-xs text-muted-foreground">
+                      {activeSheet.titleBlock.widthMm} × {activeSheet.titleBlock.heightMm}mm
+                      <br />
+                      {activeSheet.titleBlock.fields.length} fields configured
+                    </div>
+                  )}
+
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="w-full"
+                    onClick={onOpenTitleBlockEditor}
+                  >
+                    <Edit3 className="h-4 w-4 mr-2" />
+                    Edit Title Block Fields
+                  </Button>
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+            {/* Scale Bar & North Arrow Section */}
+            <Collapsible open={scaleBarOpen} onOpenChange={setScaleBarOpen}>
+              <CollapsibleTrigger asChild>
+                <button className="w-full flex items-center justify-between px-4 py-2 hover:bg-muted/50 transition-colors border-b">
+                  <div className="flex items-center gap-2">
+                    <Compass className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-sm font-medium">Scale Bar & North Arrow</span>
+                  </div>
+                  {scaleBarOpen ? (
+                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                  )}
+                </button>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="px-4 py-3 space-y-3">
+                  {/* Scale Bar Toggle */}
+                  <div className="flex items-center justify-between">
+                    <Label className="text-xs">Scale Bar</Label>
+                    <Switch
+                      checked={activeSheet?.scaleBar.visible ?? true}
+                      onCheckedChange={toggleScaleBar}
+                    />
+                  </div>
+
+                  {/* North Arrow Toggle */}
+                  <div className="flex items-center justify-between">
+                    <Label className="text-xs">North Arrow</Label>
+                    <Switch
+                      checked={(activeSheet?.northArrow.style ?? 'simple') !== 'none'}
+                      onCheckedChange={toggleNorthArrow}
+                    />
+                  </div>
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+            {/* Templates Section */}
+            <Collapsible open={templatesOpen} onOpenChange={setTemplatesOpen}>
+              <CollapsibleTrigger asChild>
+                <button className="w-full flex items-center justify-between px-4 py-2 hover:bg-muted/50 transition-colors border-b">
+                  <span className="text-sm font-medium">Saved Templates</span>
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs text-muted-foreground">
+                      {savedSheetTemplates.length}
+                    </span>
+                    {templatesOpen ? (
+                      <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                    ) : (
+                      <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                    )}
+                  </div>
+                </button>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="px-4 py-3 space-y-3">
+                  {/* Save current as template */}
+                  <div className="flex gap-2">
+                    <Input
+                      placeholder="Template name..."
+                      value={newTemplateName}
+                      onChange={(e) => setNewTemplateName(e.target.value)}
+                      className="h-8 text-sm flex-1"
+                    />
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={handleSaveTemplate}
+                      disabled={!newTemplateName.trim() || !activeSheet}
+                    >
+                      <Save className="h-4 w-4" />
+                    </Button>
+                  </div>
+
+                  {/* Template list */}
+                  {savedSheetTemplates.length === 0 ? (
+                    <div className="text-xs text-muted-foreground text-center py-2">
+                      No saved templates
+                    </div>
+                  ) : (
+                    <div className="space-y-1">
+                      {savedSheetTemplates.map((template) => (
+                        <div
+                          key={template.id}
+                          className="flex items-center justify-between px-2 py-1.5 bg-muted/30 rounded text-xs"
+                        >
+                          <span className="truncate flex-1">{template.name}</span>
+                          <div className="flex gap-1">
+                            <Button
+                              variant="ghost"
+                              size="icon-sm"
+                              className="h-6 w-6"
+                              onClick={() => loadTemplate(template.id)}
+                            >
+                              <Plus className="h-3 w-3" />
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="icon-sm"
+                              className="h-6 w-6 text-destructive hover:text-destructive"
+                              onClick={() => deleteTemplate(template.id)}
+                            >
+                              <Trash2 className="h-3 w-3" />
+                            </Button>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+            {/* Viewport Info */}
+            {activeSheet && (
+              <div className="px-4 py-3 border-t">
+                <div className="text-xs text-muted-foreground space-y-1">
+                  <div>
+                    <strong>Drawing Area:</strong>{' '}
+                    {activeSheet.viewportBounds.width.toFixed(1)} ×{' '}
+                    {activeSheet.viewportBounds.height.toFixed(1)} mm
+                  </div>
+                  <div>
+                    <strong>Scale:</strong> {activeSheet.scale.name}
+                  </div>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/viewer/StatusBar.tsx

@@ -3,26 +3,22 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import { useMemo, useState, useEffect } from 'react';
-import { Boxes, Triangle, CheckCircle2, AlertCircle } from 'lucide-react';
+import { Boxes, Triangle, CheckCircle2, AlertCircle, Loader2 } from 'lucide-react';
 import { Separator } from '@/components/ui/separator';
 import { formatNumber, formatBytes } from '@/lib/utils';
 import { useViewerStore } from '@/store';
 import { useIfc } from '@/hooks/useIfc';
+import { useWebGPU } from '@/hooks/useWebGPU';
 
 export function StatusBar() {
   const { loading, geometryResult, ifcDataStore } = useIfc();
   const progress = useViewerStore((s) => s.progress);
   const error = useViewerStore((s) => s.error);
-  const selectedStorey = useViewerStore((s) => s.selectedStorey);
+  const selectedStoreys = useViewerStore((s) => s.selectedStoreys);
+  const webgpu = useWebGPU();
 
   const [fps, setFps] = useState(60);
   const [memory, setMemory] = useState(0);
-  const [webgpuSupported, setWebgpuSupported] = useState<boolean | null>(null);
-
-  // Check WebGPU support
-  useEffect(() => {
-    setWebgpuSupported('gpu' in navigator);
-  }, []);
 
   // FPS counter (simplified)
   useEffect(() => {
@@ -71,12 +67,19 @@ export function StatusBar() {
   }, [geometryResult]);
 
   const visibleElements = useMemo(() => {
-    if (!selectedStorey || !ifcDataStore?.spatialHierarchy) {
+    if (selectedStoreys.size === 0 || !ifcDataStore?.spatialHierarchy) {
       return stats.elements;
     }
-    const storeyElements = ifcDataStore.spatialHierarchy.byStorey.get(selectedStorey);
-    return (storeyElements as number[] | undefined)?.length ?? stats.elements;
-  }, [selectedStorey, ifcDataStore, stats.elements]);
+    // Count elements from all selected storeys
+    let count = 0;
+    for (const storeyId of selectedStoreys) {
+      const storeyElements = ifcDataStore.spatialHierarchy.byStorey.get(storeyId);
+      if (storeyElements) {
+        count += storeyElements.length;
+      }
+    }
+    return count || stats.elements;
+  }, [selectedStoreys, ifcDataStore, stats.elements]);
 
   return (
     <div className="h-7 px-3 border-t bg-muted/30 flex items-center justify-between text-xs text-muted-foreground">
@@ -97,7 +100,7 @@ export function StatusBar() {
           <Boxes className="h-3.5 w-3.5" />
           <span>
             {formatNumber(visibleElements)}
-            {selectedStorey && stats.elements !== visibleElements && (
+            {selectedStoreys.size > 0 && stats.elements !== visibleElements && (
               <span className="opacity-60"> / {formatNumber(stats.elements)}</span>
             )}
             {' '}elements
@@ -128,13 +131,21 @@ export function StatusBar() {
         <Separator orientation="vertical" className="h-3.5" />
 
         <div className="flex items-center gap-1">
-          {webgpuSupported ? (
+          {webgpu.checking ? (
+            <Loader2 className="h-3.5 w-3.5 text-zinc-400 animate-spin" />
+          ) : webgpu.supported ? (
             <CheckCircle2 className="h-3.5 w-3.5 text-green-500" />
           ) : (
-            <AlertCircle className="h-3.5 w-3.5 text-yellow-500" />
+            <AlertCircle className="h-3.5 w-3.5 text-[#f7768e]" />
           )}
-          <span>{webgpuSupported ? 'WebGPU' : 'WebGL'}</span>
+          <span className={!webgpu.supported && !webgpu.checking ? 'text-[#f7768e]' : ''}>
+            {webgpu.checking ? 'Checking...' : webgpu.supported ? 'WebGPU' : 'No WebGPU'}
+          </span>
         </div>
+
+        <Separator orientation="vertical" className="h-3.5" />
+
+        <span className="opacity-60">v{__APP_VERSION__}</span>
       </div>
     </div>
   );