svg-path-simplify 0.0.5 → 0.0.8

package/src/svgii/pathData_parse_els.js

@@ -0,0 +1,239 @@
+//import { pathDataToAbsoluteOrRelative, pathDataToLonghands, cubicToArc } from './pathData_convert.js';
+import { parsePathDataString, parsePathDataNormalized, stringifyPathData } from './pathData_parse.js';
+
+export function shapeElToPath(el){
+
+    let nodeName = el.nodeName.toLowerCase();
+    if(nodeName==='path')return el;
+
+    let pathData = getPathDataFromEl(el);
+    let d = pathData.map(com=>{return `${com.type} ${com.values} `}).join(' ')
+    let attributes = [...el.attributes].map(att=>att.name);
+
+    let pathN = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    pathN.setAttribute('d', d );
+
+    let exclude = ['x', 'y', 'cx', 'cy', 'dx', 'dy', 'r', 'rx', 'ry', 'width', 'height', 'points']
+
+    attributes.forEach(att=>{
+        if(!exclude.includes(att)){
+            let val = el.getAttribute(att);
+            pathN.setAttribute(att, val)
+        }
+    })
+
+    //el.replaceWith(pathN)
+    return pathN
+
+}
+
+
+// retrieve pathdata from svg geometry elements
+export function getPathDataFromEl(el, stringify=false) {
+
+    let pathData = [];
+    let type = el.nodeName;
+    let atts, attNames, d, x, y, width, height, r, rx, ry, cx, cy, x1, x2, y1, y2;
+
+    // convert relative or absolute units 
+    const svgElUnitsToPixel = (el, decimals = 9) => {
+        //console.log(this);
+        const svg = el.nodeName !== "svg" ? el.closest("svg") : el;
+
+        // convert real life units to pixels
+        const translateUnitToPixel = (value) => {
+
+            if (value === null) {
+                return 0
+            }
+            //default dpi = 96
+            let dpi = 96;
+            let unit = value.match(/([a-z]+)/gi);
+            unit = unit ? unit[0] : "";
+            let val = parseFloat(value);
+            let rat;
+
+            // no unit - already pixes/user unit
+            if (!unit) {
+                return val;
+            }
+
+            switch (unit) {
+                case "in":
+                    rat = dpi;
+                    break;
+                case "pt":
+                    rat = (1 / 72) * 96;
+                    break;
+                case "cm":
+                    rat = (1 / 2.54) * 96;
+                    break;
+                case "mm":
+                    rat = ((1 / 2.54) * 96) / 10;
+                    break;
+                // just a default approximation
+                case "em":
+                case "rem":
+                    rat = 16;
+                    break;
+                default:
+                    rat = 1;
+            }
+            let valuePx = val * rat;
+            return +valuePx.toFixed(decimals);
+        };
+
+        // svg width and height attributes
+        let width = svg.getAttribute("width");
+        width = width ? translateUnitToPixel(width) : 300;
+        let height = svg.getAttribute("height");
+        height = width ? translateUnitToPixel(height) : 150;
+
+        //prefer viewBox values
+        let vB = svg.getAttribute("viewBox");
+        vB = vB
+            ? vB
+                .replace(/,/g, " ")
+                .split(" ")
+                .filter(Boolean)
+                .map((val) => {
+                    return +val;
+                })
+            : [];
+
+        let w = vB.length ? vB[2] : width;
+        let h = vB.length ? vB[3] : height;
+        let scaleX = w / 100;
+        let scaleY = h / 100;
+        let scalRoot = Math.sqrt((Math.pow(scaleX, 2) + Math.pow(scaleY, 2)) / 2);
+
+        let attsH = ["x", "width", "x1", "x2", "rx", "cx", "r"];
+        let attsV = ["y", "height", "y1", "y2", "ry", "cy"];
+
+
+        let atts = el.getAttributeNames();
+        atts.forEach((att) => {
+            let val = el.getAttribute(att);
+            let valAbs = val;
+            if (attsH.includes(att) || attsV.includes(att)) {
+                let scale = attsH.includes(att) ? scaleX : scaleY;
+                scale = att === "r" && w != h ? scalRoot : scale;
+                let unit = val.match(/([a-z|%]+)/gi);
+                unit = unit ? unit[0] : "";
+                if (val.includes("%")) {
+                    valAbs = parseFloat(val) * scale;
+                }
+                //absolute units
+                else {
+                    valAbs = translateUnitToPixel(val);
+                }
+                el.setAttribute(att, +valAbs);
+            }
+        });
+    }
+
+    svgElUnitsToPixel(el)
+
+    const getAtts = (attNames) => {
+        atts = {}
+        attNames.forEach(att => {
+            atts[att] = +el.getAttribute(att)
+        })
+        return atts
+    }
+
+    switch (type) {
+        case 'path':
+            d = el.getAttribute("d");
+            pathData = parsePathDataNormalized(d);
+            break;
+
+        case 'rect':
+            attNames = ['x', 'y', 'width', 'height', 'rx', 'ry'];
+            ({ x, y, width, height, rx, ry } = getAtts(attNames));
+
+
+            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 {
+
+                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: [] }
+                ];
+            }
+            break;
+
+        case 'circle':
+        case 'ellipse':
+
+            attNames = ['cx', 'cy', 'rx', 'ry', 'r'];
+            ({ cx, cy, r, rx, ry } = getAtts(attNames));
+
+            if (type === 'circle') {
+                r = r;
+                rx = r
+                ry = r
+            } else {
+                rx = rx ? rx : r;
+                ry = ry ? ry : r;
+            }
+
+            pathData = [
+                { type: "M", values: [cx + rx, cy] },
+                { type: "A", values: [rx, ry, 0, 1, 1, cx - rx, cy] },
+                { type: "A", values: [rx, ry, 0, 1, 1, cx + rx, cy] },
+            ];
+
+            break;
+        case 'line':
+            attNames = ['x1', 'y1', 'x2', 'y2'];
+            ({ x1, y1, x2, y2 } = getAtts(attNames));
+            pathData = [
+                { type: "M", values: [x1, y1] },
+                { type: "L", values: [x2, y2] }
+            ];
+            break;
+        case 'polygon':
+        case 'polyline':
+
+            let points = el.getAttribute('points').replaceAll(',', ' ').split(' ').filter(Boolean)
+
+            for (let i = 0; i < points.length; i += 2) {
+                pathData.push({
+                    type: (i === 0 ? "M" : "L"),
+                    values: [+points[i], +points[i + 1]]
+                });
+            }
+            if (type === 'polygon') {
+                pathData.push({
+                    type: "Z",
+                    values: []
+                });
+            }
+            break;
+    }
+
+    return stringify ? stringifyPathData(pathData): pathData;
+
+};

package/src/svgii/pathData_remove_collinear.js

@@ -1,5 +1,6 @@
-import { checkBezierFlatness, getDistAv, getSquareDistance } from "./geometry.js";
+import { getDistAv, getSquareDistance } from "./geometry.js";
 import { getPolygonArea } from "./geometry_area.js";
+import { checkBezierFlatness, commandIsFlat } from "./geometry_flatness.js";
 import { renderPoint } from "./visualize.js";
 
 export function pathDataRemoveColinear(pathData, tolerance = 1, flatBezierToLinetos = true) {
@@ -25,8 +26,12 @@ export function pathDataRemoveColinear(pathData, tolerance = 1, flatBezierToLine
 
         let area = getPolygonArea([p0, p, p1], true)
 
+        let distSquare0 = getSquareDistance(p0, p)
+        let distSquare1 = getSquareDistance(p, p1)
         let distSquare = getSquareDistance(p0, p1)
-        let distMax = distSquare / 100 * tolerance
+        //distSquare = (distSquare0+distSquare1) / 2;
+
+        let distMax = distSquare / 200 * tolerance
 
         let isFlat = area < distMax;
         let isFlatBez = false;
@@ -46,6 +51,7 @@ export function pathDataRemoveColinear(pathData, tolerance = 1, flatBezierToLine
             //let areaBez = getPolygonArea([p0, ...cpts, p], true)
 
             isFlatBez = checkBezierFlatness(p0, cpts, p)
+            //isFlatBez = commandIsFlat([p0, ...cpts, p]).flat
            // console.log();
 
             //isFlatBez = areaBez < distMax * 0.25
@@ -67,8 +73,12 @@ export function pathDataRemoveColinear(pathData, tolerance = 1, flatBezierToLine
         p0 = p;
 
         // colinear – exclude arcs (as always =) as semicircles won't have an area
-        if ( isFlat && c < l - 1 && (type === 'L' || (flatBezierToLinetos && isFlatBez))) {
+        //&& comN.type==='L'
+        if ( isFlat && c < l - 1 && (type === 'L' || (flatBezierToLinetos && isFlatBez)) ) {
             //console.log(area,distMax );
+            //renderPoint(markers, p)
+            
+            //if(comN.type!=='L' ){}
             continue;
         }
 

package/src/svgii/pathData_remove_orphaned.js

@@ -0,0 +1,20 @@
+export function removeOrphanedM(pathData) {
+
+    for (let i = 0, l = pathData.length; i < l; i++) {
+        let com = pathData[i];
+        if (!com) continue;
+        let { type = null, values = [] } = com;
+        let comN = pathData[i + 1] ? pathData[i + 1] : null;
+        if ((type === 'M' || type === 'm')) {
+
+            if (!comN || (comN && (comN.type === 'Z' || comN.type === 'z'))) {
+                pathData[i] = null
+                pathData[i + 1] = null
+            }
+        }
+    }
+
+    pathData = pathData.filter(Boolean);
+    return pathData;
+
+}

package/src/svgii/pathData_remove_zerolength.js

@@ -1,3 +1,21 @@
+
+/*
+// remove zero-length segments introduced by rounding
+export function removeZeroLengthLinetos_post(pathData) {
+    let pathDataOpt = []
+    pathData.forEach((com, i) => {
+        let { type, values } = com;
+        if (type === 'l' || type === 'v' || type === 'h') {
+            let hasLength = type === 'l' ? (values.join('') !== '00') : values[0] !== 0
+            if (hasLength) pathDataOpt.push(com)
+        } else {
+            pathDataOpt.push(com)
+        }
+    })
+    return pathDataOpt
+}
+*/
+
 export function removeZeroLengthLinetos(pathData) {
 
     let M = { x: pathData[0].values[0], y: pathData[0].values[1] }
@@ -10,14 +28,22 @@ export function removeZeroLengthLinetos(pathData) {
         let com = pathData[c];
         let { type, values } = com;
 
-        let valsL = values.slice(-2);
-        p = { x: valsL[0], y: valsL[1] };
+        let valsLen = values.length;
+        //let valsL = values.slice(-2);
+        //p = { x: valsL[0], y: valsL[1] };
+        p = { x: values[valsLen-2], y: values[valsLen-1] };
 
         // skip lineto
         if (type === 'L' && p.x === p0.x && p.y === p0.y) {
             continue
         }
 
+        // skip minified zero length
+        if (type === 'l' || type === 'v' || type === 'h') {
+            let noLength = type === 'l' ? (values.join('') === '00') : values[0] === 0;
+            if(noLength) continue
+        } 
+
         pathDataN.push(com)
         p0 = p;
     }

package/src/svgii/pathData_reorder.js

@@ -1,10 +1,12 @@
 import { splitSubpaths, addExtemesToCommand } from './pathData_split.js';
-import { getComThresh, commandIsFlat, getPathDataVertices, getSquareDistance } from './geometry.js';
+import { getComThresh, getPathDataVertices, getSquareDistance } from './geometry.js';
 import { getPolyBBox } from './geometry_bbox.js';
 
 
 import { renderPoint, renderPath } from './visualize.js';
 import { getPolygonArea } from './geometry_area.js';
+import { checkBezierFlatness, commandIsFlat } from "./geometry_flatness.js";
+
 
 
 export function pathDataToTopLeft(pathData) {

package/src/svgii/pathData_split.js

@@ -2,6 +2,7 @@ import { pointAtT, svgArcToCenterParam, getBezierExtremeT  } from "./geometry";
 import { renderPoint, renderPath } from "./visualize";
 
 
+
 /**
  * split segments into chunks to
  * prevent simplification across 
@@ -280,6 +281,8 @@ export function addExtemesToCommand(p0, values, tMin=0, tMax=1) {
 
         if(tArr.length){
             let commandsSplit = splitCommandAtTValues(p0, values, tArr)
+            //console.log('commandsSplit', commandsSplit);
+
             pathDataNew.push(...commandsSplit)
             extremeCount += commandsSplit.length;
         }else{
@@ -322,6 +325,8 @@ export function addExtremePoints(pathData, tMin=0, tMax=1) {
             // add extremes
             if (type === 'C' || type === 'Q') {
                 let comExt = addExtemesToCommand(p0, values, tMin, tMax).pathData;
+                let comExt2 = com;
+                //comExt2.valu
                 //console.log('comExt', comExt);
                 pathDataNew.push(...comExt )
             }

package/src/svgii/pathData_toPolygon.js

@@ -1,12 +1,15 @@
-import { pointAtT } from "./geometry";
+import { getDistAv, pointAtT } from "./geometry";
 import { getPolyBBox } from "./geometry_bbox";
 import { addDimensionData, analyzePathData } from "./pathData_analyze";
 import { addExtremePoints } from "./pathData_split";
+import { pathDataToD } from "./pathData_stringify";
+import { analyzePoly } from "./poly_analyze";
+import { getCurvePathData } from "./poly_to_pathdata";
+import { renderPoint } from "./visualize";
 
-export function pathDataToPolyPlus(pathDataArr = [], addExtremes=true) {
 
-    // check if splitting sub paths is required
-    pathDataArr = Object.hasOwnProperty(pathDataArr[0].type) ? splitSubpaths(pathDataArr) : pathDataArr;
+export function pathDataToPolySingle(pathData, addExtremes = true) {
+
 
     let dimMin = Infinity;
     let dimMax = 0;
@@ -16,77 +19,125 @@ export function pathDataToPolyPlus(pathDataArr = [], addExtremes=true) {
      * add extremes to beziers
      * to reproduce the shape better
      */
-    if(addExtremes){
-        pathDataArr.forEach((pathData, i) => {
-    
-            //pathDataArr[i] = addExtremePoints(pathData)
-            let pathDataE = addExtremePoints(pathData)
-            
-            //pathDataArr[i] = analyzePathData(pathDataE).pathData
-            pathDataArr[i] = addDimensionData(pathDataE)
-    
-        })
+    if (addExtremes) {
+        pathData = addExtremePoints(pathData, 0.1, 0.9)
     }
 
+    //console.log(pathData);
+
+    let pathDataPlus = analyzePathData(pathData);
+    let { bb } = pathDataPlus;
+    let thresh = (bb.width + bb.height) / 2 / 50
+
+    pathData = pathDataPlus.pathData
+
 
     /**
      * approximate min and max segment sizes
      * for segment splitting
      */
-    pathDataArr.forEach(pathData => {
-
-        let dimArr = pathData.filter(com => com.dimA).sort((a, b) => a.dimA - b.DimA)
-        let dimMinL = dimArr[0].dimA
-        let dimMaxL = dimArr[dimArr.length - 1].dimA
-        //console.log('dimArr', dimArr, dimMaxL);
-        if (dimMinL && dimMinL < dimMin) dimMin = dimMinL;
-        if (dimMaxL && dimMaxL > dimMax) dimMax = dimMaxL;
-
-    })
+    let dimArr = pathData.filter(com => com.dimA).sort((a, b) => a.dimA - b.DimA)
+    let dimMinL = dimArr[0].dimA
+    let dimMaxL = dimArr[dimArr.length - 1].dimA
+    //console.log('dimArr', dimArr, dimMaxL);
+    if (dimMinL && dimMinL < dimMin) dimMin = dimMinL;
+    if (dimMaxL && dimMaxL > dimMax) dimMax = dimMaxL;
 
     //console.log(dimMin, dimMax);
 
     // find split point based on smallest point distance
-    dimMin = (dimMin * 2 + dimMax) / 2 * 0.5
+    dimMin = (dimMin * 2 + dimMax) / 2 / 4
+    //dimMin = (bb.width + bb.height) / 2 / 8
 
     // collect vertices
     let polyArr = [];
 
+    let p0 = { x: pathData[0].p0.x, y: pathData[0].p0.y, extreme: pathData[0].extreme, corner: pathData[0].corner }
+    let poly = [p0];
+
+    for (let i = 1, l = pathData.length; i < l; i++) {
 
-    pathDataArr.forEach(pathData => {
+        let com = pathData[i];
+        let { type, values, extreme = false, corner = false, dimA = null, p0, p, cp1 = null, cp2 = null } = com;
 
-        let poly = [pathData[0].p0];
+        dimA = getDistAv(p0, p);
 
-        pathData.forEach(com => {
 
-            let { type, values, dimA = null, p0, p, cp1 = null, cp2 = null } = com;
-            let split = type === 'C' && dimA ? Math.ceil(dimA / dimMin) : 0;
+        if(extreme){
+            //renderPoint(markers, p, 'cyan')
+        }
 
-            if (type === 'C' && split) {
+        let split = (type === 'C' || type === 'Q') && dimA ? Math.ceil(dimA / dimMin) : 0;
 
-                let splitT = 1 / split;
 
-                for (let i = 1; i < split; i++) {
+        //console.log(com);
+        p.extreme = extreme
+        p.corner = corner
 
-                    let t = splitT * i;
-                    let ptI = pointAtT([p0, cp1, cp2, p], t)
-                    poly.push(ptI)
-                }
+        //console.log(p);
 
+        if ((type === 'C' || type === 'Q') && split) {
+            let splitT = 1 / split;
+            for (let i = 1; i < split; i++) {
+                let t = splitT * i;
+                let cpts = type === 'C' ? [cp1, cp2] : [cp1];
+                let ptI = pointAtT([p0, ...cpts, p], t)
+                poly.push(ptI)
             }
-            poly.push(p)
-        })
+        }
+        poly.push(p)
+
+    }
+
+
+    // remove short
+    let remove = new Set([])
+    for (let i = 1, l = poly.length; i < l; i++) {
+        let p = poly[i - 1]
+        let pN = poly[i]
+
+        let dist1 = getDistAv(p, pN)
+        if (dist1 < thresh && pN.extreme) {
+            let pR = p.extreme ? pN : p
+            let idx = p.extreme ? i : i - 1
+            //console.log('remove', idx);
+            remove.add(idx)
+        } 
+    }
+
 
-        polyArr.push(poly)
+    remove = Array.from(remove).reverse();
+    //console.log(remove);
 
-        /*
-        let bb = getPolyBBox(poly);
-        let dimAv = (bb.width+bb.height)/2
-        console.log('dimAv', dimAv);
-        */
+    for (let i = 0; i < remove.length; i++) {
+        let idx = remove[i];
+        //console.log('idx', idx);
+        poly.splice(idx, 1)
+    }
+
+    poly.splice(poly.length-1, poly.length)
+
+
+    let polyAtt = poly.map(pt => `${pt.x} ${pt.y} `).join(' ')
+    //console.log('polyAtt', polyAtt);
+
+    //markers.insertAdjacentHTML('beforeend', `<polygon points="${polyAtt}" stroke="red" fill="none"/>`)
+
+
+    poly = analyzePoly(poly, false)
+    let pathDataP = getCurvePathData(poly, 0.666, true)
+    let d = pathDataToD(pathDataP)
 
-    })
+    console.log(d);
+    //markers.insertAdjacentHTML('beforeend', `<path d="${d}" stroke="green" fill="none" stroke-width="1%"/>`)
 
-    return polyArr
+
+
+
+
+    return poly
 
 }
+
+
+

package/src/svgii/poly_analyze.js

@@ -3,7 +3,7 @@ import { getPolygonArea } from "./geometry_area";
 import { getPolyBBox } from "./geometry_bbox";
 import { renderPoint } from "./visualize";
 
-export function analyzePoly(pts) {
+export function analyzePoly(pts, debug=false) {
 
     let l = pts.length;
     let polyArea = getPolygonArea(pts, true)
@@ -75,22 +75,26 @@ export function analyzePoly(pts) {
         /*
         */
 
-        if ((isExtreme && isCorner)) {
-            isExtreme = false;
-            directionChange = false;
-            //isCorner = false;
-        }
-
-        if (isExtreme) {
-            renderPoint(markers, pt1, 'cyan', '1%');
-        }
-
-        if (isCorner) {
-            renderPoint(markers, pt1, 'purple', '0.5%');
-        }
+        if(debug){
+
+            if ((isExtreme && isCorner)) {
+                isExtreme = false;
+                directionChange = false;
+                //isCorner = false;
+            }
+    
+            if (isExtreme) {
+                renderPoint(markers, pt1, 'cyan', '1%');
+            }
+    
+            if (isCorner) {
+                renderPoint(markers, pt1, 'purple', '0.5%');
+            }
+    
+            if (directionChange) {
+                renderPoint(markers, pt1, 'orange', '1.5%', '0.5');
+            }
 
-        if (directionChange) {
-            renderPoint(markers, pt1, 'orange', '1.5%', '0.5');
         }