svg-path-simplify 0.4.3 → 0.4.4

package/src/pathData_simplify_cubic.js

@@ -143,10 +143,10 @@ export function combineCubicPairs(com1, com2, {
     let comS = getExtrapolatedCommand(com1, com2, t)
 
     // test new point-at-t against original mid segment starting point
-    let pt = pointAtT([comS.p0, comS.cp1, comS.cp2, comS.p], t)
+    let ptI = pointAtT([comS.p0, comS.cp1, comS.cp2, comS.p], t)
 
 
-    let dist0 = getDistManhattan(com1.p, pt)
+    let dist0 = getDistManhattan(com1.p, ptI)
     let dist1 = 0, dist2 = 0;
     let close = dist0 < maxDist;
     let success = false;
@@ -162,32 +162,42 @@ export function combineCubicPairs(com1, com2, {
          * to prevent distortions
          */
 
-        // 2nd segment mid
-        let pt_2 = pointAtT([com2.p0, com2.cp1, com2.cp2, com2.p], 0.5)
+        // 1st segment mid
+        let ptM_seg1 = pointAtT([com1.p0, com1.cp1, com1.cp2, com1.p], 0.5)
+
+        let t2 = t * 0.5;
+        // combined interpolated mid point
+        let ptI_seg1 = pointAtT([comS.p0, comS.cp1, comS.cp2, comS.p], t2)
+        dist1 = getDistManhattan(ptM_seg1, ptI_seg1)
 
-        // simplified path
-        let t3 = (1 + t) * 0.5;
-        let ptS_2 = pointAtT([comS.p0, comS.cp1, comS.cp2, comS.p], t3)
-        dist1 = getDistManhattan(pt_2, ptS_2)
 
         error += dist1;
 
         if (dist1 < maxDist) {
 
-            //renderPoint(markers, pt_2, 'magenta')
-            //renderPoint(markers, ptS_2, 'green', '0.5%')
-
-            // 1st segment mid
-            let pt_1 = pointAtT([com1.p0, com1.cp1, com1.cp2, com1.p], 0.5)
+            // 2nd segment mid
+            let ptM_seg2 = pointAtT([com2.p0, com2.cp1, com2.cp2, com2.p], 0.5)
 
-            let t2 = t * 0.5;
-            let ptS_1 = pointAtT([comS.p0, comS.cp1, comS.cp2, comS.p], t2)
-            dist2 = getDistManhattan(pt_1, ptS_1)
+            // simplified path
+            let t3 = (1 + t) * 0.5;
+            let ptI_seg2 = pointAtT([comS.p0, comS.cp1, comS.cp2, comS.p], t3)
+            dist2 = getDistManhattan(ptM_seg2, ptI_seg2)
 
             error += dist2;
 
             if (error < maxDist) success = true;
 
+
+            /*
+            renderPoint(markers, ptM_seg1, 'cyan')
+            renderPoint(markers, pt, 'orange', '1.5%', '1')
+            renderPoint(markers, ptM_seg2, 'orange')
+
+            renderPoint(markers, com1.p, 'green')
+            //renderPoint(markers, com2.p, 'green')
+            renderPoint(markers, ptI_seg1, 'purple')
+            */
+
         }
 
     } // end 1st try

package/src/pathData_simplify_revertToquadratics.js

@@ -6,7 +6,6 @@ export function pathDataRevertCubicToQuadratic(pathData, tolerance=1) {
         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, tolerance)
             if (comQ.type === 'Q') {
                 comQ.extreme = com.extreme

package/src/pathSimplify-main.js

@@ -1,6 +1,6 @@
 import { detectInputType } from './detect_input';
 import { simplifyPathDataCubic } from './pathData_simplify_cubic';
-import { getDistManhattan, getDistance, getPathDataVertices, interpolate, pointAtT, reducePoints, svgArcToCenterParam, toParametricAngle } from './svgii/geometry';
+import { getDistManhattan, getDistance, getPathDataVertices, getSquareDistance, interpolate, pointAtT, reducePoints, svgArcToCenterParam, toParametricAngle } from './svgii/geometry';
 import { getPolyBBox } from './svgii/geometry_bbox';
 import { analyzePathData, getPathDataVerbose } from './svgii/pathData_analyze';
 import { normalizePathData, parsePathDataNormalized, convertPathData } from './svgii/pathData_convert';
@@ -16,7 +16,7 @@ import { detectAccuracy, roundPathData, roundTo } from './svgii/rounding';
 import { refineAdjacentExtremes } from './svgii/pathData_simplify_refineExtremes';
 import { cleanUpSVG, removeEmptySVGEls } from './svgii/svg_cleanup';
 import { refineRoundedCorners } from './svgii/pathData_simplify_refineCorners';
-import { refineRoundSegments } from './svgii/pathData_refine_round';
+import { refineRoundSegments, simplifyAdjacentRound } from './svgii/pathData_simplify_refine_round';
 import { refineClosingCommand } from './svgii/pathData_remove_short';
 import { scalePathData } from './svgii/pathData_transform_scale';
 import { getViewBox } from './svg_getViewbox';
@@ -32,7 +32,7 @@ import { normalizePoly, polyPtsToArray } from './svgii/poly_normalize';
 import { simplifyPolyRD } from './simplify_poly_radial_distance';
 import { simplifyPolyRDP, simplifyPolyRDP__, simplifyRDP_rel } from './simplify_poly_RDP';
 import { getEllipseLengthLG, getLegendreGaussValues, getLength, waArr_global } from './svgii/geometry_length';
-import { deg2rad } from './constants';
+import { deg2rad, dummySVG } from './constants';
 import { getPathDataLength } from './svgii/pathData_getLength';
 import { stringifySVG } from './string_helpers';
 import { presetSettings, settingsDefaults } from './pathSimplify-presets';
@@ -55,21 +55,54 @@ export function svgPathSimplify(input = '', settings = {}) {
     }
 
 
-    let { getObject = false, removeComments, removeOffCanvas, unGroup, mergePaths, removeElements, removeDimensions, removeIds, removeClassNames, omitNamespace, cleanUpStrokes, addViewBox, addDimensions, removePrologue, removeHidden, removeUnused, cleanupDefs, cleanupClip, cleanupSVGAtts, removeNameSpaced, removeNameSpacedAtts, attributesToGroup, minifyRgbColors, stylesToAttributes, fixHref, legacyHref, allowMeta, allowDataAtts, allowAriaAtts, convertPathLength, removeSVGAttributes, removeElAttributes, shapesToPaths, shapeConvert, convertShapes, simplifyBezier, optimizeOrder, autoClose, removeZeroLength, refineClosing, removeColinear, flatBezierToLinetos, revertToQuadratics, refineExtremes, simplifyCorners, fixDirections, keepExtremes, keepCorners, keepInflections, addExtremes, reversePath, toAbsolute, toRelative, toMixed, toShorthands, toLonghands, quadraticToCubic, arcToCubic, cubicToArc, lineToCubic, decimals, autoAccuracy, minifyD, tolerance, toPolygon, smoothPoly, polyFormat, precisionPoly, simplifyRD, simplifyRDP, harmonizeCpts, removeOrphanSubpaths, simplifyRound, scale, scaleTo, crop, alignToOrigin, convertTransforms, keepSmaller, splitCompound } = settings;
+    let { getObject = false, removeComments, removeOffCanvas, unGroup, mergePaths, removeElements, removeDimensions, removeIds, removeClassNames, omitNamespace, cleanUpStrokes, addViewBox, addDimensions, removePrologue, removeHidden, removeUnused, cleanupDefs, cleanupClip, cleanupSVGAtts, removeNameSpaced, removeNameSpacedAtts, attributesToGroup, minifyRgbColors, stylesToAttributes, fixHref, legacyHref, allowMeta, allowDataAtts, allowAriaAtts, removeSVGAttributes, removeElAttributes, shapesToPaths, shapeConvert, convertShapes, simplifyBezier, optimizeOrder, autoClose, removeZeroLength, refineClosing, removeColinear, flatBezierToLinetos, revertToQuadratics, refineExtremes, simplifyCorners, fixDirections, keepExtremes, keepCorners, keepInflections, addExtremes, reversePath, toAbsolute, toRelative, toMixed, toShorthands, toLonghands, quadraticToCubic, arcToCubic, cubicToArc, lineToCubic, decimals, autoAccuracy, minifyD, tolerance, toPolygon, smoothPoly, polyFormat, precisionPoly, simplifyRD, simplifyRDP, harmonizeCpts, removeOrphanSubpaths, simplifyRound, simplifyQuadraticCorners, scale, scaleTo, crop, alignToOrigin, convertTransforms, keepSmaller, splitCompound, convertPathLength, toAbsoluteUnits } = settings;
 
     //toAbsolute = !toRelative;
 
     // clamp tolerance and scale
     tolerance = Math.max(0.1, tolerance);
     scale = Math.max(0.001, scale)
-    if(fixDirections) keepSmaller = false;
+    if (fixDirections) keepSmaller = false;
     if (scale !== 1 || scaleTo || crop || alignToOrigin) {
         convertTransforms = true;
         settings.convertTransforms = true
     }
 
 
-    let inputType = detectInputType(input);
+    /**
+     * intercept 
+     * invalid inputs
+     */
+
+    let inputDetection = detectInputType(input);
+    let { inputType, log } = inputDetection
+
+    // invalid file
+    if (inputType === 'invalid' || input === dummySVG) {
+        // return dummy SVG to continue processing
+        //input = dummySVG;
+        //inputType = 'invalid';
+
+        //console.warn(`Input is not valid!\n  ${log}`);
+        //console.log(input);
+        //return false
+
+        let report = {
+            original: 0,
+            new: 0,
+            saved: 0,
+            svgSize:0,
+            svgSizeOpt:0,
+            compression:0,
+            decimals:0,
+            invalid:true
+        }
+
+        return { svg: dummySVG, d: '', polys: [], report, pathDataPlusArr: [], pathDataPlusArr_global: [], inputType: 'invalid', dOriginal: '' };
+
+    }
+
+
     let svg = '';
     let svgSize = 0;
     let svgSizeOpt = 0;
@@ -81,12 +114,12 @@ export function svgPathSimplify(input = '', settings = {}) {
 
     // pathdata superset array - containing additional data
     let pathDataPlusArr_global = []
-    let paths = []
+    let paths = [];
     let isPoly = false;
-    let polys = []
-    let poly = []
+    let polys = [];
+    let poly = [];
     let dStr = '';
-    let dOriginal = ''
+    let dOriginal = '';
 
     /**
      * normalize input
@@ -204,10 +237,7 @@ export function svgPathSimplify(input = '', settings = {}) {
         // convert all shapes to paths
         if (shapesToPaths) {
             shapeConvert = 'toPaths'
-            convert_rects = true
-            convert_ellipses = true
-            convert_poly = true
-            convert_lines = true
+            convertShapes = ['rect', 'polygon', 'polyline', 'line', 'circle', 'ellipse']
         }
 
         //console.log('shapesToPaths', shapesToPaths, 'shapeConvert', shapeConvert, convert_rects, convert_ellipses, convert_poly);
@@ -255,6 +285,9 @@ export function svgPathSimplify(input = '', settings = {}) {
     }
     //console.log('pathOptions', pathOptions);
 
+    let comCount = 0
+    let comCountS = 0
+
 
     for (let i = 0, l = paths.length; l && i < l; i++) {
 
@@ -306,7 +339,7 @@ export function svgPathSimplify(input = '', settings = {}) {
         }
 
         // count commands for evaluation
-        let comCount = pathData.length
+        comCount += pathData.length
 
         if (!isPoly && removeOrphanSubpaths) pathData = removeOrphanedM(pathData);
 
@@ -463,7 +496,6 @@ export function svgPathSimplify(input = '', settings = {}) {
 
 
 
-
             // simplify beziers
             let { pathData, bb, dimA } = pathDataPlus;
 
@@ -498,12 +530,14 @@ export function svgPathSimplify(input = '', settings = {}) {
                 //pathData = removeZeroLengthLinetos(pathData);
 
                 let threshold = (bb.width + bb.height) * 0.1
-                pathData = refineRoundedCorners(pathData, { threshold, tolerance })
+                pathData = refineRoundedCorners(pathData, { threshold, tolerance, simplifyQuadraticCorners })
             }
 
             // refine round segment sequences
-            if (simplifyRound) pathData = refineRoundSegments(pathData);
-
+            if (simplifyRound) {
+                pathData = refineRoundSegments(pathData);
+                pathData = simplifyAdjacentRound(pathData);
+            }
 
             // simplify to quadratics
             if (revertToQuadratics) pathData = pathDataRevertCubicToQuadratic(pathData, tolerance);
@@ -550,7 +584,25 @@ export function svgPathSimplify(input = '', settings = {}) {
 
         // prefer top to bottom priority for portrait aspect ratios 
         if (optimizeOrder) {
+            /*
             pathDataPlusArr = isPortrait ? pathDataPlusArr.sort((a, b) => a.bb.y - b.bb.y || a.bb.x - b.bb.x) : pathDataPlusArr.sort((a, b) => a.bb.x - b.bb.x || a.bb.y - b.bb.y)
+            */
+
+            // add  missin bbox
+            pathDataPlusArr.forEach(p => {
+                if (p.bb.x === undefined) {
+                    p.bb = getPolyBBox(getPathDataVertices(p.pathData))
+                }
+            })
+
+            try {
+                pathDataPlusArr = pathDataPlusArr.sort((a, b) => +a.bb.x.toFixed(2) - (+b.bb.x.toFixed(2)) || a.bb.y - b.bb.y);
+                //console.log(pathDataPlusArr);
+
+            } catch {
+            }
+
+
         }
 
 
@@ -623,7 +675,7 @@ export function svgPathSimplify(input = '', settings = {}) {
 
 
         // compare command count
-        let comCountS = pathData.length
+        comCountS += pathData.length
 
         let dOpt = pathDataToD(pathData, minifyD)
         //svgSizeOpt = new Blob([dOpt]).size;
@@ -706,6 +758,9 @@ export function svgPathSimplify(input = '', settings = {}) {
 
 
         report = {
+            original: comCount,
+            new: comCountS,
+            saved: comCount - comCountS,
             svgSize,
             svgSizeOpt,
             compression,

package/src/pathSimplify-only-pathdata.js

@@ -13,10 +13,11 @@ import { pathDataToD } from './svgii/pathData_stringify';
 import { detectAccuracy } from './svgii/rounding';
 import { refineAdjacentExtremes } from './svgii/pathData_simplify_refineExtremes';
 import { refineRoundedCorners } from './svgii/pathData_simplify_refineCorners';
-import { refineRoundSegments } from './svgii/pathData_refine_round';
+//import { refineRoundSegments } from './svgii/pathData_refine_round';
 import { refineClosingCommand } from './svgii/pathData_remove_short';
 import { pathDataRevertCubicToQuadratic } from './pathData_simplify_revertToquadratics';
 import { pathDataLineToCubic } from './svgii/pathData_line_to_cubic';
+import { refineRoundSegments } from './svgii/pathData_simplify_refine_round';
 
 //import { installDOMPolyfills } from './dom-polyfill';
 
@@ -97,7 +98,11 @@ export function simplifyPathData(input = '', {
     let yArr = []
 
     // mode:0 – single path
-    let inputType = detectInputType(input)
+    //let inputType = detectInputType(input)
+    let inputDetection = detectInputType(input);
+    let {inputType, log} = inputDetection
+
+
     if (inputType === 'pathDataString') {
         d = input
     } else if (inputType === 'polyString') {

package/src/pathSimplify-presets.js

@@ -30,6 +30,7 @@ export let settingsDefaults = {
     allowAriaAtts: true,
     //pathlength conversion
     convertPathLength: false,
+    toAbsoluteUnits: false,
 
     // custom removal
     removeElements: [],
@@ -61,6 +62,7 @@ export let settingsDefaults = {
     revertToQuadratics: true,
     refineExtremes: false,
     simplifyCorners: false,
+    simplifyQuadraticCorners: false,
     keepExtremes: true,
     keepCorners: true,
     keepInflections: false,
@@ -121,7 +123,7 @@ for (let prop in settingsDefaults) {
     let isArray = Array.isArray(val)
 
     if (isBoolean) val = false
-    else if (!isArray && isNum) val = val===1 ? 1 : (prop==='decimals'? -1 : 0);
+    else if (!isArray && isNum) val = val === 1 ? 1 : (prop === 'decimals' ? -1 : 0);
     else if (isArray) val = []
     settingsNull[prop] = val;
 }
@@ -153,10 +155,14 @@ export const presetSettings = {
         ...settingsDefaults,
         ...{
             keepSmaller: false,
+            convertPathLength:true,
             toRelative: true,
             toMixed: true,
             toShorthands: true,
             //fixHref: true,
+            allowMeta:true,
+            allowDataAtts:true,
+            allowAriaAtts:true,
             legacyHref: true,
             addViewBox: true,
             addDimensions: true,
@@ -224,19 +230,24 @@ export const presetSettings = {
     high: {
         ...settingsDefaults,
         ...{
-            tolerance: 1.2,
+            tolerance: 1.1,
             toMixed: true,
             refineExtremes: true,
             simplifyCorners: true,
+            simplifyQuadraticCorners: true,
+            removeOrphanSubpaths: true,
             simplifyRound: true,
             removeClassNames: true,
             cubicToArc: true,
+            minifyD: 0,
             removeComments: true,
             removeHidden: true,
-            removeOffCanvas: true,
             addViewBox: true,
             removeDimensions: true,
-            minifyD: 0
+            removeOffCanvas: true,
+
+            /*
+            */
         }
     }
 

package/src/svg-getAttributes.js

@@ -1,11 +1,13 @@
 import { normalizeUnits } from "./svgii/convert_units";
 
 export function getElementAtts(el, {x=0, y=0, width=0, height=0}={}){
-    let attributes = [...el.attributes];
+    //let attributes = [...el.attributes];
+    let attributes = [...el.attributes].map(att=>att.name);
 
     let atts={};
     attributes.forEach(att=>{
-        let value = normalizeUnits(att.nodeValue, {x, y, width, height});   
+        //let value = normalizeUnits(att.nodeValue, {x, y, width, height});   
+        let value = normalizeUnits(el.getAttribute(att), {x, y, width, height});   
         atts[att.name] = value
     })
 

package/src/svgii/convert_units.js

@@ -94,7 +94,7 @@ export function normalizeUnits(value = null, {
                 scale = height / 100;
             }
             else {
-                scale = normalizedDiagonal ? scaleRoot / 100 : 1;
+                scale = normalizedDiagonal ? scaleRoot / 100 :  width / 100;
             }
             break;
 

package/src/svgii/geometry.js

@@ -321,6 +321,7 @@ export function pointAtT(pts, t = 0.5, getTangent = false, getCpts = false, retu
             let t1 = 1 - t;
 
             // cubic beziers
+            /*
             if (isCubic) {
                 pt = {
                     x:
@@ -336,11 +337,30 @@ export function pointAtT(pts, t = 0.5, getTangent = false, getCpts = false, retu
                 };
 
             }
+            */
+
+            if (isCubic) {
+                pt = {
+                    x:
+                        t1 * t1 * t1 * p0.x +
+                        3 * t1 * t1 * t * cp1.x +
+                        3 * t1 * t * t * cp2.x +
+                        t * t * t * p.x,
+                    y:
+                        t1 * t1 * t1 * p0.y +
+                        3 * t1 * t1 * t * cp1.y +
+                        3 * t1 * t * t * cp2.y +
+                        t * t * t * p.y,
+                };
+
+            }
+
+
             // quadratic beziers
             else {
                 pt = {
-                    x: t1 * t1 * p0.x + 2 * t1 * t * cp1.x + t ** 2 * p.x,
-                    y: t1 * t1 * p0.y + 2 * t1 * t * cp1.y + t ** 2 * p.y,
+                    x: t1 * t1 * p0.x + 2 * t1 * t * cp1.x + t * t * p.x,
+                    y: t1 * t1 * p0.y + 2 * t1 * t * cp1.y + t * t * p.y,
                 };
             }
 
@@ -963,6 +983,124 @@ export function getBezierExtremeT(pts, { addExtremes = true, addSemiExtremes = f
  * https://stackoverflow.com/questions/87734/#75031511
  * See also: https://github.com/foo123/Geometrize
  */
+
+export function getArcExtemesParam({
+    cx=0, cy=0, rx=0, ry=0,
+    p=null,
+    p0=null,
+    endAngle=0,
+    deltaAngle=0,
+
+
+}={}) {
+    // compute point on ellipse from angle around ellipse (theta)
+    const arc = (theta, cx, cy, rx, ry, alpha) => {
+        // theta is angle in radians around arc
+        // alpha is angle of rotation of ellipse in radians
+        var cos = Math.cos(alpha),
+            sin = Math.sin(alpha),
+            x = rx * Math.cos(theta),
+            y = ry * Math.sin(theta);
+
+        return {
+            x: cx + cos * x - sin * y,
+            y: cy + sin * x + cos * y
+        };
+    }
+
+    //parametrize arcto data
+    //let arcData = svgArcToCenterParam(p0.x, p0.y, values[0], values[1], values[2], values[3], values[4], values[5], values[6]);
+    //let { rx, ry, cx, cy, endAngle, deltaAngle } = arcData;
+
+    // arc rotation
+    let deg = values[2];
+
+    // final on path point
+    //let p = { x: values[5], y: values[6] }
+
+    // collect extreme points – add end point
+    let extremes = [p]
+
+    // rotation to radians
+    let alpha = deg * Math.PI / 180;
+    let tan = Math.tan(alpha),
+        p1, p2, p3, p4, theta;
+
+    /**
+    * find min/max from zeroes of directional derivative along x and y
+    * along x axis
+    */
+    theta = Math.atan2(-ry * tan, rx);
+
+    let angle1 = theta;
+    let angle2 = theta + Math.PI;
+    let angle3 = Math.atan2(ry, rx * tan);
+    let angle4 = angle3 + Math.PI;
+
+
+    // inner bounding box
+    let xArr = [p0.x, p.x]
+    let yArr = [p0.y, p.y]
+    let xMin = Math.min(...xArr)
+    let xMax = Math.max(...xArr)
+    let yMin = Math.min(...yArr)
+    let yMax = Math.max(...yArr)
+
+
+    // on path point close after start
+    let angleAfterStart = endAngle - deltaAngle * 0.001
+    let pP2 = arc(angleAfterStart, cx, cy, rx, ry, alpha);
+
+    // on path point close before end
+    let angleBeforeEnd = endAngle - deltaAngle * 0.999
+    let pP3 = arc(angleBeforeEnd, cx, cy, rx, ry, alpha);
+
+
+    /**
+     * expected extremes
+     * if leaving inner bounding box
+     * (between segment start and end point)
+     * otherwise exclude elliptic extreme points
+    */
+
+    // right
+    if (pP2.x > xMax || pP3.x > xMax) {
+        // get point for this theta
+        p1 = arc(angle1, cx, cy, rx, ry, alpha);
+        extremes.push(p1)
+    }
+
+    // left
+    if (pP2.x < xMin || pP3.x < xMin) {
+        // get anti-symmetric point
+        p2 = arc(angle2, cx, cy, rx, ry, alpha);
+        extremes.push(p2)
+    }
+
+    // top
+    if (pP2.y < yMin || pP3.y < yMin) {
+        // get anti-symmetric point
+        p4 = arc(angle4, cx, cy, rx, ry, alpha);
+        extremes.push(p4)
+    }
+
+    // bottom
+    if (pP2.y > yMax || pP3.y > yMax) {
+        // get point for this theta
+        p3 = arc(angle3, cx, cy, rx, ry, alpha);
+        extremes.push(p3)
+    }
+
+    return extremes;
+}
+
+
+
+
+
+
+
+
 export function getArcExtemes(p0, values) {
     // compute point on ellipse from angle around ellipse (theta)
     const arc = (theta, cx, cy, rx, ry, alpha) => {

package/src/svgii/geometry_bbox_element.js

@@ -12,7 +12,7 @@ export function getElBBox(el){
 
     switch(type){
         case 'path':
-            let pathData = parsePathDataNormalized(atts.d)
+            let pathData = parsePathDataNormalized(el.getAttribute('d'))
             bb=getPolyBBox(getPathDataPoly(pathData))
 
         break;