svg-path-simplify 0.3.6 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svg-path-simplify",
-  "version": "0.3.6",
+  "version": "0.4.1",
 
   "type": "module",
 

package/src/constants.js

@@ -6,4 +6,11 @@ export const {
 export const rad2Deg = 180/Math.PI  
 export const deg2rad = Math.PI/180
 export const root2 = 1.4142135623730951
-export const svgNs = 'http://www.w3.org/2000/svg'
+export const svgNs = 'http://www.w3.org/2000/svg'
+
+// 1/2.54
+export const inch2cm =  0.39370078;
+
+// 1/72
+export const inch2pt =  0.01388889;
+

package/src/pathData_simplify_cubic.js

@@ -305,11 +305,3 @@ export function findSplitT(com1, com2) {
 
     return l1 / l3
 }
-
-
-
-
-
-
-
-

package/src/pathSimplify-main.js

@@ -12,7 +12,7 @@ import { optimizeClosePath, pathDataToTopLeft } from './svgii/pathData_reorder';
 import { reversePathData } from './svgii/pathData_reverse';
 import { addExtremePoints, splitSubpaths } from './svgii/pathData_split';
 import { pathDataToD } from './svgii/pathData_stringify';
-import { detectAccuracy, roundPathData} from './svgii/rounding';
+import { detectAccuracy, roundPathData } from './svgii/rounding';
 import { refineAdjacentExtremes } from './svgii/pathData_simplify_refineExtremes';
 import { cleanUpSVG, removeEmptySVGEls, stringifySVG } from './svgii/svg_cleanup';
 import { refineRoundedCorners } from './svgii/pathData_simplify_refineCorners';
@@ -99,9 +99,12 @@ export function svgPathSimplify(input = '', {
     scaleTo = 0,
     crop = false,
     alignToOrigin = false,
+
+    // flatten transforms
     convertTransforms = false,
 
 
+
     //svg path optimizations
     decimals = 3,
     autoAccuracy = true,
@@ -114,24 +117,28 @@ export function svgPathSimplify(input = '', {
     reversePath = false,
 
     //svg cleanup options
+    minifyRgbColors = false,
     removePrologue = true,
     removeHidden = true,
     removeUnused = true,
     cleanupDefs = true,
     cleanupClip = true,
     cleanupSVGAtts = true,
-    
+
     stylesToAttributes = false,
     fixHref = false,
     legacyHref = false,
     removeNameSpaced = true,
-    attributesToGroup = false,
-    removeOffCanvas = false,
 
+    //attributesToGroup = false,
+    removeOffCanvas = false,
+    unGroup = false,
     mergePaths = false,
 
     // shape conversions
     shapesToPaths = false,
+
+
     //toPaths || toShapes
     shapeConvert = 0,
     convert_rects = false,
@@ -146,6 +153,8 @@ export function svgPathSimplify(input = '', {
     addViewBox = false,
     addDimensions = false,
 
+    removeComments = true,
+
 } = {}) {
 
 
@@ -230,12 +239,19 @@ export function svgPathSimplify(input = '', {
     // mode:1 – process complete svg DOM
     else {
 
+        // convert all shapes to paths
+        if (shapesToPaths) {
+            shapeConvert = true
+            convert_rects = true
+            convert_ellipses = true
+            convert_poly = true
+            convert_lines = true
+        }
 
         //sanitize
         let svgPropObject = cleanUpSVG(input, {
             removeIds, removeClassNames, removeDimensions, cleanupSVGAtts, cleanUpStrokes, removeHidden, removeUnused, removeNameSpaced, stylesToAttributes, removePrologue, fixHref, mergePaths, convertTransforms, legacyHref, cleanupDefs, cleanupClip, addViewBox, removeOffCanvas, addDimensions,
-            shapeConvert, convert_rects, convert_ellipses, convert_poly, convert_lines
-
+            shapeConvert, convert_rects, convert_ellipses, convert_poly, convert_lines, minifyRgbColors, unGroup, convertTransforms
         }
         );
 
@@ -580,8 +596,8 @@ export function svgPathSimplify(input = '', {
 
         if (autoAccuracy) {
             accuracyArr = accuracyArr.sort().reverse();
-            let decimalsMid = accuracyArr[Math.floor(accuracyArr.length*0.5)]
-            decimals = Math.floor( (accuracyArr[0] + decimalsMid) * 0.5  )
+            let decimalsMid = accuracyArr[Math.floor(accuracyArr.length * 0.5)]
+            decimals = Math.floor((accuracyArr[0] + decimalsMid) * 0.5)
             //decimals = detectAccuracy(pathData)
             //console.log('decimals', decimals, 'decimalsMid', decimalsMid, accuracyArr);
             pathOptions.decimals = decimals
@@ -711,7 +727,7 @@ export function svgPathSimplify(input = '', {
         }
 
 
-        svg = stringifySVG(svg, omitNamespace);
+        svg = stringifySVG(svg, { omitNamespace, removeComments });
 
 
         //svgSizeOpt = new Blob([svg]).size

package/src/svg_flatten_transforms.js

@@ -1,5 +1,5 @@
 import { parseCSSTransform, parseTransform } from "./svgii/svg-styles-getTransforms";
-import { getElAttributes, getElementProps, getElStyleProps } from "./svgii/svg-styles-to-attributes";
+import { getElAttributes, getElementProps, getElStyleProps } from "../__back/svg-styles-to-attributes";
 
 export function flattenTransforms(svg) {
 

package/src/svgii/convert_colors.js

@@ -1,3 +1,45 @@
+
+export function parseColor(str) {
+    let type = str.startsWith('#') ? 'rgbHex' : (str.includes('(') ? 'fn' : typeof str);
+    let col = {}
+    let mode = null;
+    let colObj = { mode: null, values: [] }
+    if (type === 'rgbHex') {
+        col = hex2Rgb(str)
+        mode = 'rgba';
+    }
+    else if (type === 'fn') {
+        let colVals = str.split(/\(|\)/).filter(Boolean)
+        if (colVals.length < 2) return str;
+
+        mode = colVals[0];
+        let colorComponents = colVals[1].split(/,| /).filter(Boolean).map(Number)
+
+        let keys = mode.split('');
+        keys.forEach((k, i) => {
+            let val = colorComponents[i]
+            if (mode === 'rgba' && k === 'a') {
+                val = Math.floor(val * 255)
+            }
+            col[k] = val;
+        })
+    }
+    else if (type === 'string') {
+        colObj.mode = 'keyword'
+        colObj.values = [str]
+        return colObj
+    }
+
+    if (mode === 'rgba' || mode === 'rgb') {
+        col.a = !col.a ? 255 : col.a;
+    }
+
+    colObj.mode = mode
+    colObj.values = Object.values(col)
+
+    return colObj;
+}
+
 export function hex2Rgb(hex = '') {
     // Remove # if present
     if (hex.startsWith('#')) hex = hex.substring(1);
@@ -30,13 +72,18 @@ export function hex2Rgb(hex = '') {
 
 }
 
-export function rgba2Hex({ r, g, b, a = 255 }) {
+export function rgba2Hex({ r = 0, g = 0, b = 0, a = 255, values = [] }) {
     // Helper function to convert number to 2-digit hex
     const toHex = (num) => {
         const hex = Math.min(255, Math.max(0, Math.round(num))).toString(16);
         return hex.length === 1 ? '0' + hex : hex;
     };
 
+    // convert from number array input
+    if (!r && !g && !b && values.length) {
+        [r, g, b, a = 255] = values;
+    }
+
     // Get hex values
     let rHex = toHex(r);
     let gHex = toHex(g);
@@ -51,7 +98,7 @@ export function rgba2Hex({ r, g, b, a = 255 }) {
     }
 
     // Check for 4-character RGBA short notation (e.g., #ffff)
-    if (aHex && allowsShort ) {
+    if (aHex && allowsShort) {
         return `#${rHex[0]}${gHex[0]}${bHex[0]}${aHex[0]}`;
     }
 
@@ -67,7 +114,7 @@ export function rgba2Hex({ r, g, b, a = 255 }) {
 
 
 export function hsl2Rgb(hsla = {}) {
-    let {h, s, l, a = 1} = hsla;
+    let { h, s, l, a = 1 } = hsla;
 
     // Normalize
     h = ((h % 360) + 360) % 360; // wrap hue
@@ -90,9 +137,9 @@ export function hsl2Rgb(hsla = {}) {
     let r = (r1 + m) * 255;
     let g = (g1 + m) * 255;
     let b = (b1 + m) * 255;
-    a = Math.floor(a*255);
+    a = Math.floor(a * 255);
 
     [r, g, b] = [r, g, b].map((val) => +val.toFixed(0));
 
-    return {r,g,b,a}
+    return { r, g, b, a }
 }

package/src/svgii/convert_units.js

@@ -1,4 +1,4 @@
-import { deg2rad, rad2Deg, root2 } from "../constants";
+import { deg2rad, inch2cm, inch2pt, rad2Deg, root2 } from "../constants";
 import { hex2Rgb, hsl2Rgb, rgba2Hex } from "./convert_colors";
 import { autoRound } from "./rounding";
 import { horizontalProps, verticalProps } from "./svg-styles-to-attributes-const";
@@ -56,21 +56,21 @@ export function normalizeUnits(value = null, {
     // only required for circle r normalization when height!=width
     normalizedDiagonal = width === height ? false : normalizedDiagonal;
 
-    //console.log('???value',value );
+    let type = typeof value;
     if (!value) return value;
 
     // check if value is string
-    let isArray = value.split(/,| /).length>1
-    let isFunction = value.includes('(')
+    let isNum = type === 'number' ? true : isNumericValue(value)
+    let isArray = type === 'string' ? value.split(/,| /).length > 1 : false;
+    let isFunction = type === 'string' ? value.includes('(') : false;
     //console.log(isArray);
-    let isNum = isNumericValue(value)
     if (!isNum || isArray || isFunction) return value
 
     // check unit if not specified
     unit = !unit ? getUnit(value) : unit;
 
     let val = parseFloat(value);
-    let scale=1;
+    let scale = 1;
     let scaleRoot = Math.sqrt(width * width + height * height) / root2
 
 
@@ -92,7 +92,6 @@ export function normalizeUnits(value = null, {
             }
             break;
 
-
         case "rad":
             scale = rad2Deg;
             break;
@@ -103,15 +102,31 @@ export function normalizeUnits(value = null, {
         case "in":
             scale = dpi;
             break;
+
         case "pt":
-            scale = (1 / 72) * dpi;
+            // 1/72
+            scale = dpi * inch2pt;
+            break;
+
+        case "pc":
+            // 1/6
+            scale = dpi * 0.16666667;
             break;
+
         case "cm":
-            scale = (1 / 2.54) * dpi;
+            // 1/2.54
+            scale = inch2cm * dpi;
             break;
         case "mm":
-            scale = ((1 / 2.54) * dpi) / 10;
+            //scale = ((1 / 2.54) * dpi) * 0.1;
+            scale = inch2cm * dpi * 0.1
+            break;
+
+        // has anyone ever used it?
+        case "Q":
+            scale = inch2cm * dpi * 0.025;
             break;
+
         // just a default approximation
         case "em":
         case "rem":

package/src/svgii/pathData_analyze.js

@@ -55,10 +55,10 @@ export function analyzePathData(pathData = [], {
     let len = pathData.length;
 
     // threshold for corner angles: 10 deg
-    let thresholdCorner = Math.PI * 2 / 360 * 10
+    //let thresholdCorner = Math.PI * 2 / 360 * 10
 
     // define angle threshold for semi extremes
-    let thresholdAngle = detectSemiExtremes ? 0.01 : 0.05
+    //let thresholdAngle = detectSemiExtremes ? 0.01 : 0.05
 
 
     for (let c = 2; len && c <= len; c++) {
@@ -86,7 +86,7 @@ export function analyzePathData(pathData = [], {
         // check flatness of command
         let toleranceFlat = 0.01;
         let thresholdLength = dimA * 0.1
-        let threshold = thresholdLength*0.01
+        let threshold = thresholdLength * 0.01
         let areaThresh = squareDist * toleranceFlat;
         let isFlat = Math.abs(cptArea) < areaThresh;
 
@@ -109,14 +109,29 @@ export function analyzePathData(pathData = [], {
             let dx = type === 'C' ? Math.abs(com.cp2.x - com.p.x) : Math.abs(com.cp1.x - com.p.x)
             let dy = type === 'C' ? Math.abs(com.cp2.y - com.p.y) : Math.abs(com.cp1.y - com.p.y)
 
-            let horizontal = (dy === 0 || dy<threshold ) && dx > 0
-            let vertical = (dx === 0 || dx<threshold ) && dy > 0
+            //let horizontal = (dy === 0 || dy<=threshold ) && dx > 0
+            //let vertical = (dx === 0 || dx<=threshold ) && dy > 0
+            let horizontal = (dy === 0 || dy <= threshold) && dx > 0
+            let vertical = (dx === 0 || dx <= threshold) && dy > 0
+
 
             if (horizontal || vertical) {
                 hasExtremes = true;
             }
 
             // is extreme relative to bounding box 
+
+            // (cp1.x===p0.x && cp1.y!==p0.y  ) ||
+            if ((cp1.x === p0.x && cp1.y !== p0.y) || (cp1.y === p0.y && cp1.x !== p0.x)) {
+                //hasExtremes = true;
+                //renderPoint(markers, p0 )
+                //p0.extreme = true
+                //let comP = pathDataProps[pathDataProps.length-1]
+                pathDataProps[pathDataProps.length - 1].extreme = true
+                //console.log(comP);
+            }
+
+
             if ((p.x === left || p.y === top || p.x === right || p.y === bottom)) {
                 hasExtremes = true;
             }
@@ -126,6 +141,7 @@ export function analyzePathData(pathData = [], {
                 let couldHaveExtremes = bezierhasExtreme(null, commandPts)
                 if (couldHaveExtremes) {
                     let tArr = getTatAngles(commandPts)
+
                     if (tArr.length && (tArr[0] > 0.2)) {
                         hasExtremes = true;
                     }
@@ -181,24 +197,28 @@ export function analyzePathData(pathData = [], {
 
                 let signChange2 = (areaCpt < 0 && com.cptArea > 0) || (areaCpt > 0 && com.cptArea < 0) ? true : false;
 
-                let isCorner=!isFlat && signChange2;
+                let isCorner = !isFlat && signChange2;
                 if (isCorner) com.corner = true;
             }
         }
 
-        //debug = true;
-        if (debug) {
+        pathDataProps.push(com)
+
+    }
+
+
+    //debug = true;
+    
+    if (debug) {
+        pathDataProps.forEach(com=>{
             //if (com.semiExtreme) renderPoint(markers, com.p, 'blue', '2%', '0.5')
             if (com.directionChange) renderPoint(markers, com.p, 'orange', '1.5%', '0.5')
             if (com.corner) renderPoint(markers, com.p, 'magenta', '1.5%', '0.5')
             if (com.extreme) renderPoint(markers, com.p, 'cyan', '1%', '0.5')
-
-        }
-
-        pathDataProps.push(com)
-
+        })
     }
 
+
     //pathDataProps.push(comLast)
 
 

package/src/svgii/pathData_convert.js

@@ -51,6 +51,8 @@ export function parsePathDataNormalized(d,
     let { hasRelatives = true, hasShorthands = true, hasQuadratics = true, hasArcs = true } = pathDataObj;
     let pathData = hasConstructor ? pathDataObj : pathDataObj.pathData;
 
+    //console.log('???quadraticToCubic', quadraticToCubic);
+
     // normalize
     pathData = normalizePathData(pathData,
         {
@@ -77,11 +79,14 @@ export function convertPathData(pathData, {
     hasShorthands = true,
     hasQuadratics = true,
     hasArcs = true,
+    optimizeArcs = true,
     testTypes = false
 
 
 } = {}) {
 
+
+
     // pathdata properties - test= true adds a manual test 
     if (testTypes) {
         //console.log('test for conversions');
@@ -99,26 +104,76 @@ export function convertPathData(pathData, {
     toShorthands = toLonghands ? false : toShorthands
 
 
-    //console.log(toShorthands, toRelative, decimals);
-    if (hasQuadratics && quadraticToCubic) pathData = pathDataQuadraticToCubic(pathData);
+    if (toAbsolute) pathData = pathDataToAbsolute(pathData);
+    if (hasShorthands && toLonghands) pathData = pathDataToLonghands(pathData);
+
+
+    // minify semicircle radii
+    if (optimizeArcs) pathData = optimizeArcPathData(pathData);
 
 
     //if(decimals>-1 && decimals<2) pathData = roundPathData(pathData, decimals);
     if (toShorthands) pathData = pathDataToShorthands(pathData);
-    if (hasShorthands && toLonghands) pathData = pathDataToLonghands(pathData);
-
-    if (toAbsolute) pathData = pathDataToAbsolute(pathData);
 
     if (hasArcs && arcToCubic) pathData = pathDataArcsToCubics(pathData)
 
+    //console.log(toShorthands, toRelative, decimals);
+    if (hasQuadratics && quadraticToCubic) pathData = pathDataQuadraticToCubic(pathData);
+
+
     // pre round - before relative conversion to minimize distortions
     if (decimals > -1 && toRelative) pathData = roundPathData(pathData, decimals);
+
+
     if (toRelative) pathData = pathDataToRelative(pathData);
     if (decimals > -1) pathData = roundPathData(pathData, decimals);
 
     return pathData
 }
 
+/**
+ * 
+ * @param {*} pathData 
+ * @returns 
+ */
+
+export function optimizeArcPathData(pathData = []) {
+    pathData.forEach((com, i) => {
+        let { type, values } = com;
+        if (type === 'A') {
+            let [rx, ry, largeArc, x, y] = [values[0], values[1], values[3], values[5], values[6]];
+            let comPrev = pathData[i - 1]
+            let [x0, y0] = [comPrev.values[comPrev.values.length - 2], comPrev.values[comPrev.values.length - 1]];
+            let M = { x: x0, y: y0 };
+            let p = { x, y };
+            //largeArc=true
+            //let pMid = {x: Math.abs(x-x0), y:Math.abs(y-y0)}
+
+            // rx and ry are large enough
+            if (rx >= 1 && (x === x0 || y === y0)) {
+                let diff = Math.abs(rx - ry) / rx;
+
+                // rx~==ry 
+                if (diff < 0.01) {
+
+                    // test radius against mid point
+                    let pMid = interpolate(M, p, 0.5)                    
+                    let distM = getDistance(pMid, M)
+                    let rDiff = Math.abs(distM - rx) / rx
+
+                    // half distance between mid and start point should be ~ equal
+                    if(rDiff<0.01){
+                        pathData[i].values[0] = 1;
+                        pathData[i].values[1] = 1;
+                        pathData[i].values[2] = 0;
+                    }
+                }
+            }
+        }
+    })
+    return pathData;
+}
+
 
 
 /**
@@ -139,6 +194,7 @@ export function normalizePathData(pathData = [],
     } = {}
 ) {
 
+
     return convertPathData(pathData, { toAbsolute, toLonghands, quadraticToCubic, arcToCubic, arcAccuracy, hasRelatives, hasShorthands, hasQuadratics, hasArcs, testTypes, decimals: -1 })
 }
 
@@ -577,7 +633,7 @@ export function pathDataToShorthands(pathData, decimals = -1, test = false) {
             let dy1 = (p0.y - cpPrev.y)
 
             //adjust maxDist
-            maxDist = getDistManhattan(cpPrev, cpFirst) * 0.025
+            maxDist = getDistManhattan(cpPrev, cpFirst) * 0.01
 
             // reflected cp
             let cpR = { x: cpPrev.x + dx1 * 2, y: cpPrev.y + dy1 * 2 }

package/src/svgii/pathData_parse_els.js

@@ -11,8 +11,10 @@ import { getPolyBBox } from './geometry_bbox.js';
 import { getPathDataVerbose } from './pathData_analyze.js';
 import { parsePathDataNormalized } from './pathData_convert.js';
 import { parsePathDataString, stringifyPathData } from './pathData_parse.js';
+import { transformPathData } from './pathData_transform.js';
 import { autoRound, roundTo } from './rounding.js';
 import { attLookup } from './svg-styles-to-attributes-const.js';
+import { qrDecomposeMatrix } from './transform_qr_decompose.js';
 
 
 export function pathElToShape(el, {
@@ -151,39 +153,53 @@ export function shapeElToPath(el, { width = 0,
     convert_rects = false,
     convert_ellipses = false,
     convert_poly = false,
-    convert_lines = false
+    convert_lines = false,
+    //matrix={a:1, b:0, c:0, d:1, e:0, f:0},
+    matrix=null
 
 } = {}) {
 
     let nodeName = el.nodeName.toLowerCase();
+    //console.log('shapeElToPath', nodeName);
+
 
     if (
-        nodeName === 'path' ||
+        nodeName === 'path' && !matrix ||
         nodeName === 'rect' && !convert_rects ||
         (nodeName === 'circle' || nodeName === 'ellipse') && !convert_ellipses ||
         (nodeName === 'polygon' || nodeName === 'polyline') && !convert_poly ||
         (nodeName === 'line') && !convert_lines
     ) return el;
 
+
     let pathData = getPathDataFromEl(el, { width, height });
+
+    // shape attributes – obsolete for path els
+    let exclude = ['d', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'dx', 'dy', 'r', 'rx', 'ry', 'width', 'height', 'points'];
+
+    // transform pathData
+    if(matrix && Object.values(matrix).join('')!=='100100'){
+        pathData = transformPathData(pathData, matrix)
+        exclude.push('transform', 'transform-origin')
+    }
+
     let d = pathData.map(com => { return `${com.type} ${com.values} ` }).join(' ')
     let attributes = [...el.attributes].map(att => att.name);
 
-
     let pathN = document.createElementNS(svgNs, 'path');
     pathN.setAttribute('d', d);
 
-    let exclude = ['x', 'y', 'x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'dx', 'dy', 'r', 'rx', 'ry', 'width', 'height', 'points'];
 
+    // copy attributes
     attributes.forEach(att => {
         if (!exclude.includes(att)) {
-            //console.log(att, attributes, exclude);
             let val = el.getAttribute(att);
             pathN.setAttribute(att, val)
         }
     })
 
     //el.replaceWith(pathN)
+    //console.log(pathN.outerHTML, d);
     return pathN
 
 }

package/src/svgii/pathData_toPolygon.js

@@ -129,9 +129,11 @@ simplifyRDP=1,
         poly = poly.map(pt => { return [pt.x, pt.y] })
     }
     else if(polyFormat==='string'){
-        poly = poly.map(pt => { return [pt.x, pt.y].join(',') }).join(' ')
+        poly = poly.map(pt => { return [pt.x, pt.y].join(',') }).flat().join(' ')
     }
 
+    //console.log(pathData);
+
     return { pathData, poly }
 
 }