svg-path-simplify 0.3.6 → 0.4.0

package/src/svgii/pathData_transform.js

@@ -0,0 +1,307 @@
+import { svgArcToCenterParam } from "./geometry";
+
+/**
+ * scale pathData
+ */
+export function transformPathData(pathData, matrix) {
+
+    // new pathdata
+    let pathDataTrans = [];
+
+    // transform point by 2d matrix
+    const transformPoint = (pt, matrix) => {
+        let { a, b, c, d, e, f } = matrix;
+        let { x, y } = pt;
+        return { x: a * x + c * y + e, y: b * x + d * y + f };
+    }
+
+    //normalize matrix notations object, array or css matrix string
+    const normalizeMatrix = (matrix) => {
+        matrix =
+            typeof matrix === "string"
+                ? (matrix = matrix
+                    .replace(/^matrix\(|\)$/g, "")
+                    .split(",")
+                    .map(Number))
+                : matrix;
+        matrix = !Array.isArray(matrix)
+            ? {
+                a: matrix.a,
+                b: matrix.b,
+                c: matrix.c,
+                d: matrix.d,
+                e: matrix.e,
+                f: matrix.f
+            }
+            : {
+                a: matrix[0],
+                b: matrix[1],
+                c: matrix[2],
+                d: matrix[3],
+                e: matrix[4],
+                f: matrix[5]
+            };
+        return matrix;
+    }
+
+
+    const transformArc = (p0, values, matrix) => {
+        let [rx, ry, angle, largeArc, sweep, x, y] = values;
+
+        /**
+        * parametrize arc command 
+        * to get the actual arc params
+        */
+        let arcData = svgArcToCenterParam(
+            p0.x,
+            p0.y,
+            values[0],
+            values[1],
+            angle,
+            largeArc,
+            sweep,
+            x,
+            y
+        );
+        ({ rx, ry } = arcData);
+        let { a, b, c, d, e, f } = matrix;
+
+        let ellipsetr = transformEllipse(rx, ry, angle, matrix);
+        let p = transformPoint({ x: x, y: y }, matrix);
+
+
+        // adjust sweep if flipped
+        let denom = a * a + b * b;
+        let scaleX = Math.sqrt(denom)
+        let scaleY = (a * d - c * b) / scaleX
+
+        let flipX = scaleX < 0 ? true : false;
+        let flipY = scaleY < 0 ? true : false;
+
+
+        // adjust sweep
+        if (flipX || flipY) {
+            sweep = sweep === 0 ? 1 : 0;
+        }
+
+        return {
+            type: 'A',
+            values: [
+                ellipsetr.rx,
+                ellipsetr.ry,
+                ellipsetr.ax,
+                largeArc,
+                sweep,
+                p.x,
+                p.y]
+        };
+    }
+
+    // normalize matrix input
+    matrix = normalizeMatrix(matrix);
+
+    let matrixStr = [matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f]
+        .map((val) => {
+            return +val.toFixed(1);
+        })
+        .join("");
+
+    // no transform: quit
+    if (matrixStr === "100100") {
+        //console.log("no transform");
+        return pathData;
+    }
+
+
+    pathData.forEach((com, i) => {
+        let { type, values } = com;
+        let typeRel = type.toLowerCase();
+        let comPrev = i > 0 ? pathData[i - 1] : pathData[i];
+        let comPrevValues = comPrev.values;
+        let comPrevValuesL = comPrevValues.length;
+        let p0 = {
+            x: comPrevValues[comPrevValuesL - 2],
+            y: comPrevValues[comPrevValuesL - 1]
+        };
+        let p = { x: values[values.length - 2], y: values[values.length - 1] };
+        let comT = { type: type, values: [] };
+
+        switch (typeRel) {
+            case "a":
+                comT = transformArc(p0, values, matrix)
+                break;
+
+            default:
+                // all other point based commands
+                if (values.length) {
+                    for (let i = 0; i < values.length; i += 2) {
+                        let ptTrans = transformPoint(
+                            { x: com.values[i], y: com.values[i + 1] },
+                            matrix
+                        );
+
+                        comT.values[i] = ptTrans.x;
+                        comT.values[i + 1] = ptTrans.y;
+                    }
+                }
+        }
+
+        pathDataTrans.push(comT);
+    });
+
+
+    //console.log('pathDataTrans', pathDataTrans);
+
+    return pathDataTrans;
+}
+
+
+
+
+
+
+/**
+ * Based on: https://github.com/fontello/svgpath/blob/master/lib/ellipse.js
+ * and fork: https://github.com/kpym/SVGPathy/blob/master/lib/ellipse.js
+ */
+
+function transformEllipse(rx, ry, ax, matrix) {
+    const torad = Math.PI / 180;
+    const epsilon = 1e-7;
+
+    //normalize matrix object or array notations
+    matrix = !Array.isArray(matrix)
+        ? matrix
+        : {
+            a: matrix[0],
+            b: matrix[1],
+            c: matrix[2],
+            d: matrix[3],
+            e: matrix[4],
+            f: matrix[5]
+        };
+
+    // We consider the current ellipse as image of the unit circle
+    // by first scale(rx,ry) and then rotate(ax) ...
+    // So we apply ma =  m x rotate(ax) x scale(rx,ry) to the unit circle.
+    let  c = Math.cos(ax * torad),
+        s = Math.sin(ax * torad);
+    let  ma = [
+        rx * (matrix.a * c + matrix.c * s),
+        rx * (matrix.b * c + matrix.d * s),
+        ry * (-matrix.a * s + matrix.c * c),
+        ry * (-matrix.b * s + matrix.d * c)
+    ];
+
+    // ma * transpose(ma) = [ J L ]
+    //                      [ L K ]
+    // L is calculated later (if the image is not a circle)
+    let  J = ma[0] * ma[0] + ma[2] * ma[2],
+        K = ma[1] * ma[1] + ma[3] * ma[3];
+
+    // the sqrt of the discriminant of the characteristic polynomial of ma * transpose(ma)
+    // this is also the geometric mean of the eigenvalues
+    let  D = Math.sqrt(
+        ((ma[0] - ma[3]) * (ma[0] - ma[3]) + (ma[2] + ma[1]) * (ma[2] + ma[1])) *
+        ((ma[0] + ma[3]) * (ma[0] + ma[3]) + (ma[2] - ma[1]) * (ma[2] - ma[1]))
+    );
+
+    // the arithmetic mean of the eigenvalues
+    let  JK = (J + K) / 2;
+
+    // check if the image is (almost) a circle
+    if (D <= epsilon) {
+        rx = ry = Math.sqrt(JK);
+        ax = 0;
+        return { rx: rx, ry: ry, ax: ax };
+    }
+
+    // check if ma * transpose(ma) is (almost) diagonal
+    if (Math.abs(D - Math.abs(J - K)) <= epsilon) {
+        rx = Math.sqrt(J);
+        ry = Math.sqrt(K);
+        ax = 0;
+        return { rx: rx, ry: ry, ax: ax };
+    }
+
+    // if it is not a circle, nor diagonal
+    let  L = ma[0] * ma[1] + ma[2] * ma[3];
+
+    // {l1,l2} = the two eigen values of ma * transpose(ma)
+    let  l1 = JK + D / 2,
+        l2 = JK - D / 2;
+
+    // the x - axis - rotation angle is the argument of the l1 - eigenvector
+    if (Math.abs(L) <= epsilon && Math.abs(l1 - K) <= epsilon) {
+        // if (ax == 90) => ax = 0 and exchange axes
+        ax = 0;
+        rx = Math.sqrt(l2);
+        ry = Math.sqrt(l1);
+        return { rx: rx, ry: ry, ax: ax };
+    }
+
+    ax =
+        Math.atan(Math.abs(L) > Math.abs(l1 - K) ? (l1 - J) / L : L / (l1 - K)) /
+        torad; // the angle in degree
+
+    // if ax > 0 => rx = sqrt(l1), ry = sqrt(l2), else exchange axes and ax += 90
+    if (ax >= 0) {
+        // if ax in [0,90]
+        rx = Math.sqrt(l1);
+        ry = Math.sqrt(l2);
+    } else {
+        // if ax in ]-90,0[ => exchange axes
+        ax += 90;
+        rx = Math.sqrt(l2);
+        ry = Math.sqrt(l1);
+    }
+
+    return { rx: rx, ry: ry, ax: ax };
+}
+
+
+
+
+
+/**
+ * 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;
+}

package/src/svgii/svg-styles-getTransforms.js

@@ -3,6 +3,8 @@
  * transform property object
  */
 
+import { deg2rad } from "../constants";
+
 export function parseTransform(transformString, transformOrigin = { x: 0, y: 0 }) {
 
     //let regex = /(\w+)\(([^)]+)\)/g;
@@ -18,12 +20,12 @@ export function parseTransform(transformString, transformOrigin = { x: 0, y: 0 }
         console.log('trans', prop, vals);
 
         // rotate has origin
-        if(prop==='rotate' && vals.length===3){
-            transforms.push({prop:'translate', values:[vals[1], vals[2]]})
-            transforms.push({prop:'rotate', values:[vals[0]]})
-            transforms.push({prop:'translate', values:[-vals[1], -vals[2]]})
-        }else{
-            transforms.push({prop, values:[vals[0]]})
+        if (prop === 'rotate' && vals.length === 3) {
+            transforms.push({ prop: 'translate', values: [vals[1], vals[2]] })
+            transforms.push({ prop: 'rotate', values: [vals[0]] })
+            transforms.push({ prop: 'translate', values: [-vals[1], -vals[2]] })
+        } else {
+            transforms.push({ prop, values: [vals[0]] })
         }
     })
 
@@ -89,8 +91,7 @@ export function parseCSSTransform(transformString, transformOrigin = { x: 0, y:
                 break;
 
             case 'rotate':
-
-                console.log('rotate', values);
+                //console.log('rotate', values);
 
                 transformOptions.transforms.push({ rotate: [0, 0, values[0] || 0] });
                 break;
@@ -139,6 +140,116 @@ export function getMatrix({
 
 
 
+
+export function getMatrixFromTransform(transformations = []) {
+
+    //console.log('getMatrix2D', transformations, origin);
+    // Helper function to multiply two 2D matrices
+
+    const multiply = (m1, m2) => {
+        let mtxN = {
+            a: m1.a * m2.a + m1.c * m2.b,
+            b: m1.b * m2.a + m1.d * m2.b,
+            c: m1.a * m2.c + m1.c * m2.d,
+            d: m1.b * m2.c + m1.d * m2.d,
+            e: m1.a * m2.e + m1.c * m2.f + m1.e,
+            f: m1.b * m2.e + m1.d * m2.f + m1.f
+        }
+
+        //console.log('m1', m1, 'm2', m2, 'mtxN', mtxN);
+        return mtxN;
+    };
+
+
+    // Helper function to create a translation matrix
+    const translationMatrix = (x, y) => {
+        let mtx ={a: 1, b: 0, c: 0, d: 1, e: x, f: y}
+        return mtx
+    };
+
+    // Helper function to create a scaling matrix
+    const scalingMatrix = (x, y) => ({
+        a: x, b: 0, c: 0, d: y, e: 0, f: 0
+    });
+
+
+    // get skew or rotation axis matrix
+    const angleMatrix = (angles, type) => {
+        //const toRad = (angle) => angle * Math.PI / 180;
+        let [angleX, angleY=0] = angles.map(ang => ang*deg2rad)
+        let m = {}
+        //console.log('angles', angles);
+
+        if (type === 'rot') {
+            let cosX = Math.cos(angleX), sinX = Math.sin(angleX);
+            m = { a: cosX, b: sinX, c: -sinX, d: cosX, e: 0, f: 0 }
+        } else if (type === 'skew') {
+            let tanX = Math.tan(angleX), tanY = Math.tan(angleY);
+            m = {
+                a: 1, b: tanY, c: tanX, d: 1, e: 0, f: 0
+            };
+        }
+        return m
+    };
+
+
+    // Start with an identity matrix
+    let matrix = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 };
+
+
+    // Process transformations in the provided order (right-to-left)
+    for (let i = 0; i < transformations.length; i++) {
+
+        let transform = transformations[i];
+
+        // Get the transformation type (e.g., "translate")
+        let type = Object.keys(transform)[0];
+
+        let values = transform[type];
+        //console.log('transform', transform, type, values);
+
+        let [x, y] = values
+
+
+        switch (type) {
+            case "matrix":
+                let keys = ['a', 'b', 'c', 'd', 'e', 'f'];
+                let obj = Object.fromEntries(keys.map((key, i) => [key, values[i]]));
+                //console.log('mtx',obj );
+                matrix = multiply(matrix, obj);
+                break;
+            case "translate":
+                matrix = multiply(matrix, translationMatrix(x, y));
+                break;
+            case "skew":
+                matrix = multiply(matrix, angleMatrix([x, y], 'skew'));
+                break;
+            case "rotate":
+                matrix = multiply(matrix, angleMatrix([x], 'rot'));
+                //console.log('rot', matrix);
+                break;
+            case "scale":
+                matrix = multiply(matrix, scalingMatrix(x, y));
+                break;
+
+            default:
+                throw new Error(`Unknown transformation type: ${type}`);
+        }
+
+
+        //let mtxTmp = JSON.parse(JSON.stringify(matrix))
+        //console.log('??? mtxTmp', type,  mtxTmp, 'transform', transform);
+    }
+
+
+    //console.log('matrix2D', matrix);
+    return matrix;
+}
+
+
+
+
+
 export function getMatrix2D(transformations = [], origin = { x: 0, y: 0 }) {
 
     //console.log('getMatrix2D', transformations, origin);

package/src/svgii/svg-styles-to-attributes-const.js

@@ -15,20 +15,35 @@ export const shapeEls = [
 
 export const horizontalProps = ['x', 'cx', 'rx', 'dx', 'width', 'translateX'];
 export const verticalProps = ['y', 'cy', 'ry', 'dy', 'height', 'translateY'];
+export const transHorizontal = ['scaleX', 'translateX', 'skewX'];
+export const transVertical = ['scaleY', 'translateY', 'skewY'];
+
+export const colorProps = ['fill', 'stroke', 'stop-color'];
+
 
 export const geometryEls = [
     "path",
     ...shapeEls
-]
+];
+
+export const renderedEls = [
+    "text",
+    "textPath",
+    "tspan",
+    ...geometryEls
+];
 
 export const textEls = [
     "textPath",
     "text",
     "tspan",
-]
+];
+
+
 
 export const strokeAtts = ['stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin','stroke-linecap', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-miterlimit', 'stroke-opacity' ];
 
+
 export const attLookup = {
 
     atts: {
@@ -306,9 +321,9 @@ export const attLookup = {
         "color": ["black", "rgb(0, 0, 0)", "rgba(0, 0, 0, 0)", "#000", "#000000"],
 
         stroke: ["none"],
-        "stroke-width": ["1", "1px"],
         opacity: ["1"],
         "fill-opacity": ["1"],
+        "stroke-width": ["1", "1px"],
         "stroke-opacity": ["1"],
         "stroke-linecap": ["butt"],
         "stroke-miterlimit": ["4"],