svg-path-simplify 0.0.7 → 0.0.9

package/src/svgii/pathData_reorder.js

@@ -1,10 +1,12 @@
 import { splitSubpaths, addExtemesToCommand } from './pathData_split.js';
-import { getComThresh, commandIsFlat, getPathDataVertices, getSquareDistance } from './geometry.js';
+import { getComThresh, getPathDataVertices, getSquareDistance } from './geometry.js';
 import { getPolyBBox } from './geometry_bbox.js';
 
 
 import { renderPoint, renderPath } from './visualize.js';
 import { getPolygonArea } from './geometry_area.js';
+import { checkBezierFlatness, commandIsFlat } from "./geometry_flatness.js";
+
 
 
 export function pathDataToTopLeft(pathData) {
@@ -12,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
@@ -52,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];
@@ -105,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
         }
 
@@ -114,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
 

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/pathData_simplify_refineExtremes.js

@@ -0,0 +1,208 @@
+import { findSplitT, getExtrapolatedCommand } from "../pathData_simplify_cubic";
+import { getCombinedByDominant } from "../pathData_simplify_cubic_extrapolate";
+import { getDistAv, interpolate } from "./geometry";
+import { getPathArea, getPolygonArea } from "./geometry_area";
+import { getPathDataBBox } from "./geometry_bbox";
+import { interpolatedPathData } from "./pathData_interpolate";
+import { pathDataToD } from "./pathData_stringify";
+import { renderPath, renderPoint } from "./visualize";
+
+export function refineAdjacentExtremes(pathData, {
+    threshold = null, tolerance = 1
+} = {}) {
+
+    //dimA = dimA ? dimA : 
+    if (!threshold) {
+        let bb = getPathDataBBox(pathData);
+        threshold = (bb.width + bb.height) / 2 * 0.05
+        //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 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;
+
+
+        // next is extreme
+        if (comN && type === 'C' && comN.type === 'C' && extreme && comN2 && comN2.extreme) {
+
+
+            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);
+
+                let dx1 = (com.cp1.x - comN.p0.x)
+                let dy1 = (com.cp1.y - comN.p0.y)
+
+                let horizontal = Math.abs(dy1) < Math.abs(dx1);
+
+                let pN = comN.p;
+                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')
+                        //renderPoint(markers, ptI, 'orange', '1%', '0.5')
+                    }
+                    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
+                    }
+
+                    //merge commands
+                    pathData[i + 1].values = [com.cp1.x, com.cp1.y, com.cp2.x, com.cp2.y, pN.x, pN.y]
+                    pathData[i + 1].cp1 = com.cp1
+                    pathData[i + 1].cp2 = com.cp2
+                    pathData[i + 1].p0 = com.p0
+                    pathData[i + 1].p = pN
+                    pathData[i + 1].extreme = true
+
+                    // nullify 1st
+                    pathData[i] = null;
+                    continue
+
+                }
+
+            }
+        }
+
+        /*
+        */
+
+
+    }
+
+    // remove commands
+    pathData = pathData.filter(Boolean)
+    l = pathData.length
+
+
+
+    /**
+     * refine closing commands
+     */
+
+    let closed = pathData[l - 1].type.toLowerCase() === 'z';
+    let lastIdx = closed ? l - 2 : l - 1;
+    let lastCom = pathData[lastIdx];
+    let penultimateCom = pathData[lastIdx - 1] || null;
+    let M = { x: pathData[0].values[0], y: pathData[0].values[1] }
+
+    let dec = 8
+    let lastVals = lastCom.values.slice(-2);
+    let isClosingTo = +lastVals[0].toFixed(dec) === +M.x.toFixed(dec) && +lastVals[1].toFixed(dec) === +M.y.toFixed(dec)
+    let fistExt = pathData[1].type === 'C' && pathData[1].extreme ? pathData[1] : null;
+
+
+    //renderPoint(markers, M, 'blue')
+    //renderPoint(markers, fistExt.cp1, 'blue')
+    //renderPoint(markers, fistExt.p0, 'blue')
+
+
+
+    let diff = getDistAv(lastCom.p0, lastCom.p)
+    let isCose = diff < threshold;
+
+
+    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 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);
+
+        if (comEx.length === 1) {
+            pathData[lastIdx - 1] = comEx[0];
+            pathData[lastIdx] = null;
+            pathData = pathData.filter(Boolean)
+        }
+
+        //console.log(pathData);
+    }
+
+
+    //console.log('pathData ex', pathData);
+
+    return pathData
+
+}

package/src/svgii/pathData_split.js

@@ -2,6 +2,7 @@ import { pointAtT, svgArcToCenterParam, getBezierExtremeT  } from "./geometry";
 import { renderPoint, renderPath } from "./visualize";
 
 
+
 /**
  * split segments into chunks to
  * prevent simplification across 
@@ -124,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

@@ -11,7 +11,7 @@ export function detectAccuracy(pathData) {
 
     // Reference first MoveTo command (M)
     let M = { x: pathData[0].values[0], y: pathData[0].values[1] };
-    let p0 =  M
+    let p0 = M
     let p = M
     pathData[0].decimals = 0
     let lastDec = 0;
@@ -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++) {
@@ -29,34 +30,40 @@ export function detectAccuracy(pathData) {
         let { type, values } = com;
 
         let lastVals = values.length ? values.slice(-2) : [M.x, M.y];
-        p={x:lastVals[0], y:lastVals[1]}
+        p = { x: lastVals[0], y: lastVals[1] }
 
         // use existing averave dimension value or calculate
-        let dimA = com.dimA ? +com.dimA.toFixed(8) : type!=='M' ? +getDistAv(p0, p).toFixed(8) : 0
+        let dimA = com.dimA ? +com.dimA.toFixed(8) : type !== 'M' ? +getDistAv(p0, p).toFixed(8) : 0
         //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;
 
-        if(dimA && dimA<minDim) minDim = dimA;
-        if(dimA && dimA>maxDim) maxDim = dimA;
-        
 
-        if(type==='M'){
-            M=p;
+        if (type === 'M') {
+            M = p;
         }
         p0 = p;
     }
 
 
-    let dim_min = Array.from(dims).sort()
-    let sliceIdx = Math.ceil(dim_min.length/8);
-    dim_min = dim_min.slice(0, sliceIdx );
+    let dim_min = dims.sort()
 
-    let dimVal = dim_min.reduce((a,b)=>a+b, 0) / sliceIdx;
+    /*
+    let minVal = dim_min.length > 15 ?
+        (dim_min[0] + dim_min[2]) / 2 :
+        dim_min[0];
+    */
+        
+    let sliceIdx = Math.ceil(dim_min.length / 10);
+    dim_min = dim_min.slice(0, sliceIdx);
+    let minVal = dim_min.reduce((a, b) => a + b, 0) / sliceIdx;
 
-    let threshold = 50
-    let decimalsAuto = dimVal > threshold ? 0 : Math.floor(threshold / dimVal).toString().length
+    let threshold = 40
+    let decimalsAuto = minVal > threshold*1.5 ? 0 : Math.floor(threshold / minVal).toString().length
 
     // clamp
     return Math.min(Math.max(0, decimalsAuto), 8)
@@ -141,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
 
-        if (decimals >-1 || hasDecimal) {
-            decimals = hasDecimal ? com.decimals : decimals;
+    let len = pathData.length;
 
+    for (let c = 0; c < len; c++) {
+        //let com = pathData[c];
+        let values = pathData[c].values
+        let valLen = values.length;
 
-            //console.log('decimals', type, decimals);
-            pathData[c].values = com.values.map(val=>{return val ? +val.toFixed(decimals) : val });
+        if (valLen && (decimals > -1) ) {
 
+            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

@@ -1,3 +1,6 @@
+
+
+
 export function removeEmptySVGEls(svg) {
   let els = svg.querySelectorAll('g, defs');
   els.forEach(el => {
@@ -22,7 +25,7 @@ export function cleanUpSVG(svgMarkup, {
     .querySelector("svg");
   
   
-  let allowed=['viewBox', 'xmlns', 'width', 'height', 'id', 'class'];
+  let allowed=['viewBox', 'xmlns', 'width', 'height', 'id', 'class', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin'];
   removeExcludedAttribues(svg, allowed)
   
   let removeEls = ['metadata', 'script']