svg-path-simplify 0.4.5 → 0.4.7

package/src/pathData_offset.js

@@ -0,0 +1,201 @@
+import { findPathDataIntersections } from "./pathData_get_intersections";
+import { getParallelPoly } from "./poly-offset";
+import { checkLineIntersection, pointAtT } from "./svgii/geometry";
+import { getPolygonArea } from "./svgii/geometry_area";
+import { pathDataToD } from "./svgii/pathData_stringify";
+import { renderPath, renderPoint, renderPoly } from "./svgii/visualize";
+
+export function offsetPathData(pathData = [], strokeWidth = 18, side = top) {
+
+    console.log('offsetPathData');
+    //alert('off')
+
+    let pathDataN = [];
+    let l = pathData.length;
+    let closed = pathData[l - 1].type.toLowerCase() === 'z'
+
+    for (let i = 0; i < l; i++) {
+        let comPrev = i > 0 ? pathData[i - 1] : null;
+        let com = pathData[i];
+        let { type, values, p0, cp1, cp2, p } = com;
+        //let comN = com
+
+        if (type === 'C') {
+
+            //split path
+            let segments = pointAtT([p0, cp1, cp2, p], 0.5, false, true).segments;
+            //console.log(segments);
+
+            let pts = [segments[0].p0];
+            segments.forEach(com => {
+                let { p0, cp1, cp2, p } = com;
+
+                pts.push(cp1, cp2, p)
+
+            })
+
+            let area = getPolygonArea(pts)
+            let sweep = area < 0 ? 0 : 1
+            let polyOffset = getParallelPoly(pts, strokeWidth, sweep, closed)
+            let { polyTop, polyBottom } = polyOffset
+            //console.log(polyOffset);
+
+            com.polyTop = polyTop
+            com.polyBottom = polyBottom
+            com.t = 0
+            com.segs = []
+            com.inter = null
+
+
+            // convert pts to cpts
+            let pathData2 = [
+                { type: 'M', values: [polyBottom[0].x, polyBottom[0].y] }
+            ]
+
+            p0 = polyBottom[0];
+            for (let j = 3; j < polyBottom.length; j += 3) {
+                let [cp1, cp2, p] = [polyBottom[j - 2], polyBottom[j - 1], polyBottom[j]]
+                pathData2.push(
+                    { type: 'C', values: [cp1.x, cp1.y, cp2.x, cp2.y, p.x, p.y] }
+                )
+                com.segs.push({ p0, cp1, cp2, p })
+                p0 = p;
+            }
+
+            let d = pathDataToD(pathData2);
+            renderPath(markers, d, '#ccc')
+
+
+            if (comPrev && comPrev.polyBottom) {
+                let polyprev = comPrev.polyBottom
+                console.log(comPrev);
+                let pt1 = polyprev[polyprev.length - 1]
+                let pt2 = polyprev[polyprev.length - 2]
+
+                let pt3 = polyBottom[0]
+                let pt4 = polyBottom[1]
+
+                let ptI = checkLineIntersection(pt4, pt3, pt2, pt1)
+                if (ptI) {
+                    //console.log(ptI);
+                    //comPrev.t = ptI.t2 * 1.2
+                    comPrev.segs[comPrev.segs.length - 1].t = ptI.t2 * 1.2
+
+                    comPrev.t = ptI.t2 * 1.2
+                    com.t = 1 - ptI.t2 * 1.2
+                    com.segs[0].t = 1 - ptI.t2 * 1.2
+
+                    comPrev.inter = ptI
+                    //com.inter = ptI
+
+                    //console.log('com.t', com.t);
+                }
+
+                // adjust intersection
+                // comPrev.polyBottom[polyprev.length-1] = ptI
+
+                polyprev[polyprev.length - 1] = ptI
+                polyBottom[0] = ptI
+
+
+                /*
+                renderPoint(markers, pt1, 'purple')
+                renderPoint(markers, pt2, 'magenta')
+                renderPoint(markers, pt3, 'green')
+                renderPoint(markers, pt4, 'cyan')
+                renderPoint(markers, ptI, 'red')
+                */
+
+            }
+
+
+
+        }
+
+        //pathDataN.push(comN)
+
+    }
+
+
+    //console.log(pathData);
+
+    // convert pts to cpts
+    /*
+    pathDataN = [
+        { type: 'M', values: [pathData[1].polyBottom[0].x, pathData[1].polyBottom[0].y] }
+    ]
+    */
+
+    pathDataN = [
+        { type: 'M', values: [pathData[0].p0.x, pathData[0].p0.y] }
+    ]
+
+
+    console.log(pathData);
+
+    for (let i = 1; i < l; i++) {
+        let com = pathData[i];
+        let comPrev = pathData[i - 1];
+        let comN = pathData[i+1] ? pathData[i+1] : null;
+        let { type, values, p0 = null, cp1 = null, cp2 = null, p, polyTop = null, polyBottom = null, segs = [], inter = null, t = 0 } = com;
+
+        // has intersection
+        if (inter) {
+
+            let s = t > 0.5 ? segs[0] : segs[1]
+            let s2 = t > 0.5 ? comN.segs[1] : comN.segs[0]
+            //let s2 = 
+
+            console.log('segs', i, segs, s);
+
+            let pd1 = [
+                { type: 'M', values: [s.p0.x, s.p0.y] },
+                { type: 'C', values: [s.cp1.x, s.cp1.y, s.cp2.x, s.cp2.y, s.p.x, s.p.y] }
+            ]
+
+            let pd2 = [
+                { type: 'M', values: [s2.p0.x, s2.p0.y] },
+                { type: 'C', values: [s2.cp1.x, s2.cp1.y, s2.cp2.x, s2.cp2.y, s2.p.x, s2.p.y] }
+            ]
+
+
+            let d1 = pathDataToD(pd1);
+            renderPath(markers, d1, 'purple')
+
+            let d2 = pathDataToD(pd2);
+            renderPath(markers, d2, 'orange')
+
+
+            // find intersections
+            let intersections = findPathDataIntersections(pd1, pd2)
+            console.log('inter', intersections);
+
+            intersections.forEach(int=>{
+                let ptI1=pointAtT(int.cpts1, int.t1)
+                let ptI2=pointAtT(int.cpts2, int.t2)
+
+                renderPoint(markers, ptI1, 'orange', '2%')
+                renderPoint(markers, ptI2, 'red', '1%')
+
+
+            })
+
+
+            //renderPoint(markers, inter)
+
+        }
+
+        pathDataN.push(com)
+
+
+    }
+
+
+    //let d = pathDataToD(pathDataN);
+    //renderPath(markers, d, 'red')
+    //console.log(d);
+
+
+
+    return pathDataN
+}

package/src/pathData_simplify_cubic.js

@@ -1,7 +1,8 @@
 import { getCombinedByDominant } from "./pathData_simplify_cubic_extrapolate";
-import { getDistance, getSquareDistance, checkLineIntersection, pointAtT, interpolate, getDistManhattan } from "./svgii/geometry";
+import { getDistance, getSquareDistance, checkLineIntersection, pointAtT, interpolate, getDistManhattan, getPerpendicularPoint } from "./svgii/geometry";
 import { getBezierArea, getPolygonArea } from "./svgii/geometry_area";
-import { renderPoint } from "./svgii/visualize";
+import { pathDataToD } from "./svgii/pathData_stringify";
+import { renderPath, renderPoint, renderPoly } from "./svgii/visualize";
 
 
 
@@ -43,10 +44,13 @@ export function simplifyPathDataCubic(pathData, {
 
             // try simplification
             else {
+
+
                 //renderPoint(markers, p, 'magenta', '1%')
                 let combined = combineCubicPairs(com, comN, { tolerance })
                 let error = 0;
 
+
                 // combining successful! try next segment
                 if (combined.length === 1) {
                     com = combined[0]
@@ -134,12 +138,13 @@ export function combineCubicPairs(com1, com2, {
     // quit if t is start
     if (!t) return commands;
 
+    // get averaged threshold
     let distAv1 = getDistManhattan(com1.p0, com1.p);
     let distAv2 = getDistManhattan(com2.p0, com2.p);
     let distMin = Math.max(0, Math.min(distAv1, distAv2))
 
-
-    let distScale = 0.08
+    //let distScale = 0.08
+    let distScale = 0.075
     let maxDist = distMin * distScale * tolerance
 
     // get hypothetical combined command
@@ -148,7 +153,6 @@ export function combineCubicPairs(com1, com2, {
     // test new point-at-t against original mid segment starting point
     let ptI = pointAtT([comS.p0, comS.cp1, comS.cp2, comS.p], t)
 
-
     let dist0 = getDistManhattan(com1.p, ptI)
     let dist1 = 0, dist2 = 0;
     let close = dist0 < maxDist;
@@ -157,7 +161,6 @@ export function combineCubicPairs(com1, com2, {
     // collect error data
     let error = dist0;
 
-
     if (close) {
 
         /**
@@ -173,7 +176,6 @@ export function combineCubicPairs(com1, com2, {
         let ptI_seg1 = pointAtT([comS.p0, comS.cp1, comS.cp2, comS.p], t2)
         dist1 = getDistManhattan(ptM_seg1, ptI_seg1)
 
-
         error += dist1;
 
         if (dist1 < maxDist) {
@@ -190,17 +192,6 @@ export function combineCubicPairs(com1, com2, {
 
             if (error < maxDist) success = true;
 
-
-            /*
-            renderPoint(markers, ptM_seg1, 'cyan')
-            renderPoint(markers, pt, 'orange', '1.5%', '1')
-            renderPoint(markers, ptM_seg2, 'orange')
-
-            renderPoint(markers, com1.p, 'green')
-            //renderPoint(markers, com2.p, 'green')
-            renderPoint(markers, ptI_seg1, 'purple')
-            */
-
         }
 
     } // end 1st try
@@ -221,21 +212,6 @@ export function combineCubicPairs(com1, com2, {
         comS.directionChange = com2.directionChange;
         comS.corner = com2.corner;
 
-
-        if (comS.extreme || comS.corner) {
-            //renderPoint(markers, comS.p)
-        }
-
-        /*
-        comS.extreme = com1.extreme;
-        comS.directionChange = com1.directionChange;
-        comS.corner = com1.corner;
-        */
-
-
-
-        //comS.directionChange = com1.directionChange ? true : (com2.directionChange);
-
         comS.values = [comS.cp1.x, comS.cp1.y, comS.cp2.x, comS.cp2.y, comS.p.x, comS.p.y]
 
         // relative error
@@ -308,6 +284,7 @@ export function findSplitT(com1, com2) {
     // distances between 1st and 2nd segment cpt to mid point
     let l1 = getDistManhattan(com1.cp2, com1.p)
 
+
     // exit for zero length control point vectors
     if (l1 === 0) {
         //console.log('!quit1');
@@ -331,5 +308,8 @@ export function findSplitT(com1, com2) {
     }
     */
 
-    return l1 / l3
+    let t = l1 / l3;
+    //console.log('t', t);
+
+    return t;
 }

package/src/pathData_simplify_cubic_extrapolate.js

@@ -1,10 +1,147 @@
-import { checkLineIntersection, getAngle, getDistAv, getSquareDistance, interpolate, pointAtT, rotatePoint } from "./svgii/geometry";
+import { checkLineIntersection, getAngle, getDistance, getDistAv, getDistManhattan, 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, debug = false) {
 
+    // if combining fails return original commands
+    let commands = [com1, com2]
+
+    // detect dominant 
+    let dist1 = getDistManhattan(com1.p0, com1.p)
+    let dist2 = getDistManhattan(com2.p0, com2.p)
+    let thresh = (dist1 + dist2) * 0.5 * 0.075 * tolerance
+
+    // take longer command
+    let reverse = dist1 < dist2;
+    //let reverse = dist1 > dist2;
+
+    // backup original commands
+    let com1_o = JSON.parse(JSON.stringify(com1))
+    let com2_o = JSON.parse(JSON.stringify(com2))
+
+    // intersection of control tangents
+    let ptI = checkLineIntersection(com1_o.p0, com1_o.cp1, com2_o.p, com2_o.cp2, false, true)
+
+    // no intersection - we can't combine
+    if (!ptI) {
+        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;
+    }
+
+
+    // etsimate t for extrapolation
+    let PtI = checkLineIntersection(com1.cp2, com1.p, com2.p, com2.cp2, false, true)
+    let cp1_I = interpolate(com1.p, PtI, 0.666)
+
+    //renderPoint(markers, cp1_I)
+    //renderPoint(markers, com1.p0, 'green', '2%')
+
+    let dist1_2 = getDistManhattan(com1.cp2, com1.p)
+    let dist2_2 = getDistManhattan(com1.cp2, cp1_I)
+    let t = dist2_2 / dist1_2
+
+    // extrapolate
+    let segs = pointAtT([com1.p0, com1.cp1, com1.cp2, com1.p], t, false, true).segments
+
+    //console.log(segs);
+    let seg = segs[0]
+
+
+    // if it worked - points should be nearby
+    let dist = getDistManhattan(seg.p, com2.p)
+
+    // if close enough adjust
+    if (dist < thresh) {
+        let angle = getAngle(seg.p, seg.cp2)
+        let angle2 = getAngle(com2.p, com2.cp2)
+        //let angleDiff = Math.abs(angle2 - angle)
+        let angleDiff = (angle2 - angle)
+
+        //let angleRat = angle / angle2;
+        //angleRat = (1-angleDiff) / angle2;
+
+        // adjust cp angle
+        seg.cp2 = rotatePoint(seg.cp2, seg.p.x, seg.p.y, angleDiff)
+        let dist1 = getDistManhattan(seg.p, seg.cp2)
+
+        // copy original final point coordinates
+        seg.p = com2.p
+
+        // after rotation
+        let dist2 = getDistManhattan(seg.p, seg.cp2)
+        let scale = dist2 / dist1
+
+        // adjust tangent length
+        seg.cp2 = interpolate(seg.p, seg.cp2, scale)
+
+        // reverse back
+        if (reverse) {
+            seg = {
+                p0: seg.p,
+                p: seg.p0,
+                cp1: seg.cp2,
+                cp2: seg.cp1,
+            }
+        }
+
+        commands = [
+            {
+                type: 'C',
+                values: [seg.cp1.x, seg.cp1.y, seg.cp2.x, seg.cp2.y, seg.p.x, seg.p.y],
+                p0: seg.p0,
+                cp1: seg.cp1,
+                cp2: seg.cp2,
+                p: seg.p,
+                extreme: com2_o.extreme,
+                corner: com2_o.corner,
+                directionChange: com2_o.directionChange,
+                dimA: getDistManhattan(seg.p0, seg.p),
+                error: dist
+
+            }
+        ];
+
+    }
+
+    //console.log('commands', reverse, commands);
+    return commands
+
+}
+
+
+
+
+
+
+
+export function getCombinedByDominant_back(com1, com2, maxDist = 0, tolerance = 1, debug = false) {
+
+    //console.log('getCombinedByDominant');
+
     // cubic Bézier derivative
     const cubicDerivative = (p0, p1, p2, p3, t) => {
         let mt = 1 - t;
@@ -25,8 +162,8 @@ export function getCombinedByDominant(com1, com2, maxDist = 0, tolerance = 1, de
     let commands = [com1, com2]
 
     // detect dominant 
-    let dist1 = getDistAv(com1.p0, com1.p)
-    let dist2 = getDistAv(com2.p0, com2.p)
+    let dist1 = getDistManhattan(com1.p0, com1.p)
+    let dist2 = getDistManhattan(com2.p0, com2.p)
 
     let reverse = dist1 > dist2;
 
@@ -91,10 +228,12 @@ export function getCombinedByDominant(com1, com2, maxDist = 0, tolerance = 1, de
     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);
 
+    //let t0_2 = t0 - dot(r, dP) / dot(dP, dP);
     t0 -= dot(r, dP) / dot(dP, dP);
 
+    //console.log(t0, t2);
+
     // construct merged cubic over [t0, 1]
     let Q0 = pointAtT([com2.p0, com2.cp1, com2.cp2, com2.p], t0);
     let Q3 = com2.p;
@@ -145,8 +284,8 @@ export function getCombinedByDominant(com1, com2, maxDist = 0, tolerance = 1, de
 
     //let tscale =(1 + t0)
     //console.log('tscale', tscale);
-    let cp1_2 = interpolate(result.p0, ptI_1, 1.333  )
-    let cp2_2 = interpolate(result.p, ptI_2, 1.333  )
+    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)
@@ -203,7 +342,7 @@ export function getCombinedByDominant(com1, com2, maxDist = 0, tolerance = 1, de
         //console.log('distS', distS, maxDist );
 
         // not close enough - exit
-        if (distSplit > maxDist * tolerance ) {
+        if (distSplit > maxDist * tolerance) {
             //renderPoint(markers, ptSplit, 'cyan', '1%')
             //renderPoint(markers, com1.p, 'red', '0.5%')
             return commands;
@@ -241,7 +380,7 @@ export function getCombinedByDominant(com1, com2, maxDist = 0, tolerance = 1, de
         if (areaDiff < 0.05 * tolerance) {
             commands = [result];
             //console.log('areaDiff', areaDiff);
-        } 
+        }
     }
 
 

package/src/pathData_simplify_cubicsToArcs.js

@@ -1,5 +1,6 @@
-import { checkLineIntersection, getAngle, getDistManhattan, getDistance, rotatePoint } from "./svgii/geometry";
+import { checkLineIntersection, getAngle, getAngleFromDelta, getDistManhattan, getDistance, rotatePoint } from "./svgii/geometry";
 import { getPathArea, getPolygonArea, getRelativeAreaDiff } from "./svgii/geometry_area";
+import { renderPoint } from "./svgii/visualize";
 //import { cubicCommandToArc } from "./svgii/pathData_convert";
 
 export function pathDataCubicsToArc(pathData, { areaThreshold = 2.5 } = {}) {
@@ -14,7 +15,7 @@ export function pathDataCubicsToArc(pathData, { areaThreshold = 2.5 } = {}) {
             let comAN = cubicCommandToArc(comN.p0, comN.cp1, comN.cp2, comN.p, areaThreshold)
 
 
-            if (comA.isArc  && comAN.isArc) {
+            if (comA.isArc && comAN.isArc) {
 
                 let dist = getDistManhattan(p0, comN.p);
                 let maxDist = dist * 0.01;
@@ -30,8 +31,18 @@ export function pathDataCubicsToArc(pathData, { areaThreshold = 2.5 } = {}) {
                 let sweep = area < 0 ? 0 : 1;
 
                 if (vertical || horizontal) {
+
                     rx = Math.min(rx, comAN.rx)
                     ry = Math.min(ry, comAN.ry)
+
+                    let diffR = Math.abs(rx - ry) / rx;
+                    let isSemiCircle = diffR < 0.025
+                    //console.log('isSemiCircle', isSemiCircle, diffR);
+                    if (isSemiCircle) {
+                        rx = rx > 1 ? 1 : Math.min(rx, ry);
+                        ry = rx;
+                    }
+
                     pathData[c] = null;
                     pathData[c + 1].type = 'A';
                     pathData[c + 1].values = [rx, ry, 0, 0, sweep, comN.p.x, comN.p.y];
@@ -58,40 +69,74 @@ export function cubicCommandToArc(p0, cp1, cp2, p, tolerance = 7.5) {
     let arcSegArea = 0, isArc = false
 
     // check angles
-    let angle1 = getAngle(p0, cp1, true);
-    let angle2 = getAngle(p, cp2, true);
+    let dx1 = (cp1.x - p0.x)
+    let dy1 = (cp1.y - p0.y)
+    let dx2 = (cp2.x - p.x)
+    let dy2 = (cp2.y - p.y)
+
+
+    //let angle1 = getAngle(p0, cp1, true);
+    //let angle2 = getAngle(p, cp2, true);
+
+    let thresh = getDistManhattan(p0, p) * 0.001
+
+    let isVertical1 = dx1 < thresh
+    let isVertical2 = dx2 < thresh
+
+    let isHorizontal1 = dy1 < thresh
+    let isHorizontal2 = dy2 < thresh
+
+    let isRightAngle = (isVertical1 || isVertical2) && (isHorizontal1 || isHorizontal2);
+
+    /*
+    let angle1 = getAngleFromDelta(dx1, dy1, true);
+    let angle2 = getAngleFromDelta(dx2, dy2, true);
     let deltaAngle = Math.abs(angle1 - angle2) * 180 / Math.PI;
 
 
     let angleDiff = Math.abs((deltaAngle % 180) - 90);
     let isRightAngle = angleDiff < 3;
+    */
 
 
     let rx = 0
     let ry = 0
-    let ptC;
+    let ptC = p0;
+    let r1 = 0, r2 = 0
 
     if (isRightAngle) {
-        // point between cps
-
-
-        // center point
-        let cp1_r = rotatePoint(cp1, p0.x, p0.y, (Math.PI * -0.5))
-        let cp2_r = rotatePoint(cp2, p.x, p.y, (Math.PI * 0.5))
-
-        // assumed centroid
-        ptC = checkLineIntersection(p0, cp1_r, p, cp2_r, false)
-        //renderPoint(markers, ptC, 'red', '1%', '0.5' )
-
-
 
+        if (isHorizontal1 && isVertical2) {
+            ptC = { x: p0.x, y: p.y }
+            r1 = Math.abs(p.x-p0.x)
+            r2 = Math.abs(p.y-p0.y)
+        }
+        else if (isHorizontal2 && isVertical1) {
+            ptC = { x: p.x, y: p0.y }
+            r2 = Math.abs(p0.x-p.x)
+            r1 = Math.abs(p0.y-p.y)
+        }
 
-        let pI = checkLineIntersection(p0, cp1, p, cp2, false);
+        /*
+        if (r1 && r2) {
+            //console.log('r right', r1, r2);
+        }
+        //renderPoint(markers, ptC, 'red', '1%', '0.5')
+        //let pI = checkLineIntersection(p0, cp1, p, cp2, false);
+        */
 
-        if (pI) {
+        if (r1 && r2) {
 
+            /*
             let r1 = getDistance(p0, pI);
             let r2 = getDistance(p, pI);
+            */
+
+            //r1 = getDistance(p0, pI);
+            //let r12 = isHorizontal1 Math.abs(dx1);
+            //r2 = getDistance(p, pI);
+            //console.log('rEx', r1, r2);
+
 
             let rMax = +Math.max(r1, r2).toFixed(8);
             let rMin = +Math.min(r1, r2).toFixed(8);
@@ -109,7 +154,6 @@ export function cubicCommandToArc(p0, cp1, cp2, p, tolerance = 7.5) {
             let circular = (100 / rx * Math.abs(rx - ry)) < 5;
 
             if (circular) {
-                //rx = (rx+ry)/2
                 rx = rMax
                 ry = rx;
             }
@@ -136,7 +180,7 @@ export function cubicCommandToArc(p0, cp1, cp2, p, tolerance = 7.5) {
             arcSegArea = (Math.PI * (rx * ry)) / 4
 
             // subtract polygon between start, end and center point
-            arcSegArea -= Math.abs(getPolygonArea([p0, p, pI]))
+            arcSegArea -= Math.abs(getPolygonArea([p0, p, ptC]))
 
             let areaDiff = getRelativeAreaDiff(comArea, arcSegArea);