svg-path-simplify 0.4.2 → 0.4.4

package/src/string_helpers.js

@@ -3,16 +3,142 @@ import { isNumericValue } from "./svgii/convert_units"
 export function toCamelCase(str) {
   return str
     .split(/[-| ]/)
-    .map((e,i) => i
+    .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('-')
+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/svg-getAttributes.js

@@ -1,11 +1,13 @@
 import { normalizeUnits } from "./svgii/convert_units";
 
 export function getElementAtts(el, {x=0, y=0, width=0, height=0}={}){
-    let attributes = [...el.attributes];
+    //let attributes = [...el.attributes];
+    let attributes = [...el.attributes].map(att=>att.name);
 
     let atts={};
     attributes.forEach(att=>{
-        let value = normalizeUnits(att.nodeValue, {x, y, width, height});   
+        //let value = normalizeUnits(att.nodeValue, {x, y, width, height});   
+        let value = normalizeUnits(el.getAttribute(att), {x, y, width, height});   
         atts[att.name] = value
     })
 

package/src/svgii/convert_units.js

@@ -94,7 +94,7 @@ export function normalizeUnits(value = null, {
                 scale = height / 100;
             }
             else {
-                scale = normalizedDiagonal ? scaleRoot / 100 : 1;
+                scale = normalizedDiagonal ? scaleRoot / 100 :  width / 100;
             }
             break;
 

package/src/svgii/geometry.js

@@ -3,7 +3,8 @@ import {abs, acos, asin, atan, atan2, ceil, cos, exp, floor,
     log, max, min, pow, random, round, sin, sqrt, tan, PI} from '/.constants.js';
     */
 
-import { rad2Deg, root2 } from "../constants";
+import { deg2rad, rad2Deg, root2 } from "../constants";
+//import { roundTo } from "./rounding";
 //import { getPolyBBox } from "./geometry_bbox";
 import { renderPoint } from "./visualize";
 
@@ -23,6 +24,11 @@ export function getAngle(p1, p2, normalize = false) {
 }
 
 
+
+
+
+
+
 export function getDeltaAngle2(centerPoint, startPoint, endPoint, largeArc = false) {
 
     const normalizeAngle = (angle) => {
@@ -315,6 +321,7 @@ export function pointAtT(pts, t = 0.5, getTangent = false, getCpts = false, retu
             let t1 = 1 - t;
 
             // cubic beziers
+            /*
             if (isCubic) {
                 pt = {
                     x:
@@ -330,11 +337,30 @@ export function pointAtT(pts, t = 0.5, getTangent = false, getCpts = false, retu
                 };
 
             }
+            */
+
+            if (isCubic) {
+                pt = {
+                    x:
+                        t1 * t1 * t1 * p0.x +
+                        3 * t1 * t1 * t * cp1.x +
+                        3 * t1 * t * t * cp2.x +
+                        t * t * t * p.x,
+                    y:
+                        t1 * t1 * t1 * p0.y +
+                        3 * t1 * t1 * t * cp1.y +
+                        3 * t1 * t * t * cp2.y +
+                        t * t * t * p.y,
+                };
+
+            }
+
+
             // quadratic beziers
             else {
                 pt = {
-                    x: t1 * t1 * p0.x + 2 * t1 * t * cp1.x + t ** 2 * p.x,
-                    y: t1 * t1 * p0.y + 2 * t1 * t * cp1.y + t ** 2 * p.y,
+                    x: t1 * t1 * p0.x + 2 * t1 * t * cp1.x + t * t * p.x,
+                    y: t1 * t1 * p0.y + 2 * t1 * t * cp1.y + t * t * p.y,
                 };
             }
 
@@ -370,9 +396,40 @@ export function pointAtT(pts, t = 0.5, getTangent = false, getCpts = false, retu
 
 
 
+
 /**
  * get vertices from path command final on-path points
  */
+
+export function getPathDataVertices(pathData=[], includeCpts = false, decimals = -1) {
+    let polyPoints = [];
+    //console.log(pathData);
+
+    pathData.forEach((com) => {
+        let { type, values } = com;
+
+        // get final on path point from last 2 values
+        if (values.length) {
+
+            // round
+            if (decimals > -1) values = values.map(val => +val.toFixed(decimals))
+
+            if (includeCpts) {
+
+                for (let i = 1; i < values.length; i += 2) {
+                    polyPoints.push({ x: values[i - 1], y: values[i] });
+                }
+
+            } else {
+                polyPoints.push({ x: values[values.length - 2], y: values[values.length - 1] });
+            }
+
+        }
+    });
+    return polyPoints;
+}
+
+/*
 export function getPathDataVertices(pathData) {
     let polyPoints = [];
     let p0 = { x: pathData[0].values[0], y: pathData[0].values[1] };
@@ -389,6 +446,7 @@ export function getPathDataVertices(pathData) {
     });
     return polyPoints;
 };
+*/
 
 
 
@@ -396,7 +454,148 @@ export function getPathDataVertices(pathData) {
  *  based on @cuixiping;
  *  https://stackoverflow.com/questions/9017100/calculate-center-of-svg-arc/12329083#12329083
  */
-export function svgArcToCenterParam(x1, y1, rx, ry, xAxisRotation, largeArc, sweep, x2, y2) {
+
+
+export function svgArcToCenterParam(x1, y1, rx, ry, xAxisRotation, largeArc, sweep, x2, y2, normalize = true
+) {
+
+    // helper for angle calculation
+    const getAngle = (cx, cy, x, y, normalize = true) => {
+        let angle = Math.atan2(y - cy, x - cx);
+        if (normalize && angle < 0) angle += Math.PI * 2
+        return angle
+    };
+
+    // make sure rx, ry are positive
+    rx = Math.abs(rx);
+    ry = Math.abs(ry);
+
+    // normalize xAxis rotation
+    xAxisRotation = rx === ry ? 0 : (xAxisRotation < 0 && normalize ? xAxisRotation + 360 : xAxisRotation);
+
+
+    // create data object
+    let arcData = {
+        cx: 0,
+        cy: 0,
+        // rx/ry values may be deceptive in arc commands
+        rx: rx,
+        ry: ry,
+        startAngle: 0,
+        endAngle: 0,
+        deltaAngle: 0,
+        clockwise: sweep,
+        // copy explicit arc properties
+        xAxisRotation,
+        largeArc,
+        sweep
+    };
+
+
+    if (rx == 0 || ry == 0) {
+        // invalid arguments
+        throw Error("rx and ry can not be 0");
+    }
+
+
+    /**
+     * if rx===ry x-axis rotation is ignored
+     * otherwise convert degrees to radians
+     */
+    let phi = rx === ry ? 0 : xAxisRotation * deg2rad;
+    let cx, cy
+
+    let s_phi = !phi ? 0 : Math.sin(phi);
+    let c_phi = !phi ? 1 : Math.cos(phi);
+
+    let hd_x = (x1 - x2) / 2;
+    let hd_y = (y1 - y2) / 2;
+    let hs_x = (x1 + x2) / 2;
+    let hs_y = (y1 + y2) / 2;
+
+    // F6.5.1
+    let x1_ = !phi ? hd_x : c_phi * hd_x + s_phi * hd_y;
+    let y1_ = !phi ? hd_y : c_phi * hd_y - s_phi * hd_x;
+
+    // F.6.6 Correction of out-of-range radii
+    //   Step 3: Ensure radii are large enough
+    let lambda = (x1_ * x1_) / (rx * rx) + (y1_ * y1_) / (ry * ry);
+    if (lambda > 1) {
+        let lambdaRoot = Math.sqrt(lambda);
+        rx = rx * lambdaRoot;
+        ry = ry * lambdaRoot;
+
+        // save real rx/ry
+        arcData.rx = rx;
+        arcData.ry = ry;
+    }
+
+    let rxry = rx * ry;
+    let rxy1_ = rx * y1_;
+    let ryx1_ = ry * x1_;
+    let sum_of_sq = rxy1_ ** 2 + ryx1_ ** 2; // sum of square
+    if (!sum_of_sq) {
+        //console.log('error:', rx, ry, rxy1_, ryx1_);
+        throw Error("start point can not be same as end point");
+    }
+    let coe = Math.sqrt(Math.abs((rxry * rxry - sum_of_sq) / sum_of_sq));
+    if (largeArc === sweep) {
+        coe = -coe;
+    }
+
+    // F6.5.2
+    let cx_ = (coe * rxy1_) / ry;
+    let cy_ = (-coe * ryx1_) / rx;
+
+    /** F6.5.3
+     * center point of ellipse
+     */
+    cx = !phi ? hs_x + cx_ : c_phi * cx_ - s_phi * cy_ + hs_x;
+    cy = !phi ? hs_y + cy_ : s_phi * cx_ + c_phi * cy_ + hs_y;
+    arcData.cy = cy;
+    arcData.cx = cx;
+
+    /** F6.5.5
+     * calculate angles between center point and
+     * commands starting and final on path point
+     */
+    let startAngle = getAngle(cx, cy, x1, y1, normalize);
+    let endAngle = getAngle(cx, cy, x2, y2, normalize);
+
+    // adjust end angle
+
+    // Adjust angles based on sweep direction
+    if (sweep) {
+        // Clockwise
+        if (endAngle < startAngle) {
+            endAngle += Math.PI * 2;
+        }
+    } else {
+        // Counterclockwise
+        if (endAngle > startAngle) {
+            endAngle -= Math.PI * 2;
+        }
+    }
+
+    let deltaAngle = endAngle - startAngle;
+
+    // The rest of your code remains the same
+    arcData.startAngle = startAngle;
+    arcData.startAngle_deg = startAngle * rad2Deg;
+    arcData.endAngle = endAngle;
+    arcData.endAngle_deg = endAngle * rad2Deg;
+    arcData.deltaAngle = deltaAngle;
+    arcData.deltaAngle_deg = deltaAngle * rad2Deg;
+
+    //console.log('arc', arcData);
+    return arcData;
+}
+
+
+
+
+
+export function svgArcToCenterParam_back(x1, y1, rx, ry, xAxisRotation, largeArc, sweep, x2, y2) {
 
     // helper for angle calculation
     const getAngle = (cx, cy, x, y) => {
@@ -784,6 +983,124 @@ export function getBezierExtremeT(pts, { addExtremes = true, addSemiExtremes = f
  * https://stackoverflow.com/questions/87734/#75031511
  * See also: https://github.com/foo123/Geometrize
  */
+
+export function getArcExtemesParam({
+    cx=0, cy=0, rx=0, ry=0,
+    p=null,
+    p0=null,
+    endAngle=0,
+    deltaAngle=0,
+
+
+}={}) {
+    // compute point on ellipse from angle around ellipse (theta)
+    const arc = (theta, cx, cy, rx, ry, alpha) => {
+        // theta is angle in radians around arc
+        // alpha is angle of rotation of ellipse in radians
+        var cos = Math.cos(alpha),
+            sin = Math.sin(alpha),
+            x = rx * Math.cos(theta),
+            y = ry * Math.sin(theta);
+
+        return {
+            x: cx + cos * x - sin * y,
+            y: cy + sin * x + cos * y
+        };
+    }
+
+    //parametrize arcto data
+    //let arcData = svgArcToCenterParam(p0.x, p0.y, values[0], values[1], values[2], values[3], values[4], values[5], values[6]);
+    //let { rx, ry, cx, cy, endAngle, deltaAngle } = arcData;
+
+    // arc rotation
+    let deg = values[2];
+
+    // final on path point
+    //let p = { x: values[5], y: values[6] }
+
+    // collect extreme points – add end point
+    let extremes = [p]
+
+    // rotation to radians
+    let alpha = deg * Math.PI / 180;
+    let tan = Math.tan(alpha),
+        p1, p2, p3, p4, theta;
+
+    /**
+    * find min/max from zeroes of directional derivative along x and y
+    * along x axis
+    */
+    theta = Math.atan2(-ry * tan, rx);
+
+    let angle1 = theta;
+    let angle2 = theta + Math.PI;
+    let angle3 = Math.atan2(ry, rx * tan);
+    let angle4 = angle3 + Math.PI;
+
+
+    // inner bounding box
+    let xArr = [p0.x, p.x]
+    let yArr = [p0.y, p.y]
+    let xMin = Math.min(...xArr)
+    let xMax = Math.max(...xArr)
+    let yMin = Math.min(...yArr)
+    let yMax = Math.max(...yArr)
+
+
+    // on path point close after start
+    let angleAfterStart = endAngle - deltaAngle * 0.001
+    let pP2 = arc(angleAfterStart, cx, cy, rx, ry, alpha);
+
+    // on path point close before end
+    let angleBeforeEnd = endAngle - deltaAngle * 0.999
+    let pP3 = arc(angleBeforeEnd, cx, cy, rx, ry, alpha);
+
+
+    /**
+     * expected extremes
+     * if leaving inner bounding box
+     * (between segment start and end point)
+     * otherwise exclude elliptic extreme points
+    */
+
+    // right
+    if (pP2.x > xMax || pP3.x > xMax) {
+        // get point for this theta
+        p1 = arc(angle1, cx, cy, rx, ry, alpha);
+        extremes.push(p1)
+    }
+
+    // left
+    if (pP2.x < xMin || pP3.x < xMin) {
+        // get anti-symmetric point
+        p2 = arc(angle2, cx, cy, rx, ry, alpha);
+        extremes.push(p2)
+    }
+
+    // top
+    if (pP2.y < yMin || pP3.y < yMin) {
+        // get anti-symmetric point
+        p4 = arc(angle4, cx, cy, rx, ry, alpha);
+        extremes.push(p4)
+    }
+
+    // bottom
+    if (pP2.y > yMax || pP3.y > yMax) {
+        // get point for this theta
+        p3 = arc(angle3, cx, cy, rx, ry, alpha);
+        extremes.push(p3)
+    }
+
+    return extremes;
+}
+
+
+
+
+
+
+
+
 export function getArcExtemes(p0, values) {
     // compute point on ellipse from angle around ellipse (theta)
     const arc = (theta, cx, cy, rx, ry, alpha) => {
@@ -1292,7 +1609,7 @@ export function getDistance(p1, p2, isArray = false) {
     let dy = isArray ? p2[1] - p1[1] : (p2.y - p1.y);
 
     //console.log('dx', dx, dy, p1, p2);
-    return sqrt(dx * dx + dy * dy);
+    return Math.sqrt(dx * dx + dy * dy);
 }
 
 // just an alias

package/src/svgii/geometry_bbox_element.js

@@ -12,7 +12,7 @@ export function getElBBox(el){
 
     switch(type){
         case 'path':
-            let pathData = parsePathDataNormalized(atts.d)
+            let pathData = parsePathDataNormalized(el.getAttribute('d'))
             bb=getPolyBBox(getPathDataPoly(pathData))
 
         break;