@lofcz/tikz 0.2.3 → 0.2.4

package/README.md

@@ -56,6 +56,15 @@ loops; queue capacity is not released until the process closes. The Node heap
 limit is 512 MB, not a total RSS/WASM memory limit. Apply container/OS resource
 limits when serving untrusted workloads. Browser apps use the worker entry below; backend generation uses the Node entry.
 
+## Source normalization
+
+Bare pictures are wrapped in a `standalone` document with the common TikZ
+libraries. A `\color{…}` switch inside a `font=` key (`font=\small\color{red!70!black}`)
+is moved to the node's `text=` key before compilation: in this DVI→SVG pipeline
+the colour special opened by the font switch is never popped inside the
+picture and dvisvgm rejects the page (`missing closing tag(s): </g>`). The
+rewrite keeps the same colour and leaves every other source untouched.
+
 ## Browser rendering
 
 Compile locally in a dedicated Web Worker:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lofcz/tikz",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Self-contained, process-isolated TikZ to SVG rendering powered by mp-tikz-wasm.",
   "type": "module",
   "license": "GPL-3.0-or-later",

package/src/browser-worker.js

@@ -1,15 +1,11 @@
 import { MetaPost } from '../runtime/dist/index.js';
+import { prepareTikzSource } from './source.js';
 
 try {
   const engine = await MetaPost.create({ worker: false, lazy: true, snapshot: 'auto', logLevel: 'silent' });
   self.onmessage = async ({ data: { source: code, maxOutputBytes } }) => {
     try {
-      const source = /^\s*\\documentclass\b/m.test(code) ? code : String.raw`\documentclass[tikz,border=6pt]{standalone}
-\usetikzlibrary{calc,intersections,angles,quotes,arrows.meta,positioning}
-\begin{document}
-${code}
-\end{document}`;
-      const result = await engine.latex(source, { engine: 'auto', fonts: 'paths' });
+      const result = await engine.latex(prepareTikzSource(code), { engine: 'auto', fonts: 'paths' });
       if (result.status === 'error' || result.status === 'fatal' || result.pages?.length !== 1)
         throw new Error('TikZ requires one valid page. ' + JSON.stringify(result.diagnostics).slice(0, 2000));
       const svg = result.pages[0], bytes = new TextEncoder().encode(svg);

package/src/deploy.js

@@ -28,7 +28,7 @@ export async function copyTikzBrowserAssets(directory) {
     throw new Error('TikZ browser assets must be outside the installed package');
   await mkdir(join(destination, 'src'), { recursive: true });
   await cp(join(source, 'runtime'), join(destination, 'runtime'), { recursive: true });
-  for (const name of ['browser.js', 'browser-worker.js'])
+  for (const name of ['browser.js', 'browser-worker.js', 'source.js'])
     await cp(join(source, 'src', name), join(destination, 'src', name));
   for (const name of ['LICENSE', 'NOTICE.md', 'upstream.json'])
     await cp(join(source, name), join(destination, name));

package/src/index.js

@@ -89,13 +89,10 @@ export function createTikzRenderer(options = {}) {
     async render(code, { signal } = {}) {
       if (typeof code !== 'string' || !code.trim() || code.length > settings.maxSourceLength)
         throw new Error(`TikZ: use 1–${settings.maxSourceLength.toLocaleString('en-US')} characters.`);
-      const source = /^\s*\\documentclass\b/m.test(code) ? code : String.raw`\documentclass[tikz,border=6pt]{standalone}
-\usetikzlibrary{calc,intersections,angles,quotes,arrows.meta,positioning}
-\begin{document}
-${code}
-\end{document}`;
+      // The worker normalizes and wraps the picture (src/source.js), so this
+      // entry stays relocatable: it only needs the package directory.
       await acquire(signal);
-      try { return await compile(source, signal); }
+      try { return await compile(code, signal); }
       finally { release(); }
     },
   };

package/src/source.js

@@ -0,0 +1,97 @@
+// Source normalization shared by the Node worker and the browser worker.
+//
+// A bare picture is wrapped in a standalone document with the common
+// libraries. `\color{…}` inside a `font=` key is rewritten into the node's
+// `text=` key: in this DVI→SVG pipeline the colour special opened by a font
+// switch is never popped inside the picture, and dvisvgm then rejects the page
+// ("missing closing tag(s): </g>"). `text=` paints the same colour the TikZ way.
+
+const PREAMBLE = String.raw`\documentclass[tikz,border=6pt]{standalone}
+\usetikzlibrary{calc,intersections,angles,quotes,arrows.meta,positioning}
+\begin{document}
+`;
+
+/** Wrap a bare picture into a complete standalone document. */
+export function wrapStandalone(code) {
+  return /^\s*\\documentclass\b/m.test(code) ? code : `${PREAMBLE}${code}\n\\end{document}`;
+}
+
+/** Index just past the balanced group that opens at `start` (`{`/`[`), or -1. */
+function groupEnd(text, start) {
+  const open = text[start], close = open === '{' ? '}' : ']';
+  let depth = 0;
+  for (let i = start; i < text.length; i++) {
+    const char = text[i];
+    if (char === '\\') { i++; continue; }
+    if (char === open) depth++;
+    else if (char === close && --depth === 0) return i + 1;
+  }
+  return -1;
+}
+
+/** End of a pgfkeys value starting at `start`: the next top-level `,`, `]` or `}`. */
+function valueEnd(text, start) {
+  for (let i = start; i < text.length; i++) {
+    const char = text[i];
+    if (char === '\\') { i++; continue; }
+    if (char === '{' || char === '[') { const end = groupEnd(text, i); if (end < 0) return -1; i = end - 1; continue; }
+    if (char === ',' || char === ']' || char === '}') return i;
+  }
+  return text.length;
+}
+
+/** Position of the `]`/`}` that closes the option list containing `from`, or -1. */
+function listEnd(text, from) {
+  let depth = 0;
+  for (let i = from; i < text.length; i++) {
+    const char = text[i];
+    if (char === '\\') { i++; continue; }
+    if (char === '{' || char === '[') depth++;
+    else if (char === '}' || char === ']') { if (depth === 0) return i; depth--; }
+  }
+  return -1;
+}
+
+const COLOR = /\\color\s*\{([^{}]*)\}/g;
+
+/** Move every `\color{name}` out of `font=` values into a trailing `text=name` key. */
+export function hoistFontColors(source) {
+  let text = source;
+  const keyPattern = /(^|[\[{,])(\s*font\s*=\s*)/g;
+  for (let match = keyPattern.exec(text); match; match = keyPattern.exec(text)) {
+    const keyStart = match.index + match[1].length;
+    const valueStart = match.index + match[0].length;
+    const end = valueEnd(text, valueStart);
+    if (end < 0) break;
+    const value = text.slice(valueStart, end);
+    const colors = [...value.matchAll(COLOR)].map(m => m[1].trim()).filter(Boolean);
+    if (colors.length === 0) continue;
+    const braced = /^\{[\s\S]*\}$/.test(value.trim());
+    let cleaned = value.replace(COLOR, '').replace(/[ \t]+$/, '');
+    if (braced && !cleaned.replace(/^\{|\}$/g, '').trim()) cleaned = '';
+    else if (!braced && !cleaned.trim()) cleaned = '';
+    const close = listEnd(text, end);
+    if (close < 0) break;
+    const closer = text.slice(close);
+    let replaced;
+    if (cleaned) {
+      replaced = text.slice(0, valueStart) + cleaned + text.slice(end, close);
+    } else {
+      // Drop the whole `font=` key with the comma that separated it.
+      let keyRemoveStart = keyStart, keyRemoveEnd = end;
+      if (text[end] === ',') keyRemoveEnd = end + 1;
+      else if (match[1] === ',') keyRemoveStart = match.index;
+      replaced = text.slice(0, keyRemoveStart) + text.slice(keyRemoveEnd, close);
+    }
+    const replacedHead = replaced.replace(/[\s,]+$/, '');
+    const separator = /[[{]$/.test(replacedHead) ? '' : ', ';
+    text = `${replacedHead}${separator}text=${colors[colors.length - 1]}${closer}`;
+    keyPattern.lastIndex = Math.max(0, replacedHead.length - value.length);
+  }
+  return text;
+}
+
+/** Everything the TeX engine receives: colour-safe keys inside a complete document. */
+export function prepareTikzSource(code) {
+  return wrapStandalone(hoistFontColors(code));
+}

package/src/worker.js

@@ -2,10 +2,11 @@
 // filesystem is in-memory; no host texmf tree, shell or caller environment.
 import { readFileSync } from 'node:fs';
 import { MetaPost } from '../runtime/dist/index.js';
+import { prepareTikzSource } from './source.js';
 const { source } = JSON.parse(readFileSync(0, 'utf8'));
 const engine = await MetaPost.create({ worker: false, lazy: true, logLevel: 'silent' });
 try {
-  const result = await engine.latex(source, { engine: 'auto', fonts: 'paths' });
+  const result = await engine.latex(prepareTikzSource(source), { engine: 'auto', fonts: 'paths' });
   if (result.status === 'error' || result.status === 'fatal' || result.pages?.length !== 1)
     throw new Error('TikZ requires one valid page. ' + JSON.stringify(result.diagnostics).slice(0, 2000));
   process.stdout.write(result.pages[0]);