svg-path-simplify 0.0.8 → 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

@@ -1,22 +1,22 @@
 //import { pathDataToAbsoluteOrRelative, pathDataToLonghands, cubicToArc } from './pathData_convert.js';
 import { parsePathDataString, parsePathDataNormalized, stringifyPathData } from './pathData_parse.js';
 
-export function shapeElToPath(el){
+export function shapeElToPath(el) {
 
     let nodeName = el.nodeName.toLowerCase();
-    if(nodeName==='path')return el;
+    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 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 );
+    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)){
+    attributes.forEach(att => {
+        if (!exclude.includes(att)) {
             let val = el.getAttribute(att);
             pathN.setAttribute(att, val)
         }
@@ -29,7 +29,7 @@ export function shapeElToPath(el){
 
 
 // retrieve pathdata from svg geometry elements
-export function getPathDataFromEl(el, stringify=false) {
+export function getPathDataFromEl(el, stringify = false) {
 
     let pathData = [];
     let type = el.nodeName;
@@ -190,7 +190,9 @@ export function getPathDataFromEl(el, stringify=false) {
             attNames = ['cx', 'cy', 'rx', 'ry', 'r'];
             ({ cx, cy, r, rx, ry } = getAtts(attNames));
 
-            if (type === 'circle') {
+            let isCircle = type === 'circle';
+
+            if (isCircle) {
                 r = r;
                 rx = r
                 ry = r
@@ -199,10 +201,14 @@ export function getPathDataFromEl(el, stringify=false) {
                 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: [rx, ry, 0, 1, 1, cx - rx, cy] },
-                { type: "A", values: [rx, ry, 0, 1, 1, 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;
@@ -234,6 +240,6 @@ export function getPathDataFromEl(el, stringify=false) {
             break;
     }
 
-    return stringify ? stringifyPathData(pathData): pathData;
+    return stringify ? stringifyPathData(pathData) : pathData;
 
 };

package/src/svgii/pathData_remove_collinear.js

@@ -3,21 +3,25 @@ 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;
@@ -26,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')) {
@@ -47,41 +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)
-            //isFlatBez = commandIsFlat([p0, ...cpts, p]).flat
-           // 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

@@ -1,5 +1,6 @@
 export function removeOrphanedM(pathData) {
 
+    let pathDataN = []
     for (let i = 0, l = pathData.length; i < l; i++) {
         let com = pathData[i];
         if (!com) continue;
@@ -8,13 +9,13 @@ export function removeOrphanedM(pathData) {
         if ((type === 'M' || type === 'm')) {
 
             if (!comN || (comN && (comN.type === 'Z' || comN.type === 'z'))) {
-                pathData[i] = null
-                pathData[i + 1] = null
+                if(comN) i++
+                continue
             }
         }
+        pathDataN.push(com)
     }
 
-    pathData = pathData.filter(Boolean);
-    return pathData;
+    return pathDataN;
 
 }

package/src/svgii/pathData_remove_zerolength.js

@@ -26,20 +26,24 @@ 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;
 
+        // zero length segments are simetimes used in icons for dots
+        let isDot = comPrev.type.toLowerCase() ==='m' && !comNext;
+
         let valsLen = values.length;
-        //let valsL = values.slice(-2);
-        //p = { x: valsL[0], y: valsL[1] };
         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 (type === 'l' || type === 'v' || type === 'h') {
+        if (!isDot && (type === 'l' || type === 'v' || type === 'h')) {
             let noLength = type === 'l' ? (values.join('') === '00') : values[0] === 0;
             if(noLength) continue
         } 

package/src/svgii/pathData_reorder.js

@@ -14,6 +14,8 @@ export function pathDataToTopLeft(pathData) {
     let len = pathData.length;
     let isClosed = pathData[len - 1].type.toLowerCase() === 'z'
 
+    //return pathData;
+
     // we can't change starting point for non closed paths
     if (!isClosed) {
         return pathData
@@ -54,6 +56,8 @@ export function optimizeClosePath(pathData, removeFinalLineto = true, reorder =
 
     let linetos = pathData.filter(com => com.type === 'L')
 
+    //return pathData;
+
 
     // check if order is ideal
     let penultimateCom = pathData[len - 2];
@@ -107,7 +111,7 @@ export function optimizeClosePath(pathData, removeFinalLineto = true, reorder =
         }
         // use top most command
         else {
-            indices = indices.sort((a, b) => +a.y.toFixed(1) - +b.y.toFixed(1) || a.x - b.x);
+            indices = indices.sort((a, b) => +a.y.toFixed(8) - +b.y.toFixed(8) || a.x - b.x);
             newIndex = indices[0].index
         }
 
@@ -116,7 +120,7 @@ export function optimizeClosePath(pathData, removeFinalLineto = true, reorder =
     }
 
 
-    M = { x: +pathData[0].values[0].toFixed(8), y: +pathData[0].values[1].toFixed(7) }
+    M = { x: +pathData[0].values[0].toFixed(8), y: +pathData[0].values[1].toFixed(8) }
 
     len = pathData.length