svg-path-simplify 0.3.5 → 0.4.0

package/src/svgii/convert_units.js

@@ -0,0 +1,159 @@
+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";
+
+
+export function svgElUnitsToPixel(el, {
+    width = 0,
+    height = 0,
+    fontSize = 16,
+    dpi = 96,
+    autoRoundValues = false,
+    decimals = -1,
+} = {}) {
+
+
+    let attributes = [...el.attributes];
+    let attNames = attributes.map(att => att.name)
+    let attValues = attributes.map(att => att.nodeValue)
+    //console.log('attributes', attributes);
+
+    let isSquare = width === height;
+
+    let atts = {}
+    attNames.forEach((att, i) => {
+        let isHorizontal = horizontalProps.includes(att)
+        let isVertical = verticalProps.includes(att)
+        let normalizedDiagonal = !isSquare && att === 'r' ? true : false
+        let attValue = attValues[i];
+        //console.log(att, isHorizontal, isVertical, autoRoundValues);
+        let val = normalizeUnits(attValue, { isHorizontal, isVertical, width, height, normalizedDiagonal, autoRoundValues })
+        atts[att] = val;
+
+        // apply
+        el.setAttribute(att, val)
+    })
+
+    return atts;
+}
+
+
+// convert real life units to pixels
+export function normalizeUnits(value = null, {
+    unit = null,
+    width = 0,
+    height = 0,
+    decimals = -1,
+    isHorizontal = false,
+    isVertical = false,
+    autoRoundValues = false,
+    dpi = 96,
+    fontSize = 16,
+    normalizedDiagonal = false,
+} = {}) {
+
+    // only required for circle r normalization when height!=width
+    normalizedDiagonal = width === height ? false : normalizedDiagonal;
+
+    let type = typeof value;
+    if (!value) return value;
+
+    // check if value is string
+    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);
+    if (!isNum || isArray || isFunction) return value
+
+    // check unit if not specified
+    unit = !unit ? getUnit(value) : unit;
+
+    let val = parseFloat(value);
+    let scale = 1;
+    let scaleRoot = Math.sqrt(width * width + height * height) / root2
+
+
+    // no unit - already pixes/user unit
+    if (!unit) {
+        return val;
+    }
+
+    switch (unit) {
+        case "%":
+            if (width && isHorizontal) {
+                scale = width / 100;
+            }
+            else if (height && isVertical) {
+                scale = height / 100;
+            }
+            else {
+                scale = normalizedDiagonal ? scaleRoot / 100 : 1;
+            }
+            break;
+
+        case "rad":
+            scale = rad2Deg;
+            break;
+        case "turn":
+            scale = 360;
+            break;
+
+        case "in":
+            scale = dpi;
+            break;
+
+        case "pt":
+            // 1/72
+            scale = dpi * inch2pt;
+            break;
+
+        case "pc":
+            // 1/6
+            scale = dpi * 0.16666667;
+            break;
+
+        case "cm":
+            // 1/2.54
+            scale = inch2cm * dpi;
+            break;
+        case "mm":
+            //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":
+            scale = fontSize;
+            break;
+        default:
+            scale = 1;
+    }
+    let valuePx = val * scale;
+    if (autoRoundValues) valuePx = autoRound(valuePx);
+    else if (decimals > -1) valuePx = +valuePx.toFixed(decimals);
+
+    //console.log('valuePx', valuePx);
+    return valuePx;
+};
+
+
+export function getUnit(val) {
+    if (!val || !isNaN(val)) return '';
+    val = val.replace(/\+|\-/g, '');
+    let unit = val.match(/[^\d|.]+/g)[0];
+    return unit;
+}
+
+export function isNumericValue(val = '') {
+    // is number
+    if (!isNaN(val)) return true;
+    // parse with unit
+    return !isNaN(parseFloat(val))
+}

package/src/svgii/geometry.js

@@ -3,9 +3,11 @@ 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 } from "../constants";
+import { rad2Deg, root2 } from "../constants";
+//import { getPolyBBox } from "./geometry_bbox";
 import { renderPoint } from "./visualize";
 
+
 export const {
     abs, acos, asin, atan, atan2, ceil, cos, exp, floor,
     log, max, min, pow, random, round, sin, sqrt, tan, PI
@@ -127,6 +129,15 @@ export function checkLineIntersection(p1 = null, p2 = null, p3 = null, p4 = null
         return false
     }
 
+    // coinciding line points
+    if (
+        (p1.x === p2.x && p1.y === p2.y) ||
+        (p3.x === p4.x && p3.y === p4.y)
+    ) {
+        return false
+    }
+
+
     try {
         denominator = ((p4.y - p3.y) * (p2.x - p1.x)) - ((p4.x - p3.x) * (p2.y - p1.y));
 
@@ -171,6 +182,8 @@ export function checkLineIntersection(p1 = null, p2 = null, p3 = null, p4 = null
         return false;
     }
 
+
+
     // if line1 and line2 are segments, they intersect if both of the above are true
     //console.log('inter', intersectionPoint)
     return intersectionPoint;
@@ -192,7 +205,7 @@ export function isPointInPolygon(pt, polygon, bb, skipBB = false) {
         }
     }
 
-    let l=polygon.length;
+    let l = polygon.length;
     for (let i = l - 1, j = 0; j < l; i = j, j++) {
         const A = polygon[i];
         const B = polygon[j];
@@ -204,7 +217,7 @@ export function isPointInPolygon(pt, polygon, bb, skipBB = false) {
             /** 
              * if pt inside the vertical range filter out "ray pass vertex" problem 
              * by treating the line a little lower
-             */ 
+             */
             if ((pt.y == A.y && B.y >= A.y) || (pt.y == B.y && A.y >= B.y)) continue;
             // calc cross product `ptA X ptB`, pt lays on left side of AB if c > 0
             const c = (A.x - pt.x) * (B.y - pt.y) - (B.x - pt.x) * (A.y - pt.y);
@@ -1273,7 +1286,7 @@ export function intersectLines(p1, p2, p3, p4) {
  */
 export function getDistance(p1, p2, isArray = false) {
     //if(Array.isArray(p1)) isArray = true;
-    
+
     //console.log(p1, p2);
     let dx = isArray ? p2[0] - p1[0] : (p2.x - p1.x);
     let dy = isArray ? p2[1] - p1[1] : (p2.y - p1.y);
@@ -1388,6 +1401,13 @@ export function reducePoints(points, maxPoints = 48) {
 }
 
 
+export function getElementTransform(parent, el) {
+    if (!parent || !el) return { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 }
+    let matrix = parent.getScreenCTM().inverse().multiply(el.getScreenCTM());
+    return matrix
+}
+
+
 export function mirrorCpts(cpt2_0, pt0, cpt2, pt1, outgoing = true, t = 0.666) {
 
     // hypotenuse angle

package/src/svgii/geometry_bbox.js

@@ -1,10 +1,11 @@
 
 //import { splitSubpaths } from "./convert_segments";
+import { getElementAtts } from "../svg-getAttributes";
 import { pointAtT, svgArcToCenterParam, getBezierExtremeT, getArcExtemes, getDistance, interpolate, getPointOnEllipse } from "./geometry";
+//import { parsePathDataNormalized } from "./pathData_convert";
 import { renderPoint } from "./visualize";
 //import {arcToBezier} from'./pathData_convert';
 
-
 /**
  * calculate polygon bbox
  */

package/src/svgii/geometry_bbox_element.js

@@ -0,0 +1,46 @@
+import { getElementAtts } from "../svg-getAttributes";
+import { getPathDataPoly, getPolyBBox } from "./geometry_bbox";
+import { parsePathDataNormalized } from "./pathData_convert";
+import { normalizePoly } from "./poly_normalize";
+
+export function getElBBox(el){
+
+    let type=el.nodeName.toLowerCase()
+    let atts = getElementAtts(el);
+    let bb = {x:0, y:0, width:0, height:0}
+    let pts = [];
+
+    switch(type){
+        case 'path':
+            let pathData = parsePathDataNormalized(atts.d)
+            bb=getPolyBBox(getPathDataPoly(pathData))
+
+        break;
+        case 'rect':
+            bb = {x:atts.x||0, y:atts.y||0, width:atts.width, height:atts.height}
+        break;
+        case 'circle':
+            let diameter = atts.r*2
+            bb = {x:atts.cx-atts.r, y:atts.cy-atts.r, width:diameter, height:diameter}
+        break;
+        case 'ellipse':
+            bb = {x:atts.cx-atts.rx, y:atts.cy-atts.ry, width:atts.rx*2, height:atts.ry*2}
+        break;
+
+        case 'line':
+            pts = [{x:atts.x1, y:atts.y1}, {x:atts.x2, y:atts.y2}]
+            bb = getPolyBBox(pts)
+        break;
+
+        case 'polyline':
+        case 'polygon':
+            pts = normalizePoly(atts.points);
+            bb = getPolyBBox(pts)
+        break;
+
+    }
+    //console.log('bb', bb, type, el);
+
+    return bb;
+}
+

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)
 
 
@@ -316,7 +336,7 @@ export function getPathDataVerbose(pathData, {
             }
         }
 
-        else if (type === 'A') {
+        else if (type === 'A' && addArcParams) {
             let { rx, ry, cx, cy, startAngle, endAngle, deltaAngle } = svgArcToCenterParam(p0.x, p0.y, ...values)
             com.cx = cx
             com.cy = cy