svg-path-simplify 0.1.3 → 0.2.2

package/src/svgii/pathData_analyze.js

@@ -1,315 +1,362 @@
 import { splitSubpaths } from './pathData_split.js';
-import { getAngle, bezierhasExtreme, getPathDataVertices, svgArcToCenterParam, getSquareDistance, getDistAv } from "./geometry.js";
+import { getAngle, bezierhasExtreme, getPathDataVertices, svgArcToCenterParam, getSquareDistance, getDistManhattan, isMultipleOf45, pointAtT, getTatAngles } from "./geometry.js";
 import { getPolygonArea, getPathArea } from './geometry_area.js';
 import { getPolyBBox } from './geometry_bbox.js';
 import { renderPoint, renderPath } from "./visualize.js";
 import { commandIsFlat } from './geometry_flatness.js';
-
+import { roundPathData } from './rounding.js';
 
 
 /**
- * analyze path data for
- * decimal detection
- * sub paths 
- * directions
- * crucial geometry properties
+ * create pathdata super set 
+ * including geometrical properties such as:
+ * segment introduces x/y extreme
+ * corner
+ * inflection/direction change
  */
 
+export function analyzePathData(pathData = [], {
+    detectExtremes = true,
+    detectCorners = true,
+    detectDirection = true,
+    detectSemiExtremes = false,
+    debug = false,
+    addSquareLength = true,
+    addArea = true,
 
-export function addDimensionData(pathData) {
-
-    let M = { x: pathData[0].values[0], y: pathData[0].values[1] };
-    let p0 = { x: pathData[0].values[0], y: pathData[0].values[1] };
-    let p;
-
-    pathData[0].dimA = 0;
-    let len = pathData.length
-
-    for (let c = 2; len && c <= len; c++) {
-
-        let com = pathData[c - 1];
-        let { type, values } = com;
-        let valsL = values.slice(-2);
-
-        p = valsL.length ? { x: valsL[0], y: valsL[1] } : M;
+} = {}) {
 
-        // update M for Z starting points
-        if (type === 'M') {
-            M = p;
-        }
-        else if (type.toLowerCase() === 'z') {
-            p = M;
-        }
-
-        let dimA = getDistAv(p0, p);
-        com.dimA = dimA;
-        com.p0 = p0
-        com.p = p
-
-
-        if(type==='C' || type==='Q') com.cp1 = {x:values[0], y:values[1]}
-        if(type==='C' ) com.cp2 = {x:values[2], y:values[3]}
-
-        p0=p
-    }
-
-
-    console.log('!!!pathData', pathData);
-    return pathData
-}
-
-
-export function analyzePathData(pathData = []) {
+    // get verbose control point data
+    pathData = getPathDataVerbose(pathData, { addSquareLength, addArea });
+    //pathData = roundPathData(pathData, 3)
 
+    // new pathdata adding properties
     let pathDataPlus = [];
 
+    //console.log('pathData', pathData);
+    //return pathData
+
     let pathPoly = getPathDataVertices(pathData);
     let bb = getPolyBBox(pathPoly)
     let { left, right, top, bottom, width, height } = bb;
 
-    // initial starting point coordinates
-    let M0 = { x: pathData[0].values[0], y: pathData[0].values[1] };
-    let M = { x: pathData[0].values[0], y: pathData[0].values[1] };
-    let p0 = { x: pathData[0].values[0], y: pathData[0].values[1] };
-    let p;
 
     // init starting point data
-    pathData[0].idx = 0;
-    pathData[0].p0 = M;
-    pathData[0].p = M;
-    pathData[0].lineto = false;
     pathData[0].corner = false;
     pathData[0].extreme = false;
+    pathData[0].semiExtreme = false;
     pathData[0].directionChange = false;
     pathData[0].closePath = false;
-    pathData[0].dimA = 0;
+    //pathData[0].dimA = 0;
 
 
     // add first M command
     let pathDataProps = [pathData[0]];
-    let area0 = 0;
     let len = pathData.length;
 
+    // threshold for corner angles: 10 deg
+    let thresholdCorner = Math.PI * 2 / 360 * 10
+
+    // define angle threshold for semi extremes
+    let thresholdAngle = detectSemiExtremes ? 0.01 : 0.05
+
+
     for (let c = 2; len && c <= len; c++) {
 
         let com = pathData[c - 1];
-        let { type, values } = com;
-        let valsL = values.slice(-2);
+        let { type, values, p0, p, cp1 = null, cp2 = null, squareDist = 0, cptArea = 0, dimA = 0 } = com;
+
+        //next command
+        let comN = pathData[c] || null;
 
-        /**
-         * get command points for 
-         * flatness checks:
-         * this way we can skip certain tests
-         */
-        let commandPts = [p0];
-        let isFlat = false;
 
         // init properties
-        com.idx = c - 1;
-        com.lineto = false;
         com.corner = false;
         com.extreme = false;
+        com.semiExtreme = false;
         com.directionChange = false;
         com.closePath = false;
-        com.dimA = 0;
-        //com.flat = false;
+
+        // get command points  
+        let commandPts = (type === 'C' || type === 'Q') ?
+            (type === 'C' ? [p0, cp1, cp2, p] : [p0, cp1, p]) :
+            ([p0, p]);
+
+
+        // check flatness of command
+        let toleranceFlat = 0.01;
+        let thresholdLength = dimA * 0.1
+        let areaThresh = squareDist * toleranceFlat;
+        let isFlat = Math.abs(cptArea) < areaThresh;
+
+
+        // bezier types
+        let isBezier = type === 'Q' || type === 'C';
+        let isBezierN = comN && (comN.type === 'Q' || comN.type === 'C');
 
 
         /**
-         * define angle threshold for 
-         * corner detection
+         * detect extremes
+         * local or absolute 
          */
-        let angleThreshold = 0.05
-        p = valsL.length ? { x: valsL[0], y: valsL[1] } : M;
+        let hasExtremes = false;
 
+        //!isFlat &&
+        if (isBezier) {
 
-        // update M for Z starting points
-        if (type === 'M') {
-            M = p;
-            p0 = p
-        }
-        else if (type.toLowerCase() === 'z') {
-            p = M;
+
+            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 && dx > 0
+            let vertical = dx === 0 && dy > 0
+
+            if (horizontal || vertical) hasExtremes = true;
+
+            // is extreme relative to bounding box 
+            if ((p.x === left || p.y === top || p.x === right || p.y === bottom)) {
+                hasExtremes = true;
+            }
+
+            // interpret segment as extreme if it has an implicit extreme
+            if (!hasExtremes) {
+                let couldHaveExtremes = bezierhasExtreme(null, commandPts)
+                if (couldHaveExtremes) {
+                    let tArr = getTatAngles(commandPts)
+                    if (tArr.length && (tArr[0] > 0.15)) {
+                        hasExtremes = true;
+                    }
+                }
+            }
         }
 
-        // add on-path points
-        com.p0 = p0;
-        com.p = p;
+        if (hasExtremes) com.extreme = true
 
-        let cp1, cp2, cp1N, cp2N, pN, typeN, area1;
+        // Corners and semi extremes 
+        if (isBezier && isBezierN) {
 
-        //let dimA = (width + height) / 2;
-        let dimA = getDistAv(p0, p);
-        com.dimA = dimA;
-        //com.a = dimA;
+            // semi extremes
+            if (detectSemiExtremes && !com.extreme) {
 
+                let dx1 = Math.abs(p.x - cp2.x)
+                let dy1 = Math.abs(p.y - cp2.y)
+                let hasSemiExtreme = false;
 
+                // exclude extremes or small deltas
+                if (dx1 && dy1 && dx1 > thresholdLength || dy1 > thresholdLength) {
+                    let ang1 = getAngle(cp2, p)
+                    let ang2 = getAngle(p, comN.cp1)
 
-        /**
-         * explicit and implicit linetos 
-         * - introduced by Z
-         */
-        if (type === 'L') com.lineto = true;
+                    let ang3 = Math.abs(ang1 + ang2) / 2
+                    hasSemiExtreme = isMultipleOf45(ang3)
+                }
 
-        if (type === 'Z') {
-            com.closePath = true;
-            // if Z introduces an implicit lineto with a length
-            if (M.x !== M0.x && M.y !== M0.y) {
-                com.lineto = true;
+                if (hasSemiExtreme) {
+                    com.semiExtreme = true;
+                }
             }
-        }
 
-        // if bezier
-        if (type === 'Q' || type === 'C') {
-            cp1 = { x: values[0], y: values[1] }
-            cp2 = type === 'C' ? { x: values[2], y: values[3] } : null;
-            com.cp1 = cp1;
-            if (cp2) com.cp2 = cp2;
-        }
 
+            /**
+             * Detect direction change points
+             * this will prevent distortions when simplifying
+             * e.g in the "spine" of an "S" glyph
+             */
+            let signChange = (com.cptArea < 0 && comN.cptArea > 0) || (com.cptArea > 0 && comN.cptArea < 0) ? true : false;
 
-        /**
-         * check command flatness
-         * we leave it to the bezier simplifier
-         * to convert flat beziers to linetos
-         * otherwise we may strip rather flat starting segments
-         * preventing a better simplification
-         */
+            if (signChange) com.directionChange = true;
 
-        if (values.length > 2) {
-            if (type === 'Q' || type === 'C') commandPts.push(cp1);
-            if (type === 'C') commandPts.push(cp2);
-            commandPts.push(p);
+            // check corners
+            if (!com.extreme) {
 
-            /*
-            //let commandFlatness = commandIsFlat(commandPts);
-            let commandFlatness = commandIsFlat(commandPts);
-            isFlat = commandFlatness.flat;
-            com.flat = isFlat;
+                let cp_0 = cp2 ? cp2 : cp1
+                let cp_1 = comN.cp1
 
-            if (isFlat) {
-                com.extreme = false;
-                //renderPoint(markers, p, 'red', '1%', '0.5')
-            }
-            */
+                let areaCpt = getPolygonArea([cp_0, p, cp_1], false)
+                let threshArea = getSquareDistance(cp_0, cp_1) * 0.01
+                let isFlat = Math.abs(areaCpt) < threshArea;
+
+                let signChange2 = (areaCpt < 0 && com.cptArea > 0) || (areaCpt > 0 && com.cptArea < 0) ? true : false;
 
+                let isCorner=!isFlat && signChange2;
+                if (isCorner) com.corner = true;
+            }
         }
 
-        /**
-         * is extreme relative to bounding box 
-         * in case elements are rotated we can't rely on 90degree angles
-         * so we interpret maximum x/y on-path points as well as extremes
-         * but we ignore linetos to allow chunk compilation
-         */
-        if (!isFlat && type !== 'L' && (p.x === left || p.y === top || p.x === right || p.y === bottom)) {
-            com.extreme = true;
+
+        //debug = true;
+        if (debug) {
+            //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)
 
-        //next command
-        let comN = pathData[c] ? pathData[c] : null;
-        let comNValsL = comN ? comN.values.slice(-2) : null;
-        typeN = comN ? comN.type : null;
+    }
 
+    //pathDataProps.push(comLast)
 
-        // get bezier control points
-        if (comN && (comN.type === 'Q' || comN.type === 'C')) {
-            pN = comN ? { x: comNValsL[0], y: comNValsL[1] } : null;
 
-            cp1N = { x: comN.values[0], y: comN.values[1] }
-            cp2N = comN.type === 'C' ? { x: comN.values[2], y: comN.values[3] } : null;
-        }
+    let dimA = (width + height) / 2
+    //pathDataPlus.push({ pathData: pathDataProps, bb: bb, dimA: dimA })
+    pathDataPlus = { pathData: pathDataProps, bb: bb, dimA: dimA }
 
+    //console.log('pathDataPlus', pathDataPlus);
+    return pathDataPlus
 
-        /**
-         * Detect direction change points
-         * this will prevent distortions when simplifying
-         * e.g in the "spine" of an "S" glyph
-         */
-        area1 = getPolygonArea(commandPts)
-        let signChange = (area0 < 0 && area1 > 0) || (area0 > 0 && area1 < 0) ? true : false;
-        // update area
-        area0 = area1
-
-        if (signChange) {
-            //renderPoint(svg1, p0, 'orange', '1%', '0.75')
-            com.directionChange = true;
+}
+
+
+
+
+export function addDimensionData(pathData) {
+
+    let M = { x: pathData[0].values[0], y: pathData[0].values[1] };
+    let p0 = { x: pathData[0].values[0], y: pathData[0].values[1] };
+    let p;
+
+    pathData[0].dimA = 0;
+    let len = pathData.length
+
+    for (let c = 2; len && c <= len; c++) {
+
+        let com = pathData[c - 1];
+        let { type, values } = com;
+        let valsL = values.slice(-2);
+
+        p = valsL.length ? { x: valsL[0], y: valsL[1] } : M;
+
+        // update M for Z starting points
+        if (type === 'M') {
+            M = p;
+        }
+        else if (type.toLowerCase() === 'z') {
+            p = M;
         }
 
+        let dimA = getDistManhattan(p0, p);
+        com.dimA = dimA;
+        com.p0 = p0
+        com.p = p
 
-        /**
-         * check extremes or corners 
-         * for adjacent curves by 
-         * control point angles
-         */
-        if ((type === 'Q' || type === 'C')) {
 
-            if ((type === 'Q' && typeN === 'Q') || (type === 'C' && typeN === 'C')) {
+        if (type === 'C' || type === 'Q') com.cp1 = { x: values[0], y: values[1] }
+        if (type === 'C') com.cp2 = { x: values[2], y: values[3] }
 
-                // check extremes
-                let cpts = commandPts.slice(1);
+        p0 = p
+    }
 
-                let w = pN ? Math.abs(pN.x - p0.x) : 0
-                let h = pN ? Math.abs(pN.y - p0.y) : 0
-                let thresh = (w + h) / 2 * 0.1;
-                let pts1 = type === 'C' ? [p, cp1N, cp2N, pN] : [p, cp1N, pN];
 
-                //let flatness2 = commandIsFlat(pts1, thresh)
-                //let isFlat2 = flatness2.flat;
+    //console.log('!!!pathData', pathData);
+    return pathData
+}
 
-                /**
-                 * if current and next cubic are flat
-                 * we don't flag them as extremes to allow simplification
-                 */
-                //let hasExtremes = (isFlat && isFlat2) ? false : (!com.extreme ? bezierhasExtreme(p0, cpts, angleThreshold) : true);
 
-                let hasExtremes = (isFlat) ? false : (!com.extreme ? bezierhasExtreme(p0, cpts, angleThreshold) : true);
 
 
-                //let bezierExtreme = bezierhasExtreme(p0, cpts, angleThreshold);
+/**
+ * create pathdata super set 
+ * including geometrical properties such as:
+ * start and end points
+ * segment square distances and areas
+ * elliptic arc parameters
+ */
+export function getPathDataVerbose(pathData, {
+    addSquareLength = true,
+    addArea = false,
+    addArcParams = false,
+    addAverageDim = true
+} = {}) {
 
-                //console.log(isFlat, isFlat2, cpts, hasExtremes, 'com.extreme', com.extreme, 'commandPts', commandPts);
+    // initial starting point coordinates
+    let com0 = pathData[0];
+    let M = { x: com0.values[0], y: com0.values[1] };
+    let p0 = M;
+    let p = M;
 
-                if (hasExtremes) {
-                    com.extreme = true
-                }
+    com0.p0 = p0;
+    com0.p = p;
+    com0.idx = 0
+    com0.dimA = 0
 
-                // check corners
-                else {
 
-                    let cpts1 = cp2 ? [cp2, p] : [cp1, p];
-                    let cpts2 = cp2 ? [p, cp1N] : [p, cp1N];
+    let len = pathData.length;
+    let pathDataVerbose = [com0];
 
-                    let angCom1 = getAngle(...cpts1, true)
-                    let angCom2 = getAngle(...cpts2, true)
-                    let angDiff = Math.abs(angCom1 - angCom2) * 180 / Math.PI
+    for (let i = 1; i < len; i++) {
+        let com = pathData[i];
+        let { type, values } = com;
+        let valuesLen = values.length;
 
+        p = valuesLen ? { x: values[valuesLen - 2], y: values[valuesLen - 1] } : M;
+        let cp1, cp2;
 
-                    let cpDist1 = getSquareDistance(...cpts1)
-                    let cpDist2 = getSquareDistance(...cpts2)
+        // add on-path points
+        com.p0 = p0;
+        com.p = p;
+        com.dimA = getDistManhattan(p0, p)
 
-                    let cornerThreshold = 10
-                    let isCorner = angDiff > cornerThreshold && cpDist1 && cpDist2
+        // update M for Z starting points
+        if (type === 'M') {
+            M = p;
+        }
 
-                    if (isCorner) {
-                        com.corner = true;
-                    }
-                }
+        // add bezier control point properties
+        if (type === 'Q' || type === 'C') {
+            cp1 = { x: values[0], y: values[1] }
+            cp2 = type === 'C' ? { x: values[2], y: values[3] } : null;
+            com.cp1 = cp1;
+            if (cp2) {
+                com.cp2 = cp2;
             }
         }
 
+        else if (type === 'A') {
+            let { rx, ry, cx, cy, startAngle, endAngle, deltaAngle } = svgArcToCenterParam(p0.x, p0.y, ...values)
+            com.cx = cx
+            com.cy = cy
+            com.rx = rx
+            com.ry = ry
+            com.xAxisRotation = values[2] / 180 * Math.PI
+            com.largeArc = values[3]
+            com.sweep = values[4]
+            com.startAngle = startAngle
+            com.endAngle = endAngle
+            com.deltaAngle = deltaAngle
+        }
 
-        pathDataProps.push(com)
-        p0 = p;
+        /**
+         * explicit and implicit linetos 
+         * - introduced by Z
+         */
+        if (type === 'Z') {
+            // if Z introduces an implicit lineto with a length
+            if (M.x !== p.x && M.y !== p.y) {
+                com.closePath = true;
+            }
+        }
 
-    }
+        if (addSquareLength) {
+            com.squareDist = getSquareDistance(p0, p)
+        }
 
+        if (addArea) {
+            let cptArea = 0;
+            if (type === 'C') cptArea = getPolygonArea([p0, cp1, cp2, p], false)
+            if (type === 'Q') cptArea = getPolygonArea([p0, cp1, p], false)
+            com.cptArea = cptArea;
+        }
 
-    let dimA = (width + height) / 2
-    //pathDataPlus.push({ pathData: pathDataProps, bb: bb, dimA: dimA })
-    pathDataPlus = { pathData: pathDataProps, bb: bb, dimA: dimA }
+        com.idx = i;
 
-    //console.log('pathDataPlus', pathDataPlus);
-    return pathDataPlus
+        // update previous point
+        p0 = p;
+        pathDataVerbose.push(com)
+    }
 
+    //console.log('pathDataVerbose', pathDataVerbose);
+    return pathDataVerbose;
 }