svg-path-simplify 0.4.2 → 0.4.4

package/src/svgii/pathData_convert.js

@@ -17,54 +17,10 @@ import { pathDataToD } from './pathData_stringify';
 import { roundPathData } from './rounding';
 import { renderPoint } from './visualize';
 
-
-export function parsePathDataNormalized(d,
-    {
-        // necessary for most calculations
-        toAbsolute = true,
-        toLonghands = true,
-
-        // not necessary unless you need cubics only
-        quadraticToCubic = false,
-
-        // mostly a fallback if arc calculations fail      
-        arcToCubic = false,
-        // arc to cubic precision - adds more segments for better precision     
-        arcAccuracy = 4,
-    } = {}
-) {
-
-    // is already array
-    let isArray = Array.isArray(d);
-
-    // normalize native pathData to regular array
-    let hasConstructor = isArray && typeof d[0] === 'object' && typeof d[0].constructor === 'function'
-    /*
-    if (hasConstructor) {
-        d = d.map(com => { return { type: com.type, values: com.values } })
-        console.log('hasConstructor', hasConstructor, (typeof d[0].constructor), d);
-    }
-    */
-
-    let pathDataObj = isArray ? d : parsePathDataString(d);
-
-    let { hasRelatives = true, hasShorthands = true, hasQuadratics = true, hasArcs = true } = pathDataObj;
-    let pathData = hasConstructor ? pathDataObj : pathDataObj.pathData;
-
-    //console.log('???quadraticToCubic', quadraticToCubic);
-
-    // normalize
-    pathData = normalizePathData(pathData,
-        {
-            toAbsolute, toLonghands, quadraticToCubic, arcToCubic, arcAccuracy,
-            hasRelatives, hasShorthands, hasQuadratics, hasArcs
-        },
-    )
-
-    return pathData;
-}
-
-
+/**
+ * wrapper function for 
+ * all path data conversion
+ */
 export function convertPathData(pathData, {
     toShorthands = true,
     toLonghands = false,
@@ -80,6 +36,7 @@ export function convertPathData(pathData, {
     hasShorthands = true,
     hasQuadratics = true,
     hasArcs = true,
+    isPoly = false,
     optimizeArcs = true,
     testTypes = false
 
@@ -103,7 +60,9 @@ export function convertPathData(pathData, {
 
     // some params exclude each other
     toRelative = toAbsolute ? false : toRelative;
-    toShorthands = toLonghands ? false : toShorthands
+    //toAbsolute = !toRelative ? true : toAbsolute;
+    toShorthands = toLonghands ? false : toShorthands;
+    //toLonghands = !toShorthands ? true : toLonghands;
 
 
     if (toAbsolute) pathData = pathDataToAbsolute(pathData);
@@ -117,28 +76,31 @@ export function convertPathData(pathData, {
     //if(decimals>-1 && decimals<2) pathData = roundPathData(pathData, decimals);
     if (toShorthands) pathData = pathDataToShorthands(pathData);
 
+    //console.log('hasArcs', hasArcs,  arcToCubic, pathData);
     if (hasArcs && arcToCubic) pathData = pathDataArcsToCubics(pathData)
 
     //console.log(toShorthands, toRelative, decimals);
     if (hasQuadratics && quadraticToCubic) pathData = pathDataQuadraticToCubic(pathData);
 
-    if(toMixed) toRelative = true
+    if (toMixed) toRelative = true
 
     // pre round - before relative conversion to minimize distortions
     if (decimals > -1 && toRelative) pathData = roundPathData(pathData, decimals);
 
     // clone absolute pathdata
-    if(toMixed){
+    if (toMixed) {
         pathDataAbs = JSON.parse(JSON.stringify(pathData))
     }
 
     if (toRelative) pathData = pathDataToRelative(pathData);
+
+    // final rounding
     if (decimals > -1) pathData = roundPathData(pathData, decimals);
 
 
     // choose most compact commands: relative or absolute
-    if(toMixed){
-        for(let i=0; i<pathData.length; i++){
+    if (toMixed) {
+        for (let i = 0; i < pathData.length; i++) {
             let com = pathData[i]
             let comA = pathDataAbs[i]
             // compare Lengths
@@ -148,7 +110,7 @@ export function convertPathData(pathData, {
             let lenR = comStr.length;
             let lenA = comStrA.length;
 
-            if(lenA<lenR){
+            if (lenA < lenR) {
                 //console.log('absolute is shorter', comStrA, comStr);
                 pathData[i] = pathDataAbs[i]
             }
@@ -158,6 +120,56 @@ export function convertPathData(pathData, {
     return pathData
 }
 
+
+
+
+export function parsePathDataNormalized(d,
+    {
+        // necessary for most calculations
+        toAbsolute = true,
+        toLonghands = true,
+
+        // not necessary unless you need cubics only
+        quadraticToCubic = false,
+
+        // mostly a fallback if arc calculations fail      
+        arcToCubic = false,
+        // arc to cubic precision - adds more segments for better precision     
+        arcAccuracy = 4,
+    } = {}
+) {
+
+    // is already array
+    let isArray = Array.isArray(d);
+
+    // normalize native pathData to regular array
+    let hasConstructor = isArray && typeof d[0] === 'object' && typeof d[0].constructor === 'function'
+    /*
+    if (hasConstructor) {
+        d = d.map(com => { return { type: com.type, values: com.values } })
+        console.log('hasConstructor', hasConstructor, (typeof d[0].constructor), d);
+    }
+    */
+
+    let pathDataObj = isArray ? d : parsePathDataString(d);
+
+    let { hasRelatives = true, hasShorthands = true, hasQuadratics = true, hasArcs = true } = pathDataObj;
+    let pathData = hasConstructor ? pathDataObj : pathDataObj.pathData;
+
+    //console.log('???quadraticToCubic', quadraticToCubic);
+
+    // normalize
+    pathData = normalizePathData(pathData,
+        {
+            toAbsolute, toLonghands, quadraticToCubic, arcToCubic, arcAccuracy,
+            hasRelatives, hasShorthands, hasQuadratics, hasArcs
+        },
+    )
+
+    return pathData;
+}
+
+
 /**
  * 
  * @param {*} pathData 
@@ -166,50 +178,100 @@ export function convertPathData(pathData, {
 
 export function optimizeArcPathData(pathData = []) {
 
-    let remove =[]
+    //return pathData
 
-    pathData.forEach((com, i) => {
+    let remove = []
+    let l = pathData.length;
+    let pathDataN = [];
+
+    for (let i = 0; i < l; i++) {
+        let com = pathData[i];
         let { type, values } = com;
-        if (type === 'A') {
-            let [rx, ry, largeArc, x, y] = [values[0], values[1], values[3], values[5], values[6]];
-            let comPrev = pathData[i - 1]
-            let [x0, y0] = [comPrev.values[comPrev.values.length - 2], comPrev.values[comPrev.values.length - 1]];
-            let M = { x: x0, y: y0 };
-            let p = { x, y };
-            //largeArc=true
-            //let pMid = {x: Math.abs(x-x0), y:Math.abs(y-y0)}
-
-            if(rx===0 || ry===0){
-                pathData[i]= null
-                remove.push(i)
-                //console.log('!!!');
-            }
 
-            // rx and ry are large enough
-            if (rx >= 1 && (x === x0 || y === y0)) {
-                let diff = Math.abs(rx - ry) / rx;
+        if (type !== 'A') {
+            pathDataN.push(com)
+            continue
+        }
 
-                // rx~==ry 
-                if (diff < 0.01) {
 
-                    // test radius against mid point
-                    let pMid = interpolate(M, p, 0.5)                    
-                    let distM = getDistance(pMid, M)
-                    let rDiff = Math.abs(distM - rx) / rx
+        let [rx, ry, largeArc, x, y] = [values[0], values[1], values[3], values[5], values[6]];
+        let comPrev = pathData[i - 1]
+        let [x0, y0] = [comPrev.values[comPrev.values.length - 2], comPrev.values[comPrev.values.length - 1]];
+        let M = { x: x0, y: y0 };
+        let p = { x, y };
+        //largeArc=true
+        //let pMid = {x: Math.abs(x-x0), y:Math.abs(y-y0)}
 
-                    // half distance between mid and start point should be ~ equal
-                    if(rDiff<0.01){
-                        pathData[i].values[0] = 1;
-                        pathData[i].values[1] = 1;
-                        pathData[i].values[2] = 0;
-                    }
-                }
+        if (rx === 0 || ry === 0) {
+            pathData[i] = null
+            remove.push(i)
+        }
+
+        // test for elliptic
+        let rat = rx / ry
+        let error = rx !== ry ? Math.abs(1 - rat) : 0
+
+        if (error > 0.01) {
+            //console.log('is elliptic');
+            pathDataN.push(com)
+            continue
+
+        }
+
+        // xAxis rotation is futile for circular arcs - reset
+        com.values[2] = 0
+
+        /**
+         * test semi circles
+         * rx and ry are large enough
+         */
+
+
+        // 1. horizontal or vertical
+        let thresh = getDistManhattan(M, p) * 0.001;
+        let diffX = Math.abs(x - x0)
+        let diffY = Math.abs(y - y0)
+
+        let isHorizontal = diffY < thresh
+        let isVertical = diffX < thresh
+
+
+        // minify rx and ry
+        if (isHorizontal || isVertical) {
+
+            // check if semi circle
+            let needsTrueR = isHorizontal ? rx*1.9 > diffX : ry*1.9 > diffY;
+
+            // is semicircle we can simplify rx
+            if (!needsTrueR) {
+                //console.log('needsTrueR', needsTrueR, diffX, rx, diffY, ry);
+                rx = rx >= 1 ? 1 : (rx > 0.5 ? 0.5 : rx);
             }
+
+            com.values[0] = rx
+            com.values[1] = rx
+            pathDataN.push(com)
+            continue
+
+
         }
-    })
 
-    if(remove.length) pathData = pathData.filter(Boolean)
-    return pathData;
+        // 2. get true radius - if rx ~= diameter/distance  we have a semicircle
+        let r = getDistance(M, p) * 0.5
+        error = rx / r
+        //console.log('rx', rx, r, error);
+
+        if (error < 0.5) {
+            rx = r >= 1 ? 1 : (r > 0.5 ? 0.5 : r);
+        }
+
+        com.values[0] = rx;
+        com.values[1] = rx;
+        pathDataN.push(com)
+
+    }
+
+    return pathDataN;
 }
 
 
@@ -277,6 +339,48 @@ export function normalizePathData(pathData = [],
 }
 */
 
+export function convertSmallArcsToLinetos(pathData) {
+
+    let l = pathData.length;
+
+    // add fist command
+    let pathDataN = [pathData[0]]
+
+    for (let i = 1; i < l; i++) {
+        let com = pathData[i];
+        let comPrev = pathData[i - 1];
+        let comN = pathData[i + 1] || null;
+
+        if (!comN) {
+            pathDataN.push(com);
+            break
+        }
+
+        let { type, values, extreme = false, p0, p, dimA = 0 } = com;
+        // for short segment detection
+        let dimAN = comN.dimA;
+        let dimA0 = comPrev.dimA + dimA + dimAN;
+        let thresh = 0.05
+        let isShort = dimA < dimA0 * thresh;
+        //let isShortN = dimAN < dimA0 * thresh;
+
+        if (type === 'A' && isShort && values[0] < 1 && values[1] < 1) {
+
+            //renderPoint(markers, p0, 'green', '0.1%')
+            //renderPoint(markers, p, 'magenta', '0.1%')
+            com.type = 'L';
+            com.values = [p.x, p.y];
+        }
+
+        pathDataN.push(com)
+
+    }
+
+
+    return pathDataN;
+
+
+}
 
 
 

package/src/svgii/pathData_fix_directions.js

@@ -10,6 +10,7 @@ import { getPolygonArea } from "./geometry_area";
 import { getPolyBBox } from "./geometry_bbox";
 import { reversePathData } from "./pathData_reverse";
 import { getPathDataPolyPrecise } from "./pathData_toPolygon";
+import { renderPoint, renderPoly } from "./visualize";
 
 export function fixPathDataDirections(pathDataArr = [], toClockwise = false) {
 
@@ -42,6 +43,7 @@ export function fixPathDataDirections(pathDataArr = [], toClockwise = false) {
             let ptMid = { x: bb.left + bb.width / 2, y: bb.top + bb.height / 2 }
             let inPoly = isPointInPolygon(ptMid, prev.pts, bb0)
 
+
             if (inPoly) {
                 polys[j].inter += 1
                 poly.includedIn.push(i)
@@ -52,29 +54,25 @@ export function fixPathDataDirections(pathDataArr = [], toClockwise = false) {
 
 
     // reverse paths
-    for (let i = 0; i < l; i++) {
+    for (let i = 0; l && i < l; i++) {
 
         let poly = polys[i]
         let { cw, includedIn, includes } = poly
 
-        // outer path direction to counter clockwise
-        if (!includedIn.length && cw && !toClockwise
-            || !includedIn.length && !cw && toClockwise
-        ) {
-            pathDataArr[i].pathData = reversePathData(pathDataArr[i].pathData);
-            polys[i].cw = polys[i].cw ? false : true
-            cw = polys[i].cw
-        }
+        let len = includes.length;
+        //console.log('try reverse', includes);
 
         // reverse inner sub paths
-        for (let j = 0; j < includes.length; j++) {
+        for (let j = 0; len && j < len; j++) {
             let ind = includes[j];
             let child = polys[ind];
 
-            if (child.cw === cw) {
-                pathDataArr[ind].pathData = reversePathData(pathDataArr[ind].pathData);
-                polys[ind].cw = polys[ind].cw ? false : true
-            }
+            // nothing to do
+            if (child.cw !== cw) continue
+
+            pathDataArr[ind].pathData = reversePathData(pathDataArr[ind].pathData);
+            polys[ind].cw = polys[ind].cw ? false : true
+
         }
     }
 

package/src/svgii/pathData_fromPoly.js

@@ -3,17 +3,17 @@ export function pathDataFromPoly(pts, closed = true) {
     let pathData = []
     let subPath = []
 
-
     // complex polygon
     if (Array.isArray(pts[0])) {
-        pts.forEach(sub => {            
+        pts.forEach(sub => {
             subPath = [
                 { type: 'M', values: [sub[0].x, sub[0].y] },
                 ...sub.slice(1).map(pt => { return { type: 'L', values: [pt.x, pt.y] } })
             ];
+            if (closed) subPath.push({ type: 'Z', values: [] })
             pathData.push(...subPath)
         })
-    }else{
+    } else {
         pathData = [
             { type: 'M', values: [pts[0].x, pts[0].y] },
             ...pts.slice(1).map(pt => { return { type: 'L', values: [pt.x, pt.y] } })

package/src/svgii/pathData_getLength.js

@@ -0,0 +1,86 @@
+import { deg2rad } from "../constants";
+import { svgArcToCenterParam, toParametricAngle } from "./geometry";
+import { getCircleArcLength, getEllipseLengthLG, getLegendreGaussValues, getLength, waArr_global } from "./geometry_length";
+import { getPathDataVerbose } from "./pathData_analyze";
+import { splitSubpaths } from "./pathData_split";
+
+
+export function getPathDataLength(pathData = []) {
+    let len = 0
+    let pathDataArr = splitSubpaths(pathData);
+
+    for (let i = 0; i < pathDataArr.length; i++) {
+        let pathData = pathDataArr[i]
+
+        // add verbose point data if not present
+        if (pathData[0].p === undefined) pathData = getPathDataVerbose(pathData);
+
+        // Calculate Legendre Gauss weight and abscissa values
+        if (!waArr_global.length) {
+            //console.log('no LG');
+            let waArr = getLegendreGaussValues(48)
+            waArr.forEach(wa => {
+                waArr_global.push(wa)
+            })
+        }
+
+        let waArr = waArr_global;
+
+        pathData.forEach(com => {
+            let { type, values, p0, p, cp1 = null, cp2 = null } = com;
+            let pts = [p0]
+            if (type === 'C' || type === 'Q') pts.push(cp1)
+            if (type === 'C') pts.push(cp2)
+            pts.push(p)
+            let comLen = 0
+
+            if (type === 'A') {
+
+                // get parametrized arc properties
+                let [largeArc, sweep] = [com.values[3], com.values[4]];
+                let arcData = svgArcToCenterParam(p0.x, p0.y, com.values[0], com.values[1], com.values[2], largeArc, sweep, p.x, p.y, false)
+                let { cx, cy, rx, ry, startAngle, endAngle, deltaAngle, xAxisRotation } = arcData
+
+                //is circle 
+                if (rx === ry) {
+                    comLen = getCircleArcLength(rx, Math.abs(deltaAngle))
+                }
+
+                // is ellipse
+                else {
+                    xAxisRotation = xAxisRotation * deg2rad;
+                    startAngle = toParametricAngle((startAngle - xAxisRotation), rx, ry)
+                    endAngle = toParametricAngle((endAngle - xAxisRotation), rx, ry)
+
+                    // recalculate parametrized delta
+                    let deltaAngle_param = endAngle - startAngle;
+
+                    let signChange = deltaAngle > 0 && deltaAngle_param < 0 || deltaAngle < 0 && deltaAngle_param > 0;
+
+                    //deltaAngle = xAxisRotation>0 ? endAngle- startAngle: deltaAngle;
+                    deltaAngle = signChange ? deltaAngle : deltaAngle_param;
+
+                    // adjust end angle
+                    if (sweep && startAngle > endAngle) {
+                        endAngle += Math.PI * 2
+                    }
+
+                    if (!sweep && startAngle < endAngle) {
+                        endAngle -= Math.PI * 2
+                    }
+                    comLen = getEllipseLengthLG(rx, ry, startAngle, endAngle, waArr)
+                }
+            }
+
+            else {
+                comLen = getLength(pts, {
+                    t: 1,
+                    waArr
+                })
+            }
+            len += comLen;
+        })
+    }
+
+    return len;
+}

package/src/svgii/pathData_parse.js

@@ -103,8 +103,10 @@ const sanitizeArc = (val='', valueIndex=0) => {
 
 
 export function parsePathDataString(d, debug = true, limit=0) {
+    if(!d) return []
     d = d.trim();
 
+
     if(limit) console.log('!!!limit', limit);
 
     let pathDataObj = {