svg-path-simplify 0.4.3 → 0.4.5

package/src/svgii/poly_normalize.js

@@ -5,7 +5,7 @@ export function normalizePoly(pts, {
 } = {}) {
 
     // is stringified flat point attribute
-    if(typeof pts === 'string' && !isNaN(pts[0])){
+    if (typeof pts === 'string' && !isNaN(pts[0])) {
         pts = toPointArray(pts.split(/,| /).filter(Boolean).map(Number));
         return pts
     }
@@ -16,8 +16,9 @@ export function normalizePoly(pts, {
 }
 
 
-export function polyArrayToObject(pts) {
-
+export function polyArrayToObject(pts = []) {
+    //console.log(pts);
+    if (!pts.length) return [];
     // is point object array
     if (pts[0].x !== undefined && pts[0].y !== undefined) return pts
 
@@ -35,7 +36,7 @@ export function polyArrayToObject(pts) {
         return poly
     }
 
-    else if(pts.length>3){
+    else if (pts.length > 3) {
         pts = toPointArray(pts)
         return pts
     }
@@ -65,13 +66,13 @@ export function polyPtsToArray(pts) {
 export function toPointArray(pts) {
     let ptArr = [];
 
-    if(pts[0].length===2){
-        for (let i = 0, l = pts.length; i < l; 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] });
+            ptArr.push({ x: pt[0], y: pt[1] });
         }
 
-    }else{
+    } else {
         for (let i = 1, l = pts.length; i < l; i += 2) {
             ptArr.push({ x: pts[i - 1], y: pts[i] });
         }

package/src/svgii/rounding.js

@@ -8,6 +8,42 @@ import { getDistAv, getDistManhattan } from "./geometry";
 
 
 
+/**
+ * round path data
+ * either by explicit decimal value or
+ * based on suggested accuracy in path data
+ */
+export function roundPathData(pathData, decimalsGlobal = -1) {
+
+    if (decimalsGlobal < 0) return pathData;
+
+    let len = pathData.length;
+    let decimals = decimalsGlobal
+    let decimalsArc = decimals < 3 ? decimals + 2 : decimals
+    //decimalsArc = decimals
+    //console.log(decimalsArc);
+
+    for (let c = 0; c < len; c++) {
+        let com = pathData[c];
+        let { type, values } = com
+        let valLen = values.length;
+        if (!valLen) continue
+
+        let isArc = type.toLowerCase() === 'a'
+
+        for (let v = 0; v < valLen; v++) {
+            // allow higher accuracy for arc radii (... it's always arcs)
+            pathData[c].values[v] = isArc && v < 2 ? roundTo(values[v], decimalsArc) : roundTo(values[v], decimals);
+        }
+    };
+
+    //console.log(pathData);
+    return pathData;
+}
+
+
+
+
 export function detectAccuracyPoly(pts) {
 
     let minDim = Infinity
@@ -20,7 +56,7 @@ export function detectAccuracyPoly(pts) {
         let { p0 = null, p = null, dimA = 0 } = pt;
 
         // use existing averave dimension value or calculate
-        if ( p && p0) {
+        if (p && p0) {
             dimA = dimA ? dimA : getDistManhattan(p0, p);
 
             if (dimA) dims.push(dimA);
@@ -62,33 +98,90 @@ export function detectAccuracy(pathData) {
             //let dimA = +getDistAv(p0, p).toFixed(8)
             //console.log('dimA', dimA, com.dimA, type);
 
-            if (dimA) dims.push(dimA);
+            if (dimA) dims.push(+dimA.toFixed(8));
+            //if (dimA) dims.push(dimA);
             if (dimA && dimA < minDim) minDim = dimA;
             //if (dimA && dimA > maxDim) maxDim = dimA;
         }
 
     }
 
+
+   dims = dims.sort()
+   let len = dims.length;
+   let dim_mid = dims[Math.floor(len*0.5)]
+
+   // smallest 25% of values
+   let idx_q = Math.ceil(len*0.25);
+   let dims_min = dims.slice(0, idx_q);
+
+   // average smallest values with mid value
+   let dim_min = ((dims_min.reduce((a, b) => a + b, 0) / idx_q)  + dim_mid) * 0.5;
+
+
+   let threshold = 75
+   let decimalsAuto = dim_min > threshold * 1.5 ? 0 : Math.floor(threshold / dim_min).toString().length
+
+   // clamp
+   return Math.min(Math.max(0, decimalsAuto), 8)
+
+
+
+    /*
     let dim_min = dims.sort()
     //console.log('dim_min', dim_min);
 
-    let sliceIdx = Math.ceil(dim_min.length / 6);
+    let dim_mid = dim_min[Math.floor(dim_min.length*0.5)]
+
+    let sliceIdx = Math.ceil(dim_min.length / 4);
     dim_min = dim_min.slice(0, sliceIdx);
     let minVal = dim_min.reduce((a, b) => a + b, 0) / sliceIdx;
 
+    // average with mid value
+    minVal = (minVal+dim_mid)*0.5
+    //console.log('minVal', minVal, dim_mid);
+
+
     let threshold = 75
     let decimalsAuto = minVal > threshold * 1.5 ? 0 : Math.floor(threshold / minVal).toString().length
 
     // clamp
     return Math.min(Math.max(0, decimalsAuto), 8)
+    */
 
 }
 
+/**
+ * rounding helper
+ * allows for quantized rounding
+ * e.g 0.5 decimals s
+ */
+export function roundTo(num = 0, decimals = 3) {
+    if (decimals < 0) return num;
+    // Normal integer rounding
+    if (!decimals) return Math.round(num);
 
+    // stepped rounding
+    let intPart = Math.floor(decimals);
+    //let fracPart = decimals.toString().split('.');
+    //fracPart = fracPart[1] ? +fracPart[1] : 0
+
+    if (intPart !== decimals) {
+        let f = +(decimals - intPart).toFixed(2)
+        f = f > 0.5 ? (Math.floor((f) / 0.5) * 0.5) : f;
+        //console.log('fracPart', f);
+        let step = 10 ** -intPart * f;
+        return +(Math.round(num / step) * step).toFixed(8);
+    }
 
+    let factor = 10 ** decimals;
+    return Math.round(num * factor) / factor;
+}
 
-export function roundTo(num = 0, decimals = 3) {
-    if(decimals<=-1) return num;
+
+
+export function roundTo__(num = 0, decimals = 3) {
+    if (decimals <= -1) return num;
     if (!decimals) return Math.round(num);
     let factor = 10 ** decimals;
     return Math.round(num * factor) / factor;
@@ -99,85 +192,24 @@ export function roundTo(num = 0, decimals = 3) {
  * floating point accuracy 
  * based on numeric value
  */
-export function autoRound(val, integerThresh = 50){
-  let decimals=8;  
-  
-  if(val>integerThresh*2){
-    decimals=0
-  }
-  else if(val>integerThresh){
-    decimals=1
-  }else{
-     decimals=Math.ceil(500/val).toString().length
-     //console.log('decimals small', val, decimals);
-  }
-      
-  //console.log(val, decimals);
-  let factor = 10 ** decimals;
-  return Math.round(val * factor) / factor;
-}
-
-
-
-
-/**
- * round path data
- * either by explicit decimal value or
- * based on suggested accuracy in path data
- */
-export function roundPathData(pathData, decimalsGlobal = -1) {
-
-    if (decimalsGlobal < 0) return pathData;
+export function autoRound(val, integerThresh = 50) {
+    let decimals = 8;
 
-    let len = pathData.length;
-    //let decimals = pathData[0].decimals ? pathData[0].decimals+1 : decimalsGlobal
-    let decimals = decimalsGlobal
-    //decimals = decimalsGlobal;
-    //console.log('decimals subpath', decimals, pathData[0].decimals, 'decimalsGlobal', decimalsGlobal);
-
-    for (let c = 0; c < len; c++) {
-        let com = pathData[c];
-        let {values} = com
-        //let values = pathData[c].values
-        let valLen = values.length;
-        if (!valLen) continue
-
-        for (let v = 0; v < valLen; v++) {
-            pathData[c].values[v] = roundTo(values[v], decimals);
-        }
-    };
+    if (val > integerThresh * 2) {
+        decimals = 0
+    }
+    else if (val > integerThresh) {
+        decimals = 1
+    } else {
+        decimals = Math.ceil(500 / val).toString().length
+        //console.log('decimals small', val, decimals);
+    }
 
-    //console.log(pathData);
-    return pathData;
+    //console.log(val, decimals);
+    let factor = 10 ** decimals;
+    return Math.round(val * factor) / factor;
 }
 
 
-export function roundPathData_(pathData, decimals = -1) {
-
-    if (decimals < 0) return pathData;
 
-    let len = pathData.length;
-    let c = 0;
-    while (c < len) {
 
-        //let com = pathData[c];
-        let values = pathData[c].values
-        let valLen = values.length;
-
-        // Z commands have no values
-        if (!valLen) {
-            c++; continue
-        }
-
-        let v = 0;
-        while (v < valLen) {
-            pathData[c].values[v] = roundTo(values[v], decimals);
-            v++
-        }
-        c++
-
-    };
-
-    //console.log(pathData);
-    return pathData;
-}

package/src/svgii/svg_cleanup.js

@@ -17,7 +17,7 @@ import { qrDecomposeMatrix } from "./transform_qr_decompose";
 import { svgNs } from "../constants";
 import { toCamelCase, toShortStr } from "../string_helpers";
 import { getElementLength } from "./svg_getElementLength";
-import { removeHiddenSvgEls, removeSvgAtts, removeSvgChildAtts, removeSvgEls } from "./svg_cleanup_remove_els_and_atts";
+import { removeAtts, removeHiddenSvgEls, removeSvgAtts, removeSvgChildAtts, removeSvgEls } from "./svg_cleanup_remove_els_and_atts";
 import { cleanupSVGAttributes, removeElAtts } from "./svg_cleanup_general_svg_atts";
 import { convertPathLengthAtt } from "./svg_cleanup_convertPathLength";
 import { removeGroupProps, ungroupElements } from "./svg_cleanup_ungroup";
@@ -54,7 +54,10 @@ export function cleanUpSVG(svgMarkup, {
   cleanupSVGAtts = true,
   removeNameSpaced = true,
   removeNameSpacedAtts = true,
+
+  // unit conversions
   convertPathLength = false,
+  toAbsoluteUnits = false,
 
   // meta
   allowMeta = false,
@@ -82,10 +85,10 @@ export function cleanUpSVG(svgMarkup, {
 
 
   // resolve dependencies
-  if (unGroup || convertTransforms || minifyRgbColors || attributesToGroup) 
-  stylesToAttributes = true;
+  if (unGroup || convertTransforms || minifyRgbColors || attributesToGroup)
+    stylesToAttributes = true;
 
-  if(stylesToAttributes) cleanUpStrokes = true;
+  if (stylesToAttributes) cleanUpStrokes = true;
 
   // replace namespaced refs 
   if (fixHref) svgMarkup = svgMarkup.replaceAll("xlink:href=", "href=");
@@ -136,7 +139,7 @@ export function cleanUpSVG(svgMarkup, {
     removeClassNames,
     minifyRgbColors,
     stylesheetProps: {},
-    exclude:[]
+    exclude: []
   }
 
   // root svg inline style properties
@@ -235,11 +238,16 @@ export function cleanUpSVG(svgMarkup, {
 
 
     // convert pathLength before transforming
-    if (convertPathLength) {
+    if(convertTransforms || attributesToGroup) convertPathLength=true;
+
+    if (convertPathLength ) {
+      //console.log('convertPathLength', convertPathLength, name);
       styleProps = convertPathLengthAtt(el, { styleProps });
       remove = [...new Set([...remove, ...styleProps.remove])];
+
     }
 
+    //console.log(styleProps);
 
     // get parent styles
     let { parentStyleProps = [] } = el;
@@ -275,9 +283,16 @@ export function cleanUpSVG(svgMarkup, {
     if (stylePropsSVG['class']) delete stylePropsSVG['class']
     if (stylePropsSVG['id']) delete stylePropsSVG['id']
 
+    // add svg props
+    inheritedProps = {
+      ...stylePropsSVG,
+      ...inheritedProps,
+    };
+
+    //console.log('inheritedProps', inheritedProps);
+
     // merge with svg props
     styleProps = {
-      ...stylePropsSVG,
       ...inheritedProps,
       ...styleProps
     }
@@ -287,7 +302,6 @@ export function cleanUpSVG(svgMarkup, {
     addTransFormProps(styleProps, transFormInherited);
     //console.log('transFormInherited', transFormInherited);
     //console.log('styleProps', styleProps);
-
     remove = [...new Set([...remove, ...styleProps.remove])];
 
 
@@ -325,6 +339,46 @@ export function cleanUpSVG(svgMarkup, {
     // general cleanup
     if (cleanupSVGAtts) cleanupSVGAttributes(svg, { removeIds, removeClassNames, removeDimensions, stylesToAttributes, allowMeta, allowAriaAtts, allowDataAtts });
 
+    // all relative units to absolute
+    if (toAbsoluteUnits) {
+      normalizeTransforms = true;
+      //stylesToAttributes = true
+      //console.log(name, styleProps);
+
+      /**
+       * apply consolidated 
+       * element attributes
+       * remove non-supported element props
+       */
+      stylePropsFiltered = filterSvgElProps(name, styleProps,
+        { removeDefaults: true, cleanUpStrokes, allowMeta, allowAriaAtts, allowDataAtts, removeIds, inheritedProps });
+
+
+      for (let prop in stylePropsFiltered.propsFiltered) {
+        let values = styleProps[prop]
+        let val = values.length ? values.join(' ') : values[0]
+        el.setAttribute(prop, val)
+      }
+
+      //console.log('inheritedProps', inheritedProps);
+      //console.log('current props', stylePropsFiltered.propsFiltered);
+
+      let removeAttsEl = [...new Set([...remove, ...stylePropsFiltered.remove])];
+
+      // check if same value is in inherited 
+      for (let prop in stylePropsFiltered.propsFiltered) {
+        let valInh = inheritedProps[prop] || [];
+        let val = stylePropsFiltered.propsFiltered[prop] || [];
+        if (valInh.join() === val.join()) {
+          removeAttsEl.push(prop)
+        }
+      }
+
+      // remove obsolete/inherited
+      removeAtts(el, removeAttsEl)
+
+    }
+
 
 
     if (stylesToAttributes) {
@@ -345,12 +399,9 @@ export function cleanUpSVG(svgMarkup, {
        * remove non-supported element props
        */
       stylePropsFiltered = filterSvgElProps(name, styleProps,
-        { removeDefaults: true, cleanUpStrokes, allowMeta, allowAriaAtts, allowDataAtts, removeIds });
+        { removeDefaults: true, cleanUpStrokes, allowMeta, allowAriaAtts, allowDataAtts, removeIds, inheritedProps });
 
-      //remove = [...remove, ...stylePropsFiltered.remove];
       remove = [...new Set([...remove, ...stylePropsFiltered.remove])];
-      //console.log('el remove', name, remove);
-      //console.log('!!stylePropsFiltered', name, stylePropsFiltered);
 
       for (let prop in stylePropsFiltered.propsFiltered) {
         let values = styleProps[prop]
@@ -363,14 +414,14 @@ export function cleanUpSVG(svgMarkup, {
        * remove obsolete 
        * attributes
        */
-      //removeSvgChildAtts(svg, remove)
+      removeAtts(el, remove)
 
+      /*
       for (let i = 0; i < remove.length; i++) {
         let att = remove[i];
-        //if (att === 'style') continue
-        //console.log('--remove att', remove, att, name);
         el.removeAttribute(att)
       }
+      */
 
 
     } // endof style processing
@@ -396,7 +447,7 @@ export function cleanUpSVG(svgMarkup, {
 
       // scale props like stroke width or dash-array before conversion
       if (matrix && transComponents) {
-        ['stroke-width', 'stroke-dasharray'].forEach(att => {
+        ['stroke-width', 'stroke-dasharray', 'stroke-dashoffset'].forEach(att => {
           let attVal = el.getAttribute(att)
           let vals = attVal ? attVal.split(' ').filter(Boolean).map(Number).map(val => val * transComponents.scaleX) : []
           if (vals.length) el.setAttribute(att, vals.join(' '))
@@ -460,15 +511,15 @@ export function cleanUpSVG(svgMarkup, {
         let values = stylePropsFiltered[prop]
         let val = values.length ? values.join(' ') : values[0]
 
-        if(prop!=='class' && prop!=='id'){
+        if (prop !== 'class' && prop !== 'id') {
 
           let propShort = toShortStr(prop)
           let valShort = toShortStr(val)
           let propStr = `${propShort}-${valShort}`;
-  
+
           // store in node property
           if (!el.styleSet) el.styleSet = new Set()
-          if(propStr) el.styleSet.add(propStr)
+          if (propStr) el.styleSet.add(propStr)
         }
       }
 
@@ -524,7 +575,7 @@ export function cleanUpSVG(svgMarkup, {
 
 
 function removeEmptyClassAtts(svg) {
-  let emptyClassEls = svg.querySelectorAll('[class=""');
+  let emptyClassEls = svg.querySelectorAll('[class=""]');
   emptyClassEls.forEach(el => {
     el.removeAttribute('class')
   })
@@ -538,7 +589,7 @@ function sharedAttributesToGroup(svg) {
 
   let els = svg.querySelectorAll(renderedEls.join(', '))
   let len = els.length;
-  if(len===1) return;
+  if (len === 1) return;
 
   let el0 = els[0] || null
   let stylePrev = el0.styleSet !== undefined ? [...el0.styleSet].join('_') : ''
@@ -623,7 +674,7 @@ function sharedAttributesToGroup(svg) {
 
 
       // create new group
-      if (!groupEl || groups.length>1) {
+      if (!groupEl || groups.length > 1) {
         //console.log('new group');
         groupEl = document.createElementNS(svgNs, 'g')
         child0.parentNode.insertBefore(groupEl, child0)
@@ -719,7 +770,9 @@ function removeOffCanvasEls(svg, { x = 0, y = 0, width = 0, height = 0 } = {}) {
   bb0.bottom = y + height
 
   els.forEach(el => {
+    //console.log(el);
     let bb = getElBBox(el)
+    //console.log('!!bb', bb, el);
     let outside = bb.right < bb0.x || bb.bottom < bb0.y || bb.x > bb0.right || bb.y > bb.bottom
     if (outside) el.remove();
   })

package/src/svgii/svg_cleanup_convertPathLength.js

@@ -1,31 +1,43 @@
+import { scaleProps } from "./svg_cleanup_normalize_transforms";
+import { getElementLength } from "./svg_getElementLength";
+
 export function convertPathLengthAtt(el, {
     styleProps = {}
-}={}) {
+} = {}) {
+
+    let pathLength = styleProps['pathLength'];
+
+    if (pathLength) {
+
+        //let strokeDasharray 
+        if ((styleProps['stroke-dasharray'] || styleProps['stroke-dashoffset'])) {
+            let elLength = getElementLength(el, {
+                pathLength,
+                props: styleProps
+            })
 
-    let pathLength = el.getAttribute('pathLength') ? +el.getAttribute('pathLength') : 0;
-    //let strokeDasharray 
-    if (pathLength && (styleProps['stroke-dasharray'] || styleProps['stroke-dashoffset'])) {
-        let elLength = getElementLength(el, {
-            pathLength,
-            props: styleProps
-        })
 
-        let scale = elLength / pathLength
-        //scale = 1/scale
+            let scale = elLength / pathLength
+            //console.log('elLength', elLength, scale);
 
-        styleProps = scaleProps(styleProps, { props: ['stroke-dasharray', 'stroke-dashoffset'], scale })
-        let [strokeDasharrayN = [], strokeDashoffsetN = []] = [styleProps['stroke-dasharray'], styleProps['stroke-dashoffset']]
-        //if(strokeDasharrayN.length) el.setAttribute('stroke-dasharray', strokeDasharrayN.map(val=>roundTo(val, 3)).join(' '))
-        //if(strokeDashoffsetN.length) el.setAttribute('stroke-dashoffset', strokeDashoffsetN.map(val=>roundTo(val, 3)).join(' '))
+            styleProps = scaleProps(styleProps, { props: ['stroke-dasharray', 'stroke-dashoffset'], scale })
+
+            // set absolute
+            if (styleProps['stroke-dasharray']) el.setAttribute('stroke-dasharray', styleProps['stroke-dasharray'].join(' '))
+            if (styleProps['stroke-dashoffset']) el.setAttribute('stroke-dashoffset', styleProps['stroke-dashoffset'][0])
+
+        }
 
         // tag for removal
         delete styleProps['pathLength'];
         styleProps.remove.push('pathLength')
         el.removeAttribute('pathLength')
 
-        //console.log(name, styleProps, 'pathLength', pathLength, elLength, scale, 'strokeDasharrayN', strokeDasharrayN);
+
     }
 
+    //console.log('pathLength', pathLength);
+    //console.log('styleProps', styleProps );
     return styleProps;
 
 

package/src/svgii/svg_cleanup_normalize_transforms.js

@@ -76,7 +76,7 @@ export function scaleProps(styleProps = {}, { props = [], scale = 1 } = {}, roun
     let prop = props[i];
 
     if (styleProps[prop] !== undefined) {
-      styleProps[prop] = styleProps[prop].map(val => round ? roundTo(val * scale, 2) : val * scale)
+      styleProps[prop] = styleProps[prop].map(val => round ? roundTo(val * scale, 3) : val * scale)
     }
   }
   return styleProps

package/src/svgii/svg_cleanup_remove_els_and_atts.js

@@ -51,11 +51,16 @@ export function removeSvgEls(svg, {
 */
 
 export function removeSvgAtts(svg, remove = []) {
+  removeAtts(svg, remove)
+}
+
+export function removeAtts(el, remove = []) {
   remove.forEach(att => {
-    svg.removeAttribute(att);
+    el.removeAttribute(att);
   })
 }
 
+
 export function removeSvgChildAtts(svg, remove = []) {
   if (remove.length) {
     let selector = remove.map(att => { return `[${att}]` }).join(', ')