svg-path-simplify 0.4.4 → 0.4.6

package/src/simplify_poly_RC.js

@@ -2,12 +2,34 @@ import { getSquareDistance, reducePoints } from "./svgii/geometry";
 import { getPolygonArea } from "./svgii/geometry_area";
 import { getPolyBBox } from "./svgii/geometry_bbox";
 
-export function simplifyRC(pts, quality = 1, shiftStart = true) {
-
-    if (pts.length < 4) return pts;
 
+export function removeCoincidingVertices(pts = []) {
     let l = pts.length;
+    if (!l) return pts;
+
+    let ptsN = [pts[0]];
+    let pt1, pt2;
+
+    for (let i = 1; i < l; i++) {
+        pt1 = pts[i - 1];
+        pt2 = pts[i];
+
+        /**
+         * 1. Skip zero-length segments
+         */
+        if (pt1.x === pt2.x && pt1.y === pt2.y) {
+            continue;
+        }
+        ptsN.push(pt2)
+    }
+    return ptsN
+
+}
 
+export function simplifyRC(pts = [], quality = 1, shiftStart = true) {
+
+    let l = pts.length;
+    if (l < 4) return pts;
 
     // starting point
     let M = pts[0];
@@ -72,7 +94,7 @@ export function simplifyRC(pts, quality = 1, shiftStart = true) {
         let thresh = getSquareDistance(pt0, pt2) * 0.005;
 
         // flat
-        if ( area <= thresh && i<l-1) {
+        if (area <= thresh && i < l - 1) {
             //console.log(area, thresh, pt0, pt1, pt2, i);
             pt0 = pt1;
             continue
@@ -93,10 +115,10 @@ export function simplifyRC(pts, quality = 1, shiftStart = true) {
     }
 
     // 1st and last are colinear
-    let area0 = getPolygonArea([ptsSmp[1], M, ptsSmp[ptsSmp.length-1]], true)
-    let thresh0 = getSquareDistance (ptsSmp[1], ptsSmp[ptsSmp.length-1]) * 0.005
+    let area0 = getPolygonArea([ptsSmp[1], M, ptsSmp[ptsSmp.length - 1]], true)
+    let thresh0 = getSquareDistance(ptsSmp[1], ptsSmp[ptsSmp.length - 1]) * 0.005
     // remove first point
-    if(area0 < thresh0) ptsSmp.shift()
+    if (area0 < thresh0) ptsSmp.shift()
 
     return ptsSmp;
 }

package/src/svg-getAttributes.js

@@ -8,7 +8,7 @@ export function getElementAtts(el, {x=0, y=0, width=0, height=0}={}){
     attributes.forEach(att=>{
         //let value = normalizeUnits(att.nodeValue, {x, y, width, height});   
         let value = normalizeUnits(el.getAttribute(att), {x, y, width, height});   
-        atts[att.name] = value
+        atts[att] = value
     })
 
     return atts

package/src/svgii/geometry.js

@@ -17,14 +17,26 @@ export const {
 
 // get angle helper
 export function getAngle(p1, p2, normalize = false) {
-    let angle = atan2(p2.y - p1.y, p2.x - p1.x);
+    let angle = Math.atan2(p2.y - p1.y, p2.x - p1.x);
     // normalize negative angles
     if (normalize && angle < 0) angle += Math.PI * 2
     return angle
 }
 
+export function getAngleFromDelta(dx, dy, normalize = false) {
+    let angle = Math.atan2(dy, dx);
+    // normalize negative angles
+    if (normalize && angle < 0) angle += Math.PI * 2
+    return angle
+}
 
 
+export function getPerpendicularPoint(A, B, C) {
+    let dx = C.x - A.x;
+    let dy = C.y - A.y;
+    let t = ((B.x - A.x) * dx + (B.y - A.y) * dy) / (dx * dx + dy * dy);
+    return { x: A.x + dx * t, y: A.y + dy * t };
+}
 
 
 
@@ -117,6 +129,60 @@ export function getDeltaAngle(centerPoint, startPoint, endPoint, largeArc = fals
 
 
 
+  /**
+   * Returns an array of intersection points.
+   * 0 points: No intersection
+   * 1 point: Line is tangent
+   * 2 points: Line is a secant
+   */
+  export function lineCircleIntersection(p1 = {x: 0,y: 0}, p2 = {x: 0,y: 0}, centroid = {x: 0,y: 0}, r = 1, exact = true, ignoreStartAndEnd=true
+  ) {
+    let error = 1e-8;
+    r *= 1 + error
+    let [x1, y1] = [p1.x, p1.y];
+    let [x2, y2] = [p2.x, p2.y];
+    let [cx, cy] = [centroid.x, centroid.y];
+    let dx = x2 - x1;
+    let dy = y2 - y1;
+    let a = dx * dx + dy * dy;
+    let b = 2 * (dx * (x1 - cx) + dy * (y1 - cy));
+    let c = (x1 - cx) * (x1 - cx) + (y1 - cy) * (y1 - cy) - r * r;
+    let discriminant = b * b - 4 * a * c;
+    let intersections = [];
+    // No intersection
+    if (discriminant < 0) {
+      return [];
+    } else {
+      
+      let t1 = (-b + Math.sqrt(discriminant)) / (2 * a);
+      let t2 = (-b - Math.sqrt(discriminant)) / (2 * a);
+      // Sort t values to maintain drawing direction order
+      let tValues = [t1, t2].sort((a, b) => a - b);
+      
+      let tMin = ignoreStartAndEnd ? 0.01 : 0;
+      let tMax = ignoreStartAndEnd ? 0.99 : 1;
+
+      tValues.forEach(t => {
+        //let onSegment = !exact ? true : t >= 0 && t <= 1;
+        let onSegment = !exact ? true : t > tMin && t < tMax;
+        if (onSegment) {
+          let pt = {
+            x: x1 + t * dx,
+            y: y1 + t * dy,
+            t: t
+          }
+          
+          intersections.push(pt);
+        }
+      });
+    }
+    /*
+    intersections.forEach(pt => {
+      renderPoint(svg, pt, 'green', '1.5%')
+    })
+     */
+    return intersections;
+  }
 
 
 
@@ -164,10 +230,14 @@ export function checkLineIntersection(p1 = null, p2 = null, p3 = null, p4 = null
     a = numerator1 / denominator;
     b = numerator2 / denominator;
 
+    //console.log('denominator', denominator, a, b);
+
     // if we cast these lines infinitely in both directions, they intersect here:
     intersectionPoint = {
         x: p1.x + (a * (p2.x - p1.x)),
-        y: p1.y + (a * (p2.y - p1.y))
+        y: p1.y + (a * (p2.y - p1.y)),
+        t1: a,
+        t2: b
     }
 
     let intersection = false;
@@ -277,13 +347,13 @@ export function pointAtT(pts, t = 0.5, getTangent = false, getCpts = false, retu
             if (t === 0 && !shortCp1) {
                 pt.x = p0.x;
                 pt.y = p0.y;
-                pt.angle = getAngle(p0, cp1)
+                if (getTangent) pt.angle = getAngle(p0, cp1);
             }
 
             else if (t === 1 && !shortCp2) {
                 pt.x = p.x;
                 pt.y = p.y;
-                pt.angle = getAngle(cp2, p)
+                if (getTangent) pt.angle = getAngle(cp2, p);
             }
 
             else {
@@ -300,18 +370,39 @@ export function pointAtT(pts, t = 0.5, getTangent = false, getCpts = false, retu
                     pt = interpolate(m3, m4, t);
 
                     // add angles
-                    pt.angle = getAngle(m3, m4)
+                    if (getTangent) pt.angle = getAngle(m3, m4);
+
+                    /*
+                    renderPoint(markers, m0, 'cyan')
+                    renderPoint(markers, m3, 'magenta')
+                    renderPoint(markers, pt, 'green')
+                    renderPoint(markers, m4, 'cyan')
+                    renderPoint(markers, m2, 'magenta')
+                    */
+
 
                     // add control points
-                    if (getCpts) pt.cpts = [m1, m2, m3, m4];
+                    if (getCpts) {
+                        pt.cpts = [m1, m2, m3, m4];
+                        pt.segments = [
+                            { p0, cp1: m0, cp2: m3, p: pt },
+                            { p0: pt, cp1: m4, cp2: m2, p }
+                        ]
+                    }
                 } else {
                     m1 = interpolate(p0, cp1, t);
                     m2 = interpolate(cp1, p, t);
                     pt = interpolate(m1, m2, t);
-                    pt.angle = getAngle(m1, m2);
+                    if (getTangent) pt.angle = getAngle(m1, m2);
 
                     // add control points
-                    if (getCpts) pt.cpts = [m1, m2];
+                    if (getCpts) {
+                        pt.cpts = [m1, m2];
+                        pt.segments = [
+                            { p0, cp1: m1, p: pt },
+                            { p0: p, cp1: m2, p }
+                        ]
+                    }
                 }
             }
 
@@ -401,7 +492,7 @@ export function pointAtT(pts, t = 0.5, getTangent = false, getCpts = false, retu
  * get vertices from path command final on-path points
  */
 
-export function getPathDataVertices(pathData=[], includeCpts = false, decimals = -1) {
+export function getPathDataVertices(pathData = [], includeCpts = false, decimals = -1) {
     let polyPoints = [];
     //console.log(pathData);
 
@@ -459,6 +550,8 @@ export function getPathDataVertices(pathData) {
 export function svgArcToCenterParam(x1, y1, rx, ry, xAxisRotation, largeArc, sweep, x2, y2, normalize = true
 ) {
 
+    //console.log('params', [x1, y1, rx, ry, xAxisRotation, largeArc, sweep, x2, y2]);
+
     // helper for angle calculation
     const getAngle = (cx, cy, x, y, normalize = true) => {
         let angle = Math.atan2(y - cy, x - cx);
@@ -494,7 +587,8 @@ export function svgArcToCenterParam(x1, y1, rx, ry, xAxisRotation, largeArc, swe
 
     if (rx == 0 || ry == 0) {
         // invalid arguments
-        throw Error("rx and ry can not be 0");
+        console.warn("rx and ry can not be 0");
+        return arcData
     }
 
 
@@ -508,10 +602,10 @@ export function svgArcToCenterParam(x1, y1, rx, ry, xAxisRotation, largeArc, swe
     let s_phi = !phi ? 0 : Math.sin(phi);
     let c_phi = !phi ? 1 : Math.cos(phi);
 
-    let hd_x = (x1 - x2) / 2;
-    let hd_y = (y1 - y2) / 2;
-    let hs_x = (x1 + x2) / 2;
-    let hs_y = (y1 + y2) / 2;
+    let hd_x = (x1 - x2) * 0.5;
+    let hd_y = (y1 - y2) * 0.5;
+    let hs_x = (x1 + x2) * 0.5;
+    let hs_y = (y1 + y2) * 0.5;
 
     // F6.5.1
     let x1_ = !phi ? hd_x : c_phi * hd_x + s_phi * hd_y;
@@ -533,10 +627,11 @@ export function svgArcToCenterParam(x1, y1, rx, ry, xAxisRotation, largeArc, swe
     let rxry = rx * ry;
     let rxy1_ = rx * y1_;
     let ryx1_ = ry * x1_;
-    let sum_of_sq = rxy1_ ** 2 + ryx1_ ** 2; // sum of square
+    let sum_of_sq = rxy1_ * rxy1_ + ryx1_ * ryx1_; // sum of square
     if (!sum_of_sq) {
-        //console.log('error:', rx, ry, rxy1_, ryx1_);
-        throw Error("start point can not be same as end point");
+        console.warn("start point can not be same as end point");
+        return arcData
+
     }
     let coe = Math.sqrt(Math.abs((rxry * rxry - sum_of_sq) / sum_of_sq));
     if (largeArc === sweep) {
@@ -973,7 +1068,11 @@ export function getSemiExtremesT(p0, cp1, cp2, p, angleRad = Math.PI / 2) {
 
 export function getBezierExtremeT(pts, { addExtremes = true, addSemiExtremes = false } = {}) {
     let tArr = pts.length === 4 ? cubicBezierExtremeT(pts[0], pts[1], pts[2], pts[3], { addExtremes, addSemiExtremes }) : quadraticBezierExtremeT(pts[0], pts[1], pts[2], { addExtremes, addSemiExtremes });
-    return tArr;
+    if (tArr.length) {
+        tArr = tArr.map(t => +t.toFixed(9)).sort();
+    }
+
+    return tArr
 }
 
 
@@ -985,14 +1084,14 @@ export function getBezierExtremeT(pts, { addExtremes = true, addSemiExtremes = f
  */
 
 export function getArcExtemesParam({
-    cx=0, cy=0, rx=0, ry=0,
-    p=null,
-    p0=null,
-    endAngle=0,
-    deltaAngle=0,
+    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
@@ -1602,16 +1701,19 @@ export function intersectLines(p1, p2, p3, p4) {
  * pythagorean theorem
  */
 export function getDistance(p1, p2, isArray = false) {
-    //if(Array.isArray(p1)) isArray = true;
 
-    //console.log(p1, p2);
     let dx = isArray ? p2[0] - p1[0] : (p2.x - p1.x);
     let dy = isArray ? p2[1] - p1[1] : (p2.y - p1.y);
 
-    //console.log('dx', dx, dy, p1, p2);
+    /*
+    let sqrt2 = 1.4142135623730951 
+    return dx===dy ? Math.abs(dx) * sqrt2 : Math.sqrt(dx * dx + dy * dy);
+    */
+
     return Math.sqrt(dx * dx + dy * dy);
 }
 
+
 // just an alias
 export function lineLength(p1, p2) {
     return getDistance(p1, p2)
@@ -1632,6 +1734,7 @@ export function getSquareDistance(p1, p2) {
  * sloppy but fast
  */
 export function getDistManhattan(pt1, pt2) {
+    //console.log(pt1, pt2);
     let dx = Math.abs(pt2.x - pt1.x);
     let dy = Math.abs(pt2.y - pt1.y);
     return dx + dy;

package/src/svgii/geometry_bbox.js

@@ -218,7 +218,7 @@ export function getPathDataBBox(pathData) {
         }
     }
 
-    let bbox = { x: xMin, y: yMin, width: xMax - xMin, height: yMax - yMin }
+    let bbox = { x: xMin, y: yMin, right: xMax, width: xMax - xMin, bottom: yMax, height: yMax - yMin }
     return bbox
 }
 

package/src/svgii/geometry_length.js

@@ -111,7 +111,7 @@ export function getLength(pts, {
 
 // LG weight/abscissae generator
 export function getLegendreGaussValues(n, x1 = -1, x2 = 1) {
-    console.log('add new LG', n);
+    //console.log('add new LG', n);
 
     let waArr = []
     let z1, z, xm, xl, pp, p3, p2, p1;

package/src/svgii/pathData_analyze.js

@@ -21,7 +21,7 @@ export function analyzePathData(pathData = [], {
     detectDirection = true,
     detectSemiExtremes = false,
     debug = false,
-    addSquareLength = true,
+    addSquareLength = false,
     addArea = true,
 
 } = {}) {
@@ -87,7 +87,8 @@ export function analyzePathData(pathData = [], {
         // check flatness of command
         let toleranceFlat = 0.01;
         let thresholdLength = dimA * 0.1
-        let threshold = thresholdLength * 0.01
+        //let threshold = thresholdLength * 0.01
+        let threshold = dimA * 0.005
         let areaThresh = squareDist * toleranceFlat;
         let isFlat = Math.abs(cptArea) < areaThresh;
 
@@ -105,7 +106,7 @@ export function analyzePathData(pathData = [], {
         let hasExtremes = false;
 
         //!isFlat &&
-        if (isBezier) {
+        if (detectExtremes && isBezier) {
 
 
             let dx = type === 'C' ? Math.abs(com.cp2.x - com.p.x) : Math.abs(com.cp1.x - com.p.x)
@@ -116,7 +117,6 @@ export function analyzePathData(pathData = [], {
             let horizontal = (dy === 0 || dy <= threshold) && dx > 0
             let vertical = (dx === 0 || dx <= threshold) && dy > 0
 
-
             if (horizontal || vertical) {
                 hasExtremes = true;
             }
@@ -152,7 +152,7 @@ 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'))  ){
+        else if(detectExtremes && 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)
@@ -170,29 +170,7 @@ export function analyzePathData(pathData = [], {
         if (hasExtremes) com.extreme = true
 
         // Corners and semi extremes 
-        if (isBezier && isBezierN) {
-
-            // semi extremes
-            if (detectSemiExtremes && !com.extreme) {
-
-                let dx1 = Math.abs(p.x - cp2.x)
-                let dy1 = Math.abs(p.y - cp2.y)
-                let hasSemiExtreme = false;
-
-                // exclude extremes or small deltas
-                if (dx1 && dy1 && dx1 > thresholdLength || dy1 > thresholdLength) {
-                    let ang1 = getAngle(cp2, p)
-                    let ang2 = getAngle(p, comN.cp1)
-
-                    let ang3 = Math.abs(ang1 + ang2) / 2
-                    hasSemiExtreme = isMultipleOf45(ang3)
-                }
-
-                if (hasSemiExtreme) {
-                    com.semiExtreme = true;
-                }
-            }
-
+        if (detectCorners && isBezier && isBezierN) {
 
             /**
              * Detect direction change points

package/src/svgii/pathData_convert.js

@@ -10,7 +10,7 @@ import { renderPoint, renderPath } from "./visualize";
 */
 
 
-import { checkLineIntersection, getAngle, getDeltaAngle, getDistance, getDistAv, getDistManhattan, getSquareDistance, interpolate, pointAtT, rotatePoint, toParametricAngle } from './geometry';
+import { checkLineIntersection, getAngle, getDeltaAngle, getDistance, getDistAv, getDistManhattan, getSquareDistance, interpolate, pointAtT, rotatePoint, svgArcToCenterParam, toParametricAngle } from './geometry';
 import { getPathArea, getPolygonArea, getRelativeAreaDiff } from './geometry_area';
 import { parsePathDataString } from './pathData_parse';
 import { pathDataToD } from './pathData_stringify';
@@ -70,7 +70,12 @@ export function convertPathData(pathData, {
 
 
     // minify semicircle radii
-    if (optimizeArcs) pathData = optimizeArcPathData(pathData);
+    if (optimizeArcs) {
+        pathData = optimizeArcPathData(pathData);
+    } else {
+        // get true absolute radii
+        pathData = pathDataToTrueArcValues(pathData);
+    }
 
 
     //if(decimals>-1 && decimals<2) pathData = roundPathData(pathData, decimals);
@@ -171,9 +176,49 @@ export function parsePathDataNormalized(d,
 
 
 /**
- * 
- * @param {*} pathData 
- * @returns 
+ * Converts minified arc
+ * values to true rx and ry values
+ */
+export function pathDataToTrueArcValues(pathData = []) {
+
+    //return pathData
+
+    let remove = []
+    let l = pathData.length;
+    let pathDataN = [pathData[0]];
+
+    for (let i = 1; i < l; i++) {
+        let com = pathData[i];
+        let comPrev = pathData[i-1];
+        let { type, values } = com;
+
+
+        if (type === 'A') {
+
+            // previous commands final on-path point
+            let [x1, y1] = comPrev.values.slice(-2)
+            let [rx, ry, xAxisRotation, largeArc, sweep, x2, y2] = values;
+            let arcData = svgArcToCenterParam(x1, y1, rx, ry, xAxisRotation, largeArc, sweep, x2, y2)
+
+            // set true arc values
+            com.values[0] = arcData.rx
+            com.values[1] = arcData.ry
+            //pathDataN.push(com)
+        }
+
+        pathDataN.push(com)
+
+
+    }
+    return pathDataN;
+}
+
+
+/**
+ * Minify arc radii 
+ * for semi circles 
+ * returns smaller rx and ry 
+ * values 
  */
 
 export function optimizeArcPathData(pathData = []) {
@@ -240,7 +285,7 @@ export function optimizeArcPathData(pathData = []) {
         if (isHorizontal || isVertical) {
 
             // check if semi circle
-            let needsTrueR = isHorizontal ? rx*1.9 > diffX : ry*1.9 > diffY;
+            let needsTrueR = isHorizontal ? rx * 1.9 > diffX : ry * 1.9 > diffY;
 
             // is semicircle we can simplify rx
             if (!needsTrueR) {
@@ -1037,8 +1082,8 @@ export function arcToBezier(p0, values, splitSegments = 1) {
     let phi = rotation ? rotation * TAU / 360 : 0;
     let sinphi = phi ? Math.sin(phi) : 0
     let cosphi = phi ? Math.cos(phi) : 1
-    let pxp = cosphi * (p0.x - x) / 2 + sinphi * (p0.y - y) / 2
-    let pyp = -sinphi * (p0.x - x) / 2 + cosphi * (p0.y - y) / 2
+    let pxp = cosphi * (p0.x - x) *0.5 + sinphi * (p0.y - y) *0.5
+    let pyp = -sinphi * (p0.x - x) *0.5 + cosphi * (p0.y - y) *0.5
 
     if (pxp === 0 && pyp === 0) {
         return []
@@ -1074,8 +1119,8 @@ export function arcToBezier(p0, values, splitSegments = 1) {
 
     let centerxp = radicant ? radicant * rx / ry * pyp : 0
     let centeryp = radicant ? radicant * -ry / rx * pxp : 0
-    let centerx = cosphi * centerxp - sinphi * centeryp + (p0.x + x) / 2
-    let centery = sinphi * centerxp + cosphi * centeryp + (p0.y + y) / 2
+    let centerx = cosphi * centerxp - sinphi * centeryp + (p0.x + x) * 0.5
+    let centery = sinphi * centerxp + cosphi * centeryp + (p0.y + y) * 0.5
 
     let vx1 = (pxp - centerxp) / rx
     let vy1 = (pyp - centeryp) / ry
@@ -1097,18 +1142,20 @@ export function arcToBezier(p0, values, splitSegments = 1) {
         ang2 = vectorAngle(vx1, vy1, vx2, vy2)
 
     if (sweepFlag === 0 && ang2 > 0) {
-        ang2 -= Math.PI * 2
+        //ang2 -= Math.PI * 2
+        ang2 -= TAU
     }
     else if (sweepFlag === 1 && ang2 < 0) {
-        ang2 += Math.PI * 2
+        //ang2 += Math.PI * 2
+        ang2 += TAU
     }
 
 
     //ratio must be at least 1
-    let ratio = +(Math.abs(ang2) / (TAU / 4)).toFixed(0) || 1
+    let ratio = +(Math.abs(ang2) / (TAU * 0.25)).toFixed(0) || 1
 
 
-    // increase segments for more accureate length calculations
+    // increase segments for more accurate length calculations
     let segments = ratio * splitSegments;
     ang2 /= segments
     let pathDataArc = [];
@@ -1121,7 +1168,8 @@ export function arcToBezier(p0, values, splitSegments = 1) {
     const k = 0.551785
     let a = ang2 === angle90 ? k :
         (
-            ang2 === -angle90 ? -k : 4 / 3 * Math.tan(ang2 / 4)
+            //ang2 === -angle90 ? -k : 4 / 3 * Math.tan(ang2 / 4)
+            ang2 === -angle90 ? -k : 1.33333 * Math.tan(ang2 * 0.25)
         );
 
     let cos2 = ang2 ? Math.cos(ang2) : 1;