svg-path-simplify 0.4.1 → 0.4.3

package/src/pathSimplify-presets.js

@@ -0,0 +1,243 @@
+export let settingsDefaults = {
+
+    // SVG elements
+    removeComments: true,
+    removeOffCanvas: false,
+
+    // attributes
+    removeDimensions: false,
+    removeIds: false,
+    removeClassNames: false,
+    omitNamespace: false,
+    cleanUpStrokes: true,
+    addViewBox: true,
+    addDimensions: false,
+    removePrologue: true,
+    removeHidden: true,
+    removeUnused: true,
+    cleanupDefs: true,
+    cleanupClip: true,
+    cleanupSVGAtts: true,
+    removeNameSpaced: true,
+    removeNameSpacedAtts: true,
+    attributesToGroup: false,
+    minifyRgbColors: true,
+    stylesToAttributes: false,
+    fixHref: false,
+    legacyHref: false,
+    allowMeta: false,
+    allowDataAtts: true,
+    allowAriaAtts: true,
+    //pathlength conversion
+    convertPathLength: false,
+
+    // custom removal
+    removeElements: [],
+    removeSVGAttributes: [],
+    removeElAttributes: [],
+
+    // merging/splitting
+    unGroup: false,
+    mergePaths: false,
+    splitCompound: false,
+
+
+
+    // shape conversions
+    shapesToPaths: false,
+    shapeConvert: 0,
+    convertShapes: ['rect', 'ellipse', 'circle', 'line', 'polygon', 'polyline'],
+
+
+    // simplify
+    keepSmaller: true,
+    simplifyBezier: true,
+    optimizeOrder: true,
+    autoClose: false,
+    removeZeroLength: true,
+    refineClosing: true,
+    removeColinear: true,
+    flatBezierToLinetos: true,
+    revertToQuadratics: true,
+    refineExtremes: false,
+    simplifyCorners: false,
+    keepExtremes: true,
+    keepCorners: true,
+    keepInflections: false,
+    addExtremes: false,
+
+    // draw direction 
+    fixDirections: false,
+    reversePath: false,
+
+
+    // pathdata
+    toAbsolute: false,
+    toRelative: true,
+    toMixed: false,
+    toShorthands: true,
+    toLonghands: false,
+    quadraticToCubic: true,
+    arcToCubic: false,
+    cubicToArc: false,
+    lineToCubic: false,
+
+    // minification
+    decimals: 3,
+    autoAccuracy: true,
+    minifyD: 0,
+    tolerance: 1,
+
+
+    // polygon
+    toPolygon: false,
+    smoothPoly: false,
+    polyFormat: 'object',
+    precisionPoly: 1,
+    simplifyRD: 0,
+    simplifyRDP: 0,
+    harmonizeCpts: false,
+    removeOrphanSubpaths: false,
+    simplifyRound: false,
+
+    //svg scaling
+    scale: 1,
+    scaleTo: 0,
+    crop: false,
+    alignToOrigin: false,
+
+    // flatten transforms
+    convertTransforms: false,
+
+
+}
+
+const settingsNull = {}
+
+for (let prop in settingsDefaults) {
+    let val = settingsDefaults[prop];
+    let isBoolean = val === false || val === true;
+    let isNum = !isNaN(val)
+    let isArray = Array.isArray(val)
+
+    if (isBoolean) val = false
+    else if (!isArray && isNum) val = val===1 ? 1 : (prop==='decimals'? -1 : 0);
+    else if (isArray) val = []
+    settingsNull[prop] = val;
+}
+
+
+export const presetSettings = {
+    default: settingsDefaults,
+
+    education: {
+        ...settingsDefaults,
+        ...{
+            keepSmaller: false,
+            toRelative: false,
+            toMixed: false,
+            toShorthands: false,
+            fixHref: true,
+            legacyHref: false,
+            addViewBox: true,
+            addDimensions: true,
+            removeComments: false,
+            decimals: 3,
+            minifyD: 2
+        }
+    },
+
+    null: settingsNull,
+
+    editor: {
+        ...settingsDefaults,
+        ...{
+            keepSmaller: false,
+            toRelative: true,
+            toMixed: true,
+            toShorthands: true,
+            //fixHref: true,
+            legacyHref: true,
+            addViewBox: true,
+            addDimensions: true,
+            removeComments: true,
+            autoAccuracy: true,
+            //decimals:5,
+            minifyD: 0.5
+        }
+    },
+
+    noSimplification: {
+        ...settingsDefaults,
+        ...{
+            simplifyBezier: false,
+            quadraticToCubic: false,
+            toRelative: true,
+            toShorthands: true,
+            fixHref: true,
+            optimizeOrder: false,
+            removeZeroLength: false,
+            refineExtremes: false,
+            refineClosing: false,
+            removeColinear: false,
+            flatBezierToLinetos: false,
+            //addViewBox: false,
+            addDimensions: false,
+            removeComments: true,
+            minifyD: 0
+        }
+
+    },
+    path: {
+        ...settingsDefaults,
+        ...{
+            shapeConvert: 'toPaths',
+            convertShapes: ['rect', 'ellipse', 'circle', 'line', 'polygon', 'polyline'],
+            addViewBox: true,
+            minifyD: 0.5
+        }
+    },
+
+    poly: {
+        ...settingsDefaults,
+        ...{
+            toPolygon: true,
+        }
+    },
+
+    curvefit: {
+        ...settingsDefaults,
+        ...{
+            smoothPoly: true,
+        }
+    },
+
+    detransform: {
+        ...settingsDefaults,
+        ...{
+            convertTransforms: true,
+            addViewBox: true,
+            minifyD: 0.5
+        }
+    },
+
+    high: {
+        ...settingsDefaults,
+        ...{
+            tolerance: 1.2,
+            toMixed: true,
+            refineExtremes: true,
+            simplifyCorners: true,
+            simplifyRound: true,
+            removeClassNames: true,
+            cubicToArc: true,
+            removeComments: true,
+            removeHidden: true,
+            removeOffCanvas: true,
+            addViewBox: true,
+            removeDimensions: true,
+            minifyD: 0
+        }
+    }
+
+}

package/src/poly-fit-curve-schneider.js

@@ -9,13 +9,16 @@
   */
 
 import { harmonizeCubicCpts, harmonizeCubicCptsThird } from "./pathData_simplify_harmonize_cpts";
-import { getAngle, getDistance, getSquareDistance, pointAtT, rotatePoint } from "./svgii/geometry";
+import { checkLineIntersection, getAngle, getDistance, getSquareDistance, pointAtT, reducePoints, rotatePoint } from "./svgii/geometry";
 import { getPolygonArea } from "./svgii/geometry_area";
+import { detectRegularPolygon, getPolyCentroid } from "./svgii/poly_analyze";
 import { renderPath, renderPoint } from "./svgii/visualize";
 
 
 
 
+
+
 /**
  * Fit one or more Bezier curves to a set of pts.
  *
@@ -50,17 +53,18 @@ export function fitCurveSchneider(pts, {
 
     // create pathdata
     let pathData = bezierPtsToPathData(beziers)
-
-
-
     let cp1, cp2;
 
     adjustCpts = false
-    harmonize = false;
+    //harmonize = false;
+
+    adjustCpts = true;
+    //harmonize = true;
+
 
     if (adjustCpts) {
 
-        console.log('refine cpts');
+        //console.log('refine cpts');
 
         let len2 = pathData.length;
         let com1 = pathData[0]
@@ -91,13 +95,16 @@ export function fitCurveSchneider(pts, {
             com2.values[3] = cp2.y
         }
 
+        /*
         // harmonize too tight tangents
-        //let harmonize= true;
+        let harmonize = true;
+         harmonize = false;
         if (harmonize) {
             pathData = harmonizeCubicCptsThird([{ type: 'M', values: [pts[0].x, pts[0].y] },
             ...pathData])
             pathData.shift()
         }
+        */
 
     }
 

package/src/simplify_poly_RC.js

@@ -0,0 +1,102 @@
+import { getSquareDistance, reducePoints } from "./svgii/geometry";
+import { getPolygonArea } from "./svgii/geometry_area";
+import { getPolyBBox } from "./svgii/geometry_bbox";
+
+export function simplifyRC(pts, quality = 1, shiftStart = true) {
+
+    if (pts.length < 4) return pts;
+
+    let l = pts.length;
+
+
+    // starting point
+    let M = pts[0];
+
+    // last point
+    let Z = pts[l - 1];
+
+    // remove unnecessary closing point
+    if (M.x === Z.x && M.y === Z.y) {
+        pts.pop();
+        l--;
+        Z = pts[l - 1];
+    }
+
+    // init new point array
+    let ptsSmp = [M];
+    let pt0 = M;
+    let pt1, pt2;
+
+    // loop through vertices by triangles
+    for (let i = 2; i < l; i++) {
+        pt1 = pts[i - 1];
+        pt2 = pts[i];
+        let isLast = i === l - 1;
+
+        /**
+         * 1. Skip zero-length segments
+         */
+        if ((pt1.x === pt0.x && pt1.y === pt0.y) || (pt1.x === pt2.x && pt1.y === pt2.y)) {
+            continue;
+        }
+
+        /**
+         * 2. Check for perfectly flat
+         * vertical/horizontal segments
+         */
+        let isVertical = (pt0.x === pt1.x);
+        let isHorizontal = (pt0.y === pt1.y);
+
+        if (isVertical || isHorizontal) {
+
+            let isVertical2 = (pt1.x === pt2.x);
+            let isHorizontal2 = (pt1.y === pt2.y);
+
+            if (((isVertical && isVertical2) || (isHorizontal && isHorizontal2))) {
+
+                // perfectly flat segment - skip
+                if (!isLast) continue;
+
+                // flat but last – add last and skip colinearity check
+                if (isLast && M.x !== pt2.x && M.y !== pt2.y) {
+
+                    ptsSmp.push(pt2);
+                    continue
+                }
+
+            }
+        }
+
+        // check area
+        let area = getPolygonArea([pt0, pt1, pt2], true)
+        let thresh = getSquareDistance(pt0, pt2) * 0.005;
+
+        // flat
+        if ( area <= thresh && i<l-1) {
+            //console.log(area, thresh, pt0, pt1, pt2, i);
+            pt0 = pt1;
+            continue
+        }
+
+        // no simplification - add mid pt 
+        ptsSmp.push(pt1);
+
+        // add last point if not first
+        if (isLast && M.x !== pt2.x && M.y !== pt2.y) {
+            // console.log('add last', M, pt2);
+            ptsSmp.push(pt2);
+        }
+
+        // update previous point
+        pt0 = pt1;
+
+    }
+
+    // 1st and last are colinear
+    let area0 = getPolygonArea([ptsSmp[1], M, ptsSmp[ptsSmp.length-1]], true)
+    let thresh0 = getSquareDistance (ptsSmp[1], ptsSmp[ptsSmp.length-1]) * 0.005
+    // remove first point
+    if(area0 < thresh0) ptsSmp.shift()
+
+    return ptsSmp;
+}

package/src/simplify_poly_RDP.js

@@ -3,6 +3,113 @@ import { getPolyBBox } from "./svgii/geometry_bbox";
 import { renderPoint } from "./svgii/visualize";
 
 
+
+export function simplifyRDP_rel(pts, quality = 0.9, width = 0, height = 0) {
+
+    /**
+     * switch between absolute or 
+     * quality based relative thresholds
+     */
+    let isAbsolute = false;
+
+    if (typeof quality === 'string') {
+        isAbsolute = true;
+        quality = parseFloat(quality);
+    }
+
+    if (pts.length < 4 ) return pts;
+
+    // convert quality to squaredistance tolerance
+    let tolerance = quality;
+    //console.log('simplifyRDP', tolerance);
+
+    if (!isAbsolute) {
+        
+        //tolerance = 1 - quality;
+        tolerance = quality;
+
+        // adjust for higher qualities
+        if (quality > 0.5) tolerance /= 2;
+
+        /**
+         * approximate dimensions
+         * adjust tolerance for 
+         * very small polygons e.g geodata
+         */
+        if (!width && !height) {
+            let polyS = reducePoints(pts, 12);
+            ({ width, height } = getPolyBBox(polyS));
+        }
+
+        // average side lengths
+        let dimAvg = (width + height) / 2;
+        let scale = dimAvg / 100;
+        tolerance = (tolerance * (scale)) ** 2
+
+        console.log('!!!tolerance', tolerance);
+
+
+    }
+
+
+    // Square distance from point to segment
+    const segmentSquareDistance = (p, p1, p2) => {
+        let x = p1.x, y = p1.y;
+        let dx = p2.x - x, dy = p2.y - y;
+
+        if (dx !== 0 || dy !== 0) {
+            let t = ((p.x - x) * dx + (p.y - y) * dy) / (dx * dx + dy * dy);
+            if (t > 1) {
+                x = p2.x;
+                y = p2.y;
+            } else if (t > 0) {
+                x += dx * t;
+                y += dy * t;
+            }
+        }
+
+        return (p.x - x) ** 2 + (p.y - y) ** 2;
+    };
+
+
+    // start collecting ptsSmp polyline
+    let ptsSmp = [pts[0]];
+
+    // create processing stack
+    let stack = [];
+    stack.push([0, pts.length - 1]);
+
+    while (stack.length > 0) {
+        let [first, last] = stack.pop();
+        let maxDist = tolerance;
+        let index = -1;
+
+        // Find point with maximum distance
+        for (let i = first + 1; i < last; i++) {
+            let currentDist = segmentSquareDistance(pts[i], pts[first], pts[last]);
+            if (currentDist > maxDist) {
+                index = i;
+                maxDist = currentDist;
+            }
+        }
+
+        // If max distance > tolerance, split and process
+        if (maxDist > tolerance) {
+            stack.push([index, last]);
+            stack.push([first, index]);
+        } else {
+            ptsSmp.push(pts[last]);
+        }
+
+    }
+
+    return ptsSmp;
+}
+
+
+
+
+
 export function simplifyPolyRDP(pts, {quality = 0.9, width = 0, height = 0}={}) {
 
     /**
@@ -16,7 +123,8 @@ export function simplifyPolyRDP(pts, {quality = 0.9, width = 0, height = 0}={})
         quality = parseFloat(quality);
     }
 
-    if (pts.length < 4 || (!isAbsolute && quality) >= 1) return pts;
+    //|| (!isAbsolute && quality) >= 1
+    if (pts.length < 4 ) return pts;
 
     // convert quality to squaredistance tolerance
     let tolerance = quality;

package/src/simplify_poly_radial_distance.js

@@ -31,7 +31,8 @@ export function simplifyPolyRD(pts, {quality = 0.9, width = 0, height = 0}={}) {
     }
 
     // nothing to do - exit
-    if (pts.length < 4 || (!isAbsolute && quality) >= 1) return pts;
+    //|| (!isAbsolute && quality) >= 1
+    if (pts.length < 4 ) return pts;
 
     let p0 = pts[0];
     let pt;
@@ -43,8 +44,7 @@ export function simplifyPolyRD(pts, {quality = 0.9, width = 0, height = 0}={}) {
     if (!isAbsolute) {
 
         // quality to tolerance
-        tolerance = 1 - quality;
-
+        tolerance = quality;
 
         /**
          * approximate dimensions

package/src/string_helpers.js

@@ -0,0 +1,144 @@
+import { isNumericValue } from "./svgii/convert_units"
+
+export function toCamelCase(str) {
+  return str
+    .split(/[-| ]/)
+    .map((e, i) => i
+      ? e.charAt(0).toUpperCase() + e.slice(1).toLowerCase()
+      : e.toLowerCase()
+    )
+    .join('')
+}
+
+export function toShortStr(str) {
+  if (isNumericValue(str)) return str
+  let strShort = str.split('-').map(str => { return str.replace(/a|e|i|o|u/g, '') }).join('-')
+  strShort = toCamelCase(strShort)
+  return strShort
+}
+
+
+export function stringifySVG(svg, {
+  omitNamespace = false,
+  removeComments = true,
+  format = 0,
+} = {}) {
+
+
+  let markup = '';
+
+  if (format < 2) {
+    markup = new XMLSerializer().serializeToString(svg);
+    //if (format === 0) markup = minifySVGMarkup(markup, { removeComments })
+    markup = minifySVGMarkup(markup, { removeComments })
+    
+  } else {
+    markup = serializeSVGPretty(svg)
+  }
+
+
+  if (omitNamespace) {
+    markup = markup.replaceAll('xmlns="http://www.w3.org/2000/svg"', '')
+  }
+
+  if (removeComments) {
+    markup = markup
+      .replace(/(<!--.*?-->)|(<!--[\S\s]+?-->)|(<!--[\S\s]*?$)/g, '')
+  }
+
+  /*
+  markup = markup
+    .replace(/\t/g, "")
+    .replace(/[\n\r|]/g, "\n")
+    .replace(/\n\s*\n/g, '\n')
+    .replace(/ +/g, ' ')
+    //.replace(/  +/g, ' ')
+    .replace(/> </g, '><')
+    .trim()
+    // sanitize linebreaks within pathdata
+    .replaceAll('&#10;', '\n');
+  */
+
+  //console.log(markup);
+
+  return markup
+}
+
+
+
+export function minifySVGMarkup(svg, {
+  removeComments = true,
+} = {}) {
+
+  if (removeComments) {
+    svg = svg.replace(/<!--[\s\S]*?-->/g, '')
+  }
+
+  // Remove whitespace between tags
+  svg = svg.replace(/>\s+</g, '><')
+    // Trim leading/trailing whitespace
+    .trim()
+    // Remove extra whitespace within tags (attributes)
+    .replace(/\s+([=])\s+/g, '$1')
+    .replace(/\s+(?=[^<]*>)/g, ' ')
+    // Collapse multiple spaces to single space
+    .replace(/\s{2,}/g, ' ')
+    // Remove spaces around = signs in attributes
+    .replace(/\s*=\s*/g, '=');
+
+  return svg
+}
+
+export function serializeSVGPretty(xmlDoc, {
+  indentSize = 2 } = {}) {
+  if (typeof xmlDoc === 'string') {
+    xmlDoc = new DOMParser().parseFromString(xmlDoc, 'image/svg+xml').querySelector('svg')
+  }
+  return formatXMLNode(xmlDoc, 0, indentSize);
+}
+
+
+function formatXMLNode(node, level, indentSize) {
+  let indent = " ".repeat(level * indentSize);
+
+  if (node.nodeType === Node.TEXT_NODE) {
+    let text = node.textContent.trim();
+    return text ? text : "";
+  }
+
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    let hasChildren = node.children.length > 0;
+    let hasTextContent = node.textContent.trim().length > 0 && node.children.length === 0;
+
+    let result = `${indent}<${node.nodeName}`;
+
+    // Add attributes
+    for (let i = 0; i < node.attributes.length; i++) {
+      let att = node.attributes[i];
+      result += ` ${att.name}="${att.value}"`;
+    }
+
+    if (!hasChildren && !hasTextContent) {
+      return result + " />\n";
+    }
+
+    result += ">";
+
+    if (hasChildren) {
+      result += "\n";
+      for (let child of node.children) {
+        result += formatXMLNode(child, level + 1, indentSize);
+      }
+      result += `${indent}</${node.nodeName}>\n`;
+    } else if (hasTextContent) {
+      result += node.textContent.trim();
+      result += `</${node.nodeName}>\n`;
+    } else {
+      result += `</${node.nodeName}>\n`;
+    }
+
+    return result;
+  }
+
+  return "";
+}

package/src/svgii/convert_units.js

@@ -16,8 +16,14 @@ export function svgElUnitsToPixel(el, {
 
     let attributes = [...el.attributes];
     let attNames = attributes.map(att => att.name)
-    let attValues = attributes.map(att => att.nodeValue)
-    //console.log('attributes', attributes);
+
+    // doesn't work in node!
+    //let attValues = attributes.map(att => att.nodeValue)
+    
+    let attValues = []
+    attNames.forEach(att=>{
+        attValues.push(el.getAttribute(att))
+    })
 
     let isSquare = width === height;