svg-path-simplify 0.4.2 → 0.4.3

package/src/svgii/pathData_parse_els.js

@@ -16,29 +16,25 @@ import { autoRound, roundTo } from './rounding.js';
 import { attLookup } from './svg-styles-to-attributes-const.js';
 import { qrDecomposeMatrix } from './transform_qr_decompose.js';
 
-
+/**
+ * Convert shapes to paths
+ * converts also transforms
+ */
 export function shapeElToPath(el, { width = 0,
     height = 0,
-    convert_rects = false,
-    convert_ellipses = false,
-    convert_poly = false,
-    convert_lines = false,
-    //matrix={a:1, b:0, c:0, d:1, e:0, f:0},
-    matrix=null
+    convertShapes = [],
+    matrix = null
 
 } = {}) {
 
+
     let nodeName = el.nodeName.toLowerCase();
     //console.log('shapeElToPath', nodeName);
 
 
-    if (
-        nodeName === 'path' && !matrix ||
-        nodeName === 'rect' && !convert_rects ||
-        (nodeName === 'circle' || nodeName === 'ellipse') && !convert_ellipses ||
-        (nodeName === 'polygon' || nodeName === 'polyline') && !convert_poly ||
-        (nodeName === 'line') && !convert_lines
-    ) return el;
+
+    if (!convertShapes.includes(nodeName)) return el;
+    //console.log(convertShapes);
 
 
     let pathData = getPathDataFromEl(el, { width, height });
@@ -47,8 +43,9 @@ export function shapeElToPath(el, { width = 0,
     let exclude = ['d', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'dx', 'dy', 'r', 'rx', 'ry', 'width', 'height', 'points'];
 
     // transform pathData
-    if(matrix && Object.values(matrix).join('')!=='100100'){
+    if (matrix && Object.values(matrix).join('') !== '100100') {
         pathData = transformPathData(pathData, matrix)
+        //console.log('transformPathData', pathData);
         exclude.push('transform', 'transform-origin')
     }
 
@@ -72,14 +69,7 @@ export function shapeElToPath(el, { width = 0,
     return pathN
 
 }
-/*
-export function copyAttributes(newEl, oldEl){
 
-    let attributes = [...oldEl.attributes].map(att => att.name);
-
-
-}
-*/
 
 
 // retrieve pathdata from svg geometry elements
@@ -112,39 +102,7 @@ export function getPathDataFromEl(el, {
         case 'rect':
             attNames = ['x', 'y', 'width', 'height', 'rx', 'ry'];
             ({ x=0, y=0, width=0, height=0, rx=0, ry=0 } = atts);
-
-            if (!rx && !ry) {
-                pathData = [
-                    { type: "M", values: [x, y] },
-                    { type: "L", values: [x + width, y] },
-                    { type: "L", values: [x + width, y + height] },
-                    { type: "L", values: [x, y + height] },
-                    { type: "Z", values: [] }
-                ];
-            } else {
-
-                rx = rx ? rx : ry;
-                ry = ry ? ry : rx;
-
-                if (rx > width / 2) {
-                    rx = width / 2;
-                }
-                if (ry > height / 2) {
-                    ry = height / 2;
-                }
-                pathData = [
-                    { type: "M", values: [x + rx, y] },
-                    { type: "L", values: [x + width - rx, y] },
-                    { type: "A", values: [rx, ry, 0, 0, 1, x + width, y + ry] },
-                    { type: "L", values: [x + width, y + height - ry] },
-                    { type: "A", values: [rx, ry, 0, 0, 1, x + width - rx, y + height] },
-                    { type: "L", values: [x + rx, y + height] },
-                    { type: "A", values: [rx, ry, 0, 0, 1, x, y + height - ry] },
-                    { type: "L", values: [x, y + ry] },
-                    { type: "A", values: [rx, ry, 0, 0, 1, x + rx, y] },
-                    { type: "Z", values: [] }
-                ];
-            }
+            pathData = rectToPathData(x, y, width, height, rx, ry);
             break;
 
         case 'circle':
@@ -164,7 +122,6 @@ export function getPathDataFromEl(el, {
                 ry = ry ? ry : r;
             }
 
-
             // simplified radii for circles
             let rxS = isCircle && r >= 1 ? 1 : rx;
             let ryS = isCircle && r >= 1 ? 1 : ry;
@@ -210,13 +167,51 @@ export function getPathDataFromEl(el, {
 };
 
 
+export function rectToPathData(x = 0, y = 0, width = 0, height = 0, rx = 0, ry = 0) {
+    let pathData = [];
+
+    if (!rx && !ry) {
+        pathData = [
+            { type: "M", values: [x, y] },
+            { type: "L", values: [x + width, y] },
+            { type: "L", values: [x + width, y + height] },
+            { type: "L", values: [x, y + height] },
+            { type: "Z", values: [] }
+        ];
+    } else {
+
+        rx = rx ? rx : ry;
+        ry = ry ? ry : rx;
+
+        if (rx > width / 2) {
+            rx = width / 2;
+        }
+        if (ry > height / 2) {
+            ry = height / 2;
+        }
+        pathData = [
+            { type: "M", values: [x + rx, y] },
+            { type: "L", values: [x + width - rx, y] },
+            { type: "A", values: [rx, ry, 0, 0, 1, x + width, y + ry] },
+            { type: "L", values: [x + width, y + height - ry] },
+            { type: "A", values: [rx, ry, 0, 0, 1, x + width - rx, y + height] },
+            { type: "L", values: [x + rx, y + height] },
+            { type: "A", values: [rx, ry, 0, 0, 1, x, y + height - ry] },
+            { type: "L", values: [x, y + ry] },
+            { type: "A", values: [rx, ry, 0, 0, 1, x + rx, y] },
+            { type: "Z", values: [] }
+        ];
+    }
+
+    return pathData
+}
+
+
+
 
 
 export function pathElToShape(el, {
-    convert_rects = false,
-    convert_ellipses = false,
-    convert_poly = false,
-    convert_lines = false
+    convertShapes = [],
 } = {}) {
 
     //console.log('pathElToShape', convert_rects, convert_ellipses, convert_lines );
@@ -236,10 +231,13 @@ export function pathElToShape(el, {
     let attsNew = {}
     let decimals = 7;
 
+
     if (isPoly) {
 
+        //console.log('pathsToShapes', isPoly);
+
         // is line
-        if (pathData.length === 2 && convert_lines) {
+        if (pathData.length === 2 && convertShapes.includes('line')) {
             type = 'line'
             shape = document.createElementNS(svgNs, type)
             let [x1, y1, x2, y2] = [...pathData[0].values, ...pathData[1].values].map(val => roundTo(val, decimals))
@@ -255,7 +253,7 @@ export function pathElToShape(el, {
             let areaDiff = Math.abs(1 - areaRect / areaPoly);
 
             // is rect
-            if (convert_rects && areaDiff < 0.01) {
+            if (convertShapes.includes('rect') && areaDiff < 0.01) {
                 type = 'rect'
                 shape = document.createElementNS(svgNs, type)
                 let { x, y, width, height } = bb
@@ -263,7 +261,7 @@ export function pathElToShape(el, {
 
             }
             // polyline or polygon
-            else if(convert_poly) {
+            else if (convertShapes.includes('polygon') || convertShapes.includes('polyline')) {
                 type = closed ? 'polygon' : 'polyline';
                 shape = document.createElementNS(svgNs, type)
                 let points = vertices.map(pt => { return [pt.x, pt.y] }).flat().map(val => roundTo(val, decimals)).join(' ')
@@ -272,7 +270,7 @@ export function pathElToShape(el, {
         }
     }
     // circles or ellipses
-    else if (!hasLines && convert_ellipses) {
+    else if (!hasLines && (convertShapes.includes('circle') || convertShapes.includes('ellipse'))) {
 
         // try to convert cubics to arcs
         if (!hasArcs && hasBeziers) {
@@ -308,11 +306,11 @@ export function pathElToShape(el, {
             rxVals = Array.from(rxVals)
             ryVals = Array.from(ryVals)
 
-            if(cxVals.length===1 && cyVals.length===1 && rxVals.length===1 && ryVals.length===1){
+            if (cxVals.length === 1 && cyVals.length === 1 && rxVals.length === 1 && ryVals.length === 1) {
                 let [rx, ry, cx, cy] = [rxVals[0], ryVals[0], cxVals[0], cyVals[0]]
-                type = rx===ry ? 'circle' : 'ellipse';
+                type = rx === ry ? 'circle' : 'ellipse';
                 shape = document.createElementNS(svgNs, type)
-                attsNew = type==='circle' ? { r:rx, cx, cy } : {rx, ry, cx, cy}
+                attsNew = type === 'circle' ? { r: rx, cx, cy } : { rx, ry, cx, cy }
             }
         }
     }
@@ -334,11 +332,11 @@ export function pathElToShape(el, {
                 shape.setAttribute(att, attributes[att])
             }
         }
-
         // replace
         el = shape;
     }
 
+    //console.log(el);
     return el;
 
 }

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;
 };