svg-path-simplify 0.0.5 → 0.0.8

package/src/pathData_simplify_cubic_extrapolate.js

@@ -3,7 +3,7 @@ import { getPathArea } from "./svgii/geometry_area";
 import { pathDataToD } from "./svgii/pathData_stringify";
 import { renderPath, renderPoint } from "./svgii/visualize";
 
-export function getCombinedByDominant(com1, com2, maxDist = 0, tolerance = 1) {
+export function getCombinedByDominant(com1, com2, maxDist = 0, tolerance = 1, debug = false) {
 
     // cubic Bézier derivative
     const cubicDerivative = (p0, p1, p2, p3, t) => {
@@ -27,8 +27,10 @@ export function getCombinedByDominant(com1, com2, maxDist = 0, tolerance = 1) {
     let commands = [com1, com2]
 
     // detect dominant 
-    let dist1 = getSquareDistance(com1.p0, com1.p)
-    let dist2 = getSquareDistance(com2.p0, com2.p)
+    let dist1 = getDistAv(com1.p0, com1.p)
+    let dist2 = getDistAv(com2.p0, com2.p)
+
+
     let reverse = dist1 > dist2;
 
     //let ang1 = getAngle(com1.p0, com1.cp1)
@@ -42,6 +44,7 @@ export function getCombinedByDominant(com1, com2, maxDist = 0, tolerance = 1) {
 
     if (!ptI) {
         //renderPoint(markers, com1.p, 'purple')
+        //console.log('nope');
         return commands
     }
 
@@ -95,13 +98,10 @@ export function getCombinedByDominant(com1, com2, maxDist = 0, tolerance = 1) {
     let r = sub(P, com1.p0);
 
     //let t0_2 = t0 - dot(r, dP) / dot(dP, dP);
-    //console.log(t0, t0_2);
 
     t0 -= dot(r, dP) / dot(dP, dP);
 
-
     // construct merged cubic over [t0, 1]
-
     let Q0 = pointAtT([com2.p0, com2.cp1, com2.cp2, com2.p], t0);
     let Q3 = com2.p;
 
@@ -131,31 +131,38 @@ export function getCombinedByDominant(com1, com2, maxDist = 0, tolerance = 1) {
     }
 
 
-    let ptM = pointAtT([result.p0, result.cp1, result.cp2, result.p], 0.5, false, true)
+    let tMid = (1 - t0) * 0.5;
+    let tSplit = t0 - 1;
+    //tMid = 0.5;
+
+
+    let ptM = pointAtT([result.p0, result.cp1, result.cp2, result.p], tMid, false, true)
     let seg1_cp2 = ptM.cpts[2]
     //let seg2_cp1 = ptM.cpts[3]
 
-
     let ptI_1 = checkLineIntersection(ptM, seg1_cp2, result.p0, ptI, false)
     let ptI_2 = checkLineIntersection(ptM, seg1_cp2, result.p, ptI, false)
 
 
+
+
     let cp1_2 = interpolate(result.p0, ptI_1, 1.333)
     let cp2_2 = interpolate(result.p, ptI_2, 1.333)
 
     // test self intersections and exit 
-    let cp_intersection = checkLineIntersection(com1_o.p0, cp1_2, com2_o.p, cp2_2, true )
-    if(cp_intersection){
+    let cp_intersection = checkLineIntersection(com1_o.p0, cp1_2, com2_o.p, cp2_2, true)
+    if (cp_intersection) {
         //renderPoint(markers, cp_intersection )
         return commands;
     }
 
+    if (debug) renderPoint(markers, ptM, 'purple')
 
     result.cp1 = cp1_2
     result.cp2 = cp2_2
 
-    // check distances
 
+    // check distances between original starting point and extrapolated
     let dist3 = getDistAv(com1_o.p0, result.p0)
     let dist4 = getDistAv(com2_o.p, result.p)
     let dist5 = (dist3 + dist4)
@@ -167,13 +174,29 @@ export function getCombinedByDominant(com1, com2, maxDist = 0, tolerance = 1) {
     result.corner = com2_o.corner
     result.dimA = com2_o.dimA
     result.directionChange = com2_o.directionChange
+    result.type = 'C'
     result.values = [result.cp1.x, result.cp1.y, result.cp2.x, result.cp2.y, result.p.x, result.p.y]
 
 
-
-    // check if completely off
+    // extrapolated starting point is not completely off
     if (dist5 < maxDist) {
 
+        // split t to meet original mid segment start point
+        let tSplit = reverse ? 1 + t0 : Math.abs(t0);
+        //console.log('t0', t0, tMid, 'tSplit', tSplit);
+
+        let ptSplit = pointAtT([result.p0, result.cp1, result.cp2, result.p], tSplit);
+        let distSplit = getDistAv(ptSplit, com1.p)
+        //console.log('distS', distS, maxDist );
+
+        // not close enough - exit
+        if (distSplit > maxDist * tolerance) {
+            //renderPoint(markers, ptSplit, 'cyan', '1%')
+            //renderPoint(markers, com1.p, 'red', '0.5%')
+            return commands;
+        }
+
+
         // compare combined with original area
         let pathData0 = [
             { type: 'M', values: [com1_o.p0.x, com1_o.p0.y] },
@@ -190,28 +213,23 @@ export function getCombinedByDominant(com1, com2, maxDist = 0, tolerance = 1) {
         let areaN = getPathArea(pathDataN)
         let areaDiff = Math.abs(areaN / area0 - 1)
 
-        result.error = areaDiff * 10 * tolerance;
+        result.error = areaDiff * 5 * tolerance;
         //result.error = areaDiff + dist5;
 
-        let d = pathDataToD(pathDataN)
 
-        // success
-        if (areaDiff < 0.01) {
-            commands = [result];
-            //renderPath(markers, d, 'orange')
-            //console.log('areaDiff', areaDiff);
-
-        } else {
-            // renderPath(markers, d, 'red')
-            // console.log('areaDiff', areaDiff);
+        if (debug) {
+            let d = pathDataToD(pathDataN)
+            renderPath(markers, d, 'orange')
         }
 
-
-        //renderPath(markers, d, 'orange')
+        // success!!!
+        if (areaDiff < 0.05 * tolerance) {
+            commands = [result];
+            //console.log('areaDiff', areaDiff);
+        } 
     }
 
 
-
     //console.log(commands);
 
     return commands

package/src/pathSimplify-main.js

@@ -2,27 +2,33 @@ 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 { 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';
 import { pathDataToD } from './svgii/pathData_stringify';
-import { pathDataToPolyPlus } from './svgii/pathData_toPolygon';
+//import { pathDataToPolyPlus, pathDataToPolySingle } from './svgii/pathData_toPolygon';
 import { analyzePoly } from './svgii/poly_analyze';
 import { getCurvePathData } from './svgii/poly_to_pathdata';
 import { detectAccuracy } from './svgii/rounding';
-import { cleanUpSVG } from './svgii/svg_cleanup';
+import { refineAdjacentExtremes } from './svgii/simplify_refineExtremes';
+import { cleanUpSVG, removeEmptySVGEls, stringifySVG } from './svgii/svg_cleanup';
 import { renderPoint } from './svgii/visualize';
 
 export function svgPathSimplify(input = '', {
+
+    // return svg markup or object
+    getObject = false,
+
     toAbsolute = true,
     toRelative = true,
     toShorthands = true,
-    decimals = 3,
     //optimize = 0,
 
     // not necessary unless you need cubics only
@@ -32,29 +38,36 @@ export function svgPathSimplify(input = '', {
     arcToCubic = false,
     cubicToArc = false,
 
-    // arc to cubic precision - adds more segments for better precision     
-    arcAccuracy = 4,
-    keepExtremes = true,
-    keepCorners = true,
-    keepInflections = true,
-    extrapolateDominant = false,
-    addExtremes = false,
+
+    simplifyBezier = true,
     optimizeOrder = true,
     removeColinear = true,
-    simplifyBezier = true,
-    autoAccuracy = true,
     flatBezierToLinetos = true,
     revertToQuadratics = true,
+
+    refineExtremes = true,
+    keepExtremes = true,
+    keepCorners = true,
+    extrapolateDominant = true,
+    keepInflections = false,
+    addExtremes = false,
+    removeOrphanSubpaths = false,
+
+
+    // svg path optimizations
+    decimals = 3,
+    autoAccuracy = true,
+
     minifyD = 0,
     tolerance = 1,
     reverse = false,
 
     // svg cleanup options
+    mergePaths = false,
     removeHidden = true,
     removeUnused = true,
+    shapesToPaths = true,
 
-    // return svg markup or object
-    getObject = false
 
 } = {}) {
 
@@ -98,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 => {
@@ -111,18 +132,37 @@ export function svgPathSimplify(input = '', {
     /**
      * process all paths
      */
+
+    // SVG optimization options
+    let pathOptions = {
+        toRelative,
+        toShorthands,
+        decimals,
+    }
+
+    // combinded path data for SVGs with mergePaths enabled
+    let pathData_merged = [];
+
     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
          */
@@ -164,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);
+
 
-            pathData = simplifyBezier ? simplifyPathData(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
@@ -189,6 +238,9 @@ export function svgPathSimplify(input = '', {
             }
 
 
+
+
+
             // simplify to quadratics
             if (revertToQuadratics) {
                 pathData.forEach((com, c) => {
@@ -196,85 +248,122 @@ export function svgPathSimplify(input = '', {
                     if (type === 'C') {
                         //console.log(com);
                         let comQ = revertCubicQuadratic(p0, cp1, cp2, p)
-                        if (comQ.type === 'Q') pathData[c] = comQ
+                        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
+
+                            pathData[c] = comQ
+                        }
                     }
                 })
             }
 
+            //if (removeColinear) pathDataSub = pathDataRemoveColinear(pathDataSub, tolerance, flatBezierToLinetos);
+
+
             // optimize close path
-            if(optimizeOrder) pathData=optimizeClosePath(pathData)
+            if (optimizeOrder) pathData = optimizeClosePath(pathData)
+
+            // poly
+            //let poly = pathDataToPolySingle(pathData, true)
+            //console.log('poly', poly);
+
 
             // update
             pathDataArrN.push(pathData)
         }
 
-        
         // flatten compound paths 
         pathData = pathDataArrN.flat();
 
-        /**
-         * detect accuracy
-         */
-        if (autoAccuracy) {
-            decimals = detectAccuracy(pathData)
+
+        // collect for merged svg paths 
+        if (el && mergePaths) {
+            pathData_merged.push(...pathData)
         }
+        // single output
+        else {
 
+            /**
+             * detect accuracy
+             */
+            if (autoAccuracy) {
+                decimals = detectAccuracy(pathData)
+                pathOptions.decimals = decimals
+                //console.log('!decimals', decimals);
+            }
 
-        // optimize
-        let pathOptions = {
-            toRelative,
-            toShorthands,
-            decimals,
-        }
+            //console.log('autoAccuracy', autoAccuracy, decimals);
 
+            // optimize path data
+            pathData = convertPathData(pathData, pathOptions)
 
-        // optimize path data
-        pathData = convertPathData(pathData, pathOptions)
+            // remove zero-length segments introduced by rounding
+            pathData = removeZeroLengthLinetos(pathData);
 
+            // compare command count
+            let comCountS = pathData.length
 
-        // remove zero-length segments introduced by rounding
-        let pathDataOpt = []
+            let dOpt = pathDataToD(pathData, minifyD)
+            svgSizeOpt = new Blob([dOpt]).size;
+            compression = +(100 / svgSize * (svgSizeOpt)).toFixed(2)
 
-        pathData.forEach((com, i) => {
-            let { type, values } = com;
-            if (type === 'l' || type === 'v' || type === 'h') {
-                let hasLength = type === 'l' ? (values.join('') !== '00') : values[0] !== 0
-                if (hasLength) pathDataOpt.push(com)
-            } else {
-                pathDataOpt.push(com)
+
+            path.d = dOpt
+            path.report = {
+                original: comCount,
+                new: comCountS,
+                saved: comCount - comCountS,
+                compression,
+                decimals,
+                //success: comCountS < comCount
             }
-        })
 
-        pathData = pathDataOpt;
+            // apply new path for svgs
+            if (el) el.setAttribute('d', dOpt)
+        }
+    });
 
+    /**
+     *  stringify new SVG
+     */
+    if (mode) {
 
-        // compare command count
-        let comCountS = pathData.length
+        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)
-        svgSizeOpt = new Blob([dOpt]).size;
-        //compression = +(100/svgSize * (svgSize - svgSizeOpt)).toFixed(2)
-        compression = +(100 / svgSize * (svgSizeOpt)).toFixed(2)
 
+            let dOpt = pathDataToD(pathData, minifyD)
 
-        path.d = dOpt
-        path.report = {
-            original: comCount,
-            new: comCountS,
-            saved: comCount - comCountS,
-            compression,
-            decimals,
-            //success: comCountS < comCount
+
+            // 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
+                if (pathEl) pathEl.remove()
+            }
+
+            // remove empty groups e.g groups
+            removeEmptySVGEls(svg);
         }
 
-        // apply new path for svgs
-        if (el) el.setAttribute('d', dOpt)
 
-    });
 
-    // stringify new SVG
-    if (mode) {
-        svg = new XMLSerializer().serializeToString(svg);
+        svg = stringifySVG(svg);
         svgSizeOpt = new Blob([svg]).size
         //compression = +(100/svgSize * (svgSize-svgSizeOpt)).toFixed(2)
         compression = +(100 / svgSize * (svgSizeOpt)).toFixed(2)
@@ -299,7 +388,7 @@ export function svgPathSimplify(input = '', {
 
 
 
-function simplifyPathData(pathData, {
+function simplifyPathDataCubic(pathData, {
     keepExtremes = true,
     keepInflections = true,
     keepCorners = true,
@@ -347,6 +436,8 @@ function simplifyPathData(pathData, {
                 if (combined.length === 1) {
                     com = combined[0]
                     let offset = 1;
+
+                    // add cumulative error to prevent distortions
                     error += com.error;
                     //console.log('!error', error);
 
@@ -365,6 +456,10 @@ function simplifyPathData(pathData, {
 
                         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]