svg-path-simplify 0.4.5 → 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,20 +268,18 @@ 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 (convertTransforms || attributesToGroup) convertPathLength = true;
 
-    if (convertPathLength ) {
-      //console.log('convertPathLength', convertPathLength, name);
+    if (convertPathLength) {
       styleProps = convertPathLengthAtt(el, { styleProps });
       remove = [...new Set([...remove, ...styleProps.remove])];
-
     }
 
-    //console.log(styleProps);
 
     // get parent styles
     let { parentStyleProps = [] } = el;
@@ -255,7 +287,6 @@ export function cleanUpSVG(svgMarkup, {
     let transFormInherited = []
 
 
-
     /** 
      * consolidate all properties:
      * merge with inherited transforms 
@@ -288,7 +319,6 @@ export function cleanUpSVG(svgMarkup, {
       ...stylePropsSVG,
       ...inheritedProps,
     };
-
     //console.log('inheritedProps', inheritedProps);
 
     // merge with svg props
@@ -304,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 
@@ -381,6 +376,7 @@ export function cleanUpSVG(svgMarkup, {
 
 
 
+
     if (stylesToAttributes) {
 
       /**
@@ -390,7 +386,6 @@ export function cleanUpSVG(svgMarkup, {
         styleProps = setNormalizedTransformsToEl(el, { styleProps });
         //remove = styleProps.remove;
         remove = [...new Set([...remove, ...styleProps.remove])];
-
       }
 
       /**
@@ -401,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) {
@@ -416,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
 
 

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)

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)
 
 }
+*/
 
 
 /**