svg-path-simplify 0.4.3 → 0.4.5

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;

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 = [];
@@ -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;
@@ -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