svg-path-simplify 0.4.4 → 0.4.6

package/src/svgii/svg_cleanup.js

@@ -22,7 +22,7 @@ import { cleanupSVGAttributes, removeElAtts } from "./svg_cleanup_general_svg_at
 import { convertPathLengthAtt } from "./svg_cleanup_convertPathLength";
 import { removeGroupProps, ungroupElements } from "./svg_cleanup_ungroup";
 import { parseSvgCss } from "../css_parse";
-import { setNormalizedTransformsToEl } from "./svg_cleanup_normalize_transforms";
+import { scaleProps, setNormalizedTransformsToEl } from "./svg_cleanup_normalize_transforms";
 
 
 export function cleanUpSVG(svgMarkup, {
@@ -212,6 +212,40 @@ export function cleanUpSVG(svgMarkup, {
   })
 
 
+/**
+     * remove els and attributes
+     */
+
+    // remove meta
+    if (!allowMeta) removeElements.push('meta', 'metadata', 'desc', 'title')
+
+    if (removeClassNames) {
+      removeSVGAttributes.push('class');
+      removeElAttributes.push('class');
+    }
+
+    if (removeIds) {
+      removeSVGAttributes.push('id')
+      removeElAttributes.push('id')
+    }
+
+
+    // remove hidden elements
+    removeHiddenSvgEls(svg)
+
+    // remove SVG elements
+    removeSvgEls(svg, { removeElements, removeNameSpaced });
+
+    // remove SVG attributes
+    removeSvgAtts(svg, removeSVGAttributes);
+
+    // remove SVG child element attributes
+    removeSvgChildAtts(svg, removeElAttributes);
+
+
+    // general cleanup
+    if (cleanupSVGAtts) cleanupSVGAttributes(svg, { removeIds, removeClassNames, removeDimensions, stylesToAttributes, allowMeta, allowAriaAtts, allowDataAtts });
+
 
   // collect all elements' properties
   let svgElProps = []
@@ -234,10 +268,13 @@ export function cleanUpSVG(svgMarkup, {
      */
     let styleProps = parseStylesProperties(el, propOptions)
     let stylePropsFiltered = {}
-    //console.log('styleProps', name, styleProps);
 
+    // reset remove array
+    remove = [];
 
     // convert pathLength before transforming
+    if (convertTransforms || attributesToGroup) convertPathLength = true;
+
     if (convertPathLength) {
       styleProps = convertPathLengthAtt(el, { styleProps });
       remove = [...new Set([...remove, ...styleProps.remove])];
@@ -250,7 +287,6 @@ export function cleanUpSVG(svgMarkup, {
     let transFormInherited = []
 
 
-
     /** 
      * consolidate all properties:
      * merge with inherited transforms 
@@ -283,7 +319,6 @@ export function cleanUpSVG(svgMarkup, {
       ...stylePropsSVG,
       ...inheritedProps,
     };
-
     //console.log('inheritedProps', inheritedProps);
 
     // merge with svg props
@@ -299,46 +334,11 @@ export function cleanUpSVG(svgMarkup, {
     //console.log('styleProps', styleProps);
     remove = [...new Set([...remove, ...styleProps.remove])];
 
-
-    /**
-     * remove els and attributes
-     */
-
-    // remove meta
-    if (!allowMeta) removeElements.push('meta', 'metadata', 'desc', 'title')
-
-    if (removeClassNames) {
-      removeSVGAttributes.push('class');
-      removeElAttributes.push('class');
-    }
-
-    if (removeIds) {
-      removeSVGAttributes.push('id')
-      removeElAttributes.push('id')
-    }
-
-
-    // remove hidden elements
-    removeHiddenSvgEls(svg)
-
-    // remove SVG elements
-    removeSvgEls(svg, { removeElements, removeNameSpaced });
-
-    // remove SVG attributes
-    removeSvgAtts(svg, removeSVGAttributes);
-
-    // remove SVG child element attributes
-    removeSvgChildAtts(svg, removeElAttributes);
-
-
-    // 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 
@@ -376,6 +376,7 @@ export function cleanUpSVG(svgMarkup, {
 
 
 
+
     if (stylesToAttributes) {
 
       /**
@@ -385,7 +386,6 @@ export function cleanUpSVG(svgMarkup, {
         styleProps = setNormalizedTransformsToEl(el, { styleProps });
         //remove = styleProps.remove;
         remove = [...new Set([...remove, ...styleProps.remove])];
-
       }
 
       /**
@@ -396,6 +396,7 @@ export function cleanUpSVG(svgMarkup, {
       stylePropsFiltered = filterSvgElProps(name, styleProps,
         { removeDefaults: true, cleanUpStrokes, allowMeta, allowAriaAtts, allowDataAtts, removeIds, inheritedProps });
 
+
       remove = [...new Set([...remove, ...stylePropsFiltered.remove])];
 
       for (let prop in stylePropsFiltered.propsFiltered) {
@@ -411,14 +412,6 @@ export function cleanUpSVG(svgMarkup, {
        */
       removeAtts(el, remove)
 
-      /*
-      for (let i = 0; i < remove.length; i++) {
-        let att = remove[i];
-        el.removeAttribute(att)
-      }
-      */
-
-
     } // endof style processing
 
 
@@ -442,7 +435,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(' '))
@@ -767,7 +760,7 @@ function removeOffCanvasEls(svg, { x = 0, y = 0, width = 0, height = 0 } = {}) {
   els.forEach(el => {
     //console.log(el);
     let bb = getElBBox(el)
-    //console.log('!!bb', bb);
+    //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

@@ -16,7 +16,10 @@ export function convertPathLengthAtt(el, {
                 props: styleProps
             })
 
+
             let scale = elLength / pathLength
+            //console.log('elLength', elLength, scale);
+
             styleProps = scaleProps(styleProps, { props: ['stroke-dasharray', 'stroke-dashoffset'], scale })
 
             // set absolute
@@ -33,6 +36,8 @@ export function convertPathLengthAtt(el, {
 
     }
 
+    //console.log('pathLength', pathLength);
+    //console.log('styleProps', styleProps );
     return styleProps;
 
 

package/src/svgii/svg_cleanup_normalize_transforms.js

@@ -56,7 +56,7 @@ export function setNormalizedTransformsToEl(el, {
     styleProps.remove.push('transform')
 
     // scale props like stroke width or dash-array
-    styleProps = scaleProps(styleProps, { props: ['stroke-width', 'stroke-dasharray'], scale: scaleX })
+    styleProps = scaleProps(styleProps, { props: ['stroke-width', 'stroke-dasharray', 'stroke-dashoffset'], scale: scaleX })
 
   } else {
     el.setAttribute('transform', transComponents.matrixAtt)
@@ -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/visualize.js

@@ -233,6 +233,36 @@ export function renderPoint(
 }
 
 
+export function renderCircle(
+    svg,
+    coords,
+    stroke = "red",
+    r = "1%",
+    opacity = "1",
+    strokeWidth="1%",
+    title = '',
+    render = true,
+    id = "",
+    className = ""
+) {
+    if (Array.isArray(coords)) {
+        coords = {
+            x: coords[0],
+            y: coords[1]
+        };
+    }
+    let marker = `<circle class="${className}" opacity="${opacity}" id="${id}" cx="${coords.x}" cy="${coords.y}" r="${r}" stroke="${stroke}" stroke-width="${strokeWidth}">
+  <title>${title}</title></circle>`;
+
+    if (render) {
+        svg.insertAdjacentHTML("beforeend", marker);
+    } else {
+        return marker;
+    }
+}
+
+
+
 export function renderPath(svg, d = '', stroke = 'green', strokeWidth = '1%', opacity="1", render = true) {
 
     let path = `<path d="${d}" fill="none" stroke="${stroke}"  stroke-width="${strokeWidth}" stroke-opacity="${opacity}" /> `;
@@ -250,7 +280,7 @@ export function renderPath(svg, d = '', stroke = 'green', strokeWidth = '1%', op
 
 
 // debug helper: render lines
-export function renderPoly(svg, pts, stroke = "purple", strokeWidth = "1%",  fillOpacity="0.5", fill="none", polygon=true , render = true) {
+export function renderPoly(svg, pts, stroke = "purple", strokeWidth = "1%",  fillOpacity="0.5", fill="none", polygon=false , render = true) {
     pts = pts.map(pt => { return [pt.x, pt.y] }).flat().join(' ');
     
 
@@ -280,7 +310,7 @@ export function renderPerpendicularLine(pt, len = 10, angle) {
 }
 
 
-
+/*
 export function addMarkers() {
 
 
@@ -310,6 +340,7 @@ export function addMarkers() {
     document.body.insertAdjacentHTML('afterbegin', style + markerMarkup)
 
 }
+*/
 
 
 /**