svg-path-simplify 0.0.4 → 0.0.7

package/dist/svg-path-simplify.esm.js

@@ -1,38 +1,13 @@
-function renderPoint(
-    svg,
-    coords,
-    fill = "red",
-    r = "1%",
-    opacity = "1",
-    title = '',
-    render = true,
-    id = "",
-    className = ""
-) {
-    if (Array.isArray(coords)) {
-        coords = {
-            x: coords[0],
-            y: coords[1]
-        };
-    }
-    let marker = `<circle class="${className}" opacity="${opacity}" id="${id}" cx="${coords.x}" cy="${coords.y}" r="${r}" fill="${fill}">
-  <title>${title}</title></circle>`;
-
-    if (render) {
-        svg.insertAdjacentHTML("beforeend", marker);
-    } else {
-        return marker;
-    }
-}
-
 function detectInputType(input) {
     let type = 'string';
+    /*
     if (input instanceof HTMLImageElement) return "img";
     if (input instanceof SVGElement) return "svg";
     if (input instanceof HTMLCanvasElement) return "canvas";
     if (input instanceof File) return "file";
     if (input instanceof ArrayBuffer) return "buffer";
     if (input instanceof Blob) return "blob";
+    */
     if (Array.isArray(input)) return "array";
 
     if (typeof input === "string") {
@@ -882,6 +857,7 @@ function addExtemesToCommand(p0, values, tMin=0, tMax=1) {
 
         if(tArr.length){
             let commandsSplit = splitCommandAtTValues(p0, values, tArr);
+
             pathDataNew.push(...commandsSplit);
             extremeCount += commandsSplit.length;
         }else {
@@ -1535,6 +1511,7 @@ function getCombinedByDominant(com1, com2, maxDist = 0, tolerance = 1) {
     let dP = cubicDerivative(com2.p0, com2.cp1, com2.cp2, com2.p, t0);
     let r = sub(P, com1.p0);
 
+    
     t0 -= dot(r, dP) / dot(dP, dP);
 
     // construct merged cubic over [t0, 1]
@@ -1566,7 +1543,9 @@ 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 ptM = pointAtT([result.p0, result.cp1, result.cp2, result.p], tMid, false, true);
     let seg1_cp2 = ptM.cpts[2];
 
     let ptI_1 = checkLineIntersection(ptM, seg1_cp2, result.p0, ptI, false);
@@ -2113,17 +2092,21 @@ function revertCubicQuadratic(p0 = {}, cp1 = {}, cp2 = {}, p = {}) {
     let cp1_Q = null;
     let type = 'C';
     let values = [cp1.x, cp1.y, cp2.x, cp2.y, p.x, p.y];
+    let comN = {type, values};
 
     if (dist1 < threshold) {
         cp1_Q = checkLineIntersection(p0, cp1, p, cp2, false);
         if (cp1_Q) {
 
-            type = 'Q';
-            values = [cp1_Q.x, cp1_Q.y, p.x, p.y];
+            comN.type = 'Q';
+            comN.values = [cp1_Q.x, cp1_Q.y, p.x, p.y];
+            comN.p0 = p0;
+            comN.cp1 = cp1_Q;
+            comN.p = p;
         }
     }
 
-    return { type, values }
+    return comN
 
 }
 
@@ -3500,8 +3483,11 @@ function pathDataRemoveColinear(pathData, tolerance = 1, flatBezierToLinetos = t
 
         let area = getPolygonArea([p0, p, p1], true);
 
+        getSquareDistance(p0, p);
+        getSquareDistance(p, p1);
         let distSquare = getSquareDistance(p0, p1);
-        let distMax = distSquare / 100 * tolerance;
+
+        let distMax = distSquare / 200 * tolerance;
 
         let isFlat = area < distMax;
         let isFlatBez = false;
@@ -3531,7 +3517,10 @@ function pathDataRemoveColinear(pathData, tolerance = 1, flatBezierToLinetos = t
         p0 = p;
 
         // colinear – exclude arcs (as always =) as semicircles won't have an area
-        if ( isFlat && c < l - 1 && (type === 'L' || (flatBezierToLinetos && isFlatBez))) {
+
+        if ( isFlat && c < l - 1 && (type === 'L' || (flatBezierToLinetos && isFlatBez)) ) {
+
+            
 
             continue;
         }
@@ -3554,6 +3543,21 @@ function pathDataRemoveColinear(pathData, tolerance = 1, flatBezierToLinetos = t
 
 }
 
+// remove zero-length segments introduced by rounding
+function removeZeroLengthLinetos_post(pathData) {
+    let pathDataOpt = [];
+    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);
+        }
+    });
+    return pathDataOpt
+}
+
 function removeZeroLengthLinetos(pathData) {
 
     let M = { x: pathData[0].values[0], y: pathData[0].values[1] };
@@ -3607,12 +3611,98 @@ function pathDataToTopLeft(pathData) {
     }
 
     // reorder  to top left most
-    indices = indices.sort((a, b) => +a.y.toFixed(3) - +b.y.toFixed(3) || a.x - b.x);
+
+    indices = indices.sort((a, b) => +a.y.toFixed(3) - +b.y.toFixed(3) );
     newIndex = indices[0].index;
 
     return  newIndex ? shiftSvgStartingPoint(pathData, newIndex) : pathData;
 }
 
+function optimizeClosePath(pathData, removeFinalLineto = true, reorder = true) {
+
+    let pathDataNew = [];
+    let len = pathData.length;
+    let M = { x: +pathData[0].values[0].toFixed(8), y: +pathData[0].values[1].toFixed(8) };
+    let isClosed = pathData[len - 1].type.toLowerCase() === 'z';
+
+    let linetos = pathData.filter(com => com.type === 'L');
+
+    // check if order is ideal
+    let penultimateCom = pathData[len - 2];
+    let penultimateType = penultimateCom.type;
+    let penultimateComCoords = penultimateCom.values.slice(-2).map(val => +val.toFixed(8));
+
+    // last L command ends at M 
+    let isClosingCommand = penultimateComCoords[0] === M.x && penultimateComCoords[1] === M.y;
+
+    // if last segment is not closing or a lineto
+    let skipReorder = pathData[1].type !== 'L' && (!isClosingCommand || penultimateType === 'L');
+    skipReorder = false;
+
+    // we can't change starting point for non closed paths
+    if (!isClosed) {
+        return pathData
+    }
+
+    let newIndex = 0;
+
+    if (!skipReorder) {
+
+        let indices = [];
+        for (let i = 0, len = pathData.length; i < len; i++) {
+            let com = pathData[i];
+            let { type, values } = com;
+            if (values.length) {
+                let valsL = values.slice(-2);
+                let prevL = pathData[i - 1] && pathData[i - 1].type === 'L';
+                let nextL = pathData[i + 1] && pathData[i + 1].type === 'L';
+                let prevCom = pathData[i - 1] ? pathData[i - 1].type.toUpperCase() : null;
+                let nextCom = pathData[i + 1] ? pathData[i + 1].type.toUpperCase() : null;
+                let p = { type: type, x: valsL[0], y: valsL[1], dist: 0, index: 0, prevL, nextL, prevCom, nextCom };
+                p.index = i;
+                indices.push(p);
+            }
+        }
+
+        // find top most lineto
+
+        if (linetos.length) {
+            let curveAfterLine = indices.filter(com => (com.type !== 'L' && com.type !== 'M') && com.prevCom &&
+                com.prevCom === 'L' || com.prevCom === 'M' && penultimateType === 'L').sort((a, b) => a.y - b.y || a.x - b.x)[0];
+
+            newIndex = curveAfterLine ? curveAfterLine.index - 1 : 0;
+
+        }
+        // use top most command
+        else {
+            indices = indices.sort((a, b) => +a.y.toFixed(1) - +b.y.toFixed(1) || a.x - b.x);
+            newIndex = indices[0].index;
+        }
+
+        // reorder 
+        pathData = newIndex ? shiftSvgStartingPoint(pathData, newIndex) : pathData;
+    }
+
+    M = { x: +pathData[0].values[0].toFixed(8), y: +pathData[0].values[1].toFixed(7) };
+
+    len = pathData.length;
+
+    // remove last lineto
+    penultimateCom = pathData[len - 2];
+    penultimateType = penultimateCom.type;
+    penultimateComCoords = penultimateCom.values.slice(-2).map(val=>+val.toFixed(8));
+
+    isClosingCommand = penultimateType === 'L' && penultimateComCoords[0] === M.x && penultimateComCoords[1] === M.y;
+
+    if (removeFinalLineto && isClosingCommand) {
+        pathData.splice(len - 2, 1);
+    }
+
+    pathDataNew.push(...pathData);
+
+    return pathDataNew
+}
+
 /**
  * shift starting point
  */
@@ -3826,6 +3916,13 @@ function reversePathData(pathData, {
     return pathDataNew;
 }
 
+function removeEmptySVGEls(svg) {
+  let els = svg.querySelectorAll('g, defs');
+  els.forEach(el => {
+      if (!el.children.length) el.remove();
+  });
+}
+
 function cleanUpSVG(svgMarkup, {
   returnDom=false, 
   removeHidden=true,
@@ -3913,10 +4010,13 @@ function stringifySVG(svg){
 }
 
 function svgPathSimplify(input = '', {
+
+    // return svg markup or object
+    getObject = false,
+
     toAbsolute = true,
     toRelative = true,
     toShorthands = true,
-    decimals = 3,
 
     // not necessary unless you need cubics only
     quadraticToCubic = true,
@@ -3925,30 +4025,31 @@ 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,
+
+    keepExtremes = true,
+    keepCorners = true,
+    extrapolateDominant = true,
+    keepInflections = false,
+    addExtremes = false,
+
+    // svg path optimizations
+    decimals = 3,
+    autoAccuracy = true,
+
     minifyD = 0,
     tolerance = 1,
     reverse = false,
 
     // svg cleanup options
+    mergePaths = false,
     removeHidden = true,
     removeUnused = true,
 
-    // return svg markup or object
-    getObject = false
-
 } = {}) {
 
     // clamp tolerance 
@@ -4000,6 +4101,17 @@ 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;
 
@@ -4046,7 +4158,7 @@ function svgPathSimplify(input = '', {
             // simplify beziers
             let { pathData, bb, dimA } = pathDataPlus;
 
-            pathData = simplifyBezier ? simplifyPathData(pathData, { simplifyBezier, keepInflections, keepExtremes, keepCorners, extrapolateDominant, revertToQuadratics, tolerance, reverse }) : pathData;
+            pathData = simplifyBezier ? simplifyPathDataCubic(pathData, { simplifyBezier, keepInflections, keepExtremes, keepCorners, extrapolateDominant, revertToQuadratics, tolerance, reverse }) : pathData;
 
             // cubic to arcs
             if (cubicToArc) {
@@ -4075,11 +4187,27 @@ function svgPathSimplify(input = '', {
                     if (type === 'C') {
 
                         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;
+                        }
                     }
                 });
             }
 
+            // optimize close path
+            if (optimizeOrder) pathData = optimizeClosePath(pathData);
+
+            // poly
+
             // update
             pathDataArrN.push(pathData);
         }
@@ -4087,64 +4215,76 @@ function svgPathSimplify(input = '', {
         // 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 {
 
-        // optimize
-        let pathOptions = {
-            toRelative,
-            toShorthands,
-            decimals,
-        };
+            /**
+             * detect accuracy
+             */
+            if (autoAccuracy) {
+                decimals = detectAccuracy(pathData);
+            }
 
-        // optimize path data
-        pathData = convertPathData(pathData, pathOptions);
+            // optimize path data
+            pathData = convertPathData(pathData, pathOptions);
 
-        // remove zero-length segments introduced by rounding
-        let pathDataOpt = [];
+            // remove zero-length segments introduced by rounding
+            pathData = removeZeroLengthLinetos_post(pathData);
 
-        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);
-            }
-        });
+            // compare command count
+            let comCountS = pathData.length;
 
-        pathData = pathDataOpt;
+            let dOpt = pathDataToD(pathData, minifyD);
+            svgSizeOpt = new Blob([dOpt]).size;
+            compression = +(100 / svgSize * (svgSizeOpt)).toFixed(2);
 
-        // compare command count
-        let comCountS = pathData.length;
+            path.d = dOpt;
+            path.report = {
+                original: comCount,
+                new: comCountS,
+                saved: comCount - comCountS,
+                compression,
+                decimals,
 
-        let dOpt = pathDataToD(pathData, minifyD);
-        svgSizeOpt = new Blob([dOpt]).size;
+            };
 
-        compression = +(100 / svgSize * (svgSizeOpt)).toFixed(2);
+            // apply new path for svgs
+            if (el) el.setAttribute('d', dOpt);
+        }
+    });
 
-        path.d = dOpt;
-        path.report = {
-            original: comCount,
-            new: comCountS,
-            saved: comCount - comCountS,
-            compression,
-            decimals,
+    /**
+     *  stringify new SVG
+     */
+    if (mode) {
 
-        };
+        if (pathData_merged.length) {
+            // optimize path data
+            let pathData = convertPathData(pathData_merged, pathOptions);
 
-        // apply new path for svgs
-        if (el) el.setAttribute('d', dOpt);
+            // remove zero-length segments introduced by rounding
+            pathData = removeZeroLengthLinetos_post(pathData);
 
-    });
+            let dOpt = pathDataToD(pathData, minifyD);
 
-    // stringify new SVG
-    if (mode) {
-        svg = new XMLSerializer().serializeToString(svg);
+            // 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);
+        }
+
+        svg = stringifySVG(svg);
         svgSizeOpt = new Blob([svg]).size;
 
         compression = +(100 / svgSize * (svgSizeOpt)).toFixed(2);
@@ -4166,7 +4306,7 @@ function svgPathSimplify(input = '', {
 
 }
 
-function simplifyPathData(pathData, {
+function simplifyPathDataCubic(pathData, {
     keepExtremes = true,
     keepInflections = true,
     keepCorners = true,
@@ -4210,6 +4350,8 @@ function simplifyPathData(pathData, {
                 if (combined.length === 1) {
                     com = combined[0];
                     let offset = 1;
+
+                    // add cumulative error to prevent distortions
                     error += com.error;
 
                     // find next candidates
@@ -4227,6 +4369,9 @@ function simplifyPathData(pathData, {
 
                         let combined = combineCubicPairs(com, comN, extrapolateDominant, tolerance);
                         if (combined.length === 1) {
+                            // add cumulative error to prevent distortions
+
+                            error += combined[0].error * 0.5;
                             offset++;
                         }
                         com = combined[0];
@@ -4258,39 +4403,6 @@ function simplifyPathData(pathData, {
     return pathDataN
 }
 
-/**
- * get viewBox 
- * either from explicit attribute or
- * width and height attributes
- */
-
-function getViewBox(svg = null, round = false) {
-
-    // browser default
-    if (!svg) return { x: 0, y: 0, width: 300, height: 150 }
-
-    let style = window.getComputedStyle(svg);
-
-    // the baseVal API method also converts physical units to pixels/user-units
-    let w = svg.hasAttribute('width') ? svg.width.baseVal.value : parseFloat(style.width) || 300;
-    let h = svg.hasAttribute('height') ? svg.height.baseVal.value : parseFloat(style.height) || 150;
-
-    let viewBox = svg.getAttribute('viewBox') ? svg.viewBox.baseVal : { x: 0, y: 0, width: w, height: h };
-
-    // remove SVG constructor
-    let { x, y, width, height } = viewBox;
-    viewBox = { x, y, width, height };
-
-    // round to integers
-    if (round) {
-        for (let prop in viewBox) {
-            viewBox[prop] = Math.ceil(viewBox[prop]);
-        }
-    }
-
-    return viewBox
-}
-
 const {
     abs, acos, asin, atan, atan2, ceil, cos, exp, floor,
     log, hypot, max, min, pow, random, round, sin, sqrt, tan, PI
@@ -4301,8 +4413,7 @@ const {
 // IIFE 
 if (typeof window !== 'undefined') {
     window.svgPathSimplify = svgPathSimplify;
-    window.getViewBox = getViewBox;
-    window.renderPoint = renderPoint;
+
 }
 
-export { PI, abs, acos, asin, atan, atan2, ceil, cos, exp, floor, getViewBox, hypot, log, max, min, pow, random, round, sin, sqrt, svgPathSimplify, tan };
+export { PI, abs, acos, asin, atan, atan2, ceil, cos, exp, floor, hypot, log, max, min, pow, random, round, sin, sqrt, svgPathSimplify, tan };