svg-path-simplify 0.0.8 → 0.0.9

package/src/svgii/pathData_simplify_refineCorners.js

@@ -0,0 +1,160 @@
+import { checkLineIntersection, getDistAv, interpolate, pointAtT } from "./geometry";
+import { getPolygonArea } from "./geometry_area";
+import { commandIsFlat } from "./geometry_flatness";
+import { renderPoint } from "./visualize";
+
+export function refineRoundedCorners(pathData, {
+    threshold = 0,
+    tolerance = 1
+} = {}) {
+
+    let l = pathData.length;
+
+    // add fist command
+    let pathDataN = [pathData[0]]
+
+    let isClosed = pathData[l - 1].type.toLowerCase() === 'z';
+    let lastOff = isClosed ? 2 : 1;
+
+    let comLast = pathData[l - lastOff];
+    let lastIsLine = comLast.type === 'L'
+    let lastIsBez = comLast.type === 'C'
+    let firstIsLine = pathData[1].type === 'L';
+    let firstIsBez = pathData[1].type === 'C';
+
+    //console.log('lastIsLine', lastIsLine, 'firstIsLine', firstIsLine, 'lastIsBez', lastIsBez, 'firstIsBez', firstIsBez, 'isClosed', isClosed, 'comLast1', comLast1);
+
+    let normalizeClose = isClosed && firstIsBez;
+    //console.log('normalizeClose', normalizeClose);
+
+    // normalize closepath to lineto
+    if (normalizeClose) {
+        pathData[l - 1].values = pathData[0].values
+        pathData[l - 1].type = 'L'
+        lastIsLine = true
+    }
+
+    for (let i = 1; i < l; i++) {
+        let com = pathData[i];
+        let { type } = com;
+        let comN = pathData[i + 1] ? pathData[i + 1] : null;
+
+        // search small cubic segments enclosed by linetos
+        if ((type === 'L' && comN && comN.type === 'C') ||
+            (type === 'C' && comN && comN.type === 'L')
+
+        ) {
+            let comL0 = com;
+            let comL1 = null;
+            let comBez = [];
+            let offset = 0;
+
+            // start to end
+            if (i === 1 && firstIsBez && lastIsLine) {
+                comBez = [pathData[1]]
+                comL0 = pathData[l - 1]
+                comL1 = comN
+                //renderPoint(markers, com.p, 'orange')
+            }
+
+            // closing corner to start
+            if (isClosed && lastIsBez && firstIsLine && i === l - lastOff - 1) {
+                comL1 = pathData[1]
+                comBez = [pathData[l - lastOff]]
+                //renderPoint(markers, com.p)
+            }
+
+            for (let j = i + 1; j < l; j++) {
+                let comN = pathData[j] ? pathData[j] : null;
+                let comPrev = pathData[j - 1];
+
+                if (comPrev.type === 'C') {
+                    comBez.push(comPrev)
+                }
+
+                if (comN.type === 'L' && comPrev.type === 'C') {
+                    comL1 = comN
+                    break;
+                }
+                offset++
+            }
+
+            if (comL1) {
+
+                // linetos
+                let len1 = getDistAv(comL0.p0, comL0.p)
+                let len2 = getDistAv(comL1.p0, comL1.p)
+
+                // bezier
+                //comBez = comBez[0];
+                let comBezLen = comBez.length;
+                let len3 = getDistAv(comBez[0].p0, comBez[comBezLen - 1].p)
+
+                // check concaveness by area sign change
+                let area1 = getPolygonArea([comL0.p0, comL0.p, comL1.p0, comL1.p], false)
+                let area2 = getPolygonArea([comBez[0].p0, comBez[0].cp1, comBez[0].cp2, comBez[0].p], false)
+
+                let signChange = (area1 < 0 && area2 > 0) || (area1 > 0 && area2 < 0)
+
+                if (comBez && !signChange && len3 < threshold && len1 > len3 && len2 > len3) {
+
+                    let ptQ = checkLineIntersection(comL0.p0, comL0.p, comL1.p0, comL1.p, false)
+                    if (ptQ) {
+
+                        /*
+                        let dist1 = getDistAv(ptQ, comL0.p)
+                        let dist2 = getDistAv(ptQ, comL1.p0)
+                        let diff = Math.abs(dist1-dist2)
+                        let rat =  diff/Math.max(dist1, dist2)
+                        console.log('rat', rat);
+                        */
+
+                        /*
+                        // adjust curve start and end to meet original
+                        let t = 1
+
+                        let p0_2 = pointAtT([ptQ, comL0.p], t)
+                        //renderPoint(markers, p0_2, 'cyan', '1%', '0.5')
+                        comL0.p = p0_2
+                        comL0.values = [p0_2.x, p0_2.y]
+
+                        let p_2 = pointAtT([ptQ, comL1.p0], t)
+                        //renderPoint(markers, p_2, 'orange', '1%', '0.5')
+                        comL1.p0 = p_2
+
+                        //renderPoint(markers, comL0.p, 'red', '1%', '0.5')
+                        //renderPoint(markers, ptQ, 'magenta')
+                        */
+
+
+                        let comQ = { type: 'Q', values: [ptQ.x, ptQ.y, comL1.p0.x, comL1.p0.y] }
+                        comQ.p0 = comL0.p;
+                        comQ.cp1 = ptQ;
+                        comQ.p = comL1.p0;
+
+                        // add quadratic command
+                        pathDataN.push(comL0, comQ);
+                        i += offset;
+                        continue;
+                    }
+                }
+            }
+        }
+
+        // skip last lineto
+        if (normalizeClose && i === l - 1 && type === 'L') {
+            continue
+        }
+
+        pathDataN.push(com)
+
+    }
+
+    // revert close path normalization
+    if (normalizeClose) {
+        pathDataN.push({ type: 'Z', values: [] })
+    }
+
+    return pathDataN;
+
+}

package/src/svgii/{simplify_refineExtremes.js → pathData_simplify_refineExtremes.js}

@@ -1,8 +1,11 @@
+import { findSplitT, getExtrapolatedCommand } from "../pathData_simplify_cubic";
 import { getCombinedByDominant } from "../pathData_simplify_cubic_extrapolate";
 import { getDistAv, interpolate } from "./geometry";
-import { getPathArea } from "./geometry_area";
+import { getPathArea, getPolygonArea } from "./geometry_area";
 import { getPathDataBBox } from "./geometry_bbox";
-import { renderPoint } from "./visualize";
+import { interpolatedPathData } from "./pathData_interpolate";
+import { pathDataToD } from "./pathData_stringify";
+import { renderPath, renderPoint } from "./visualize";
 
 export function refineAdjacentExtremes(pathData, {
     threshold = null, tolerance = 1
@@ -15,24 +18,65 @@ export function refineAdjacentExtremes(pathData, {
         //console.log('new threshold', threshold);
     }
 
+    //let bb = getPathDataBBox(pathData);
+    //threshold = (bb.width + bb.height) / 2 * 0.1
+
+
     let l = pathData.length
 
     for (let i = 0; i < l; i++) {
         let com = pathData[i];
-        let { type, values, extreme, corner=false, dimA, p0, p } = com;
+        let { type, values, extreme, corner = false, dimA, p0, p } = com;
         let comN = pathData[i + 1] ? pathData[i + 1] : null;
+        let comN2 = pathData[i + 2] ? pathData[i + 2] : null;
+
+
+        // check dist
+        let diff = comN ? getDistAv(p, comN.p) : Infinity;
+        let isCose = diff < threshold;
+
+        let diff2 = comN2 ? getDistAv(comN2.p, comN.p) : Infinity
+        let isCose2 = diff2 < threshold;
 
 
-        // adjacent 
-        //&& comN.extreme
-        if (comN && type === 'C' && comN.type === 'C' && extreme && !corner) {
+        // next is extreme
+        if (comN && type === 'C' && comN.type === 'C' && extreme && comN2 && comN2.extreme) {
 
-            // check dist
-            let diff = getDistAv(p, comN.p)
-            let isCose = diff < threshold;
 
+            if (isCose2 || isCose) {
+
+                // extrapolate
+                let comEx = getCombinedByDominant(comN, comN2, threshold, tolerance, false)
+                //console.log('comEx', comEx);
+                //renderPoint(markers, comN.p)
+
+                if (comEx.length === 1) {
+
+                    pathData[i + 1] = null;
+                    comEx = comEx[0]
+
+                    pathData[i + 2].values = [comEx.cp1.x, comEx.cp1.y, comEx.cp2.x, comEx.cp2.y, comEx.p.x, comEx.p.y]
+                    pathData[i + 2].cp1 = comEx.cp1
+                    pathData[i + 2].cp2 = comEx.cp2
+                    pathData[i + 2].p0 = comEx.p0
+                    pathData[i + 2].p = comEx.p
+                    pathData[i + 2].extreme = comEx.extreme
+
+                    i++
+                    continue
+                }
+            }
+
+        }
+
+
+        // short after extreme
+
+        if (comN && type === 'C' && comN.type === 'C' && extreme ) {
 
             if (isCose) {
+
+                //renderPoint(markers, com.p, 'cyan', '1%', '0.5')
                 //renderPoint(markers, comN.p, 'cyan', '1%', '0.5')
                 //console.log(comN);
                 //console.log(diff, threshold);
@@ -46,12 +90,25 @@ export function refineAdjacentExtremes(pathData, {
                 let ptI;
                 let t = 1;
 
+                let area0 = getPolygonArea([com.p0, com.p , comN.p])
+                // cpts area
+                let area1 = getPolygonArea([com.p0, com.cp1, com.cp2, com.p])
+
+                // sign change: is corner => skip
+                if ( (area0<0 && area1>0)  || (area0>0 && area1<0)) {
+                    //renderPoint(markers, com.p, 'orange', '1%', '0.5')
+                    continue;
+                }
+
+                
                 if (comN.extreme) {
 
                     // extend cp2
                     if (horizontal) {
                         t = Math.abs(Math.abs(comN.cp2.x - comN.p.x) / Math.abs(com.cp2.x - com.p.x))
+                        t = Math.min(1, t)
                         //console.log('t', t);
+
                         ptI = interpolate(comN.p, com.cp2, 1 + t)
                         com.cp2.x = ptI.x
                         //renderPoint(markers, com.cp2, 'cyan', '1%', '0.5')
@@ -60,6 +117,9 @@ export function refineAdjacentExtremes(pathData, {
                     else {
                         //renderPoint(markers, comN.p0, 'cyan', '1%', '0.5')
                         t = Math.abs(Math.abs(comN.cp2.y - comN.p.y) / Math.abs(com.cp2.y - com.p.y))
+                        t = Math.min(1, t)
+                        //console.log('t v', t);
+
                         ptI = interpolate(comN.p, com.cp2, 1 + t)
                         com.cp2.y = ptI.y
                     }
@@ -78,38 +138,13 @@ export function refineAdjacentExtremes(pathData, {
 
                 }
 
-                // extend fist command
-                else {
-
-                    let comN2 = pathData[i + 2] ? pathData[i + 2] : null;
-                    if (!comN2 && comN2.type !== 'C') continue
-
-                    //continue
-
-                    // extrapolate
-                    let comEx = getCombinedByDominant(comN, comN2, threshold, tolerance, false)
-                    //console.log('comEx', comEx);
-
-                    if (comEx.length === 1) {
-                        pathData[i + 1] = null;
+            }
+        }
 
-                        comEx = comEx[0]
+        /*
+        */
 
-                        pathData[i + 2].values = [comEx.cp1.x, comEx.cp1.y, comEx.cp2.x, comEx.cp2.y, comEx.p.x, comEx.p.y]
-                        pathData[i + 2].cp1 = comEx.cp1
-                        pathData[i + 2].cp2 = comEx.cp2
-                        pathData[i + 2].p0 = comEx.p0
-                        pathData[i + 2].p = comEx.p
-                        pathData[i + 2].extreme = comEx.extreme
 
-                        i++
-                        continue
-                    }
-
-                }
-
-            }
-        }
     }
 
     // remove commands
@@ -146,15 +181,15 @@ export function refineAdjacentExtremes(pathData, {
 
     if (penultimateCom && penultimateCom.type === 'C' && isCose && isClosingTo && fistExt) {
 
-        let dx1 = Math.abs(fistExt.cp1.x - M.x)
-        let dy1 = Math.abs(fistExt.cp1.y - M.y)
+        //let dx1 = Math.abs(fistExt.cp1.x - M.x)
+        //let dy1 = Math.abs(fistExt.cp1.y - M.y)
 
-        let horizontal = dy1 < dx1;
+        //let horizontal = dy1 < dx1;
         //console.log(dx1, dx2);
         //console.log('isCose', isCose, diff, dimA);
 
         let comEx = getCombinedByDominant(penultimateCom, lastCom, threshold, tolerance, false)
-        console.log('comEx', comEx);
+        //console.log('comEx', comEx);
 
         if (comEx.length === 1) {
             pathData[lastIdx - 1] = comEx[0];
@@ -162,7 +197,7 @@ export function refineAdjacentExtremes(pathData, {
             pathData = pathData.filter(Boolean)
         }
 
-
+        //console.log(pathData);
     }
 
 

package/src/svgii/pathData_split.js

@@ -125,31 +125,58 @@ export function getPathDataPlusChunks(pathDataPlus = [], debug = false) {
  * split compound paths into 
  * sub path data array
  */
-export function splitSubpaths(pathData) {
 
+export function splitSubpaths(pathData) {
     let subPathArr = [];
+    let current = [pathData[0]];
+    let l = pathData.length;
+
+    for (let i = 1; i < l; i++) {
+        let com = pathData[i];
+
+        if (com.type === 'M' || com.type === 'm') {
+            subPathArr.push(current);
+            current = [];
+        }
+        current.push(com);
+    }
+
+    if (current.length) subPathArr.push(current);
+
+    //console.log(subPathArr);
+    return subPathArr;
+}
+
+
+
+export function splitSubpaths0(pathData) {
+
+    let indices = [0];
+    let l = pathData.length;
+    //let com
+    //console.log(pathData);
 
-    //split segments after M command
-    
-    try{
-        let subPathIndices = pathData.map((com, i) => (com.type.toLowerCase() === 'm' ? i : -1)).filter(i => i !== -1);
+    if(!l) return [];
 
-    }catch{
-        console.log('catch', pathData);
+    //find split segments indices introduced by M commands 
+    for(let i=1; i<l; i++){
+        let type= pathData[i].type.toLowerCase(); 
+        if(type==='m') indices.push(i)
     }
+    //console.log(indices);
 
+    // only one sub path
+    let len = indices.length;
+    if(len===1) return [pathData];
 
-    let subPathIndices = pathData.map((com, i) => (com.type.toLowerCase() === 'm' ? i : -1)).filter(i => i !== -1);
-    //let subPathIndices = pathData.map((com, i) => (com.type === 'M' ? i : -1)).filter(i => i !== -1);
+    let subPathArr = new Array(len);
 
-    // no compound path
-    if (subPathIndices.length === 1) {
-        return [pathData]
+    for(let i=0; i<len; i++){
+        let idx = indices[i]
+        subPathArr[i] = pathData.slice(idx, indices[i + 1]);
     }
-    subPathIndices.forEach((index, i) => {
-        subPathArr.push(pathData.slice(index, subPathIndices[i + 1]));
-    });
 
+    //console.log(subPathArr);
     return subPathArr;
 }
 

package/src/svgii/pathData_stringify.js

@@ -9,17 +9,10 @@ export function pathDataToD(pathData, optimize = 0) {
     optimize = parseFloat(optimize)
 
 
-
     let len = pathData.length;
     let beautify = optimize > 1;
     let minify = beautify || optimize ? false : true;
 
-    // Convert first "M" to "m" if followed by "l" (when minified)
-    /*
-    if (pathData[1].type === "l" && minify) {
-        pathData[0].type = "m";
-    }
-    */
 
     let d = '';
     let separator_command = beautify ? `\n` : (minify ? '' : ' ');
@@ -43,13 +36,11 @@ export function pathDataToD(pathData, optimize = 0) {
         }
 
         // Omit type for repeated commands
-        type = (com0.type === com.type && com.type.toLowerCase() !== 'm' && minify)
+        type = (minify && com0.type === com.type && com.type.toLowerCase() !== 'm' )
             ? " "
-            : (
-                (com0.type === "M" && com.type === "L")
-            ) && minify
+            : (minify && com0.type === "M" && com.type === "L"
                 ? " "
-                : com.type;
+                : com.type);
 
 
         // concatenate subsequent floating point values

package/src/svgii/rounding.js

@@ -21,7 +21,8 @@ export function detectAccuracy(pathData) {
 
     //console.log('detectAccuracy');
 
-    let dims = new Set();
+    //let dims = new Set();
+    let dims = [];
 
     // add average distances
     for (let i = 0, len = pathData.length; i < len; i++) {
@@ -36,7 +37,7 @@ export function detectAccuracy(pathData) {
         //let dimA = +getDistAv(p0, p).toFixed(8)
         //console.log('dimA', dimA, com.dimA, type);
 
-        if (dimA) dims.add(dimA);
+        if (dimA) dims.push(dimA);
 
         if (dimA && dimA < minDim) minDim = dimA;
         if (dimA && dimA > maxDim) maxDim = dimA;
@@ -49,7 +50,7 @@ export function detectAccuracy(pathData) {
     }
 
 
-    let dim_min = Array.from(dims).sort()
+    let dim_min = dims.sort()
 
     /*
     let minVal = dim_min.length > 15 ?
@@ -147,22 +148,23 @@ export function detectAccuracy_back(pathData) {
  * based on suggested accuracy in path data
  */
 export function roundPathData(pathData, decimals = -1) {
-    // has recommended decimals
-    let hasDecimal = decimals == 'auto' && pathData[0].hasOwnProperty('decimals') ? true : false;
-    //console.log('decimals', decimals, hasDecimal);
 
-    for (let c = 0, len = pathData.length; c < len; c++) {
-        let com = pathData[c];
-        let { type, values } = com
+    let len = pathData.length;
 
-        if (decimals > -1 || hasDecimal) {
-            decimals = hasDecimal ? com.decimals : decimals;
+    for (let c = 0; c < len; c++) {
+        //let com = pathData[c];
+        let values = pathData[c].values
+        let valLen = values.length;
 
+        if (valLen && (decimals > -1) ) {
 
-            //console.log('decimals', type, decimals);
-            pathData[c].values = com.values.map(val => { return val ? +val.toFixed(decimals) : val });
-
+            for(let v=0; v<valLen; v++){
+                //pathData[c].values[v] = values[v] ? +values[v].toFixed(decimals) : values[v];
+                pathData[c].values[v] =  +values[v].toFixed(decimals);
+            }
         }
     };
+
+    //console.log(pathData);
     return pathData;
 }

package/src/svgii/svg_cleanup.js

@@ -25,7 +25,7 @@ export function cleanUpSVG(svgMarkup, {
     .querySelector("svg");
   
   
-  let allowed=['viewBox', 'xmlns', 'width', 'height', 'id', 'class', 'fill', 'stroke', 'stroke-width'];
+  let allowed=['viewBox', 'xmlns', 'width', 'height', 'id', 'class', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin'];
   removeExcludedAttribues(svg, allowed)
   
   let removeEls = ['metadata', 'script']

package/src/pathData_simplify_cubic_arr.js

@@ -1,50 +0,0 @@
-import { getDistance, getSquareDistance, checkLineIntersection, pointAtT, getDistAv } from "./svgii/geometry";
-import { getBezierArea, getPolygonArea } from "./svgii/geometry_area";
-import { renderPoint } from "./svgii/visualize";
-
-export function combineCubicArray(commands = [], threshold = 0.05) {
-
-
-    let [comF, comM, comE] = commands;
-
-    commands.forEach(com => {
-        let area = getBezierArea([com.p0, com.cp1, com.cp2, com.p], true)
-        com.area = area
-    })
-
-    // sort by area
-    let commandsFiltered = JSON.parse(JSON.stringify(commands)).sort((a,b)=>b.area-a.area )
-
-    let comL = commandsFiltered[0]
-
-    // find largest segment
-    //let area2 = getBezierArea(comF)
-
-    console.log('area1', commands, commandsFiltered);
-
-    // largest segment
-    comM = commandsFiltered[0]
-
-
-    //let segLargest = 
-    let pt_mid = pointAtT([comM.p0, comM.cp1, comM.cp2, comM.p], 0.5, false, true)
-
-    let seg1_cp2 = pt_mid.cpts[2]
-    let seg2_cp1 = pt_mid.cpts[3]
-    renderPoint(markers, seg1_cp2, 'orange')
-    renderPoint(markers, seg2_cp1, 'cyan')
-
-
-    console.log('comM', pt_mid);
-
-    renderPoint(markers, comF.p0, 'green')
-    renderPoint(markers, comL.p, 'purple')
-    //renderPoint(markers, comE.cp2, 'orange')
-
-    renderPoint(markers, pt_mid, 'magenta')
-    //let ptI_1 = checkLineIntersection(comF)
-
-
-    return commands;
-}
-