svg-path-simplify 0.4.2 → 0.4.4

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_reorder.js

@@ -14,7 +14,6 @@ export function pathDataToTopLeft(pathData) {
     let len = pathData.length;
     let isClosed = pathData[len - 1].type.toLowerCase() === 'z'
 
-    //return pathData;
 
     // we can't change starting point for non closed paths
     if (!isClosed) {
@@ -30,7 +29,7 @@ export function pathDataToTopLeft(pathData) {
         let { type, values } = com;
         let valsLen = values.length
         if (valsLen) {
-            let p = { type: type, x: values[valsLen-2], y: values[valsLen-1], index: 0}
+            let p = { type: type, x: values[valsLen - 2], y: values[valsLen - 1], index: 0 }
             p.index = i
             indices.push(p)
         }
@@ -38,16 +37,124 @@ export function pathDataToTopLeft(pathData) {
 
     // reorder  to top left most
     //|| a.x - b.x
-    indices = indices.sort((a, b) => +a.y.toFixed(8) - +b.y.toFixed(8) || a.x-b.x );
+    indices = indices.sort((a, b) => +a.y.toFixed(8) - +b.y.toFixed(8) || a.x - b.x);
     newIndex = indices[0].index
 
-    return  newIndex ? shiftSvgStartingPoint(pathData, newIndex) : pathData;
+    return newIndex ? shiftSvgStartingPoint(pathData, newIndex) : pathData;
 }
 
 
+export function optimizeClosePath(pathData, { removeFinalLineto = true, autoClose = true } = {}) {
 
+    let pathDataN = pathData;
+    let l = pathData.length;
+    let M = { x: +pathData[0].values[0].toFixed(8), y: +pathData[0].values[1].toFixed(8) }
+    let isClosed = pathData[l - 1].type.toLowerCase() === 'z'
+    //let linetos = pathData.filter(com => com.type === 'L')
+    //let hasLinetos = linetos.length;
+    let hasLinetos = false
+
+
+    // check if path is closed by explicit lineto
+    let idxPenultimate = isClosed ? l - 2 : l - 1
+    let penultimateCom = pathData[idxPenultimate];
+    let penultimateType = penultimateCom.type;
+    let penultimateComCoords = penultimateCom.values.slice(-2).map(val => +val.toFixed(8))
+
+    // last L command ends at M 
+    let hasClosingCommand = penultimateComCoords[0] === M.x && penultimateComCoords[1] === M.y
+    let lastIsLine = penultimateType === 'L'
+    //console.log(pathData);
+
+    // create index
+    let indices = [];
+    for (let i = 0; i < l; i++) {
+        let com = pathData[i];
+        let { type, values, p0, p } = com;
+
+        if(type==='L') hasLinetos = true;
+
+        // exclude Z
+        if (values.length) {
+            let valsL = values.slice(-2)
+
+            let x = Math.min(p0.x, p.x)
+            let y = Math.min(p0.y, p.y)
+
+            let prevCom = pathData[i - 1] ? pathData[i - 1] : pathData[idxPenultimate]
+            let prevType = prevCom.type
+            //let p = { type: type, x: valsL[0], y: valsL[1], dist: 0, index: 0, prevType }
+            let item = { type: type, x, y, index: 0, prevType }
+            item.index = i
+            indices.push(item)
+        }
+
+    }
+
+    let xMin = Infinity;
+    let yMin = Infinity;
+    let idx_top = null;
+    let len = indices.length
+
+
+    for (let i = 0; i < len; i++) {
+        let com = indices[i];
+        let { type, index, x, y, prevType } = com;
+
+        if (hasLinetos && prevType === 'L') {
+            if (x < xMin && y < yMin) {
+                idx_top = index-1;
+            }
+
+            if (y < yMin) {
+                yMin = y
+            }
+
+            if (x < xMin) {
+                xMin = x
+            }
+        }
+    }
+
+
+    // shift to better starting point
+    if (idx_top) {
+        pathDataN = shiftSvgStartingPoint(pathDataN, idx_top)
+
+        // update penultimate - reorder might have added new close paths
+        l = pathDataN.length
+        M = { x: +pathDataN[0].values[0].toFixed(8), y: +pathDataN[0].values[1].toFixed(8) }
+
+        idxPenultimate = isClosed ? l - 2 : l - 1
+        penultimateCom = pathDataN[idxPenultimate];
+        penultimateType = penultimateCom.type;
+        penultimateComCoords = penultimateCom.values.slice(-2).map(val => +val.toFixed(8))
+        lastIsLine = penultimateType ==='L'
+
+        // last L command ends at M 
+        hasClosingCommand = penultimateComCoords[0] === M.x && penultimateComCoords[1] === M.y
+
+    }
 
-export function optimizeClosePath(pathData, {removeFinalLineto = true, autoClose = true}={}) {
+
+    // remove unnecessary closing lineto
+    if (removeFinalLineto && hasClosingCommand && lastIsLine) {
+        pathDataN.splice(l - 2, 1)
+    }
+
+    // add close path
+    if (autoClose && !isClosed && hasClosingCommand) {
+        pathDataN.push({ type: 'Z', values: [] })
+    }
+
+    return pathDataN
+
+}
+
+
+
+
+export function optimizeClosePath__(pathData, { removeFinalLineto = true, autoClose = true } = {}) {
 
     let pathDataNew = [];
     let l = pathData.length;
@@ -58,17 +165,16 @@ export function optimizeClosePath(pathData, {removeFinalLineto = true, autoClose
 
 
     // check if order is ideal
-    let idxPenultimate = isClosed ? l-2 : l-1
-
+    let idxPenultimate = isClosed ? l - 2 : l - 1
     let penultimateCom = pathData[idxPenultimate];
     let penultimateType = penultimateCom.type;
     let penultimateComCoords = penultimateCom.values.slice(-2).map(val => +val.toFixed(8))
 
     // last L command ends at M 
-    let isClosingCommand = penultimateComCoords[0] === M.x && penultimateComCoords[1] === M.y
+    let hasClosingCommand = penultimateComCoords[0] === M.x && penultimateComCoords[1] === M.y
 
     // add closepath Z to enable order optimizations
-    if(!isClosed && autoClose && isClosingCommand){
+    if (!isClosed && autoClose && hasClosingCommand) {
 
         /*
         // adjust final coords
@@ -77,14 +183,14 @@ export function optimizeClosePath(pathData, {removeFinalLineto = true, autoClose
         pathData[idxPenultimate].values[valsLastLen-2] = M.x
         pathData[idxPenultimate].values[valsLastLen-1] = M.y
         */
-        
-        pathData.push({type:'Z', values:[]})
+
+        pathData.push({ type: 'Z', values: [] })
         isClosed = true;
         l++
     }
 
     // if last segment is not closing or a lineto
-    let skipReorder = pathData[1].type !== 'L' && (!isClosingCommand || penultimateCom.type === 'L')
+    let skipReorder = pathData[1].type !== 'L' && (!hasClosingCommand || penultimateCom.type === 'L')
     skipReorder = false
 
 
@@ -143,13 +249,13 @@ export function optimizeClosePath(pathData, {removeFinalLineto = true, autoClose
     // remove last lineto
     penultimateCom = pathData[l - 2];
     penultimateType = penultimateCom.type;
-    penultimateComCoords = penultimateCom.values.slice(-2).map(val=>+val.toFixed(8))
+    penultimateComCoords = penultimateCom.values.slice(-2).map(val => +val.toFixed(8))
 
-    isClosingCommand = penultimateType === 'L' && penultimateComCoords[0] === M.x && penultimateComCoords[1] === M.y
+    hasClosingCommand = penultimateType === 'L' && penultimateComCoords[0] === M.x && penultimateComCoords[1] === M.y
 
-    //console.log('penultimateCom', isClosingCommand, penultimateCom.values, M);
+    //console.log('penultimateCom', hasClosingCommand, penultimateCom.values, M);
 
-    if (removeFinalLineto && isClosingCommand) {
+    if (removeFinalLineto && hasClosingCommand) {
         pathData.splice(l - 2, 1)
     }