fix(sankey): thread measureText through sankey pipeline for accurate text wrapping

Sankey chrome and node labels always fell back to the ±20% character-width
heuristic for wrapText, even in the browser where canvas measurement is free.
The chart pipeline already had this plumbing; sankey just never got it.

- Add measureText to SankeyLayout type
- Pass options.measureText through compile-sankey return
- Create measureText in sankey-mount and pass to CompileOptions
- Thread measureText to all wrapText calls in sankey-renderer
- Extract createMeasureText to shared measure-text.ts

Author: rileyhilliard

packages/core/src/layout/text-wrap.ts

@@ -6,8 +6,8 @@
  * accurate wrapping. Otherwise falls back to a character-width
  * heuristic driven by `estimateCharWidth` from text-measure.ts.
  *
- * Callers that want heuristic-only behavior (e.g. sankey) should omit
- * the measureText argument. Do not change the signature without
+ * Non-browser callers (SSR, tests) omit the measureText argument to
+ * use the heuristic fallback. Do not change the signature without
  * re-verifying visual baselines for every caller.
  */
 

packages/core/src/types/layout.ts

@@ -1030,6 +1030,8 @@ export interface SankeyLayout {
   animation?: ResolvedAnimation;
   /** Whether the tryOpenData.ai watermark is enabled. */
   watermark: boolean;
+  /** Real text measurement function from the adapter (for accurate SVG text wrapping). */
+  measureText?: MeasureTextFn;
 }
 
 // ---------------------------------------------------------------------------

packages/engine/src/sankey/compile-sankey.ts

@@ -507,6 +507,7 @@ export function compileSankey(spec: unknown, options: CompileOptions): SankeyLay
     },
     animation: resolvedAnimation,
     watermark,
+    measureText: options.measureText,
   };
 }
 

packages/vanilla/src/measure-text.ts

@@ -0,0 +1,37 @@
+/**
+ * Canvas-backed text measurement factory.
+ *
+ * Shared by mount.ts (charts) and sankey-mount.ts (sankey diagrams) so both
+ * pipelines get accurate browser-measured text widths instead of the heuristic
+ * fallback. Falls back to the heuristic when canvas isn't available (e.g. SSR).
+ */
+
+import type { MeasureTextFn } from '@opendata-ai/openchart-core';
+
+export function createMeasureText(): MeasureTextFn {
+  let canvas: HTMLCanvasElement | null = null;
+  let ctx: CanvasRenderingContext2D | null = null;
+
+  return (
+    text: string,
+    fontSize: number,
+    fontWeight?: number,
+  ): { width: number; height: number } => {
+    if (!canvas) {
+      canvas = document.createElement('canvas');
+      ctx = canvas.getContext('2d');
+    }
+    if (!ctx) {
+      // Fallback: heuristic estimation
+      return { width: text.length * fontSize * 0.6, height: fontSize * 1.2 };
+    }
+
+    const weight = fontWeight ?? 400;
+    ctx.font = `${weight} ${fontSize}px Inter, sans-serif`;
+    const metrics = ctx.measureText(text);
+    return {
+      width: metrics.width,
+      height: fontSize * 1.2,
+    };
+  };
+}

packages/vanilla/src/mount.ts

@@ -20,7 +20,6 @@ import type {
   ElementRef,
   GraphSpec,
   LayerSpec,
-  MeasureTextFn,
   RangeAnnotation,
   RefLineAnnotation,
   TextAnnotation,
@@ -39,6 +38,7 @@ import {
   type JPGExportOptions,
   type SVGExportOptions,
 } from './export';
+import { createMeasureText } from './measure-text';
 import { observeResize } from './resize-observer';
 import { renderChartSVG } from './svg-renderer';
 import { createTextEditOverlay } from './text-edit-overlay';
@@ -115,38 +115,6 @@ function resolveDarkMode(mode?: DarkMode): boolean {
   return false;
 }
 
-// ---------------------------------------------------------------------------
-// measureText via hidden canvas
-// ---------------------------------------------------------------------------
-
-function createMeasureText(): MeasureTextFn {
-  let canvas: HTMLCanvasElement | null = null;
-  let ctx: CanvasRenderingContext2D | null = null;
-
-  return (
-    text: string,
-    fontSize: number,
-    fontWeight?: number,
-  ): { width: number; height: number } => {
-    if (!canvas) {
-      canvas = document.createElement('canvas');
-      ctx = canvas.getContext('2d');
-    }
-    if (!ctx) {
-      // Fallback: heuristic estimation
-      return { width: text.length * fontSize * 0.6, height: fontSize * 1.2 };
-    }
-
-    const weight = fontWeight ?? 400;
-    ctx.font = `${weight} ${fontSize}px Inter, sans-serif`;
-    const metrics = ctx.measureText(text);
-    return {
-      width: metrics.width,
-      height: fontSize * 1.2,
-    };
-  };
-}
-
 // ---------------------------------------------------------------------------
 // Tooltip event wiring
 // ---------------------------------------------------------------------------

packages/vanilla/src/sankey-mount.ts

@@ -23,6 +23,7 @@ import {
   type JPGExportOptions,
   type SVGExportOptions,
 } from './export';
+import { createMeasureText } from './measure-text';
 import { observeResize } from './resize-observer';
 import { renderSankeySVG } from './sankey-renderer';
 import { createTooltipManager, type TooltipManager } from './tooltip';
@@ -121,6 +122,8 @@ export function createSankey(
   let animationCleanup: (() => void) | null = null;
   let pendingResize = false;
 
+  const measureText = createMeasureText();
+
   // ---------------------------------------------------------------------------
   // Helpers
   // ---------------------------------------------------------------------------
@@ -143,6 +146,7 @@ export function createSankey(
       theme: options?.theme,
       darkMode,
       watermark: options?.watermark,
+      measureText,
     };
 
     return compileSankey(currentSpec, compileOpts);

packages/vanilla/src/sankey-renderer.ts

@@ -8,6 +8,7 @@
 
 import type {
   LegendLayout,
+  MeasureTextFn,
   ResolvedAnimation,
   ResolvedChromeElement,
   SankeyLayout,
@@ -89,6 +90,7 @@ function renderChromeElement(
   element: ResolvedChromeElement,
   className: string,
   chromeKey: string,
+  measureText?: MeasureTextFn,
 ): void {
   const text = createSVGElement('text');
   setAttrs(text, { x: element.x, y: element.y });
@@ -101,6 +103,7 @@ function renderChromeElement(
     element.style.fontSize,
     element.style.fontWeight,
     element.maxWidth,
+    measureText,
   );
 
   if (lines.length === 1) {
@@ -122,13 +125,13 @@ function renderChrome(parent: SVGElement, layout: SankeyLayout): void {
   const g = createSVGElement('g');
   g.setAttribute('class', 'oc-chrome');
 
-  const { chrome } = layout;
+  const { chrome, measureText } = layout;
 
   if (chrome.title) {
-    renderChromeElement(g, chrome.title, 'oc-title', 'title');
+    renderChromeElement(g, chrome.title, 'oc-title', 'title', measureText);
   }
   if (chrome.subtitle) {
-    renderChromeElement(g, chrome.subtitle, 'oc-subtitle', 'subtitle');
+    renderChromeElement(g, chrome.subtitle, 'oc-subtitle', 'subtitle', measureText);
   }
 
   // Bottom chrome: positioned below the sankey drawing area.
@@ -140,6 +143,7 @@ function renderChrome(parent: SVGElement, layout: SankeyLayout): void {
       { ...chrome.source, y: bottomOffset + chrome.source.y },
       'oc-source',
       'source',
+      measureText,
     );
   }
   if (chrome.byline) {
@@ -148,6 +152,7 @@ function renderChrome(parent: SVGElement, layout: SankeyLayout): void {
       { ...chrome.byline, y: bottomOffset + chrome.byline.y },
       'oc-byline',
       'byline',
+      measureText,
     );
   }
   if (chrome.footer) {
@@ -156,6 +161,7 @@ function renderChrome(parent: SVGElement, layout: SankeyLayout): void {
       { ...chrome.footer, y: bottomOffset + chrome.footer.y },
       'oc-footer',
       'footer',
+      measureText,
     );
   }
 
@@ -476,7 +482,11 @@ function renderNodes(
 // Labels rendering
 // ---------------------------------------------------------------------------
 
-function renderLabels(parent: SVGElement, nodes: SankeyNodeMark[]): void {
+function renderLabels(
+  parent: SVGElement,
+  nodes: SankeyNodeMark[],
+  measureText?: MeasureTextFn,
+): void {
   const g = createSVGElement('g');
   g.setAttribute('class', 'oc-sankey-labels');
 
@@ -492,7 +502,7 @@ function renderLabels(parent: SVGElement, nodes: SankeyNodeMark[]): void {
     if (label.maxWidth !== undefined && label.maxWidth > 0) {
       const fontSize = label.style.fontSize ?? 12;
       const fontWeight = label.style.fontWeight ?? 400;
-      const lines = wrapText(label.text, fontSize, fontWeight, label.maxWidth);
+      const lines = wrapText(label.text, fontSize, fontWeight, label.maxWidth, measureText);
       if (lines.length > 1) {
         const lineHeight = fontSize * (label.style.lineHeight ?? 1.3);
         // Center the multi-line block vertically around the label y position
@@ -585,7 +595,7 @@ export function renderSankeySVG(
   renderNodes(svg, layout.nodes, animation);
 
   // Labels
-  renderLabels(svg, layout.nodes);
+  renderLabels(svg, layout.nodes, layout.measureText);
 
   // Legend
   renderLegend(svg, layout.legend);