@ifc-lite/viewer 1.23.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/EntityContextMenu.tsx

@@ -32,6 +32,11 @@ import {
 } from '@/store/basket/basketCommands';
 import { useIfc } from '@/hooks/useIfc';
 import { toast } from '@/components/ui/toast';
+import { useSlotContributions } from '@/hooks/useSlotContributions';
+import { useOptionalExtensionHost } from '@/sdk/ExtensionHostProvider';
+import { evaluateWhen, parseWhen, type CommandContribution, type ResolvedContextMenuContribution } from '@ifc-lite/extensions';
+import { resolveExtensionIcon } from '@/components/extensions/icon-registry';
+import { describeRunCommandError } from '@/services/extensions/runtime-errors';
 
 export function EntityContextMenu() {
   const contextMenu = useViewerStore((s) => s.contextMenu);
@@ -404,10 +409,75 @@ export function EntityContextMenu() {
           <MenuItem icon={Eye} label="Show all" onClick={handleShowAll} />
         </>
       )}
+
+      <ExtensionContextItems
+        slot={contextMenu.entityId != null ? 'contextMenu.entity' : 'contextMenu.canvas'}
+        hasEntity={contextMenu.entityId != null}
+      />
     </div>
   );
 }
 
+/**
+ * Renders extension-contributed entries for the entity or canvas
+ * context-menu slot. Each contribution is `when`-filtered; clicking
+ * dispatches the contributed command through the extension host.
+ */
+function ExtensionContextItems({
+  slot,
+  hasEntity,
+}: {
+  slot: 'contextMenu.entity' | 'contextMenu.canvas';
+  hasEntity: boolean;
+}) {
+  // Loader enriches the contextMenu payload with icon + title from
+  // the linked command (see manifestToContributions). Fall back to
+  // the commandPalette lookup for title if a manifest somehow omits it.
+  const contributions = useSlotContributions<ResolvedContextMenuContribution>(slot);
+  const commandPalette = useSlotContributions<CommandContribution>('commandPalette');
+  const host = useOptionalExtensionHost();
+  const closeContextMenu = useViewerStore((s) => s.closeContextMenu);
+  if (contributions.length === 0) return null;
+  const whenContext = {
+    'selection.count': hasEntity ? 1 : 0,
+    'model.loaded': true,
+  };
+  const titleFor = (c: ResolvedContextMenuContribution): string => {
+    if (c.title) return c.title;
+    const found = commandPalette.find((cp) => cp.payload.id === c.command);
+    return found?.payload.title ?? c.command;
+  };
+  const visible = contributions.filter((c) => {
+    const when = c.payload.when;
+    if (!when) return true;
+    const parsed = parseWhen(when);
+    if (!parsed.ok) return false;
+    return evaluateWhen(parsed.value, whenContext);
+  });
+  if (visible.length === 0) return null;
+  return (
+    <>
+      <div className="h-px bg-border my-1" />
+      {visible.map((c) => {
+        const Icon = resolveExtensionIcon(c.payload.icon);
+        return (
+          <MenuItem
+            key={`${c.extensionId}:${c.payload.command}`}
+            icon={Icon}
+            label={titleFor(c.payload)}
+            onClick={() => {
+              closeContextMenu();
+              host?.runCommand(c.payload.command).catch((err) => {
+                toast.error(describeRunCommandError(c.payload.command, err));
+              });
+            }}
+          />
+        );
+      })}
+    </>
+  );
+}
+
 type MenuItemTone = 'default' | 'destructive';
 
 interface MenuItemProps {

package/src/components/viewer/ExportDialog.tsx

@@ -50,6 +50,7 @@ import {
 } from '@/components/ui/alert';
 import { Progress } from '@/components/ui/progress';
 import { useViewerStore } from '@/store';
+import { useOptionalExtensionHost } from '@/sdk/ExtensionHostProvider';
 import { configureMutationView } from '@/utils/configureMutationView';
 import { toast } from '@/components/ui/toast';
 import { ensureModelExportReady } from '@/services/desktop-export';
@@ -85,6 +86,9 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
   // Also get legacy single-model state for backward compatibility
   const legacyIfcDataStore = useViewerStore((s) => s.ifcDataStore);
   const legacyGeometryResult = useViewerStore((s) => s.geometryResult);
+  // Optional extension host — emits the export.run action when present
+  // so the local pattern miner can spot load → export workflows.
+  const extensionHost = useOptionalExtensionHost();
 
   const [open, setOpen] = useState(false);
   const [schema, setSchema] = useState<SchemaVersion | ''>('');
@@ -315,6 +319,10 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
     if (!schema) return;
     if (exportScope === 'single' && !selectedModel) return;
 
+    // Action log: content-free emit so the miner can spot
+    // "load → export" patterns. Format label only — no path / data.
+    extensionHost?.emitAction('export.run', { format: outputInfo.ext.replace(/^\./, '') });
+
     setIsExporting(true);
     setExportResult(null);
     setExportProgress(null);
@@ -556,7 +564,7 @@ export function ExportDialog({ trigger }: ExportDialogProps) {
     } finally {
       setIsExporting(false);
     }
-  }, [selectedModel, selectedModelId, schema, isIfc5, exportScope, includeGeometry, applyMutations, changesOnly, visibleOnly, onlyKnownProperties, getMutationView, getLocalHiddenIds, getLocalIsolatedIds, modifiedCount, models]);
+  }, [selectedModel, selectedModelId, schema, isIfc5, exportScope, includeGeometry, applyMutations, changesOnly, visibleOnly, onlyKnownProperties, getMutationView, getLocalHiddenIds, getLocalIsolatedIds, modifiedCount, models, extensionHost, outputInfo]);
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>

package/src/components/viewer/KeyboardShortcutsDialog.tsx

@@ -20,6 +20,7 @@ function GithubIcon({ className }: { className?: string }) {
 import { Button } from '@/components/ui/button';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import { KEYBOARD_SHORTCUTS } from '@/hooks/useKeyboardShortcuts';
+import { navigateToPath } from '@/services/app-navigation';
 
 const GITHUB_URL = 'https://github.com/LTplus-AG/ifc-lite';
 
@@ -431,12 +432,26 @@ export function KeyboardShortcutsDialog({ open, onClose }: InfoDialogProps) {
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
       <div className="bg-card border rounded-lg shadow-xl w-full max-w-md m-4">
-        {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b">
-          <h2 className="text-lg font-semibold">Info</h2>
-          <Button variant="ghost" size="icon-sm" onClick={onClose}>
-            <X className="h-4 w-4" />
-          </Button>
+        {/* Header — the MCP CTA lives here, in line with the title, so
+            it's a discoverable "what else can this do?" affordance
+            without crowding the modeling toolbar. */}
+        <div className="flex items-center justify-between gap-2 p-4 border-b">
+          <h2 className="text-lg font-semibold shrink-0">Info</h2>
+          <div className="flex items-center gap-1 min-w-0">
+            <button
+              type="button"
+              onClick={() => { onClose(); navigateToPath('/mcp'); }}
+              className="group inline-flex items-center gap-1.5 rounded-full border border-primary/30 bg-primary/5 hover:bg-primary/10 hover:border-primary/50 transition-colors px-3 py-1.5 text-xs font-medium text-primary"
+              aria-label="Open ifc-lite MCP — drive ifc-lite from any LLM"
+            >
+              <Sparkles className="h-3.5 w-3.5 group-hover:rotate-12 transition-transform" />
+              <span className="whitespace-nowrap">Drive from any LLM</span>
+              <ExternalLink className="h-3 w-3 opacity-60" />
+            </button>
+            <Button variant="ghost" size="icon-sm" onClick={onClose}>
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
         </div>
 
         {/* Tabbed Content */}

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;
     }
   };