svg-path-simplify 0.0.7 → 0.0.9

package/src/svgii/pathData_convert.js

@@ -32,7 +32,7 @@ export function revertCubicQuadratic(p0 = {}, cp1 = {}, cp2 = {}, p = {}) {
     let values = [cp1.x, cp1.y, cp2.x, cp2.y, p.x, p.y];
     let comN = {type, values}
 
-    if (dist1 < threshold) {
+    if (dist1 && threshold && dist1 < threshold) {
         cp1_Q = checkLineIntersection(p0, cp1, p, cp2, false);
         if (cp1_Q) {
             //renderPoint(markers, cp1_Q )
@@ -55,13 +55,19 @@ export function convertPathData(pathData, {
     decimals = 3
 } = {}) {
 
+
+    //console.log(toShorthands, toRelative, decimals);
+
     //if(decimals>-1 && decimals<2) pathData = roundPathData(pathData, decimals);
     if (toShorthands) pathData = pathDataToShorthands(pathData);
 
     // pre round - before relative conversion to minimize distortions
-    pathData = roundPathData(pathData, decimals);
+    if(decimals>-1 && toRelative) pathData = roundPathData(pathData, decimals);
     if (toRelative) pathData = pathDataToRelative(pathData);
     if (decimals > -1) pathData = roundPathData(pathData, decimals);
+
+
+
     return pathData
 }
 
@@ -374,7 +380,7 @@ export function pathDataToLonghands(pathData, decimals = -1, test = true) {
  * L, L, C, Q => H, V, S, T
  * reversed method: pathDataToLonghands()
  */
-export function pathDataToShorthands(pathData, decimals = -1, test = true) {
+export function pathDataToShorthands(pathData, decimals = -1, test = false) {
 
     //pathData = JSON.parse(JSON.stringify(pathData))
     //console.log('has dec', pathData);
@@ -388,29 +394,28 @@ export function pathDataToShorthands(pathData, decimals = -1, test = true) {
         hasRel = /[astvqmhlc]/g.test(commandTokens);
     }
 
-    pathData = test && hasRel ? pathDataToAbsolute(pathData, decimals) : pathData;
+    pathData = test && hasRel ? pathDataToAbsoluteOrRelative(pathData) : pathData;
+
+    let len = pathData.length
+    let pathDataShorts = new Array(len);
 
     let comShort = {
         type: "M",
         values: pathData[0].values
     };
 
-    if (pathData[0].decimals) {
-        //console.log('has dec');
-        comShort.decimals = pathData[0].decimals
-    }
-
-    let pathDataShorts = [comShort];
+    pathDataShorts[0] = comShort;
 
     let p0 = { x: pathData[0].values[0], y: pathData[0].values[1] };
     let p;
     let tolerance = 0.01
 
-    for (let i = 1, len = pathData.length; i < len; i++) {
+    for (let i = 1; i < len; i++) {
 
         let com = pathData[i];
         let { type, values } = com;
-        let valuesLast = values.slice(-2);
+        let valuesLen = values.length;
+        let valuesLast = [values[valuesLen-2], values[valuesLen-1]];
 
         // previoius command
         let comPrev = pathData[i - 1];
@@ -462,7 +467,8 @@ export function pathDataToShorthands(pathData, decimals = -1, test = true) {
                 if (typePrev !== 'Q') {
                     //console.log('skip T:', type, typePrev);
                     p0 = { x: valuesLast[0], y: valuesLast[1] };
-                    pathDataShorts.push(com);
+                    //pathDataShorts.push(com);
+                    pathDataShorts[i] = com;
                     continue;
                 }
 
@@ -492,7 +498,9 @@ export function pathDataToShorthands(pathData, decimals = -1, test = true) {
 
                 if (typePrev !== 'C') {
                     //console.log('skip S', typePrev);
-                    pathDataShorts.push(com);
+                    //pathDataShorts.push(com);
+                    pathDataShorts[i] = com;
+
                     p0 = { x: valuesLast[0], y: valuesLast[1] };
                     continue;
                 }
@@ -525,21 +533,22 @@ export function pathDataToShorthands(pathData, decimals = -1, test = true) {
                 };
         }
 
-
         // add decimal info
         if (com.decimals || com.decimals === 0) {
             comShort.decimals = com.decimals
         }
 
-
         // round final values
         if (decimals > -1) {
             comShort.values = comShort.values.map(val => { return +val.toFixed(decimals) })
         }
 
         p0 = { x: valuesLast[0], y: valuesLast[1] };
-        pathDataShorts.push(comShort);
+        pathDataShorts[i] = comShort;
+        //pathDataShorts.push(comShort);
     }
+
+    //console.log('pathDataShorts', pathDataShorts);
     return pathDataShorts;
 }
 

package/src/svgii/pathData_interpolate.js

@@ -0,0 +1,65 @@
+export function interpolatedPathData(pathData1, pathData2, t = 0.5) {
+
+  /**
+   * linear interpolation helper (LERP)
+   * respecting non-interpolatable 
+   * Boolean values – required by arc commands
+   */
+  const interpolateValues = (values1 = [], values2 = [], t = 0) => {
+
+    // return start or end for t=0 or 1
+    if (t === 0) return values1;
+    if (t === 1) return values2;
+
+    let len = values1.length;
+    let isArc = len === 7;
+
+    // interpolated values: copy values1
+    let valuesI = values1.slice();
+
+    for (let i = 0; i < len; i++) {
+      let valI
+
+      // skip Boolean arc command values (largeArc and sweep)
+      if (isArc && (i === 3 || i === 4)) {
+        continue
+      }
+
+      // interpolate
+      valuesI[i] = (values2[i] - values1[i]) * t + values1[i];
+    }
+    return valuesI;
+  }
+
+
+  // interpolation impossible
+  if (pathData1.length !== pathData2.length) {
+    throw new Error("Paths are not compatible");
+  }
+
+
+  // interpolate command coordinates
+  let pathDataI = [];
+  pathData1.forEach((com, c) => {
+    let {
+      type,
+      values
+    } = com;
+    let [type2, values2] = [pathData2[c].type, pathData2[c].values];
+
+    // interpolate command values
+    let valuesInter = interpolateValues(values, values2, t);
+
+    pathDataI.push({
+      type: type,
+      values: valuesInter, 
+    });
+  });
+
+  // serialize to "d" attribute string 
+  let dInter = pathDataI.map(com => `${com.type} ${com.values.join(' ')}`).join(' ');
+  return {
+    pathData: pathDataI,
+    d: dInter
+  };
+}

package/src/svgii/pathData_parse.js

@@ -1,6 +1,7 @@
 //import { arcToBezier, quadratic2Cubic } from './convert.js';
 //import { getAngle, bezierhasExtreme, getDistance  } from "./geometry";
 import { pathDataToAbsoluteOrRelative, pathDataToLonghands, pathDataArcsToCubics, pathDataQuadraticToCubic } from './pathData_convert.js';
+import { pathDataToD } from './pathData_stringify.js';
 
 
 
@@ -15,10 +16,10 @@ export function normalizePathData(pathData = [],
         quadraticToCubic = false,
         arcToCubic = false,
         arcAccuracy = 2,
-    } = {},
 
-    {
+        // assume we need full normalization
         hasRelatives = true, hasShorthands = true, hasQuadratics = true, hasArcs = true, testTypes = false
+
     } = {}
 ) {
 
@@ -71,15 +72,29 @@ export function parsePathDataNormalized(d,
 ) {
 
 
-    let pathDataObj = parsePathDataString(d);
-    let { hasRelatives, hasShorthands, hasQuadratics, hasArcs } = pathDataObj;
-    let pathData = pathDataObj.pathData;
+    // is already array
+    let isArray = Array.isArray(d);
+
+    // normalize native pathData to regular array
+    let hasConstructor = isArray && typeof d[0] === 'object' && typeof d[0].constructor === 'function'
+    /*
+    if (hasConstructor) {
+        d = d.map(com => { return { type: com.type, values: com.values } })
+        console.log('hasConstructor', hasConstructor, (typeof d[0].constructor), d);
+    }
+    */
+
+    let pathDataObj = isArray ? d : parsePathDataString(d);
+
+
+    let { hasRelatives = true, hasShorthands = true, hasQuadratics = true, hasArcs = true } = pathDataObj;
+    let pathData = hasConstructor ? pathDataObj : pathDataObj.pathData;
 
     // normalize
     pathData = normalizePathData(pathData,
-        { toAbsolute, toLonghands, quadraticToCubic, arcToCubic, arcAccuracy },
-        //{test:true}
-        { hasRelatives, hasShorthands, hasQuadratics, hasArcs }
+        { toAbsolute, toLonghands, quadraticToCubic, arcToCubic, arcAccuracy,
+        hasRelatives, hasShorthands, hasQuadratics, hasArcs 
+        },
     )
 
     return pathData;
@@ -450,7 +465,8 @@ export function parsePathDataString(d, debug = true) {
         if (debug === 'log') {
             console.log(feedback);
         } else {
-            throw new Error(feedback)
+            //throw new Error(feedback)
+            console.warn(feedback)
         }
     }
 

package/src/svgii/pathData_parse_els.js

@@ -0,0 +1,245 @@
+//import { pathDataToAbsoluteOrRelative, pathDataToLonghands, cubicToArc } from './pathData_convert.js';
+import { parsePathDataString, parsePathDataNormalized, stringifyPathData } from './pathData_parse.js';
+
+export function shapeElToPath(el) {
+
+    let nodeName = el.nodeName.toLowerCase();
+    if (nodeName === 'path') return el;
+
+    let pathData = getPathDataFromEl(el);
+    let d = pathData.map(com => { return `${com.type} ${com.values} ` }).join(' ')
+    let attributes = [...el.attributes].map(att => att.name);
+
+    let pathN = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    pathN.setAttribute('d', d);
+
+    let exclude = ['x', 'y', 'cx', 'cy', 'dx', 'dy', 'r', 'rx', 'ry', 'width', 'height', 'points']
+
+    attributes.forEach(att => {
+        if (!exclude.includes(att)) {
+            let val = el.getAttribute(att);
+            pathN.setAttribute(att, val)
+        }
+    })
+
+    //el.replaceWith(pathN)
+    return pathN
+
+}
+
+
+// retrieve pathdata from svg geometry elements
+export function getPathDataFromEl(el, stringify = false) {
+
+    let pathData = [];
+    let type = el.nodeName;
+    let atts, attNames, d, x, y, width, height, r, rx, ry, cx, cy, x1, x2, y1, y2;
+
+    // convert relative or absolute units 
+    const svgElUnitsToPixel = (el, decimals = 9) => {
+        //console.log(this);
+        const svg = el.nodeName !== "svg" ? el.closest("svg") : el;
+
+        // convert real life units to pixels
+        const translateUnitToPixel = (value) => {
+
+            if (value === null) {
+                return 0
+            }
+            //default dpi = 96
+            let dpi = 96;
+            let unit = value.match(/([a-z]+)/gi);
+            unit = unit ? unit[0] : "";
+            let val = parseFloat(value);
+            let rat;
+
+            // no unit - already pixes/user unit
+            if (!unit) {
+                return val;
+            }
+
+            switch (unit) {
+                case "in":
+                    rat = dpi;
+                    break;
+                case "pt":
+                    rat = (1 / 72) * 96;
+                    break;
+                case "cm":
+                    rat = (1 / 2.54) * 96;
+                    break;
+                case "mm":
+                    rat = ((1 / 2.54) * 96) / 10;
+                    break;
+                // just a default approximation
+                case "em":
+                case "rem":
+                    rat = 16;
+                    break;
+                default:
+                    rat = 1;
+            }
+            let valuePx = val * rat;
+            return +valuePx.toFixed(decimals);
+        };
+
+        // svg width and height attributes
+        let width = svg.getAttribute("width");
+        width = width ? translateUnitToPixel(width) : 300;
+        let height = svg.getAttribute("height");
+        height = width ? translateUnitToPixel(height) : 150;
+
+        //prefer viewBox values
+        let vB = svg.getAttribute("viewBox");
+        vB = vB
+            ? vB
+                .replace(/,/g, " ")
+                .split(" ")
+                .filter(Boolean)
+                .map((val) => {
+                    return +val;
+                })
+            : [];
+
+        let w = vB.length ? vB[2] : width;
+        let h = vB.length ? vB[3] : height;
+        let scaleX = w / 100;
+        let scaleY = h / 100;
+        let scalRoot = Math.sqrt((Math.pow(scaleX, 2) + Math.pow(scaleY, 2)) / 2);
+
+        let attsH = ["x", "width", "x1", "x2", "rx", "cx", "r"];
+        let attsV = ["y", "height", "y1", "y2", "ry", "cy"];
+
+
+        let atts = el.getAttributeNames();
+        atts.forEach((att) => {
+            let val = el.getAttribute(att);
+            let valAbs = val;
+            if (attsH.includes(att) || attsV.includes(att)) {
+                let scale = attsH.includes(att) ? scaleX : scaleY;
+                scale = att === "r" && w != h ? scalRoot : scale;
+                let unit = val.match(/([a-z|%]+)/gi);
+                unit = unit ? unit[0] : "";
+                if (val.includes("%")) {
+                    valAbs = parseFloat(val) * scale;
+                }
+                //absolute units
+                else {
+                    valAbs = translateUnitToPixel(val);
+                }
+                el.setAttribute(att, +valAbs);
+            }
+        });
+    }
+
+    svgElUnitsToPixel(el)
+
+    const getAtts = (attNames) => {
+        atts = {}
+        attNames.forEach(att => {
+            atts[att] = +el.getAttribute(att)
+        })
+        return atts
+    }
+
+    switch (type) {
+        case 'path':
+            d = el.getAttribute("d");
+            pathData = parsePathDataNormalized(d);
+            break;
+
+        case 'rect':
+            attNames = ['x', 'y', 'width', 'height', 'rx', 'ry'];
+            ({ x, y, width, height, rx, ry } = getAtts(attNames));
+
+
+            if (!rx && !ry) {
+                pathData = [
+                    { type: "M", values: [x, y] },
+                    { type: "L", values: [x + width, y] },
+                    { type: "L", values: [x + width, y + height] },
+                    { type: "L", values: [x, y + height] },
+                    { type: "Z", values: [] }
+                ];
+            } else {
+
+                if (rx > width / 2) {
+                    rx = width / 2;
+                }
+                if (ry > height / 2) {
+                    ry = height / 2;
+                }
+                pathData = [
+                    { type: "M", values: [x + rx, y] },
+                    { type: "L", values: [x + width - rx, y] },
+                    { type: "A", values: [rx, ry, 0, 0, 1, x + width, y + ry] },
+                    { type: "L", values: [x + width, y + height - ry] },
+                    { type: "A", values: [rx, ry, 0, 0, 1, x + width - rx, y + height] },
+                    { type: "L", values: [x + rx, y + height] },
+                    { type: "A", values: [rx, ry, 0, 0, 1, x, y + height - ry] },
+                    { type: "L", values: [x, y + ry] },
+                    { type: "A", values: [rx, ry, 0, 0, 1, x + rx, y] },
+                    { type: "Z", values: [] }
+                ];
+            }
+            break;
+
+        case 'circle':
+        case 'ellipse':
+
+            attNames = ['cx', 'cy', 'rx', 'ry', 'r'];
+            ({ cx, cy, r, rx, ry } = getAtts(attNames));
+
+            let isCircle = type === 'circle';
+
+            if (isCircle) {
+                r = r;
+                rx = r
+                ry = r
+            } else {
+                rx = rx ? rx : r;
+                ry = ry ? ry : r;
+            }
+
+            // simplified radii for cirecles
+            let rxS = isCircle && r>=1 ? 1 : rx;
+            let ryS = isCircle && r>=1 ? 1 : rx;
+
+            pathData = [
+                { type: "M", values: [cx + rx, cy] },
+                { type: "A", values: [rxS, ryS, 0, 1, 1, cx - rx, cy] },
+                { type: "A", values: [rxS, ryS, 0, 1, 1, cx + rx, cy] },
+            ];
+
+            break;
+        case 'line':
+            attNames = ['x1', 'y1', 'x2', 'y2'];
+            ({ x1, y1, x2, y2 } = getAtts(attNames));
+            pathData = [
+                { type: "M", values: [x1, y1] },
+                { type: "L", values: [x2, y2] }
+            ];
+            break;
+        case 'polygon':
+        case 'polyline':
+
+            let points = el.getAttribute('points').replaceAll(',', ' ').split(' ').filter(Boolean)
+
+            for (let i = 0; i < points.length; i += 2) {
+                pathData.push({
+                    type: (i === 0 ? "M" : "L"),
+                    values: [+points[i], +points[i + 1]]
+                });
+            }
+            if (type === 'polygon') {
+                pathData.push({
+                    type: "Z",
+                    values: []
+                });
+            }
+            break;
+    }
+
+    return stringify ? stringifyPathData(pathData) : pathData;
+
+};

package/src/svgii/pathData_remove_collinear.js

@@ -1,22 +1,27 @@
-import { checkBezierFlatness, getDistAv, getSquareDistance } from "./geometry.js";
+import { getDistAv, getSquareDistance } from "./geometry.js";
 import { getPolygonArea } from "./geometry_area.js";
+import { checkBezierFlatness, commandIsFlat } from "./geometry_flatness.js";
 import { renderPoint } from "./visualize.js";
 
-export function pathDataRemoveColinear(pathData, tolerance = 1, flatBezierToLinetos = true) {
+export function pathDataRemoveColinear(pathData, {
+    tolerance = 1, 
+    //toleranceCubics = null,
+    flatBezierToLinetos = true
+}={}) {
 
+    //toleranceCubics = !toleranceCubics ? tolerance : toleranceCubics;
     let pathDataN = [pathData[0]];
 
-
-    let lastType = 'L';
     let M = { x: pathData[0].values[0], y: pathData[0].values[1] }
     let p0 = M;
     let p = M
     let isClosed = pathData[pathData.length - 1].type.toLowerCase() === 'z'
 
     for (let c = 1, l = pathData.length; c < l; c++) {
-        let comPrev = pathData[c - 1];
+        //let comPrev = pathData[c - 1];
         let com = pathData[c];
         let comN = pathData[c + 1] || pathData[l - 1];
+        //let p1 = comN.type.toLowerCase() === 'z' ? M : { x: comN.values[comN.values.length - 2], y: comN.values[comN.values.length - 1] }
         let p1 = comN.type.toLowerCase() === 'z' ? M : { x: comN.values[comN.values.length - 2], y: comN.values[comN.values.length - 1] }
 
         let { type, values } = com;
@@ -25,19 +30,18 @@ export function pathDataRemoveColinear(pathData, tolerance = 1, flatBezierToLine
 
         let area = getPolygonArea([p0, p, p1], true)
 
-        let distSquare0 = getSquareDistance(p0, p)
-        let distSquare1 = getSquareDistance(p, p1)
+        //let distSquare0 = getSquareDistance(p0, p)
+        //let distSquare1 = getSquareDistance(p, p1)
         let distSquare = getSquareDistance(p0, p1)
-        //distSquare = (distSquare0+distSquare1) / 2;
+        //distSquare = (distSquare0+distSquare1) * 0.5
 
-        let distMax = distSquare / 200 * tolerance
+        let distMax = distSquare ? distSquare / 333 * tolerance : 0
 
         let isFlat = area < distMax;
         let isFlatBez = false;
 
 
         if (!flatBezierToLinetos && type === 'C') isFlat = false;
-        //let isFlat = flatBezierToLinetos && type === 'C' ? area < distMax : false
 
         // convert flat beziers to linetos
         if (flatBezierToLinetos && (type === 'C' || type === 'Q')) {
@@ -46,40 +50,41 @@ export function pathDataRemoveColinear(pathData, tolerance = 1, flatBezierToLine
             [{ x: values[0], y: values[1] }, { x: values[2], y: values[3] }] :
             (type === 'Q' ? [{ x: values[0], y: values[1] }] : []);
 
+            isFlatBez = commandIsFlat([p0, ...cpts, p],{tolerance});
 
-            //let areaBez = getPolygonArea([p0, ...cpts, p], true)
-
-            isFlatBez = checkBezierFlatness(p0, cpts, p)
-           // console.log();
-
-            //isFlatBez = areaBez < distMax * 0.25
-            //console.log('isFlatBez', isFlatBez);
-            //isFlatBez = false
-
-            //&& comPrev.type !== 'C'
-            if (isFlatBez  && c < l - 1 && comPrev.type !== 'C') {
+            if (isFlatBez  && c < l - 1  ) {
                 type = "L"
                 com.type = "L"
                 com.values = valsL
-
-                //renderPoint(markers, p)
+                //renderPoint(markers, p, 'cyan', '1%', '0.5')
             }
-
         }
 
-        // update end point
-        p0 = p;
 
         // colinear – exclude arcs (as always =) as semicircles won't have an area
         //&& comN.type==='L'
         if ( isFlat && c < l - 1 && (type === 'L' || (flatBezierToLinetos && isFlatBez)) ) {
-            //console.log(area,distMax );
-            //renderPoint(markers, p)
             
+            /*
+            console.log(area, distMax );
             //if(comN.type!=='L' ){}
+
+            if(p0.x === p.x && p0.y === p.y){
+
+            }
+
+            renderPoint(markers, p0, 'blue', '1.5%', '1')
+            renderPoint(markers, p, 'red', '1%', '1')
+            renderPoint(markers, p1, 'cyan', '0.5%', '1')
+            */
+
+
             continue;
         }
 
+        // update end point
+        p0 = p;
+
 
         if (type === 'M') {
             M = p

package/src/svgii/pathData_remove_orphaned.js

@@ -0,0 +1,21 @@
+export function removeOrphanedM(pathData) {
+
+    let pathDataN = []
+    for (let i = 0, l = pathData.length; i < l; i++) {
+        let com = pathData[i];
+        if (!com) continue;
+        let { type = null, values = [] } = com;
+        let comN = pathData[i + 1] ? pathData[i + 1] : null;
+        if ((type === 'M' || type === 'm')) {
+
+            if (!comN || (comN && (comN.type === 'Z' || comN.type === 'z'))) {
+                if(comN) i++
+                continue
+            }
+        }
+        pathDataN.push(com)
+    }
+
+    return pathDataN;
+
+}

package/src/svgii/pathData_remove_zerolength.js

@@ -1,4 +1,5 @@
 
+/*
 // remove zero-length segments introduced by rounding
 export function removeZeroLengthLinetos_post(pathData) {
     let pathDataOpt = []
@@ -13,6 +14,7 @@ export function removeZeroLengthLinetos_post(pathData) {
     })
     return pathDataOpt
 }
+*/
 
 export function removeZeroLengthLinetos(pathData) {
 
@@ -24,16 +26,28 @@ export function removeZeroLengthLinetos(pathData) {
 
     for (let c = 1, l = pathData.length; c < l; c++) {
         let com = pathData[c];
+        let comPrev = pathData[c-1] 
+        let comNext = pathData[c+1] || null
         let { type, values } = com;
 
-        let valsL = values.slice(-2);
-        p = { x: valsL[0], y: valsL[1] };
+        // zero length segments are simetimes used in icons for dots
+        let isDot = comPrev.type.toLowerCase() ==='m' && !comNext;
+
+        let valsLen = values.length;
+        p = { x: values[valsLen-2], y: values[valsLen-1] };
 
         // skip lineto
-        if (type === 'L' && p.x === p0.x && p.y === p0.y) {
+        if (!isDot && type === 'L' && p.x === p0.x && p.y === p0.y) {
             continue
         }
 
+
+        // skip minified zero length
+        if (!isDot && (type === 'l' || type === 'v' || type === 'h')) {
+            let noLength = type === 'l' ? (values.join('') === '00') : values[0] === 0;
+            if(noLength) continue
+        } 
+
         pathDataN.push(com)
         p0 = p;
     }