svg-path-simplify 0.0.5 → 0.0.7

package/src/svgii/pathData_remove_zerolength.js

@@ -1,3 +1,19 @@
+
+// remove zero-length segments introduced by rounding
+export function removeZeroLengthLinetos_post(pathData) {
+    let pathDataOpt = []
+    pathData.forEach((com, i) => {
+        let { type, values } = com;
+        if (type === 'l' || type === 'v' || type === 'h') {
+            let hasLength = type === 'l' ? (values.join('') !== '00') : values[0] !== 0
+            if (hasLength) pathDataOpt.push(com)
+        } else {
+            pathDataOpt.push(com)
+        }
+    })
+    return pathDataOpt
+}
+
 export function removeZeroLengthLinetos(pathData) {
 
     let M = { x: pathData[0].values[0], y: pathData[0].values[1] }

package/src/svgii/pathData_split.js

@@ -280,6 +280,8 @@ export function addExtemesToCommand(p0, values, tMin=0, tMax=1) {
 
         if(tArr.length){
             let commandsSplit = splitCommandAtTValues(p0, values, tArr)
+            //console.log('commandsSplit', commandsSplit);
+
             pathDataNew.push(...commandsSplit)
             extremeCount += commandsSplit.length;
         }else{
@@ -322,6 +324,8 @@ export function addExtremePoints(pathData, tMin=0, tMax=1) {
             // add extremes
             if (type === 'C' || type === 'Q') {
                 let comExt = addExtemesToCommand(p0, values, tMin, tMax).pathData;
+                let comExt2 = com;
+                //comExt2.valu
                 //console.log('comExt', comExt);
                 pathDataNew.push(...comExt )
             }

package/src/svgii/pathData_toPolygon.js

@@ -1,12 +1,15 @@
-import { pointAtT } from "./geometry";
+import { getDistAv, pointAtT } from "./geometry";
 import { getPolyBBox } from "./geometry_bbox";
 import { addDimensionData, analyzePathData } from "./pathData_analyze";
 import { addExtremePoints } from "./pathData_split";
+import { pathDataToD } from "./pathData_stringify";
+import { analyzePoly } from "./poly_analyze";
+import { getCurvePathData } from "./poly_to_pathdata";
+import { renderPoint } from "./visualize";
 
-export function pathDataToPolyPlus(pathDataArr = [], addExtremes=true) {
 
-    // check if splitting sub paths is required
-    pathDataArr = Object.hasOwnProperty(pathDataArr[0].type) ? splitSubpaths(pathDataArr) : pathDataArr;
+export function pathDataToPolySingle(pathData, addExtremes = true) {
+
 
     let dimMin = Infinity;
     let dimMax = 0;
@@ -16,77 +19,125 @@ export function pathDataToPolyPlus(pathDataArr = [], addExtremes=true) {
      * add extremes to beziers
      * to reproduce the shape better
      */
-    if(addExtremes){
-        pathDataArr.forEach((pathData, i) => {
-    
-            //pathDataArr[i] = addExtremePoints(pathData)
-            let pathDataE = addExtremePoints(pathData)
-            
-            //pathDataArr[i] = analyzePathData(pathDataE).pathData
-            pathDataArr[i] = addDimensionData(pathDataE)
-    
-        })
+    if (addExtremes) {
+        pathData = addExtremePoints(pathData, 0.1, 0.9)
     }
 
+    //console.log(pathData);
+
+    let pathDataPlus = analyzePathData(pathData);
+    let { bb } = pathDataPlus;
+    let thresh = (bb.width + bb.height) / 2 / 50
+
+    pathData = pathDataPlus.pathData
+
 
     /**
      * approximate min and max segment sizes
      * for segment splitting
      */
-    pathDataArr.forEach(pathData => {
-
-        let dimArr = pathData.filter(com => com.dimA).sort((a, b) => a.dimA - b.DimA)
-        let dimMinL = dimArr[0].dimA
-        let dimMaxL = dimArr[dimArr.length - 1].dimA
-        //console.log('dimArr', dimArr, dimMaxL);
-        if (dimMinL && dimMinL < dimMin) dimMin = dimMinL;
-        if (dimMaxL && dimMaxL > dimMax) dimMax = dimMaxL;
-
-    })
+    let dimArr = pathData.filter(com => com.dimA).sort((a, b) => a.dimA - b.DimA)
+    let dimMinL = dimArr[0].dimA
+    let dimMaxL = dimArr[dimArr.length - 1].dimA
+    //console.log('dimArr', dimArr, dimMaxL);
+    if (dimMinL && dimMinL < dimMin) dimMin = dimMinL;
+    if (dimMaxL && dimMaxL > dimMax) dimMax = dimMaxL;
 
     //console.log(dimMin, dimMax);
 
     // find split point based on smallest point distance
-    dimMin = (dimMin * 2 + dimMax) / 2 * 0.5
+    dimMin = (dimMin * 2 + dimMax) / 2 / 4
+    //dimMin = (bb.width + bb.height) / 2 / 8
 
     // collect vertices
     let polyArr = [];
 
+    let p0 = { x: pathData[0].p0.x, y: pathData[0].p0.y, extreme: pathData[0].extreme, corner: pathData[0].corner }
+    let poly = [p0];
+
+    for (let i = 1, l = pathData.length; i < l; i++) {
 
-    pathDataArr.forEach(pathData => {
+        let com = pathData[i];
+        let { type, values, extreme = false, corner = false, dimA = null, p0, p, cp1 = null, cp2 = null } = com;
 
-        let poly = [pathData[0].p0];
+        dimA = getDistAv(p0, p);
 
-        pathData.forEach(com => {
 
-            let { type, values, dimA = null, p0, p, cp1 = null, cp2 = null } = com;
-            let split = type === 'C' && dimA ? Math.ceil(dimA / dimMin) : 0;
+        if(extreme){
+            //renderPoint(markers, p, 'cyan')
+        }
 
-            if (type === 'C' && split) {
+        let split = (type === 'C' || type === 'Q') && dimA ? Math.ceil(dimA / dimMin) : 0;
 
-                let splitT = 1 / split;
 
-                for (let i = 1; i < split; i++) {
+        //console.log(com);
+        p.extreme = extreme
+        p.corner = corner
 
-                    let t = splitT * i;
-                    let ptI = pointAtT([p0, cp1, cp2, p], t)
-                    poly.push(ptI)
-                }
+        //console.log(p);
 
+        if ((type === 'C' || type === 'Q') && split) {
+            let splitT = 1 / split;
+            for (let i = 1; i < split; i++) {
+                let t = splitT * i;
+                let cpts = type === 'C' ? [cp1, cp2] : [cp1];
+                let ptI = pointAtT([p0, ...cpts, p], t)
+                poly.push(ptI)
             }
-            poly.push(p)
-        })
+        }
+        poly.push(p)
+
+    }
+
+
+    // remove short
+    let remove = new Set([])
+    for (let i = 1, l = poly.length; i < l; i++) {
+        let p = poly[i - 1]
+        let pN = poly[i]
+
+        let dist1 = getDistAv(p, pN)
+        if (dist1 < thresh && pN.extreme) {
+            let pR = p.extreme ? pN : p
+            let idx = p.extreme ? i : i - 1
+            //console.log('remove', idx);
+            remove.add(idx)
+        } 
+    }
+
 
-        polyArr.push(poly)
+    remove = Array.from(remove).reverse();
+    //console.log(remove);
 
-        /*
-        let bb = getPolyBBox(poly);
-        let dimAv = (bb.width+bb.height)/2
-        console.log('dimAv', dimAv);
-        */
+    for (let i = 0; i < remove.length; i++) {
+        let idx = remove[i];
+        //console.log('idx', idx);
+        poly.splice(idx, 1)
+    }
+
+    poly.splice(poly.length-1, poly.length)
+
+
+    let polyAtt = poly.map(pt => `${pt.x} ${pt.y} `).join(' ')
+    //console.log('polyAtt', polyAtt);
+
+    //markers.insertAdjacentHTML('beforeend', `<polygon points="${polyAtt}" stroke="red" fill="none"/>`)
+
+
+    poly = analyzePoly(poly, false)
+    let pathDataP = getCurvePathData(poly, 0.666, true)
+    let d = pathDataToD(pathDataP)
 
-    })
+    console.log(d);
+    //markers.insertAdjacentHTML('beforeend', `<path d="${d}" stroke="green" fill="none" stroke-width="1%"/>`)
 
-    return polyArr
+
+
+
+
+    return poly
 
 }
+
+
+

package/src/svgii/poly_analyze.js

@@ -3,7 +3,7 @@ import { getPolygonArea } from "./geometry_area";
 import { getPolyBBox } from "./geometry_bbox";
 import { renderPoint } from "./visualize";
 
-export function analyzePoly(pts) {
+export function analyzePoly(pts, debug=false) {
 
     let l = pts.length;
     let polyArea = getPolygonArea(pts, true)
@@ -75,22 +75,26 @@ export function analyzePoly(pts) {
         /*
         */
 
-        if ((isExtreme && isCorner)) {
-            isExtreme = false;
-            directionChange = false;
-            //isCorner = false;
-        }
-
-        if (isExtreme) {
-            renderPoint(markers, pt1, 'cyan', '1%');
-        }
-
-        if (isCorner) {
-            renderPoint(markers, pt1, 'purple', '0.5%');
-        }
+        if(debug){
+
+            if ((isExtreme && isCorner)) {
+                isExtreme = false;
+                directionChange = false;
+                //isCorner = false;
+            }
+    
+            if (isExtreme) {
+                renderPoint(markers, pt1, 'cyan', '1%');
+            }
+    
+            if (isCorner) {
+                renderPoint(markers, pt1, 'purple', '0.5%');
+            }
+    
+            if (directionChange) {
+                renderPoint(markers, pt1, 'orange', '1.5%', '0.5');
+            }
 
-        if (directionChange) {
-            renderPoint(markers, pt1, 'orange', '1.5%', '0.5');
         }
 
 

package/src/svgii/svg_cleanup.js

@@ -1,3 +1,12 @@
+export function removeEmptySVGEls(svg) {
+  let els = svg.querySelectorAll('g, defs');
+  els.forEach(el => {
+      if (!el.children.length) el.remove()
+  })
+}
+
+
+
 export function cleanUpSVG(svgMarkup, {
   returnDom=false, 
   removeHidden=true,
@@ -74,7 +83,7 @@ function removeNameSpaceAtts(el) {
   });
 }
 
-function stringifySVG(svg){
+export function stringifySVG(svg){
     let markup = new XMLSerializer().serializeToString(svg);
   markup = markup
   .replace(/\t/g, "")

package/test.js

@@ -0,0 +1,14 @@
+import { svgPathSimplify  } from 'svg-path-simplify';
+
+let pathDataString =
+`
+M 57.13 15.5
+c 13.28 0 24.53 8.67 28.42 20.65
+c 0.94 2.91 1.45 6.01 1.45 9.23
+`
+
+// try to simplify
+let pathDataOpt = svgPathSimplify(pathDataString);
+
+// simplified pathData
+console.log(pathDataOpt)