svg-path-simplify 0.4.3 → 0.4.4

package/src/svgii/geometry_deduceRadius.js

@@ -1,42 +1,92 @@
-import { getDeltaAngle, getDistance } from "./geometry";
+import { checkLineIntersection, getDeltaAngle, getDistance, getDistManhattan, getSquareDistance } from "./geometry";
+import { renderPoint } from "./visualize";
+//import { arcToBezierResolved } from "./pathData_convert";
+//import { renderPoint, renderPoly } from "./visualize";
 
-export function getArcFromPoly(pts) {
+export function getArcFromPoly(pts, precise = false) {
     if (pts.length < 3) return false
 
     // Pick 3 well-spaced points
-    let  p1 = pts[0];
-    let  p2 = pts[Math.floor(pts.length / 2)];
-    let  p3 = pts[pts.length - 1];
+    let len = pts.length
+    let idx1 = Math.floor(len * 0.333)
+    let idx2 = Math.floor(len * 0.666)
+    let idx3 = Math.floor(len * 0.5)
 
-    let  x1 = p1.x, y1 = p1.y;
-    let  x2 = p2.x, y2 = p2.y;
-    let  x3 = p3.x, y3 = p3.y;
 
-    let  a = x1 - x2;
-    let  b = y1 - y2;
-    let  c = x1 - x3;
-    let  d = y1 - y3;
+    let p1 = pts[0];
+    let p2 = pts[idx3];
+    let p3 = pts[len - 1];
 
-    let  e = ((x1 * x1 - x2 * x2) + (y1 * y1 - y2 * y2)) / 2;
-    let  f = ((x1 * x1 - x3 * x3) + (y1 * y1 - y3 * y3)) / 2;
+    // Radius (use start point)
+    let pts1 = [p1, p2, p3];
+    let centroid = getPolyArcCentroid(pts1);
 
-    let  det = a * d - b * c;
+    let r = 0, deltaAngle = 0, startAngle = 0, endAngle = 0, angleData = {};
 
-    if (Math.abs(det) < 1e-10) {
-        console.warn("Points are collinear or numerically unstable");
-        return false;
-    }
 
-    // find center of arc
-    let  cx = (d * e - b * f) / det;
-    let  cy = (-c * e + a * f) / det;
-    let  centroid = { x: cx, y: cy };
+    // check if radii are consistent
+    if (precise) {
+
+
+        /**
+         * check multiple centroids
+         * if the polyline can be expressed as 
+         * an arc - all centroids should be close
+         */
+
+        if (len > 3) {
+            let centroid1 = getPolyArcCentroid([p1, pts[idx1], p3]);
+            let centroid2 = getPolyArcCentroid([p1, pts[idx2], p3]);
+
+            if (!centroid1 || !centroid2) return false;
+
+            //let dist0 = getDistManhattan(p1, p3)
+            let dist0 = getDistManhattan(centroid, p2)
+            let dist1 = getDistManhattan(centroid, centroid1)
+            let dist2 = getDistManhattan(centroid, centroid2)
+            let errorCentroid = (dist1 + dist2)
+
+            // centroids diverging too much 
+            if (errorCentroid > dist0 * 0.05) {
+                //renderPoint(markers, centroid, 'magenta')
+                return false
+            }
+
+        }
+
+        let rSqMid = getSquareDistance(centroid, p2);
+
+        //check if radii are close enough 
+        for (let i = 0; i < len; i++) {
+            let pt = pts[i]
+            let rSq = getSquareDistance(centroid, pt);
+            let error = Math.abs(rSqMid - rSq) / rSqMid
+
+            if (error > 0.0025) {
+                /*
+                console.log('error', error, len, idx1, idx2, idx3);
+                renderPoint(markers, centroid, 'orange')
+                renderPoint(markers, p1, 'green')
+                renderPoint(markers, p2)
+                renderPoint(markers, p3, 'purple')
+                */
+                return false;
+            }
+        }
+
+        // calculate proper radius
+        r = Math.sqrt(rSqMid);
+        angleData = getDeltaAngle(centroid, p1, p3);
+        ({ deltaAngle, startAngle, endAngle } = angleData);
+
+
+    } else {
+        r = getDistance(centroid, p1);
+        angleData = getDeltaAngle(centroid, p1, p3);
+        ({ deltaAngle, startAngle, endAngle } = angleData);
+    }
 
-    // Radius (use start point)
-    let  r = getDistance(centroid, p1);
 
-    let angleData = getDeltaAngle(centroid, p1, p3)
-    let {deltaAngle, startAngle, endAngle} = angleData;
 
     return {
         centroid,
@@ -48,3 +98,42 @@ export function getArcFromPoly(pts) {
 }
 
 
+
+export function getPolyArcCentroid(pts = []) {
+
+    pts = pts.filter(pt => pt !== undefined);
+    if (pts.length < 3) return false
+    //console.log(pts);
+
+    let p1 = pts[0];
+    let p2 = pts[Math.floor(pts.length / 2)];
+    let p3 = pts[pts.length - 1];
+
+    let x1 = p1.x, y1 = p1.y;
+    let x2 = p2.x, y2 = p2.y;
+    let x3 = p3.x, y3 = p3.y;
+
+    let a = x1 - x2;
+    let b = y1 - y2;
+    let c = x1 - x3;
+    let d = y1 - y3;
+
+    let e = ((x1 * x1 - x2 * x2) + (y1 * y1 - y2 * y2)) / 2;
+    let f = ((x1 * x1 - x3 * x3) + (y1 * y1 - y3 * y3)) / 2;
+
+    let det = a * d - b * c;
+
+    // colinear points
+    if (Math.abs(det) < 1e-10) {
+        return false;
+    }
+
+    // find center of arc
+    let cx = (d * e - b * f) / det;
+    let cy = (-c * e + a * f) / det;
+    let centroid = { x: cx, y: cy };
+    return centroid
+}
+
+
+

package/src/svgii/geometry_length.js

@@ -1,4 +1,4 @@
-import { getDistance } from "./geometry";
+import { getDistance, getDistManhattan } from "./geometry";
 
 // Legendre Gauss weight and abscissa values
 export const waArr_global = [];
@@ -176,6 +176,22 @@ export function getPolygonLength(pts=[], isPoly=false){
     return len
 }
 
+export function getPolygonLengthManhattan(pts=[], isPoly=false){
+
+    let len = 0;
+    let l=pts.length;
+
+    for(let i=1; i<l; i++){
+        let p1 = pts[i-1]
+        let p2 = pts[i]
+        len += getDistManhattan(p1, p2)
+    }
+    if(isPoly){
+        len += getDistManhattan(pts[l-1], pts[0])
+    }
+    return len
+}
+
 
 /**
  * Ramanujan approximation

package/src/svgii/pathData_analyze.js

@@ -67,6 +67,7 @@ export function analyzePathData(pathData = [], {
         let { type, values, p0, p, cp1 = null, cp2 = null, squareDist = 0, cptArea = 0, dimA = 0 } = com;
 
         //next command
+        let comPrev = pathData[c-2];
         let comN = pathData[c] || null;
 
 
@@ -93,6 +94,7 @@ export function analyzePathData(pathData = [], {
 
         // bezier types
         let isBezier = type === 'Q' || type === 'C';
+        let isArc = type === 'A';
         let isBezierN = comN && (comN.type === 'Q' || comN.type === 'C');
 
 
@@ -149,6 +151,22 @@ export function analyzePathData(pathData = [], {
             }
         }
 
+        // check extremes introduce by small arcs
+        else if(isArc && comN && ((comPrev.type==='C' || comPrev.type==='Q') || (comN.type==='C' || comN.type==='Q'))  ){
+            let distN = comN ? comN.dimA : 0
+            let isShort = com.dimA < (comPrev.dimA + distN) * 0.1;
+            let smallRadius = com.values[0] === com.values[1] && (com.values[0] < 1)
+
+            if(isShort && smallRadius){
+                let bb = getPolyBBox([comPrev.p0, comN.p])
+                if(p.x>bb.right || p.x<bb.x || p.y<bb.y || p.y>bb.bottom){
+                    hasExtremes = true;
+                    //renderPoint(markers, p)
+                }
+            }
+
+        }
+
         if (hasExtremes) com.extreme = true
 
         // Corners and semi extremes 

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,
@@ -126,23 +82,25 @@ export function convertPathData(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
@@ -152,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]
             }
@@ -162,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 
@@ -170,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;
 }
 
 
@@ -281,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

@@ -54,33 +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
-        ) {
-            //console.log('reverse outer');
-
-            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) {
-                //console.log('reverse', 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
+
         }
     }