@knowvah/dot-engine 1.8.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knowvah/dot-engine",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Faithful TypeScript port of Graphviz (dot, neato, fdp, sfdp, circo, twopi, osage, patchwork) — no C: no native binary, no WASM. Oracle-verified against the C implementation, runs in the browser.",
   "keywords": [
     "graphviz",
@@ -124,7 +124,7 @@
   },
   "overrides": {
     "postcss": "^8.5.25",
-    "brace-expansion": "^5.0.9",
+    "brace-expansion": "^5.0.12",
     "vitepress": {
       "vite": "^6.4.3"
     },

package/src/common/css-font.ts

@@ -0,0 +1,109 @@
+// SPDX-License-Identifier: EPL-2.0
+//
+// CSS `font` shorthand for canvas text measurement. C graphviz has no canvas
+// measurer; its text-layout plugin measures through the PostScript alias
+// (plugin/pango/gvtextlayout_pango.c:112), and the SVG emitter renders through
+// the same alias (svg_textspan). This builder yields the face the SVG renders
+// with, so browser measurement and rendering agree. Selection follows the
+// NATIVEFONTS branch of svg_textspan (plans/canvas-font-mapping ADR-1).
+
+import { translatePostscriptFontname, type PostscriptAlias } from './ps-fontalias.js';
+import type { TextVariantFlags } from './textmeasure.js';
+
+/** svg_textspan's family when a span has no font name. */
+const DEFAULT_FAMILIES: readonly string[] = ['Times', 'serif'];
+
+const CSS_GENERIC_FAMILIES: ReadonlySet<string> = new Set([
+  'serif', 'sans-serif', 'monospace', 'cursive', 'fantasy', 'system-ui',
+]);
+
+const CSS_WEIGHT_KEYWORDS: ReadonlySet<string> = new Set([
+  'normal', 'bold', 'bolder', 'lighter',
+]);
+
+const DQ = '\u0022';
+const SQ = '\u0027';
+const BACKSLASH = '\\';
+
+/**
+ * True when `w` is a value CSS accepts for font-weight (ADR-2). Alias weights
+ * are a fixed keyword set (ps_font_equiv.h), never numeric, so only the
+ * keywords are checked.
+ */
+function isCssWeight(w: string): boolean {
+  return CSS_WEIGHT_KEYWORDS.has(w.toLowerCase());
+}
+
+/** Remove one pair of matching surrounding quotes. */
+function stripQuotes(f: string): string {
+  const q = f.charAt(0);
+  if (f.length >= 2 && (q === DQ || q === SQ) && f.endsWith(q)) return f.slice(1, -1);
+  return f;
+}
+
+/** Quote a family name unless it is a CSS generic family (ADR-4). */
+function quoteFamily(f: string): string {
+  if (CSS_GENERIC_FAMILIES.has(f.toLowerCase())) return f;
+  const escaped = f.split(BACKSLASH).join(BACKSLASH + BACKSLASH)
+    .split(DQ).join(BACKSLASH + DQ);
+  return DQ + escaped + DQ;
+}
+
+/** Split a non-alias fontname into its family entries (ADR-4). */
+function splitFamilies(fontname: string | null): readonly string[] {
+  const entries = (fontname ?? '').split(',')
+    .map((f) => stripQuotes(f.trim()).trim())
+    .filter((f) => f !== '');
+  return entries.length > 0 ? entries : DEFAULT_FAMILIES;
+}
+
+/**
+ * NATIVEFONTS family list: family, plus svg_font_family when it differs.
+ * @see plugin/core/gvrender_core_svg.c:487-489
+ */
+function aliasFamilies(a: PostscriptAlias): readonly string[] {
+  return a.svgFontFamily !== a.family ? [a.family, a.svgFontFamily] : [a.family];
+}
+
+/** Style token: the alias style, else italic from the HTML_IF flag. */
+function styleToken(a: PostscriptAlias | null, flags?: TextVariantFlags): string | null {
+  if (a?.style != null) return a.style;
+  return flags?.italic === true ? 'italic' : null;
+}
+
+/**
+ * Weight token. The bold flag applies only when the alias set no weight —
+ * tested on the alias value BEFORE the ADR-2 drop, as C's HTML_BF guard tests
+ * the raw alias weight (so `demi` + bold renders, and measures, normal).
+ */
+function weightToken(a: PostscriptAlias | null, flags?: TextVariantFlags): string | null {
+  if (a?.weight != null) return isCssWeight(a.weight) ? a.weight : null;
+  return flags?.bold === true ? 'bold' : null;
+}
+
+/**
+ * style/weight/stretch tokens in shorthand order.
+ * @see plugin/core/gvrender_core_svg.c:490-500
+ */
+function variantTokens(a: PostscriptAlias | null, flags?: TextVariantFlags): string[] {
+  const tokens = [styleToken(a, flags), weightToken(a, flags), a?.stretch ?? null];
+  return tokens.filter((t): t is string => t !== null);
+}
+
+/**
+ * CSS `font` shorthand (`[style] [weight] [stretch] <size>px <families>`)
+ * naming the face svg_textspan renders `fontname` with. Pure; always
+ * syntactically valid CSS.
+ * @see plugin/core/gvrender_core_svg.c:462-500 svg_textspan (family/weight/style selection)
+ */
+export function canvasFont(
+  fontname: string | null,
+  fontsize: number,
+  flags?: TextVariantFlags,
+): string {
+  // C translate_postscript_fontname matches the whole name only.
+  const a = fontname !== null ? translatePostscriptFontname(fontname) : null;
+  const families = a !== null ? aliasFamilies(a) : splitFamilies(fontname);
+  const tokens = [...variantTokens(a, flags), `${fontsize}px`];
+  return `${tokens.join(' ')} ${families.map(quoteFamily).join(', ')}`;
+}

package/src/common/textmeasure.ts

@@ -9,6 +9,7 @@
 
 import { type FontFamilyData } from "./textmeasure-lut-data.js";
 import { getFamilyMetrics, normalizeFontName } from "./textmeasure-lookup.js";
+import { canvasFont } from "./css-font.js";
 
 /** Number of hard-coded font families in the LUT. */
 export const LUT_FAMILY_COUNT = 11;
@@ -264,12 +265,26 @@ export class LutTextMeasurer implements TextMeasurer {
   }
 }
 
+/**
+ * Two distinct, always-valid fonts used to detect a rejected `ctx.font`
+ * assignment: a candidate is accepted when assigning it changes the read-back
+ * after either probe (it cannot serialize identically to both).
+ */
+const FONT_PROBES: readonly string[] = ['1px serif', '2px monospace'];
+
 /**
  * Canvas-based TextMeasurer via CanvasRenderingContext2D.
- * Height is fontsize (matches C behavior).
+ * The font is the face the SVG emitter renders with (canvasFont), so browser
+ * measurement and rendering agree. Height is fontsize (matches C behavior).
  * @see lib/common/textspan.c:estimate_textspan_size
  */
 export class CanvasTextMeasurer implements TextMeasurer {
+  /**
+   * fontname|fontsize|bold|italic → accepted font string. Mirrors pango's
+   * font reuse (plugin/pango/gvtextlayout_pango.c:99-100).
+   */
+  private readonly fonts = new Map<string, string>();
+
   constructor(private readonly ctx: CanvasRenderingContext2D) {}
 
   measure(
@@ -278,16 +293,34 @@ export class CanvasTextMeasurer implements TextMeasurer {
     fontsize: number,
     flags?: TextVariantFlags,
   ): TextSize {
-    const bold = flags?.bold === true;
-    const italic = flags?.italic === true;
-    const style = bold && italic ? 'bold italic'
-      : bold ? 'bold'
-      : italic ? 'italic'
-      : '';
-    this.ctx.font = style ? `${style} ${fontsize}px ${fontname}` : `${fontsize}px ${fontname}`;
+    this.ctx.font = this.fontFor(fontname, fontsize, flags);
     const m = this.ctx.measureText(text);
     return { w: m.width, h: fontsize };
   }
+
+  /** Cached font string; built and validated once per distinct font. */
+  private fontFor(fontname: string, fontsize: number, flags?: TextVariantFlags): string {
+    const key = `${fontname}|${fontsize}|${flags?.bold === true}|${flags?.italic === true}`;
+    let font = this.fonts.get(key);
+    if (font === undefined) {
+      font = canvasFont(fontname, fontsize, flags);
+      // A string the browser rejects is silently ignored, keeping the previous
+      // font AND size; fall back to the default family at the requested size.
+      if (!this.accepts(font)) font = canvasFont(null, fontsize, flags);
+      this.fonts.set(key, font);
+    }
+    return font;
+  }
+
+  /** True when the context accepts `font` as a `ctx.font` value. */
+  private accepts(font: string): boolean {
+    return FONT_PROBES.some((probe) => {
+      this.ctx.font = probe;
+      const before = this.ctx.font;
+      this.ctx.font = font;
+      return this.ctx.font !== before;
+    });
+  }
 }
 
 /** graphviz estimate_textspan_size line spacing. @see lib/common/const.h:70 */