svg-path-simplify 0.0.7 → 0.0.9

package/src/pathSimplify-main.js

@@ -1,12 +1,14 @@
 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, analyzePathData2 } from './svgii/pathData_analyze';
+import { analyzePathData } from './svgii/pathData_analyze';
 import { combineArcs, convertPathData, cubicCommandToArc, revertCubicQuadratic } from './svgii/pathData_convert';
 import { parsePathDataNormalized } from './svgii/pathData_parse';
+import { shapeElToPath } from './svgii/pathData_parse_els';
 import { pathDataRemoveColinear } from './svgii/pathData_remove_collinear';
-import { removeZeroLengthLinetos, removeZeroLengthLinetos_post } from './svgii/pathData_remove_zerolength';
+import { removeOrphanedM } from './svgii/pathData_remove_orphaned';
+import { removeZeroLengthLinetos } from './svgii/pathData_remove_zerolength';
 import { optimizeClosePath, pathDataToTopLeft } from './svgii/pathData_reorder';
 import { reversePathData } from './svgii/pathData_reverse';
 import { addExtremePoints, splitSubpaths } from './svgii/pathData_split';
@@ -15,8 +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/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 = '', {
 
@@ -38,15 +42,20 @@ 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,
     keepInflections = false,
     addExtremes = false,
+    removeOrphanSubpaths = false,
 
 
     // svg path optimizations
@@ -61,6 +70,7 @@ export function svgPathSimplify(input = '', {
     mergePaths = false,
     removeHidden = true,
     removeUnused = true,
+    shapesToPaths = true,
 
 
 } = {}) {
@@ -77,34 +87,54 @@ 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) {
+            let shapes = svg.querySelectorAll('polygon, polyline, line, rect, circle, ellipse');
+            shapes.forEach(shape => {
+                let path = shapeElToPath(shape);
+                shape.replaceWith(path)
+            })
+        }
+
         // collect paths
         let pathEls = svg.querySelectorAll('path')
         pathEls.forEach(path => {
@@ -112,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
@@ -129,36 +159,43 @@ export function svgPathSimplify(input = '', {
     // combinded path data for SVGs with mergePaths enabled
     let pathData_merged = [];
 
-    paths.forEach(path => {
-        let { d, el } = path;
+    for (let i = 0, l = paths.length; l && i < l; i++) {
 
-        let pathDataO = parsePathDataNormalized(d, { quadraticToCubic, toAbsolute, arcToCubic });
-        //console.log(pathDataO);
+        let path = paths[i];
+        let { d, el } = path;
 
-        // create clone for fallback
-        let pathData = JSON.parse(JSON.stringify(pathDataO));
+        let pathData = parsePathDataNormalized(d, { quadraticToCubic, toAbsolute, arcToCubic });
 
         // count commands for evaluation
-        let comCount = pathDataO.length
+        let comCount = pathData.length
+
+
+        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;
@@ -169,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);
@@ -178,28 +217,29 @@ export function svgPathSimplify(input = '', {
 
             // simplify beziers
             let { pathData, bb, dimA } = pathDataPlus;
-
-            //let pathDataN = pathData;
-
-            //console.log(pathDataPlus);
-
             pathData = simplifyBezier ? simplifyPathDataCubic(pathData, { simplifyBezier, keepInflections, keepExtremes, keepCorners, extrapolateDominant, revertToQuadratics, tolerance, reverse }) : pathData;
 
+            // refine extremes
+            if (refineExtremes) {
+                let thresholdEx = (bb.width + bb.height) / 2 * 0.05
+                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)
@@ -207,19 +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
@@ -227,25 +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 
@@ -255,26 +313,20 @@ export function svgPathSimplify(input = '', {
         // single output
         else {
 
-            /**
-             * detect accuracy
-             */
-            if (autoAccuracy) {
-                decimals = detectAccuracy(pathData)
-            }
-
             // optimize path data
             pathData = convertPathData(pathData, pathOptions)
 
             // remove zero-length segments introduced by rounding
-            pathData = removeZeroLengthLinetos_post(pathData);
+            pathData = removeZeroLengthLinetos(pathData);
 
             // compare command count
             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 = {
@@ -289,7 +341,7 @@ export function svgPathSimplify(input = '', {
             // apply new path for svgs
             if (el) el.setAttribute('d', dOpt)
         }
-    });
+    };
 
     /**
      *  stringify new SVG
@@ -297,12 +349,12 @@ 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)
 
@@ -310,7 +362,6 @@ export function svgPathSimplify(input = '', {
             // 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
@@ -324,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)
 
@@ -348,109 +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;
-                            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.js

@@ -23,19 +23,24 @@ export function getAngle(p1, p2, normalize = false) {
  * http://jsfiddle.net/justin_c_rounds/Gd2S2/light/
  */
 
-export function checkLineIntersection(p1, p2, p3, p4, exact = true) {
+export function checkLineIntersection(p1=null, p2=null, p3=null, p4=null, exact = true, debug=false) {
     // if the lines intersect, the result contains the x and y of the intersection (treating the lines as infinite) and booleans for whether line segment 1 or line segment 2 contain the point
     let denominator, a, b, numerator1, numerator2;
     let intersectionPoint = {}
 
+    if(!p1 || !p2 || !p3 || !p4){
+        if(debug) console.warn('points missing');
+        return false
+    }
+
     try {
         denominator = ((p4.y - p3.y) * (p2.x - p1.x)) - ((p4.x - p3.x) * (p2.y - p1.y));
         if (denominator == 0) {
             return false;
         }
-
     } catch {
-        console.log('!catch', p1, p2, 'p3:', p3, p4);
+        if(debug) console.warn('!catch', p1, p2, 'p3:', p3, 'p4:', p4);
+        return false
     }
 
     a = p1.y - p3.y;
@@ -52,9 +57,6 @@ export function checkLineIntersection(p1, p2, p3, p4, exact = true) {
         y: p1.y + (a * (p2.y - p1.y))
     }
 
-    // console.log('intersectionPoint', intersectionPoint, p1, p2);
-
-
 
     let intersection = false;
     // if line1 is a segment and line2 is infinite, they intersect if:
@@ -874,156 +876,8 @@ export function intersectLines(p1, p2, p3, p4) {
 
 
 
-/**
- * check polygon flatness helper  
- * basically a reduced shoelace algorithm
- */
-export function commandIsFlat0(points, tolerance = 0.025) {
-
-
-    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
-
-
-    if (points.length < 3 || (w === 0 || h === 0)) {
-        return { area: 0, flat: true, thresh: 0.0001, ratio: 0 };
-    }
-
-    tolerance = 0.5;
-    let thresh = (w + h) * 0.5 * tolerance;
-
-
-    //let thresh = tolerance;
-    //console.log('w,h', w, h, thresh);
-
-    let area = 0;
-    for (let i = 0; i < points.length; i++) {
-        let addX = points[i].x;
-        let addY = points[i === points.length - 1 ? 0 : i + 1].y;
-        let subX = points[i === points.length - 1 ? 0 : i + 1].x;
-        let subY = points[i].y;
-        area += addX * addY * 0.5 - subX * subY * 0.5;
-    }
-
-    //console.log('flatArea', area, points);
-    area = +Math.abs(area).toFixed(9);
-
-    let ratio = area / thresh;
-    let isFlat = area === 0 ? true : (ratio < 0.15 ? true : false);
-    //isFlat= false
-
-    return { area: area, flat: isFlat, thresh: thresh, ratio: ratio };
-}
-
-
-export function commandIsFlat(points, tolerance = 0.025) {
-
-    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
-
-
-    if (points.length < 3 || (w === 0 || h === 0)) {
-        return { area: 0, flat: true, thresh: 0.0001, ratio: 0 };
-    }
-
-    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;
-    //console.log('w,h', w, h, thresh);
-
-    let area = 0;
-    for (let i = 0, l = points.length; i < l; i++) {
-        let addX = points[i].x;
-        let addY = points[i === points.length - 1 ? 0 : i + 1].y;
-        let subX = points[i === points.length - 1 ? 0 : i + 1].x;
-        let subY = points[i].y;
-        area += addX * addY * 0.5 - subX * subY * 0.5;
-    }
-
-    //console.log('flatArea', area, points);
-    area = +Math.abs(area).toFixed(9);
-
-    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 : (ratio < 0.15 ? true : false);
-    //let isFlat = area === 0 ? true : (area < squareDist/areaThresh ? true : false);
-
-    let isFlat = area === 0 ? true : area < squareDistAvg / areaThresh;
-
-
-    return { area: area, flat: isFlat, thresh: thresh, ratio: ratio, squareDist: squareDist, areaThresh: squareDist / areaThresh };
-}
-
-
-export function checkBezierFlatness(p0, cpts, p) {
-
-    let isFlat = false;
-
-    let isCubic = cpts.length===2;
-
-    let cp1 = cpts[0]
-    let cp2 = isCubic ? cpts[1] : cp1;
-
-    if(p0.x===cp1.x && p0.y===cp1.y && p.x===cp2.x && p.y===cp2.y) return true;
-
-    let dx1 = cp1.x - p0.x;
-    let dy1 = cp1.y - p0.y;
-
-    let dx2 = p.x - cp2.x;
-    let dy2 = p.y - cp2.y;
 
-    let cross1 = Math.abs(dx1 * dy2 - dy1 * dx2);
 
-    if(!cross1) return true
-
-    let dx0 = p.x - p0.x;
-    let dy0 = p.y - p0.y;
-    let cross0 = Math.abs(dx0 * dy1 - dy0 * dx1);
-
-    if(!cross0) return true
-
-    //let diff = Math.abs(cross0 - cross1)
-    //let rat0 = 1/cross0 * diff;
-    let rat = (cross0/cross1)
-
-    if (rat<1.1 ) {
-        //console.log('cross', cross0, cross1, 'rat', rat, rat0, diff );
-        isFlat = true;
-    }
-
-    return isFlat;
-
-}
 
 /**
  * sloppy distance calculation
@@ -1041,7 +895,6 @@ export function getDistAv(pt1, pt2) {
     let diff = Math.abs(diffX + diffY) / 2;
     */
 
-
     return diff;
 }