svg-path-simplify 0.4.2 → 0.4.4

package/src/svgii/svg_cleanup_convertPathLength.js

@@ -0,0 +1,39 @@
+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 scale = elLength / pathLength
+            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')
+
+
+    }
+
+    return styleProps;
+
+
+}

package/src/svgii/svg_cleanup_general_svg_atts.js

@@ -0,0 +1,97 @@
+/**
+ * general clean up to remove bullshit like
+ * version or enable background
+ */
+
+export function cleanupSVGAttributes(svg, {
+  removeIds = false,
+  removeClassNames = false,
+  removeDimensions = false,
+  stylesToAttributes = false,
+  allowMeta = false,
+  allowAriaAtts = false,
+  allowDataAtts = false,
+} = {}) {
+
+  //console.log('cleanupSVGAtts');
+  let allowed = new Set(['viewBox', 'xmlns', 'width', 'height']);
+
+  if (!removeIds) allowed.add('id')
+  if (!removeClassNames) allowed.add('class')
+  if (removeDimensions) {
+    allowed.delete('width')
+    allowed.delete('height')
+  }
+
+  allowed = Array.from(allowed)
+  if (!stylesToAttributes) {
+    allowed.push('fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'font-size', 'font-family', 'font-style', 'style');
+  }
+
+  removeExcludedAttribues(svg, { allowed, allowMeta, allowAriaAtts, allowDataAtts })
+}
+
+function removeExcludedAttribues(el, {
+  allowed = ['viewBox', 'xmlns', 'width', 'height', 'id', 'class'],
+  allowAriaAtts = true,
+  allowDataAtts = true,
+  allowMeta = false
+} = {}) {
+  let atts = [...el.attributes].map((att) => att.name);
+  atts.forEach((att) => {
+
+    let isMeta = allowMeta && (att === 'title')
+    let isAria = allowAriaAtts && att.startsWith('aria-')
+    let isData = allowDataAtts && att.startsWith('data-')
+    //console.log(att, isData, 'allowDataAtts', allowDataAtts);
+
+    if (
+      !allowed.includes(att) &&
+      !isAria && !isData && !isMeta
+    ) {
+      el.removeAttribute(att);
+    }
+  });
+}
+
+
+
+export function removeNameSpaceAtts(el, {
+  include = ['xlink:href']
+} = {}) {
+  let atts = [...el.attributes].map((att) => att.name);
+  atts.forEach((att) => {
+    if (att.includes(":") && !include.includes(att)) {
+      el.removeAttribute(att);
+    }
+  });
+}
+
+
+export function removeElAtts(el, exclude = [], include = []) {
+  let atts = [...el.attributes].map((att) => att.name);
+  atts.forEach((att) => {
+    if (exclude.includes(att) && !include.includes(att)) {
+      el.removeAttribute(att);
+    }
+  });
+}
+
+
+/*
+
+function cleanSvgPrologue(svgString) {
+  return (
+    svgString
+      // Remove XML prologues like <?xml ... ?>
+      .replace(/<\?xml[\s\S]*?\?>/gi, "")
+      // Remove DOCTYPE declarations
+      .replace(/<!DOCTYPE[\s\S]*?>/gi, "")
+      // Remove comments <!-- ... -->
+      .replace(/<!--[\s\S]*?-->/g, "")
+      // Trim extra whitespace
+      .trim()
+  );
+}
+*/
+

package/src/svgii/svg_cleanup_normalize_transforms.js

@@ -0,0 +1,83 @@
+import { roundTo } from "./rounding";
+
+export function setNormalizedTransformsToEl(el, {
+  styleProps = {},
+} = {}) {
+  let { remove, matrix, transComponents } = styleProps;
+  let name = el.nodeName.toLowerCase()
+
+  if(!matrix) return styleProps;
+
+  let { rotate, scaleX, scaleY, skewX, translateX, translateY } = transComponents;
+  //console.log(rotate, scaleX, scaleY, skewX, skewY, translateX, translateY);
+
+  // scale attributes instead of transform
+  let hasRot = rotate !== 0 || skewX !== 0;
+  let unProportional = scaleX !== scaleY;
+  let scalableByAtt = ['circle', 'ellipse', 'rect']
+  //let needsTrans = (name === 'g') || (hasRot) || unProportional
+  let needsTrans = (hasRot) || unProportional
+  needsTrans = true
+
+  if (!needsTrans && scalableByAtt.includes(name)) {
+
+    if (name === 'circle' || name === 'ellipse') {
+      styleProps.cx[0] = [styleProps.cx[0] * scaleX + translateX]
+      styleProps.cy[0] = [styleProps.cy[0] * scaleX + translateY]
+
+      if (styleProps.r) styleProps.r[0] = [styleProps.r[0] * scaleX]
+      if (styleProps.rx) styleProps.rx[0] = [styleProps.rx[0] * scaleX]
+      if (styleProps.ry) styleProps.ry[0] = [styleProps.ry[0] * scaleX]
+
+    }
+    else if (name === 'rect') {
+      let x = styleProps.x ? styleProps.x[0] + translateX : translateX;
+      let y = styleProps.y ? styleProps.y[0] + translateY : translateY;
+
+      let rx = styleProps.rx ? styleProps.rx[0] * scaleX : 0;
+      let ry = styleProps.ry ? styleProps.ry[0] * scaleY : 0;
+
+      styleProps.x = [x]
+      styleProps.y = [y]
+
+      styleProps.rx = [rx]
+      styleProps.ry = [ry]
+
+      styleProps.width = [styleProps.width[0] * scaleX]
+      styleProps.height = [styleProps.height[0] * scaleX]
+    }
+
+    // remove now obsolete transform properties
+    delete styleProps.matrix
+    delete styleProps.transformArr
+    delete styleProps.transComponents
+
+    // mark transform attribute for removal
+    styleProps.remove.push('transform')
+
+    // scale props like stroke width or dash-array
+    styleProps = scaleProps(styleProps, { props: ['stroke-width', 'stroke-dasharray'], scale: scaleX })
+
+  } else {
+    el.setAttribute('transform', transComponents.matrixAtt)
+
+  }
+
+  return styleProps
+
+}
+
+
+
+export function scaleProps(styleProps = {}, { props = [], scale = 1 } = {}, round = true) {
+  if (scale === 1 || !props.length) return props;
+
+  for (let i = 0; i < props.length; i++) {
+    let prop = props[i];
+
+    if (styleProps[prop] !== undefined) {
+      styleProps[prop] = styleProps[prop].map(val => round ? roundTo(val * scale, 2) : val * scale)
+    }
+  }
+  return styleProps
+}

package/src/svgii/svg_cleanup_remove_els_and_atts.js

@@ -0,0 +1,77 @@
+export function removeHiddenSvgEls(svg) {
+  let els = svg.querySelectorAll('*')
+  els.forEach(el => {
+    let name = el.nodeName.toLowerCase()
+    let style = el.getAttribute('style') || ''
+    let isHiddenByStyle = style ? style.trim().includes('display:none') : false;
+    let isHidden = (el.getAttribute('display') && el.getAttribute('display') === 'none') || isHiddenByStyle;
+    if (isHidden) el.remove();
+  })
+
+}
+
+
+
+
+export function removeSvgEls(svg, {
+  removeElements = [],
+  removeNameSpaced = true,
+} = {}) {
+
+  // always remove scripts
+  removeElements.push('script');
+
+  let els = svg.querySelectorAll('*')
+  let allowMeta = !removeElements.includes('metadata');
+
+  els.forEach(el => {
+    let nodeName = el.nodeName;
+    let isMeta = allowMeta && el.closest('metadata')
+    if (
+      !isMeta &&
+      ((removeNameSpaced && nodeName.includes(':')) ||
+        removeElements.includes(nodeName))
+    ) {
+      el.remove()
+    }
+  })
+}
+
+
+
+/*export function removeSvgEls(svg, remove = []) {
+  // remove elements
+  if (remove.length) {
+    let selector = remove.join(', ').replaceAll(':', '\\:');
+    svg.querySelectorAll(selector).forEach(el => {
+      el.remove()
+    })
+  }
+}
+*/
+
+export function removeSvgAtts(svg, remove = []) {
+  removeAtts(svg, remove)
+}
+
+export function removeAtts(el, remove = []) {
+  remove.forEach(att => {
+    el.removeAttribute(att);
+  })
+}
+
+
+export function removeSvgChildAtts(svg, remove = []) {
+  if (remove.length) {
+    let selector = remove.map(att => { return `[${att}]` }).join(', ')
+      // escape name spaced
+      .replaceAll(':', '\\:')
+
+    svg.querySelectorAll(selector).forEach(el => {
+      remove.forEach(att => {
+        el.removeAttribute(att);
+      })
+    })
+  }
+};
+

package/src/svgii/svg_cleanup_ungroup.js

@@ -0,0 +1,36 @@
+import { getElementAtts } from "../svg-getAttributes";
+
+export function ungroupElements(groups) {
+  groups.forEach((g, i) => {
+    let children = [...g.children];
+
+    children.forEach(child => {
+      g.parentNode.insertBefore(child, g)
+    })
+    g.remove()
+  })
+}
+
+
+export function removeGroupProps(groups, {
+  remove = [],
+  allowDataAtts = true,
+  allowAriaAtts = true
+} = {}) {
+
+  groups.forEach((g, i) => {
+    let atts = Object.keys(getElementAtts(g));
+
+    atts.forEach(att => {
+      //console.log('remove', remove);
+      let isData = !allowDataAtts && att.startsWith('data-')
+      let isAria = !allowAriaAtts && att.startsWith('aria-')
+      //console.log(isData, att);
+      //styleProps.remove.push('transform', 'style')
+      if (remove.includes(att) || isData || isAria) {
+        g.removeAttribute(att)
+      }
+    })
+  })
+
+}

package/src/svgii/svg_el_parse_style_props.js

@@ -18,16 +18,19 @@ export function parseStylesProperties(el, {
     autoRoundValues = false,
     minifyRgbColors = false,
     removeInvalid = true,
+    allowDataAtts = true,
+    allowAriaAtts = true,
     removeDefaults = true,
     cleanUpStrokes = true,
     normalizeTransforms = true,
-    removeIds=false,
-    removeClassNames=false,
+    removeIds = false,
+    removeClassNames = false,
 
-    include=[],
+    include = [],
     exclude = [],
     width = 0,
     height = 0,
+    stylesheetProps = {}
 } = {}) {
 
     //autoRoundValues = false;
@@ -35,22 +38,52 @@ export function parseStylesProperties(el, {
 
     let nodeName = el.nodeName.toLowerCase();
     let attProps = getSvgPresentationAtts(el)
-    let cssProps = getSvgCssProps(el)
+    let inlineCssProps = getSvgCssProps(el)
+
+    // get CSS properties from SVG style element
+    let cssRuleSelectors = el.cssRules || [];
+    let cssProps = {};
+
+    cssRuleSelectors.forEach(selector => {
+        for (let prop in stylesheetProps[selector]) {
+            let val = stylesheetProps[selector][prop];
+            //console.log('!!val', val);
+
+            // check CSS vars
+            if (val.startsWith('var(')) {
+                let varName = val.replace(/[var\(|\)]/g, '').trim()
+                //console.log('!!isvar', val, varName, stylesheetProps[':root']);
+                if (stylesheetProps[':root']) {
+                    val = `var(${varName}, ${stylesheetProps[':root'][varName]})`
+                }
+            }
+            cssProps[prop] = val
+        }
+    })
+
+    //console.log('cssProps', cssProps);
+    //console.log('styleSheetProps', cssRuleSelectors, stylesheetProps);
 
     /**
-     * merge props
-     * CSS has higher specificity
+     * merge props by specificity
+     * 1. attributes
+     * 2. CSS rules
+     * 3. inline CSS
      */
     let props = {
         ...attProps,
         ...cssProps,
+        ...inlineCssProps,
     }
 
     //console.log('!props combined', props);
 
-
+    // obsolete/not style relevant anymore
     delete props['style'];
-    exclude.push('style')
+    delete props['class'];
+    delete props['id'];
+
+    exclude.push('style', 'class', 'id')
 
     let remove = ['style']
     let transformsStandalone = ['scale', 'translate', 'rotate'];
@@ -61,9 +94,10 @@ export function parseStylesProperties(el, {
      */
 
     if (removeInvalid || removeDefaults || removeNameSpaced) {
-        let propsFilteredObj = filterSvgElProps(nodeName, props, { removeIds, removeClassNames, removeDefaults, removeNameSpaced, exclude, cleanUpStrokes, include: [...transformsStandalone, ...include], cleanUpStrokes: false })
+        let propsFilteredObj = filterSvgElProps(nodeName, props, { allowDataAtts, allowAriaAtts, removeIds, removeClassNames, removeDefaults, removeNameSpaced, exclude, cleanUpStrokes, include: [...transformsStandalone, ...include], cleanUpStrokes: false })
         props = propsFilteredObj.propsFiltered
         remove.push(...propsFilteredObj.remove)
+        //console.log(propsFilteredObj.remove, allowDataAtts, allowAriaAtts);
     }
 
     //console.log('???props', nodeName,  props, remove);
@@ -84,11 +118,16 @@ export function parseStylesProperties(el, {
 
         // minify rgb values
         if (minifyRgbColors && colorProps.includes(prop)) {
+            //console.log(minifyRgbColors, nodeName, prop, valueStr);
+
             let color = parseColor(valueStr)
+
             if (color.mode === 'rgba' || color.mode === 'rgb') {
                 let hex = rgba2Hex(color)
                 valueStr = hex;
             }
+            //console.log(nodeName, color, valueStr);
+
         }
 
 
@@ -131,7 +170,6 @@ export function parseStylesProperties(el, {
         else {
             //console.log('other', prop);
             item.values = parseValue(valueStr);
-
         }
 
         if (item.values.length) {
@@ -158,10 +196,11 @@ export function parseStylesProperties(el, {
 
         if (prop !== 'transforms') {
 
-            if (cleanUpStrokes && (prop === 'stroke-dasharray' || prop === 'stroke-dashoffset')) {
+            //cleanUpStrokes &&
+            if ((prop === 'stroke-dasharray' || prop === 'stroke-dashoffset')) {
                 normalizedDiagonal = true
                 for (let i = 0; i < values.length; i++) {
-                    let val = normalizeUnits(values[i].value, { unit: values[i].unit, width, height, normalizedDiagonal, fontSize })
+                    let val = normalizeUnits(values[i].value, { unit: values[i].unit, width, height, normalizedDiagonal, fontSize, autoRoundValues })
                     valsNew.push(val)
                 }
             }
@@ -206,14 +245,12 @@ export function parseStylesProperties(el, {
                         if (prop === 'scale' && unit === '%') {
                             valAbs = valAbs * 0.01;
                         } else {
-                            if (prop === 'r') normalizedDiagonal = true;
+                            if (prop === 'r' && width!==height)  normalizedDiagonal = true;
                             valAbs = normalizeUnits(val.value, { unit, width, height, isHorizontal, isVertical, normalizedDiagonal, fontSize })
 
                             if (autoRoundValues && isNumeric) {
                                 valAbs = autoRound(valAbs)
                             }
-
-                            //console.log('norm', prop, valAbs, 'val', val, unit, isHorizontal, isVertical, width, height, 'isNumeric', isNumeric);
                         }
                     }
                     valsNew.push(valAbs)
@@ -423,23 +460,25 @@ export function filterSvgElProps(elNodename = '', props = {}, {
     allowAriaAtts = false,
     cleanUpStrokes = true,
     //include = ['id', 'class'],
-    include=[],
-    removeIds=false, 
-    removeClassNames=false,
+    include = [],
+    removeIds = false,
+    removeClassNames = false,
     exclude = [],
+    inheritedProps = null,
 } = {}) {
     let propsFiltered = {}
     let remove = [];
 
-    if(!removeIds) include.push('id')
-    if(!removeClassNames) include.push('class')
+    if (!removeIds) include.push('id')
+    if (!removeClassNames) include.push('class')
     //console.log('???include', 'removeIds', removeIds, include);
 
+
     // allow defaults for nested
     //removeDefaults = false;
 
-    let noStrokeColor = cleanUpStrokes ? (props['stroke'] === undefined) : false;
-    //console.log('noStrokeColor', elNodename, 'cleanUpStrokes', cleanUpStrokes);
+    let noStrokeColor = cleanUpStrokes ? (props['stroke'] === undefined || props['stroke'][0] === 'none') : false;
+    //console.log('noStrokeColor', elNodename, 'cleanUpStrokes', cleanUpStrokes, 'noStrokeColor', noStrokeColor);
 
     for (let prop in props) {
         let values = props[prop]
@@ -451,13 +490,16 @@ export function filterSvgElProps(elNodename = '', props = {}, {
             (attLookup.atts[prop] ? attLookup.atts[prop].includes(elNodename) : false) :
             false;
 
+
         // remove null transforms
         if (prop === 'transform' && value === 'matrix(1 0 0 1 0 0)') isValid = false;
 
         // allow data attributes
-        let isDataAtt = allowDataAtts ? prop.startsWith('data-') : false;
-        let isMeta = allowMeta && prop === 'title'
-        let isAria = allowAriaAtts && prop.startsWith('aria-')
+        let isDataAtt = prop.startsWith('data-') ? true : false;
+        let isMeta = prop === 'title'
+        let isAria = prop.startsWith('aria-')
+
+        if ((allowDataAtts && isDataAtt) || (allowAriaAtts && isAria) || (allowMeta && isMeta)) continue
 
         // filter out defaults
         let isDefault = removeDefaults ?
@@ -468,16 +510,7 @@ export function filterSvgElProps(elNodename = '', props = {}, {
 
         if (isDefault || isDataAtt || isMeta || isAria || isFutileStroke) isValid = false
         if (include.includes(prop)) isValid = true;
-
-        //console.log('!valid', prop, isValid);
-
-
-        /*
-        if (isDataAtt || include.includes(prop)) isValid = true;
-        if (isDefault) isValid = false
-        if (exclude.length && exclude.includes(prop)) isValid = false;
-        if (noStrokeColor && strokeAtts.includes(prop)) isValid = false
-        */
+        if (exclude.includes(prop)) isValid = false
 
 
         if (isValid) {
@@ -489,23 +522,15 @@ export function filterSvgElProps(elNodename = '', props = {}, {
         }
     }
 
-    /*
-    // set explicit stroke width when disabled by stroke color
-    if (propsFiltered['stroke'] && propsFiltered['stroke'][0] === 'none') {
-        propsFiltered['stroke-width'] = [1]
-        remove.push('stroke', 'stroke-width')
-        console.log('remove', remove);
-    }
-    */
-
-
-    //remove=[]
     return { propsFiltered, remove }
 }
 
 
 export function parseValue(valStr = '') {
-    let valArr = valStr.split(/,| /);
+    //exclude url or var functions or font family
+    //let exclude = ['font-family', 'url', 'var'];
+    valStr = valStr.replace('!important', '');
+    let valArr = (valStr.includes("'") || valStr.includes('(') || valStr.includes(')')) ? [valStr] : valStr.split(/,| /).filter(Boolean);
 
     for (let i = 0; i < valArr.length; i++) {
 

package/src/svgii/svg_getElementLength.js

@@ -0,0 +1,67 @@
+import { getElementAtts } from "../svg-getAttributes";
+import { getDistance } from "./geometry";
+import { getEllipseLength, getPolygonLength } from "./geometry_length";
+import { parsePathDataNormalized } from "./pathData_convert";
+import { getPathDataLength } from "./pathData_getLength";
+import { getPathDataFromEl, rectToPathData } from "./pathData_parse_els";
+import { normalizePoly } from "./poly_normalize";
+
+export function getElementLength(el, {
+    props = {},
+    pathLength = 0,
+} = {}) {
+
+
+    let nodeName = el.nodeName;
+    let len = 0;
+
+    props = JSON.parse(JSON.stringify(props))
+
+    for (let prop in props) {
+        if (props[prop] && props[prop].length && props[prop].length === 1) {
+            props[prop] = props[prop][0]
+            //console.log(prop, props[prop]);
+        }
+    }
+
+    //console.log(props);
+    let { x = 0, y = 0, x1 = 0, y1 = 0, x2 = 0, y2 = 0, width = 0, height = 0, r = 0, rx = 0, ry = 0, cx = 0, cy = 0 } = props;
+
+    let pts = nodeName === 'polygon' || nodeName === 'polyline' ? el.getAttribute('points') : [];
+    let isPolygon = nodeName === 'polygon';
+    if (pts.length) {
+        pts = normalizePoly(pts);
+    }
+
+    // we need to convert rects with corner rounding
+    let pathData = []
+    if (nodeName === 'rect' && (rx || ry)) {
+        pathData = rectToPathData(x, y, width, height, rx, ry)
+        nodeName = 'path'
+    }
+
+    switch (nodeName) {
+        case 'line':
+            len = getDistance({ x: x1, y: y1 }, { x: x2, y: y2 });
+            break;
+        case 'rect':
+            len = width * 2 + height * 2;
+            break;
+        case 'circle':
+            len = 2 * Math.PI * r;
+            break;
+        case 'ellipse':
+            len = getEllipseLength(rx, ry);
+            break;
+        case 'polygon':
+        case 'polyline':
+            len = getPolygonLength(pts, isPolygon)
+            break;
+        case 'path':
+            pathData = pathData.length ? pathData : parsePathDataNormalized(el.getAttribute('d'));
+            len = getPathDataLength(pathData);
+            break;
+    }
+
+    return len
+}