svg-path-simplify 0.0.5 → 0.0.8

package/src/svgii/rounding.js

@@ -11,7 +11,7 @@ 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 p0 = M
     let p = M
     pathData[0].decimals = 0
     let lastDec = 0;
@@ -29,34 +29,40 @@ export function detectAccuracy(pathData) {
         let { type, values } = com;
 
         let lastVals = values.length ? values.slice(-2) : [M.x, M.y];
-        p={x:lastVals[0], y:lastVals[1]}
+        p = { x: lastVals[0], y: lastVals[1] }
 
         // 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 = 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.add(dimA);
+        if (dimA) dims.add(dimA);
+
+        if (dimA && dimA < minDim) minDim = dimA;
+        if (dimA && dimA > maxDim) maxDim = dimA;
 
-        if(dimA && dimA<minDim) minDim = dimA;
-        if(dimA && dimA>maxDim) maxDim = dimA;
-        
 
-        if(type==='M'){
-            M=p;
+        if (type === 'M') {
+            M = p;
         }
         p0 = p;
     }
 
 
     let dim_min = Array.from(dims).sort()
-    let sliceIdx = Math.ceil(dim_min.length/8);
-    dim_min = dim_min.slice(0, sliceIdx );
 
-    let dimVal = dim_min.reduce((a,b)=>a+b, 0) / sliceIdx;
+    /*
+    let minVal = dim_min.length > 15 ?
+        (dim_min[0] + dim_min[2]) / 2 :
+        dim_min[0];
+    */
+        
+    let sliceIdx = Math.ceil(dim_min.length / 10);
+    dim_min = dim_min.slice(0, sliceIdx);
+    let minVal = dim_min.reduce((a, b) => a + b, 0) / sliceIdx;
 
-    let threshold = 50
-    let decimalsAuto = dimVal > threshold ? 0 : Math.floor(threshold / dimVal).toString().length
+    let threshold = 40
+    let decimalsAuto = minVal > threshold*1.5 ? 0 : Math.floor(threshold / minVal).toString().length
 
     // clamp
     return Math.min(Math.max(0, decimalsAuto), 8)
@@ -145,16 +151,16 @@ export function roundPathData(pathData, decimals = -1) {
     let hasDecimal = decimals == 'auto' && pathData[0].hasOwnProperty('decimals') ? true : false;
     //console.log('decimals', decimals, hasDecimal);
 
-    for(let c=0, len=pathData.length; c<len; c++){
-        let com=pathData[c];
-        let {type, values} = com
+    for (let c = 0, len = pathData.length; c < len; c++) {
+        let com = pathData[c];
+        let { type, values } = com
 
-        if (decimals >-1 || hasDecimal) {
+        if (decimals > -1 || hasDecimal) {
             decimals = hasDecimal ? com.decimals : decimals;
 
 
             //console.log('decimals', type, decimals);
-            pathData[c].values = com.values.map(val=>{return val ? +val.toFixed(decimals) : val });
+            pathData[c].values = com.values.map(val => { return val ? +val.toFixed(decimals) : val });
 
         }
     };

package/src/svgii/simplify_refineExtremes.js

@@ -0,0 +1,173 @@
+import { getCombinedByDominant } from "../pathData_simplify_cubic_extrapolate";
+import { getDistAv, interpolate } from "./geometry";
+import { getPathArea } from "./geometry_area";
+import { getPathDataBBox } from "./geometry_bbox";
+import { renderPoint } from "./visualize";
+
+export function refineAdjacentExtremes(pathData, {
+    threshold = null, tolerance = 1
+} = {}) {
+
+    //dimA = dimA ? dimA : 
+    if (!threshold) {
+        let bb = getPathDataBBox(pathData);
+        threshold = (bb.width + bb.height) / 2 * 0.05
+        //console.log('new threshold', threshold);
+    }
+
+    let l = pathData.length
+
+    for (let i = 0; i < l; i++) {
+        let com = pathData[i];
+        let { type, values, extreme, corner=false, dimA, p0, p } = com;
+        let comN = pathData[i + 1] ? pathData[i + 1] : null;
+
+
+        // adjacent 
+        //&& comN.extreme
+        if (comN && type === 'C' && comN.type === 'C' && extreme && !corner) {
+
+            // check dist
+            let diff = getDistAv(p, comN.p)
+            let isCose = diff < threshold;
+
+
+            if (isCose) {
+                //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;
+
+                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))
+                        //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))
+                        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
+
+                }
+
+                // extend fist command
+                else {
+
+                    let comN2 = pathData[i + 2] ? pathData[i + 2] : null;
+                    if (!comN2 && comN2.type !== 'C') continue
+
+                    //continue
+
+                    // extrapolate
+                    let comEx = getCombinedByDominant(comN, comN2, threshold, tolerance, false)
+                    //console.log('comEx', comEx);
+
+                    if (comEx.length === 1) {
+                        pathData[i + 1] = null;
+
+                        comEx = comEx[0]
+
+                        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
+                        pathData[i + 2].p0 = comEx.p0
+                        pathData[i + 2].p = comEx.p
+                        pathData[i + 2].extreme = comEx.extreme
+
+                        i++
+                        continue
+                    }
+
+                }
+
+            }
+        }
+    }
+
+    // remove commands
+    pathData = pathData.filter(Boolean)
+    l = pathData.length
+
+
+
+    /**
+     * refine closing commands
+     */
+
+    let closed = pathData[l - 1].type.toLowerCase() === 'z';
+    let lastIdx = closed ? l - 2 : l - 1;
+    let lastCom = pathData[lastIdx];
+    let penultimateCom = pathData[lastIdx - 1] || null;
+    let M = { x: pathData[0].values[0], y: pathData[0].values[1] }
+
+    let dec = 8
+    let lastVals = lastCom.values.slice(-2);
+    let isClosingTo = +lastVals[0].toFixed(dec) === +M.x.toFixed(dec) && +lastVals[1].toFixed(dec) === +M.y.toFixed(dec)
+    let fistExt = pathData[1].type === 'C' && pathData[1].extreme ? pathData[1] : null;
+
+
+    //renderPoint(markers, M, 'blue')
+    //renderPoint(markers, fistExt.cp1, 'blue')
+    //renderPoint(markers, fistExt.p0, 'blue')
+
+
+
+    let diff = getDistAv(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];
+            pathData[lastIdx] = null;
+            pathData = pathData.filter(Boolean)
+        }
+
+
+    }
+
+
+    //console.log('pathData ex', pathData);
+
+    return pathData
+
+}

package/src/svgii/svg_cleanup.js

@@ -1,3 +1,15 @@
+
+
+
+export function removeEmptySVGEls(svg) {
+  let els = svg.querySelectorAll('g, defs');
+  els.forEach(el => {
+      if (!el.children.length) el.remove()
+  })
+}
+
+
+
 export function cleanUpSVG(svgMarkup, {
   returnDom=false, 
   removeHidden=true,
@@ -13,7 +25,7 @@ export function cleanUpSVG(svgMarkup, {
     .querySelector("svg");
   
   
-  let allowed=['viewBox', 'xmlns', 'width', 'height', 'id', 'class'];
+  let allowed=['viewBox', 'xmlns', 'width', 'height', 'id', 'class', 'fill', 'stroke', 'stroke-width'];
   removeExcludedAttribues(svg, allowed)
   
   let removeEls = ['metadata', 'script']
@@ -74,7 +86,7 @@ function removeNameSpaceAtts(el) {
   });
 }
 
-function stringifySVG(svg){
+export function stringifySVG(svg){
     let markup = new XMLSerializer().serializeToString(svg);
   markup = markup
   .replace(/\t/g, "")

package/test.js

@@ -0,0 +1,14 @@
+import { svgPathSimplify  } from 'svg-path-simplify';
+
+let pathDataString =
+`
+M 57.13 15.5
+c 13.28 0 24.53 8.67 28.42 20.65
+c 0.94 2.91 1.45 6.01 1.45 9.23
+`
+
+// try to simplify
+let pathDataOpt = svgPathSimplify(pathDataString);
+
+// simplified pathData
+console.log(pathDataOpt)

package/testSVG.js

@@ -0,0 +1,39 @@
+// add suport for DOM manipulations
+import { DOMParser, parseHTML } from 'linkedom';
+//import { XMLSerializerPoly, DOMParserPoly } from 'svg-path-simplify/dom_polyfills.js';
+import { svgPathSimplify } from 'svg-path-simplify';
+
+
+
+
+let svgMarkup =
+    `<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px"
+	 height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
+<g id="garamond">
+	<path id="path1" d="M16.2 125.7 L16.2 125.7 Q12.1 125.7 8.4 123.8 Q4.6 122 2.3 119.1 Q0 116.2 0.2 113.1 L0.2 113.1 L0.4 112.6 Q2.2 111.2 5 109.3 Q7.8 107.4 11.4 105.1 Q15 102.8 19.1 100.4 L19.1 100.4 L19.2 99.5 Q16.8 98.1 15.5 94.7 Q14.1 91.3 14.1 86.7 L14.1 86.7 Q14.1 81.1 16 75.5 Q17.9 70 21.1 65.5 Q24.2 61 28.1 58.3 Q32 55.6 35.9 55.6 L35.9 55.6 L46.1 57.2 L47.2 54.7 L47.7 54.6 L50.8 56.1 L51.6 57 Q49.2 61.4 47.6 65.1 Q45.9 68.9 45 72 Q44 75.1 43.7 77.8 L43.7 77.8 Q43.4 80.3 43.2 83.7 Q43 87.1 42.8 90.6 Q42.6 94.2 42.5 97.1 Q42.3 100.1 42.1 101.6 L42.1 101.6 Q41.7 105.1 40 108.5 Q38.2 112 35.6 115.1 Q32.9 118.2 29.7 120.6 Q26.5 123 23 124.3 Q19.5 125.7 16.2 125.7 ZM19.5 119.9 L19.5 119.9 Q25.9 119.9 30.4 115.3 Q34.9 110.7 35.9 102.7 L35.9 102.7 L38.4 82 L37.6 81.8 Q34.5 87.5 32.3 91 Q30 94.6 28 96.8 Q25.9 99 23.5 100.8 L23.5 100.8 Q20.4 103.1 16.8 105.3 Q13.2 107.6 10.7 109.4 Q8.1 111.3 8.1 112.3 L8.1 112.3 Q8.1 114 9.9 115.8 Q11.6 117.5 14.3 118.7 Q16.9 119.9 19.5 119.9 ZM24.8 92.9 L24.8 92.9 Q26.3 92.9 29 89.4 Q31.6 86 35.2 79.5 Q38.7 73.1 42.9 64.1 L42.9 64.1 Q40.9 63.1 39.1 62.4 Q37.2 61.7 35.7 61.3 Q34.1 61 32.8 61 L32.8 61 Q29.8 61 27.1 64 Q24.4 67.1 22.7 71.9 Q21 76.7 21 82 L21 82 Q21 86.3 22.2 89.6 Q23.3 92.9 24.8 92.9 Z "/>
+</g>
+</svg>`
+
+
+/*
+*/
+let document = new DOMParser().parseFromString(svgMarkup, 'image/svg+xml');
+let svg = document.querySelector('svg');
+let path = svg.querySelector('path');
+let d = path.getAttribute('d')
+
+let markup = document.toString()
+markup = new XMLSerializer().serializeToString(svg)
+
+console.log(markup);
+
+/*
+// try to simplify
+let svgOpt = svgPathSimplify(svgMarkup);
+
+// simplified pathData
+console.log(svgOpt)
+*/