mapshaper 0.6.35 → 0.6.36

package/mapshaper.js

@@ -1,6 +1,6 @@
 (function () {
 
-  var VERSION = "0.6.35";
+  var VERSION = "0.6.36";
 
 
   var utils = /*#__PURE__*/Object.freeze({
@@ -5829,11 +5829,11 @@
     };
 
     // TODO: move this and similar methods out of ArcCollection
-    this.getMultiShapeBounds = function(shapeIds, bounds) {
+    this.getMultiShapeBounds = function(shp, bounds) {
       bounds = bounds || new Bounds();
-      if (shapeIds) { // handle null shapes
-        for (var i=0, n=shapeIds.length; i<n; i++) {
-          this.getSimpleShapeBounds(shapeIds[i], bounds);
+      if (shp) { // handle null shapes
+        for (var i=0, n=shp.length; i<n; i++) {
+          this.getSimpleShapeBounds(shp[i], bounds);
         }
       }
       return bounds;
@@ -19132,6 +19132,47 @@
     return str1;
   }
 
+  function getSphereEffectParams() {
+    return {
+      cx: 0.5,
+      cy: 0.5,
+      r: 0.57,
+      fx: 0.35,
+      fy: 0.35,
+      stops: [
+        {offset: 0.3, opacity: 0},
+        {offset: 0.6, opacity: 0.1},
+        {offset: 0.78, opacity: 0.25},
+        {offset: 0.87, opacity: 0.45},
+        {offset: 0.95, opacity: 1}]
+    };
+  }
+
+  function convertFillEffect(obj, defs) {
+    if (obj['fill-effect'] != 'sphere') return; // only "sphere" is supported
+    var id = 'mapshaper_sphere_effect';
+    var href = `url(#${ id })`;
+    var params = getSphereEffectParams();
+    var stops = params.stops.map(function(stop) {
+        return `<stop offset="${stop.offset}" stop-opacity="${stop.opacity}"/>`;
+      });
+    var svg =
+`<radialGradient id="${id}" cx="${params.cx}" cy="${params.cy}" r="${params.r}" fx="${params.fx}" fy="${params.fy}">${stops.join('')}</radialGradient>`  ;
+    if (!utils.find(defs, function(o) { return o.id == id; })) {
+      defs.push({svg, id, href});
+    }
+    obj.fill = href;
+    if ('opacity' in obj === false && 'fill-opacity' in obj === false) {
+      obj['fill-opacity'] = 0.35;
+    }
+  }
+
+  var SvgEffect = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    getSphereEffectParams: getSphereEffectParams,
+    convertFillEffect: convertFillEffect
+  });
+
   var cache = {};
   function fetchFileSync(url) {
     if (url in cache) return cache[url];
@@ -19149,8 +19190,8 @@
       if (obj.tag == 'path' && obj.properties['fill-pattern']) {
         convertFillPattern(obj.properties, defs);
       }
-      if (obj.tag == 'path' && obj.properties['fill-effect'] == 'sphere') {
-        convertSphereEffect(obj.properties, defs);
+      if (obj.tag == 'path' && obj.properties['fill-effect']) {
+        convertFillEffect(obj.properties, defs);
       }
       if (obj.tag == 'image') {
         if (/\.svg/.test(obj.properties.href || '')) {
@@ -19162,25 +19203,6 @@
     }
   }
 
-  function convertSphereEffect(obj, defs) {
-    var id = 'mapshaper_sphere_effect';
-    var href = `url(#${ id })`;
-    var svg =
-`<radialGradient id="${id}" cx="0.5" cy="0.5" r=".56" fx="0.4" fy="0.35">
-  <stop offset=".35" stop-opacity="0"/>
-  <stop offset=".65" stop-opacity="0.1" />
-  <stop offset=".85" stop-opacity="0.45" />
-  <stop offset=".95"  stop-opacity="1" />
-</radialGradient>`  ;
-    if (!utils.find(defs, function(o) { return o.id == id; })) {
-      defs.push({svg, id, href});
-    }
-    obj.fill = href;
-    if ('opacity' in obj === false && 'fill-opacity' in obj === false) {
-      obj['fill-opacity'] = 0.35;
-    }
-  }
-
   function convertSvgImage(obj, defs) {
     // Same-origin policy prevents embedding images in the web UI
     var href = obj.properties.href;
@@ -43170,7 +43192,7 @@ ${svg}
   function commandAcceptsMultipleTargetDatasets(name) {
     return name == 'rotate' || name == 'info' || name == 'proj' ||
       name == 'drop' || name == 'target' || name == 'if' || name == 'elif' ||
-      name == 'else' || name == 'endif';
+      name == 'else' || name == 'endif' || name == 'run';
   }
 
   function commandAcceptsEmptyTarget(name) {
@@ -44396,6 +44418,7 @@ ${svg}
     Topology,
     Units,
     SvgHatch,
+    SvgEffect,
     VertexUtils,
     Zip
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mapshaper",
-  "version": "0.6.35",
+  "version": "0.6.36",
   "description": "A tool for editing vector datasets for mapping and GIS.",
   "keywords": [
     "shapefile",

package/www/mapshaper-gui.js

@@ -9045,6 +9045,7 @@
           r: 'radius',
           'fill': 'fillColor',
           'fill-pattern': 'fillPattern',
+          'fill-effect': 'fillEffect',
           'fill-opacity': 'fillOpacity',
           'stroke': 'strokeColor',
           'stroke-width': 'strokeWidth',
@@ -9359,6 +9360,117 @@
 
   utils$1.inherit(MapExtent, EventDispatcher);
 
+  var hatches = {}; // cached patterns
+
+  function getCanvasFillEffect(ctx, shp, arcs, ext, style) {
+    var bounds = arcs.getMultiShapeBounds(shp);
+    if (!bounds.hasBounds() || style.fillEffect != 'sphere') {
+      return null;
+    }
+    bounds.transform(ext.getTransform(GUI.getPixelRatio()));
+    bounds.fillOut(1); // convert to square
+    var o = convertSvgSphereParams(bounds);
+    var fill = ctx.createRadialGradient(o.x0, o.y0, o.r0, o.x1, o.y1, o.r1);
+    o.stops.forEach(function(stop) {
+      fill.addColorStop(stop.offset, stop.color);
+    });
+    return fill;
+  }
+
+  function convertSvgSphereParams(bounds) {
+    var bbox = bounds.toArray(),
+        d = Math.max(bounds.width(), bounds.height()),
+        cx = bounds.centerX(),
+        cy = bounds.centerY(),
+        o = internal.getSphereEffectParams();
+    return {
+      x0: bbox[0] + d * o.fx,
+      y0: bbox[1] + d * o.fy,
+      r0: 0,
+      x1: bbox[0] + d * o.cx,
+      y1: bbox[1] + d * o.cy,
+      r1: d * o.r,
+      stops: o.stops.map(function(stop) {
+        return {offset: stop.offset, color: `rgba(0,0,0,${stop.opacity})`};
+      })
+    };
+  }
+
+
+  function getCanvasFillPattern(style) {
+    var fill = hatches[style.fillPattern];
+    if (fill === undefined) {
+      fill = makePatternFill(style);
+      hatches[style.fillPattern] = fill;
+    }
+    return fill || style.fill || '#000'; // use fill if hatches are invalid
+  }
+
+  function makePatternFill(style) {
+    var o = internal.parsePattern(style.fillPattern);
+    if (!o) return null;
+    var canv = document.createElement('canvas');
+    var ctx = canv.getContext('2d');
+    var res = GUI.getPixelRatio();
+    var w = o.tileSize[0] * res;
+    var h = o.tileSize[1] * res;
+    canv.setAttribute('width', w);
+    canv.setAttribute('height', h);
+    if (o.background) {
+      ctx.fillStyle = o.background;
+      ctx.fillRect(0, 0, w, h);
+    }
+    if (o.type == 'dots' || o.type == 'squares') makeDotFill(o, ctx, res);
+    if (o.type == 'dashes') makeDashFill(o, ctx, res);
+    if (o.type == 'hatches') makeHatchFill(o, ctx, res);
+    var pattern = ctx.createPattern(canv, 'repeat');
+    if (o.rotation) {
+      pattern.setTransform(new DOMMatrix('rotate(' + o.rotation + 'deg)'));
+    }
+    return pattern;
+  }
+
+  function makeDashFill(o, ctx, res) {
+    var x = 0;
+    for (var i=0; i<o.colors.length; i++) {
+      ctx.fillStyle = o.colors[i];
+      ctx.fillRect(x, 0, o.width * res, o.dashes[0] * res);
+      x += res * (o.spacing + o.width);
+    }
+  }
+
+  function makeDotFill(o, ctx, res) {
+    var dotSize = o.size * res;
+    var r = dotSize / 2;
+    var n = o.colors.length;
+    var dist = dotSize + o.spacing * res;
+    var dots = n * n;
+    var x = 0, y = 0;
+    for (var i=0; i<dots; i++) {
+      if (o.type == 'dots') ctx.beginPath();
+      ctx.fillStyle = o.colors[(i + Math.floor(i / n)) % n];
+      if (o.type == 'dots') {
+        ctx.arc(x + r, y + r, r, 0, Math.PI * 2);
+      } else {
+        ctx.fillRect(x, y, dotSize, dotSize);
+      }
+      if (o.type == 'dots') ctx.fill();
+      x = ((i + 1) % n) * dist;
+      if (x == 0) y += dist;
+    }
+  }
+
+  function makeHatchFill(o, ctx, res) {
+    var h = o.tileSize[1] * res;
+    var w;
+    for (var i=0, x=0; i<o.widths.length; i++) {
+      w = o.widths[i] * res;
+      ctx.fillStyle = o.colors[i];
+      ctx.fillRect(x, 0, x + w, h);
+      x += w;
+    }
+  }
+
   // TODO: consider moving this upstream
   function getArcsForRendering(obj, ext) {
     var dataset = obj.source.dataset;
@@ -9549,7 +9661,7 @@
         shp = shapes[i];
         if (!shp || filter && !filter(shp)) continue;
         if (styler) styler(style, i);
-        if (style.overlay || style.opacity < 1 || style.fillOpacity < 1 || style.strokeOpacity < 1) {
+        if (style.overlay || style.opacity < 1 || style.fillOpacity < 1 || style.strokeOpacity < 1 || style.fillEffect) {
           // don't batch shapes with opacity, in case they overlap
           drawPaths([shp], startPath, draw, style);
           continue;
@@ -9574,10 +9686,10 @@
       });
     };
 
-    function drawPaths(shapes, begin, draw, style) {
-      begin(_ctx, style);
+    function drawPaths(shapes, beginPath, drawShape, style) {
+      beginPath(_ctx, style);
       for (var i=0, n=shapes.length; i<n; i++) {
-        draw(shapes[i], _ctx);
+        drawShape(shapes[i], _ctx, style);
       }
       endPath(_ctx, style);
     }
@@ -9863,7 +9975,10 @@
   function getShapePencil(arcs, ext) {
     var t = getScaledTransform(ext);
     var iter = new internal.ShapeIter(arcs);
-    return function(shp, ctx) {
+    return function(shp, ctx, style) {
+      if (style.fillEffect) {
+        ctx.fillStyle = getCanvasFillEffect(ctx, shp, arcs, ext, style);
+      }
       for (var i=0, n=shp ? shp.length : 0; i<n; i++) {
         iter.init(shp[i]);
         // 0.2 trades visible seams for performance
@@ -9930,8 +10045,12 @@
     var fo = style.opacity >= 0 ? style.opacity : 1,
         so = fo;
     if (style.strokeOpacity >= 0) so *= style.strokeOpacity;
-    if (style.fillOpacity >= 0) fo *= style.fillOpacity;
-    if (style.fillColor || style.fillPattern) {
+    if (style.fillColor || style.fillPattern || style.fillEffect) {
+      if (style.fillOpacity >= 0) {
+        fo *= style.fillOpacity;
+      } else if (style.fillEffect && style.opacity >= 0 === false) {
+        fo = 0.35; // kludge: default opacity of sphere effect
+      }
       ctx.globalAlpha = fo;
       ctx.fill();
     }
@@ -9947,82 +10066,6 @@
     ctx.closePath();
   }
 
-  var hatches = {};
-
-  function getCanvasFillPattern(style) {
-    var fill = hatches[style.fillPattern];
-    if (fill === undefined) {
-      fill = makePatternFill(style);
-      hatches[style.fillPattern] = fill;
-    }
-    return fill || style.fill || '#000'; // use fill if hatches are invalid
-  }
-
-  function makePatternFill(style) {
-    var o = internal.parsePattern(style.fillPattern);
-    if (!o) return null;
-    var canv = document.createElement('canvas');
-    var ctx = canv.getContext('2d');
-    var res = GUI.getPixelRatio();
-    var w = o.tileSize[0] * res;
-    var h = o.tileSize[1] * res;
-    canv.setAttribute('width', w);
-    canv.setAttribute('height', h);
-    if (o.background) {
-      ctx.fillStyle = o.background;
-      ctx.fillRect(0, 0, w, h);
-    }
-    if (o.type == 'dots' || o.type == 'squares') makeDotFill(o, ctx, res);
-    if (o.type == 'dashes') makeDashFill(o, ctx, res);
-    if (o.type == 'hatches') makeHatchFill(o, ctx, res);
-    var pattern = ctx.createPattern(canv, 'repeat');
-    if (o.rotation) {
-      pattern.setTransform(new DOMMatrix('rotate(' + o.rotation + 'deg)'));
-    }
-    return pattern;
-  }
-
-  function makeDashFill(o, ctx, res) {
-    var x = 0;
-    for (var i=0; i<o.colors.length; i++) {
-      ctx.fillStyle = o.colors[i];
-      ctx.fillRect(x, 0, o.width * res, o.dashes[0] * res);
-      x += res * (o.spacing + o.width);
-    }
-  }
-
-  function makeDotFill(o, ctx, res) {
-    var dotSize = o.size * res;
-    var r = dotSize / 2;
-    var n = o.colors.length;
-    var dist = dotSize + o.spacing * res;
-    var dots = n * n;
-    var x = 0, y = 0;
-    for (var i=0; i<dots; i++) {
-      if (o.type == 'dots') ctx.beginPath();
-      ctx.fillStyle = o.colors[(i + Math.floor(i / n)) % n];
-      if (o.type == 'dots') {
-        ctx.arc(x + r, y + r, r, 0, Math.PI * 2);
-      } else {
-        ctx.fillRect(x, y, dotSize, dotSize);
-      }
-      if (o.type == 'dots') ctx.fill();
-      x = ((i + 1) % n) * dist;
-      if (x == 0) y += dist;
-    }
-  }
-
-  function makeHatchFill(o, ctx, res) {
-    var h = o.tileSize[1] * res;
-    var w;
-    for (var i=0, x=0; i<o.widths.length; i++) {
-      w = o.widths[i] * res;
-      ctx.fillStyle = o.colors[i];
-      ctx.fillRect(x, 0, x + w, h);
-      x += w;
-    }
-  }
-
   function getSvgFurnitureTransform(ext) {
     var scale = ext.getSymbolScale();
     var frame = ext.getFrame();

package/www/mapshaper.js

@@ -1,6 +1,6 @@
 (function () {
 
-  var VERSION = "0.6.35";
+  var VERSION = "0.6.36";
 
 
   var utils = /*#__PURE__*/Object.freeze({
@@ -5829,11 +5829,11 @@
     };
 
     // TODO: move this and similar methods out of ArcCollection
-    this.getMultiShapeBounds = function(shapeIds, bounds) {
+    this.getMultiShapeBounds = function(shp, bounds) {
       bounds = bounds || new Bounds();
-      if (shapeIds) { // handle null shapes
-        for (var i=0, n=shapeIds.length; i<n; i++) {
-          this.getSimpleShapeBounds(shapeIds[i], bounds);
+      if (shp) { // handle null shapes
+        for (var i=0, n=shp.length; i<n; i++) {
+          this.getSimpleShapeBounds(shp[i], bounds);
         }
       }
       return bounds;
@@ -19132,6 +19132,47 @@
     return str1;
   }
 
+  function getSphereEffectParams() {
+    return {
+      cx: 0.5,
+      cy: 0.5,
+      r: 0.57,
+      fx: 0.35,
+      fy: 0.35,
+      stops: [
+        {offset: 0.3, opacity: 0},
+        {offset: 0.6, opacity: 0.1},
+        {offset: 0.78, opacity: 0.25},
+        {offset: 0.87, opacity: 0.45},
+        {offset: 0.95, opacity: 1}]
+    };
+  }
+
+  function convertFillEffect(obj, defs) {
+    if (obj['fill-effect'] != 'sphere') return; // only "sphere" is supported
+    var id = 'mapshaper_sphere_effect';
+    var href = `url(#${ id })`;
+    var params = getSphereEffectParams();
+    var stops = params.stops.map(function(stop) {
+        return `<stop offset="${stop.offset}" stop-opacity="${stop.opacity}"/>`;
+      });
+    var svg =
+`<radialGradient id="${id}" cx="${params.cx}" cy="${params.cy}" r="${params.r}" fx="${params.fx}" fy="${params.fy}">${stops.join('')}</radialGradient>`  ;
+    if (!utils.find(defs, function(o) { return o.id == id; })) {
+      defs.push({svg, id, href});
+    }
+    obj.fill = href;
+    if ('opacity' in obj === false && 'fill-opacity' in obj === false) {
+      obj['fill-opacity'] = 0.35;
+    }
+  }
+
+  var SvgEffect = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    getSphereEffectParams: getSphereEffectParams,
+    convertFillEffect: convertFillEffect
+  });
+
   var cache = {};
   function fetchFileSync(url) {
     if (url in cache) return cache[url];
@@ -19149,8 +19190,8 @@
       if (obj.tag == 'path' && obj.properties['fill-pattern']) {
         convertFillPattern(obj.properties, defs);
       }
-      if (obj.tag == 'path' && obj.properties['fill-effect'] == 'sphere') {
-        convertSphereEffect(obj.properties, defs);
+      if (obj.tag == 'path' && obj.properties['fill-effect']) {
+        convertFillEffect(obj.properties, defs);
       }
       if (obj.tag == 'image') {
         if (/\.svg/.test(obj.properties.href || '')) {
@@ -19162,25 +19203,6 @@
     }
   }
 
-  function convertSphereEffect(obj, defs) {
-    var id = 'mapshaper_sphere_effect';
-    var href = `url(#${ id })`;
-    var svg =
-`<radialGradient id="${id}" cx="0.5" cy="0.5" r=".56" fx="0.4" fy="0.35">
-  <stop offset=".35" stop-opacity="0"/>
-  <stop offset=".65" stop-opacity="0.1" />
-  <stop offset=".85" stop-opacity="0.45" />
-  <stop offset=".95"  stop-opacity="1" />
-</radialGradient>`  ;
-    if (!utils.find(defs, function(o) { return o.id == id; })) {
-      defs.push({svg, id, href});
-    }
-    obj.fill = href;
-    if ('opacity' in obj === false && 'fill-opacity' in obj === false) {
-      obj['fill-opacity'] = 0.35;
-    }
-  }
-
   function convertSvgImage(obj, defs) {
     // Same-origin policy prevents embedding images in the web UI
     var href = obj.properties.href;
@@ -43170,7 +43192,7 @@ ${svg}
   function commandAcceptsMultipleTargetDatasets(name) {
     return name == 'rotate' || name == 'info' || name == 'proj' ||
       name == 'drop' || name == 'target' || name == 'if' || name == 'elif' ||
-      name == 'else' || name == 'endif';
+      name == 'else' || name == 'endif' || name == 'run';
   }
 
   function commandAcceptsEmptyTarget(name) {
@@ -44396,6 +44418,7 @@ ${svg}
     Topology,
     Units,
     SvgHatch,
+    SvgEffect,
     VertexUtils,
     Zip
   );