svg-path-simplify 0.4.1 → 0.4.3

package/src/svgii/pathData_getLength.js

@@ -0,0 +1,86 @@
+import { deg2rad } from "../constants";
+import { svgArcToCenterParam, toParametricAngle } from "./geometry";
+import { getCircleArcLength, getEllipseLengthLG, getLegendreGaussValues, getLength, waArr_global } from "./geometry_length";
+import { getPathDataVerbose } from "./pathData_analyze";
+import { splitSubpaths } from "./pathData_split";
+
+
+export function getPathDataLength(pathData = []) {
+    let len = 0
+    let pathDataArr = splitSubpaths(pathData);
+
+    for (let i = 0; i < pathDataArr.length; i++) {
+        let pathData = pathDataArr[i]
+
+        // add verbose point data if not present
+        if (pathData[0].p === undefined) pathData = getPathDataVerbose(pathData);
+
+        // Calculate Legendre Gauss weight and abscissa values
+        if (!waArr_global.length) {
+            //console.log('no LG');
+            let waArr = getLegendreGaussValues(48)
+            waArr.forEach(wa => {
+                waArr_global.push(wa)
+            })
+        }
+
+        let waArr = waArr_global;
+
+        pathData.forEach(com => {
+            let { type, values, p0, p, cp1 = null, cp2 = null } = com;
+            let pts = [p0]
+            if (type === 'C' || type === 'Q') pts.push(cp1)
+            if (type === 'C') pts.push(cp2)
+            pts.push(p)
+            let comLen = 0
+
+            if (type === 'A') {
+
+                // get parametrized arc properties
+                let [largeArc, sweep] = [com.values[3], com.values[4]];
+                let arcData = svgArcToCenterParam(p0.x, p0.y, com.values[0], com.values[1], com.values[2], largeArc, sweep, p.x, p.y, false)
+                let { cx, cy, rx, ry, startAngle, endAngle, deltaAngle, xAxisRotation } = arcData
+
+                //is circle 
+                if (rx === ry) {
+                    comLen = getCircleArcLength(rx, Math.abs(deltaAngle))
+                }
+
+                // is ellipse
+                else {
+                    xAxisRotation = xAxisRotation * deg2rad;
+                    startAngle = toParametricAngle((startAngle - xAxisRotation), rx, ry)
+                    endAngle = toParametricAngle((endAngle - xAxisRotation), rx, ry)
+
+                    // recalculate parametrized delta
+                    let deltaAngle_param = endAngle - startAngle;
+
+                    let signChange = deltaAngle > 0 && deltaAngle_param < 0 || deltaAngle < 0 && deltaAngle_param > 0;
+
+                    //deltaAngle = xAxisRotation>0 ? endAngle- startAngle: deltaAngle;
+                    deltaAngle = signChange ? deltaAngle : deltaAngle_param;
+
+                    // adjust end angle
+                    if (sweep && startAngle > endAngle) {
+                        endAngle += Math.PI * 2
+                    }
+
+                    if (!sweep && startAngle < endAngle) {
+                        endAngle -= Math.PI * 2
+                    }
+                    comLen = getEllipseLengthLG(rx, ry, startAngle, endAngle, waArr)
+                }
+            }
+
+            else {
+                comLen = getLength(pts, {
+                    t: 1,
+                    waArr
+                })
+            }
+            len += comLen;
+        })
+    }
+
+    return len;
+}

package/src/svgii/pathData_parse.js

@@ -103,8 +103,10 @@ const sanitizeArc = (val='', valueIndex=0) => {
 
 
 export function parsePathDataString(d, debug = true, limit=0) {
+    if(!d) return []
     d = d.trim();
 
+
     if(limit) console.log('!!!limit', limit);
 
     let pathDataObj = {

package/src/svgii/pathData_parse_els.js

@@ -16,160 +16,25 @@ import { autoRound, roundTo } from './rounding.js';
 import { attLookup } from './svg-styles-to-attributes-const.js';
 import { qrDecomposeMatrix } from './transform_qr_decompose.js';
 
-
-export function pathElToShape(el, {
-    convert_rects = false,
-    convert_ellipses = false,
-    convert_poly = false,
-    convert_lines = false
-} = {}) {
-
-    //console.log('pathElToShape', convert_rects, convert_ellipses, convert_lines );
-
-    let pathData = parsePathDataNormalized(el.getAttribute('d'));
-    let coms = Array.from(new Set(pathData.map(com => com.type))).join('')
-
-    let hasArcs = (/[a]/gi).test(coms)
-    let hasBeziers = (/[csqt]/gi).test(coms)
-    let hasLines = (/[l]/gi).test(coms)
-    let isPoly = !(/[acqts]/gi).test(coms)
-    let closed = (/[z]/gi).test(coms)
-    let shape = null;
-    let type = null
-
-    let attributes = getElementAtts(el)
-    let attsNew = {}
-    let decimals = 7;
-
-    if (isPoly) {
-
-        // is line
-        if (pathData.length === 2 && convert_lines) {
-            type = 'line'
-            shape = document.createElementNS(svgNs, type)
-            let [x1, y1, x2, y2] = [...pathData[0].values, ...pathData[1].values].map(val => roundTo(val, decimals))
-            attsNew = { x1, y1, x2, y2 }
-        }
-        // polygon, polyline or rect
-        else {
-
-            let vertices = getPathDataVertices(pathData);
-            let bb = getPolyBBox(vertices)
-            let areaPoly = getPolygonArea(vertices, true)
-            let areaRect = bb.width * bb.height;
-            let areaDiff = Math.abs(1 - areaRect / areaPoly);
-
-            // is rect
-            if (convert_rects && areaDiff < 0.01) {
-                type = 'rect'
-                shape = document.createElementNS(svgNs, type)
-                let { x, y, width, height } = bb
-                attsNew = { x, y, width, height }
-
-            }
-            // polyline or polygon
-            else if(convert_poly) {
-                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(' ')
-                attsNew = { points }
-            }
-        }
-    }
-    // circles or ellipses
-    else if (!hasLines && convert_ellipses) {
-
-        // try to convert cubics to arcs
-        if (!hasArcs && hasBeziers) {
-            pathData = pathDataCubicsToArc(pathData, { areaThreshold: 2.5 })
-            hasArcs = pathData.filter(com => com.type === 'A').length;
-        }
-
-
-        if (hasArcs) {
-            let pathData2 = getPathDataVerbose(pathData, { addArcParams: true })
-            let arcComs = pathData2.filter(com => com.type === 'A')
-
-            let cxVals = new Set();
-            let cyVals = new Set();
-            let rxVals = new Set();
-            let ryVals = new Set();
-
-            if (arcComs.length > 1) {
-                //console.log('!!!arcComs', arcComs);
-                pathData2.forEach(com => {
-                    if (com.type === 'A') {
-                        //console.log('params', com, com.cx, com.cy, com.rx, com.ry);
-                        cxVals.add(roundTo(com.cx, decimals))
-                        cyVals.add(roundTo(com.cy, decimals))
-                        rxVals.add(roundTo(com.rx, decimals))
-                        ryVals.add(roundTo(com.ry, decimals))
-                    }
-                })
-            }
-
-            cxVals = Array.from(cxVals)
-            cyVals = Array.from(cyVals)
-            rxVals = Array.from(rxVals)
-            ryVals = Array.from(ryVals)
-
-            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';
-                shape = document.createElementNS(svgNs, type)
-                attsNew = type==='circle' ? { r:rx, cx, cy } : {rx, ry, cx, cy}
-            }
-        }
-    }
-
-
-    // if el could be replaced
-    if (shape) {
-        let ignore = ['id', 'class']
-
-        // set  shape attributes
-        for (let att in attsNew) {
-            shape.setAttribute(att, attsNew[att])
-        }
-
-        // copy old attributes
-        for (let att in attributes) {
-            //console.log(attributes);
-            if (attLookup.atts[att].includes(type) || ignore.includes(att) || att.startsWith('data-')) {
-                shape.setAttribute(att, attributes[att])
-            }
-        }
-
-        // replace
-        el = shape;
-    }
-
-    return el;
-
-}
-
+/**
+ * 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 });
@@ -178,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')
     }
 
@@ -203,15 +69,8 @@ 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
 export function getPathDataFromEl(el, {
@@ -233,7 +92,6 @@ export function getPathDataFromEl(el, {
 
     // convert relative and physical units to user-units
     let atts = svgElUnitsToPixel(el, { width, height })
-    //console.log('atts', atts);
 
     switch (type) {
         case 'path':
@@ -244,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':
@@ -296,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;
@@ -339,4 +164,179 @@ export function getPathDataFromEl(el, {
 
     return stringify ? stringifyPathData(pathData) : pathData;
 
-};
+};
+
+
+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, {
+    convertShapes = [],
+} = {}) {
+
+    //console.log('pathElToShape', convert_rects, convert_ellipses, convert_lines );
+
+    let pathData = parsePathDataNormalized(el.getAttribute('d'));
+    let coms = Array.from(new Set(pathData.map(com => com.type))).join('')
+
+    let hasArcs = (/[a]/gi).test(coms)
+    let hasBeziers = (/[csqt]/gi).test(coms)
+    let hasLines = (/[l]/gi).test(coms)
+    let isPoly = !(/[acqts]/gi).test(coms)
+    let closed = (/[z]/gi).test(coms)
+    let shape = null;
+    let type = null
+
+    let attributes = getElementAtts(el)
+    let attsNew = {}
+    let decimals = 7;
+
+
+    if (isPoly) {
+
+        //console.log('pathsToShapes', isPoly);
+
+        // is line
+        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))
+            attsNew = { x1, y1, x2, y2 }
+        }
+        // polygon, polyline or rect
+        else {
+
+            let vertices = getPathDataVertices(pathData);
+            let bb = getPolyBBox(vertices)
+            let areaPoly = getPolygonArea(vertices, true)
+            let areaRect = bb.width * bb.height;
+            let areaDiff = Math.abs(1 - areaRect / areaPoly);
+
+            // is rect
+            if (convertShapes.includes('rect') && areaDiff < 0.01) {
+                type = 'rect'
+                shape = document.createElementNS(svgNs, type)
+                let { x, y, width, height } = bb
+                attsNew = { x, y, width, height }
+
+            }
+            // polyline or polygon
+            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(' ')
+                attsNew = { points }
+            }
+        }
+    }
+    // circles or ellipses
+    else if (!hasLines && (convertShapes.includes('circle') || convertShapes.includes('ellipse'))) {
+
+        // try to convert cubics to arcs
+        if (!hasArcs && hasBeziers) {
+            pathData = pathDataCubicsToArc(pathData, { areaThreshold: 2.5 })
+            hasArcs = pathData.filter(com => com.type === 'A').length;
+        }
+
+
+        if (hasArcs) {
+            let pathData2 = getPathDataVerbose(pathData, { addArcParams: true })
+            let arcComs = pathData2.filter(com => com.type === 'A')
+
+            let cxVals = new Set();
+            let cyVals = new Set();
+            let rxVals = new Set();
+            let ryVals = new Set();
+
+            if (arcComs.length > 1) {
+                //console.log('!!!arcComs', arcComs);
+                pathData2.forEach(com => {
+                    if (com.type === 'A') {
+                        //console.log('params', com, com.cx, com.cy, com.rx, com.ry);
+                        cxVals.add(roundTo(com.cx, decimals))
+                        cyVals.add(roundTo(com.cy, decimals))
+                        rxVals.add(roundTo(com.rx, decimals))
+                        ryVals.add(roundTo(com.ry, decimals))
+                    }
+                })
+            }
+
+            cxVals = Array.from(cxVals)
+            cyVals = Array.from(cyVals)
+            rxVals = Array.from(rxVals)
+            ryVals = Array.from(ryVals)
+
+            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';
+                shape = document.createElementNS(svgNs, type)
+                attsNew = type === 'circle' ? { r: rx, cx, cy } : { rx, ry, cx, cy }
+            }
+        }
+    }
+
+
+    // if el could be replaced
+    if (shape) {
+        let ignore = ['id', 'class']
+
+        // set  shape attributes
+        for (let att in attsNew) {
+            shape.setAttribute(att, attsNew[att])
+        }
+
+        // copy old attributes
+        for (let att in attributes) {
+            //console.log(attributes);
+            if (attLookup.atts[att].includes(type) || ignore.includes(att) || att.startsWith('data-')) {
+                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;
+}
+*/