@emasoft/svg-matrix 1.0.27 → 1.0.29

package/src/svg2-polyfills.js

@@ -4,12 +4,68 @@
  * Detects SVG 2.0 features (mesh gradients, hatches) and generates inline
  * JavaScript polyfills for browser compatibility.
  *
- * Uses the existing mesh-gradient.js math for Coons patch evaluation.
+ * Uses the Inkscape mesh.js polyfill by Tavmjong Bah for mesh gradient support.
+ * The mesh polyfill is licensed under GPLv3 - see src/vendor/inkscape-mesh-polyfill.js
+ * Hatch polyfills use a simplified MIT-licensed implementation.
+ *
  * All polyfills are embedded inline in the SVG for self-contained output.
  *
  * @module svg2-polyfills
  */
 
+import { SVGElement } from './svg-parser.js';
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+// Load Inkscape polyfills at module initialization (minified + full versions)
+let INKSCAPE_MESH_POLYFILL_MIN = '';
+let INKSCAPE_MESH_POLYFILL_FULL = '';
+let INKSCAPE_HATCH_POLYFILL_MIN = '';
+let INKSCAPE_HATCH_POLYFILL_FULL = '';
+
+try {
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = dirname(__filename);
+
+  // Load mesh gradient polyfills (GPLv3 by Tavmjong Bah)
+  // Minified version (default, ~16KB)
+  INKSCAPE_MESH_POLYFILL_MIN = readFileSync(
+    join(__dirname, 'vendor', 'inkscape-mesh-polyfill.min.js'),
+    'utf-8'
+  );
+  // Full version (~35KB, for debugging or when --no-minify-polyfills is used)
+  INKSCAPE_MESH_POLYFILL_FULL = readFileSync(
+    join(__dirname, 'vendor', 'inkscape-mesh-polyfill.js'),
+    'utf-8'
+  );
+
+  // Load hatch polyfills (CC0/Public Domain by Valentin Ionita)
+  // Minified version (default, ~5KB)
+  INKSCAPE_HATCH_POLYFILL_MIN = readFileSync(
+    join(__dirname, 'vendor', 'inkscape-hatch-polyfill.min.js'),
+    'utf-8'
+  );
+  // Full version (~10KB, for debugging)
+  INKSCAPE_HATCH_POLYFILL_FULL = readFileSync(
+    join(__dirname, 'vendor', 'inkscape-hatch-polyfill.js'),
+    'utf-8'
+  );
+} catch (e) {
+  throw new Error(`Failed to load SVG2 polyfill files from vendor/ directory: ${e.message}. Ensure all vendor files are present.`);
+}
+
+// Module-level option for minification (default: true)
+let useMinifiedPolyfills = true;
+
+/**
+ * Set whether to use minified polyfills.
+ * @param {boolean} minify - True to use minified (default), false for full version
+ */
+export function setPolyfillMinification(minify) {
+  useMinifiedPolyfills = minify;
+}
+
 /**
  * SVG 2.0 features that can be polyfilled
  */
@@ -27,6 +83,8 @@ export const SVG2_FEATURES = {
  * @returns {{meshGradients: string[], hatches: string[], contextPaint: boolean, autoStartReverse: boolean}} Detected features
  */
 export function detectSVG2Features(doc) {
+  if (!doc) return { meshGradients: [], hatches: [], contextPaint: false, autoStartReverse: false };
+
   const features = {
     meshGradients: [],
     hatches: [],
@@ -83,6 +141,8 @@ export function detectSVG2Features(doc) {
  * @returns {boolean} True if polyfills are needed
  */
 export function needsPolyfills(doc) {
+  if (!doc) return false;
+
   const features = detectSVG2Features(doc);
   return features.meshGradients.length > 0 ||
          features.hatches.length > 0 ||
@@ -92,244 +152,51 @@ export function needsPolyfills(doc) {
 
 /**
  * Generate the mesh gradient polyfill code.
+ * Uses the Inkscape mesh.js polyfill by Tavmjong Bah (GPLv3).
  * This polyfill renders mesh gradients to canvas and uses them as image fills.
  *
+ * Features:
+ * - Multi-patch grid support
+ * - Bezier curve edge parsing (l, L, c, C commands)
+ * - Adaptive tessellation via de Casteljau subdivision
+ * - gradientTransform support
+ * - Proper shape clipping
+ *
  * @returns {string} JavaScript polyfill code
  */
 function generateMeshPolyfillCode() {
-  return `
-// Mesh Gradient Polyfill - SVG 2.0 to Canvas fallback
-// Generated by svg-matrix
-(function() {
-  'use strict';
-
-  // Skip if browser supports mesh gradients natively
-  if (typeof document.createElementNS('http://www.w3.org/2000/svg', 'meshGradient').x !== 'undefined') {
-    return;
-  }
-
-  // Find all mesh gradients
-  var meshes = document.querySelectorAll('meshGradient, meshgradient');
-  if (!meshes.length) return;
-
-  // Parse color string to RGBA
-  function parseColor(str) {
-    if (!str) return {r: 0, g: 0, b: 0, a: 255};
-    var m = str.match(/rgba?\\s*\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)(?:\\s*,\\s*([\\d.]+))?\\s*\\)/);
-    if (m) return {r: +m[1], g: +m[2], b: +m[3], a: m[4] ? Math.round(+m[4] * 255) : 255};
-    if (str[0] === '#') {
-      var hex = str.slice(1);
-      if (hex.length === 3) hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
-      return {r: parseInt(hex.slice(0,2), 16), g: parseInt(hex.slice(2,4), 16), b: parseInt(hex.slice(4,6), 16), a: 255};
-    }
-    return {r: 0, g: 0, b: 0, a: 255};
-  }
-
-  // Bilinear color interpolation
-  function bilinearColor(c00, c10, c01, c11, u, v) {
-    var mu = 1 - u, mv = 1 - v;
-    return {
-      r: Math.round(mu*mv*c00.r + u*mv*c10.r + mu*v*c01.r + u*v*c11.r),
-      g: Math.round(mu*mv*c00.g + u*mv*c10.g + mu*v*c01.g + u*v*c11.g),
-      b: Math.round(mu*mv*c00.b + u*mv*c10.b + mu*v*c01.b + u*v*c11.b),
-      a: Math.round(mu*mv*c00.a + u*mv*c10.a + mu*v*c01.a + u*v*c11.a)
-    };
-  }
-
-  // Evaluate cubic Bezier at t
-  function evalBezier(p0, p1, p2, p3, t) {
-    var mt = 1 - t, mt2 = mt * mt, mt3 = mt2 * mt;
-    var t2 = t * t, t3 = t2 * t;
-    return {
-      x: mt3*p0.x + 3*mt2*t*p1.x + 3*mt*t2*p2.x + t3*p3.x,
-      y: mt3*p0.y + 3*mt2*t*p1.y + 3*mt*t2*p2.y + t3*p3.y
-    };
+  // Return minified or full Inkscape mesh.js polyfill based on setting
+  const polyfill = useMinifiedPolyfills ? INKSCAPE_MESH_POLYFILL_MIN : INKSCAPE_MESH_POLYFILL_FULL;
+  if (polyfill) {
+    return polyfill;
   }
-
-  // Process each mesh gradient
-  meshes.forEach(function(mesh) {
-    var id = mesh.getAttribute('id');
-    if (!id) return;
-
-    // Create canvas for rasterization
-    var canvas = document.createElement('canvas');
-    var ctx = canvas.getContext('2d');
-
-    // Get bounding box from referencing elements
-    var refs = document.querySelectorAll('[fill="url(#' + id + ')"], [stroke="url(#' + id + ')"]');
-    if (!refs.length) return;
-
-    var bbox = refs[0].getBBox();
-    var size = Math.max(bbox.width, bbox.height, 256);
-    canvas.width = canvas.height = size;
-
-    // Parse mesh patches
-    var patches = [];
-    var rows = mesh.querySelectorAll('meshrow');
-    rows.forEach(function(row) {
-      var rowPatches = row.querySelectorAll('meshpatch');
-      rowPatches.forEach(function(patch) {
-        var stops = patch.querySelectorAll('stop');
-        if (stops.length >= 4) {
-          patches.push({
-            colors: [
-              parseColor(stops[0].getAttribute('stop-color') || stops[0].style.stopColor),
-              parseColor(stops[1].getAttribute('stop-color') || stops[1].style.stopColor),
-              parseColor(stops[2].getAttribute('stop-color') || stops[2].style.stopColor),
-              parseColor(stops[3].getAttribute('stop-color') || stops[3].style.stopColor)
-            ]
-          });
-        }
-      });
-    });
-
-    // Render patches with bilinear interpolation
-    if (patches.length > 0) {
-      var imgData = ctx.createImageData(size, size);
-      var data = imgData.data;
-      var patch = patches[0];
-      for (var y = 0; y < size; y++) {
-        for (var x = 0; x < size; x++) {
-          var u = x / (size - 1);
-          var v = y / (size - 1);
-          var c = bilinearColor(patch.colors[0], patch.colors[1], patch.colors[2], patch.colors[3], u, v);
-          var i = (y * size + x) * 4;
-          data[i] = c.r;
-          data[i+1] = c.g;
-          data[i+2] = c.b;
-          data[i+3] = c.a;
-        }
-      }
-      ctx.putImageData(imgData, 0, 0);
-    }
-
-    // Create pattern from canvas
-    var dataUrl = canvas.toDataURL('image/png');
-    var pattern = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
-    pattern.setAttribute('id', id + '_polyfill');
-    pattern.setAttribute('patternUnits', 'objectBoundingBox');
-    pattern.setAttribute('width', '1');
-    pattern.setAttribute('height', '1');
-
-    var img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
-    img.setAttribute('href', dataUrl);
-    img.setAttribute('width', '1');
-    img.setAttribute('height', '1');
-    img.setAttribute('preserveAspectRatio', 'none');
-    pattern.appendChild(img);
-
-    // Add pattern to defs
-    var defs = mesh.closest('svg').querySelector('defs') || (function() {
-      var d = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
-      mesh.closest('svg').insertBefore(d, mesh.closest('svg').firstChild);
-      return d;
-    })();
-    defs.appendChild(pattern);
-
-    // Update references to use polyfill pattern
-    refs.forEach(function(ref) {
-      if (ref.getAttribute('fill') === 'url(#' + id + ')') {
-        ref.setAttribute('fill', 'url(#' + id + '_polyfill)');
-      }
-      if (ref.getAttribute('stroke') === 'url(#' + id + ')') {
-        ref.setAttribute('stroke', 'url(#' + id + '_polyfill)');
-      }
-    });
-  });
-})();
-`;
+  // Fallback: return empty string if polyfill couldn't be loaded
+  console.warn('svg2-polyfills: Inkscape mesh polyfill not available');
+  return '';
 }
 
 /**
  * Generate the hatch pattern polyfill code.
+ * Uses the Inkscape hatch polyfill by Valentin Ionita (CC0/Public Domain).
  * Converts SVG 2 hatch elements to SVG 1.1 pattern elements.
  *
+ * Features:
+ * - Full SVG path command support (M, L, C, S, Q, A, etc.)
+ * - Proper coordinate system handling (objectBoundingBox, userSpaceOnUse)
+ * - Hatch rotation and transform support
+ * - Multiple hatchpath elements with offset values
+ *
  * @returns {string} JavaScript polyfill code
  */
 function generateHatchPolyfillCode() {
-  return `
-// Hatch Pattern Polyfill - SVG 2.0 to SVG 1.1 pattern conversion
-// Generated by svg-matrix
-(function() {
-  'use strict';
-
-  // Find all hatch elements
-  var hatches = document.querySelectorAll('hatch');
-  if (!hatches.length) return;
-
-  hatches.forEach(function(hatch) {
-    var id = hatch.getAttribute('id');
-    if (!id) return;
-
-    // Get hatch properties
-    var href = hatch.getAttribute('href') || hatch.getAttribute('xlink:href');
-    var hatchUnits = hatch.getAttribute('hatchUnits') || 'objectBoundingBox';
-    var hatchContentUnits = hatch.getAttribute('hatchContentUnits') || 'userSpaceOnUse';
-    var pitch = parseFloat(hatch.getAttribute('pitch')) || 8;
-    var rotate = parseFloat(hatch.getAttribute('rotate')) || 0;
-    var transform = hatch.getAttribute('transform') || '';
-
-    // Create equivalent pattern
-    var pattern = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
-    pattern.setAttribute('id', id + '_polyfill');
-    pattern.setAttribute('patternUnits', hatchUnits);
-    pattern.setAttribute('width', pitch);
-    pattern.setAttribute('height', pitch);
-
-    if (transform || rotate) {
-      var fullTransform = transform;
-      if (rotate) fullTransform += ' rotate(' + rotate + ')';
-      pattern.setAttribute('patternTransform', fullTransform.trim());
-    }
-
-    // Copy hatchpath children as lines
-    var hatchpaths = hatch.querySelectorAll('hatchpath, hatchPath');
-    hatchpaths.forEach(function(hp) {
-      var d = hp.getAttribute('d');
-      var strokeColor = hp.getAttribute('stroke') || 'black';
-      var strokeWidth = hp.getAttribute('stroke-width') || '1';
-
-      var line = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-      line.setAttribute('d', d || 'M0,0 L' + pitch + ',0');
-      line.setAttribute('stroke', strokeColor);
-      line.setAttribute('stroke-width', strokeWidth);
-      line.setAttribute('fill', 'none');
-      pattern.appendChild(line);
-    });
-
-    // If no hatchpaths, create default diagonal line
-    if (!hatchpaths.length) {
-      var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-      line.setAttribute('x1', '0');
-      line.setAttribute('y1', '0');
-      line.setAttribute('x2', pitch);
-      line.setAttribute('y2', pitch);
-      line.setAttribute('stroke', 'black');
-      line.setAttribute('stroke-width', '1');
-      pattern.appendChild(line);
-    }
-
-    // Add pattern to defs
-    var defs = hatch.closest('svg').querySelector('defs') || (function() {
-      var d = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
-      hatch.closest('svg').insertBefore(d, hatch.closest('svg').firstChild);
-      return d;
-    })();
-    defs.appendChild(pattern);
-
-    // Update references
-    var refs = document.querySelectorAll('[fill="url(#' + id + ')"], [stroke="url(#' + id + ')"]');
-    refs.forEach(function(ref) {
-      if (ref.getAttribute('fill') === 'url(#' + id + ')') {
-        ref.setAttribute('fill', 'url(#' + id + '_polyfill)');
-      }
-      if (ref.getAttribute('stroke') === 'url(#' + id + ')') {
-        ref.setAttribute('stroke', 'url(#' + id + '_polyfill)');
-      }
-    });
-  });
-})();
-`;
+  // Return minified or full Inkscape hatch polyfill based on setting
+  const polyfill = useMinifiedPolyfills ? INKSCAPE_HATCH_POLYFILL_MIN : INKSCAPE_HATCH_POLYFILL_FULL;
+  if (polyfill) {
+    return polyfill;
+  }
+  // Fallback: return empty string if polyfill couldn't be loaded
+  console.warn('svg2-polyfills: Inkscape hatch polyfill not available');
+  return '';
 }
 
 /**
@@ -364,10 +231,14 @@ export function generatePolyfillScript(features) {
  * @param {Object} doc - Parsed SVG document
  * @param {Object} [options] - Options
  * @param {boolean} [options.force=false] - Force injection even if no features detected
+ * @param {Object} [options.features] - Pre-detected features (use instead of re-detecting)
  * @returns {Object} The document (modified in place)
  */
 export function injectPolyfills(doc, options = {}) {
-  const features = detectSVG2Features(doc);
+  if (!doc) return doc;
+
+  // Use pre-detected features if provided (for when pipeline has removed SVG2 elements)
+  const features = options.features || detectSVG2Features(doc);
 
   // Check if polyfills are needed
   if (!options.force &&
@@ -382,28 +253,24 @@ export function injectPolyfills(doc, options = {}) {
   // Find or create the SVG root
   const svg = doc.documentElement || doc;
 
-  // Create script element
-  // Note: We need to handle this based on the parser being used
-  const scriptEl = {
-    tagName: 'script',
-    attributes: new Map([['type', 'text/javascript']]),
-    children: [],
-    textContent: script,
-    getAttribute(name) { return this.attributes.get(name); },
-    setAttribute(name, value) { this.attributes.set(name, value); },
-    hasAttribute(name) { return this.attributes.has(name); },
-    removeAttribute(name) { this.attributes.delete(name); },
-    getAttributeNames() { return [...this.attributes.keys()]; },
-    appendChild(child) { this.children.push(child); },
-    removeChild(child) {
-      const idx = this.children.indexOf(child);
-      if (idx >= 0) this.children.splice(idx, 1);
-    }
-  };
+  // Create a proper SVGElement for the script
+  // The script content uses CDATA to avoid XML escaping issues
+  const scriptEl = new SVGElement('script', {
+    type: 'text/javascript',
+    id: 'svg-matrix-polyfill'
+  }, [], script);
 
-  // Insert script at beginning of SVG (after any xml declaration)
+  // Insert script at beginning of SVG (after defs if present, else at start)
   if (svg.children && svg.children.length > 0) {
-    svg.children.unshift(scriptEl);
+    // Find first non-defs element to insert before
+    let insertIdx = 0;
+    for (let i = 0; i < svg.children.length; i++) {
+      if (svg.children[i].tagName === 'defs') {
+        insertIdx = i + 1;
+        break;
+      }
+    }
+    svg.children.splice(insertIdx, 0, scriptEl);
   } else if (svg.children) {
     svg.children.push(scriptEl);
   }
@@ -418,6 +285,8 @@ export function injectPolyfills(doc, options = {}) {
  * @returns {Object} The document (modified in place)
  */
 export function removePolyfills(doc) {
+  if (!doc) return doc;
+
   const walk = (el) => {
     if (!el || !el.children) return;