svg-path-simplify 0.0.7 → 0.0.8

package/src/pathSimplify-main.js

@@ -2,11 +2,13 @@ import { detectInputType } from './detect_input';
 import { combineCubicPairs } 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,6 +17,7 @@ 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 { cleanUpSVG, removeEmptySVGEls, stringifySVG } from './svgii/svg_cleanup';
 import { renderPoint } from './svgii/visualize';
 
@@ -42,11 +45,13 @@ export function svgPathSimplify(input = '', {
     flatBezierToLinetos = true,
     revertToQuadratics = true,
 
+    refineExtremes = true,
     keepExtremes = true,
     keepCorners = true,
     extrapolateDominant = true,
     keepInflections = false,
     addExtremes = false,
+    removeOrphanSubpaths = false,
 
 
     // svg path optimizations
@@ -61,6 +66,7 @@ export function svgPathSimplify(input = '', {
     mergePaths = false,
     removeHidden = true,
     removeUnused = true,
+    shapesToPaths = true,
 
 
 } = {}) {
@@ -105,6 +111,14 @@ export function svgPathSimplify(input = '', {
         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 => {
@@ -132,15 +146,23 @@ export function svgPathSimplify(input = '', {
     paths.forEach(path => {
         let { d, el } = path;
 
+        ///let t0 = performance.now()
         let pathDataO = parsePathDataNormalized(d, { quadraticToCubic, toAbsolute, arcToCubic });
-        //console.log(pathDataO);
-
-        // create clone for fallback
-        let pathData = JSON.parse(JSON.stringify(pathDataO));
+        //console.log('pathDataO', pathDataO);
 
         // count commands for evaluation
         let comCount = pathDataO.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);
+
         /**
          * get sub paths
          */
@@ -182,8 +204,17 @@ export function svgPathSimplify(input = '', {
             //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){
+                let thresholdEx = (bb.width + bb.height) / 2 * 0.05
+                pathData = refineAdjacentExtremes(pathData, {threshold:thresholdEx, tolerance})
+            }
 
 
             // cubic to arcs
@@ -207,6 +238,9 @@ export function svgPathSimplify(input = '', {
             }
 
 
+
+
+
             // simplify to quadratics
             if (revertToQuadratics) {
                 pathData.forEach((com, c) => {
@@ -232,6 +266,7 @@ export function svgPathSimplify(input = '', {
 
             //if (removeColinear) pathDataSub = pathDataRemoveColinear(pathDataSub, tolerance, flatBezierToLinetos);
 
+
             // optimize close path
             if (optimizeOrder) pathData = optimizeClosePath(pathData)
 
@@ -260,13 +295,17 @@ export function svgPathSimplify(input = '', {
              */
             if (autoAccuracy) {
                 decimals = detectAccuracy(pathData)
+                pathOptions.decimals = decimals
+                //console.log('!decimals', decimals);
             }
 
+            //console.log('autoAccuracy', autoAccuracy, decimals);
+
             // 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
@@ -301,7 +340,8 @@ export function svgPathSimplify(input = '', {
             let pathData = convertPathData(pathData_merged, pathOptions)
 
             // remove zero-length segments introduced by rounding
-            pathData = removeZeroLengthLinetos_post(pathData);
+            //pathData = removeZeroLengthLinetos_post(pathData);
+            pathData = removeZeroLengthLinetos(pathData);
 
 
             let dOpt = pathDataToD(pathData, minifyD)
@@ -419,6 +459,7 @@ function simplifyPathDataCubic(pathData, {
                             // 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]

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;
 }
 

package/src/svgii/geometry_flatness.js

@@ -0,0 +1,101 @@
+import { getSquareDistance } from "./geometry";
+import { getPolygonArea } from "./geometry_area";
+
+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;
+    let area = getPolygonArea(points, 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;
+
+
+    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 area = getPolygonArea([p0,...cpts, p], true)
+    let dist1 = getSquareDistance(p0, p)
+    let thresh = dist1/200;
+
+
+   // if(area<thresh) return true;
+    isFlat = area<thresh;
+    //console.log('area', area, thresh, isFlat);
+
+
+    /*
+    //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 );
+        isFlat = true;
+    }
+    */
+
+    return isFlat;
+
+}