svg-path-simplify 0.1.3 → 0.2.2

package/src/svgii/pathData_simplify_redraw.js

@@ -0,0 +1,343 @@
+import { checkLineIntersection, getDistManhattan, pointAtT } from "./geometry";
+import { pathDataToD } from "./pathData_stringify";
+import { renderPath, renderPoint } from "./visualize";
+
+export function redrawPathData(pathData, {
+    tolerance = 1
+
+} = {}) {
+
+    let pathDataN = [];
+    let chunks = [];
+    let chunk = [];
+    let idx = 0;
+
+
+    let l = pathData.length;
+    //return pathData
+
+    //console.log('pathData', pathData);
+
+    //let d0 = pathDataToD(pathData)
+    //console.log(d0);
+
+    for (let i = 1; i < l; i++) {
+        let com = pathData[i];
+        let { type, values, p0, cp1 = null, cp2 = null, p, extreme = null, semiExtreme = null, corner = null, directionChange } = com;
+
+        let comN = pathData[i + 1] || null;
+
+        /*
+        if (extreme || corner || semiExtreme || directionChange) {
+
+            if (extreme) renderPoint(markers, com.p, 'cyan', '1%', '0.5')
+            //if(directionChange) renderPoint(markers, com.p, 'blue', '1.75%', '0.5')
+            if (semiExtreme) renderPoint(markers, com.p, 'orange', '1%', '0.5')
+            if (corner) renderPoint(markers, com.p, 'magenta', '1.75%', '0.5')
+        }
+        */
+
+
+        //start new chunk
+        if (extreme || corner || (comN && comN.type !== type)) {
+            chunk.push(com)
+            chunks.push(chunk)
+            chunk = []
+            continue
+        }
+
+        chunk.push(com)
+
+    }
+
+    console.log('!!!chunks', chunks);
+
+    renderChunks(chunks)
+
+
+
+    // cleanup chunks
+    //let chunksClean = [];
+
+    let chunksLen = chunks.length;
+
+    
+
+
+    for (let c = 0; c < chunksLen; c++) {
+        let chunk = chunks[c];
+        let chunkN = chunks[c + 1] || null;
+
+        let chunkLen = chunk.length;
+
+        if(c===chunksLen-1){
+           // renderPoint(markers, chunk[chunkLen-1].p, 'magenta', '0.5%', '0.5')
+        }
+
+        if (chunkLen === 1 && chunkN && chunkN[0].type === 'C') {
+            //renderPoint(markers, chunk[0].p, 'red', '0.5%', '0.5')
+            //renderPoint(markers, chunkN[0].cp1, 'magenta', '0.5%', '0.5')
+            //chunkN[0].p0 = chunk[0].p0
+            //chunks[c] = null
+        }
+
+        //chunksClean.push(chunk)
+    }
+
+    chunks = chunks.filter(Boolean)
+
+    // test render
+    //renderChunks(chunks)
+
+
+
+
+    let pathDataC = [pathData[0]];
+    let stroke = 'green';
+
+
+    /**
+     * combine chunk based
+     */
+    for (let c = 0; c < chunks.length; c++) {
+        let chunk = chunks[c]
+        let chunkLen = chunk.length;
+
+        stroke = c % 2 === 0 ? 'orange' : 'green';
+        let comChunk0 = chunk[0]
+        let comChunk1 = chunk[chunkLen - 1]
+        let thresh = getDistManhattan(comChunk0.p0, comChunk1.p) * 0.05
+
+
+        // commands in chunk
+        for (let i = 0, l = chunkLen; i < l; i++) {
+            let com = chunk[i];
+            let comN = chunk[i + 1];
+            let comL = chunk[l - 1];
+
+            let isBezier = comChunk0.type === 'C' && comChunk1.type === 'C'
+
+            //console.log(com);
+            let { type, values, p0, cp1 = null, cp2 = null, p = null, extreme, semiExtreme = null, corner = null } = com;
+
+            let pI1 = null, pI2 = null;
+            let cp1_S = null, cp2_S = null;
+            let cp2_M = null;
+            let cp1_M = null;
+            let pathDataS = [];
+            let tSplit = 0.666
+            let comMid = null;
+
+            // 0. adjust Extreme cpts
+            if (isBezier) {
+                let dx1 = Math.abs(comChunk0.p0.x - comChunk0.cp1.x)
+                let dy1 = Math.abs(comChunk0.p0.y - comChunk0.cp1.y)
+                let dx2 = Math.abs(comChunk1.p.x - comChunk1.cp2.x)
+                let dy2 = Math.abs(comChunk1.p.y - comChunk1.cp2.y)
+
+
+                let vertical1 = dx1 < thresh && dx1 < dy1;
+                let horizontal1 = dy1 < thresh && dx1 > dy1;
+
+                let vertical2 = dx2 < thresh && dx2 < dy2;
+                let horizontal2 = dy2 < thresh && dx2 > dy2;
+
+                if (horizontal1) comChunk0.cp1.y = comChunk0.p0.y
+                if (horizontal2) comChunk1.cp2.y = comChunk1.p.y
+                if (vertical1) comChunk0.cp1.x = comChunk0.p0.x
+                if (vertical2) comChunk1.cp2.x = comChunk1.p.x
+            }
+
+
+            // test render - original pathdata
+            let pathDataChunk = [
+                { type: 'M', values: [com.p0.x, com.p0.y] },
+                { type, values },
+            ];
+
+
+            let d = pathDataToD(pathDataChunk);
+            // renderPath(markers, d, stroke, '1%', '0.5')
+            //  continue
+            /*
+
+            */
+
+
+            // 1. only one command in chunk - nothing to simplify
+            if (chunkLen === 1 || type !== 'C') {
+                stroke = 'red'
+                pathDataC.push(com)
+            }
+
+
+
+            // 2. could be simplified
+            else {
+                // 2.1 has semi extreme - extrapolate
+                // 2.2 has sdirection change
+                let semiExtremes = chunk.filter(ch => ch.semiExtreme);
+                let comsDirectionChange = chunk.filter(ch => ch.directionChange)
+
+
+                if (semiExtremes.length || comsDirectionChange.length) {
+                    stroke = c % 2 === 0 ? 'purple' : 'magenta';
+
+                    // semiExtreme command
+                    comMid = semiExtremes.length ? semiExtremes[0] : comsDirectionChange[0];
+
+                    // zero length cpt vectors
+                    if (comChunk0.p0.x === comChunk0.cp1.x && comChunk0.p0.y === comChunk0.cp1.y) {
+                        comChunk0.cp1 = pointAtT([comChunk0.p0, comChunk0.cp1, comChunk0.cp2, comChunk0.p], 0.5)
+                    }
+                    else if (comChunk1.p.x === comChunk1.cp2.x && comChunk1.p.y === comChunk1.cp2.y) {
+                        comChunk1.cp2 = pointAtT([comChunk1.p0, comChunk1.cp1, comChunk1.cp2, comChunk1.p], 0.5)
+                    }
+
+
+                    pI1 = checkLineIntersection(comMid.p, comMid.cp2, comChunk0.p0, comChunk0.cp1, false)
+                    pI2 = checkLineIntersection(comMid.p, comMid.cp2, comChunk1.p, comChunk1.cp2, false)
+
+
+                    // intersections try to extrapolate cpts
+                    if (pI1 && pI2) {
+
+                        cp1_S = pointAtT([comChunk0.p0, pI1], tSplit)
+                        cp2_S = pointAtT([comChunk1.p, pI2], tSplit)
+
+                        cp2_M = pointAtT([comMid.p, pI1], tSplit)
+                        cp1_M = pointAtT([comMid.p, pI2], tSplit)
+
+                        /*
+                        renderPoint(markers, cp1_S, 'magenta', '1%', '1' )
+                        */
+
+                        pathDataS = [
+                            { type: 'M', values: [comChunk0.p0.x, comChunk0.p0.y] },
+                            {
+                                type: 'C', values: [
+                                    cp1_S.x, cp1_S.y,
+                                    cp2_M.x, cp2_M.y,
+                                    comMid.p.x,
+                                    comMid.p.y
+                                ]
+                            },
+                            {
+                                type: 'C', values: [
+                                    cp1_M.x, cp1_M.y,
+                                    cp2_S.x, cp2_S.y,
+                                    comChunk1.p.x,
+                                    comChunk1.p.y,
+                                ]
+                            },
+                        ];
+
+                        stroke = c % 2 === 0 ? 'green' : 'gold'
+                        d = pathDataToD(pathDataS)
+
+                        //renderPath(markers, d, 'green', '1%', '0.5')
+
+
+                        pathDataC.push(
+                            {
+                                type: 'C', values: [
+                                    cp1_S.x, cp1_S.y,
+                                    cp2_M.x, cp2_M.y,
+                                    comMid.p.x,
+                                    comMid.p.y
+                                ],
+                                p0: comChunk0.p0,
+                                cp1: cp1_S,
+                                cp2: cp2_M,
+                                p: comMid.p,
+                                dimA: getDistManhattan(comChunk0.p0, comMid.p)
+                            },
+
+                            {
+                                type: 'C', values: [
+                                    cp1_M.x, cp1_M.y,
+                                    cp2_S.x, cp2_S.y,
+                                    comChunk1.p.x,
+                                    comChunk1.p.y,
+                                ],
+                                p0: comMid.p,
+                                cp1: cp1_M,
+                                cp2: cp2_S,
+                                p: comChunk1.p,
+                                extreme: true,
+                                dimA: getDistManhattan(comMid.p, comChunk1.p)
+
+                            }
+                        )
+                        break
+
+                    }
+                } else {
+                    pathDataC.push(com)
+                }
+
+            }
+
+        }
+
+    }
+
+    /*
+    // render
+    let d = pathDataToD(pathDataC)
+    console.log(d);
+    renderPath(markers, d, 'red', '1%', '0.5')
+    */
+
+
+    return pathDataC
+
+}
+
+
+
+function renderChunks(chunks) {
+
+    console.log('chunks', chunks);
+
+    let stroke = 'green';
+
+    /**
+     * combine chunk based
+     */
+    for (let c = 0; c < chunks.length; c++) {
+        let chunk = chunks[c]
+        let chunkLen = chunk.length;
+
+        stroke = c % 2 === 0 ? 'orange' : 'green';
+        let comChunk0 = chunk[0]
+        let comChunk1 = chunk[chunkLen - 1]
+
+        let pathDataChunk = [
+            { type: 'M', values: [comChunk0.p0.x, comChunk0.p0.y] }
+        ]
+
+        // commands in chunk
+        for (let i = 0, l = chunkLen; i < l; i++) {
+            let com = chunk[i];
+            let comN = chunk[i + 1];
+            let comL = chunk[l - 1];
+            let isBezier = comChunk0.type === 'C' && comChunk1.type === 'C'
+
+            //console.log(com);
+            let { type, values, p0, cp1 = null, cp2 = null, p = null, extreme, semiExtreme = null, corner = null } = com;
+
+
+            // test render - original pathdata
+            pathDataChunk.push(
+                { type, values },
+            );
+
+        }
+
+        let d = pathDataToD(pathDataChunk);
+        renderPath(markers, d, stroke, '1%', '0.5')
+
+
+    }
+}

package/src/svgii/pathData_simplify_refineCorners.js

@@ -1,4 +1,4 @@
-import { checkLineIntersection, getDistAv, getSquareDistance, interpolate, pointAtT } from "./geometry";
+import { checkLineIntersection, getDistManhattan, getSquareDistance, interpolate, pointAtT } from "./geometry";
 import { getPolygonArea } from "./geometry_area";
 import { commandIsFlat } from "./geometry_flatness";
 import { renderPoint } from "./visualize";
@@ -33,7 +33,7 @@ export function refineRoundedCorners(pathData, {
     //console.log('lastIsLine', lastIsLine, 'firstIsLine', firstIsLine, 'lastIsBez', lastIsBez, 'firstIsBez', firstIsBez, 'isClosed', isClosed, 'comLast1', comLast1);
 
     let normalizeClose = isClosed && firstIsBez && (lastIsLine || zIsLineto);
-    let adjustStart = false
+    //let adjustStart = false
     //normalizeClose = false
     //console.log('normalizeClose', normalizeClose);
 
@@ -96,13 +96,14 @@ export function refineRoundedCorners(pathData, {
             if (comL1) {
 
                 // linetos
-                let len1 = getDistAv(comL0.p0, comL0.p)
-                let len2 = getDistAv(comL1.p0, comL1.p)
+                let len1 = getDistManhattan(comL0.p0, comL0.p)
+                let len2 = getDistManhattan(comL1.p0, comL1.p)
 
                 // bezier
                 //comBez = comBez[0];
                 let comBezLen = comBez.length;
-                let len3 = getDistAv(comBez[0].p0, comBez[comBezLen - 1].p)
+                //let len3 = getDistManhattan(comBez[0].p0, comBez[comBezLen - 1].p)
+                let len3 = getDistManhattan(comL0.p, comL1.p0)
 
                 // check concaveness by area sign change
                 let area1 = getPolygonArea([comL0.p0, comL0.p, comL1.p0, comL1.p], false)
@@ -115,6 +116,7 @@ export function refineRoundedCorners(pathData, {
                 let bezThresh = len3*0.5 * tolerance
                 let isSmall = bezThresh < len1 && bezThresh < len2 ;
 
+
                 //len1 > len3 && len2 > len3
                 if (comBez.length && !signChange &&  isSmall ) {
 
@@ -125,17 +127,21 @@ export function refineRoundedCorners(pathData, {
 
                         // final check: mid point proximity
                         let ptM = pointAtT([comL0.p, ptQ, comL1.p0], 0.5)
-                        //renderPoint(markers, ptM, 'red', '0.5%', '0.5')
 
                         let ptM_bez = comBez.length===1 ? pointAtT( [comBez[0].p0, comBez[0].cp1, comBez[0].cp2, comBez[0].p], 0.5 ) : comBez[0].p ;
 
-                        let dist1 = getDistAv(ptM, ptM_bez)
+                        let dist1 = getDistManhattan(ptM, ptM_bez) * 0.75
+
+                        //renderPoint(markers, ptM, 'red', '0.5%', '0.5')
+                        //renderPoint(markers, ptM_bez, 'green', '0.5%', '0.5')
 
-                        // not in tolerance – rturn original command
-                        if(dist1>len3){
+                        // not in tolerance – return original command
+                        if(bezThresh && dist1>bezThresh && dist1>len3*0.3){
                             //renderPoint(markers, ptM_bez, 'cyan', '0.5%', '0.5')
                             //renderPoint(markers, ptQ, 'magenta', '0.5%', '0.5')
                             pathDataN.push(com);
+                            continue;
+
                         } else{
 
                             //renderPoint(markers, ptQ, 'magenta', '0.5%', '0.5')
@@ -148,6 +154,9 @@ export function refineRoundedCorners(pathData, {
                             // add quadratic command
                             pathDataN.push(comL0, comQ);
                             i += offset;
+                            //i++
+
+                            //offset++
                             continue;
                         }
 

package/src/svgii/pathData_simplify_refineExtremes.js

@@ -1,6 +1,6 @@
 import { findSplitT, getExtrapolatedCommand } from "../pathData_simplify_cubic";
 import { getCombinedByDominant } from "../pathData_simplify_cubic_extrapolate";
-import { getDistAv, interpolate } from "./geometry";
+import { bezierhasExtreme, checkLineIntersection, getDistAv, getDistManhattan, getSquareDistance, interpolate } from "./geometry";
 import { getPathArea, getPolygonArea } from "./geometry_area";
 import { getPathDataBBox } from "./geometry_bbox";
 import { interpolatedPathData } from "./pathData_interpolate";
@@ -11,10 +11,14 @@ export function refineAdjacentExtremes(pathData, {
     threshold = null, tolerance = 1
 } = {}) {
 
+    //console.log('!!!refineAdjacentExtremes', pathData);
+
+
     //dimA = dimA ? dimA : 
     if (!threshold) {
         let bb = getPathDataBBox(pathData);
-        threshold = (bb.width + bb.height) / 2 * 0.05
+        //threshold = (bb.width + bb.height) / 2 * 0.05
+        threshold = (bb.width + bb.height) * 0.05
         //console.log('new threshold', threshold);
     }
 
@@ -32,29 +36,31 @@ export function refineAdjacentExtremes(pathData, {
 
 
         // check dist
-        let diff = comN ? getDistAv(p, comN.p) : Infinity;
+        //threshold = threshold*1.05
+        let diff = comN ? getDistManhattan(p, comN.p) : Infinity;
         let isCose = diff < threshold;
 
-        let diff2 = comN2 ? getDistAv(comN2.p, comN.p) : Infinity
-        let isCose2 = diff2 < threshold;
+        let diff2 = comN2 ? getDistManhattan(comN2.p, comN.p) : Infinity
+        let isCose2 = diff2 < threshold*1;
 
+        //let selfIntersecting = false
 
         // next is extreme
-        if (comN && type === 'C' && comN.type === 'C' && extreme && comN2 && comN2.extreme) {
+        if (comN && comN2 && type === 'C' && comN.type === 'C' && extreme && comN2.extreme) {
 
+            //renderPoint(markers, comN.p)
 
             if (isCose2 || isCose) {
 
                 // extrapolate
                 let comEx = getCombinedByDominant(comN, comN2, threshold, tolerance, false)
-                //console.log('comEx', comEx);
-                //renderPoint(markers, comN.p)
 
                 if (comEx.length === 1) {
 
-                    pathData[i + 1] = null;
                     comEx = comEx[0]
 
+                    pathData[i + 1] = null;
+
                     pathData[i + 2].values = [comEx.cp1.x, comEx.cp1.y, comEx.cp2.x, comEx.cp2.y, comEx.p.x, comEx.p.y]
                     pathData[i + 2].cp1 = comEx.cp1
                     pathData[i + 2].cp2 = comEx.cp2
@@ -71,79 +77,22 @@ export function refineAdjacentExtremes(pathData, {
 
 
         // short after extreme
-
-        if (comN && type === 'C' && comN.type === 'C' && extreme ) {
+        if (comN && type === 'C' && comN.type === 'C' && extreme) {
 
             if (isCose) {
 
-                //renderPoint(markers, com.p, 'cyan', '1%', '0.5')
-                //renderPoint(markers, comN.p, 'cyan', '1%', '0.5')
-                //console.log(comN);
-                //console.log(diff, threshold);
-
-                let dx1 = (com.cp1.x - comN.p0.x)
-                let dy1 = (com.cp1.y - comN.p0.y)
-
-                let horizontal = Math.abs(dy1) < Math.abs(dx1);
-
-                let pN = comN.p;
-                let ptI;
-                let t = 1;
-
-                let area0 = getPolygonArea([com.p0, com.p , comN.p])
+                let area0 = getPolygonArea([com.p0, com.p, comN.p])
                 // cpts area
                 let area1 = getPolygonArea([com.p0, com.cp1, com.cp2, com.p])
 
                 // sign change: is corner => skip
-                if ( (area0<0 && area1>0)  || (area0>0 && area1<0)) {
+                if ((area0 < 0 && area1 > 0) || (area0 > 0 && area1 < 0)) {
                     //renderPoint(markers, com.p, 'orange', '1%', '0.5')
                     continue;
                 }
-
-                
-                if (comN.extreme) {
-
-                    // extend cp2
-                    if (horizontal) {
-                        t = Math.abs(Math.abs(comN.cp2.x - comN.p.x) / Math.abs(com.cp2.x - com.p.x))
-                        t = Math.min(1, t)
-                        //console.log('t', t);
-
-                        ptI = interpolate(comN.p, com.cp2, 1 + t)
-                        com.cp2.x = ptI.x
-                        //renderPoint(markers, com.cp2, 'cyan', '1%', '0.5')
-                        //renderPoint(markers, ptI, 'orange', '1%', '0.5')
-                    }
-                    else {
-                        //renderPoint(markers, comN.p0, 'cyan', '1%', '0.5')
-                        t = Math.abs(Math.abs(comN.cp2.y - comN.p.y) / Math.abs(com.cp2.y - com.p.y))
-                        t = Math.min(1, t)
-                        //console.log('t v', t);
-
-                        ptI = interpolate(comN.p, com.cp2, 1 + t)
-                        com.cp2.y = ptI.y
-                    }
-
-                    //merge commands
-                    pathData[i + 1].values = [com.cp1.x, com.cp1.y, com.cp2.x, com.cp2.y, pN.x, pN.y]
-                    pathData[i + 1].cp1 = com.cp1
-                    pathData[i + 1].cp2 = com.cp2
-                    pathData[i + 1].p0 = com.p0
-                    pathData[i + 1].p = pN
-                    pathData[i + 1].extreme = true
-
-                    // nullify 1st
-                    pathData[i] = null;
-                    continue
-
-                }
-
             }
         }
 
-        /*
-        */
-
 
     }
 
@@ -175,21 +124,13 @@ export function refineAdjacentExtremes(pathData, {
 
 
 
-    let diff = getDistAv(lastCom.p0, lastCom.p)
+    let diff = getDistManhattan(lastCom.p0, lastCom.p)
     let isCose = diff < threshold;
 
 
     if (penultimateCom && penultimateCom.type === 'C' && isCose && isClosingTo && fistExt) {
 
-        //let dx1 = Math.abs(fistExt.cp1.x - M.x)
-        //let dy1 = Math.abs(fistExt.cp1.y - M.y)
-
-        //let horizontal = dy1 < dx1;
-        //console.log(dx1, dx2);
-        //console.log('isCose', isCose, diff, dimA);
-
         let comEx = getCombinedByDominant(penultimateCom, lastCom, threshold, tolerance, false)
-        //console.log('comEx', comEx);
 
         if (comEx.length === 1) {
             pathData[lastIdx - 1] = comEx[0];