@ifc-lite/viewer 1.24.0 → 1.25.1

package/src/components/viewer/Drawing2DCanvas.tsx

@@ -9,10 +9,12 @@ import {
   type Drawing2D,
   type ElementData,
 } from '@ifc-lite/drawing-2d';
+import type { DrawingLine2D } from '@ifc-lite/renderer';
 import { formatDistance } from './tools/formatDistance';
 import { formatArea, computePolygonCentroid } from './tools/computePolygonArea';
 import { drawCloudOnCanvas } from './tools/cloudPathGenerator';
 import type { PolygonArea2DResult, TextAnnotation2D, CloudAnnotation2D, Annotation2DTool, Point2D, SelectedAnnotation2D } from '@/store/slices/drawing2DSlice';
+import type { AnnotationFill2D, AnnotationText2D } from '@/hooks/useSymbolicAnnotations';
 
 // Fill colors for IFC types (architectural convention)
 const IFC_TYPE_FILL_COLORS: Record<string, string> = {
@@ -53,6 +55,142 @@ export function getFillColorForType(ifcType: string): string {
   return IFC_TYPE_FILL_COLORS[ifcType] || IFC_TYPE_FILL_COLORS.default;
 }
 
+// ─── IFC annotation overlay helpers (issue #812) ─────────────────────────────
+
+/** Linear sRGB straight-alpha [0..1] tuple → CSS `rgba(...)`. */
+function rgbaToCss(c: readonly [number, number, number, number]): string {
+  const r = Math.round(Math.max(0, Math.min(1, c[0])) * 255);
+  const g = Math.round(Math.max(0, Math.min(1, c[1])) * 255);
+  const b = Math.round(Math.max(0, Math.min(1, c[2])) * 255);
+  return `rgba(${r}, ${g}, ${b}, ${Math.max(0, Math.min(1, c[3]))})`;
+}
+
+/**
+ * Map IFC `BoxAlignment` to canvas2d `textAlign` + `textBaseline`. Mirrors
+ * the renderer's `parseBoxAlignment` semantics so the 2D overlay anchors
+ * text the same way the 3D pipeline does. Unknown / empty strings default
+ * to bottom-left (IFC4 IfcTextLiteralWithExtent default).
+ */
+function alignmentToCanvas(s: string): { align: CanvasTextAlign; baseline: CanvasTextBaseline } {
+  const norm = (s ?? '').toLowerCase().trim();
+  let align: CanvasTextAlign = 'left';
+  let baseline: CanvasTextBaseline = 'alphabetic';
+  if (norm.includes('right')) align = 'right';
+  else if (norm.includes('center')) align = 'center';
+  if (norm.includes('top')) baseline = 'top';
+  else if (norm.includes('middle') || (norm.includes('center') && !norm.includes('center-'))) baseline = 'middle';
+  return { align, baseline };
+}
+
+/**
+ * Render IFC annotation fills, lines, and text into the canvas, in screen
+ * pixels. The caller supplies:
+ *   - `modelToScreen` – drawing-coord → screen-pixel conversion (accounts
+ *     for axis flips and sheet-mode paper scale)
+ *   - `mmLineToScreen` – mm line weight → screen px stroke width
+ *   - `worldHeightToScreenPx` – world-units text height → screen px font size
+ *
+ * Called from both the sheet-mode and direct-mode render paths in
+ * `Drawing2DCanvas`. Splitting it out keeps the two paths in sync without
+ * duplicating ~80 lines of canvas calls.
+ *
+ * Text rendering uses identity transform (no canvas rotate-with-scale) so
+ * `direct mode`'s y-flip doesn't mirror glyphs. The baseline direction is
+ * recovered in screen space from `dirX/dirY` mapped through `modelToScreen`.
+ */
+function drawIfcAnnotationsScreenSpace(
+  ctx: CanvasRenderingContext2D,
+  lines: readonly DrawingLine2D[] | undefined,
+  texts: readonly AnnotationText2D[] | undefined,
+  fills: readonly AnnotationFill2D[] | undefined,
+  modelToScreen: (x: number, y: number) => { x: number; y: number },
+  mmLineToScreen: (mmWeight: number) => number,
+  worldHeightToScreenPx: (worldHeight: number) => number,
+): void {
+  // Fills first so lines/text composite cleanly on top.
+  if (fills && fills.length > 0) {
+    for (const fill of fills) {
+      const pts = fill.points;
+      if (pts.length < 6) continue;
+      const holes = fill.holesOffsets;
+
+      ctx.fillStyle = rgbaToCss(fill.color);
+      ctx.beginPath();
+
+      // Outer ring runs from index 0 up to the first hole offset (or end of
+      // points if no holes). Each hole offset is a vertex index where the
+      // next ring starts. Path subpaths use moveTo + lineTo + closePath; the
+      // even-odd fill rule handles the holes.
+      const ringStarts: number[] = [0];
+      for (let i = 0; i < holes.length; i++) ringStarts.push(holes[i]);
+      ringStarts.push(pts.length / 2); // sentinel end
+
+      for (let ri = 0; ri < ringStarts.length - 1; ri++) {
+        const start = ringStarts[ri];
+        const end = ringStarts[ri + 1];
+        if (end - start < 3) continue;
+        const first = modelToScreen(pts[start * 2], pts[start * 2 + 1]);
+        ctx.moveTo(first.x, first.y);
+        for (let i = start + 1; i < end; i++) {
+          const p = modelToScreen(pts[i * 2], pts[i * 2 + 1]);
+          ctx.lineTo(p.x, p.y);
+        }
+        ctx.closePath();
+      }
+      ctx.fill('evenodd');
+    }
+  }
+
+  if (lines && lines.length > 0) {
+    // Slightly heavier than the drawing-2d 'annotation' category (0.13 mm)
+    // so coplanar overlays read clearly against the cut polygons beneath.
+    // This is the 2D equivalent of the 3D thicker-lines suggestion in #812.
+    const lineWidthMm = 0.2;
+    ctx.strokeStyle = '#000000';
+    ctx.lineWidth = mmLineToScreen(lineWidthMm);
+    ctx.setLineDash([]);
+    ctx.beginPath();
+    for (const ln of lines) {
+      const a = modelToScreen(ln.line.start.x, ln.line.start.y);
+      const b = modelToScreen(ln.line.end.x, ln.line.end.y);
+      ctx.moveTo(a.x, a.y);
+      ctx.lineTo(b.x, b.y);
+    }
+    ctx.stroke();
+  }
+
+  if (texts && texts.length > 0) {
+    for (const t of texts) {
+      if (!t.content) continue;
+      const anchor = modelToScreen(t.x, t.y);
+      // Recover baseline direction in SCREEN space. modelToScreen may flip
+      // axes (e.g. direct-mode flips Y), so atan2(dirY, dirX) on raw model
+      // dirs would draw the text mirrored on those axes.
+      const baselineEnd = modelToScreen(t.x + t.dirX, t.y + t.dirY);
+      const sx = baselineEnd.x - anchor.x;
+      const sy = baselineEnd.y - anchor.y;
+      const angle = Math.abs(sx) + Math.abs(sy) > 1e-6 ? Math.atan2(sy, sx) : 0;
+
+      const fontPx = t.targetPx && t.targetPx > 0 ? t.targetPx : worldHeightToScreenPx(t.height);
+      const { align, baseline } = alignmentToCanvas(t.alignment);
+      // Multi-line literals stack downward in world Y in 3D. In 2D screen
+      // space the equivalent is `+ fontPx` per line below the anchor along
+      // the baseline-perpendicular (handled by the canvas rotate below).
+      const lineOffsetPx = (t.lineYOffset ?? 0) * (fontPx / Math.max(1e-6, t.height));
+
+      ctx.save();
+      ctx.fillStyle = t.color ? rgbaToCss(t.color) : '#000000';
+      ctx.font = `${fontPx}px system-ui, sans-serif`;
+      ctx.textAlign = align;
+      ctx.textBaseline = baseline;
+      ctx.translate(anchor.x, anchor.y);
+      ctx.rotate(angle);
+      ctx.fillText(t.content, 0, lineOffsetPx);
+      ctx.restore();
+    }
+  }
+}
+
 // Static constants to avoid creating new objects/arrays on every render
 const CANVAS_STYLE = { imageRendering: 'crisp-edges' as const };
 const EMPTY_MEASURE_RESULTS: Measure2DResultData[] = [];
@@ -97,6 +235,10 @@ interface Drawing2DCanvasProps {
   cloudAnnotations?: CloudAnnotation2D[];
   // Selection
   selectedAnnotation?: SelectedAnnotation2D | null;
+  // IFC annotation overlay (issue #812)
+  ifcAnnotationLines?: readonly DrawingLine2D[];
+  ifcAnnotationTexts?: readonly AnnotationText2D[];
+  ifcAnnotationFills?: readonly AnnotationFill2D[];
 }
 
 export function Drawing2DCanvas({
@@ -126,6 +268,9 @@ export function Drawing2DCanvas({
   cloudAnnotationPoints = [],
   cloudAnnotations = [],
   selectedAnnotation = null,
+  ifcAnnotationLines,
+  ifcAnnotationTexts,
+  ifcAnnotationFills,
 }: Drawing2DCanvasProps): React.ReactElement {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
@@ -630,6 +775,17 @@ export function Drawing2DCanvas({
           ctx.stroke();
           ctx.setLineDash([]);
         }
+
+        // IFC annotation overlay (issue #812)
+        drawIfcAnnotationsScreenSpace(
+          ctx,
+          ifcAnnotationLines,
+          ifcAnnotationTexts,
+          ifcAnnotationFills,
+          modelToScreen,
+          (mm) => Math.max(0.5, mmToScreen(mm) * 0.3),
+          (worldHeight) => Math.max(8, worldHeight * drawingTransform.scaleFactor * transform.scale),
+        );
       };
 
       drawModelContent();
@@ -945,6 +1101,27 @@ export function Drawing2DCanvas({
       }
 
       ctx.restore();
+
+      // IFC annotation overlay (issue #812). Rendered after ctx.restore so we
+      // can size lines and text in screen pixels rather than fighting the
+      // ctx.scale applied above (which would inverse-scale everything).
+      const directScaleX = sectionAxis === 'side' ? -transform.scale : transform.scale;
+      const directScaleY = sectionAxis === 'down' ? transform.scale : -transform.scale;
+      drawIfcAnnotationsScreenSpace(
+        ctx,
+        ifcAnnotationLines,
+        ifcAnnotationTexts,
+        ifcAnnotationFills,
+        (x, y) => ({ x: x * directScaleX + transform.x, y: y * directScaleY + transform.y }),
+        // No paper scale here: take a baseline 0.3 px per "default mm" so
+        // weights match the heavier projection lines visually. Annotation
+        // strokes in IFC are intentionally lighter than projection lines,
+        // but a hair too thin on a 1× screen disappears entirely.
+        (mmWeight) => Math.max(0.5, mmWeight * transform.scale * 0.3),
+        // World height directly to screen pixels through the active zoom.
+        // 8 px floor so labels stay legible when zoomed way out.
+        (worldHeight) => Math.max(8, worldHeight * transform.scale),
+      );
     }
 
     // ═══════════════════════════════════════════════════════════════════════
@@ -1399,7 +1576,7 @@ export function Drawing2DCanvas({
         }
       }
     }
-  }, [drawing, transform, showHiddenLines, canvasSize, overrideEngine, overridesEnabled, entityColorMap, useIfcMaterials, measureMode, measureStart, measureCurrent, measureResults, measureSnapPoint, sheetEnabled, activeSheet, sectionAxis, isPinned, annotation2DActiveTool, annotation2DCursorPos, polygonAreaPoints, polygonAreaResults, textAnnotations, textAnnotationEditing, cloudAnnotationPoints, cloudAnnotations, selectedAnnotation]);
+  }, [drawing, transform, showHiddenLines, canvasSize, overrideEngine, overridesEnabled, entityColorMap, useIfcMaterials, measureMode, measureStart, measureCurrent, measureResults, measureSnapPoint, sheetEnabled, activeSheet, sectionAxis, isPinned, annotation2DActiveTool, annotation2DCursorPos, polygonAreaPoints, polygonAreaResults, textAnnotations, textAnnotationEditing, cloudAnnotationPoints, cloudAnnotations, selectedAnnotation, ifcAnnotationLines, ifcAnnotationTexts, ifcAnnotationFills]);
 
   return (
     <canvas

package/src/components/viewer/LensPanel.tsx

@@ -44,6 +44,7 @@ const TYPE_LABELS: Record<string, string> = {
   quantity: 'Quantity',
   classification: 'Classification',
   material: 'Material',
+  model: 'Model',
 };
 
 interface LensPanelProps {
@@ -285,6 +286,11 @@ function RuleEditor({
   onRequestDiscovery: (categories: { properties?: boolean; quantities?: boolean; classifications?: boolean; materials?: boolean }) => void;
 }) {
   const criteriaType = rule.criteria.type;
+  const loadedModels = useViewerStore((s) => s.models);
+  const modelOptions = useMemo(
+    () => Array.from(loadedModels.values()).sort((a, b) => a.name.localeCompare(b.name)),
+    [loadedModels],
+  );
 
   // Trigger lazy discovery when user selects a criteria type that needs it
   useEffect(() => {
@@ -300,6 +306,18 @@ function RuleEditor({
     }
   }, [criteriaType, discovered, onRequestDiscovery]);
 
+  // Auto-populate the single available model so the selector-hidden branch
+  // doesn't leave a model rule permanently invalid.
+  useEffect(() => {
+    if (criteriaType !== 'model') return;
+    if (modelOptions.length !== 1) return;
+    if (rule.criteria.modelId) return;
+    const updated = { ...rule.criteria, modelId: modelOptions[0].id };
+    onChange({ criteria: updated, name: deriveRuleName(updated) });
+    // deriveRuleName is stable for this render; depending on rule.criteria/onChange is enough.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [criteriaType, modelOptions, rule.criteria, onChange]);
+
   // Derived lists from discovered data
   const ifcClasses = useMemo(() => discovered?.classes ?? [], [discovered]);
   const psetNames = useMemo((): string[] => {
@@ -350,6 +368,9 @@ function RuleEditor({
       case 'material':
         base.materialName = '';
         break;
+      case 'model':
+        base.modelId = modelOptions.length === 1 ? modelOptions[0].id : '';
+        break;
     }
     onChange({ criteria: base, name: rule.name === 'New Rule' ? TYPE_LABELS[newType] : rule.name });
   };
@@ -363,6 +384,10 @@ function RuleEditor({
       case 'quantity': return criteria.quantityName || 'Quantity';
       case 'classification': return criteria.classificationCode || criteria.classificationSystem || 'Classification';
       case 'material': return criteria.materialName || 'Material';
+      case 'model': {
+        const selected = modelOptions.find(m => m.id === criteria.modelId);
+        return selected?.name || 'Model';
+      }
       default: return 'Rule';
     }
   };
@@ -516,6 +541,30 @@ function RuleEditor({
           />
         )}
 
+        {/* Model: dropdown from loaded federated models */}
+        {criteriaType === 'model' && (
+          modelOptions.length <= 1 ? (
+            <span className="flex-1 min-w-0 text-xs text-zinc-400 dark:text-zinc-500 truncate">
+              {modelOptions.length === 0 ? 'No models loaded' : modelOptions[0]?.name ?? 'Model'}
+            </span>
+          ) : (
+            <select
+              value={rule.criteria.modelId ?? ''}
+              onChange={(e) => {
+                const modelId = e.target.value;
+                const updated = { ...rule.criteria, modelId };
+                onChange({ criteria: updated, name: deriveRuleName(updated) });
+              }}
+              className={cn(selectClass, 'flex-1 min-w-0')}
+            >
+              <option value="">Model...</option>
+              {modelOptions.map(m => (
+                <option key={m.id} value={m.id}>{m.name}</option>
+              ))}
+            </select>
+          )
+        )}
+
         <button
           onClick={onRemove}
           className="text-zinc-400 hover:text-red-500 dark:text-zinc-500 dark:hover:text-red-400 p-0.5 flex-shrink-0"
@@ -644,6 +693,7 @@ function LensEditor({
       case 'quantity': return !!c.quantitySet && !!c.quantityName;
       case 'classification': return !!c.classificationSystem || !!c.classificationCode;
       case 'material': return !!c.materialName;
+      case 'model': return !!c.modelId;
       default: return false;
     }
   };

package/src/components/viewer/Section2DPanel.tsx

@@ -12,7 +12,7 @@
  */
 
 import React, { useCallback, useRef, useState, useEffect, useMemo } from 'react';
-import { X, Download, Eye, EyeOff, Maximize2, ZoomIn, ZoomOut, Loader2, Printer, GripVertical, MoreHorizontal, RefreshCw, Pin, PinOff, Palette, Ruler, Trash2, FileText, Shapes, Box, PenTool, Hexagon, Type, Cloud, MousePointer2 } from 'lucide-react';
+import { X, Download, Eye, EyeOff, Maximize2, ZoomIn, ZoomOut, Loader2, Printer, GripVertical, MoreHorizontal, RefreshCw, Pin, PinOff, Palette, Ruler, Trash2, FileText, Shapes, Box, PenTool, Hexagon, Type, Cloud, MousePointer2, Tag } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -31,11 +31,12 @@ import { SheetSetupPanel } from './SheetSetupPanel';
 import { TitleBlockEditor } from './TitleBlockEditor';
 import { TextAnnotationEditor } from './TextAnnotationEditor';
 import { Drawing2DCanvas } from './Drawing2DCanvas';
-import { useDrawingGeneration } from '@/hooks/useDrawingGeneration';
+import { useDrawingGeneration, AXIS_MAP, ANNOTATION_VIEW_DEPTH } from '@/hooks/useDrawingGeneration';
 import { useMeasure2D } from '@/hooks/useMeasure2D';
 import { useAnnotation2D } from '@/hooks/useAnnotation2D';
 import { useViewControls } from '@/hooks/useViewControls';
 import { useDrawingExport } from '@/hooks/useDrawingExport';
+import { useSymbolicAnnotationsForDrawing } from '@/hooks/useSymbolicAnnotations';
 
 interface Section2DPanelProps {
   mergedGeometry?: GeometryResult | null;
@@ -279,6 +280,47 @@ export function Section2DPanel({
     setMeasure2DSnapPoint, cancelMeasure2D, completeMeasure2D,
   });
 
+  // ─── IFC annotation overlay (issue #812) ──────────────────────────────────
+  // Re-derive the section's world-coord cut position from the same bounds
+  // useDrawingGeneration uses, so the annotation filter stays in lockstep
+  // with the cut. Empty/missing bounds collapse to an inert range → hook
+  // returns empty, the overlay simply does nothing.
+  const ifcAnnotationsForDrawing = useMemo(() => {
+    const bounds = geometryResult?.coordinateInfo?.shiftedBounds;
+    if (!bounds) {
+      return { sectionPosWorld: 0, viewDepth: 0, fallbackY: 0 };
+    }
+    const axis = AXIS_MAP[sectionPlane.axis];
+    const axisMin = bounds.min[axis];
+    const axisMax = bounds.max[axis];
+    const sectionPosWorld = axisMin + (sectionPlane.position / 100) * (axisMax - axisMin);
+    // IFC annotations get a tight 1.2 m view-depth slab — typical plan-view
+    // convention so dimension chains from the next storey don't stack onto
+    // the cut floor. The body cutter still uses half-extent for its own
+    // projection edges; the slab is annotation-specific.
+    const viewDepth = ANNOTATION_VIEW_DEPTH;
+    // For loose annotations (no resolvable storey), fall back to mid-Y like
+    // the 3D viewport does. This lets storeyless models still surface their
+    // annotations on the relevant section.
+    const yMin = bounds.min.y;
+    const yMax = bounds.max.y;
+    const fallbackY = Number.isFinite(yMin) && Number.isFinite(yMax) ? (yMin + yMax) * 0.5 : 0;
+    return { sectionPosWorld, viewDepth, fallbackY };
+  }, [geometryResult, sectionPlane.axis, sectionPlane.position]);
+
+  const ifcAnnotationData = useSymbolicAnnotationsForDrawing({
+    enabled: displayOptions.showIfcAnnotations && status === 'ready',
+    axis: sectionPlane.axis,
+    sectionPosWorld: ifcAnnotationsForDrawing.sectionPosWorld,
+    viewDepth: ifcAnnotationsForDrawing.viewDepth,
+    flipped: sectionPlane.flipped,
+    fallbackY: ifcAnnotationsForDrawing.fallbackY,
+  });
+
+  const toggleIfcAnnotations = useCallback(() => {
+    updateDisplayOptions({ showIfcAnnotations: !displayOptions.showIfcAnnotations });
+  }, [displayOptions.showIfcAnnotations, updateDisplayOptions]);
+
   const annotationHandlers = useAnnotation2D({
     drawing, viewTransform, sectionAxis: sectionPlane.axis, containerRef,
     activeTool: annotation2DActiveTool, setActiveTool: setAnnotation2DActiveTool,
@@ -536,6 +578,17 @@ export function Section2DPanel({
                 {displayOptions.useSymbolicRepresentations ? <Shapes className="h-4 w-4" /> : <Box className="h-4 w-4" />}
               </Button>
 
+              {/* IFC Annotations overlay toggle (issue #812) */}
+              <Button
+                variant={displayOptions.showIfcAnnotations ? 'default' : 'ghost'}
+                size="icon-sm"
+                onClick={toggleIfcAnnotations}
+                title={displayOptions.showIfcAnnotations ? 'Hide IFC annotations on this section' : 'Show IFC annotations on this section'}
+                disabled={sectionPlane.axis !== 'down'}
+              >
+                <Tag className="h-4 w-4" />
+              </Button>
+
               {/* Annotation Tools Dropdown */}
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
@@ -703,6 +756,10 @@ export function Section2DPanel({
                     {displayOptions.useSymbolicRepresentations ? <Shapes className="h-4 w-4 mr-2" /> : <Box className="h-4 w-4 mr-2" />}
                     {displayOptions.useSymbolicRepresentations ? 'Symbolic (Plan)' : 'Section Cut (Body)'}
                   </DropdownMenuItem>
+                  <DropdownMenuItem onClick={toggleIfcAnnotations} disabled={sectionPlane.axis !== 'down'}>
+                    <Tag className="h-4 w-4 mr-2" />
+                    IFC Annotations {displayOptions.showIfcAnnotations ? 'On' : 'Off'}
+                  </DropdownMenuItem>
                   <DropdownMenuItem onClick={() => setAnnotation2DActiveTool('none')}>
                     <MousePointer2 className="h-4 w-4 mr-2" />
                     Select / Pan {annotation2DActiveTool === 'none' ? '(On)' : ''}
@@ -849,6 +906,9 @@ export function Section2DPanel({
               cloudAnnotationPoints={cloudAnnotation2DPoints}
               cloudAnnotations={cloudAnnotations2D}
               selectedAnnotation={selectedAnnotation2D}
+              ifcAnnotationLines={ifcAnnotationData.lines}
+              ifcAnnotationTexts={ifcAnnotationData.texts}
+              ifcAnnotationFills={ifcAnnotationData.fills}
             />
             {/* Subtle updating indicator - shows while regenerating without hiding the drawing */}
             {isRegenerating && (

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

@@ -18,8 +18,14 @@ import {
   MousePointer2,
   Focus,
   EyeOff,
+  Crosshair,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
 import {
@@ -46,6 +52,8 @@ export interface BCFTopicDetailProps {
   onActivateViewpoint: (viewpoint: BCFViewpoint) => void;
   onDeleteViewpoint: (viewpointGuid: string) => void;
   onUpdateStatus: (status: string) => void;
+  onZoomToTopic: () => void;
+  canZoomToTopic: boolean;
   onDeleteTopic: () => void;
   // Viewer state info for capture feedback
   selectionCount: number;
@@ -65,6 +73,8 @@ export function BCFTopicDetail({
   onActivateViewpoint,
   onDeleteViewpoint,
   onUpdateStatus,
+  onZoomToTopic,
+  canZoomToTopic,
   onDeleteTopic,
   selectionCount,
   hasIsolation,
@@ -107,6 +117,20 @@ export function BCFTopicDetail({
           <ChevronLeft className="h-4 w-4" />
         </Button>
         <h3 className="font-medium text-sm flex-1 truncate">{topic.title}</h3>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onZoomToTopic}
+              disabled={!canZoomToTopic}
+              aria-label="Zoom to topic"
+            >
+              <Crosshair className="h-4 w-4" aria-hidden />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Zoom to</TooltipContent>
+        </Tooltip>
         <Button
           variant="ghost"
           size="sm"

package/src/hooks/useBCF.ts

@@ -13,13 +13,15 @@
 
 import { useCallback, useRef } from 'react';
 import { useViewerStore } from '@/store';
-import type { BCFViewpoint } from '@ifc-lite/bcf';
+import type { BCFTopic, BCFViewpoint } from '@ifc-lite/bcf';
 import {
   createViewpoint,
   extractViewpointState,
+  computeMarkerPositions,
   type ViewerCameraState,
   type ViewerSectionPlane,
   type ViewerBounds,
+  type OverlayBBox,
 } from '@ifc-lite/bcf';
 import type { Renderer } from '@ifc-lite/renderer';
 import {
@@ -52,6 +54,10 @@ interface UseBCFResult {
   createViewpointFromState: (options?: CreateViewpointOptions) => Promise<BCFViewpoint | null>;
   /** Apply a viewpoint to the viewer */
   applyViewpoint: (viewpoint: BCFViewpoint, animate?: boolean) => void;
+  /** Animate the camera to a BCF topic's 3D location (without changing selection/visibility) */
+  zoomToTopic: (topic: BCFTopic) => void;
+  /** Whether a topic has enough data to zoom to */
+  canZoomToTopic: (topic: BCFTopic) => boolean;
   /** Capture a snapshot from the canvas */
   captureSnapshot: () => Promise<string | null>;
   /** Set the canvas ref for snapshot capture */
@@ -96,6 +102,21 @@ export function clearGlobalRefs(): void {
   globalRendererRef = null;
 }
 
+/** Apply extracted BCF camera state without touching selection, visibility, or section plane. */
+function applyCameraState(
+  renderer: Renderer,
+  camera: NonNullable<ReturnType<typeof extractViewpointState>['camera']>,
+  animate: boolean,
+): void {
+  const rendererCamera = renderer.getCamera();
+  if (animate) {
+    rendererCamera.animateTo(camera.position, camera.target, 300);
+  } else {
+    rendererCamera.setPosition(camera.position.x, camera.position.y, camera.position.z);
+    rendererCamera.setTarget(camera.target.x, camera.target.y, camera.target.z);
+  }
+}
+
 // ============================================================================
 // Hook
 // ============================================================================
@@ -351,6 +372,28 @@ export function useBCF(options: UseBCFOptions = {}): UseBCFResult {
     ]
   );
 
+  /** Restore only the viewpoint camera (used by zoom-to-topic fallback). */
+  const applyViewpointCamera = useCallback(
+    (viewpoint: BCFViewpoint, animate = true) => {
+      const renderer = getRenderer();
+      if (!renderer) {
+        console.warn('[useBCF] Cannot apply viewpoint camera: no renderer');
+        return;
+      }
+
+      const bounds = getBounds() ?? undefined;
+      const state = extractViewpointState(
+        viewpoint,
+        bounds,
+        renderer.getCamera().getDistance(),
+      );
+      if (state.camera) {
+        applyCameraState(renderer, state.camera, animate);
+      }
+    },
+    [getRenderer, getBounds],
+  );
+
   /**
    * Apply a viewpoint to the viewer
    */
@@ -372,22 +415,8 @@ export function useBCF(options: UseBCFOptions = {}): UseBCFResult {
       );
       const { camera, sectionPlane: viewpointSectionPlane } = state;
 
-      // Apply camera
       if (camera) {
-        const rendererCamera = renderer.getCamera();
-
-        if (animate) {
-          // Animate to new position
-          rendererCamera.animateTo(
-            camera.position,
-            camera.target,
-            300 // 300ms animation
-          );
-        } else {
-          // Set immediately
-          rendererCamera.setPosition(camera.position.x, camera.position.y, camera.position.z);
-          rendererCamera.setTarget(camera.target.x, camera.target.y, camera.target.z);
-        }
+        applyCameraState(renderer, camera, animate);
       }
 
       // Apply section plane
@@ -482,9 +511,62 @@ export function useBCF(options: UseBCFOptions = {}): UseBCFResult {
     ]
   );
 
+  const canZoomToTopic = useCallback((topic: BCFTopic): boolean => {
+    return topic.viewpoints.length > 0;
+  }, []);
+
+  const zoomToTopic = useCallback(
+    (topic: BCFTopic) => {
+      const renderer = getRenderer();
+      if (!renderer || topic.viewpoints.length === 0) return;
+
+      const boundsLookup = (ifcGuid: string): OverlayBBox | null => {
+        const result = globalIdToExpressId(ifcGuid);
+        if (!result) return null;
+        return renderer.getScene().getEntityBoundingBox(result.expressId);
+      };
+
+      const markers = computeMarkerPositions([topic], boundsLookup, {
+        targetDistance: renderer.getCamera().getDistance(),
+      });
+
+      if (markers.length > 0) {
+        const marker = markers[0];
+
+        if (marker.positionSource === 'component') {
+          for (let i = topic.viewpoints.length - 1; i >= 0; i--) {
+            const vp = topic.viewpoints[i];
+            const guids = [
+              ...(vp.components?.selection ?? []),
+              ...(vp.components?.visibility?.exceptions ?? []),
+            ];
+            for (const comp of guids) {
+              if (!comp.ifcGuid) continue;
+              const bbox = boundsLookup(comp.ifcGuid);
+              if (bbox) {
+                void renderer.getCamera().frameBounds(bbox.min, bbox.max);
+                return;
+              }
+            }
+          }
+        }
+
+        const point = marker.connectorAnchor ?? marker.position;
+        void renderer.getCamera().framePoint(point);
+        return;
+      }
+
+      // Fallback: camera from latest viewpoint only — preserve selection/visibility
+      applyViewpointCamera(topic.viewpoints[topic.viewpoints.length - 1], true);
+    },
+    [applyViewpointCamera, getRenderer, globalIdToExpressId],
+  );
+
   return {
     createViewpointFromState,
     applyViewpoint,
+    zoomToTopic,
+    canZoomToTopic,
     captureSnapshot,
     setCanvasRef,
     setRendererRef,