@emasoft/svg-matrix 1.0.28 → 1.0.30

package/src/vendor/README.md

@@ -0,0 +1,110 @@
+# Vendor Dependencies
+
+This directory contains third-party code used by SVG-MATRIX for SVG 2.0 browser compatibility.
+
+## Files
+
+| File | Size | License | Author |
+|------|------|---------|--------|
+| inkscape-mesh-polyfill.js | ~35KB | GPLv3 | Tavmjong Bah |
+| inkscape-mesh-polyfill.min.js | ~16KB | GPLv3 | Tavmjong Bah |
+| inkscape-hatch-polyfill.js | ~10KB | CC0 | Valentin Ionita |
+| inkscape-hatch-polyfill.min.js | ~5KB | CC0 | Valentin Ionita |
+
+---
+
+## inkscape-mesh-polyfill.js / inkscape-mesh-polyfill.min.js
+
+**Source:** https://gitlab.com/Tavmjong/mesh.js/
+**Author:** Tavmjong Bah
+**License:** GNU General Public License version 3 or later (GPLv3+)
+**Copyright:** 2017 Tavmjong Bah
+
+### Description
+
+JavaScript polyfill for SVG 2.0 mesh gradients. Renders mesh gradients to HTML5 Canvas and converts them to images for browser compatibility.
+
+### Features
+
+- Multi-patch grid support (multiple meshrows and meshpatches)
+- Bezier curve edge parsing (l, L, c, C path commands)
+- Adaptive tessellation via de Casteljau subdivision
+- gradientTransform support (translate, rotate, scale, skew, matrix)
+- Proper shape clipping via clipPath
+- objectBoundingBox and userSpaceOnUse gradientUnits
+
+### License Notice
+
+This file is distributed under the GNU General Public License version 3 or later.
+See https://www.gnu.org/licenses/gpl-3.0.html for the full license text.
+
+**IMPORTANT:** When using SVG-MATRIX with the `--svg2-polyfills` option on SVGs
+containing mesh gradients, the generated SVG files will contain this GPLv3-licensed
+polyfill code embedded in a `<script>` element. Distribution of such files must
+comply with GPLv3 terms.
+
+### Usage in SVG-MATRIX
+
+The polyfill is automatically embedded when:
+1. The SVG contains `<meshgradient>` elements
+2. The `--svg2-polyfills` CLI option is used
+
+The polyfill runs in the browser at page load and:
+1. Detects elements using mesh gradient fills
+2. Rasterizes each mesh gradient to a Canvas
+3. Converts the Canvas to a PNG data URL
+4. Creates an `<image>` element with proper clipping
+5. Replaces the original fill with the rasterized image
+
+---
+
+## inkscape-hatch-polyfill.js / inkscape-hatch-polyfill.min.js
+
+**Source:** https://gitlab.com/inkscape/inkscape/-/tree/master/src/extension/internal/polyfill
+**Author:** Valentin Ionita (2019)
+**License:** CC0 / Public Domain
+**Copyright:** None (dedicated to public domain)
+
+### Description
+
+JavaScript polyfill for SVG 2.0 hatch patterns. Converts SVG 2 `<hatch>` elements
+to SVG 1.1 `<pattern>` elements for browser compatibility.
+
+### Features
+
+- Full SVG path command support (M, L, C, S, Q, T, A, H, V, Z)
+- Both relative and absolute path coordinates
+- objectBoundingBox and userSpaceOnUse coordinate systems
+- Hatch rotation and transform support
+- Multiple hatchpath elements with offset values
+- Proper pitch and spacing calculations
+- Pattern tiling and repetition
+
+### License Notice
+
+This file is dedicated to the public domain under CC0 (Creative Commons Zero).
+See https://creativecommons.org/publicdomain/zero/1.0/ for details.
+
+There are no restrictions on distribution or use of this polyfill.
+
+### Usage in SVG-MATRIX
+
+The polyfill is automatically embedded when:
+1. The SVG contains `<hatch>` elements
+2. The `--svg2-polyfills` CLI option is used
+
+The polyfill runs in the browser at page load and:
+1. Detects elements using hatch pattern fills
+2. Calculates bounding boxes and pitch values
+3. Generates equivalent `<pattern>` elements
+4. Updates fill references to use the generated patterns
+
+---
+
+## Minified vs Full Versions
+
+By default, SVG-MATRIX uses the minified polyfills for smaller file sizes:
+- Mesh: ~16KB minified vs ~35KB full
+- Hatch: ~5KB minified vs ~10KB full
+
+Use `--no-minify-polyfills` to embed the full, readable versions (useful for debugging).

package/src/vendor/inkscape-hatch-polyfill.js

@@ -0,0 +1,401 @@
+// SPDX-License-Identifier: CC0
+/** @file
+ * Use patterns to render a hatch paint server via this polyfill
+ *//*
+ * Authors:
+ *  - Valentin Ionita (2019)
+ * License: CC0 / Public Domain
+ */
+
+(function () {
+  // Name spaces -----------------------------------
+  const svgNS = 'http://www.w3.org/2000/svg';
+  const xlinkNS = 'http://www.w3.org/1999/xlink';
+  const unitObjectBoundingBox = 'objectBoundingBox';
+  const unitUserSpace = 'userSpaceOnUse';
+
+  // Set multiple attributes to an element
+  const setAttributes = (el, attrs) => {
+    for (let key in attrs) {
+      el.setAttribute(key, attrs[key]);
+    }
+  };
+
+  // Copy attributes from the hatch with 'id' to the current element
+  const setReference = (el, id) => {
+    const attr = [
+      'x', 'y', 'pitch', 'rotate',
+      'hatchUnits', 'hatchContentUnits', 'transform'
+    ];
+    const template = document.getElementById(id.slice(1));
+
+    if (template && template.nodeName === 'hatch') {
+      attr.forEach(a => {
+        let t = template.getAttribute(a);
+        if (el.getAttribute(a) === null && t !== null) {
+          el.setAttribute(a, t);
+        }
+      });
+
+      if (el.children.length === 0) {
+        Array.from(template.children).forEach(c => {
+          el.appendChild(c.cloneNode(true));
+        });
+      }
+    }
+  };
+
+  // Order pain-order of hatchpaths relative to their pitch
+  const orderHatchPaths = (paths) => {
+    const nodeArray = [];
+    paths.forEach(p => nodeArray.push(p));
+
+    return nodeArray.sort((a, b) =>
+      // (pitch - a.offset) - (pitch - b.offset)
+      Number(b.getAttribute('offset')) - Number(a.getAttribute('offset'))
+    );
+  };
+
+  // Generate x-axis coordinates for the pattern paths
+  const generatePositions = (width, diagonal, initial, distance) => {
+    const offset = (diagonal - width) / 2;
+    const leftDistance = initial + offset;
+    const rightDistance = width + offset + distance;
+    const units = Math.round(leftDistance / distance) + 1;
+    let array = [];
+
+    for (let i = initial - units * distance; i < rightDistance; i += distance) {
+      array.push(i);
+    }
+
+    return array;
+  };
+
+  // Turn a path array into a tokenized version of it
+  const parsePath = (data) => {
+    let array = [];
+    let i = 0;
+    let len = data.length;
+    let last = 0;
+
+    /*
+     * Last state (last) index map
+     * 0 => ()
+     * 1 => (x y)
+     * 2 => (x)
+     * 3 => (y)
+     * 4 => (x1 y1 x2 y2 x y)
+     * 5 => (x2 y2 x y)
+     * 6 => (_ _ _ _ _ x y)
+     * 7 => (_)
+     */
+
+    while (i < len) {
+      switch (data[i].toUpperCase()) {
+        case 'Z':
+          array.push(data[i]);
+          i += 1;
+          last = 0;
+          break;
+        case 'M':
+        case 'L':
+        case 'T':
+          array.push(data[i], new Point(Number(data[i + 1]), Number(data[i + 2])));
+          i += 3;
+          last = 1;
+          break;
+        case 'H':
+          array.push(data[i], new Point(Number(data[i + 1]), null));
+          i += 2;
+          last = 2;
+          break;
+        case 'V':
+          array.push(data[i], new Point(null, Number(data[i + 1])));
+          i += 2;
+          last = 3;
+          break;
+        case 'C':
+          array.push(
+            data[i], new Point(Number(data[i + 1]), Number(data[i + 2])),
+            new Point(Number(data[i + 3]), Number(data[i + 4])),
+            new Point(Number(data[i + 5]), Number(data[i + 6]))
+          );
+          i += 7;
+          last = 4;
+          break;
+        case 'S':
+        case 'Q':
+          array.push(
+            data[i], new Point(Number(data[i + 1]), Number(data[i + 2])),
+            new Point(Number(data[i + 3]), Number(data[i + 4]))
+          );
+          i += 5;
+          last = 5;
+          break;
+        case 'A':
+          array.push(
+            data[i], data[i + 1], data[i + 2], data[i + 3], data[i + 4],
+            data[i + 5], new Point(Number(data[i + 6]), Number(data[i + 7]))
+          );
+          i += 8;
+          last = 6;
+          break;
+        case 'B':
+          array.push(data[i], data[i + 1]);
+          i += 2;
+          last = 7;
+          break;
+        default:
+          switch (last) {
+            case 1:
+              array.push(new Point(Number(data[i]), Number(data[i + 1])));
+              i += 2;
+              break;
+            case 2:
+              array.push(new Point(Number(data[i]), null));
+              i += 1;
+              break;
+            case 3:
+              array.push(new Point(null, Number(data[i])));
+              i += 1;
+              break;
+            case 4:
+              array.push(
+                new Point(Number(data[i]), Number(data[i + 1])),
+                new Point(Number(data[i + 2]), Number(data[i + 3])),
+                new Point(Number(data[i + 4]), Number(data[i + 5]))
+              );
+              i += 6;
+              break;
+            case 5:
+              array.push(
+                new Point(Number(data[i]), Number(data[i + 1])),
+                new Point(Number(data[i + 2]), Number(data[i + 3]))
+              );
+              i += 4;
+              break;
+            case 6:
+              array.push(
+                data[i], data[i + 1], data[i + 2], data[i + 3], data[i + 4],
+                new Point(Number(data[i + 5]), Number(data[i + 6]))
+              );
+              i += 7;
+              break;
+            default:
+              array.push(data[i]);
+              i += 1;
+          }
+      }
+    }
+
+    return array;
+  };
+
+  const getYDistance = (hatchpath) => {
+    const path = document.createElementNS(svgNS, 'path');
+    let d = hatchpath.getAttribute('d');
+
+    if (d[0].toUpperCase() !== 'M') {
+      d = `M 0,0 ${d}`;
+    }
+
+    path.setAttribute('d', d);
+
+    return path.getPointAtLength(path.getTotalLength()).y -
+      path.getPointAtLength(0).y;
+  };
+
+  // Point class --------------------------------------
+  class Point {
+    constructor (x, y) {
+      this.x = x;
+      this.y = y;
+    }
+
+    toString () {
+      return `${this.x} ${this.y}`;
+    }
+
+    isPoint () {
+      return true;
+    }
+
+    clone () {
+      return new Point(this.x, this.y);
+    }
+
+    add (v) {
+      return new Point(this.x + v.x, this.y + v.y);
+    }
+
+    distSquared (v) {
+      let x = this.x - v.x;
+      let y = this.y - v.y;
+      return (x * x + y * y);
+    }
+  }
+
+  // Start of document processing ---------------------
+  const shapes = document.querySelectorAll('rect,circle,ellipse,path,text');
+
+  shapes.forEach((shape, i) => {
+    // Get id. If no id, create one.
+    let shapeId = shape.getAttribute('id');
+    if (!shapeId) {
+      shapeId = 'hatch_shape_' + i;
+      shape.setAttribute('id', shapeId);
+    }
+
+    const fill = shape.getAttribute('fill') || shape.style.fill;
+    const fillURL = fill.match(/^url\(\s*"?\s*#([^\s"]+)"?\s*\)/);
+
+    if (fillURL && fillURL[1]) {
+      const hatch = document.getElementById(fillURL[1]);
+
+      if (hatch && hatch.nodeName === 'hatch') {
+        const href = hatch.getAttributeNS(xlinkNS, 'href');
+
+        if (href !== null && href !== '') {
+          setReference(hatch, href);
+        }
+
+        // Degenerate hatch, with no hatchpath children
+        if (hatch.children.length === 0) {
+          return;
+        }
+
+        const bbox = shape.getBBox();
+        const hatchDiag = Math.ceil(Math.sqrt(
+          bbox.width * bbox.width + bbox.height * bbox.height
+        ));
+
+        // Hatch variables
+        const units = hatch.getAttribute('hatchUnits') || unitObjectBoundingBox;
+        const contentUnits = hatch.getAttribute('hatchContentUnits') || unitUserSpace;
+        const rotate = Number(hatch.getAttribute('rotate')) || 0;
+        const transform = hatch.getAttribute('transform') ||
+        hatch.getAttribute('hatchTransform') || '';
+        const hatchpaths = orderHatchPaths(hatch.querySelectorAll('hatchpath,hatchPath'));
+        const x = units === unitObjectBoundingBox
+          ? (Number(hatch.getAttribute('x')) * bbox.width) || 0
+          : Number(hatch.getAttribute('x')) || 0;
+        const y = units === unitObjectBoundingBox
+          ? (Number(hatch.getAttribute('y')) * bbox.width) || 0
+          : Number(hatch.getAttribute('y')) || 0;
+        let pitch = units === unitObjectBoundingBox
+          ? (Number(hatch.getAttribute('pitch')) * bbox.width) || 0
+          : Number(hatch.getAttribute('pitch')) || 0;
+
+        if (contentUnits === unitObjectBoundingBox && bbox.height) {
+          pitch /= bbox.height;
+        }
+
+        // A negative value is an error.
+        // A value of zero disables rendering of the element
+        if (pitch <= 0) {
+          console.error('Non-positive pitch');
+          return;
+        }
+
+        // Pattern variables
+        const pattern = document.createElementNS(svgNS, 'pattern');
+        const patternId = `${fillURL[1]}_pattern`;
+        let patternWidth = bbox.width - bbox.width % pitch;
+        let patternHeight = 0;
+
+        const xPositions = generatePositions(patternWidth, hatchDiag, x, pitch);
+
+        hatchpaths.forEach(hatchpath => {
+          let offset = Number(hatchpath.getAttribute('offset')) || 0;
+          offset = offset > pitch ? (offset % pitch) : offset;
+          const currentXPositions = xPositions.map(p => p + offset);
+
+          const path = document.createElementNS(svgNS, 'path');
+          let d = '';
+
+          for (let j = 0; j < hatchpath.attributes.length; ++j) {
+            const attr = hatchpath.attributes.item(j);
+            if (attr.name !== 'd') {
+              path.setAttribute(attr.name, attr.value);
+            }
+          }
+
+          if (hatchpath.getAttribute('d') === null) {
+            d += currentXPositions.reduce(
+              (acc, xPos) => `${acc}M ${xPos} ${y} V ${hatchDiag} `, ''
+            );
+            patternHeight = hatchDiag;
+          } else {
+            const hatchData = hatchpath.getAttribute('d');
+            const data = parsePath(
+              hatchData.match(/([+-]?(\d+(\.\d+)?))|[MmZzLlHhVvCcSsQqTtAaBb]/g)
+            );
+            const len = data.length;
+            const startsWithM = data[0] === 'M';
+            const relative = data[0].toLowerCase() === data[0];
+            const point = new Point(0, 0);
+            let yOffset = getYDistance(hatchpath);
+
+            if (data[len - 1].y !== undefined && yOffset < data[len - 1].y) {
+              yOffset = data[len - 1].y;
+            }
+
+            // The offset must be positive
+            if (yOffset <= 0) {
+              console.error('y offset is non-positive');
+              return;
+            }
+            patternHeight = bbox.height - bbox.height % yOffset;
+
+            const currentYPositions = generatePositions(
+              patternHeight, hatchDiag, y, yOffset
+            );
+
+            currentXPositions.forEach(xPos => {
+              point.x = xPos;
+
+              if (!startsWithM && !relative) {
+                d += `M ${xPos} 0`;
+              }
+
+              currentYPositions.forEach(yPos => {
+                point.y = yPos;
+
+                if (relative) {
+                  // Path is relative, set the first point in each path render
+                  d += `M ${xPos} ${yPos} ${hatchData}`;
+                } else {
+                  // Path is absolute, translate every point
+                  d += data.map(e => e.isPoint && e.isPoint() ? e.add(point) : e)
+                    .map(e => e.isPoint && e.isPoint() ? e.toString() : e)
+                    .reduce((acc, e) => `${acc} ${e}`, '');
+                }
+              });
+            });
+
+            // The hatchpaths are infinite, so they have no fill
+            path.style.fill = 'none';
+          }
+
+          path.setAttribute('d', d);
+          pattern.appendChild(path);
+        });
+
+        setAttributes(pattern, {
+          'id': patternId,
+          'patternUnits': unitUserSpace,
+          'patternContentUnits': contentUnits,
+          'width': patternWidth,
+          'height': patternHeight,
+          'x': bbox.x,
+          'y': bbox.y,
+          'patternTransform': `rotate(${rotate} ${0} ${0}) ${transform}`
+        });
+        hatch.parentElement.insertBefore(pattern, hatch);
+
+        shape.style.fill = `url(#${patternId})`;
+        shape.setAttribute('fill', `url(#${patternId})`);
+      }
+    }
+  });
+})();

package/src/vendor/inkscape-hatch-polyfill.min.js

@@ -0,0 +1,8 @@
+/**
+ * Inkscape Hatch Pattern Polyfill (Minified)
+ * Source: https://gitlab.com/inkscape/inkscape/-/blob/master/src/extension/internal/polyfill/hatch_compressed.include
+ * License: CC0 (Public Domain)
+ *
+ * Converts SVG 2 hatch elements to SVG 1.1 pattern elements for browser compatibility.
+ */
+!function(){const t="http://www.w3.org/2000/svg",e=(t,e,r,n)=>{const u=(e-t)/2,i=r+u,s=t+u+n;let h=[];for(let t=r-(Math.round(i/n)+1)*n;t<s;t+=n)h.push(t);return h};class r{constructor(t,e){this.x=t,this.y=e}toString(){return`${this.x} ${this.y}`}isPoint(){return!0}clone(){return new r(this.x,this.y)}add(t){return new r(this.x+t.x,this.y+t.y)}distSquared(t){let e=this.x-t.x,r=this.y-t.y;return e*e+r*r}}document.querySelectorAll("rect,circle,ellipse,path,text").forEach((n,u)=>{let i=n.getAttribute("id");i||(i="hatch_shape_"+u,n.setAttribute("id",i));const s=(n.getAttribute("fill")||n.style.fill).match(/^url\(\s*"?\s*#([^\s"]+)"?\s*\)/);if(s&&s[1]){const u=document.getElementById(s[1]);if(u&&"hatch"===u.nodeName){const i=u.getAttributeNS("http://www.w3.org/1999/xlink","href");if(null!==i&&""!==i&&((t,e)=>{const r=["x","y","pitch","rotate","hatchUnits","hatchContentUnits","transform"],n=document.getElementById(e.slice(1));n&&"hatch"===n.nodeName&&(r.forEach(e=>{let r=n.getAttribute(e);null===t.getAttribute(e)&&null!==r&&t.setAttribute(e,r)}),0===t.children.length&&Array.from(n.children).forEach(e=>{t.appendChild(e.cloneNode(!0))}))})(u,i),0===u.children.length)return;const h=n.getBBox(),o=Math.ceil(Math.sqrt(h.width*h.width+h.height*h.height)),a=u.getAttribute("hatchUnits")||"objectBoundingBox",c=u.getAttribute("hatchContentUnits")||"userSpaceOnUse",b=Number(u.getAttribute("rotate"))||0,l=u.getAttribute("transform")||u.getAttribute("hatchTransform")||"",m=(t=>{const e=[];return t.forEach(t=>e.push(t)),e.sort((t,e)=>Number(e.getAttribute("offset"))-Number(t.getAttribute("offset")))})(u.querySelectorAll("hatchpath,hatchPath")),d="objectBoundingBox"===a?Number(u.getAttribute("x"))*h.width||0:Number(u.getAttribute("x"))||0,g="objectBoundingBox"===a?Number(u.getAttribute("y"))*h.width||0:Number(u.getAttribute("y"))||0;let p="objectBoundingBox"===a?Number(u.getAttribute("pitch"))*h.width||0:Number(u.getAttribute("pitch"))||0;if("objectBoundingBox"===c&&h.height&&(p/=h.height),p<=0)return void console.error("Non-positive pitch");const N=document.createElementNS(t,"pattern"),f=`${s[1]}_pattern`;let w=h.width-h.width%p,A=0;const y=e(w,o,d,p);m.forEach(n=>{let u=Number(n.getAttribute("offset"))||0;u=u>p?u%p:u;const i=y.map(t=>t+u),s=document.createElementNS(t,"path");let a="";for(let t=0;t<n.attributes.length;++t){const e=n.attributes.item(t);"d"!==e.name&&s.setAttribute(e.name,e.value)}if(null===n.getAttribute("d"))a+=i.reduce((t,e)=>`${t}M ${e} ${g} V ${o} `,""),A=o;else{const u=n.getAttribute("d"),c=(t=>{let e=[],n=0,u=t.length,i=0;for(;n<u;)switch(t[n].toUpperCase()){case"Z":e.push(t[n]),n+=1,i=0;break;case"M":case"L":case"T":e.push(t[n],new r(Number(t[n+1]),Number(t[n+2]))),n+=3,i=1;break;case"H":e.push(t[n],new r(Number(t[n+1]),null)),n+=2,i=2;break;case"V":e.push(t[n],new r(null,Number(t[n+1]))),n+=2,i=3;break;case"C":e.push(t[n],new r(Number(t[n+1]),Number(t[n+2])),new r(Number(t[n+3]),Number(t[n+4])),new r(Number(t[n+5]),Number(t[n+6]))),n+=7,i=4;break;case"S":case"Q":e.push(t[n],new r(Number(t[n+1]),Number(t[n+2])),new r(Number(t[n+3]),Number(t[n+4]))),n+=5,i=5;break;case"A":e.push(t[n],t[n+1],t[n+2],t[n+3],t[n+4],t[n+5],new r(Number(t[n+6]),Number(t[n+7]))),n+=8,i=6;break;case"B":e.push(t[n],t[n+1]),n+=2,i=7;break;default:switch(i){case 1:e.push(new r(Number(t[n]),Number(t[n+1]))),n+=2;break;case 2:e.push(new r(Number(t[n]),null)),n+=1;break;case 3:e.push(new r(null,Number(t[n]))),n+=1;break;case 4:e.push(new r(Number(t[n]),Number(t[n+1])),new r(Number(t[n+2]),Number(t[n+3])),new r(Number(t[n+4]),Number(t[n+5]))),n+=6;break;case 5:e.push(new r(Number(t[n]),Number(t[n+1])),new r(Number(t[n+2]),Number(t[n+3]))),n+=4;break;case 6:e.push(t[n],t[n+1],t[n+2],t[n+3],t[n+4],new r(Number(t[n+5]),Number(t[n+6]))),n+=7;break;default:e.push(t[n]),n+=1}}return e})(u.match(/([+-]?(\d+(\.\d+)?))|[MmZzLlHhVvCcSsQqTtAaBb]/g)),b=c.length,l="M"===c[0],m=c[0].toLowerCase()===c[0],d=new r(0,0);let p=(e=>{const r=document.createElementNS(t,"path");let n=e.getAttribute("d");return"M"!==n[0].toUpperCase()&&(n=`M 0,0 ${n}`),r.setAttribute("d",n),r.getPointAtLength(r.getTotalLength()).y-r.getPointAtLength(0).y})(n);if(void 0!==c[b-1].y&&p<c[b-1].y&&(p=c[b-1].y),p<=0)return void console.error("y offset is non-positive");A=h.height-h.height%p;const N=e(A,o,g,p);i.forEach(t=>{d.x=t,l||m||(a+=`M ${t} 0`),N.forEach(e=>{d.y=e,a+=m?`M ${t} ${e} ${u}`:c.map(t=>t.isPoint&&t.isPoint()?t.add(d):t).map(t=>t.isPoint&&t.isPoint()?t.toString():t).reduce((t,e)=>`${t} ${e}`,"")})}),s.style.fill="none"}s.setAttribute("d",a),N.appendChild(s)}),((t,e)=>{for(let r in e)t.setAttribute(r,e[r])})(N,{id:f,patternUnits:"userSpaceOnUse",patternContentUnits:c,width:w,height:A,x:h.x,y:h.y,patternTransform:`rotate(${b} 0 0) ${l}`}),u.parentElement.insertBefore(N,u),n.style.fill=`url(#${f})`,n.setAttribute("fill",`url(#${f})`)}}})}();