svg-path-simplify 0.4.1 → 0.4.2

package/src/svgii/pathData_convert.js

@@ -69,6 +69,7 @@ export function convertPathData(pathData, {
     toShorthands = true,
     toLonghands = false,
     toRelative = true,
+    toMixed = false,
     toAbsolute = false,
     decimals = 3,
     arcToCubic = false,
@@ -86,6 +87,7 @@ export function convertPathData(pathData, {
 } = {}) {
 
 
+    let pathDataAbs = []
 
     // pathdata properties - test= true adds a manual test 
     if (testTypes) {
@@ -120,14 +122,39 @@ export function convertPathData(pathData, {
     //console.log(toShorthands, toRelative, decimals);
     if (hasQuadratics && quadraticToCubic) pathData = pathDataQuadraticToCubic(pathData);
 
+    if(toMixed) toRelative = true
 
     // pre round - before relative conversion to minimize distortions
     if (decimals > -1 && toRelative) pathData = roundPathData(pathData, decimals);
 
+    // clone absolute pathdata
+    if(toMixed){
+        pathDataAbs = JSON.parse(JSON.stringify(pathData))
+    }
 
     if (toRelative) pathData = pathDataToRelative(pathData);
     if (decimals > -1) pathData = roundPathData(pathData, decimals);
 
+
+    // choose most compact commands: relative or absolute
+    if(toMixed){
+        for(let i=0; i<pathData.length; i++){
+            let com = pathData[i]
+            let comA = pathDataAbs[i]
+            // compare Lengths
+            let comStr = [com.type, com.values.join(' ')].join('').replaceAll(' -', '-').replaceAll(' 0.', ' .')
+            let comStrA = [comA.type, comA.values.join(' ')].join('').replaceAll(' -', '-').replaceAll(' 0.', ' .')
+
+            let lenR = comStr.length;
+            let lenA = comStrA.length;
+
+            if(lenA<lenR){
+                //console.log('absolute is shorter', comStrA, comStr);
+                pathData[i] = pathDataAbs[i]
+            }
+        }
+    }
+
     return pathData
 }
 
@@ -138,6 +165,9 @@ export function convertPathData(pathData, {
  */
 
 export function optimizeArcPathData(pathData = []) {
+
+    let remove =[]
+
     pathData.forEach((com, i) => {
         let { type, values } = com;
         if (type === 'A') {
@@ -149,6 +179,12 @@ export function optimizeArcPathData(pathData = []) {
             //largeArc=true
             //let pMid = {x: Math.abs(x-x0), y:Math.abs(y-y0)}
 
+            if(rx===0 || ry===0){
+                pathData[i]= null
+                remove.push(i)
+                //console.log('!!!');
+            }
+
             // rx and ry are large enough
             if (rx >= 1 && (x === x0 || y === y0)) {
                 let diff = Math.abs(rx - ry) / rx;
@@ -171,6 +207,8 @@ export function optimizeArcPathData(pathData = []) {
             }
         }
     })
+
+    if(remove.length) pathData = pathData.filter(Boolean)
     return pathData;
 }
 

package/src/svgii/pathData_parse_els.js

@@ -17,137 +17,6 @@ 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;
-
-}
-
 export function shapeElToPath(el, { width = 0,
     height = 0,
     convert_rects = false,
@@ -233,7 +102,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':
@@ -339,4 +207,138 @@ export function getPathDataFromEl(el, {
 
     return stringify ? stringifyPathData(pathData) : pathData;
 
-};
+};
+
+
+
+
+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;
+
+}

package/src/svgii/svg-styles-to-attributes-const.js

@@ -19,6 +19,7 @@ export const transHorizontal = ['scaleX', 'translateX', 'skewX'];
 export const transVertical = ['scaleY', 'translateY', 'skewY'];
 
 export const colorProps = ['fill', 'stroke', 'stop-color'];
+export const geometryProps = ['d', 'points', 'cx', 'cy', 'x1', 'x2', 'y1', 'y2', 'width', 'height', 'r', 'rx', 'ry', 'x', 'y'];
 
 
 export const geometryEls = [