@ifc-lite/viewer 1.24.0 → 1.25.0

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 } 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,43 @@ 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);
+    const viewDepth = (axisMax - axisMin) * 0.5; // matches useDrawingGeneration's maxDepth
+    // 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 +574,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 +752,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 +902,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/hooks/useSymbolicAnnotations.ts

@@ -604,6 +604,107 @@ export interface AnnotationFill3D {
 const EMPTY_TEXTS: readonly AnnotationText3D[] = Object.freeze([]);
 const EMPTY_FILLS: readonly AnnotationFill3D[] = Object.freeze([]);
 
+/**
+ * Hook for the 2D Section panel: filters the shared parse cache to
+ * annotations whose world position falls inside the section's view-range
+ * on the cut axis, returning data in the Drawing2D coordinate frame.
+ *
+ * For `axis='down'` (floor plan), the parser's 2D coords already match
+ * the drawing-2d coord frame directly (x = world x, y = world z, with
+ * worldY = the cut axis). For elevation views (`axis='front'`,
+ * `axis='side'`), this hook returns empty: most authored IFC annotations
+ * are floor-plan symbols (dimensions, leaders, room labels) and don't
+ * project meaningfully onto a vertical drawing without a separate
+ * reorientation pass. Wiring those up cleanly is a follow-up.
+ *
+ * The section position is in world units (already converted from the
+ * 0-100% slider via `axisMin + (position / 100) * (axisMax - axisMin)`
+ * by the caller — Section2DPanel computes the same value to feed the
+ * drawing generator).
+ */
+export interface DrawingAnnotationData {
+  lines: DrawingLine2D[];
+  texts: AnnotationText2D[];
+  fills: AnnotationFill2D[];
+}
+
+const EMPTY_DRAWING_ANNOTATIONS: DrawingAnnotationData = {
+  lines: [],
+  texts: [],
+  fills: [],
+};
+
+export function useSymbolicAnnotationsForDrawing(params: {
+  enabled: boolean;
+  axis: 'down' | 'front' | 'side';
+  /** Section plane world-coord position along the cut axis. */
+  sectionPosWorld: number;
+  /** View depth in world units (typically half the model extent on the cut axis). */
+  viewDepth: number;
+  flipped: boolean;
+  /** Fallback world Y for annotations with no resolvable storey. */
+  fallbackY?: number;
+}): DrawingAnnotationData {
+  const { enabled, axis, sectionPosWorld, viewDepth, flipped, fallbackY = 0 } = params;
+  const stores = useActiveStores();
+  const version = useAnnotationParseTrigger(enabled, stores);
+
+  return useMemo(() => {
+    if (!enabled) return EMPTY_DRAWING_ANNOTATIONS;
+    // Only floor plans (axis='down') are supported on this pass. Annotations
+    // for elevations/sections need a coord-reorientation pass that is not
+    // worth building until there's a real authored elevation symbol to test
+    // against. Returning empty quietly keeps the toggle a no-op there.
+    if (axis !== 'down') return EMPTY_DRAWING_ANNOTATIONS;
+    void version;
+
+    // Section view range in world Y. Matches the convention used by
+    // `profile-projector.isInProjectionRange`:
+    //   not flipped → [sectionPos, sectionPos + viewDepth]
+    //   flipped     → [sectionPos - viewDepth, sectionPos]
+    // We expand the range by a small tolerance so annotations sitting
+    // exactly on the cut plane still match (storey elevations are
+    // typically the cut Y).
+    const TOL = 1e-3;
+    const rangeMin = (flipped ? sectionPosWorld - viewDepth : sectionPosWorld) - TOL;
+    const rangeMax = (flipped ? sectionPosWorld : sectionPosWorld + viewDepth) + TOL;
+
+    const lines: DrawingLine2D[] = [];
+    const texts: AnnotationText2D[] = [];
+    const fills: AnnotationFill2D[] = [];
+
+    for (const store of stores) {
+      const key = sourceKey(store);
+      if (!key) continue;
+      const cached = PARSE_CACHE.get(key);
+      if (!cached) continue;
+
+      for (const bucket of cached.byStorey.values()) {
+        const bucketY = resolveBucketY(bucket.storeyElevation, fallbackY);
+        if (bucketY < rangeMin || bucketY > rangeMax) continue;
+        for (const ln of bucket.lines) lines.push(ln);
+        for (const t of bucket.texts) texts.push(t);
+        for (const f of bucket.fills) fills.push(f);
+      }
+
+      // Loose annotations have no resolvable storey — include them if the
+      // fallback Y lands in the view range. That keeps malformed exports
+      // (e.g. 3DEXPERIENCE files with orphaned storeys) usable when the
+      // user is looking at the storey the fallback resolves to.
+      if (fallbackY >= rangeMin && fallbackY <= rangeMax) {
+        for (const ln of cached.loose) lines.push(ln);
+        for (const t of cached.looseTexts) texts.push(t);
+        for (const f of cached.looseFills) fills.push(f);
+      }
+    }
+
+    if (lines.length === 0 && texts.length === 0 && fills.length === 0) {
+      return EMPTY_DRAWING_ANNOTATIONS;
+    }
+    return { lines, texts, fills };
+  }, [enabled, axis, sectionPosWorld, viewDepth, flipped, fallbackY, stores, version]);
+}
+
 /**
  * Hook for the WebGPU text + fill pipelines. Returns 3D-lifted texts and
  * fills for every active model. Shares the parse cache with

package/src/lib/lens/adapter.ts

@@ -25,6 +25,7 @@ import type { FederatedModel } from '@/store/types';
 
 interface ModelEntry {
   id: string;
+  name: string;
   ifcDataStore: IfcDataStore;
   idOffset: number;
   maxExpressId: number;
@@ -58,6 +59,7 @@ export function createLensDataProvider(
       if (model.ifcDataStore) {
         entries.push({
           id: model.id,
+          name: model.name,
           ifcDataStore: model.ifcDataStore,
           idOffset: model.idOffset ?? 0,
           maxExpressId: model.maxExpressId ?? 0,
@@ -67,6 +69,7 @@ export function createLensDataProvider(
   } else if (legacyDataStore) {
     entries.push({
       id: 'legacy',
+      name: 'Model',
       ifcDataStore: legacyDataStore,
       idOffset: 0,
       maxExpressId: computeMaxExpressId(legacyDataStore),
@@ -285,6 +288,17 @@ export function createLensDataProvider(
       if (info.materials?.length) return info.materials[0]?.name;
       return undefined;
     },
+
+    getModelId(globalId: number): string | undefined {
+      const resolved = resolveGlobalId(globalId, entries);
+      if (!resolved) return undefined;
+      return resolved.entry.id;
+    },
+
+    getModelName(modelId: string): string | undefined {
+      const entry = entries.find(e => e.id === modelId);
+      return entry?.name ?? modelId;
+    },
   };
 }
 

package/src/store/index.ts

@@ -305,6 +305,7 @@ const createViewerStore = () => create<ViewerState>()((...args) => ({
         show3DOverlay: true,
         scale: 100,
         useSymbolicRepresentations: false,
+        showIfcAnnotations: true,
       },
       // Graphic overrides (keep presets, reset active and custom)
       activePresetId: 'preset-3d-colors',

package/src/store/slices/drawing2DSlice.ts

@@ -91,6 +91,13 @@ export interface Drawing2DState {
     scale: number;
     /** Use authored symbolic representations (Plan/Annotation) when available instead of section cut */
     useSymbolicRepresentations: boolean;
+    /**
+     * Whether to overlay IfcAnnotation curves, text, and fills on the 2D
+     * section view. Filtered to annotations whose world position falls
+     * inside the section's view-range on the cut axis (issue #812 follow-up
+     * to the IfcAnnotation text feature).
+     */
+    showIfcAnnotations: boolean;
   };
   /** Available graphic override presets */
   graphicOverridePresets: GraphicOverridePreset[];
@@ -236,6 +243,7 @@ const getDefaultDisplayOptions = (): Drawing2DState['drawing2DDisplayOptions'] =
   show3DOverlay: true, // Show 3D overlay by default
   scale: 100, // 1:100 default
   useSymbolicRepresentations: false, // Default to section cut (Body geometry)
+  showIfcAnnotations: true, // Mirror the 3D Class Visibility default
 });
 
 const getDefaultState = (): Drawing2DState => ({

package/dist/assets/lens-CpjUdqpw.js

@@ -1 +0,0 @@
-const z=["ifcType","attribute","property","quantity","classification","material"],D=["Name","Description","ObjectType","Tag"],x=["#E53935","#1E88E5","#FDD835","#43A047","#8E24AA","#00ACC1","#FF8F00","#6D4C41","#EC407A","#5C6BC0","#26A69A","#78909C"],w={IfcWallStandardCase:"IfcWall",IfcSlabStandardCase:"IfcSlab",IfcColumnStandardCase:"IfcColumn",IfcBeamStandardCase:"IfcBeam",IfcStairFlight:"IfcStair",IfcRampFlight:"IfcRamp"};function h(t,a,n){switch(t.type){case"ifcType":return E(t,a,n);case"property":return b(t,a,n);case"material":return M(t,a,n);case"attribute":return N(t,a,n);case"quantity":return A(t,a,n);case"classification":return I(t,a,n);default:return!1}}function E(t,a,n){if(!t.ifcType)return!1;const e=n.getEntityType(a);return e?e===t.ifcType?!0:w[e]===t.ifcType:!1}function b(t,a,n){if(!t.propertySet||!t.propertyName)return!1;const e=n.getPropertyValue(a,t.propertySet,t.propertyName);return t.operator==="exists"?e!=null:t.operator==="contains"&&t.propertyValue!==void 0?String(e??"").toLowerCase().includes(t.propertyValue.toLowerCase()):t.propertyValue!==void 0?String(e??"")===t.propertyValue:e!=null}function M(t,a,n){if(!t.materialName)return!1;const e=t.materialName.toLowerCase();if(n.getMaterialName){const s=n.getMaterialName(a);return s?s.toLowerCase().includes(e):!1}const o=n.getPropertySets(a);if(!o||o.length===0)return!1;for(const s of o)if(s.name.toLowerCase().includes("material")){for(const l of s.properties)if(String(l.value??"").toLowerCase().includes(e))return!0}return!1}function N(t,a,n){if(!t.attributeName||!n.getEntityAttribute)return!1;const e=n.getEntityAttribute(a,t.attributeName);return t.operator==="exists"?e!==void 0&&e!=="":t.operator==="contains"&&t.attributeValue!==void 0?(e??"").toLowerCase().includes(t.attributeValue.toLowerCase()):t.attributeValue!==void 0?(e??"")===t.attributeValue:e!==void 0&&e!==""}function A(t,a,n){if(!t.quantitySet||!t.quantityName||!n.getQuantityValue)return!1;const e=n.getQuantityValue(a,t.quantitySet,t.quantityName);return t.operator==="exists"?e!=null:e==null?!1:t.operator==="contains"&&t.quantityValue!==void 0?String(e).toLowerCase().includes(t.quantityValue.toLowerCase()):t.quantityValue!==void 0?String(e)===t.quantityValue:!0}function I(t,a,n){if(!t.classificationSystem&&!t.classificationCode||!n.getClassifications)return!1;const e=n.getClassifications(a);if(!e||e.length===0)return!1;for(const o of e){const s=!t.classificationSystem||(o.system??"").toLowerCase().includes(t.classificationSystem.toLowerCase()),l=!t.classificationCode||(o.identification??"").toLowerCase().includes(t.classificationCode.toLowerCase());if(s&&l)return!0}return!1}const T=[.6,.6,.6,.15];function C(t,a){const n=t.replace("#",""),e=parseInt(n.substring(0,2),16)/255,o=parseInt(n.substring(2,4),16)/255,s=parseInt(n.substring(4,6),16)/255;return[e,o,s,a]}function _(t){const a=Math.round(t[0]*255).toString(16).padStart(2,"0"),n=Math.round(t[1]*255).toString(16).padStart(2,"0"),e=Math.round(t[2]*255).toString(16).padStart(2,"0");return`#${a}${n}${e}`}function O(t){return t[3]<.2}const L=137.508;function q(t,a,n){const e=(1-Math.abs(2*n-1))*a,o=e*(1-Math.abs(t/60%2-1)),s=n-e/2;let l=0,p=0,i=0;t<60?(l=e,p=o):t<120?(l=o,p=e):t<180?(p=e,i=o):t<240?(p=o,i=e):t<300?(l=o,i=e):(l=e,i=o);const m=Math.round((l+s)*255),y=Math.round((p+s)*255),f=Math.round((i+s)*255);return`#${m.toString(16).padStart(2,"0")}${y.toString(16).padStart(2,"0")}${f.toString(16).padStart(2,"0")}`}function V(t){const a=t*L%360,n=t%2===0?.65:.8,o=[.45,.55,.35][t%3];return q(a,n,o)}function P(t,a){const n=performance.now(),e=t.rules.filter(i=>i.enabled);if(e.length===0)return{colorMap:new Map,hiddenIds:new Set,ruleCounts:new Map,ruleEntityIds:new Map,executionTime:performance.now()-n};const o=new Map,s=new Set,l=new Map,p=new Map;for(const i of e)l.set(i.id,0),p.set(i.id,[]);return a.forEachEntity(i=>{let m=!1;for(const y of e)if(h(y.criteria,i,a)){m=!0,l.set(y.id,(l.get(y.id)??0)+1),p.get(y.id).push(i),F(y,i,o,s);break}m||o.set(i,T)}),{colorMap:o,hiddenIds:s,ruleCounts:l,ruleEntityIds:p,executionTime:performance.now()-n}}function F(t,a,n,e){switch(t.action){case"colorize":n.set(a,C(t.color,1));break;case"transparent":n.set(a,C(t.color,.3));break;case"hide":e.add(a);break}}function W(t,a){const n=performance.now(),e=new Map,o=[];a.forEachEntity(f=>{const S=R(t,f,a),u=S!=null?String(S).trim():"";if(u===""){o.push(f);return}let r=e.get(u);r||(r=[],e.set(u,r)),r.push(f)});const s=Array.from(e.entries()).sort((f,S)=>S[1].length-f[1].length),l=new Map,p=new Set,i=new Map,m=new Map,y=[];for(let f=0;f<s.length;f++){const[S,u]=s[f],r=V(f),c=`auto-${f}`,d=C(r,1);for(const g of u)l.set(g,d);i.set(c,u.length),m.set(c,u),y.push({id:c,name:S,color:r,count:u.length})}for(const f of o)l.set(f,T);return{colorMap:l,hiddenIds:p,ruleCounts:i,ruleEntityIds:m,legend:y,executionTime:performance.now()-n}}function R(t,a,n){switch(t.source){case"ifcType":return n.getEntityType(a);case"attribute":return!t.propertyName||!n.getEntityAttribute?void 0:n.getEntityAttribute(a,t.propertyName);case"property":if(!t.psetName||!t.propertyName)return;{const e=n.getPropertyValue(a,t.psetName,t.propertyName);return e!=null?String(e):void 0}case"quantity":return!t.psetName||!t.propertyName||!n.getQuantityValue?void 0:n.getQuantityValue(a,t.psetName,t.propertyName);case"classification":if(!n.getClassifications)return;{const e=n.getClassifications(a);if(!e||e.length===0)return;const o=e[0],s=[];return o.system&&s.push(o.system),o.identification&&s.push(o.identification),s.length>0?s.join(": "):o.name}case"material":return n.getMaterialName?n.getMaterialName(a):void 0;default:return}}const Q=[{id:"lens-by-class",name:"By IFC Class",builtin:!0,rules:[],autoColor:{source:"ifcType"}},{id:"lens-structural",name:"Structural",builtin:!0,rules:[{id:"col",name:"Columns",enabled:!0,criteria:{type:"ifcType",ifcType:"IfcColumn"},action:"colorize",color:"#E53935"},{id:"beam",name:"Beams",enabled:!0,criteria:{type:"ifcType",ifcType:"IfcBeam"},action:"colorize",color:"#1E88E5"},{id:"slab",name:"Slabs",enabled:!0,criteria:{type:"ifcType",ifcType:"IfcSlab"},action:"colorize",color:"#FDD835"},{id:"footing",name:"Footings",enabled:!0,criteria:{type:"ifcType",ifcType:"IfcFooting"},action:"colorize",color:"#43A047"}]},{id:"lens-envelope",name:"Building Envelope",builtin:!0,rules:[{id:"roof",name:"Roofs",enabled:!0,criteria:{type:"ifcType",ifcType:"IfcRoof"},action:"colorize",color:"#C62828"},{id:"curtwall",name:"Curtain Walls",enabled:!0,criteria:{type:"ifcType",ifcType:"IfcCurtainWall"},action:"colorize",color:"#0277BD"},{id:"window",name:"Windows",enabled:!0,criteria:{type:"ifcType",ifcType:"IfcWindow"},action:"colorize",color:"#4FC3F7"},{id:"door",name:"Doors",enabled:!0,criteria:{type:"ifcType",ifcType:"IfcDoor"},action:"colorize",color:"#00695C"},{id:"wall",name:"Walls",enabled:!0,criteria:{type:"ifcType",ifcType:"IfcWall"},action:"colorize",color:"#8D6E63"}]},{id:"lens-openings",name:"Openings & Circulation",builtin:!0,rules:[{id:"door",name:"Doors",enabled:!0,criteria:{type:"ifcType",ifcType:"IfcDoor"},action:"colorize",color:"#00897B"},{id:"window",name:"Windows",enabled:!0,criteria:{type:"ifcType",ifcType:"IfcWindow"},action:"colorize",color:"#42A5F5"},{id:"stair",name:"Stairs",enabled:!0,criteria:{type:"ifcType",ifcType:"IfcStairFlight"},action:"colorize",color:"#FF8F00"},{id:"ramp",name:"Ramps",enabled:!0,criteria:{type:"ifcType",ifcType:"IfcRamp"},action:"colorize",color:"#7CB342"},{id:"railing",name:"Railings",enabled:!0,criteria:{type:"ifcType",ifcType:"IfcRailing"},action:"colorize",color:"#78909C"}]},{id:"lens-auto-material",name:"By Material",builtin:!0,rules:[],autoColor:{source:"material"}}],B=30;function $(t){const a=new Set;return t.forEachEntity(n=>{const e=t.getEntityType(n);e&&a.add(e)}),Array.from(a).sort()}function v(t,a){const n={},e=a.properties===!0,o=a.quantities===!0,s=a.classifications===!0,l=a.materials===!0;if(!e&&!o&&!s&&!l)return n;const p=e?new Map:null,i=o?new Map:null,m=s?new Set:null,y=l?new Set:null,f=[],S=new Map;t.forEachEntity(u=>{const r=t.getEntityType(u);if(!r)return;const c=S.get(r)??0;c<B&&(f.push(u),S.set(r,c+1))});for(const u of f){if(p){const r=t.getPropertySets(u);for(const c of r){if(!c.name)continue;let d=p.get(c.name);d||(d=new Set,p.set(c.name,d));for(const g of c.properties)g.name&&d.add(g.name)}}if(i&&t.getQuantitySets){const r=t.getQuantitySets(u);for(const c of r){if(!c.name)continue;let d=i.get(c.name);d||(d=new Set,i.set(c.name,d));for(const g of c.quantities)g.name&&d.add(g.name)}}if(m&&t.getClassifications){const r=t.getClassifications(u);for(const c of r)c.system&&m.add(c.system)}if(y&&t.getMaterialName){const r=t.getMaterialName(u);r&&y.add(r)}}if(p){const u=new Map;for(const[r,c]of p)u.set(r,Array.from(c).sort());n.propertySets=u}if(i){const u=new Map;for(const[r,c]of i)u.set(r,Array.from(c).sort());n.quantitySets=u}return m&&(n.classificationSystems=Array.from(m).sort()),y&&(n.materials=Array.from(y).sort()),n}export{z as A,Q as B,D as E,x as L,v as a,P as b,$ as d,W as e,C as h,O as i,_ as r};

package/dist/assets/raw-BCj_dK21.js

@@ -1 +0,0 @@
-import{B as o}from"./geotiff-DBMPIaHW.js";import"./sandbox-B_rh0uLM.js";import"./lens-CpjUdqpw.js";import"./__vite-browser-external-B1O5LaIO.js";class c extends o{decodeBlock(e){return e}}export{c as default};