@ifc-lite/viewer 1.0.0

package/src/components/viewer/ViewportContainer.tsx

@@ -0,0 +1,49 @@
+/* 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/. */
+
+import { useMemo } from 'react';
+import { Viewport } from './Viewport';
+import { ViewportOverlays } from './ViewportOverlays';
+import { ToolOverlays } from './ToolOverlays';
+import { useViewerStore } from '@/store';
+import { useIfc } from '@/hooks/useIfc';
+
+export function ViewportContainer() {
+  const { geometryResult, ifcDataStore } = useIfc();
+  const selectedStorey = useViewerStore((s) => s.selectedStorey);
+
+  // Filter geometry based on selected storey
+  const filteredGeometry = useMemo(() => {
+    if (!geometryResult?.meshes || !ifcDataStore?.spatialHierarchy) {
+      return geometryResult?.meshes || null;
+    }
+
+    if (selectedStorey === null) {
+      return geometryResult.meshes;
+    }
+
+    const hierarchy = ifcDataStore.spatialHierarchy;
+    const storeyElementIds = hierarchy.byStorey.get(selectedStorey);
+
+    if (!storeyElementIds || storeyElementIds.length === 0) {
+      return geometryResult.meshes;
+    }
+
+    const storeyElementIdSet = new Set(storeyElementIds);
+    return geometryResult.meshes.filter(mesh =>
+      storeyElementIdSet.has(mesh.expressId)
+    );
+  }, [geometryResult, ifcDataStore, selectedStorey]);
+
+  return (
+    <div className="relative h-full w-full bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-900 dark:to-slate-800">
+      <Viewport
+        geometry={filteredGeometry}
+        coordinateInfo={geometryResult?.coordinateInfo}
+      />
+      <ViewportOverlays />
+      <ToolOverlays />
+    </div>
+  );
+}

package/src/components/viewer/ViewportOverlays.tsx

@@ -0,0 +1,185 @@
+/* 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/. */
+
+import { useCallback, useEffect, useState, useRef } from 'react';
+import {
+  Home,
+  ZoomIn,
+  ZoomOut,
+  Layers,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { useViewerStore } from '@/store';
+import { useIfc } from '@/hooks/useIfc';
+import { ViewCube, type ViewCubeRef } from './ViewCube';
+import { AxisHelper } from './AxisHelper';
+
+export function ViewportOverlays() {
+  const selectedStorey = useViewerStore((s) => s.selectedStorey);
+  const hiddenEntities = useViewerStore((s) => s.hiddenEntities);
+  const isolatedEntities = useViewerStore((s) => s.isolatedEntities);
+  const cameraCallbacks = useViewerStore((s) => s.cameraCallbacks);
+  const setOnCameraRotationChange = useViewerStore((s) => s.setOnCameraRotationChange);
+  const setOnScaleChange = useViewerStore((s) => s.setOnScaleChange);
+  const { ifcDataStore, geometryResult } = useIfc();
+
+  // Use refs for rotation to avoid re-renders - ViewCube updates itself directly
+  const cameraRotationRef = useRef({ azimuth: 45, elevation: 25 });
+  const viewCubeRef = useRef<ViewCubeRef | null>(null);
+
+  // Local state for scale - updated via callback, no global re-renders
+  const [scale, setScale] = useState(10);
+
+  // Register callback for real-time rotation updates - updates ViewCube directly
+  useEffect(() => {
+    const handleRotationChange = (rotation: { azimuth: number; elevation: number }) => {
+      cameraRotationRef.current = rotation;
+      // Update ViewCube directly via ref (no React re-render)
+      if (viewCubeRef.current) {
+        const viewCubeRotationX = -rotation.elevation;
+        const viewCubeRotationY = -rotation.azimuth;
+        viewCubeRef.current.updateRotation(viewCubeRotationX, viewCubeRotationY);
+      }
+    };
+    setOnCameraRotationChange(handleRotationChange);
+    return () => setOnCameraRotationChange(null);
+  }, [setOnCameraRotationChange]);
+
+  // Register callback for real-time scale updates
+  useEffect(() => {
+    setOnScaleChange(setScale);
+    return () => setOnScaleChange(null);
+  }, [setOnScaleChange]);
+
+  const storeyName = selectedStorey && ifcDataStore
+    ? ifcDataStore.entities.getName(selectedStorey) || `Storey #${selectedStorey}`
+    : null;
+
+  // Calculate visible count considering visibility filters
+  const totalCount = geometryResult?.meshes?.length ?? 0;
+  let visibleCount = totalCount;
+  if (isolatedEntities !== null) {
+    visibleCount = isolatedEntities.size;
+  } else if (hiddenEntities.size > 0) {
+    visibleCount = totalCount - hiddenEntities.size;
+  }
+
+  // Initial rotation values (ViewCube will update itself via ref)
+  const initialRotationX = -cameraRotationRef.current.elevation;
+  const initialRotationY = -cameraRotationRef.current.azimuth;
+
+  const handleViewChange = useCallback((view: string) => {
+    const viewMap: Record<string, 'top' | 'bottom' | 'front' | 'back' | 'left' | 'right'> = {
+      top: 'top',
+      bottom: 'bottom',
+      front: 'front',
+      back: 'back',
+      left: 'left',
+      right: 'right',
+    };
+    const mappedView = viewMap[view];
+    if (mappedView && cameraCallbacks.setPresetView) {
+      cameraCallbacks.setPresetView(mappedView);
+    }
+  }, [cameraCallbacks]);
+
+  const handleHome = useCallback(() => {
+    cameraCallbacks.home?.();
+  }, [cameraCallbacks]);
+
+  const handleFitAll = useCallback(() => {
+    cameraCallbacks.fitAll?.();
+  }, [cameraCallbacks]);
+
+  const handleZoomIn = useCallback(() => {
+    cameraCallbacks.zoomIn?.();
+  }, [cameraCallbacks]);
+
+  const handleZoomOut = useCallback(() => {
+    cameraCallbacks.zoomOut?.();
+  }, [cameraCallbacks]);
+
+  // Format scale value for display
+  const formatScale = (worldSize: number): string => {
+    if (worldSize >= 1000) {
+      return `${(worldSize / 1000).toFixed(1)}km`;
+    } else if (worldSize >= 1) {
+      return `${worldSize.toFixed(1)}m`;
+    } else if (worldSize >= 0.1) {
+      return `${(worldSize * 100).toFixed(0)}cm`;
+    } else {
+      return `${(worldSize * 1000).toFixed(0)}mm`;
+    }
+  };
+
+  return (
+    <>
+      {/* Navigation Controls (bottom-right) */}
+      <div className="absolute bottom-4 right-4 flex flex-col gap-1 bg-background/80 backdrop-blur-sm rounded-lg border shadow-sm p-1">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="ghost" size="icon-sm" onClick={handleHome}>
+              <Home className="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="left">Home (H)</TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="ghost" size="icon-sm" onClick={handleZoomIn}>
+              <ZoomIn className="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="left">Zoom In (+)</TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="ghost" size="icon-sm" onClick={handleZoomOut}>
+              <ZoomOut className="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="left">Zoom Out (-)</TooltipContent>
+        </Tooltip>
+      </div>
+
+      {/* Context Info (bottom-center) - Storey name only */}
+      {storeyName && (
+        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 px-4 py-2 bg-background/80 backdrop-blur-sm rounded-full border shadow-sm">
+          <div className="flex items-center gap-2 text-sm">
+            <Layers className="h-4 w-4 text-primary" />
+            <span className="font-medium">{storeyName}</span>
+          </div>
+        </div>
+      )}
+
+      {/* ViewCube (top-right) */}
+      <div className="absolute top-6 right-6">
+        <ViewCube
+          ref={viewCubeRef}
+          onViewChange={handleViewChange}
+          onDrag={(deltaX, deltaY) => cameraCallbacks.orbit?.(deltaX, deltaY)}
+          rotationX={initialRotationX}
+          rotationY={initialRotationY}
+        />
+      </div>
+
+      {/* Axis Helper (bottom-left, above scale bar) - IFC Z-up convention */}
+      <div className="absolute bottom-16 left-4">
+        <AxisHelper
+          rotationX={initialRotationX}
+          rotationY={initialRotationY}
+        />
+      </div>
+
+      {/* Scale Bar (bottom-left) */}
+      <div className="absolute bottom-4 left-4 flex flex-col items-start gap-1">
+        <div className="h-1 w-24 bg-foreground/80 rounded-full" />
+        <span className="text-xs text-foreground/80">{formatScale(scale)}</span>
+      </div>
+    </>
+  );
+}

package/src/hooks/useIfc.ts

@@ -0,0 +1,168 @@
+/* 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/. */
+
+/**
+ * Hook for loading and processing IFC files
+ */
+
+import { useMemo, useCallback, useRef } from 'react';
+import { useViewerStore } from '../store.js';
+import { IfcParser } from '@ifc-lite/parser';
+import { GeometryProcessor, GeometryQuality, type MeshData } from '@ifc-lite/geometry';
+import { IfcQuery } from '@ifc-lite/query';
+import { BufferBuilder } from '@ifc-lite/geometry';
+import { buildSpatialIndex } from '@ifc-lite/spatial';
+
+export function useIfc() {
+  const {
+    loading,
+    progress,
+    error,
+    ifcDataStore,
+    geometryResult,
+    setLoading,
+    setProgress,
+    setError,
+    setIfcDataStore,
+    setGeometryResult,
+    appendGeometryBatch,
+    updateCoordinateInfo,
+  } = useViewerStore();
+
+  // Track if we've already logged for this ifcDataStore
+  const lastLoggedDataStoreRef = useRef<typeof ifcDataStore>(null);
+
+  const loadFile = useCallback(async (file: File) => {
+    const { resetViewerState } = useViewerStore.getState();
+    
+    try {
+      // Reset all viewer state before loading new file
+      resetViewerState();
+      
+      setLoading(true);
+      setError(null);
+      setProgress({ phase: 'Loading file', percent: 0 });
+
+      // Read file
+      const buffer = await file.arrayBuffer();
+      setProgress({ phase: 'Parsing IFC', percent: 10 });
+
+      // Parse IFC using columnar parser
+      const parser = new IfcParser();
+      const dataStore = await parser.parseColumnar(buffer, {
+        onProgress: (prog) => {
+          setProgress({
+            phase: `Parsing: ${prog.phase}`,
+            percent: 10 + (prog.percent * 0.4),
+          });
+        },
+      });
+
+      setIfcDataStore(dataStore);
+      setProgress({ phase: 'Triangulating geometry', percent: 50 });
+
+      // Process geometry with streaming for progressive rendering
+      // Quality: Fast for speed, Balanced for quality, High for best quality
+      const geometryProcessor = new GeometryProcessor({
+        useWorkers: false,
+        quality: GeometryQuality.Balanced // Can be GeometryQuality.Fast, Balanced, or High
+      });
+      await geometryProcessor.init();
+
+      // Pass entity index for priority-based loading
+      const entityIndexMap = new Map<number, any>();
+      if (dataStore.entityIndex?.byId) {
+        for (const [id, ref] of dataStore.entityIndex.byId) {
+          entityIndexMap.set(id, { type: ref.type });
+        }
+      }
+
+      // Use streaming processing for progressive rendering
+      const bufferBuilder = new BufferBuilder();
+      let estimatedTotal = 0;
+      let totalMeshes = 0;
+      const allMeshes: MeshData[] = []; // Collect all meshes for BVH building
+
+      // Clear existing geometry result
+      setGeometryResult(null);
+
+      try {
+        for await (const event of geometryProcessor.processStreaming(new Uint8Array(buffer), entityIndexMap, 100)) {
+          switch (event.type) {
+            case 'start':
+              estimatedTotal = event.totalEstimate;
+              break;
+            case 'model-open':
+              setProgress({ phase: 'Processing geometry', percent: 50 });
+              break;
+            case 'batch':
+              // Collect meshes for BVH building
+              allMeshes.push(...event.meshes);
+              
+              // Convert MeshData[] to GPU-ready format and append
+              const gpuMeshes = bufferBuilder.processMeshes(event.meshes).meshes;
+              appendGeometryBatch(gpuMeshes, event.coordinateInfo);
+              totalMeshes = event.totalSoFar;
+
+              // Update progress (50-95% for geometry processing)
+              const progressPercent = 50 + Math.min(45, (totalMeshes / Math.max(estimatedTotal, totalMeshes)) * 45);
+              setProgress({
+                phase: `Rendering geometry (${totalMeshes} meshes)`,
+                percent: progressPercent
+              });
+              break;
+            case 'complete':
+              // Update geometry result with final coordinate info
+              updateCoordinateInfo(event.coordinateInfo);
+              
+              // Build spatial index from all collected meshes
+              if (allMeshes.length > 0) {
+                setProgress({ phase: 'Building spatial index', percent: 95 });
+                try {
+                  const spatialIndex = buildSpatialIndex(allMeshes);
+                  // Attach spatial index to dataStore
+                  (dataStore as any).spatialIndex = spatialIndex;
+                  setIfcDataStore(dataStore); // Update store with spatial index
+                } catch (err) {
+                  console.warn('[useIfc] Failed to build spatial index:', err);
+                  // Continue without spatial index - it's optional
+                }
+              }
+              
+              setProgress({ phase: 'Complete', percent: 100 });
+              break;
+          }
+        }
+      } catch (err) {
+        console.error('[useIfc] Error in streaming processing:', err);
+        setError(err instanceof Error ? err.message : 'Unknown error during geometry processing');
+      }
+
+      setLoading(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+      setLoading(false);
+    }
+  }, [setLoading, setError, setProgress, setIfcDataStore, setGeometryResult, appendGeometryBatch, updateCoordinateInfo]);
+
+  // Memoize query to prevent recreation on every render
+  const query = useMemo(() => {
+    if (!ifcDataStore) return null;
+    
+    // Only log once per ifcDataStore
+    lastLoggedDataStoreRef.current = ifcDataStore;
+
+    return new IfcQuery(ifcDataStore);
+  }, [ifcDataStore]);
+
+  return {
+    loading,
+    progress,
+    error,
+    ifcDataStore,
+    geometryResult,
+    query,
+    loadFile,
+  };
+}

package/src/hooks/useKeyboardShortcuts.ts

@@ -0,0 +1,142 @@
+/* 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/. */
+
+/**
+ * Global keyboard shortcuts for the viewer
+ */
+
+import { useEffect, useCallback } from 'react';
+import { useViewerStore } from '@/store';
+
+interface KeyboardShortcutsOptions {
+  enabled?: boolean;
+}
+
+export function useKeyboardShortcuts(options: KeyboardShortcutsOptions = {}) {
+  const { enabled = true } = options;
+
+  const selectedEntityId = useViewerStore((s) => s.selectedEntityId);
+  const setSelectedEntityId = useViewerStore((s) => s.setSelectedEntityId);
+  const setActiveTool = useViewerStore((s) => s.setActiveTool);
+  const isolateEntity = useViewerStore((s) => s.isolateEntity);
+  const hideEntity = useViewerStore((s) => s.hideEntity);
+  const showAll = useViewerStore((s) => s.showAll);
+  const toggleTheme = useViewerStore((s) => s.toggleTheme);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    // Ignore if typing in an input or textarea
+    const target = e.target as HTMLElement;
+    if (
+      target.tagName === 'INPUT' ||
+      target.tagName === 'TEXTAREA' ||
+      target.isContentEditable
+    ) {
+      return;
+    }
+
+    // Get modifier keys
+    const ctrl = e.ctrlKey || e.metaKey;
+    const shift = e.shiftKey;
+    const key = e.key.toLowerCase();
+
+    // Navigation tools
+    if (key === 'v' && !ctrl && !shift) {
+      e.preventDefault();
+      setActiveTool('select');
+    }
+    if (key === 'p' && !ctrl && !shift) {
+      e.preventDefault();
+      setActiveTool('pan');
+    }
+    if (key === 'o' && !ctrl && !shift) {
+      e.preventDefault();
+      setActiveTool('orbit');
+    }
+    if (key === 'c' && !ctrl && !shift) {
+      e.preventDefault();
+      setActiveTool('walk');
+    }
+    if (key === 'm' && !ctrl && !shift) {
+      e.preventDefault();
+      setActiveTool('measure');
+    }
+    if (key === 'x' && !ctrl && !shift) {
+      e.preventDefault();
+      setActiveTool('section');
+    }
+    if (key === 'b' && !ctrl && !shift) {
+      e.preventDefault();
+      setActiveTool('boxselect');
+    }
+
+    // Visibility controls
+    if (key === 'i' && !ctrl && !shift && selectedEntityId) {
+      e.preventDefault();
+      isolateEntity(selectedEntityId);
+    }
+    if ((key === 'delete' || key === 'backspace') && !ctrl && !shift && selectedEntityId) {
+      e.preventDefault();
+      hideEntity(selectedEntityId);
+    }
+    if (key === 'a' && !ctrl && !shift) {
+      e.preventDefault();
+      showAll();
+    }
+
+    // Selection - Escape clears selection and switches to select tool
+    if (key === 'escape') {
+      e.preventDefault();
+      setSelectedEntityId(null);
+      showAll();
+      setActiveTool('select');
+    }
+
+    // Theme toggle
+    if (key === 't' && !ctrl && !shift) {
+      e.preventDefault();
+      toggleTheme();
+    }
+
+    // Help - handled by KeyboardShortcutsDialog hook
+    // The dialog hook listens for '?' key globally
+  }, [
+    selectedEntityId,
+    setSelectedEntityId,
+    setActiveTool,
+    isolateEntity,
+    hideEntity,
+    showAll,
+    toggleTheme,
+  ]);
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [enabled, handleKeyDown]);
+}
+
+// Export shortcut definitions for UI display
+export const KEYBOARD_SHORTCUTS = [
+  { key: 'V', description: 'Select tool', category: 'Tools' },
+  { key: 'B', description: 'Box select tool', category: 'Tools' },
+  { key: 'P', description: 'Pan tool', category: 'Tools' },
+  { key: 'O', description: 'Orbit tool', category: 'Tools' },
+  { key: 'C', description: 'Walk mode', category: 'Tools' },
+  { key: 'M', description: 'Measure tool', category: 'Tools' },
+  { key: 'X', description: 'Section tool', category: 'Tools' },
+  { key: 'I', description: 'Isolate selection', category: 'Visibility' },
+  { key: 'Del', description: 'Hide selection', category: 'Visibility' },
+  { key: 'A', description: 'Show all', category: 'Visibility' },
+  { key: 'H', description: 'Home (Isometric view)', category: 'Camera' },
+  { key: 'Z', description: 'Fit all (zoom extents)', category: 'Camera' },
+  { key: 'F', description: 'Frame selection', category: 'Camera' },
+  { key: '0-6', description: 'Preset views', category: 'Camera' },
+  { key: 'T', description: 'Toggle theme', category: 'UI' },
+  { key: 'Esc', description: 'Clear selection & switch to Select tool', category: 'Selection' },
+  { key: '?', description: 'Show keyboard shortcuts', category: 'Help' },
+] as const;