mapshaper 0.6.99 → 0.6.100

package/package.json

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

package/www/mapshaper-gui.js

@@ -876,16 +876,36 @@
   };
 
   // Filter out delayed click events, e.g. so users can highlight and copy text
+  // Filter out context menu clicks
   GUI.onClick = function(el, cb) {
     var time;
     el.on('mousedown', function() {
       time = +new Date();
     });
     el.on('mouseup', function(e) {
-      if (+new Date() - time < 300) cb(e);
+      if (looksLikeContextClick(e)) {
+        return;
+      }
+      if (+new Date() - time < 300) {
+        cb(e);
+      }
+    });
+  };
+
+  GUI.onContextClick = function(el, cb) {
+    el.on('mouseup', function(e) {
+      if (looksLikeContextClick(e)) {
+        e.stopPropagation();
+        e.preventDefault();
+        cb(e);
+      }
     });
   };
 
+  function looksLikeContextClick(e) {
+    return e.button > 1 || e.ctrlKey;
+  }
+
   // tests if filename is a type that can be used
   // GUI.isReadableFileType = function(filename) {
   //   return !!internal.guessInputFileType(filename) || internal.couldBeDsvFile(filename) ||
@@ -5003,6 +5023,201 @@
     };
   }
 
+  var openMenu;
+
+  document.addEventListener('mousedown', function(e) {
+    if (e.target.classList.contains('contextmenu-item')) {
+      return; // don't close menu if clicking on a menu link
+    }
+    closeOpenMenu();
+  });
+
+  function closeOpenMenu() {
+    if (openMenu) {
+      openMenu.close();
+      openMenu = null;
+    }
+  }
+
+  function openContextMenu(e, lyr, parent) {
+    var menu = new ContextMenu(parent);
+    closeOpenMenu();
+    menu.open(e, lyr);
+  }
+
+  function ContextMenu(parentArg) {
+    var body = document.querySelector('body');
+    var parent = parentArg || body;
+    // var menu = El('div').addClass('contextmenu rollover').appendTo(body);
+    var menu = El('div').addClass('contextmenu rollover').appendTo(parent);
+    var _open = false;
+    var _openCount = 0;
+
+    this.isOpen = function() {
+      return _open;
+    };
+
+    this.close = close;
+
+    function close() {
+      var count = _openCount;
+      if (!_open) return;
+      setTimeout(function() {
+        if (count == _openCount) {
+          menu.hide();
+          _open = false;
+        }
+      }, 200);
+    }
+
+    function addMenuItem(label, func, prefixArg) {
+      var prefix = prefixArg === undefined ? '• &nbsp;' : prefixArg;
+      var item = El('div')
+        .appendTo(menu)
+        .addClass('contextmenu-item')
+        .html(prefix + label)
+        .show();
+
+      GUI.onClick(item, function(e) {
+        func();
+        closeOpenMenu();
+      });
+    }
+
+    function addMenuLabel(label) {
+      El('div')
+        .appendTo(menu)
+        .addClass('contextmenu-label')
+        .html(label);
+    }
+
+    this.open = function(e, lyr) {
+      var copyable = e.ids?.length;
+      if (_open) close();
+      menu.empty();
+
+      if (openMenu && openMenu != this) {
+        openMenu.close();
+      }
+      openMenu = this;
+
+      if (e.deleteLayer) {
+       addMenuItem('delete layer', e.deleteLayer, '');
+      }
+      if (e.selectLayer) {
+       addMenuItem('select layer', e.selectLayer, '');
+      }
+
+      if (lyr && lyr.gui.geographic) {
+        if (e.deleteVertex || e.deletePoint || copyable || e.deleteFeature) {
+
+          addMenuLabel('selection');
+          if (e.deleteVertex) {
+            addMenuItem('delete vertex', e.deleteVertex);
+          }
+          if (e.deletePoint) {
+            addMenuItem('delete point', e.deletePoint);
+          }
+          if (e.ids?.length) {
+            addMenuItem('copy as GeoJSON', copyGeoJSON);
+          }
+          if (e.deleteFeature) {
+            addMenuItem(getDeleteLabel(), e.deleteFeature);
+          }
+        }
+
+        if (e.lonlat_coordinates) {
+          addMenuLabel('longitude, latitude');
+          addCoords(e.lonlat_coordinates);
+        }
+        if (e.projected_coordinates) {
+          addMenuLabel('x, y');
+          addCoords(e.projected_coordinates);
+        }
+      }
+
+      if (menu.node().childNodes.length === 0) {
+        return;
+      }
+
+      var rspace = body.clientWidth - e.pageX;
+      var offs = getParentOffset();
+      var xoffs = 10;
+      if (rspace > 150) {
+        menu.css('left', e.pageX - offs.left + xoffs + 'px');
+        menu.css('right', null);
+      } else {
+        menu.css('right', (body.clientWidth - e.pageX - offs.left + xoffs) + 'px');
+        menu.css('left', null);
+      }
+      menu.css('top', (e.pageY - offs.top - 15) + 'px');
+      menu.show();
+
+      _open = true;
+      _openCount++;
+
+      function getParentOffset() { // crossbrowser version
+        if (parent == body) {
+          return {top: 0, left: 0};
+        }
+
+        var box = parent.getBoundingClientRect();
+        var docEl = document.documentElement;
+
+        var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
+        var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
+
+        var clientTop = docEl.clientTop || body.clientTop || 0;
+        var clientLeft = docEl.clientLeft || body.clientLeft || 0;
+
+        var top  = box.top +  scrollTop - clientTop;
+        var left = box.left + scrollLeft - clientLeft;
+
+        return { top: Math.round(top), left: Math.round(left) };
+      }
+
+      function getDeleteLabel() {
+        return 'delete ' + (lyr.geometry_type == 'point' ? 'point' : 'shape');
+      }
+
+      function addCoords(p) {
+        var coordStr = p[0] + ',' + p[1];
+        // var displayStr = '• &nbsp;' + coordStr.replace(/-/g, '–').replace(',', ', ');
+        var displayStr = coordStr.replace(/-/g, '–').replace(',', ', ');
+        addMenuItem(displayStr, function() {
+          saveFileContentToClipboard(coordStr);
+        });
+      }
+
+      function copyGeoJSON() {
+        var opts = {
+          no_replace: true,
+          ids: e.ids,
+          quiet: true
+        };
+        var dataset = lyr.gui.source.dataset;
+        var layer = mapshaper.cmd.filterFeatures(lyr, dataset.arcs, opts);
+        // the drawing tool can send open paths with 'polygon' geometry type,
+        // should be changed to 'polyline'
+        if (layer.geometry_type == 'polygon' && layerHasOpenPaths(layer, dataset.arcs)) {
+          layer.geometry_type = 'polyline';
+        }
+        var features = internal.exportLayerAsGeoJSON(layer, dataset, {rfc7946: true, prettify: true}, true, 'string');
+        var str = internal.geojson.formatCollection({"type": "FeatureCollection"}, features);
+        saveFileContentToClipboard(str);
+      }
+    };
+  }
+
+
+  function layerHasOpenPaths(layer, arcs) {
+    var retn = false;
+    internal.editShapes(layer.shapes, function(part) {
+      if (!geom.pathIsClosed(part, arcs)) retn = true;
+    });
+    return retn;
+  }
+
   function LayerControl(gui) {
     var model = gui.model;
     var map = gui.map;
@@ -5210,7 +5425,7 @@
       html = '<!-- ' + lyr.menu_id + '--><div class="' + classes + '">';
       html += rowHTML('name', '<span class="layer-name colored-text dot-underline">' + formatLayerNameForDisplay(lyr.name) + '</span>', 'row1');
       html += rowHTML('contents', describeLyr(lyr, dataset));
-      html += '<img class="close-btn" draggable="false" src="images/close.png">';
+      // html += '<img class="close-btn" draggable="false" src="images/close.png">';
       if (opts.pinnable) {
         html += '<img class="eye-btn black-eye" draggable="false" src="images/eye.png">';
         html += '<img class="eye-btn green-eye" draggable="false" src="images/eye2.png">';
@@ -5268,16 +5483,35 @@
     function initMouseEvents2(entry, id, pinnable) {
       initLayerDragging(entry, id);
 
-      // init delete button
-      GUI.onClick(entry.findChild('img.close-btn'), function(e) {
+      function deleteLayer() {
         var target = findLayerById(id);
-        e.stopPropagation();
         if (map.isVisibleLayer(target.layer)) {
           // TODO: check for double map refresh after model.deleteLayer() below
           setLayerPinning(target.layer, false);
         }
         model.deleteLayer(target.layer, target.dataset);
-      });
+      }
+
+      function selectLayer(closeMenu) {
+        var target = findLayerById(id);
+        // don't select if user is typing or dragging
+        if (GUI.textIsSelected() || dragging) return;
+        // undo any temporary hiding when layer is selected
+        target.layer.hidden = false;
+        if (!map.isActiveLayer(target.layer)) {
+          model.selectLayer(target.layer, target.dataset);
+        }
+        // close menu after a delay
+        if (closeMenu === true) setTimeout(function() {
+          gui.clearMode();
+        }, 230);
+      }
+
+      // init delete button
+      // GUI.onClick(entry.findChild('img.close-btn'), function(e) {
+      //   e.stopPropagation();
+      //   deleteLayer();
+      // });
 
       if (pinnable) {
         // init pin button
@@ -5324,18 +5558,15 @@
 
       // init click-to-select
       GUI.onClick(entry, function() {
-        var target = findLayerById(id);
-        // don't select if user is typing or dragging
-        if (GUI.textIsSelected() || dragging) return;
-        // undo any temporary hiding when layer is selected
-        target.layer.hidden = false;
-        if (!map.isActiveLayer(target.layer)) {
-          model.selectLayer(target.layer, target.dataset);
-        }
-        // close menu after a delay
-        setTimeout(function() {
-          gui.clearMode();
-        }, 230);
+        selectLayer(true);
+      });
+
+      GUI.onContextClick(entry, function(e) {
+        e.deleteLayer = deleteLayer;
+        e.selectLayer = selectLayer;
+        // contextMenu.open(e);
+        // openContextMenu(e, null, entry.node())
+        openContextMenu(e, null, null);
       });
     }
 
@@ -12964,139 +13195,6 @@ GUI and setting the size and crop of SVG output.</p><div><input type="text" clas
     });
   }
 
-  function ContextMenu() {
-    var body = document.querySelector('body');
-    var menu = El('div').addClass('contextmenu rollover').appendTo(body);
-    var _open = false;
-    var _openCount = 0;
-    document.addEventListener('mousedown', close);
-
-    this.isOpen = function() {
-      return _open;
-    };
-
-    function close() {
-      var count = _openCount;
-      if (!_open) return;
-      setTimeout(function() {
-        if (count == _openCount) {
-          menu.hide();
-          _open = false;
-        }
-      }, 200);
-    }
-
-    function addMenuItem(label, func) {
-      var prefix = '• &nbsp;';
-
-      El('div')
-        .appendTo(menu)
-        .addClass('contextmenu-item')
-        .html(prefix + label)
-        .on('click', func)
-        .show();
-    }
-
-    function addMenuLabel(label) {
-      El('div')
-        .appendTo(menu)
-        .addClass('contextmenu-label')
-        .html(label);
-    }
-
-    this.open = function(e, lyr) {
-      var copyable = e.ids?.length;
-      if (lyr && !lyr.gui.geographic) return; // no popup for tabular data
-      menu.empty();
-
-      // menu contents
-      //
-      if (e.deleteVertex || e.deletePoint || copyable || e.deleteFeature) {
-
-        addMenuLabel('selection');
-        if (e.deleteVertex) {
-          addMenuItem('delete vertex', e.deleteVertex);
-        }
-        if (e.deletePoint) {
-          addMenuItem('delete point', e.deletePoint);
-        }
-        if (e.ids?.length) {
-          addMenuItem('copy as GeoJSON', copyGeoJSON);
-        }
-        if (e.deleteFeature) {
-          addMenuItem(getDeleteLabel(), e.deleteFeature);
-        }
-      }
-
-      if (e.lonlat_coordinates) {
-        addMenuLabel('longitude, latitude');
-        addCoords(e.lonlat_coordinates);
-      }
-      if (e.projected_coordinates) {
-        addMenuLabel('x, y');
-        addCoords(e.projected_coordinates);
-      }
-
-      if (menu.node().childNodes.length === 0) {
-        return;
-      }
-
-      _open = true;
-      _openCount++;
-      var rspace = body.clientWidth - e.pageX;
-      var xoffs = 10;
-      if (rspace > 150) {
-        menu.css('left', e.pageX + xoffs + 'px');
-        menu.css('right', null);
-      } else {
-        menu.css('right', (body.clientWidth - e.pageX + xoffs) + 'px');
-        menu.css('left', null);
-      }
-      menu.css('top', (e.pageY - 15) + 'px');
-      menu.show();
-
-      function getDeleteLabel() {
-        return 'delete ' + (lyr.geometry_type == 'point' ? 'point' : 'shape');
-      }
-
-      function addCoords(p) {
-        var coordStr = p[0] + ',' + p[1];
-        // var displayStr = '• &nbsp;' + coordStr.replace(/-/g, '–').replace(',', ', ');
-        var displayStr = coordStr.replace(/-/g, '–').replace(',', ', ');
-        addMenuItem(displayStr, function() {
-          saveFileContentToClipboard(coordStr);
-        });
-      }
-
-      function copyGeoJSON() {
-        var opts = {
-          no_replace: true,
-          ids: e.ids,
-          quiet: true
-        };
-        var dataset = lyr.gui.source.dataset;
-        var layer = mapshaper.cmd.filterFeatures(lyr, dataset.arcs, opts);
-        // the drawing tool can send open paths with 'polygon' geometry type,
-        // should be changed to 'polyline'
-        if (layer.geometry_type == 'polygon' && layerHasOpenPaths(layer, dataset.arcs)) {
-          layer.geometry_type = 'polyline';
-        }
-        var features = internal.exportLayerAsGeoJSON(layer, dataset, {rfc7946: true, prettify: true}, true, 'string');
-        var str = internal.geojson.formatCollection({"type": "FeatureCollection"}, features);
-        saveFileContentToClipboard(str);
-      }
-    };
-  }
-
-
-  function layerHasOpenPaths(layer, arcs) {
-    var retn = false;
-    internal.editShapes(layer.shapes, function(part) {
-      if (!geom.pathIsClosed(part, arcs)) retn = true;
-    });
-    return retn;
-  }
-
   function loadScript(url, cb) {
     var script = document.createElement('script');
     script.onload = cb;