svg-path-simplify 0.1.3 → 0.2.2

package/src/svgii/poly_to_pathdata.js

@@ -5,17 +5,221 @@
 * https://francoisromain.medium.com/smooth-a-svg-path-with-cubic-bezier-curves-e37b49d46c74
 */
 
-import { checkLineIntersection, interpolate, mirrorCpts } from "./geometry";
+import { checkLineIntersection, getDistManhattan, interpolate, mirrorCpts } from "./geometry";
 import { getPolyBBox } from "./geometry_bbox";
-import { isClosedPolygon } from "./poly_analyze";
+import { analyzePoly, getPolyChunks, isClosedPolygon } from "./poly_analyze";
+import { fitCurveN } from "../poly-fit-curve-schneider";
+import { renderPath, renderPoint, renderPoly } from "./visualize";
+import { simplifyRDP } from "../simplify_poly_RDP";
+import { pathDataFromPoly } from "./pathData_fromPoly";
+
+export function simplifyPolygonToPathData(pts, {
+    debug = false,
+    width = 0,
+    height = 0,
+    denoise = 0.9,
+    keepCorners=true,
+    keepExtremes=true,
+    keepInflections=false,
+    manhattan = false,
+    absolute = false,
+    closed = true,
+    tolerance = 1
+} = {}) {
+
+
+    denoise = 0
+
+    // denoise via RDP
+    if (denoise && denoise !== 1) {
+        pts = simplifyRDP(pts, {
+            width,
+            height,
+            quality: denoise,
+            manhattan,
+            absolute
+        })
 
+    }
+
+    // get topology of poly
+    let polyAnalyzed = !keepExtremes&&!keepCorners ? pts : analyzePoly(pts, {
+        debug: false
+        //width,
+        //height
+    })
+
+
+    // split into segment chunks
+    let chunks = !keepExtremes&&!keepCorners ? [polyAnalyzed] : getPolyChunks(polyAnalyzed, {keepCorners,keepExtremes, keepInflections});
+
+
+    // Schneider curve fit
+    let threshold = width && height ? (width + height) / 2 * 0.004 * tolerance : 2.5
+
+    threshold=2
+
+    let polyPath = simplifyPolyChunks(chunks, {
+        closed,
+        tolerance: threshold
+    });
+
+    return polyPath;
+}
+
+
+/**
+ * convert polygon chunks
+ * to cubic beziers 
+ */
+
+export function simplifyPolyChunks(chunks = [], {
+    closed = true,
+    tolerance = 1,
+} = {}) {
+
+
+    let l = chunks.length;
+
+    // new pathData
+    let pathData = [{ type: 'M', values: [chunks[0][0].x, chunks[0][0].y] }]
+    //let pathData = []
+    //console.log('chunks', chunks);
+
+    for (let i = 0; i < l; i++) {
+
+        let chunk = chunks[i];
+        let chunkN = chunks[i + 1] ? chunks[i + 1] : null
+        let segments = []
+        let chunklen = chunk.length
+        let pLast = chunk[chunk.length - 1]
+
+        // add from next command
+        if (chunkN) {
+            chunk.push(chunkN[0])
+        }
+
+        // nothing to simplify
+        if (chunklen < 2 || (chunklen === 2 && chunk[1].isExtreme) ) {
+            pLast = chunk[chunk.length - 1]
+            segments = chunk.map(com => { return { type: 'L', values: [com.x, com.y] } })
+
+        } else {
+            segments = fitCurveN(chunk, tolerance)
+        }
+
+        // remove first segment to connect to last segment
+        pathData.push(...segments)
+
+    }
+
+
+    if (closed) pathData.push({ type: 'Z', values: [] })
+
+    //console.log('!!!pathData', pathData);
+
+    // refine extremes
+    refineAdjacentExtremes(pathData)
+    return pathData
+
+}
 
-// Render the svg <path> element
+
+
+/* fix almost colinear control point tangents */
+export function refineAdjacentExtremes(pathData) {
+    let l = pathData.length;
+
+    for (let i = 1; i < l; i++) {
+        let com = pathData[i]
+        let comN = pathData[i + 1] || null
+        let { type, values } = com;
+
+        if (type === 'C' && comN && comN.type === 'C') {
+            let valuesN = comN.values
+            let cp1_1 = { x: values[0], y: values[1] }
+            let cp2_1 = { x: values[2], y: values[3] }
+            let p = { x: values[4], y: values[5] }
+
+            let cp1_2 = { x: valuesN[0], y: valuesN[1] }
+            let cp2_2 = { x: valuesN[2], y: valuesN[3] }
+
+
+            let dx1 = Math.abs(cp2_1.x - p.x)
+            let dy1 = Math.abs(cp2_1.y - p.y)
+
+            let dx2 = Math.abs(cp1_2.x - p.x)
+            let dy2 = Math.abs(cp1_2.y - p.y)
+
+            let dist1 = getDistManhattan(cp1_2, cp2_1) * 0.02
+
+            // is almost horizontal
+            let horizontal1 = dy1 < dist1 && dx1 > dist1
+            let horizontal2 = dy2 < dist1 && dx2 > dist1
+            let vertical1 = dx1 < dist1 && dy1 > dist1
+            let vertical2 = dx2 < dist1 && dy2 > dist1
+
+
+            let distCpO=0, distCpN=0, t=1;
+            let cp2N, cp1N;
+
+            if (horizontal1 || vertical1) {
+
+                // adjust cp2 to horizontal
+                cp2N = horizontal1 ? {x:com.values[2], y: p.y} : (vertical1 ? {x:p.x, y:com.values[3]} : {x:com.values[2], y:com.values[3]})
+
+                /*
+                // adjust length
+                distCpO = getDistManhattan(cp2_1, p)
+                distCpN = getDistManhattan(cp2N, p)
+ 
+                // interpolate
+                t = distCpN/distCpO
+                console.log(t,  distCpO, distCpN);
+                cp2N = t>0.97 && t<0.99 ? interpolate(p, cp2N, t) : cp2N
+                */
+                com.values[2] = cp2N.x
+                com.values[3] = cp2N.y
+
+            }
+ 
+
+            if (horizontal2 || vertical2) {
+                // adjust cp1 to horizontal
+
+                cp1N = horizontal2 ? 
+                {x:comN.values[0], y: p.y} : 
+                (vertical2 ? {x:p.x, y:comN.values[1]} : {x:comN.values[0], y:comN.values[1]})
+
+                /*
+                // adjust length
+                distCpO = getDistManhattan(cp1_2, p)
+                distCpN = getDistManhattan(cp1N, p)
+
+                let sign = distCpO>distCpN ? -1 : 1
+
+                // interpolate
+                t = distCpN/distCpO
+                cp1N = t>0.97 && t<0.99 ? interpolate(p, cp1N, t) : cp1N;
+                //console.log(t, sign, distCpO, distCpN);
+                */
+
+                pathData[i + 1].values[0] = cp1N.x
+                pathData[i + 1].values[1] = cp1N.y
+
+            }
+        }
+    }
+}
+
+
+
+// old Render the svg <path> element
 export function getCurvePathData(pts, t = 0.666, closed = 'auto', keepCorners = true) {
 
 
     //auto detect closed polygon
-    if(closed==='auto'){
+    if (closed === 'auto') {
         closed = isClosedPolygon(pts)
     }
 
@@ -51,7 +255,7 @@ export function getCurvePathData(pts, t = 0.666, closed = 'auto', keepCorners =
 
     // collect smoothed pathData
     let pathData = [];
-    pathData.push({ type: "M", values: [pts[0].x, pts[0].y], p0:{x:pts[0].x, y:pts[0].y} });
+    pathData.push({ type: "M", values: [pts[0].x, pts[0].y], p0: { x: pts[0].x, y: pts[0].y } });
 
     let cp2_0 = pts[0];
     let l = pts.length;
@@ -69,7 +273,7 @@ export function getCurvePathData(pts, t = 0.666, closed = 'auto', keepCorners =
         let cp1 = controlPoint(pt0, ptPrev, pt1, false, t);
         let cp2 = controlPoint(pt1, pt0, ptNext, true, t);
 
-        let {isExtreme, isCorner,directionChange} = pt1;
+        let { isExtreme, isCorner, directionChange } = pt1;
 
         // get cp vector intersections
         let cpI = checkLineIntersection(pt0, cp1, pt1, cp2, false);
@@ -95,7 +299,7 @@ export function getCurvePathData(pts, t = 0.666, closed = 'auto', keepCorners =
                 cpI = !interH ? cpI : (cpI2 ? cpI2 : null)
 
                 //&& i < l - 3
-                if (cpI ) {
+                if (cpI) {
                     cp1 = interpolate(pt0, cpI, t)
                     cp2 = interpolate(pt1, cpI, t)
                     //renderPoint(svg, cpI, 'magenta')
@@ -134,18 +338,19 @@ export function getCurvePathData(pts, t = 0.666, closed = 'auto', keepCorners =
         // update last cp2
         cp2_0 = cp2;
 
-        let com = { type: "C", values: [cp1.x, cp1.y, cp2.x, cp2.y, pt1.x, pt1.y], 
-        drawLine, 
-        // add properties for chunk based simplification
-        isExtreme, isCorner,directionChange
-     };
+        let com = {
+            type: "C", values: [cp1.x, cp1.y, cp2.x, cp2.y, pt1.x, pt1.y],
+            drawLine,
+            // add properties for chunk based simplification
+            isExtreme, isCorner, directionChange
+        };
 
 
         let values = com.values
         com.p0 = pt0
-        com.cp1 = {x:values[0], y:values[1]}
-        com.cp2 = {x:values[2], y:values[3]}
-        com.p = {x:values[4], y:values[5]}
+        com.cp1 = { x: values[0], y: values[1] }
+        com.cp2 = { x: values[2], y: values[3] }
+        com.p = { x: values[4], y: values[5] }
 
 
         pathData.push(com);
@@ -161,10 +366,10 @@ export function getCurvePathData(pts, t = 0.666, closed = 'auto', keepCorners =
         pathData[1].values = [valuesLastC[0], valuesLastC[1], ...valuesFirstC.slice(2)]
         let values0 = pathData[0].values
         let values = pathData[1].values
-        pathData[1].p0 = {x:values0[0], y:values0[1]}
-        pathData[1].cp1 = {x:values[0], y:values[1]}
-        pathData[1].cp2 = {x:values[2], y:values[3]}
-        pathData[1].p = {x:values[4], y:values[5]}
+        pathData[1].p0 = { x: values0[0], y: values0[1] }
+        pathData[1].cp1 = { x: values[0], y: values[1] }
+        pathData[1].cp2 = { x: values[2], y: values[3] }
+        pathData[1].p = { x: values[4], y: values[5] }
 
         // delete last curveto
         pathData = pathData.slice(0, pathData.length - 1);

package/src/svgii/rounding.js

@@ -4,66 +4,42 @@
  * for further rounding/optimizations
  */
 
-import { getDistAv } from "./geometry";
+import { getDistAv, getDistManhattan } from "./geometry";
 
 
 export function detectAccuracy(pathData) {
 
-    // Reference first MoveTo command (M)
-    let M = { x: pathData[0].values[0], y: pathData[0].values[1] };
-    let p0 = M
-    let p = M
-    pathData[0].decimals = 0
-    let lastDec = 0;
-    let maxDecimals = 0
     let minDim = Infinity
-    let maxDim = 0
-
-    //console.log('detectAccuracy');
-
-    //let dims = new Set();
     let dims = [];
+    //console.log(pathData);
 
     // add average distances
-    for (let i = 0, len = pathData.length; i < len; i++) {
+    for (let i = 1, len = pathData.length; i < len; i++) {
         let com = pathData[i];
-        let { type, values } = com;
-
-        let lastVals = values.length ? values.slice(-2) : [M.x, M.y];
-        p = { x: lastVals[0], y: lastVals[1] }
+        let { type, values, p0 = null, p = null, dimA = 0 } = com;
 
         // use existing averave dimension value or calculate
-        let dimA = com.dimA ? +com.dimA.toFixed(8) : type !== 'M' ? +getDistAv(p0, p).toFixed(8) : 0
-        //let dimA = +getDistAv(p0, p).toFixed(8)
-        //console.log('dimA', dimA, com.dimA, type);
-
-        if (dimA) dims.push(dimA);
-
-        if (dimA && dimA < minDim) minDim = dimA;
-        if (dimA && dimA > maxDim) maxDim = dimA;
+        if (values.length && p && p0) {
+            //console.log(com);
+            dimA = dimA ? dimA : getDistManhattan(p0, p);
 
+            //let dimA = +getDistAv(p0, p).toFixed(8)
+            //console.log('dimA', dimA, com.dimA, type);
 
-        if (type === 'M') {
-            M = p;
+            if (dimA) dims.push(dimA);
+            if (dimA && dimA < minDim) minDim = dimA;
+            //if (dimA && dimA > maxDim) maxDim = dimA;
         }
-        p0 = p;
-    }
 
+    }
 
     let dim_min = dims.sort()
-
-    /*
-    let minVal = dim_min.length > 15 ?
-        (dim_min[0] + dim_min[2]) / 2 :
-        dim_min[0];
-    */
-        
-    let sliceIdx = Math.ceil(dim_min.length / 10);
+    let sliceIdx = Math.ceil(dim_min.length / 8);
     dim_min = dim_min.slice(0, sliceIdx);
     let minVal = dim_min.reduce((a, b) => a + b, 0) / sliceIdx;
 
-    let threshold = 40
-    let decimalsAuto = minVal > threshold*1.5 ? 0 : Math.floor(threshold / minVal).toString().length
+    let threshold = 75
+    let decimalsAuto = minVal > threshold * 1.5 ? 0 : Math.floor(threshold / minVal).toString().length
 
     // clamp
     return Math.min(Math.max(0, decimalsAuto), 8)
@@ -71,98 +47,65 @@ export function detectAccuracy(pathData) {
 }
 
 
+export function roundTo(num = 0, decimals = 3) {
+    if (!decimals) return Math.round(num);
+    let factor = 10 ** decimals;
+    return Math.round(num * factor) / factor;
+}
 
-export function detectAccuracy_back(pathData) {
-
-    // Reference first MoveTo command (M)
-    let M = { x: pathData[0].values[0], y: pathData[0].values[1] };
-    let p0 = { ...M };
-    pathData[0].decimals = 0
-    let lastDec = 0;
-    let maxDecimals = 0
-
-    for (let i = 1, len = pathData.length; i < len; i++) {
-        let com = pathData[i];
-        let { type, values } = com;
-
-        let lastVals = values.length ? values.slice(-2) : [M.x, M.y];
-        let lastX = lastVals[0];
-        let lastY = lastVals[1];
-
-        if (type === 'Z' || type === 'z') {
-            lastX = M.x;
-            lastY = M.y;
-        }
-
-        let w = Math.abs(p0.x - lastX);
-        let h = Math.abs(p0.y - lastY);
-        let dimA = (w + h) / 2 || 0;
-
-
-        // Determine decimal places dynamically
-        let decimals = (type !== 'Z' && type !== 'z') ? Math.ceil((1 / dimA)).toString().length + 1 : 0;
-
-        //console.log(type, dimA, decimals);
-
-
-        if (dimA === 0) {
-            //console.log('zero length');
-            decimals = lastDec;
-        }
-
-        else if (decimals && dimA < 0.5) {
-            decimals++
-        }
-
-        //console.log('dimA', type, dimA, decimals);
 
+/**
+ * round path data
+ * either by explicit decimal value or
+ * based on suggested accuracy in path data
+ */
+export function roundPathData(pathData, decimals = -1) {
 
-        // Update previous coordinates
-        p0 = { x: lastX, y: lastY };
+    if (decimals < 0) return pathData;
 
-        // Track MoveTo for closing paths
-        if (type === 'M') {
-            M = { x: values[0], y: values[1] };
-            com.decimals = decimals;
-        } else {
+    let len = pathData.length;
 
-            // Store ideal precision for next pass
-            com.decimals = decimals;
+    for (let c = 0; c < len; c++) {
+        //let com = pathData[c];
+        let values = pathData[c].values
+        let valLen = values.length;
+        if (!valLen) continue
 
+        for (let v = 0; v < valLen; v++) {
+            //pathData[c].values[v] =  +values[v].toFixed(decimals);
+            pathData[c].values[v] = roundTo(values[v], decimals);
         }
+    };
 
-        maxDecimals = decimals > maxDecimals ? decimals : maxDecimals;
-        lastDec = decimals;
-    }
-
-    // set max decimal for M
-    return maxDecimals
-    //pathData[0].decimals = maxDecimals
-    //return pathData
+    //console.log(pathData);
+    return pathData;
 }
 
 
-/**
- * round path data
- * either by explicit decimal value or
- * based on suggested accuracy in path data
- */
-export function roundPathData(pathData, decimals = -1) {
+export function roundPathData_(pathData, decimals = -1) {
+
+    if (decimals < 0) return pathData;
 
     let len = pathData.length;
+    let c = 0;
+    while (c < len) {
 
-    for (let c = 0; c < len; c++) {
         //let com = pathData[c];
         let values = pathData[c].values
         let valLen = values.length;
 
-        if (valLen && (decimals > -1) ) {
+        // Z commands have no values
+        if (!valLen) {
+            c++; continue
+        }
 
-            for(let v=0; v<valLen; v++){
-                //pathData[c].values[v] = values[v] ? +values[v].toFixed(decimals) : values[v];
-                pathData[c].values[v] =  +values[v].toFixed(decimals);
-            }
+        let v = 0;
+        while (v < valLen) {
+            pathData[c].values[v] = roundTo(values[v], decimals);
+            v++
         }
+        c++
+
     };
 
     //console.log(pathData);

package/src/svgii/svg_cleanup.js

@@ -14,14 +14,19 @@ export function cleanUpSVG(svgMarkup, {
   removeHidden = true,
   removeUnused = true,
 } = {}) {
+
   svgMarkup = cleanSvgPrologue(svgMarkup);
 
   // replace namespaced refs 
   svgMarkup = svgMarkup.replaceAll("xlink:href=", "href=");
+  //console.log('!!!svgMarkup', svgMarkup);
+
 
   let svg = new DOMParser()
+  //.parseFromString(svgMarkup, "image/svg+xml")
   .parseFromString(svgMarkup, "text/html")
   .querySelector("svg");
+  //console.log(svg);
 
 
   let allowed = ['viewBox', 'xmlns', 'width', 'height', 'id', 'class', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin'];
@@ -30,6 +35,7 @@ export function cleanUpSVG(svgMarkup, {
   let removeEls = ['metadata', 'script']
 
   let els = svg.querySelectorAll('*')
+  
   els.forEach(el => {
     let name = el.nodeName;
     // remove hidden elements
@@ -44,10 +50,16 @@ export function cleanUpSVG(svgMarkup, {
     }
   })
 
+  //console.log('svg', svg);
+  //return
+
   if (returnDom) return svg
 
   let markup = stringifySVG(svg)
-  //console.log(markup);
+  //console.log('!!!markup', markup);
+
+  //return
+
 
   return markup;
 }

package/src/svgii/visualize.js

@@ -250,11 +250,16 @@ export function renderPath(svg, d = '', stroke = 'green', strokeWidth = '1%', op
 
 
 // debug helper: render lines
-export function renderPoly(svg, pts, strokeWidth = "1%", stroke = "purple", render = true) {
+export function renderPoly(svg, pts, stroke = "purple", strokeWidth = "1%",  fillOpacity="0.5", fill="none", polygon=true , render = true) {
     pts = pts.map(pt => { return [pt.x, pt.y] }).flat().join(' ');
+    
+
+    polygon = pts.length===2 ? false : polygon;
+
+    let poly =polygon ? 
+    `<polygon  stroke-width="${strokeWidth}" points="${pts}" stroke="${stroke}" fill="${fill}" fill-opacity="${fillOpacity}" />`:
+    `<polyline  stroke-width="${strokeWidth}" points="${pts}" stroke="${stroke}" fill="${fill}" fill-opacity="${fillOpacity}" />`;
 
-    let poly =
-        `<polyline  stroke-width="${strokeWidth}" points="${pts}" stroke="${stroke}" />`;
 
     if (render) {
         svg.insertAdjacentHTML("beforeend", poly);

package/{debug.cjs → tests/debug.cjs}

@@ -1,4 +1,5 @@
 // debug.cjs
+/*
 const { createRequire } = require('module');
 const requireModule = createRequire(__filename);
 
@@ -9,3 +10,5 @@ console.log('require.resolve →', requireModule.resolve('svg-path-simplify'));
   console.log('imported keys →', Object.keys(mod));
   console.log('default keys →', mod.default && Object.keys(mod.default));
 })();
+
+*/