svg-path-simplify 0.4.1 → 0.4.3

package/src/svgii/geometry.js

@@ -3,7 +3,8 @@ import {abs, acos, asin, atan, atan2, ceil, cos, exp, floor,
     log, max, min, pow, random, round, sin, sqrt, tan, PI} from '/.constants.js';
     */
 
-import { rad2Deg, root2 } from "../constants";
+import { deg2rad, rad2Deg, root2 } from "../constants";
+//import { roundTo } from "./rounding";
 //import { getPolyBBox } from "./geometry_bbox";
 import { renderPoint } from "./visualize";
 
@@ -23,6 +24,11 @@ export function getAngle(p1, p2, normalize = false) {
 }
 
 
+
+
+
+
+
 export function getDeltaAngle2(centerPoint, startPoint, endPoint, largeArc = false) {
 
     const normalizeAngle = (angle) => {
@@ -370,9 +376,40 @@ 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) {
+    let polyPoints = [];
+    //console.log(pathData);
+
+    pathData.forEach((com) => {
+        let { type, values } = com;
+
+        // get final on path point from last 2 values
+        if (values.length) {
+
+            // round
+            if (decimals > -1) values = values.map(val => +val.toFixed(decimals))
+
+            if (includeCpts) {
+
+                for (let i = 1; i < values.length; i += 2) {
+                    polyPoints.push({ x: values[i - 1], y: values[i] });
+                }
+
+            } else {
+                polyPoints.push({ x: values[values.length - 2], y: values[values.length - 1] });
+            }
+
+        }
+    });
+    return polyPoints;
+}
+
+/*
 export function getPathDataVertices(pathData) {
     let polyPoints = [];
     let p0 = { x: pathData[0].values[0], y: pathData[0].values[1] };
@@ -389,6 +426,7 @@ export function getPathDataVertices(pathData) {
     });
     return polyPoints;
 };
+*/
 
 
 
@@ -396,7 +434,148 @@ export function getPathDataVertices(pathData) {
  *  based on @cuixiping;
  *  https://stackoverflow.com/questions/9017100/calculate-center-of-svg-arc/12329083#12329083
  */
-export function svgArcToCenterParam(x1, y1, rx, ry, xAxisRotation, largeArc, sweep, x2, y2) {
+
+
+export function svgArcToCenterParam(x1, y1, rx, ry, xAxisRotation, largeArc, sweep, x2, y2, normalize = true
+) {
+
+    // helper for angle calculation
+    const getAngle = (cx, cy, x, y, normalize = true) => {
+        let angle = Math.atan2(y - cy, x - cx);
+        if (normalize && angle < 0) angle += Math.PI * 2
+        return angle
+    };
+
+    // make sure rx, ry are positive
+    rx = Math.abs(rx);
+    ry = Math.abs(ry);
+
+    // normalize xAxis rotation
+    xAxisRotation = rx === ry ? 0 : (xAxisRotation < 0 && normalize ? xAxisRotation + 360 : xAxisRotation);
+
+
+    // create data object
+    let arcData = {
+        cx: 0,
+        cy: 0,
+        // rx/ry values may be deceptive in arc commands
+        rx: rx,
+        ry: ry,
+        startAngle: 0,
+        endAngle: 0,
+        deltaAngle: 0,
+        clockwise: sweep,
+        // copy explicit arc properties
+        xAxisRotation,
+        largeArc,
+        sweep
+    };
+
+
+    if (rx == 0 || ry == 0) {
+        // invalid arguments
+        throw Error("rx and ry can not be 0");
+    }
+
+
+    /**
+     * if rx===ry x-axis rotation is ignored
+     * otherwise convert degrees to radians
+     */
+    let phi = rx === ry ? 0 : xAxisRotation * deg2rad;
+    let cx, cy
+
+    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;
+
+    // F6.5.1
+    let x1_ = !phi ? hd_x : c_phi * hd_x + s_phi * hd_y;
+    let y1_ = !phi ? hd_y : c_phi * hd_y - s_phi * hd_x;
+
+    // F.6.6 Correction of out-of-range radii
+    //   Step 3: Ensure radii are large enough
+    let lambda = (x1_ * x1_) / (rx * rx) + (y1_ * y1_) / (ry * ry);
+    if (lambda > 1) {
+        let lambdaRoot = Math.sqrt(lambda);
+        rx = rx * lambdaRoot;
+        ry = ry * lambdaRoot;
+
+        // save real rx/ry
+        arcData.rx = rx;
+        arcData.ry = ry;
+    }
+
+    let rxry = rx * ry;
+    let rxy1_ = rx * y1_;
+    let ryx1_ = ry * x1_;
+    let sum_of_sq = rxy1_ ** 2 + ryx1_ ** 2; // 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");
+    }
+    let coe = Math.sqrt(Math.abs((rxry * rxry - sum_of_sq) / sum_of_sq));
+    if (largeArc === sweep) {
+        coe = -coe;
+    }
+
+    // F6.5.2
+    let cx_ = (coe * rxy1_) / ry;
+    let cy_ = (-coe * ryx1_) / rx;
+
+    /** F6.5.3
+     * center point of ellipse
+     */
+    cx = !phi ? hs_x + cx_ : c_phi * cx_ - s_phi * cy_ + hs_x;
+    cy = !phi ? hs_y + cy_ : s_phi * cx_ + c_phi * cy_ + hs_y;
+    arcData.cy = cy;
+    arcData.cx = cx;
+
+    /** F6.5.5
+     * calculate angles between center point and
+     * commands starting and final on path point
+     */
+    let startAngle = getAngle(cx, cy, x1, y1, normalize);
+    let endAngle = getAngle(cx, cy, x2, y2, normalize);
+
+    // adjust end angle
+
+    // Adjust angles based on sweep direction
+    if (sweep) {
+        // Clockwise
+        if (endAngle < startAngle) {
+            endAngle += Math.PI * 2;
+        }
+    } else {
+        // Counterclockwise
+        if (endAngle > startAngle) {
+            endAngle -= Math.PI * 2;
+        }
+    }
+
+    let deltaAngle = endAngle - startAngle;
+
+    // The rest of your code remains the same
+    arcData.startAngle = startAngle;
+    arcData.startAngle_deg = startAngle * rad2Deg;
+    arcData.endAngle = endAngle;
+    arcData.endAngle_deg = endAngle * rad2Deg;
+    arcData.deltaAngle = deltaAngle;
+    arcData.deltaAngle_deg = deltaAngle * rad2Deg;
+
+    //console.log('arc', arcData);
+    return arcData;
+}
+
+
+
+
+
+export function svgArcToCenterParam_back(x1, y1, rx, ry, xAxisRotation, largeArc, sweep, x2, y2) {
 
     // helper for angle calculation
     const getAngle = (cx, cy, x, y) => {
@@ -1292,7 +1471,7 @@ export function getDistance(p1, p2, isArray = false) {
     let dy = isArray ? p2[1] - p1[1] : (p2.y - p1.y);
 
     //console.log('dx', dx, dy, p1, p2);
-    return sqrt(dx * dx + dy * dy);
+    return Math.sqrt(dx * dx + dy * dy);
 }
 
 // just an alias

package/src/svgii/geometry_length.js

@@ -0,0 +1,237 @@
+import { getDistance } from "./geometry";
+
+// Legendre Gauss weight and abscissa values
+export const waArr_global = [];
+
+
+
+export function getLength(pts, {
+    t = 1,
+    waArr = []
+} = {}) {
+
+
+    const cubicBezierLength = (p0, cp1, cp2, p, t = 0, wa = []) => {
+        if (t === 0) {
+            return 0;
+        }
+
+        t = t > 1 ? 1 : t < 0 ? 0 : t;
+        let t2 = t / 2;
+
+        /**
+         * set higher legendre gauss weight abscissae values 
+         * by more accurate weight/abscissae lookups 
+         * https://pomax.github.io/bezierinfo/legendre-gauss.html
+         */
+
+
+        let sum = 0;
+
+        let x0 = p0.x, y0 = p0.y, cp1x = cp1.x, cp1y = cp1.y, cp2x = cp2.x, cp2y = cp2.y, px = p.x, py = p.y;
+
+
+        for (let i = 0, len = wa.length; i < len; i++) {
+            // weight and abscissae 
+            let [w, a] = [wa[i][0], wa[i][1]];
+            let ct1_t = t2 * a;
+            let ct0 = -ct1_t + t2;
+
+            let xbase0 = base3(ct0, x0, cp1x, cp2x, px)
+            let ybase0 = base3(ct0, y0, cp1y, cp2y, py)
+
+            let comb0 = xbase0 * xbase0 + ybase0 * ybase0;
+
+            sum += w * Math.sqrt(comb0)
+
+        }
+        return t2 * sum;
+    }
+
+
+    const quadraticBezierLength = (p0, cp1, p, t, checkFlat = false) => {
+        if (t === 0) {
+            return 0;
+        }
+        // is flat/linear – treat as line
+        if (checkFlat) {
+            let l1 = getDistance(p0, cp1) + getDistance(cp1, p);
+            let l2 = getDistance(p0, p);
+            if (l1 === l2) {
+                return l2;
+            }
+        }
+
+        let a, b, c, d, e, e1, d1, v1x, v1y;
+        v1x = cp1.x * 2;
+        v1y = cp1.y * 2;
+        d = p0.x - v1x + p.x;
+        d1 = p0.y - v1y + p.y;
+        e = v1x - 2 * p0.x;
+        e1 = v1y - 2 * p0.y;
+        a = 4 * (d * d + d1 * d1);
+        b = 4 * (d * e + d1 * e1);
+        c = e * e + e1 * e1;
+
+        const bt = b / (2 * a),
+            ct = c / a,
+            ut = t + bt,
+            //k = ct - bt ** 2;
+            k = ct - bt * bt;
+
+        return (
+            (Math.sqrt(a) / 2) *
+            (ut * Math.sqrt(ut * ut + k) -
+                bt * Math.sqrt(bt * bt + k) +
+                k *
+                Math.log((ut + Math.sqrt(ut * ut + k)) / (bt + Math.sqrt(bt * bt + k))))
+        );
+    }
+
+
+    let length
+    if (pts.length === 4) {
+        length = cubicBezierLength(pts[0], pts[1], pts[2], pts[3], t, waArr)
+
+    }
+    else if (pts.length === 3) {
+        length = quadraticBezierLength(pts[0], pts[1], pts[2], t)
+    }
+    else {
+        length = getDistance(pts[0], pts[1])
+    }
+
+    return length;
+}
+
+
+
+
+
+
+// LG weight/abscissae generator
+export function getLegendreGaussValues(n, x1 = -1, x2 = 1) {
+    console.log('add new LG', n);
+
+    let waArr = []
+    let z1, z, xm, xl, pp, p3, p2, p1;
+    const m = (n + 1) >> 1;
+    xm = 0.5 * (x2 + x1);
+    xl = 0.5 * (x2 - x1);
+
+    for (let i = m - 1; i >= 0; i--) {
+        z = Math.cos((Math.PI * (i + 0.75)) / (n + 0.5));
+        do {
+            p1 = 1;
+            p2 = 0;
+            for (let j = 0; j < n; j++) {
+                //Loop up the recurrence relation to get the Legendre polynomial evaluated at z.
+                p3 = p2;
+                p2 = p1;
+                p1 = ((2 * j + 1) * z * p2 - j * p3) / (j + 1);
+            }
+
+            pp = (n * (z * p1 - p2)) / (z * z - 1);
+            z1 = z;
+            z = z1 - p1 / pp; //Newton’s method
+
+        } while (Math.abs(z - z1) > 1.0e-14);
+
+        let weight = (2 * xl) / ((1 - z * z) * pp * pp);
+        let abscissa = xm + xl * z;
+
+        waArr.push(
+            [weight, -abscissa],
+            [weight, abscissa],
+        )
+    }
+
+    return waArr;
+}
+
+
+
+
+
+export function base3(t, p1, p2, p3, p4) {
+    let t1 = -3 * p1 + 9 * p2 - 9 * p3 + 3 * p4,
+        t2 = t * t1 + 6 * p1 - 12 * p2 + 6 * p3;
+    return t * t2 - 3 * p1 + 3 * p2;
+};
+
+
+export function getPolygonLength(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 += getDistance(p1, p2)
+    }
+    if(isPoly){
+        len += getDistance(pts[l-1], pts[0])
+    }
+    return len
+}
+
+
+/**
+ * Ramanujan approximation
+ * based on: https://www.mathsisfun.com/geometry/ellipse-perimeter.html#tool
+ */
+export function getEllipseLength(rx=0, ry=0) {
+    // is circle
+    if (rx === ry) {
+        //console.log('is circle')
+        return 2 * Math.PI * rx;
+    }
+
+    let c=rx+ry
+    let d = (rx - ry) / c;
+    let h = d*d
+
+    let totalLength = Math.PI * c  * (1 + 3 * h / (10 + Math.sqrt(4 - 3 * h) ));
+    return totalLength;
+};
+
+
+
+/**
+ * ellipse helpers
+ * approximate ellipse length 
+ * by Legendre-Gauss
+ */
+
+export function getCircleArcLength(r = 0, deltaAngle = 0) {
+    if(r===0) {
+        console.warn('Radius must be positive');
+        return 0;
+    }
+    let len = 2 * Math.PI * r * (1 / 360 * Math.abs(deltaAngle * 180 / Math.PI))
+    return len
+}
+
+export function getEllipseLengthLG(rx, ry, startAngle, endAngle, wa = []) {
+
+    // Transform [-1, 1] interval to [startAngle, endAngle]
+    let halfInterval = (endAngle - startAngle) * 0.5;
+    let midpoint = (endAngle + startAngle) * 0.5;
+
+    // Arc length integral approximation
+    let arcLength = 0;
+    for (let i = 0; i < wa.length; i++) {
+        let [weight, abscissae] = wa[i];
+        let theta = midpoint + halfInterval * abscissae;
+
+        let a = rx * Math.sin(theta);
+        let b = ry * Math.cos(theta);
+        let integrand = Math.sqrt(
+            a * a + b * b
+        );
+        arcLength += weight * integrand;
+    }
+
+    return Math.abs(halfInterval * arcLength)
+}

package/src/svgii/pathData_convert.js

@@ -69,6 +69,7 @@ export function convertPathData(pathData, {
     toShorthands = true,
     toLonghands = false,
     toRelative = true,
+    toMixed = false,
     toAbsolute = false,
     decimals = 3,
     arcToCubic = false,
@@ -79,6 +80,7 @@ export function convertPathData(pathData, {
     hasShorthands = true,
     hasQuadratics = true,
     hasArcs = true,
+    isPoly = false,
     optimizeArcs = true,
     testTypes = false
 
@@ -86,6 +88,7 @@ export function convertPathData(pathData, {
 } = {}) {
 
 
+    let pathDataAbs = []
 
     // pathdata properties - test= true adds a manual test 
     if (testTypes) {
@@ -101,7 +104,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);
@@ -115,19 +120,45 @@ 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
 
     // pre round - before relative conversion to minimize distortions
     if (decimals > -1 && toRelative) pathData = roundPathData(pathData, decimals);
 
+    // clone absolute pathdata
+    if(toMixed){
+        pathDataAbs = JSON.parse(JSON.stringify(pathData))
+    }
 
     if (toRelative) pathData = pathDataToRelative(pathData);
     if (decimals > -1) pathData = roundPathData(pathData, decimals);
 
+
+    // choose most compact commands: relative or absolute
+    if(toMixed){
+        for(let i=0; i<pathData.length; i++){
+            let com = pathData[i]
+            let comA = pathDataAbs[i]
+            // compare Lengths
+            let comStr = [com.type, com.values.join(' ')].join('').replaceAll(' -', '-').replaceAll(' 0.', ' .')
+            let comStrA = [comA.type, comA.values.join(' ')].join('').replaceAll(' -', '-').replaceAll(' 0.', ' .')
+
+            let lenR = comStr.length;
+            let lenA = comStrA.length;
+
+            if(lenA<lenR){
+                //console.log('absolute is shorter', comStrA, comStr);
+                pathData[i] = pathDataAbs[i]
+            }
+        }
+    }
+
     return pathData
 }
 
@@ -138,6 +169,9 @@ export function convertPathData(pathData, {
  */
 
 export function optimizeArcPathData(pathData = []) {
+
+    let remove =[]
+
     pathData.forEach((com, i) => {
         let { type, values } = com;
         if (type === 'A') {
@@ -149,6 +183,12 @@ export function optimizeArcPathData(pathData = []) {
             //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;
@@ -171,6 +211,8 @@ export function optimizeArcPathData(pathData = []) {
             }
         }
     })
+
+    if(remove.length) pathData = pathData.filter(Boolean)
     return pathData;
 }
 

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)
@@ -61,9 +63,12 @@ export function fixPathDataDirections(pathDataArr = [], toClockwise = false) {
         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
+
         }
 
         // reverse inner sub paths
@@ -72,6 +77,7 @@ export function fixPathDataDirections(pathDataArr = [], toClockwise = false) {
             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
             }

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] } })