svg-path-simplify 0.1.2 → 0.2.1

package/src/simplify_poly_radial_distance.js

@@ -0,0 +1,100 @@
+
+/**
+ * radialDistance simplification
+ * sloppy but fast
+ */
+
+import { getDistManhattan, getSquareDistance, reducePoints } from "./svgii/geometry";
+import { getPolyBBox } from "./svgii/geometry_bbox";
+import { renderPoint } from "./svgii/visualize";
+
+export function simplifyRD(pts, {
+    quality = 0.9,
+    width = 0,
+    height = 0,
+    absolute = false,
+    // use square or manhattan distances
+    manhattan = false,
+    exclude = []
+} = {}) {
+
+    /**
+     * switch between absolute or 
+     * quality based relative thresholds
+     */
+
+    if (typeof quality === 'string') {
+        let value = parseFloat(quality);
+        absolute = true;
+        quality = value;
+    }
+
+    // nothing to do - exit
+    if (pts.length < 4 || (!absolute && quality) >= 1) return pts;
+
+
+    // convert quality to squaredistance tolerance
+    let tolerance = quality;
+
+    if (!absolute) {
+
+        // quality to tolerance
+        tolerance = 1 - quality;
+
+        /**
+         * approximate dimensions
+         * adjust tolerance for 
+         * very small polygons e.g geodata
+         */
+
+        if (!width && !height) {
+            let polyS = reducePoints(pts, 12);
+            ({ width, height } = getPolyBBox(polyS));
+        }
+
+        if (!manhattan) {
+            // average side lengths
+            let dimAvg = (width + height) / 2;
+            let scale = dimAvg / 25;
+            tolerance = (tolerance * (scale)) ** 2
+        } else {
+            // use manhattan
+            tolerance = (width + height) * 0.05 * (1 - quality)
+        }
+
+    }
+
+    let p0 = pts[0];
+    let pt;
+
+    // new simplified point array
+    let ptsSmp = [p0];
+    let l = pts.length
+    let lenExclude = exclude.length;
+    let dist = 0
+
+    for (let i = 1; i < l; i++) {
+        pt = pts[i];
+
+        // skip
+        dist = manhattan ? getDistManhattan(p0, pt) : getSquareDistance(p0, pt);
+
+        if ( dist < tolerance && (!lenExclude || !exclude.includes(i)) ) {
+            p0 = pt;
+            continue
+        }
+
+        ptsSmp.push(pt);
+        p0 = pt;
+
+    }
+
+    // add last point - if not coinciding with first point
+    if (p0.x !== pt.x && p0.y !== pt.y) {
+        ptsSmp.push(pt);
+    }
+
+    //console.log('ptsSmp', ptsSmp, l);
+    return ptsSmp;
+
+}

package/src/svg_getViewbox.js

@@ -4,29 +4,42 @@
  * width and height attributes
  */
 
-export function getViewBox(svg = null, round = false) {
+export function getViewBox(svg = null, decimals = -1) {
+
+    const getUnit=(val)=>{
+        return val && isNaN(val) ? val.match(/[^\d|.]+/g)[0] : '';
+    }
 
     // browser default
-    if (!svg) return { x: 0, y: 0, width: 300, height: 150 }
+    if (!svg) return false
+
+
+    let hasWidth = svg.hasAttribute('width')
+    let hasHeight = svg.hasAttribute('height')
+    let hasViewBox = svg.hasAttribute('viewBox')
+
 
-    let style = window.getComputedStyle(svg);
+    let widthAtt = hasWidth ? svg.getAttribute('width') : 0;
+    let heightAtt = hasHeight ? svg.getAttribute('height') : 0;
 
-    // the baseVal API method also converts physical units to pixels/user-units
-    let w = svg.hasAttribute('width') ? svg.width.baseVal.value : parseFloat(style.width) || 300;
-    let h = svg.hasAttribute('height') ? svg.height.baseVal.value : parseFloat(style.height) || 150;
 
-    let viewBox = svg.getAttribute('viewBox') ? svg.viewBox.baseVal : { x: 0, y: 0, width: w, height: h };
 
-    // remove SVG constructor
-    let { x, y, width, height } = viewBox;
-    viewBox = { x, y, width, height };
+    let widthUnit = hasWidth ? getUnit(widthAtt) : false;
+    let heightUnit = hasHeight ? getUnit(widthAtt) : false
 
-    // round to integers
-    if (round) {
-        for (let prop in viewBox) {
-            viewBox[prop] = Math.ceil(viewBox[prop]);
-        }
+    let w = widthAtt ? (!widthAtt.includes('%') ? parseFloat(widthAtt) : 0 ) : 300
+    let h = heightAtt ? (!heightAtt.includes('%') ? parseFloat(heightAtt) : 0 ) : 150
+
+
+    let viewBoxVals =  hasViewBox ? svg.getAttribute('viewBox').split(/,| /).filter(Boolean).map(Number) : [0, 0, w, h];
+
+    // round
+    if (decimals>-1) {
+        [w, h] = [w, h].map(val=>+val.toFixed(decimals))
+        viewBoxVals = viewBoxVals.map(val=>+val.toFixed(decimals))
     }
 
+    let viewBox = { x:viewBoxVals[0] , y:viewBoxVals[1], width:viewBoxVals[2], height:viewBoxVals[3], w, h, hasViewBox, hasWidth, hasHeight, widthUnit, heightUnit };
+
     return viewBox
 }