@emasoft/svg-matrix 1.1.0 → 1.2.0

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

@@ -9,10 +9,10 @@
 
 (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';
+  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) => {
@@ -24,13 +24,18 @@
   // Copy attributes from the hatch with 'id' to the current element
   const setReference = (el, id) => {
     const attr = [
-      'x', 'y', 'pitch', 'rotate',
-      'hatchUnits', 'hatchContentUnits', 'transform'
+      "x",
+      "y",
+      "pitch",
+      "rotate",
+      "hatchUnits",
+      "hatchContentUnits",
+      "transform",
     ];
     const template = document.getElementById(id.slice(1));
 
-    if (template && template.nodeName === 'hatch') {
-      attr.forEach(a => {
+    if (template && template.nodeName === "hatch") {
+      attr.forEach((a) => {
         let t = template.getAttribute(a);
         if (el.getAttribute(a) === null && t !== null) {
           el.setAttribute(a, t);
@@ -38,7 +43,7 @@
       });
 
       if (el.children.length === 0) {
-        Array.from(template.children).forEach(c => {
+        Array.from(template.children).forEach((c) => {
           el.appendChild(c.cloneNode(true));
         });
       }
@@ -48,11 +53,12 @@
   // Order pain-order of hatchpaths relative to their pitch
   const orderHatchPaths = (paths) => {
     const nodeArray = [];
-    paths.forEach(p => nodeArray.push(p));
+    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'))
+    return nodeArray.sort(
+      (a, b) =>
+        // (pitch - a.offset) - (pitch - b.offset)
+        Number(b.getAttribute("offset")) - Number(a.getAttribute("offset")),
     );
   };
 
@@ -92,55 +98,65 @@
 
     while (i < len) {
       switch (data[i].toUpperCase()) {
-        case 'Z':
+        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])));
+        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':
+        case "H":
           array.push(data[i], new Point(Number(data[i + 1]), null));
           i += 2;
           last = 2;
           break;
-        case 'V':
+        case "V":
           array.push(data[i], new Point(null, Number(data[i + 1])));
           i += 2;
           last = 3;
           break;
-        case 'C':
+        case "C":
           array.push(
-            data[i], new Point(Number(data[i + 1]), Number(data[i + 2])),
+            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]))
+            new Point(Number(data[i + 5]), Number(data[i + 6])),
           );
           i += 7;
           last = 4;
           break;
-        case 'S':
-        case 'Q':
+        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]))
+            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':
+        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]))
+            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':
+        case "B":
           array.push(data[i], data[i + 1]);
           i += 2;
           last = 7;
@@ -163,21 +179,25 @@
               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]))
+                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]))
+                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]))
+                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;
@@ -192,70 +212,72 @@
   };
 
   const getYDistance = (hatchpath) => {
-    const path = document.createElementNS(svgNS, 'path');
-    let d = hatchpath.getAttribute('d');
+    const path = document.createElementNS(svgNS, "path");
+    let d = hatchpath.getAttribute("d");
 
-    if (d[0].toUpperCase() !== 'M') {
+    if (d[0].toUpperCase() !== "M") {
       d = `M 0,0 ${d}`;
     }
 
-    path.setAttribute('d', d);
+    path.setAttribute("d", d);
 
-    return path.getPointAtLength(path.getTotalLength()).y -
-      path.getPointAtLength(0).y;
+    return (
+      path.getPointAtLength(path.getTotalLength()).y -
+      path.getPointAtLength(0).y
+    );
   };
 
   // Point class --------------------------------------
   class Point {
-    constructor (x, y) {
+    constructor(x, y) {
       this.x = x;
       this.y = y;
     }
 
-    toString () {
+    toString() {
       return `${this.x} ${this.y}`;
     }
 
-    isPoint () {
+    isPoint() {
       return true;
     }
 
-    clone () {
+    clone() {
       return new Point(this.x, this.y);
     }
 
-    add (v) {
+    add(v) {
       return new Point(this.x + v.x, this.y + v.y);
     }
 
-    distSquared (v) {
+    distSquared(v) {
       let x = this.x - v.x;
       let y = this.y - v.y;
-      return (x * x + y * y);
+      return x * x + y * y;
     }
   }
 
   // Start of document processing ---------------------
-  const shapes = document.querySelectorAll('rect,circle,ellipse,path,text');
+  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');
+    let shapeId = shape.getAttribute("id");
     if (!shapeId) {
-      shapeId = 'hatch_shape_' + i;
-      shape.setAttribute('id', shapeId);
+      shapeId = "hatch_shape_" + i;
+      shape.setAttribute("id", shapeId);
     }
 
-    const fill = shape.getAttribute('fill') || shape.style.fill;
+    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 (hatch && hatch.nodeName === "hatch") {
+        const href = hatch.getAttributeNS(xlinkNS, "href");
 
-        if (href !== null && href !== '') {
+        if (href !== null && href !== "") {
           setReference(hatch, href);
         }
 
@@ -265,26 +287,34 @@
         }
 
         const bbox = shape.getBBox();
-        const hatchDiag = Math.ceil(Math.sqrt(
-          bbox.width * bbox.width + bbox.height * bbox.height
-        ));
+        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;
+        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;
@@ -293,45 +323,46 @@
         // A negative value is an error.
         // A value of zero disables rendering of the element
         if (pitch <= 0) {
-          console.error('Non-positive pitch');
+          console.error("Non-positive pitch");
           return;
         }
 
         // Pattern variables
-        const pattern = document.createElementNS(svgNS, 'pattern');
+        const pattern = document.createElementNS(svgNS, "pattern");
         const patternId = `${fillURL[1]}_pattern`;
-        let patternWidth = bbox.width - bbox.width % pitch;
+        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);
+        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 = '';
+          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') {
+            if (attr.name !== "d") {
               path.setAttribute(attr.name, attr.value);
             }
           }
 
-          if (hatchpath.getAttribute('d') === null) {
+          if (hatchpath.getAttribute("d") === null) {
             d += currentXPositions.reduce(
-              (acc, xPos) => `${acc}M ${xPos} ${y} V ${hatchDiag} `, ''
+              (acc, xPos) => `${acc}M ${xPos} ${y} V ${hatchDiag} `,
+              "",
             );
             patternHeight = hatchDiag;
           } else {
-            const hatchData = hatchpath.getAttribute('d');
+            const hatchData = hatchpath.getAttribute("d");
             const data = parsePath(
-              hatchData.match(/([+-]?(\d+(\.\d+)?))|[MmZzLlHhVvCcSsQqTtAaBb]/g)
+              hatchData.match(/([+-]?(\d+(\.\d+)?))|[MmZzLlHhVvCcSsQqTtAaBb]/g),
             );
             const len = data.length;
-            const startsWithM = data[0] === 'M';
+            const startsWithM = data[0] === "M";
             const relative = data[0].toLowerCase() === data[0];
             const point = new Point(0, 0);
             let yOffset = getYDistance(hatchpath);
@@ -342,23 +373,26 @@
 
             // The offset must be positive
             if (yOffset <= 0) {
-              console.error('y offset is non-positive');
+              console.error("y offset is non-positive");
               return;
             }
-            patternHeight = bbox.height - bbox.height % yOffset;
+            patternHeight = bbox.height - (bbox.height % yOffset);
 
             const currentYPositions = generatePositions(
-              patternHeight, hatchDiag, y, yOffset
+              patternHeight,
+              hatchDiag,
+              y,
+              yOffset,
             );
 
-            currentXPositions.forEach(xPos => {
+            currentXPositions.forEach((xPos) => {
               point.x = xPos;
 
               if (!startsWithM && !relative) {
                 d += `M ${xPos} 0`;
               }
 
-              currentYPositions.forEach(yPos => {
+              currentYPositions.forEach((yPos) => {
                 point.y = yPos;
 
                 if (relative) {
@@ -366,35 +400,36 @@
                   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}`, '');
+                  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.style.fill = "none";
           }
 
-          path.setAttribute('d', d);
+          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}`
+          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})`);
+        shape.setAttribute("fill", `url(#${patternId})`);
       }
     }
   });