Handle missing canvas context in SvgWrapper

afloresep · afloresep · commit c852c01a501e · 2026-03-09T19:15:52.000+01:00
Guard SVG text measurement when canvas 2D contexts are unavailable in headless environments and add a regression test for the fallback path.
diff --git a/src/SvgWrapper.js b/src/SvgWrapper.js
@@ -835,6 +835,10 @@ export default class SvgWrapper {
     static measureText(text, fontSize, fontFamily, lineHeight = 0.9) {
         const element = document.createElement('canvas');
         const ctx = element.getContext('2d');
+        if (!ctx) {
+            return SvgWrapper.estimateTextSize(text, fontSize, lineHeight);
+        }
+
         ctx.font = `${fontSize}pt ${fontFamily}`;
         let textMetrics = ctx.measureText(text);
 
@@ -845,6 +849,33 @@ export default class SvgWrapper {
         };
     }
 
+    static estimateTextSize(text, fontSize, lineHeight = 0.9) {
+        let width = 0;
+
+        for (const char of String(text)) {
+            if (char === ' ') {
+                width += fontSize * 0.35;
+            }
+            else if (/[A-Z]/.test(char)) {
+                width += fontSize * 0.68;
+            }
+            else if (/[a-z]/.test(char)) {
+                width += fontSize * 0.56;
+            }
+            else if (/[0-9]/.test(char)) {
+                width += fontSize * 0.55;
+            }
+            else {
+                width += fontSize * 0.45;
+            }
+        }
+
+        return {
+            width,
+            height: fontSize * 2 * lineHeight,
+        };
+    }
+
     /**
      * Convert an SVG to a canvas. Warning: This happens async!
      *
diff --git a/test/unit/SvgWrapper.test.js b/test/unit/SvgWrapper.test.js
@@ -0,0 +1,57 @@
+import {afterEach, describe, expect, it} from 'vitest';
+import {JSDOM} from 'jsdom';
+import Parser from '../../src/Parser.js';
+import SvgDrawer from '../../src/SvgDrawer.js';
+import SvgWrapper from '../../src/SvgWrapper.js';
+
+let restoreGetContext = null;
+
+function setupDom() {
+    const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
+    global.document = dom.window.document;
+    global.window = dom.window;
+    return dom;
+}
+
+function disableCanvasContext(dom) {
+    const proto = dom.window.HTMLCanvasElement.prototype;
+    const original = proto.getContext;
+    proto.getContext = () => null;
+    restoreGetContext = () => {
+        proto.getContext = original;
+    };
+}
+
+afterEach(() => {
+    if (restoreGetContext) {
+        restoreGetContext();
+        restoreGetContext = null;
+    }
+});
+
+describe('SvgWrapper', () => {
+    it('falls back to estimated text size when canvas is unavailable', () => {
+        const dom = setupDom();
+        disableCanvasContext(dom);
+
+        const dims = SvgWrapper.measureText('CH3', 11, 'Helvetica');
+
+        expect(dims.width).toBeGreaterThan(0);
+        expect(dims.height).toBeGreaterThan(0);
+    });
+
+    it('renders SVG without canvas text metrics support', () => {
+        const dom = setupDom();
+        disableCanvasContext(dom);
+
+        const svg = dom.window.document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttributeNS(null, 'id', 'test-svg');
+        dom.window.document.body.appendChild(svg);
+
+        const tree = Parser.parse('N[C@@H](C)C(=O)O');
+        const drawer = new SvgDrawer({isomeric: true});
+
+        expect(() => drawer.draw(tree, svg, 'light', false)).not.toThrow();
+        expect(drawer.preprocessor.graph.vertices.length).toBeGreaterThan(0);
+    });
+});
