svg-path-simplify 0.3.6 → 0.4.1

package/src/svgii/svg_el_parse_style_props.js

@@ -4,27 +4,35 @@
  */
 
 import { rad2Deg } from "../constants";
+import { parseColor, rgba2Hex } from "./convert_colors";
 import { getUnit, isNumericValue, normalizeUnits } from "./convert_units";
-import { autoRound } from "./rounding";
-import { attLookup, horizontalProps, strokeAtts, verticalProps } from "./svg-styles-to-attributes-const";
+import { autoRound, roundTo } from "./rounding";
+import { getMatrixFromTransform } from "./svg-styles-getTransforms";
+import { attLookup, colorProps, horizontalProps, strokeAtts, transHorizontal, transVertical, verticalProps } from "./svg-styles-to-attributes-const";
+import { qrDecomposeMatrix } from "./transform_qr_decompose";
+
 
 export function parseStylesProperties(el, {
+    fontSize = 16,
     removeNameSpaced = true,
-    autoRoundValues = true,
+    autoRoundValues = false,
+    minifyRgbColors = false,
     removeInvalid = true,
     removeDefaults = true,
     cleanUpStrokes = true,
+    normalizeTransforms = true,
     exclude = [],
     width = 0,
     height = 0,
 } = {}) {
 
+    //autoRoundValues = false;
+
+
     let nodeName = el.nodeName.toLowerCase();
     let attProps = getSvgPresentationAtts(el)
     let cssProps = getSvgCssProps(el)
 
-    console.log('cssProps', cssProps);
-
     /**
      * merge props
      * CSS has higher specificity
@@ -34,29 +42,27 @@ export function parseStylesProperties(el, {
         ...cssProps,
     }
 
+    //console.log('!props combined', props);
+
+
     delete props['style'];
     exclude.push('style')
 
     let remove = ['style']
-
     let transformsStandalone = ['scale', 'translate', 'rotate'];
 
-    //let testProp = normalizeUnits(0.5, {unit:'turn'})
-    //console.log('testProp', testProp);
-
-
     /**
      * remove invalid properties 
      * e.g font-family for <path>
      */
 
     if (removeInvalid || removeDefaults || removeNameSpaced) {
-        let propsFilteredObj = filterSvgElProps(nodeName, props, { removeDefaults, removeNameSpaced, exclude, cleanUpStrokes, include: transformsStandalone })
+        let propsFilteredObj = filterSvgElProps(nodeName, props, { removeDefaults, removeNameSpaced, exclude, cleanUpStrokes, include: transformsStandalone, cleanUpStrokes: false })
         props = propsFilteredObj.propsFiltered
         remove.push(...propsFilteredObj.remove)
     }
 
-    //console.log('!!!props', props, remove);
+    //console.log('???props', nodeName,  props, remove);
 
     // sanitized prop array
     let propArr = []
@@ -66,31 +72,48 @@ export function parseStylesProperties(el, {
         let valueStr = props[prop];
 
         // we parse the path data separately
-        if (prop === 'd') continue;
+        if (prop === 'd' || prop.startsWith('data-')) {
+            continue;
+        }
 
         let item = { prop, values: [] }
 
+        // minify rgb values
+        if (minifyRgbColors && colorProps.includes(prop)) {
+            let color = parseColor(valueStr)
+            if (color.mode === 'rgba' || color.mode === 'rgb') {
+                let hex = rgba2Hex(color)
+                valueStr = hex;
+            }
+        }
+
+
         if (prop === 'transform') {
-            //let regex = /(\w+)\(([^)]+)\)/g;
-            //let match;
             let transArr = []
 
             //split transform functions
             let transFormFunctions = valueStr.split(/(\w+)\(([^)]+)\)/).map(val => val.trim()).filter(Boolean)
-            //console.log(transFormFunctions);
 
             for (let i = 1; i < transFormFunctions.length; i += 2) {
                 let fn = transFormFunctions[i - 1];
+                let isHorizontal = transHorizontal.includes(fn);
+                let isVertical = transVertical.includes(fn);
+                if (isHorizontal) fn = fn.replace('X', '')
+                if (isVertical) fn = fn.replace('Y', '')
                 let values = transFormFunctions[i].split(/,| /).filter(Boolean)
                 let transItem = { fn, values: [] }
 
                 for (let v = 0; v < values.length; v++) {
-                    //let { value, unit } = parseValue(values[v])
                     let transValues = parseValue(values[v])
-                    //console.log('!!!transValues', transValues);
                     transItem.values.push(...transValues)
-                    //transItem.units.push(unit)
                 }
+
+                let defaultX = fn.startsWith('scale') ? 1 : 0;
+                let defaultY = fn.startsWith('scale') ? 1 : 0;
+
+                if (isHorizontal) transItem.values = [transItem.values[0], { value: defaultX, unit: '', numeric: true }]
+                if (isVertical) transItem.values = [{ value: defaultY, unit: '', numeric: true }, transItem.values[0]]
+
                 transArr.push(transItem)
             }
 
@@ -98,12 +121,13 @@ export function parseStylesProperties(el, {
             if (transArr.length) {
                 propArr.push({ prop: 'transforms', values: transArr })
             }
-            //console.log('transArr', transArr); 
         }
-        // other propa
+
+        // other props
         else {
+            //console.log('other', prop);
             item.values = parseValue(valueStr);
-            //item[prop] = (valueStr);
+
         }
 
         if (item.values.length) {
@@ -117,21 +141,28 @@ export function parseStylesProperties(el, {
      * user units
      */
 
-    console.log('!!!propArr', propArr);
+    //console.log('!!!propArr', propArr);
 
-    let propsNorm = {}
+    let propsNorm = { transformArr: [], matrix: null, transComponents: null }
     let transFormOrigin = []
+    let normalizedDiagonal = false;
 
     for (let i = 0; i < propArr.length; i++) {
         let item = propArr[i];
         let { prop, values } = item;
-        //let itemN = {prop}
         let valsNew = [], valX = 0, valY = 0, unitX = '', unitY = '';
 
         if (prop !== 'transforms') {
-            //console.log('---prop', prop, values, width, height);
 
-            if (prop === 'transform-origin') {
+            if (cleanUpStrokes && (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 })
+                    valsNew.push(val)
+                }
+            }
+
+            else if (prop === 'transform-origin') {
 
                 values.forEach((item, i) => {
                     let val = item.value
@@ -148,9 +179,8 @@ export function parseStylesProperties(el, {
                 unitY = values[1] ? values[1].unit : unitX;
 
                 // normalize units for matrix calculation
-                valX = normalizeUnits(valX, { unit: unitX, width, height, isHorizontal: true, autoRoundValues })
-                valY = normalizeUnits(valY, { unit: unitY, width, height, isVertical: true, autoRoundValues })
-
+                valX = normalizeUnits(valX, { unit: unitX, width, height, isHorizontal: true, fontSize })
+                valY = normalizeUnits(valY, { unit: unitY, width, height, isVertical: true, fontSize })
                 transFormOrigin.push(valX, valY)
 
 
@@ -159,35 +189,53 @@ export function parseStylesProperties(el, {
                 for (let v = 0; v < values.length; v++) {
                     let val = values[v];
 
-                    let unit = val.unit[v];
+                    //let unit = val.unit[v];
+                    let unit = val.unit;
                     let valAbs = val.value;
+                    let isNumeric = val.numeric
 
                     let isHorizontal = horizontalProps.includes(prop)
                     let isVertical = verticalProps.includes(prop)
 
+
                     if (unit) {
-                        valAbs = normalizeUnits(val.value, { unit, width, height, isHorizontal, isVertical, autoRoundValues })
-                        //if (autoRoundValues) valAbs = autoRound(valAbs)
+                        if (prop === 'scale' && unit === '%') {
+                            valAbs = valAbs * 0.01;
+                        } else {
+                            if (prop === 'r') 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)
                 }
-
             }
 
-            //propsNorm[prop] = valsNew.length === 1 ? valsNew[0] : valsNew;
             if (valsNew.length) propsNorm[prop] = valsNew;
 
-        } else {
+        }
+
+        // is transform properties and functions
+        else {
 
             let transforms = values || []
-            //console.log('transforms', transforms, prop, item);
 
             let len = transforms.length
-            let transFormAll = []
+            let transFormAllObj = [];
+
             for (let t = 0; len && t < len; t++) {
                 let { fn, values } = transforms[t];
-                let valsN = [], valX = 0, valY = 0, unitX = '', unitY = '', transformFunction = [];
+                let valsN = [], unitX = '', unitY = '', transformFunctionArr = [];
+
+                // defaults
+                let valX = 0;
+                let valY = 0;
+                let transObj = {}
 
                 // console.log('!!!values', values);
                 if (fn === 'scale' || fn === 'translate') {
@@ -197,17 +245,46 @@ export function parseStylesProperties(el, {
                     unitY = values[1] ? values[1].unit : unitX;
 
                     if (fn === 'scale') {
-                        valX = unitX = '%' ? valX / 100 : valX
-                        valY = unitY = '%' ? valY / 100 : valY
-
+                        valX = unitX === '%' ? valX * 0.01 : valX
+                        valY = unitY === '%' ? valY * 0.01 : valY
                     } else {
-                        valX = normalizeUnits(valX, { unit: unitX, width, height, isHorizontal: true, autoRoundValues })
-                        valY = normalizeUnits(valY, { unit: unitY, width, height, isVertical: true, autoRoundValues })
+                        valX = normalizeUnits(valX, { unit: unitX, width, height, isHorizontal: true, fontSize })
+                        valY = normalizeUnits(valY, { unit: unitY, width, height, isVertical: true, fontSize })
 
                     }
                     valsN.push(valX, valY)
 
-                    transformFunction.push(`${fn}(${valsN.join(' ')})`)
+                    transObj[fn] = valsN;
+                    transformFunctionArr.push(transObj)
+
+                }
+
+                if (fn === 'matrix') {
+                    valsN = values.map(val => val.value)
+                    transObj[fn] = valsN;
+                    transformFunctionArr.push(transObj)
+                }
+
+                if (fn === 'skew') {
+                    //valsN = values.map(val => val.value)
+                    valX = values[0].value
+                    unitX = values[0].unit
+                    valY = values[1].value
+                    unitY = values[1].unit
+                    //console.log(unitX, unitY);
+
+                    valX = normalizeUnits(valX, { unit: unitX, isHorizontal: true, fontSize })
+                    valY = normalizeUnits(valY, { unit: unitY, isVertical: true, fontSize })
+
+                    // normalize large angles
+                    valX = valX > 360 ? (valX % 360) : valX
+                    valY = valY > 360 ? (valY % 360) : valY
+
+                    //console.log('skew', valX);
+
+                    valsN = [valX, valY]
+                    transObj[fn] = valsN;
+                    transformFunctionArr.push(transObj)
 
                 }
 
@@ -216,69 +293,116 @@ export function parseStylesProperties(el, {
 
                     let angle = values[0].value;
                     let unit = values[0].unit;
-                    angle = normalizeUnits(angle, { unit, autoRoundValues })
-                    //if(unit==='rad') angle = angle*rad2Deg;
-                    let rot = [`${fn}(${angle})`]
+                    angle = normalizeUnits(angle, { unit })
+                    //let rot = [`${fn}(${angle})`]
+                    let hasPivot = values.length === 3;
+                    let transOrigin = [];
 
-                    if (values.length === 3) {
+                    //console.log('values', values);
+                    if (hasPivot) {
                         //console.log('has pivot point');
                         let cx = values[1].value
                         let cy = values[2].value
-                        rot = [`translate(${cx} ${cy})`, rot[0], `translate(${-cx} ${-cy})`]
+                        transOrigin.push({ translate: [cx, cy] }, { translate: [-cx, -cy] })
+
                     }
-                    //transFormAll.push(...rot)
-                    transformFunction = rot
 
+                    transObj[fn] = [angle];
+
+                    if (transOrigin.length) {
+                        transformFunctionArr.push(transOrigin[0], transObj, transOrigin[1])
+                    } else {
+                        transformFunctionArr.push(transObj)
+                    }
                 }
 
-                //transFormAll.push(`${fn}(${valsN.join(' ')})`)
-                transFormAll.push(...transformFunction)
-                //console.log('transFormAll', transFormAll);
+                transFormAllObj.push(...transformFunctionArr)
 
             }
 
-            propsNorm['transform'] = transFormAll
+            //propsNorm['transform'] = transFormAll
+            propsNorm['transformArr'] = transFormAllObj
 
         }
 
-
         //console.log('transFormOrigin', transFormOrigin);
 
     }
 
 
-    // append standalone transforms
-    let translate = propsNorm['translate'] !== undefined ? `translate(${propsNorm['translate'].join(' ')})` : null;
-    let scale = propsNorm['scale'] !== undefined ? `scale(${propsNorm['scale'].join(' ')})` : null;
-    let rotate = propsNorm['rotate'] !== undefined ? `rotate(${propsNorm['rotate'].join(' ')})` : null;
-
+    // prepend standalone transforms before standards
+    let translate = propsNorm['translate'] !== undefined ? { translate: propsNorm['translate'] } : null;
+    let scale = propsNorm['scale'] !== undefined ? { scale: propsNorm['scale'] } : null;
+    let rotate = propsNorm['rotate'] !== undefined ? { rotate: propsNorm['rotate'] } : null;
     let standaloneTransforms = [translate, rotate, scale].filter(Boolean)
+
     if (standaloneTransforms.length) {
-        remove.push('translate', 'scale', 'rotate')
-        propsNorm['transform'] = [...propsNorm['transform'], ...standaloneTransforms ]
+        if (normalizeTransforms) remove.push('translate', 'scale', 'rotate')
+        propsNorm['transformArr'] = [...standaloneTransforms, ...propsNorm['transformArr']]
     }
 
-    console.log('standaloneTransforms', standaloneTransforms);
-    //if()
-
 
     // replace transform-origin with translates
-    if (transFormOrigin.length && propsNorm['transform'] !== undefined) {
-        //console.log('transFormOrigin', transFormOrigin);
-        propsNorm['transform'] = [`translate(${transFormOrigin[0]} ${transFormOrigin[1]})`, ...propsNorm['transform'], `translate(${-transFormOrigin[0]} ${-transFormOrigin[1]})`]
+    //console.log('transFormOrigin', transFormOrigin);
+    if (transFormOrigin.length && propsNorm['transformArr'] !== undefined) {
+        propsNorm['transformArr'] = [
+            { translate: [transFormOrigin[0], transFormOrigin[1]] },
+            ...propsNorm['transformArr'],
+            { translate: [-transFormOrigin[0], -transFormOrigin[1]] },
+        ]
+        if (normalizeTransforms) remove.push('transform-origin')
     }
 
 
+    /**
+     * test run 
+     * apply parsed transforms
+     */
+    let { transformArr = [] } = propsNorm
+
+
+    let transAtt = []
+    let l = transformArr.length
+    if (l) {
+        for (let i = 0; l && i < l; i++) {
+            let prop = transformArr[i]
+            let values = Object.values(prop).flat();
+            let name = Object.keys(prop)[0]
+            if (name === 'skew') {
+                if (values[0]) transAtt.push(`skewX(${values[0]})`)
+                if (values[1]) transAtt.push(`skewY(${values[1]})`)
+            } else {
+                transAtt.push(`${name}(${values.join(' ')})`)
+            }
+        }
+        // consolidate transforms to matrix
+        //addTransFormProps(propsNorm);
+    }
 
+    //console.log('parseStylesProperties', props);
+    propsNorm.remove = remove
+    propsNorm.type = nodeName
 
+    //console.log('!!!propsNorm', nodeName, JSON.parse(JSON.stringify(propsNorm)));
+    return propsNorm
 
-    console.log('!!!propsNorm', propsNorm);
-
-    //console.log('parseStylesProperties', props);
+}
 
+/**
+* consolidate transforms to matrix
+*/
+export function addTransFormProps(propsObj = {}, transformArr = []) {
+    if (propsObj.transformArr === undefined || !transformArr.length) return;
 
+    // take existing array or custom
+    transformArr = transformArr.length ? transformArr : propsObj.transformArr;
+    let matrix = getMatrixFromTransform(transformArr);
+    propsObj['matrix'] = matrix;
 
+    let transComponents = qrDecomposeMatrix(matrix, 3)
+    propsObj.transComponents = transComponents;
 
+    return propsObj
 }
 
 /**
@@ -298,18 +422,25 @@ export function filterSvgElProps(elNodename = '', props = {}, {
     let propsFiltered = {}
     let remove = [];
 
+    // allow defaults for nested
+    //removeDefaults = false;
 
     let noStrokeColor = cleanUpStrokes ? (props['stroke'] === undefined) : false;
+    //console.log('noStrokeColor', elNodename, 'cleanUpStrokes', cleanUpStrokes);
 
     for (let prop in props) {
-        let value = props[prop];
-        //console.log(prop);
+        let values = props[prop]
+        let value = Array.isArray(values) ? values[0] : values;
+        //console.log(prop, Array.isArray(values));
 
         // filter out useless
         let isValid = removeInvalid ?
             (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;
 
@@ -318,6 +449,7 @@ export function filterSvgElProps(elNodename = '', props = {}, {
             (attLookup.defaults[prop] ? attLookup.defaults[prop] !== undefined && attLookup.defaults[prop].includes(value) : false) :
             false;
 
+
         if (isDataAtt || include.includes(prop)) isValid = true;
         if (isDefault) isValid = false
         if (exclude.length && exclude.includes(prop)) isValid = false;
@@ -331,7 +463,17 @@ 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 }
 }
 

package/src/svgii/transform_qr_decompose.js

@@ -0,0 +1,74 @@
+import { autoRound, roundTo } from "./rounding";
+
+/**
+ *  Decompose matrix to readable transform properties 
+ *  translate() rotate() scale() etc.
+ *  based on @AndreaBogazzi's answer
+ *  https://stackoverflow.com/questions/5107134/find-the-rotation-and-skew-of-a-matrix-transformation#32125700
+ *  return object with seperate transform properties 
+ *  and ready to use css or svg attribute strings
+ */
+export function qrDecomposeMatrix(matrix, precision = 4) {
+    let { a, b, c, d, e, f } = matrix;
+    // matrix is array
+    if (Array.isArray(matrix)) {
+        [a, b, c, d, e, f] = matrix;
+    }
+    let angle = Math.atan2(b, a),
+        denom = Math.pow(a, 2) + Math.pow(b, 2),
+        scaleX = Math.sqrt(denom),
+        scaleY = (a * d - c * b) / scaleX,
+        skewX = Math.atan2(a * c + b * d, denom) / (Math.PI / 180),
+        translateX = e ? e : 0,
+        translateY = f ? f : 0,
+        rotate = angle ? angle / (Math.PI / 180) : 0;
+    let transObj = {
+        translateX: translateX,
+        translateY: translateY,
+        rotate: rotate,
+        scaleX: scaleX,
+        scaleY: scaleY,
+        skewX: skewX,
+        skewY: 0
+    };
+    let cssTransforms = [];
+    let svgTransforms = [];
+    for (let prop in transObj) {
+        transObj[prop] = +parseFloat(transObj[prop]).toFixed(precision);
+        let val = transObj[prop];
+        let unit = "";
+        if (prop == "rotate" || prop == "skewX") {
+            unit = "deg";
+        }
+        if (prop.indexOf("translate") != -1) {
+            unit = "px";
+        }
+        // combine these properties
+        let convert = ["scaleX", "scaleY", "translateX", "translateY"];
+        if (val !== 0) {
+            cssTransforms.push(`${prop}(${val}${unit})`);
+        }
+        if (convert.indexOf(prop) == -1 && val !== 0) {
+            svgTransforms.push(`${prop}(${val})`);
+        } else if (prop == "scaleX") {
+            svgTransforms.push(
+                `scale(${+scaleX.toFixed(precision)} ${+scaleY.toFixed(precision)})`
+            );
+        } else if (prop == "translateX") {
+            svgTransforms.push(
+                `translate(${transObj.translateX} ${transObj.translateY})`
+            );
+        }
+
+    }
+    // append css style string to object
+    transObj.cssTransform = cssTransforms.join(" ");
+    transObj.svgTransform = svgTransforms.join(" ");
+    //transObj.matrix = [a, b, c, d, e, f ].map(val=>autoRound(val))
+    transObj.matrix = [a, b, c, d, e, f ].map(val=>roundTo(val, precision))
+    transObj.matrixAtt = `matrix(${transObj.matrix.join(' ')})`
+
+ 
+
+    return transObj;
+}

package/src/svgii/pathData_scale.js

@@ -1,42 +0,0 @@
-/**
- * scale pathData
- */
-
-export function scalePathData(pathData, scaleX, scaleY) {
-    pathData.forEach((com, i) => {
-        let { type, values } = com;
-        let typeRel = type.toLowerCase();
-
-        switch (typeRel) {
-            case "a":
-                com.values = [
-                    values[0] * scaleX,
-                    values[1] * scaleY,
-                    values[2],
-                    values[3],
-                    values[4],
-                    values[5] * scaleX,
-                    values[6] * scaleY
-                ];
-                break;
-
-            case "h":
-                com.values = [values[0] * scaleX];
-                break;
-
-            case "v":
-                com.values = [values[0] * scaleY];
-                break;
-
-            default:
-                if (values.length) {
-                    for (let i = 0; i < values.length; i += 2) {
-                        com.values[i] *=  scaleX;
-                        com.values[i + 1] *= scaleY;
-                    }
-                }
-        }
-
-    });
-    return pathData;
-}