@opendata-ai/openchart-vanilla 7.2.4 → 7.4.0

package/src/sankey-renderer.ts

@@ -21,6 +21,7 @@ import {
   BRAND_FONT_SIZE,
   BRAND_MIN_WIDTH,
   estimateTextWidth,
+  textAscent,
   wrapText,
 } from '@opendata-ai/openchart-core';
 import { clampStaggerDelay } from '@opendata-ai/openchart-engine';
@@ -94,7 +95,9 @@ function renderChromeElement(
   measureText?: MeasureTextFn,
 ): void {
   const text = createSVGElement('text');
-  setAttrs(text, { x: element.x, y: element.y });
+  // element.y is the TOP of the text box; convert to the alphabetic baseline
+  // (see renderers/chrome.ts — WebKit mishandles dominant-baseline:hanging).
+  setAttrs(text, { x: element.x, y: element.y + textAscent(element.style.fontSize) });
   applyTextStyle(text, element.style);
   text.setAttribute('class', className);
   text.setAttribute('data-chrome-key', chromeKey);

package/src/svg-renderer.ts

@@ -52,10 +52,12 @@ export function renderChartSVG(
   setAttrs(svg, {
     viewBox: `0 0 ${width} ${height}`,
     xmlns: SVG_NS,
-    // WebKit/iOS Safari getBBox() bug: text with dominant-baseline:hanging
-    // reports bounding boxes extending above y=0. The SVG spec default
-    // overflow is "hidden", which clips this phantom extent. Setting
-    // overflow:visible prevents the clipping. Chart marks are already
+    // The SVG spec default is overflow:"hidden", which clips anything a hair
+    // outside the viewBox. We now position all text on the alphabetic/central
+    // baseline (dominant-baseline:hanging was dropped because WebKit computed
+    // it from different metrics), but WebKit/iOS still reports getBBox extents
+    // with a few pixels of slack around tspans, so text touching an edge can
+    // still get clipped. overflow:visible avoids that. Chart marks are already
     // constrained by a clipPath, so nothing bleeds out.
     overflow: 'visible',
     // Hint browsers to enable sub-pixel font hinting and kerning for chart text.

package/src/tilemap-mount.ts

@@ -23,7 +23,7 @@ import {
   type JPGExportOptions,
   type SVGExportOptions,
 } from './export';
-import { createMeasureText } from './measure-text';
+import { createMeasureText, resolveFontFamily, scheduleFontReload } from './measure-text';
 import { observeResize } from './resize-observer';
 import { renderTileMapSVG } from './tilemap-renderer';
 import { createTooltipManager, type TooltipManager } from './tooltip';
@@ -118,7 +118,30 @@ export function createTileMap(
   let animationCleanup: (() => void) | null = null;
   let pendingResize = false;
 
-  const measureText = createMeasureText();
+  // Set when webfonts have loaded and a recompile is owed. The next render()
+  // that recompiles flips data-oc-fonts-state to 'ready' and clears this, so
+  // the attribute stays honest when resize() defers to pendingResize during
+  // the entrance animation.
+  let fontsReloadPending = false;
+
+  // Apply the root class up front so getComputedStyle sees --oc-font-family
+  // before the text measurer is built.
+  container.classList.add('oc-tilemap-root');
+
+  // Resolve the effective font the way compile() will: compile merges
+  // { ...spec.theme, ...options.theme }, so options.theme wins over the
+  // spec-level theme; fall back to the container's computed font. Measuring a
+  // different font than gets rendered desyncs layout metrics and the reload watcher.
+  function resolveEffectiveFont(): string {
+    return (
+      options?.theme?.fonts?.family ??
+      currentSpec.theme?.fonts?.family ??
+      resolveFontFamily(container)
+    );
+  }
+  let fontFamily = resolveEffectiveFont();
+  let measureText = createMeasureText(fontFamily);
+  let renderGen = 0;
 
   // ---------------------------------------------------------------------------
   // Helpers
@@ -273,10 +296,28 @@ export function createTileMap(
         }
       });
     }
+
+    renderGen += 1;
+    container.dataset.ocRenderGen = String(renderGen);
+
+    // This render recompiled with the loaded webfonts; publish 'ready' now
+    // rather than right after the fonts-ready resize() (which may have deferred
+    // to pendingResize during the entrance animation).
+    if (fontsReloadPending) {
+      fontsReloadPending = false;
+      container.dataset.ocFontsState = 'ready';
+    }
   }
 
   function update(newSpec: TileMapSpec): void {
     currentSpec = newSpec;
+    // A new spec can change theme.fonts.family; rebuild the measurer so layout
+    // measures the font compile will actually render with.
+    const nextFont = resolveEffectiveFont();
+    if (nextFont !== fontFamily) {
+      fontFamily = nextFont;
+      measureText = createMeasureText(fontFamily);
+    }
     currentLayout = compile();
     render();
   }
@@ -365,8 +406,8 @@ export function createTileMap(
   // Initialize
   // ---------------------------------------------------------------------------
 
-  // Add root class for CSS custom properties (tokens, tooltip styles)
-  container.classList.add('oc-tilemap-root');
+  // Root class was applied before the measurer was built (see above); dark
+  // mode class still applies here.
   if (resolveDarkMode(options?.darkMode)) {
     container.classList.add('oc-dark');
   }
@@ -375,6 +416,21 @@ export function createTileMap(
   currentLayout = compile();
   render(true);
 
+  // Recompile once after webfonts load so labels aren't stuck measured
+  // against fallback metrics on real devices.
+  const fontsPending = scheduleFontReload(
+    fontFamily,
+    () => !destroyed,
+    () => {
+      // Mark the reload owed, then recompile. render() flips the attribute to
+      // 'ready' once it actually recompiles, including the pendingResize replay
+      // after the entrance animation finishes.
+      fontsReloadPending = true;
+      resize();
+    },
+  );
+  container.dataset.ocFontsState = fontsPending ? 'pending' : 'ready';
+
   // Setup responsive resizing
   if (options?.responsive !== false) {
     disconnectResize = observeResize(container, () => {

package/src/tilemap-renderer.ts

@@ -11,6 +11,7 @@ import type {
   TileMapLayout,
   TileMapTileMark,
 } from '@opendata-ai/openchart-core';
+import { textAscent } from '@opendata-ai/openchart-core';
 
 const SVG_NS = 'http://www.w3.org/2000/svg';
 const XLINK_NS = 'http://www.w3.org/1999/xlink';
@@ -41,6 +42,8 @@ function setAttrs(el: SVGElement, attrs: Record<string, string | number>): void
 // Chrome rendering
 // ---------------------------------------------------------------------------
 
+// Chrome y positions are top-edge coordinates; convert to the alphabetic
+// baseline via textAscent() (WebKit mishandles dominant-baseline:hanging).
 function renderChrome(parent: SVGElement, layout: TileMapLayout): void {
   const g = createSVGElement('g');
   g.setAttribute('class', 'oc-chrome');
@@ -50,7 +53,10 @@ function renderChrome(parent: SVGElement, layout: TileMapLayout): void {
 
   if (chrome.title) {
     const text = createSVGElement('text');
-    setAttrs(text, { x: chrome.title.x, y: chrome.title.y });
+    setAttrs(text, {
+      x: chrome.title.x,
+      y: chrome.title.y + textAscent(chrome.title.style.fontSize),
+    });
     text.setAttribute('class', 'oc-title');
     text.setAttribute('font-family', chrome.title.style.fontFamily);
     text.setAttribute('font-size', String(chrome.title.style.fontSize));
@@ -62,7 +68,10 @@ function renderChrome(parent: SVGElement, layout: TileMapLayout): void {
 
   if (chrome.subtitle) {
     const text = createSVGElement('text');
-    setAttrs(text, { x: chrome.subtitle.x, y: chrome.subtitle.y });
+    setAttrs(text, {
+      x: chrome.subtitle.x,
+      y: chrome.subtitle.y + textAscent(chrome.subtitle.style.fontSize),
+    });
     text.setAttribute('class', 'oc-subtitle');
     text.setAttribute('font-family', chrome.subtitle.style.fontFamily);
     text.setAttribute('font-size', String(chrome.subtitle.style.fontSize));
@@ -77,7 +86,10 @@ function renderChrome(parent: SVGElement, layout: TileMapLayout): void {
 
   if (chrome.source) {
     const text = createSVGElement('text');
-    setAttrs(text, { x: chrome.source.x, y: bottomOffset + chrome.source.y });
+    setAttrs(text, {
+      x: chrome.source.x,
+      y: bottomOffset + chrome.source.y + textAscent(chrome.source.style.fontSize),
+    });
     text.setAttribute('class', 'oc-source');
     text.setAttribute('font-family', chrome.source.style.fontFamily);
     text.setAttribute('font-size', String(chrome.source.style.fontSize));
@@ -92,7 +104,10 @@ function renderChrome(parent: SVGElement, layout: TileMapLayout): void {
 
   if (chrome.byline) {
     const text = createSVGElement('text');
-    setAttrs(text, { x: chrome.byline.x, y: bottomOffset + chrome.byline.y });
+    setAttrs(text, {
+      x: chrome.byline.x,
+      y: bottomOffset + chrome.byline.y + textAscent(chrome.byline.style.fontSize),
+    });
     text.setAttribute('class', 'oc-byline');
     text.setAttribute('font-family', chrome.byline.style.fontFamily);
     text.setAttribute('font-size', String(chrome.byline.style.fontSize));
@@ -107,7 +122,10 @@ function renderChrome(parent: SVGElement, layout: TileMapLayout): void {
 
   if (chrome.footer) {
     const text = createSVGElement('text');
-    setAttrs(text, { x: chrome.footer.x, y: bottomOffset + chrome.footer.y });
+    setAttrs(text, {
+      x: chrome.footer.x,
+      y: bottomOffset + chrome.footer.y + textAscent(chrome.footer.style.fontSize),
+    });
     text.setAttribute('class', 'oc-footer');
     text.setAttribute('font-family', chrome.footer.style.fontFamily);
     text.setAttribute('font-size', String(chrome.footer.style.fontSize));