mapshaper 0.5.110 → 0.5.113

package/package.json

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

package/www/index.html

@@ -156,6 +156,9 @@
 		<div class="basemap-styles"></div>
 		<div>
 			<div class="close-btn btn dialog-btn">Close</div>
+			<div class="clear-btn btn dialog-btn disabled">Clear</div>
+			<div class="fade-btn btn dialog-btn disabled">Fade</div>
+			<!-- <div class="hide-btn btn dialog-btn disabled">Hide</div> -->
 		</div>
 	</div>
 </div>

package/www/mapshaper-gui.js

@@ -1107,7 +1107,7 @@
 
   utils$1.inherit(Checkbox, EventDispatcher);
 
-  function SimpleButton(ref) {
+  function xSimpleButton(ref) {
     var _el = El(ref),
         _self = this,
         _active = !_el.hasClass('disabled');
@@ -1134,7 +1134,31 @@
     }
   }
 
-  utils$1.inherit(SimpleButton, EventDispatcher);
+  //utils.inherit(SimpleButton, EventDispatcher);
+
+  function SimpleButton(ref) {
+    var _el = El(ref),
+        _active = !_el.hasClass('disabled');
+
+    _el.active = function(a) {
+      if (a === void 0) return _active;
+      if (a !== _active) {
+        _active = a;
+        _el.toggleClass('disabled');
+      }
+      return _el;
+    };
+
+    // this.node = function() {return _el.node();};
+
+    function isVisible() {
+      var el = _el.node();
+      return el.offsetParent !== null;
+    }
+    return _el;
+  }
+
+  // utils.inherit(SimpleButton, EventDispatcher);
 
   // @cb function(<FileList>)
   function DropControl(gui, el, cb) {
@@ -5968,13 +5992,13 @@
     var records = lyr.data.getRecords();
     var symbols = lyr.shapes.map(function(shp, i) {
       var d = records[i];
-      var obj = type == 'label' ? internal.svg.importStyledLabel(d) :
-          internal.svg.importSymbol(d['svg-symbol']);
+      var obj = internal.svg.renderPoint(d);
       if (!obj || !shp) return null;
+      obj.properties.class = 'mapshaper-svg-symbol';
       obj.properties.transform = getSvgSymbolTransform(shp[0], ext);
       obj.properties['data-id'] = i;
       return obj;
-    });
+    }).filter(Boolean);
     var obj = internal.getEmptyLayerForSVG(lyr, {});
     obj.children = symbols;
     return internal.svg.stringify(obj);
@@ -7663,7 +7687,7 @@
 
     // update symbol by re-rendering it
     function updateSymbol2(node, d, id) {
-      var o = internal.svg.importStyledLabel(d); // TODO: symbol support
+      var o = internal.svg.renderStyledLabel(d); // TODO: symbol support
       var activeLayer = hit.getHitTarget().layer;
       var xy = activeLayer.shapes[id][0];
       var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
@@ -8187,13 +8211,16 @@
     var styleIndex = {
           opacity: 'opacity',
           r: 'radius',
-          fill: 'fillColor',
-          stroke: 'strokeColor',
+          'fill': 'fillColor',
           'fill-pattern': 'fillPattern',
+          'fill-opacity': 'fillOpacity',
+          'stroke': 'strokeColor',
           'stroke-width': 'strokeWidth',
           'stroke-dasharray': 'lineDash',
           'stroke-opacity': 'strokeOpacity',
-          'fill-opacity': 'fillOpacity'
+          'stroke-linecap': 'lineCap',
+          'stroke-linejoin': 'lineJoin',
+          'stroke-miterlimit': 'miterLimit'
         },
         // array of field names of relevant svg display properties
         fields = getCanvasStyleFields(lyr).filter(function(f) {return f in styleIndex;}),
@@ -9033,14 +9060,17 @@
           // (tests on Chrome showed much faster rendering of 1px lines)
           strokeWidth = strokeWidth < 1 ? 1 : strokeWidth * pixRatio;
         }
-        ctx.lineCap = 'round';
-        ctx.lineJoin = 'round';
+        ctx.lineCap = style.lineCap || 'round';
+        ctx.lineJoin = style.lineJoin || 'round';
         ctx.lineWidth = strokeWidth * lineScale;
         ctx.strokeStyle = style.strokeColor;
         if (style.lineDash){
           ctx.lineCap = 'butt';
           ctx.setLineDash(style.lineDash.split(' '));
         }
+        if (style.miterLimit) {
+          ctx.miterLimit = style.miterLimit;
+        }
       }
 
       if (style.fillPattern) {
@@ -9214,12 +9244,14 @@
     function reposition(target, type, ext) {
       var container = el.findChild('.' + target.svg_id).node();
       var elements;
-      if (type == 'label' || type == 'symbol') {
-        elements = type == 'label' ? container.getElementsByTagName('text') :
-            El.findAll('.mapshaper-svg-symbol', container);
+      if (type == 'symbol') {
+        elements = El.findAll('.mapshaper-svg-symbol', container);
         repositionSymbols(elements, target.layer, ext);
       } else if (type == 'furniture') {
         repositionFurniture(container, target.layer, ext);
+      } else {
+        // container.getElementsByTagName('text')
+        error('Unsupported symbol type:', type);
       }
     }
 
@@ -9249,14 +9281,15 @@
         _svg.clear();
       }
       layers.forEach(function(lyr) {
-        var svgType = getSvgLayerType(lyr.layer);
-        if (!svgType || svgType == 'label') { // svg labels may have canvas dots
+        var isSvgLayer = internal.layerHasSvgSymbols(lyr.layer) || internal.layerHasLabels(lyr.layer);
+        //if (!svgType || svgType == 'label') { // svg labels may have canvas dots
+        if (!isSvgLayer) { // svg labels may have canvas dots
           drawCanvasLayer(lyr, _mainCanv);
         }
-        if (svgType && action == 'nav') {
-          _svg.reposition(lyr, svgType);
-        } else if (svgType) {
-          _svg.drawLayer(lyr, svgType);
+        if (isSvgLayer && action == 'nav') {
+          _svg.reposition(lyr, 'symbol');
+        } else if (isSvgLayer) {
+          _svg.drawLayer(lyr, 'symbol');
         }
       });
     };
@@ -9308,9 +9341,9 @@
 
     function getSvgLayerType(layer) {
       var type = null;
-      if (internal.layerHasLabels(layer)) {
-        type = 'label';
-      } else if (internal.layerHasSvgSymbols(layer)) {
+      if (internal.layerHasSvgSymbols(layer)) {
+        type = 'symbol'; // also label + symbol
+      } else if (internal.layerHasLabels(layer)) {
         type = 'symbol';
       }
       return type;
@@ -9729,6 +9762,10 @@
 
   function Basemap(gui, ext) {
     var menu = gui.container.findChild('.basemap-options');
+    // var hideBtn = new SimpleButton(menu.findChild('.hide-btn'));
+    var fadeBtn = new SimpleButton(menu.findChild('.fade-btn'));
+    var closeBtn = new SimpleButton(menu.findChild('.close-btn'));
+    var clearBtn = new SimpleButton(menu.findChild('.clear-btn'));
     var list = menu.findChild('.basemap-styles');
     var container = gui.container.findChild('.basemap-container');
     var basemapBtn = gui.container.findChild('.basemap-btn');
@@ -9740,6 +9777,7 @@
     var map;
     var activeStyle;
     var loading = false;
+    var faded = false;
 
     if (params) {
       init();
@@ -9750,11 +9788,35 @@
     function init() {
       gui.addMode('basemap', turnOn, turnOff, basemapBtn);
 
-      new SimpleButton(menu.findChild('.close-btn')).on('click', function() {
+      closeBtn.on('click', function() {
         gui.clearMode();
         turnOff();
       });
 
+      // hideBtn.on('mousedown', function() {
+      //   if (activeStyle) {
+      //     mapEl.css('visibility', 'hidden');
+      //     hidden = true;
+      //   }
+      // })
+      clearBtn.on('click', function() {
+        if (activeStyle) {
+          updateStyle(null);
+          updateButtons();
+        }
+      });
+      fadeBtn.on('click', function() {
+        if (faded) {
+          mapEl.css('opacity', 1);
+          faded = false;
+          fadeBtn.text('Fade');
+        } else if (activeStyle) {
+          mapEl.css('opacity', 0.35);
+          faded = true;
+          fadeBtn.text('Unfade');
+        }
+      });
+
       gui.on('map_click', function() {
         // close menu if user click on the map
         if (gui.getMode() == 'basemap') gui.clearMode();
@@ -9777,13 +9839,14 @@
       // gui.state.dark_basemap = style && style.dark || false;
       if (!style) {
         gui.map.setDisplayCRS(null);
-        hide();
+        refresh();
       } else if (map) {
         map.setStyle(style.url);
         refresh();
       } else {
         initMap();
       }
+
     }
 
     function updateButtons() {
@@ -9893,12 +9956,16 @@
     }
 
     function refresh() {
-      if (!enabled() || !map || loading || !activeStyle) return;
       var crs = gui.map.getDisplayCRS();
-      if (!crsIsUsable(crs)) {
+      var off = !crs || !enabled() || !map || loading || !activeStyle;
+      fadeBtn.active(!off);
+      clearBtn.active(!off);
+      if (off) {
         hide();
+        extentNote.hide();
         return;
       }
+
       if (!internal.isWebMercator(crs)) {
         gui.map.setDisplayCRS(internal.getCRS('webmercator'));
       }