@emasoft/svg-matrix 1.0.26 → 1.0.28

package/src/svg2-polyfills.js

@@ -0,0 +1,444 @@
+/**
+ * SVG 2.0 Polyfill Generator
+ *
+ * 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.
+ * All polyfills are embedded inline in the SVG for self-contained output.
+ *
+ * @module svg2-polyfills
+ */
+
+import { SVGElement } from './svg-parser.js';
+
+/**
+ * SVG 2.0 features that can be polyfilled
+ */
+export const SVG2_FEATURES = {
+  MESH_GRADIENT: 'meshGradient',
+  HATCH: 'hatch',
+  CONTEXT_PAINT: 'context-paint',
+  AUTO_START_REVERSE: 'auto-start-reverse'
+};
+
+/**
+ * Detect SVG 2.0 features that need polyfills in a document.
+ *
+ * @param {Object} doc - Parsed SVG document
+ * @returns {{meshGradients: string[], hatches: string[], contextPaint: boolean, autoStartReverse: boolean}} Detected features
+ */
+export function detectSVG2Features(doc) {
+  const features = {
+    meshGradients: [],
+    hatches: [],
+    contextPaint: false,
+    autoStartReverse: false
+  };
+
+  const walk = (el) => {
+    if (!el) return;
+
+    // Check tag name for mesh gradient (case-insensitive)
+    const tagName = el.tagName?.toLowerCase();
+    if (tagName === 'meshgradient') {
+      const id = el.getAttribute('id');
+      if (id) features.meshGradients.push(id);
+    }
+
+    // Check for hatch element
+    if (tagName === 'hatch') {
+      const id = el.getAttribute('id');
+      if (id) features.hatches.push(id);
+    }
+
+    // Check for context-paint in fill/stroke
+    const fill = el.getAttribute('fill');
+    const stroke = el.getAttribute('stroke');
+    if (fill === 'context-fill' || fill === 'context-stroke' ||
+        stroke === 'context-fill' || stroke === 'context-stroke') {
+      features.contextPaint = true;
+    }
+
+    // Check for auto-start-reverse in markers
+    const orient = el.getAttribute('orient');
+    if (orient === 'auto-start-reverse') {
+      features.autoStartReverse = true;
+    }
+
+    // Recurse into children
+    if (el.children) {
+      for (const child of el.children) {
+        walk(child);
+      }
+    }
+  };
+
+  walk(doc);
+  return features;
+}
+
+/**
+ * Check if document needs any SVG 2 polyfills.
+ *
+ * @param {Object} doc - Parsed SVG document
+ * @returns {boolean} True if polyfills are needed
+ */
+export function needsPolyfills(doc) {
+  const features = detectSVG2Features(doc);
+  return features.meshGradients.length > 0 ||
+         features.hatches.length > 0 ||
+         features.contextPaint ||
+         features.autoStartReverse;
+}
+
+/**
+ * Generate the mesh gradient polyfill code.
+ * This polyfill renders mesh gradients to canvas and uses them as image fills.
+ *
+ * @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
+    };
+  }
+
+  // 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)');
+      }
+    });
+  });
+})();
+`;
+}
+
+/**
+ * Generate the hatch pattern polyfill code.
+ * Converts SVG 2 hatch elements to SVG 1.1 pattern elements.
+ *
+ * @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)');
+      }
+    });
+  });
+})();
+`;
+}
+
+/**
+ * Generate complete polyfill script based on detected features.
+ *
+ * @param {{meshGradients: string[], hatches: string[], contextPaint: boolean, autoStartReverse: boolean}} features - Detected features
+ * @returns {string|null} Complete polyfill script or null if none needed
+ */
+export function generatePolyfillScript(features) {
+  const parts = [];
+
+  parts.push('/* SVG 2.0 Polyfills - Generated by svg-matrix */');
+
+  if (features.meshGradients.length > 0) {
+    parts.push(generateMeshPolyfillCode());
+  }
+
+  if (features.hatches.length > 0) {
+    parts.push(generateHatchPolyfillCode());
+  }
+
+  if (parts.length === 1) {
+    return null; // Only header, no actual polyfills
+  }
+
+  return parts.join('\n');
+}
+
+/**
+ * Inject polyfill script into SVG document.
+ *
+ * @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 = {}) {
+  // 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 &&
+      features.meshGradients.length === 0 &&
+      features.hatches.length === 0) {
+    return doc;
+  }
+
+  const script = generatePolyfillScript(features);
+  if (!script) return doc;
+
+  // Find or create the SVG root
+  const svg = doc.documentElement || doc;
+
+  // 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 defs if present, else at start)
+  if (svg.children && svg.children.length > 0) {
+    // 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);
+  }
+
+  return doc;
+}
+
+/**
+ * Remove polyfill scripts from SVG document.
+ *
+ * @param {Object} doc - Parsed SVG document
+ * @returns {Object} The document (modified in place)
+ */
+export function removePolyfills(doc) {
+  const walk = (el) => {
+    if (!el || !el.children) return;
+
+    // Remove script elements that are svg-matrix polyfills
+    el.children = el.children.filter(child => {
+      if (child.tagName === 'script') {
+        const content = child.textContent || '';
+        if (content.includes('SVG 2.0 Polyfill') ||
+            content.includes('Generated by svg-matrix')) {
+          return false;
+        }
+      }
+      return true;
+    });
+
+    // Recurse
+    for (const child of el.children) {
+      walk(child);
+    }
+  };
+
+  walk(doc);
+  return doc;
+}