svg-path-simplify 0.0.1 → 0.0.2

package/src/pathData_simplify_cubic_arr.js

@@ -0,0 +1,50 @@
+import { getDistance, getSquareDistance, checkLineIntersection, pointAtT, getDistAv } from "./svgii/geometry";
+import { getBezierArea, getPolygonArea } from "./svgii/geometry_area";
+import { renderPoint } from "./svgii/visualize";
+
+export function combineCubicArray(commands = [], threshold = 0.05) {
+
+
+    let [comF, comM, comE] = commands;
+
+    commands.forEach(com => {
+        let area = getBezierArea([com.p0, com.cp1, com.cp2, com.p], true)
+        com.area = area
+    })
+
+    // sort by area
+    let commandsFiltered = JSON.parse(JSON.stringify(commands)).sort((a,b)=>b.area-a.area )
+
+    let comL = commandsFiltered[0]
+
+    // find largest segment
+    //let area2 = getBezierArea(comF)
+
+    console.log('area1', commands, commandsFiltered);
+
+    // largest segment
+    comM = commandsFiltered[0]
+
+
+    //let segLargest = 
+    let pt_mid = pointAtT([comM.p0, comM.cp1, comM.cp2, comM.p], 0.5, false, true)
+
+    let seg1_cp2 = pt_mid.cpts[2]
+    let seg2_cp1 = pt_mid.cpts[3]
+    renderPoint(markers, seg1_cp2, 'orange')
+    renderPoint(markers, seg2_cp1, 'cyan')
+
+
+    console.log('comM', pt_mid);
+
+    renderPoint(markers, comF.p0, 'green')
+    renderPoint(markers, comL.p, 'purple')
+    //renderPoint(markers, comE.cp2, 'orange')
+
+    renderPoint(markers, pt_mid, 'magenta')
+    //let ptI_1 = checkLineIntersection(comF)
+
+
+    return commands;
+}
+

package/src/pathData_simplify_cubic_extrapolate.js

@@ -0,0 +1,220 @@
+import { checkLineIntersection, getAngle, getDistAv, getSquareDistance, interpolate, pointAtT, rotatePoint } from "./svgii/geometry";
+import { getPathArea } from "./svgii/geometry_area";
+import { pathDataToD } from "./svgii/pathData_stringify";
+import { renderPath, renderPoint } from "./svgii/visualize";
+
+export function getCombinedByDominant(com1, com2, maxDist = 0, tolerance = 1) {
+
+    // cubic Bézier derivative
+    const cubicDerivative = (p0, p1, p2, p3, t) => {
+        let mt = 1 - t;
+
+        return {
+            x:
+                3 * mt * mt * (p1.x - p0.x) +
+                6 * mt * t * (p2.x - p1.x) +
+                3 * t * t * (p3.x - p2.x),
+            y:
+                3 * mt * mt * (p1.y - p0.y) +
+                6 * mt * t * (p2.y - p1.y) +
+                3 * t * t * (p3.y - p2.y)
+        };
+    }
+
+
+
+    // if combining fails return original commands
+    let commands = [com1, com2]
+
+    // detect dominant 
+    let dist1 = getSquareDistance(com1.p0, com1.p)
+    let dist2 = getSquareDistance(com2.p0, com2.p)
+    let reverse = dist1 > dist2;
+
+    //let ang1 = getAngle(com1.p0, com1.cp1)
+    //let ang2 = getAngle(com2.p, com1.cp2)
+
+    // backup original commands
+    let com1_o = JSON.parse(JSON.stringify(com1))
+    let com2_o = JSON.parse(JSON.stringify(com2))
+
+    let ptI = checkLineIntersection(com1_o.p0, com1_o.cp1, com2_o.p, com2_o.cp2, false)
+
+    if (!ptI) {
+        //renderPoint(markers, com1.p, 'purple')
+        return commands
+    }
+
+
+    if (reverse) {
+        let com2_R = {
+            p0: { x: com1.p.x, y: com1.p.y },
+            cp1: { x: com1.cp2.x, y: com1.cp2.y },
+            cp2: { x: com1.cp1.x, y: com1.cp1.y },
+            p: { x: com1.p0.x, y: com1.p0.y },
+        }
+
+        let com1_R = {
+            p0: { x: com2.p.x, y: com2.p.y },
+            cp1: { x: com2.cp2.x, y: com2.cp2.y },
+            cp2: { x: com2.cp1.x, y: com2.cp1.y },
+            p: { x: com2.p0.x, y: com2.p0.y },
+        }
+
+        com1 = com1_R;
+        com2 = com2_R;
+    }
+
+
+    let add = (a, b) => ({ x: a.x + b.x, y: a.y + b.y });
+    let sub = (a, b) => ({ x: a.x - b.x, y: a.y - b.y });
+    let mul = (a, s) => ({ x: a.x * s, y: a.y * s });
+    let dot = (a, b) => a.x * b.x + a.y * b.y;
+
+
+    // estimate extrapolation parameter t0
+
+    let B0 = com2.p0;
+    let D0 = cubicDerivative(
+        com2.p0,
+        com2.cp1,
+        com2.cp2,
+        com2.p,
+        0
+    );
+
+    let v = sub(com1.p0, B0);
+
+    // first-order projection onto tangent
+    let t0 = dot(v, D0) / dot(D0, D0);
+
+
+    // refine with one Newton iteration (optional but cheap)
+    let P = pointAtT([com2.p0, com2.cp1, com2.cp2, com2.p], t0);
+    let dP = cubicDerivative(com2.p0, com2.cp1, com2.cp2, com2.p, t0);
+    let r = sub(P, com1.p0);
+
+    //let t0_2 = t0 - dot(r, dP) / dot(dP, dP);
+    //console.log(t0, t0_2);
+
+    t0 -= dot(r, dP) / dot(dP, dP);
+
+
+    // construct merged cubic over [t0, 1]
+
+    let Q0 = pointAtT([com2.p0, com2.cp1, com2.cp2, com2.p], t0);
+    let Q3 = com2.p;
+
+    let d0 = cubicDerivative(com2.p0, com2.cp1, com2.cp2, com2.p, t0);
+    let d1 = cubicDerivative(com2.p0, com2.cp1, com2.cp2, com2.p, 1);
+
+    let scale = 1 - t0;
+
+    let Q1 = add(Q0, mul(d0, scale / 3));
+    let Q2 = sub(Q3, mul(d1, scale / 3));
+
+    let result = {
+        p0: Q0,
+        cp1: Q1,
+        cp2: Q2,
+        p: Q3,
+    };
+
+
+    if (reverse) {
+        result = {
+            p0: Q3,
+            cp1: Q2,
+            cp2: Q1,
+            p: Q0,
+        }
+    }
+
+
+    let ptM = pointAtT([result.p0, result.cp1, result.cp2, result.p], 0.5, false, true)
+    let seg1_cp2 = ptM.cpts[2]
+    //let seg2_cp1 = ptM.cpts[3]
+
+
+    let ptI_1 = checkLineIntersection(ptM, seg1_cp2, result.p0, ptI, false)
+    let ptI_2 = checkLineIntersection(ptM, seg1_cp2, result.p, ptI, false)
+
+
+    let cp1_2 = interpolate(result.p0, ptI_1, 1.333)
+    let cp2_2 = interpolate(result.p, ptI_2, 1.333)
+
+    // test self intersections and exit 
+    let cp_intersection = checkLineIntersection(com1_o.p0, cp1_2, com2_o.p, cp2_2, true )
+    if(cp_intersection){
+        //renderPoint(markers, cp_intersection )
+        return commands;
+    }
+
+
+    result.cp1 = cp1_2
+    result.cp2 = cp2_2
+
+    // check distances
+
+    let dist3 = getDistAv(com1_o.p0, result.p0)
+    let dist4 = getDistAv(com2_o.p, result.p)
+    let dist5 = (dist3 + dist4)
+
+    // use original points
+    result.p0 = com1_o.p0
+    result.p = com2_o.p
+    result.extreme = com2_o.extreme
+    result.corner = com2_o.corner
+    result.dimA = com2_o.dimA
+    result.directionChange = com2_o.directionChange
+    result.values = [result.cp1.x, result.cp1.y, result.cp2.x, result.cp2.y, result.p.x, result.p.y]
+
+
+
+    // check if completely off
+    if (dist5 < maxDist) {
+
+        // compare combined with original area
+        let pathData0 = [
+            { type: 'M', values: [com1_o.p0.x, com1_o.p0.y] },
+            { type: 'C', values: [com1_o.cp1.x, com1_o.cp1.y, com1_o.cp2.x, com1_o.cp2.y, com1_o.p.x, com1_o.p.y] },
+            { type: 'C', values: [com2_o.cp1.x, com2_o.cp1.y, com2_o.cp2.x, com2_o.cp2.y, com2_o.p.x, com2_o.p.y] },
+        ];
+
+        let area0 = getPathArea(pathData0)
+        let pathDataN = [
+            { type: 'M', values: [result.p0.x, result.p0.y] },
+            { type: 'C', values: [result.cp1.x, result.cp1.y, result.cp2.x, result.cp2.y, result.p.x, result.p.y] },
+        ]
+
+        let areaN = getPathArea(pathDataN)
+        let areaDiff = Math.abs(areaN / area0 - 1)
+
+        result.error = areaDiff * 10 * tolerance;
+        //result.error = areaDiff + dist5;
+
+        let d = pathDataToD(pathDataN)
+
+        // success
+        if (areaDiff < 0.01) {
+            commands = [result];
+            //renderPath(markers, d, 'orange')
+            //console.log('areaDiff', areaDiff);
+
+        } else {
+            // renderPath(markers, d, 'red')
+            // console.log('areaDiff', areaDiff);
+        }
+
+
+        //renderPath(markers, d, 'orange')
+    }
+
+
+
+    //console.log(commands);
+
+    return commands
+
+}
+

package/src/pathSimplify-main.js

@@ -0,0 +1,294 @@
+import { combineCubicPairs } from './pathData_simplify_cubic';
+import { getPathDataVertices, pointAtT } from './svgii/geometry';
+import { getPolyBBox } from './svgii/geometry_bbox';
+import { analyzePathData, analyzePathData2 } from './svgii/pathData_analyze';
+import { combineArcs, convertPathData, cubicCommandToArc, revertCubicQuadratic } from './svgii/pathData_convert';
+import { parsePathDataNormalized } from './svgii/pathData_parse';
+import { pathDataRemoveColinear } from './svgii/pathData_remove_collinear';
+import { removeZeroLengthLinetos } from './svgii/pathData_remove_zerolength';
+import { 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 { pathDataToPolyPlus } from './svgii/pathData_toPolygon';
+import { analyzePoly } from './svgii/poly_analyze';
+import { getCurvePathData } from './svgii/poly_to_pathdata';
+import { detectAccuracy } from './svgii/rounding';
+import { renderPoint } from './svgii/visualize';
+
+export function svgPathSimplify(d = '', {
+    toAbsolute = true,
+    toRelative = true,
+    toShorthands = true,
+    decimals = 3,
+    //optimize = 0,
+
+    // not necessary unless you need cubics only
+    quadraticToCubic = true,
+
+    // mostly a fallback if arc calculations fail      
+    arcToCubic = false,
+    cubicToArc = false,
+
+    // arc to cubic precision - adds more segments for better precision     
+    arcAccuracy = 4,
+    keepExtremes = true,
+    keepCorners = true,
+    keepInflections = true,
+    extrapolateDominant = false,
+    addExtremes = false,
+    optimizeOrder = true,
+    removeColinear = true,
+    simplifyBezier = true,
+    autoAccuracy = true,
+    flatBezierToLinetos = true,
+    revertToQuadratics = true,
+    minifyD = 0,
+    tolerance = 1,
+    reverse = false
+} = {}) {
+
+
+    let pathDataO = parsePathDataNormalized(d, { quadraticToCubic, toAbsolute, arcToCubic });
+
+    // create clone for fallback
+    let pathData = JSON.parse(JSON.stringify(pathDataO));
+
+    // count commands for evaluation
+    let comCount = pathDataO.length
+
+    /**
+     * get sub paths
+     */
+    let subPathArr = splitSubpaths(pathData);
+
+    // cleaned up pathData
+    let pathDataArrN = [];
+
+    for (let i = 0, l = subPathArr.length; i < l; i++) {
+
+        //let { pathData, bb } = subPathArr[i];
+        let pathDataSub = subPathArr[i];
+
+        // try simplification in reversed order
+        if (reverse) pathDataSub = reversePathData(pathDataSub);
+
+        // remove zero length linetos
+        if (removeColinear) pathDataSub = removeZeroLengthLinetos(pathDataSub)
+
+        // add extremes
+        //let tMin=0.2, tMax=0.8;
+        let tMin = 0, tMax = 1;
+        if (addExtremes) pathDataSub = addExtremePoints(pathDataSub, tMin, tMax)
+
+
+        // sort to top left
+        if (optimizeOrder) pathDataSub = pathDataToTopLeft(pathDataSub);
+
+        // remove colinear/flat
+        if (removeColinear) pathDataSub = pathDataRemoveColinear(pathDataSub, tolerance, flatBezierToLinetos);
+
+        // analyze pathdata to add info about signicant properties such as extremes, corners
+        let pathDataPlus = analyzePathData(pathDataSub);
+
+
+        // simplify beziers
+        let { pathData, bb, dimA } = pathDataPlus;
+
+
+
+
+
+        let pathDataN = pathData;
+
+
+
+        
+        pathDataN = simplifyBezier ? simplifyPathData(pathDataN, { simplifyBezier, keepInflections, keepExtremes, keepCorners, extrapolateDominant, revertToQuadratics, tolerance, reverse }) : pathDataN;
+
+
+
+        // cubic to arcs
+        if(cubicToArc){
+
+            let thresh = 3;
+
+            pathDataN.forEach((com, c) => {
+                let { type, values, p0, cp1 = null, cp2 = null, p = null } = com;
+                if (type === 'C') {
+                    //console.log(com);
+                    let comA = cubicCommandToArc(p0, cp1, cp2, p, thresh)
+                    if(comA.isArc) pathDataN[c] = comA.com;
+                    //if (comQ.type === 'Q') pathDataN[c] = comQ
+                }
+            })
+
+            // combine adjacent cubics
+            pathDataN = combineArcs(pathDataN)
+
+        }
+
+
+        // simplify to quadratics
+        if (revertToQuadratics) {
+            pathDataN.forEach((com, c) => {
+                let { type, values, p0, cp1 = null, cp2 = null, p = null } = com;
+                if (type === 'C') {
+                    //console.log(com);
+                    let comQ = revertCubicQuadratic(p0, cp1, cp2, p)
+                    if (comQ.type === 'Q') pathDataN[c] = comQ
+                }
+            })
+        }
+
+
+
+
+        // update
+        pathDataArrN.push(pathDataN)
+    }
+
+
+    // merge pathdata
+    let pathDataFlat = pathDataArrN.flat();
+
+    /**
+     * detect accuracy
+     */
+    if (autoAccuracy) {
+        decimals = detectAccuracy(pathDataFlat)
+    }
+
+
+
+    // compare command count
+    let comCountS = pathDataFlat.length
+
+    // optimize
+    let pathOptions = {
+        toRelative,
+        toShorthands,
+        decimals,
+    }
+
+
+    // optimize path data
+    pathData = convertPathData(pathDataFlat, pathOptions)
+    let dOpt = pathDataToD(pathData, minifyD)
+
+    let report = {
+        original: comCount,
+        new: comCountS,
+        saved: comCount - comCountS,
+        decimals,
+        success: comCountS < comCount
+    }
+
+    return { pathData, d: dOpt, report };
+
+
+}
+
+
+
+function simplifyPathData(pathData, {
+    keepExtremes = true,
+    keepInflections = true,
+    keepCorners = true,
+    extrapolateDominant = true,
+    tolerance = 1,
+    reverse = false
+} = {}) {
+
+    let pathDataN = [pathData[0]];
+
+    for (let i = 2, l = pathData.length; l && i <= l; i++) {
+        let com = pathData[i - 1];
+        let comN = i < l ? pathData[i] : null;
+        let typeN = comN?.type || null;
+        //let isCornerN = comN?.corner || null;
+        //let isExtremeN = comN?.extreme || null;
+        let isDirChange = com?.directionChange || null;
+        let isDirChangeN = comN?.directionChange || null;
+
+        let { type, values, p0, p, cp1 = null, cp2 = null, extreme = false, corner = false, dimA = 0 } = com;
+
+        // count simplifications
+        let success = 0;
+
+        // next is also cubic
+        if (type === 'C' && typeN === 'C') {
+
+            // cannot be combined as crossing extremes or corners
+            if (
+                    (keepInflections && isDirChangeN) ||
+                    (keepCorners && corner) ||
+                    (!isDirChange && keepExtremes && extreme)
+            ) {
+                //renderPoint(markers, p, 'red', '1%')
+                pathDataN.push(com)
+            }
+
+            // try simplification
+            else {
+                //renderPoint(markers, p, 'magenta', '1%')
+                let combined = combineCubicPairs(com, comN, extrapolateDominant, tolerance)
+                let error = 0;
+
+                // combining successful! try next segment
+                if (combined.length === 1) {
+                    com = combined[0]
+                    let offset = 1;
+                    error += com.error;
+                    //console.log('!error', error);
+
+                    // find next candidates
+                    for (let n = i + 1; error < tolerance && n < l; n++) {
+                        let comN = pathData[n]
+                        if (comN.type !== 'C' ||
+                            (
+                                (keepInflections && comN.directionChange) ||
+                                (keepCorners && com.corner) ||
+                                (keepExtremes && com.extreme)
+                            )
+                        ) {
+                            break
+                        }
+
+                        let combined = combineCubicPairs(com, comN, extrapolateDominant, tolerance)
+                        if (combined.length === 1) {
+                            offset++
+                        }
+                        com = combined[0]
+                    }
+
+                    //com.opt = true
+                    pathDataN.push(com)
+
+                    if (i < l) {
+                        i += offset
+                    }
+
+                } else {
+                    pathDataN.push(com)
+                }
+            }
+
+        } // end of bezier command
+
+
+        // other commands
+        else {
+            pathDataN.push(com)
+        }
+
+    } // end command loop
+
+    // reverse back
+    if (reverse) pathDataN = reversePathData(pathDataN)
+
+    return pathDataN
+}
+
+
+