@ifc-lite/viewer 1.16.0 → 1.17.0

package/src/components/viewer/bcf/BCFOverlay.tsx

@@ -0,0 +1,254 @@
+/* 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/. */
+
+/**
+ * BCFOverlay — renders BCF topic markers as 3D-positioned overlays in the viewport.
+ *
+ * Connects:
+ *   - Zustand store (BCF topics, active topic)
+ *   - Renderer (camera projection, entity bounds)
+ *   - BCFOverlayRenderer (pure DOM marker rendering)
+ *   - BCF panel (click marker → open topic, bidirectional sync)
+ *
+ * KEY DESIGN: Bounds lookup queries the renderer Scene directly via a
+ * mutable ref (not React state). Marker computation is triggered by an
+ * `overlayReady` counter that bumps once the renderer is available AND
+ * when loading completes (ensuring bounding boxes are cached).
+ * The camera's current distance is passed as `targetDistance` so fallback
+ * markers land at the orbit center — not at hardcoded 10 units.
+ */
+
+import { useEffect, useRef, useCallback, useMemo, useState } from 'react';
+import { useViewerStore } from '@/store';
+import { getGlobalRenderer } from '@/hooks/useBCF';
+import { globalIdToExpressId as globalIdToExpressIdLookup } from '@/hooks/bcfIdLookup';
+import {
+  computeMarkerPositions,
+  BCFOverlayRenderer,
+  type BCFOverlayProjection,
+  type OverlayBBox,
+  type OverlayPoint3D,
+  type EntityBoundsLookup,
+} from '@ifc-lite/bcf';
+import type { Renderer } from '@ifc-lite/renderer';
+
+// ============================================================================
+// WebGPU projection adapter
+// ============================================================================
+
+function createWebGPUProjection(
+  renderer: Renderer,
+  canvas: HTMLCanvasElement,
+): BCFOverlayProjection {
+  let prevPosX = NaN;
+  let prevPosY = NaN;
+  let prevPosZ = NaN;
+  let prevTgtX = NaN;
+  let prevTgtY = NaN;
+  let prevTgtZ = NaN;
+  let prevWidth = 0;
+  let prevHeight = 0;
+
+  const listeners = new Set<() => void>();
+  let rafId: number | null = null;
+  let listenerCount = 0;
+
+  function poll() {
+    rafId = requestAnimationFrame(poll);
+    const cam = renderer.getCamera();
+    const pos = cam.getPosition();
+    const tgt = cam.getTarget();
+    const w = canvas.clientWidth;
+    const h = canvas.clientHeight;
+
+    if (
+      pos.x !== prevPosX || pos.y !== prevPosY || pos.z !== prevPosZ ||
+      tgt.x !== prevTgtX || tgt.y !== prevTgtY || tgt.z !== prevTgtZ ||
+      w !== prevWidth || h !== prevHeight
+    ) {
+      prevPosX = pos.x; prevPosY = pos.y; prevPosZ = pos.z;
+      prevTgtX = tgt.x; prevTgtY = tgt.y; prevTgtZ = tgt.z;
+      prevWidth = w; prevHeight = h;
+      for (const cb of listeners) cb();
+    }
+  }
+
+  return {
+    projectToScreen(worldPos: OverlayPoint3D) {
+      return renderer.getCamera().projectToScreen(
+        worldPos,
+        canvas.clientWidth,
+        canvas.clientHeight,
+      );
+    },
+
+    getEntityBounds(expressId: number): OverlayBBox | null {
+      return renderer.getScene().getEntityBoundingBox(expressId);
+    },
+
+    getCanvasSize() {
+      return { width: canvas.clientWidth, height: canvas.clientHeight };
+    },
+
+    getCameraPosition(): OverlayPoint3D {
+      return renderer.getCamera().getPosition();
+    },
+
+    onCameraChange(callback: () => void) {
+      listeners.add(callback);
+      listenerCount++;
+      if (listenerCount === 1) rafId = requestAnimationFrame(poll);
+      return () => {
+        listeners.delete(callback);
+        listenerCount--;
+        if (listenerCount === 0 && rafId !== null) {
+          cancelAnimationFrame(rafId);
+          rafId = null;
+        }
+      };
+    },
+  };
+}
+
+// ============================================================================
+// React Component
+// ============================================================================
+
+export function BCFOverlay() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const overlayRef = useRef<BCFOverlayRenderer | null>(null);
+  const rendererRef = useRef<Renderer | null>(null);
+
+  // Bumped when overlay/renderer is ready or geometry finishes loading,
+  // triggering marker recomputation with real bounding boxes.
+  const [overlayReady, setOverlayReady] = useState(0);
+
+  // Store selectors
+  const bcfProject = useViewerStore((s) => s.bcfProject);
+  const activeTopicId = useViewerStore((s) => s.activeTopicId);
+  const setActiveTopic = useViewerStore((s) => s.setActiveTopic);
+  const setBcfPanelVisible = useViewerStore((s) => s.setBcfPanelVisible);
+  const models = useViewerStore((s) => s.models);
+  const loading = useViewerStore((s) => s.loading);
+  const ifcDataStore = useViewerStore((s) => s.ifcDataStore);
+
+  // GlobalId → expressId lookup (delegates to shared utility)
+  const globalIdToExpressId = useCallback(
+    (globalIdString: string) =>
+      globalIdToExpressIdLookup(globalIdString, models, ifcDataStore),
+    [models, ifcDataStore],
+  );
+
+  // Bounds lookup — queries the renderer Scene directly
+  const boundsLookup: EntityBoundsLookup = useCallback(
+    (ifcGuid: string): OverlayBBox | null => {
+      const r = rendererRef.current;
+      if (!r) return null;
+      const result = globalIdToExpressId(ifcGuid);
+      if (!result) return null;
+      return r.getScene().getEntityBoundingBox(result.expressId);
+    },
+    [globalIdToExpressId],
+  );
+
+  // Get current camera distance (for proper fallback marker placement)
+  const getCameraDistance = useCallback((): number => {
+    const r = rendererRef.current;
+    if (!r) return 50; // safe default
+    return r.getCamera().getDistance();
+  }, []);
+
+  // Topics list
+  const topics = (() => {
+    if (!bcfProject) return [];
+    return Array.from(bcfProject.topics.values());
+  })();
+
+  // Compute markers — recomputes when topics, bounds, loading, or readiness changes
+  const markers = useMemo(
+    () => computeMarkerPositions(topics, boundsLookup, {
+      targetDistance: getCameraDistance(),
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [topics, boundsLookup, overlayReady, loading],
+  );
+
+  // Initialize overlay renderer
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const renderer = getGlobalRenderer();
+    if (!renderer) return;
+
+    const canvas = container.closest('[data-viewport]')?.querySelector('canvas') as HTMLCanvasElement | null;
+    if (!canvas) return;
+
+    rendererRef.current = renderer;
+
+    const projection = createWebGPUProjection(renderer, canvas);
+    const overlay = new BCFOverlayRenderer(container, projection, {
+      showConnectors: true,
+      showTooltips: true,
+      verticalOffset: 36,
+    });
+    overlayRef.current = overlay;
+
+    // Trigger marker recomputation now that renderer is available
+    setOverlayReady((n) => n + 1);
+
+    return () => {
+      overlay.dispose();
+      overlayRef.current = null;
+      rendererRef.current = null;
+    };
+  }, [models]);
+
+  // Recompute markers when loading finishes (bounding boxes get cached)
+  useEffect(() => {
+    if (!loading && rendererRef.current) {
+      setOverlayReady((n) => n + 1);
+    }
+  }, [loading]);
+
+  // Push markers to overlay renderer
+  useEffect(() => {
+    overlayRef.current?.setMarkers(markers);
+  }, [markers, overlayReady]);
+
+  // Sync active marker
+  useEffect(() => {
+    overlayRef.current?.setActiveMarker(activeTopicId);
+  }, [activeTopicId, overlayReady]);
+
+  // Visibility — reproject markers when becoming visible so they don't
+  // sit at stale positions until the next camera move.
+  useEffect(() => {
+    const overlay = overlayRef.current;
+    if (!overlay) return;
+    const hasTopics = bcfProject !== null && bcfProject.topics.size > 0;
+    overlay.setVisible(hasTopics);
+    if (hasTopics) overlay.updatePositions();
+  }, [bcfProject, overlayReady]);
+
+  // Click handler — read bcfPanelVisible from store inside callback to
+  // avoid re-registering the handler on every panel toggle.
+  useEffect(() => {
+    const overlay = overlayRef.current;
+    if (!overlay) return;
+    return overlay.onMarkerClick((topicGuid) => {
+      setActiveTopic(topicGuid);
+      const panelVisible = useViewerStore.getState().bcfPanelVisible;
+      if (!panelVisible) setBcfPanelVisible(true);
+    });
+  }, [overlayReady, setActiveTopic, setBcfPanelVisible]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="absolute inset-0 pointer-events-none z-20"
+      data-bcf-overlay
+    />
+  );
+}

package/src/components/viewer/lists/ListPanel.tsx

@@ -34,7 +34,6 @@ import { useViewerStore } from '@/store';
 import { useIfc } from '@/hooks/useIfc';
 import {
   executeList,
-  listResultToCSV,
   LIST_PRESETS,
   importListDefinition,
   exportListDefinition,
@@ -172,18 +171,6 @@ export function ListPanel({ onClose }: ListPanelProps) {
     }
   }, [editingList]);
 
-  const handleExportCSV = useCallback(() => {
-    if (!listResult) return;
-    const csv = listResultToCSV(listResult);
-    const blob = new Blob([csv], { type: 'text/csv' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'list-export.csv';
-    a.click();
-    setTimeout(() => URL.revokeObjectURL(url), 1000);
-  }, [listResult]);
-
   const handleImport = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
@@ -228,14 +215,6 @@ export function ListPanel({ onClose }: ListPanelProps) {
                 </TooltipTrigger>
                 <TooltipContent>Edit Configuration</TooltipContent>
               </Tooltip>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button variant="ghost" size="icon-sm" onClick={handleExportCSV}>
-                    <Download className="h-3.5 w-3.5" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>Export CSV</TooltipContent>
-              </Tooltip>
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button variant="ghost" size="icon-sm" onClick={() => setView('library')}>

package/src/components/viewer/lists/ListResultsTable.tsx

@@ -12,10 +12,14 @@
 
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { ArrowUp, ArrowDown, Search, Palette } from 'lucide-react';
+import { ArrowUp, ArrowDown, Search, Palette, Eye, EyeOff, Download } from 'lucide-react';
 import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useViewerStore } from '@/store';
+import { getVisibleBasketEntityRefsFromStore } from '@/store/basketVisibleSet';
 import type { ListResult, ListRow, CellValue, ColumnDefinition } from '@ifc-lite/lists';
+import { listResultToCSV } from '@ifc-lite/lists';
 import { cn } from '@/lib/utils';
 import { columnToAutoColor } from '@/lib/lists/columnToAutoColor';
 import { AUTO_COLOR_FROM_LIST_ID } from '@/store/slices/lensSlice';
@@ -29,6 +33,7 @@ export function ListResultsTable({ result }: ListResultsTableProps) {
   const [searchQuery, setSearchQuery] = useState('');
   const [sortCol, setSortCol] = useState<number | null>(null);
   const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');
+  const [filterByVisibility, setFilterByVisibility] = useState(true);
 
   const setSelectedEntityId = useViewerStore((s) => s.setSelectedEntityId);
   const setSelectedEntity = useViewerStore((s) => s.setSelectedEntity);
@@ -37,14 +42,49 @@ export function ListResultsTable({ result }: ListResultsTableProps) {
   const activeLensId = useViewerStore((s) => s.activeLensId);
   const [colorByColIdx, setColorByColIdx] = useState<number | null>(null);
 
+  // Subscribe to visibility state so we re-filter when 3D visibility changes
+  const hiddenEntities = useViewerStore((s) => s.hiddenEntities);
+  const isolatedEntities = useViewerStore((s) => s.isolatedEntities);
+  const classFilter = useViewerStore((s) => s.classFilter);
+  const lensHiddenIds = useViewerStore((s) => s.lensHiddenIds);
+  const selectedStoreys = useViewerStore((s) => s.selectedStoreys);
+  const typeVisibility = useViewerStore((s) => s.typeVisibility);
+  const hiddenEntitiesByModel = useViewerStore((s) => s.hiddenEntitiesByModel);
+  const isolatedEntitiesByModel = useViewerStore((s) => s.isolatedEntitiesByModel);
+  const models = useViewerStore((s) => s.models);
+  const activeBasketViewId = useViewerStore((s) => s.activeBasketViewId);
+  const geometryResult = useViewerStore((s) => s.geometryResult);
+
+  // Filter rows by 3D visibility
+  const visibilityFilteredRows = useMemo(() => {
+    if (!filterByVisibility) return result.rows;
+
+    const visibleRefs = getVisibleBasketEntityRefsFromStore();
+    const visibleSet = new Set<string>();
+    for (const ref of visibleRefs) {
+      visibleSet.add(`${ref.modelId}:${ref.expressId}`);
+    }
+
+    return result.rows.filter(row => {
+      // List uses 'default' for single-model, visibility uses 'legacy'
+      const modelId = row.modelId === 'default' ? 'legacy' : row.modelId;
+      return visibleSet.has(`${modelId}:${row.entityId}`);
+    });
+  }, [
+    result.rows, filterByVisibility,
+    hiddenEntities, isolatedEntities, classFilter, lensHiddenIds,
+    selectedStoreys, typeVisibility, hiddenEntitiesByModel,
+    isolatedEntitiesByModel, models, activeBasketViewId, geometryResult,
+  ]);
+
   // Filter rows by search query
   const filteredRows = useMemo(() => {
-    if (!searchQuery) return result.rows;
+    if (!searchQuery) return visibilityFilteredRows;
     const q = searchQuery.toLowerCase();
-    return result.rows.filter(row =>
+    return visibilityFilteredRows.filter(row =>
       row.values.some(v => v !== null && String(v).toLowerCase().includes(q))
     );
-  }, [result.rows, searchQuery]);
+  }, [visibilityFilteredRows, searchQuery]);
 
   // Sort rows
   const sortedRows = useMemo(() => {
@@ -74,6 +114,23 @@ export function ListResultsTable({ result }: ListResultsTableProps) {
     setColorByColIdx(colIdx);
   }, [activateAutoColorFromColumn]);
 
+  const handleExportCSV = useCallback(() => {
+    const exportResult: ListResult = {
+      columns: result.columns,
+      rows: sortedRows,
+      totalCount: sortedRows.length,
+      executionTime: result.executionTime,
+    };
+    const csv = listResultToCSV(exportResult);
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'list-export.csv';
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  }, [result.columns, result.executionTime, sortedRows]);
+
   const handleRowClick = useCallback((row: ListRow) => {
     setSelectedEntity({ modelId: row.modelId, expressId: row.entityId });
     // For single-model, selectedEntityId is the expressId
@@ -111,8 +168,39 @@ export function ListResultsTable({ result }: ListResultsTableProps) {
           className="h-7 text-xs border-0 shadow-none focus-visible:ring-0 px-0"
         />
         <span className="text-xs text-muted-foreground whitespace-nowrap">
-          {sortedRows.length}{searchQuery ? ` / ${result.rows.length}` : ''} rows
+          {sortedRows.length}{(searchQuery || filterByVisibility) ? ` / ${result.rows.length}` : ''} rows
         </span>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              className={cn(
+                'h-6 w-6 shrink-0',
+                filterByVisibility && 'text-primary',
+              )}
+              onClick={() => setFilterByVisibility(prev => !prev)}
+            >
+              {filterByVisibility ? <Eye className="h-3.5 w-3.5" /> : <EyeOff className="h-3.5 w-3.5" />}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            {filterByVisibility ? 'Showing visible objects only' : 'Showing all objects'}
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              className="h-6 w-6 shrink-0"
+              onClick={handleExportCSV}
+            >
+              <Download className="h-3.5 w-3.5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Export CSV</TooltipContent>
+        </Tooltip>
       </div>
 
       {/* Table */}