svg-path-simplify 0.4.2 → 0.4.4

package/src/svgii/pathData_split_to_groups.js

@@ -0,0 +1,168 @@
+import { svgNs } from "../constants";
+import { getPathDataVertices, isPointInPolygon } from "./geometry";
+import { checkBBoxIntersections, getPolyBBox } from "./geometry_bbox";
+import { convertPathData } from "./pathData_convert";
+import { pathDataToD } from "./pathData_stringify";
+import { roundTo } from "./rounding";
+import { renderPoint } from "./visualize";
+
+export function splitCompundGroups(pathDataPlusArr = [], {
+    toRelative = true,
+    toShorthands = true,
+    minifyD = 0,
+    decimals = 3,
+    addDimensions = false
+} = {}) {
+
+    //console.log('???pathDataPlusArr', pathDataPlusArr);
+    let pathDataSplit = [];
+    pathDataPlusArr = JSON.parse(JSON.stringify(pathDataPlusArr))
+    let len = pathDataPlusArr.length;
+
+    //let bb0 = 
+    let xArr = [];
+    let yArr = []
+
+    // refine bbox and add cpt polygon
+    for (let i = 0; i < len; i++) {
+        let sub = pathDataPlusArr[i]
+        let { pathData, bb } = sub
+
+        // console.log(bb);
+        // include control points for better overlapping approximation
+        //let poly = getPathDataVertices(pathData, true);
+        //let bb2 = getPolyBBox(poly);
+
+        if (bb.width && bb.height) {
+        } else {
+            let poly = getPathDataVertices(pathData, true);
+            bb = getPolyBBox(poly);
+            pathDataPlusArr[i].bb = bb;
+            //console.log(bb, sub);
+        }
+
+        xArr.push(bb.left, bb.right)
+        yArr.push(bb.top, bb.bottom)
+        sub.includes = []
+    }
+
+
+    /**
+     * check overlapping 
+     * sub paths
+     */
+    for (let i = 0, l = pathDataPlusArr.length; i < l; i++) {
+        let sub1 = pathDataPlusArr[i];
+        let { bb, poly } = sub1;
+
+        for (let j = 0; j < l; j++) {
+
+            let sub1 = pathDataPlusArr[j];
+            if (i === j) continue;
+
+            //let [bb1, poly1] = [sub1.bb, sub1.poly];
+            let bb1 = sub1.bb;
+            //let poly1 = sub1.poly
+
+            // test sample on-path points
+            let ptM = { x: bb1.x + bb1.width * 0.5, y: bb1.y + bb1.height * 0.5 };
+
+
+            let inPoly = false;
+            if (ptM.x >= bb.x && ptM.y >= bb.y && ptM.x <= bb.right && ptM.y <= bb.bottom) {
+                inPoly = true;
+                pathDataPlusArr[i].includes.push(j);
+            }
+
+        }
+    }
+
+
+    /**
+     * combine overlapping 
+     * compound paths
+     */
+    for (let i = 0, l = pathDataPlusArr.length; i < l; i++) {
+        let sub = pathDataPlusArr[i];
+        let { includes } = sub;
+
+        includes.forEach(s => {
+            let pathData = pathDataPlusArr[s].pathData;
+            if (pathData.length) {
+                pathDataPlusArr[i].pathData.push(...pathData);
+                pathDataPlusArr[s].pathData = [];
+            }
+        });
+    }
+
+    // remove empty els due to grouping
+    pathDataPlusArr = pathDataPlusArr.filter(sub => sub.pathData.length);
+
+    // try to find row left to right order
+    //pathDataPlusArr = pathDataPlusArr.sort((a, b) => ((a.bb.x + a.bb.y * 3) - (b.bb.x + b.bb.y * 3)))
+    //pathDataPlusArr = pathDataPlusArr.sort((a, b) => ((a.bb.x + a.bb.y * 2) - (b.bb.x + b.bb.y * 2)))
+    pathDataPlusArr = pathDataPlusArr.sort((a, b) => ((a.bb.x ) - (b.bb.x)))
+
+    // create SVG
+    let x = Math.min(...xArr);
+    let y = Math.min(...yArr);
+    let right = Math.max(...xArr);
+    let bottom = Math.max(...yArr);
+    let width = right - x;
+    let height = bottom - y;
+
+    [x, y, width, height] = [x, y, width, height].map(val => roundTo(val, decimals));
+
+    let dimensionAtts = addDimensions ? `width="${width}" height="${height}"` : ''
+    let svgSplit = `<svg ${dimensionAtts} viewBox="${x} ${y} ${width} ${height}" xmlns="${svgNs}">`;
+
+    pathDataPlusArr.forEach(sub => {
+        let { pathData } = sub;
+
+        pathData = convertPathData(pathData, { toRelative, toShorthands, decimals });
+        let d = pathDataToD(pathData, minifyD);
+        svgSplit += `<path d="${d}"/>`;
+
+    });
+
+    svgSplit += '</svg>';
+
+    let splitObj = { pathData: pathDataPlusArr, svg: svgSplit }
+    //console.log('splitObj', splitObj);
+    return splitObj
+
+}
+
+
+/*
+function checkBBoxIntersections2(bb, bb1) {
+    let [x, y, width, height, right, bottom] = [
+        bb.x,
+        bb.y,
+        bb.width,
+        bb.height,
+        bb.x + bb.width,
+        bb.y + bb.height
+    ];
+    let [x1, y1, width1, height1, right1, bottom1] = [
+        bb1.x,
+        bb1.y,
+        bb1.width,
+        bb1.height,
+        bb1.x + bb1.width,
+        bb1.y + bb1.height
+    ];
+    let intersects = false;
+    //console.log('bb', bb, bb1);
+    //console.log();
+
+    if (x < x1 && right > right1 && y < y1 && bottom > bottom1) {
+        intersects = true;
+    }
+
+    console.log('???', intersects, 'dims', width, height, '2', width1, height1);
+
+
+    return intersects;
+}
+*/

package/src/svgii/pathData_stringify.js

@@ -4,22 +4,24 @@
 * d attribute string 
 */
 
-export function pathDataToD(pathData, optimize = 0) {
-
-    optimize = parseFloat(optimize)
-
-
+export function pathDataToD(pathData, mode = 0) {
+
+    mode = parseFloat(mode)
+    /*
+    0 = max minification
+    0.5 = safe
+    1 = verbose
+    2 = beautify
+    */
     let len = pathData.length;
-    let beautify = optimize > 1;
-    let minify = beautify || optimize ? false : true;
 
-
-    let d = '';
     let valsString = pathData[0].values.join(" ");
-    let separator_command = beautify ? `\n` : (minify ? '' : ' ');
-    let separator_type = !minify ? ' ' : '';
+    let separator_command = mode > 1 ? `\n` :
+        ((mode < 1) ? '' : ' ');
+    let separator_type = mode > 0.5 ? ' ' : '';
 
-    d = `${pathData[0].type}${separator_type}${valsString}${separator_command}`;
+    // 1st command
+    let d = `${pathData[0].type}${separator_type}${valsString}${separator_command}`;
 
 
     for (let i = 1; i < len; i++) {
@@ -29,7 +31,7 @@ export function pathDataToD(pathData, optimize = 0) {
         valsString = '';
 
         // Minify Arc commands (A/a) – actually sucks!
-        if (minify && (type === 'A' || type === 'a')) {
+        if (!mode && (type === 'A' || type === 'a')) {
             values = [
                 values[0], values[1], values[2],
                 `${values[3]}${values[4]}${values[5]}`,
@@ -38,16 +40,15 @@ export function pathDataToD(pathData, optimize = 0) {
         }
 
         // Omit type for repeated commands
-        type = (minify && com0.type === com.type && com.type.toLowerCase() !== 'm')
+        type = ((mode < 1) && com0.type === com.type && com.type.toLowerCase() !== 'm')
             ? " "
-            : (minify && com0.type === "M" && com.type === "L"
+            : ((mode < 1) && com0.type === "M" && com.type === "L"
                 ? " "
                 : com.type);
 
 
         // concatenate subsequent floating point values
-        if (minify) {
-
+        if (!mode) {
 
             let prevWasFloat = false;
 
@@ -67,71 +68,32 @@ export function pathDataToD(pathData, optimize = 0) {
                 if (v > 0 && !(prevWasFloat && isSmallFloat)) {
                     valsString += ' ';
                 }
-                //console.log(isSmallFloat, prevWasFloat, valStr);
 
                 valsString += valStr
                 prevWasFloat = isSmallFloat;
             }
 
-            //console.log('minify', valsString);
-            d += `${type}${separator_type}${valsString}${separator_command}`;
-
         }
         // regular non-minified output
         else {
-            d += `${type}${separator_type}${values.join(' ')}${separator_command}`;
+            valsString = values.join(' ')
         }
+
+        if(i===len-1) separator_command=''
+        d += `${type}${separator_type}${valsString}${separator_command}`;
     }
 
-    if (minify) {
+
+    if (mode < 1) {
         d = d
             .replace(/[A-Za-z]0(?=\.)/g, m => m[0])
             .replace(/ 0\./g, " .") // Space before small decimals
             .replace(/ -/g, "-")     // Remove space before negatives
             .replace(/-0\./g, "-.")  // Remove leading zero from negative decimals
-            .replace(/Z/g, "z");     // Convert uppercase 'Z' to lowercase
-    }
-
-    return d;
-}
-
-
-export function pathDataToD_0(pathData, decimals = -1, minify = false) {
-    // implicit l command
-    if (pathData[1].type === "l" && minify) {
-        pathData[0].type = "m";
-    }
-    let d = `${pathData[0].type}${pathData[0].values.join(" ")}`;
-
-    for (let i = 1; i < pathData.length; i++) {
-        let com0 = pathData[i - 1];
-        let com = pathData[i];
-
-        let type = (com0.type === com.type && minify) ?
-            " " : (
-                (com0.type === "m" && com.type === "l") ||
-                (com0.type === "M" && com.type === "l") ||
-                (com0.type === "M" && com.type === "L")
-            ) && minify ?
-                " " : com.type;
-
-        // round
-        if (com.values.length && decimals > -1) {
-            com.values = com.values.map(val => { return +val.toFixed(decimals) })
-        }
-        d += `${type}${com.values.join(" ")}`;
+            .replace(/Z/g, "z")    // Convert uppercase 'Z' to lowercase
     }
 
-
-    if (minify) {
-        d = d
-            .replaceAll(" 0.", " .")
-            .replaceAll(" -", "-")
-            .replaceAll("-0.", "-.")
-            .replace(/\s+([mlcsqtahvz])/gi, "$1")
-            .replaceAll("Z", "z");
-    }
+    //console.log(`"${d}"`);
 
     return d;
 }
-

package/src/svgii/pathData_toPolygon.js

@@ -21,7 +21,7 @@ import { renderPoint } from "./visualize";
  * creates precise polygon approximation from pathdata
  * converts arc to cubis
  */
-export function pathDataToPolygon(pathData, {
+export function pathDataToPolygonOpt(pathData, {
     precisionPoly = 1,
     autoAccuracy=false,
     polyFormat='points',
@@ -105,12 +105,12 @@ simplifyRDP=1,
 
     // simplify polygon
     if(simplifyRD>0){
-        pts2 = simplifyPolyRD(pts2, {quality:simplifyRD+'px'})
+        pts2 = simplifyPolyRD(pts2, {quality:simplifyRD})
     }
 
 
     if(simplifyRDP>0){
-        pts2 = simplifyPolyRDP(pts2, {quality:simplifyRDP+'px'})
+        pts2 = simplifyPolyRDP(pts2, {quality:simplifyRDP})
     }
 
 
@@ -120,7 +120,6 @@ simplifyRDP=1,
     
     if(autoAccuracy){
         decimals = detectAccuracyPoly(pts)
-        //console.log('decimals', decimals);
     }
 
     let poly = decimals>-1 ? pts2.map(pt => { return { x: roundTo(pt.x, decimals), y: roundTo(pt.y, decimals) } }) : pts2.map(pt => { return { x: pt.x, y: pt.y } })

package/src/svgii/poly_analyze.js

@@ -9,6 +9,67 @@ import { pathDataToD } from "./pathData_stringify";
 import { renderPath, renderPoint, renderPoly } from "./visualize";
 
 
+export function getPolyCentroid(pts) {
+
+    let l = pts.length;
+    let x = 0, y = 0;
+    for (let i = 0; l && i < l; i++) {
+        let pt = pts[i];
+        x += pt.x
+        y += pt.y
+    }
+
+    let centroid = {x: x/l, y:y/l}
+    return centroid
+    //console.log(centroid);
+
+}
+
+export function getPolyCentroidWeighted(points) {
+    if (!points || points.length === 0) return null;
+    
+    let totalWeight = 0;
+    let sumX = 0;
+    let sumY = 0;
+    
+    for (const point of points) {
+        let weight = point.weight || 1; // default weight = 1
+        sumX += point.x * weight;
+        sumY += point.y * weight;
+        totalWeight += weight;
+    }
+    
+    if (totalWeight === 0) return null;
+    
+    return {
+        x: sumX / totalWeight,
+        y: sumY / totalWeight
+    };
+}
+
+
+
+export function detectRegularPolygon(pts, centroid={x:0, y:0}) {
+    let rSq = getSquareDistance(pts[0], centroid);
+    let isRegular = true;
+
+    for (let i = 1, l = pts.length; i < l; i++) {
+        let pt1 = pts[i];
+        let dist = getSquareDistance(pt1, centroid);
+
+        let diff = Math.abs(rSq-dist);
+        let diffRel = diff/rSq
+        //console.log('diffRel', diffRel);
+
+        if (diffRel > 0.05) {
+            return false;
+        }
+
+
+    }
+    return isRegular;
+}
+
 
 export function analyzePoly(pts, {
     x = 0,

package/src/svgii/poly_normalize.js

@@ -64,8 +64,17 @@ export function polyPtsToArray(pts) {
 // convert flat point value array to point object array
 export function toPointArray(pts) {
     let ptArr = [];
-    for (let i = 1, l = pts.length; i < l; i += 2) {
-        ptArr.push({ x: pts[i - 1], y: pts[i] });
+
+    if(pts[0].length===2){
+        for (let i = 0, l = pts.length; i < l; i ++) {
+            let pt = pts[i]
+            ptArr.push({ x: pt[0], y:pt[1] });
+        }
+
+    }else{
+        for (let i = 1, l = pts.length; i < l; i += 2) {
+            ptArr.push({ x: pts[i - 1], y: pts[i] });
+        }
     }
     return ptArr;
 };

package/src/svgii/poly_to_pathdata.js

@@ -5,15 +5,19 @@
 * https://francoisromain.medium.com/smooth-a-svg-path-with-cubic-bezier-curves-e37b49d46c74
 */
 
-import { checkLineIntersection, getDistManhattan, interpolate, mirrorCpts } from "./geometry";
+import { checkLineIntersection, getAngle, getDistance, getDistManhattan, getPathDataVertices, getPointOnEllipse, getSquareDistance, interpolate, mirrorCpts, reducePoints, rotatePoint } from "./geometry";
 import { getPolyBBox } from "./geometry_bbox";
 import { renderPath, renderPoint, renderPoly } from "./visualize";
 import { simplifyPolyRDP } from "../simplify_poly_RDP";
 import { pathDataFromPoly } from "./pathData_fromPoly";
 import { getPolyChunks } from "./poly_analyze_get_chunks";
-import { analyzePoly, isClosedPolygon } from "./poly_analyze";
+import { analyzePoly, detectRegularPolygon, getPolyCentroid, getPolyCentroidWeighted, isClosedPolygon } from "./poly_analyze";
 import { fitCurveSchneider } from "../poly-fit-curve-schneider";
 import { simplifyPolyRD } from "../simplify_poly_radial_distance";
+import { simplifyRC } from "../simplify_poly_RC";
+import { getPolygonArea } from "./geometry_area";
+import { pathDataToD } from "./pathData_stringify";
+import { fixIntersectingCpts } from "../pathData_simplify_harmonize_cpts";
 
 
 
@@ -34,34 +38,89 @@ export function simplifyPolygonToPathData(pts, {
 } = {}) {
 
 
+    let polyPath = [];
+    let l = pts.length;
+    let M = pts[0]
+    let Z = pts[l - 1]
+
+
+    // triangle
+    if (pts.length === 3) {
+
+        let pM1 = interpolate(M, pts[1], 0.5)
+        let pM2 = interpolate(pts[1], Z, 0.5)
+        let pM3 = interpolate(Z, pts[0], 0.5)
+
+        /*
+        console.log('triangle');
+        renderPoint(markers, M)
+        renderPoint(markers, pM1)
+        renderPoint(markers, pM2)
+        renderPoint(markers, pM3)
+        */
+
+        if (closed) {
+            let t = 0.6666
+            let cp1_1 = interpolate(pM1, pts[1], t)
+            let cp2_1 = interpolate(pM2, pts[1], t)
+            let cp1_2 = interpolate(pM2, Z, t)
+            let cp2_2 = interpolate(pM3, Z, t)
+            let cp1_3 = interpolate(pM3, M, t)
+            let cp2_3 = interpolate(pM1, M, t)
+
+            polyPath = [
+                { type: 'M', values: [pM1.x, pM1.y] },
+                { type: 'C', values: [cp1_1.x, cp1_1.y, cp2_1.x, cp2_1.y, pM2.x, pM2.y] },
+                { type: 'C', values: [cp1_2.x, cp1_2.y, cp2_2.x, cp2_2.y, pM3.x, pM3.y] },
+                { type: 'C', values: [cp1_3.x, cp1_3.y, cp2_3.x, cp2_3.y, pM1.x, pM1.y] },
+                { type: 'Z', values: [] },
+            ]
 
-    /*
-    // denoise via RDP
-    if (denoise && denoise !== 1) {
-        pts = simplifyPolyRDP(pts, {
-            width,
-            height,
-            quality: denoise,
-            manhattan,
-            absolute
-        })
+        } else {
+            polyPath = [
+                //{ type: 'M', values: [pM1.x, pM1.y] },
+                { type: 'M', values: [M.x, M.y] },
+                { type: 'C', values: [pts[1].x, pts[1].y, pts[1].x, pts[1].y, Z.x, Z.y] },
+            ]
+        }
+        return polyPath;
     }
-    */
 
 
-    /*
-    // simplify polygon
-    if (simplifyRD != 1) {
-        pts = simplifyPolyRD(pts, { quality: simplifyRD+'px' })
-    }
+
+    // remove colinear
+    //pts = simplifyRC(pts)
+
+    /**
+     * detect regular polygon
+     * curved path is a circle
+     */
+    let centroid = getPolyCentroid(simplifyRC(pts))
+    let isRegularPolygon = detectRegularPolygon(pts, centroid)
 
 
-    if (simplifyRDP != 1) {
-        pts = simplifyPolyRDP(pts, { quality: simplifyRDP+'px' })
+    if (isRegularPolygon) {
+        //renderPoint(markers, centroid)
+        //let r = getDistance(centroid, pts[0])
+        let ptAd = rotatePoint(pts[0], centroid.x, centroid.y, Math.PI)
+        let sweep = getPolygonArea(pts) > 0 ? 1 : 0;
+
+        polyPath = [
+            { type: 'M', values: [pts[0].x, pts[0].y] },
+            { type: 'A', values: [1, 1, 0, 0, sweep, ptAd.x, ptAd.y] },
+            { type: 'A', values: [1, 1, 0, 0, sweep, pts[0].x, pts[0].y] }
+        ]
+
+        if (closed) {
+            polyPath.push({ type: 'Z', values: [] })
+        }
+        return polyPath;
     }
-    */
 
 
+    // remove colinear
+    //pts = simplifyRC(pts)
+
     // get topology of poly
     let polyAnalyzed = !keepExtremes && !keepCorners ? pts : analyzePoly(pts, {
         debug: false
@@ -70,7 +129,6 @@ export function simplifyPolygonToPathData(pts, {
     })
 
     //console.log(polyAnalyzed, polyAnalyzed2);
-    //return
 
     // split into segment chunks
     let chunks = !keepExtremes && !keepCorners ? [polyAnalyzed] : getPolyChunks(polyAnalyzed, { keepCorners, keepExtremes, keepInflections });
@@ -81,12 +139,15 @@ export function simplifyPolygonToPathData(pts, {
 
     //threshold = 2
 
-    let polyPath = simplifyPolyChunks(chunks, {
+    polyPath = simplifyPolyChunks(chunks, {
         closed,
         tolerance: threshold,
-        keepCorners
+        keepCorners,
+        keepExtremes: true,
     });
 
+    polyPath = fixIntersectingCpts(polyPath);
+
     return polyPath;
 }