@teachinglab/omd 0.7.12 → 0.7.14

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');
     }
-} 
+} 

package/omd/nodes/omdEquationNode.js

@@ -1121,14 +1121,26 @@ _propagateBackgroundStyle(style, visited = new Set()) {
      * @private
      */
     _renderToTable(options) {
+        // Helper to format expression - if it already has "y =" or starts with variable, use as-is, else prepend "y ="
+        const formatEquation = (expr) => {
+            const normalized = this._normalizeExpressionString(expr);
+            // Check if expression already has "y =" or other variable assignment
+            if (/^[a-zA-Z]\s*=/.test(normalized)) {
+                return normalized;
+            }
+            // Otherwise prepend "y ="
+            return `y = ${normalized}`;
+        };
+
         // Single side: let omdTable generate rows from equation
         if (options.side === 'left') {
             const expr = this._normalizeExpressionString(this.getLeft().toString());
+            const equation = formatEquation(expr);
             return {
                 omdType: "table",
-                title: `Function Table: y = ${expr}`,
+                title: `Function Table: ${equation}`,
                 headers: ["x", "y"],
-                equation: `y = ${expr}`,
+                equation: equation,
                 xMin: options.xMin,
                 xMax: options.xMax,
                 stepSize: options.stepSize,
@@ -1145,11 +1157,65 @@ _propagateBackgroundStyle(style, visited = new Set()) {
             };
         } else if (options.side === 'right') {
             const expr = this._normalizeExpressionString(this.getRight().toString());
+            const equation = formatEquation(expr);
+            return {
+                omdType: "table",
+                title: `Function Table: ${equation}`,
+                headers: ["x", "y"],
+                equation: equation,
+                xMin: options.xMin,
+                xMax: options.xMax,
+                stepSize: options.stepSize,
+                // Background customization options
+                backgroundColor: (options.backgroundColor !== undefined) ? options.backgroundColor : undefined,
+                backgroundCornerRadius: (options.backgroundCornerRadius !== undefined) ? options.backgroundCornerRadius : undefined,
+                backgroundOpacity: (options.backgroundOpacity !== undefined) ? options.backgroundOpacity : undefined,
+                showBackground: (options.showBackground !== undefined) ? options.showBackground : undefined,
+                // Alternating row color options
+                alternatingRowColors: (options.alternatingRowColors !== undefined) ? options.alternatingRowColors : undefined,
+                evenRowColor: (options.evenRowColor !== undefined) ? options.evenRowColor : undefined,
+                oddRowColor: (options.oddRowColor !== undefined) ? options.oddRowColor : undefined,
+                alternatingRowOpacity: (options.alternatingRowOpacity !== undefined) ? options.alternatingRowOpacity : undefined
+            };
+        }
+
+        // Both sides: use equation format for proper table generation
+        // The omdTable class can handle this better than manually computing data
+        const leftExpr = this._normalizeExpressionString(this.getLeft().toString());
+        const rightExpr = this._normalizeExpressionString(this.getRight().toString());
+        
+        // If left side is just "y", use right side as the equation
+        if (leftExpr.toLowerCase().trim() === 'y') {
+            const equation = formatEquation(rightExpr);
+            return {
+                omdType: "table",
+                title: `Function Table: ${equation}`,
+                headers: ["x", "y"],
+                equation: equation,
+                xMin: options.xMin,
+                xMax: options.xMax,
+                stepSize: options.stepSize,
+                // Background customization options
+                backgroundColor: (options.backgroundColor !== undefined) ? options.backgroundColor : undefined,
+                backgroundCornerRadius: (options.backgroundCornerRadius !== undefined) ? options.backgroundCornerRadius : undefined,
+                backgroundOpacity: (options.backgroundOpacity !== undefined) ? options.backgroundOpacity : undefined,
+                showBackground: (options.showBackground !== undefined) ? options.showBackground : undefined,
+                // Alternating row color options
+                alternatingRowColors: (options.alternatingRowColors !== undefined) ? options.alternatingRowColors : undefined,
+                evenRowColor: (options.evenRowColor !== undefined) ? options.evenRowColor : undefined,
+                oddRowColor: (options.oddRowColor !== undefined) ? options.oddRowColor : undefined,
+                alternatingRowOpacity: (options.alternatingRowOpacity !== undefined) ? options.alternatingRowOpacity : undefined
+            };
+        }
+        
+        // If right side is just "y", use left side as the equation
+        if (rightExpr.toLowerCase().trim() === 'y') {
+            const equation = formatEquation(leftExpr);
             return {
                 omdType: "table",
-                title: `Function Table: y = ${expr}`,
+                title: `Function Table: ${equation}`,
                 headers: ["x", "y"],
-                equation: `y = ${expr}`,
+                equation: equation,
                 xMin: options.xMin,
                 xMax: options.xMax,
                 stepSize: options.stepSize,
@@ -1166,7 +1232,7 @@ _propagateBackgroundStyle(style, visited = new Set()) {
             };
         }
 
-        // Both sides: compute data for x, left(x), right(x)
+        // Both sides have expressions: compute data for x, left(x), right(x)
         const leftSide = this.getLeft();
         const rightSide = this.getRight();
         const leftLabel = leftSide.toString();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teachinglab/omd",
-  "version": "0.7.12",
+  "version": "0.7.14",
   "description": "omd",
   "main": "./index.js",
   "module": "./index.js",