@teachinglab/omd 0.7.13 → 0.7.15

package/canvas/core/omdCanvas.js

@@ -9,6 +9,62 @@ import { Cursor } from '../ui/cursor.js';
 import { Toolbar } from '../ui/toolbar.js';
 import { FocusFrameManager } from '../features/focusFrameManager.js';
 import {jsvgGroup} from '@teachinglab/jsvg'
+
+// Create a clone that is safe to draw onto an HTML canvas.
+// Chrome will taint canvases if an SVG contains <foreignObject> nodes,
+// so we replace them with basic <text> nodes during export.
+function cloneSVGForExport(svgRoot, options = {}) {
+    const { stripForeignObjects = true } = options;
+    const clone = svgRoot.cloneNode(true);
+
+    if (stripForeignObjects) {
+        const ns = 'http://www.w3.org/2000/svg';
+        clone.querySelectorAll('foreignObject').forEach((fo) => {
+            const parent = fo.parentNode;
+            if (!parent) return;
+
+            const htmlEl = fo.firstElementChild;
+            const textContent = (htmlEl?.innerText || htmlEl?.textContent || '').trim();
+            const textEl = document.createElementNS(ns, 'text');
+            textEl.textContent = textContent;
+
+            const x = parseFloat(fo.getAttribute('x') || '0');
+            const y = parseFloat(fo.getAttribute('y') || '0');
+            const width = parseFloat(fo.getAttribute('width') || '0');
+            const fontFamily = htmlEl?.style?.fontFamily || 'sans-serif';
+            const fontSizeStr = htmlEl?.style?.fontSize || '16px';
+            const fontSize = parseFloat(fontSizeStr) || 16;
+            const fontWeight = htmlEl?.style?.fontWeight || 'normal';
+            const fill = htmlEl?.style?.color || 'black';
+            const textAlign = htmlEl?.style?.textAlign || 'start';
+
+            textEl.setAttribute('font-family', fontFamily);
+            textEl.setAttribute('font-size', `${fontSize}px`);
+            textEl.setAttribute('font-weight', fontWeight);
+            textEl.setAttribute('fill', fill);
+            textEl.setAttribute('dominant-baseline', 'hanging');
+
+            // Approximate alignment using the known foreignObject width
+            let textX = x;
+            if (!isNaN(width) && width > 0) {
+                if (textAlign === 'center') {
+                    textX = x + width / 2;
+                    textEl.setAttribute('text-anchor', 'middle');
+                } else if (textAlign === 'end' || textAlign === 'right') {
+                    textX = x + width;
+                    textEl.setAttribute('text-anchor', 'end');
+                }
+            }
+            textEl.setAttribute('x', textX);
+            // Bump y by font size so the text sits inside the original box
+            textEl.setAttribute('y', y + fontSize);
+
+            parent.replaceChild(textEl, fo);
+        });
+    }
+
+    return clone;
+}
 /**
  * Main OMD Canvas class
  * Provides the primary interface for creating and managing a drawing canvas
@@ -301,10 +357,12 @@ export class omdCanvas {
     
     /**
      * Export canvas as SVG string
+     * @param {Object} options - Export options
+     * @param {boolean} options.stripForeignObjects - Replace <foreignObject> with <text> for canvas-safe exports (default true)
      * @returns {string} SVG content
      */
-    exportSVG() {
-        const svgClone = this.svg.cloneNode(true);
+    exportSVG(options = {}) {
+        const svgClone = cloneSVGForExport(this.svg, options);
         
         // Remove UI elements from export
         const uiLayer = svgClone.querySelector('.ui-layer');
@@ -320,16 +378,29 @@ export class omdCanvas {
      * Export canvas as image
      * @param {string} format - Image format (png, jpeg, webp)
      * @param {number} quality - Image quality (0-1)
+     * @param {Object} options - Export options passed to exportSVG (e.g., { stripForeignObjects: true })
      * @returns {Promise<Blob>} Image blob
      */
-    async exportImage(format = 'png', quality = 1) {
-        const svgData = this.exportSVG();
+    async exportImage(format = 'png', quality = 1, options = {}) {
+        // Allow passing options as the second argument for backward compatibility
+        if (typeof quality === 'object' && quality !== null) {
+            options = quality;
+            quality = 1;
+        }
+        if (typeof format === 'object' && format !== null) {
+            options = format;
+            format = 'png';
+            quality = 1;
+        }
+
+        const svgData = this.exportSVG(options);
         const canvas = document.createElement('canvas');
         canvas.width = this.config.width;
         canvas.height = this.config.height;
         
         const ctx = canvas.getContext('2d');
         const img = new Image();
+        img.crossOrigin = 'anonymous';
         
         const svgBlob = new Blob([svgData], { type: 'image/svg+xml' });
         const url = URL.createObjectURL(svgBlob);
@@ -481,4 +552,4 @@ export class omdCanvas {
         this.isDestroyed = true;
         this.emit('destroyed');
     }
-} 
+}