svg-path-simplify 0.0.8 → 0.0.9

package/src/pathSimplify-main.js

@@ -1,5 +1,5 @@
 import { detectInputType } from './detect_input';
-import { combineCubicPairs } from './pathData_simplify_cubic';
+import { simplifyPathDataCubic } from './pathData_simplify_cubic';
 import { getPathDataVertices, pointAtT } from './svgii/geometry';
 import { getPolyBBox } from './svgii/geometry_bbox';
 import { analyzePathData } from './svgii/pathData_analyze';
@@ -17,9 +17,10 @@ import { pathDataToD } from './svgii/pathData_stringify';
 import { analyzePoly } from './svgii/poly_analyze';
 import { getCurvePathData } from './svgii/poly_to_pathdata';
 import { detectAccuracy } from './svgii/rounding';
-import { refineAdjacentExtremes } from './svgii/simplify_refineExtremes';
+import { refineAdjacentExtremes } from './svgii/pathData_simplify_refineExtremes';
 import { cleanUpSVG, removeEmptySVGEls, stringifySVG } from './svgii/svg_cleanup';
 import { renderPoint } from './svgii/visualize';
+import { refineRoundedCorners } from './svgii/pathData_simplify_refineCorners';
 
 export function svgPathSimplify(input = '', {
 
@@ -41,11 +42,14 @@ export function svgPathSimplify(input = '', {
 
     simplifyBezier = true,
     optimizeOrder = true,
+    removeZeroLength = true,
     removeColinear = true,
     flatBezierToLinetos = true,
     revertToQuadratics = true,
 
     refineExtremes = true,
+    refineCorners = false, 
+
     keepExtremes = true,
     keepCorners = true,
     extrapolateDominant = true,
@@ -83,37 +87,49 @@ export function svgPathSimplify(input = '', {
     let report = {};
     let d = '';
     let mode = inputType === 'svgMarkup' ? 1 : 0;
+    //console.log(inputType);
 
     let paths = []
 
-
     /**
      * normalize input
      * switch mode
      */
 
     // original size
-    svgSize = new Blob([input]).size;
+    //svgSize = new Blob([input]).size;
+    svgSize = input.length;
+
 
-    // single path
+    // mode:0 – single path
     if (!mode) {
         if (inputType === 'pathDataString') {
             d = input
         } else if (inputType === 'polyString') {
             d = 'M' + input
         }
+        else if (inputType === 'pathData') {
+            d = input;
+
+            // stringify to compare lengths
+            //let dStr = pathDataToD(d);
+            let dStr = d.map(com=>{return `${com.type} ${com.values.join(' ')}`}).join(' ') ;
+            svgSize = dStr.length;
+
+        }
+
         paths.push({ d, el: null })
     }
-    // process svg
+    // mode:1 – process complete svg DOM
     else {
         //sanitize
         let returnDom = true
         svg = cleanUpSVG(input, { returnDom, removeHidden, removeUnused }
         );
 
-        if(shapesToPaths){
+        if (shapesToPaths) {
             let shapes = svg.querySelectorAll('polygon, polyline, line, rect, circle, ellipse');
-            shapes.forEach(shape=>{
+            shapes.forEach(shape => {
                 let path = shapeElToPath(shape);
                 shape.replaceWith(path)
             })
@@ -126,11 +142,11 @@ export function svgPathSimplify(input = '', {
         })
     }
 
-    //console.log(paths);
-    //console.log('inputType', inputType, 'mode',  mode);
+
 
     /**
      * process all paths
+     * try simplifications and removals
      */
 
     // SVG optimization options
@@ -143,44 +159,43 @@ export function svgPathSimplify(input = '', {
     // combinded path data for SVGs with mergePaths enabled
     let pathData_merged = [];
 
-    paths.forEach(path => {
+    for (let i = 0, l = paths.length; l && i < l; i++) {
+
+        let path = paths[i];
         let { d, el } = path;
 
-        ///let t0 = performance.now()
-        let pathDataO = parsePathDataNormalized(d, { quadraticToCubic, toAbsolute, arcToCubic });
-        //console.log('pathDataO', pathDataO);
+        let pathData = parsePathDataNormalized(d, { quadraticToCubic, toAbsolute, arcToCubic });
 
         // count commands for evaluation
-        let comCount = pathDataO.length
+        let comCount = pathData.length
 
 
-        // create clone for fallback
-        //let pathData = JSON.parse(JSON.stringify(pathDataO));
-        let pathData = pathDataO;
-        //let t1 = performance.now() - t0;
-        //console.log('t1', t1);
-
-
-        if(removeOrphanSubpaths) pathData = removeOrphanedM(pathData);
+        if (removeOrphanSubpaths) pathData = removeOrphanedM(pathData);
 
         /**
          * get sub paths
          */
         let subPathArr = splitSubpaths(pathData);
+        let lenSub = subPathArr.length;
+
 
         // cleaned up pathData
-        let pathDataArrN = [];
+        //let pathDataArrN = new Array(lenSub);
+
+        // reset array
+        let pathDataFlat = []
+
+        for (let i = 0; i < lenSub; i++) {
 
-        for (let i = 0, l = subPathArr.length; i < l; i++) {
 
             //let { pathData, bb } = subPathArr[i];
             let pathDataSub = subPathArr[i];
 
-            // try simplification in reversed order
-            if (reverse) pathDataSub = reversePathData(pathDataSub);
 
             // remove zero length linetos
-            if (removeColinear) pathDataSub = removeZeroLengthLinetos(pathDataSub)
+            if (removeColinear || removeZeroLength) pathDataSub = removeZeroLengthLinetos(pathDataSub)
+            //console.log(removeColinear, removeZeroLength);
+
 
             // add extremes
             //let tMin=0.2, tMax=0.8;
@@ -191,8 +206,10 @@ export function svgPathSimplify(input = '', {
             // sort to top left
             if (optimizeOrder) pathDataSub = pathDataToTopLeft(pathDataSub);
 
-            // remove colinear/flat
-            if (removeColinear) pathDataSub = pathDataRemoveColinear(pathDataSub, tolerance, flatBezierToLinetos);
+
+            // Preprocessing: remove colinear - ignore flat beziers (removed later)
+            if (removeColinear) pathDataSub = pathDataRemoveColinear(pathDataSub, { tolerance, flatBezierToLinetos: false });
+
 
             // analyze pathdata to add info about signicant properties such as extremes, corners
             let pathDataPlus = analyzePathData(pathDataSub);
@@ -200,37 +217,29 @@ export function svgPathSimplify(input = '', {
 
             // simplify beziers
             let { pathData, bb, dimA } = pathDataPlus;
-
-            //let pathDataN = pathData;
-
-            //console.log(pathDataPlus);
-            //let t0=performance.now()
             pathData = simplifyBezier ? simplifyPathDataCubic(pathData, { simplifyBezier, keepInflections, keepExtremes, keepCorners, extrapolateDominant, revertToQuadratics, tolerance, reverse }) : pathData;
-            //let t1=performance.now() - t0;
-            //console.log('t1', t1);
-
 
             // refine extremes
-            if(refineExtremes){
+            if (refineExtremes) {
                 let thresholdEx = (bb.width + bb.height) / 2 * 0.05
-                pathData = refineAdjacentExtremes(pathData, {threshold:thresholdEx, tolerance})
+                pathData = refineAdjacentExtremes(pathData, { threshold: thresholdEx, tolerance })
             }
 
 
             // cubic to arcs
             if (cubicToArc) {
 
-                let thresh = 3;
+                let thresh = 1;
 
-                pathData.forEach((com, c) => {
+                for(let c=0, l=pathData.length; c<l; c++){
+                    let com = pathData[c]
                     let { type, values, p0, cp1 = null, cp2 = null, p = null } = com;
                     if (type === 'C') {
                         //console.log(com);
                         let comA = cubicCommandToArc(p0, cp1, cp2, p, thresh)
                         if (comA.isArc) pathData[c] = comA.com;
-                        //if (comQ.type === 'Q') pathDataN[c] = comQ
                     }
-                })
+                }
 
                 // combine adjacent cubics
                 pathData = combineArcs(pathData)
@@ -238,22 +247,30 @@ export function svgPathSimplify(input = '', {
             }
 
 
+            // post processing: remove flat beziers
+            if (removeColinear && flatBezierToLinetos) {
+                pathData = pathDataRemoveColinear(pathData, { tolerance, flatBezierToLinetos });
+            }
+
+
+            // refine corners
+            if(refineCorners){
+                let threshold = (bb.width + bb.height) / 2 * 0.1
+                pathData = refineRoundedCorners(pathData, { threshold, tolerance })
+                //console.log(refineCorners);
+            }
 
 
 
             // simplify to quadratics
             if (revertToQuadratics) {
-                pathData.forEach((com, c) => {
+                for(let c=0, l=pathData.length; c<l; c++){
+                    let com = pathData[c]
                     let { type, values, p0, cp1 = null, cp2 = null, p = null } = com;
                     if (type === 'C') {
                         //console.log(com);
                         let comQ = revertCubicQuadratic(p0, cp1, cp2, p)
                         if (comQ.type === 'Q') {
-                            /*
-                            comQ.p0 = com.p0
-                            comQ.cp1 = {x:comQ.values[0], y:comQ.values[1]}
-                            comQ.p = com.p
-                            */
                             comQ.extreme = com.extreme
                             comQ.corner = com.corner
                             comQ.dimA = com.dimA
@@ -261,26 +278,32 @@ export function svgPathSimplify(input = '', {
                             pathData[c] = comQ
                         }
                     }
-                })
+                }
             }
 
-            //if (removeColinear) pathDataSub = pathDataRemoveColinear(pathDataSub, tolerance, flatBezierToLinetos);
-
 
             // optimize close path
             if (optimizeOrder) pathData = optimizeClosePath(pathData)
 
-            // poly
-            //let poly = pathDataToPolySingle(pathData, true)
-            //console.log('poly', poly);
-
 
             // update
-            pathDataArrN.push(pathData)
+            pathDataFlat.push(...pathData)
+            //pathDataArrN[i]=(pathData)
+
         }
 
+
         // flatten compound paths 
-        pathData = pathDataArrN.flat();
+        pathData = pathDataFlat;
+
+
+        //console.log('pathData', pathData);
+
+        if (autoAccuracy) {
+            decimals = detectAccuracy(pathData)
+            pathOptions.decimals = decimals
+            //console.log('!decimals', decimals);
+        }
 
 
         // collect for merged svg paths 
@@ -290,17 +313,6 @@ export function svgPathSimplify(input = '', {
         // single output
         else {
 
-            /**
-             * detect accuracy
-             */
-            if (autoAccuracy) {
-                decimals = detectAccuracy(pathData)
-                pathOptions.decimals = decimals
-                //console.log('!decimals', decimals);
-            }
-
-            //console.log('autoAccuracy', autoAccuracy, decimals);
-
             // optimize path data
             pathData = convertPathData(pathData, pathOptions)
 
@@ -311,9 +323,10 @@ export function svgPathSimplify(input = '', {
             let comCountS = pathData.length
 
             let dOpt = pathDataToD(pathData, minifyD)
-            svgSizeOpt = new Blob([dOpt]).size;
-            compression = +(100 / svgSize * (svgSizeOpt)).toFixed(2)
+            //svgSizeOpt = new Blob([dOpt]).size;
+            svgSizeOpt = dOpt.length
 
+            compression = +(100 / svgSize * (svgSizeOpt)).toFixed(2)
 
             path.d = dOpt
             path.report = {
@@ -328,7 +341,7 @@ export function svgPathSimplify(input = '', {
             // apply new path for svgs
             if (el) el.setAttribute('d', dOpt)
         }
-    });
+    };
 
     /**
      *  stringify new SVG
@@ -336,21 +349,19 @@ export function svgPathSimplify(input = '', {
     if (mode) {
 
         if (pathData_merged.length) {
+
             // optimize path data
             let pathData = convertPathData(pathData_merged, pathOptions)
 
             // remove zero-length segments introduced by rounding
-            //pathData = removeZeroLengthLinetos_post(pathData);
             pathData = removeZeroLengthLinetos(pathData);
 
-
             let dOpt = pathDataToD(pathData, minifyD)
 
 
             // apply new path for svgs
             paths[0].el.setAttribute('d', dOpt)
 
-
             // remove other paths
             for (let i = 1; i < paths.length; i++) {
                 let pathEl = paths[i].el
@@ -364,7 +375,8 @@ export function svgPathSimplify(input = '', {
 
 
         svg = stringifySVG(svg);
-        svgSizeOpt = new Blob([svg]).size
+        //svgSizeOpt = new Blob([svg]).size
+        svgSizeOpt = svg.length;
         //compression = +(100/svgSize * (svgSize-svgSizeOpt)).toFixed(2)
         compression = +(100 / svgSize * (svgSizeOpt)).toFixed(2)
 
@@ -388,110 +400,5 @@ export function svgPathSimplify(input = '', {
 
 
 
-function simplifyPathDataCubic(pathData, {
-    keepExtremes = true,
-    keepInflections = true,
-    keepCorners = true,
-    extrapolateDominant = true,
-    tolerance = 1,
-    reverse = false
-} = {}) {
-
-    let pathDataN = [pathData[0]];
-
-    for (let i = 2, l = pathData.length; l && i <= l; i++) {
-        let com = pathData[i - 1];
-        let comN = i < l ? pathData[i] : null;
-        let typeN = comN?.type || null;
-        //let isCornerN = comN?.corner || null;
-        //let isExtremeN = comN?.extreme || null;
-        let isDirChange = com?.directionChange || null;
-        let isDirChangeN = comN?.directionChange || null;
-
-        let { type, values, p0, p, cp1 = null, cp2 = null, extreme = false, corner = false, dimA = 0 } = com;
-
-        // count simplifications
-        let success = 0;
-
-        // next is also cubic
-        if (type === 'C' && typeN === 'C') {
-
-            // cannot be combined as crossing extremes or corners
-            if (
-                (keepInflections && isDirChangeN) ||
-                (keepCorners && corner) ||
-                (!isDirChange && keepExtremes && extreme)
-            ) {
-                //renderPoint(markers, p, 'red', '1%')
-                pathDataN.push(com)
-            }
-
-            // try simplification
-            else {
-                //renderPoint(markers, p, 'magenta', '1%')
-                let combined = combineCubicPairs(com, comN, extrapolateDominant, tolerance)
-                let error = 0;
-
-                // combining successful! try next segment
-                if (combined.length === 1) {
-                    com = combined[0]
-                    let offset = 1;
-
-                    // add cumulative error to prevent distortions
-                    error += com.error;
-                    //console.log('!error', error);
-
-                    // find next candidates
-                    for (let n = i + 1; error < tolerance && n < l; n++) {
-                        let comN = pathData[n]
-                        if (comN.type !== 'C' ||
-                            (
-                                (keepInflections && comN.directionChange) ||
-                                (keepCorners && com.corner) ||
-                                (keepExtremes && com.extreme)
-                            )
-                        ) {
-                            break
-                        }
-
-                        let combined = combineCubicPairs(com, comN, extrapolateDominant, tolerance)
-                        if (combined.length === 1) {
-                            // add cumulative error to prevent distortions
-                            //console.log('combined', combined);
-                            error += combined[0].error * 0.5;
-                            //error += combined[0].error * 1;
-                            offset++
-                        }
-                        com = combined[0]
-                    }
-
-                    //com.opt = true
-                    pathDataN.push(com)
-
-                    if (i < l) {
-                        i += offset
-                    }
-
-                } else {
-                    pathDataN.push(com)
-                }
-            }
-
-        } // end of bezier command
-
-
-        // other commands
-        else {
-            pathDataN.push(com)
-        }
-
-    } // end command loop
-
-    // reverse back
-    if (reverse) pathDataN = reversePathData(pathDataN)
-
-    return pathDataN
-}
-
 
 

package/src/svgii/geometry_flatness.js

@@ -1,53 +1,46 @@
 import { getSquareDistance } from "./geometry";
 import { getPolygonArea } from "./geometry_area";
 
-export function commandIsFlat(points, tolerance = 0.025) {
+export function commandIsFlat(points, {
+    tolerance = 1,
+    debug=false
+} = {}) {
+
+    let isFlat=false;
+    let report = {
+        flat:true,
+        steepness:0
+    }
 
     let p0 = points[0];
     let p = points[points.length - 1];
 
-    let xArr = points.map(pt => { return pt.x })
-    let yArr = points.map(pt => { return pt.y })
-
-    let xMin = Math.min(...xArr)
-    let xMax = Math.max(...xArr)
-    let yMin = Math.min(...yArr)
-    let yMax = Math.max(...yArr)
-    let w = xMax - xMin
-    let h = yMax - yMin
+    let xSet = new Set([...points.map(pt => +pt.x.toFixed(8))])
+    let ySet = new Set([...points.map(pt => +pt.y.toFixed(8))])
 
 
-    if (points.length < 3 || (w === 0 || h === 0)) {
-        return { area: 0, flat: true, thresh: 0.0001, ratio: 0 };
-    }
+    // must be flat
+    if(xSet.size===1 || ySet.size===1) return !debug ? true : report;
 
     let squareDist = getSquareDistance(p0, p)
-    let squareDist1 = getSquareDistance(p0, points[0])
-    let squareDist2 = points.length > 3 ? getSquareDistance(p, points[1]) : squareDist1;
-    let squareDistAvg = (squareDist1 + squareDist2) / 2
-
-    tolerance = 0.5;
-    let thresh = (w + h) * 0.5 * tolerance;
-
-    //let thresh = tolerance;
+    let threshold = squareDist / 1000 * tolerance
     let area = getPolygonArea(points, true)
 
+    // flat enough
+    if(area < threshold) isFlat = true;
 
-    let diff = Math.abs(area - squareDist);
-    let areaDiff = Math.abs(100 - (100 / area * (area + diff)))
-    let areaThresh = 1000
-
-    //let ratio = area / (squareDistAvg/areaThresh);
-    let ratio = area / (squareDistAvg);
-
-
-    let isFlat = area === 0 ? true : area < squareDistAvg / areaThresh;
-
+    if(debug){
+        report.flat = isFlat;
+        //report.steepness = area/threshold
+        report.steepness = area/squareDist*10
+    }
 
-    return { area: area, flat: isFlat, thresh: thresh, ratio: ratio, squareDist: squareDist, areaThresh: squareDist / areaThresh };
+    return !debug ? isFlat : report;
 }
 
 
+
+// deprecated
 export function checkBezierFlatness(p0, cpts, p) {
 
     let isFlat = false;
@@ -75,13 +68,13 @@ export function checkBezierFlatness(p0, cpts, p) {
 
     if (!cross0) return true
 
-    let area = getPolygonArea([p0,...cpts, p], true)
+    let area = getPolygonArea([p0, ...cpts, p], true)
     let dist1 = getSquareDistance(p0, p)
-    let thresh = dist1/200;
+    let thresh = dist1 / 200;
 
 
-   // if(area<thresh) return true;
-    isFlat = area<thresh;
+    // if(area<thresh) return true;
+    isFlat = area < thresh;
     //console.log('area', area, thresh, isFlat);
 
 

package/src/svgii/pathData_analyze.js

@@ -112,6 +112,7 @@ export function analyzePathData(pathData = []) {
         com.directionChange = false;
         com.closePath = false;
         com.dimA = 0;
+        //com.flat = false;
 
 
         /**
@@ -181,14 +182,17 @@ export function analyzePathData(pathData = []) {
             commandPts.push(p);
 
             /*
+            //let commandFlatness = commandIsFlat(commandPts);
             let commandFlatness = commandIsFlat(commandPts);
             isFlat = commandFlatness.flat;
             com.flat = isFlat;
 
             if (isFlat) {
                 com.extreme = false;
+                //renderPoint(markers, p, 'red', '1%', '0.5')
             }
             */
+
         }
 
         /**