mapshaper 0.5.94 → 0.5.97

package/package.json

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

package/www/mapshaper-gui.js

@@ -3728,24 +3728,36 @@
       this.addHistoryState(stashedUndo, redo);
     }, this);
 
-    // undo/redo vertex dragging
-    gui.on('vertex_dragstart', function(e) {
-      stashedUndo = this.makeVertexSetter(e.FID, e.vertex_ids);
-    }, this);
-
     gui.on('vertex_dragend', function(e) {
-      var redo = this.makeVertexSetter(e.FID, e.vertex_ids);
-      this.addHistoryState(stashedUndo, redo);
+      var target = gui.model.getActiveLayer();
+      var arcs = target.dataset.arcs;
+      var startPoint = e.points[0];
+      var endPoint = internal.getVertexCoords(e.ids[0], arcs);
+      var undo = function() {
+        if (e.insertion) {
+          internal.deleteVertex(arcs, e.ids[0]);
+        } else {
+          snapVerticesToPoint(e.ids, startPoint, arcs, true);
+        }
+      };
+      var redo = function() {
+        if (e.insertion) {
+          internal.insertVertex(arcs, e.ids[0], e.points[0]);
+        }
+        snapVerticesToPoint(e.ids, endPoint, arcs, true);
+      };
+      this.addHistoryState(undo, redo);
     }, this);
 
-    gui.on('vertex_insert', function(e) {
+    gui.on('vertex_delete', function(e) {
       var target = gui.model.getActiveLayer();
       var arcs = target.dataset.arcs;
-      var undo = function() {
+      var p = arcs.getVertex2(e.vertex_id);
+      var redo = function() {
         internal.deleteVertex(arcs, e.vertex_id);
       };
-      var redo = function() {
-        internal.insertVertex(arcs, e.vertex_id, e.coordinates);
+      var undo = function() {
+        internal.insertVertex(arcs, e.vertex_id, p);
       };
       this.addHistoryState(undo, redo);
     }, this);
@@ -3771,7 +3783,7 @@
       };
     };
 
-    this.makeVertexSetter = function(fid, ids) {
+    this.makeVertexSetter = function(ids) {
       var target = gui.model.getActiveLayer();
       var arcs = target.dataset.arcs;
       var p = internal.getVertexCoords(ids[0], arcs);
@@ -5611,14 +5623,11 @@
     }
 
      function vertexTest(x, y) {
-      var maxDist = getZoomAdjustedHitBuffer(20, 2),
-          bufDist = getZoomAdjustedHitBuffer(0.05), // tiny threshold for hitting almost-identical lines
+      var maxDist = getZoomAdjustedHitBuffer(25, 2),
           cands = findHitCandidates(x, y, maxDist);
       sortByDistance(x, y, cands, displayLayer.arcs);
-      cands = pickNearestCandidates(cands, bufDist, maxDist);
-      var arcs = cands.map(function(cand) { return absArcId(cand.info.arcId); });
+      cands = pickNearestCandidates(cands, 0, maxDist);
       return {
-        arcs: utils$1.uniq(arcs),
         ids: utils$1.pluck(cands, 'id')
       };
     }
@@ -6003,18 +6012,6 @@
       triggerHitEvent('change');
     };
 
-    self.setSelectedVertices = function(points) {
-      if (!active) return;
-      storedData.selected_points = points;
-      triggerHitEvent('change');
-    };
-
-    self.clearSelectedVertices = function() {
-      if (!storedData.selected_points) return;
-      delete storedData.selected_points;
-      triggerHitEvent('change');
-    };
-
     self.clearVertexOverlay = function() {
       if (!storedData.hit_coordinates) return;
       delete storedData.hit_coordinates;
@@ -6182,9 +6179,11 @@
         newData = noHitData();
         selectionIds = [];
       }
+
       if (!testHitChange(storedData, newData)) {
         return;
       }
+
       storedData = newData;
       gui.container.findChild('.map-layers').classed('symbol-hit', nonEmpty);
       if (active) {
@@ -7534,25 +7533,20 @@
     }
   }
 
+  // pointer thresholds for hovering near a vertex or segment midpoint
   var HOVER_THRESHOLD = 8;
-  var MIDPOINT_THRESHOLD = 12;
-
+  var MIDPOINT_THRESHOLD = 11;
 
   function initVertexDragging(gui, ext, hit) {
-    var activeShapeId = -1;
-    var draggedVertexIds = null;
-    var selectedVertexIds = null;
-    var activeMidpoint; // {point, segment}
+    var insertionPoint;
+    var dragInfo;
 
-    function active(e) {
-      return e.id > -1 && gui.interaction.getMode() == 'vertices';
+    function active() {
+      return gui.interaction.getMode() == 'vertices';
     }
 
-    function fire(type) {
-      gui.dispatchEvent(type, {
-        FID: activeShapeId,
-        vertex_ids: draggedVertexIds
-      });
+    function dragging() {
+      return active() && !!dragInfo;
     }
 
     function setHoverVertex(id) {
@@ -7562,7 +7556,6 @@
 
     function clearHoverVertex() {
       hit.clearVertexOverlay();
-      // gui.state.vertex_overlay = null;
     }
 
     function findDraggableVertices(e) {
@@ -7574,121 +7567,103 @@
       var dist = geom.distance2D(p[0], p[1], p2[0], p2[1]);
       var pixelDist = dist / ext.getPixelSize();
       if (pixelDist > HOVER_THRESHOLD) {
-        draggedVertexIds = null;
         return null;
       }
-      return nearestIds;
-    }
-
-    function insertMidpoint(v) {
-      var target = hit.getHitTarget();
-      internal.insertVertex(target.arcs, v.i, v.point);
+      var points = nearestIds.map(function(i) {return target.arcs.getVertex2(i);});
+      return {
+        ids: nearestIds,
+        points: points
+      };
     }
 
-    function toggleVertexSelection(ids) {
-      if (!ids || ids.length === 0) return;
-      if (!selectedVertexIds) {
-        selectedVertexIds = ids;
-      } else {
-        var intersection = utils$1.intersection(selectedVertexIds, ids);
-        var union = selectedVertexIds.concat(ids);
-        selectedVertexIds = utils$1.difference(union, intersection);
-      }
-      // get coordinates
+    function findVertexInsertionPoint(e) {
       var target = hit.getHitTarget();
-      var points = selectedVertexIds.map(function(id) { return target.arcs.getVertex2(id); });
-      hit.setSelectedVertices(points);
+      if (!target.arcs.isFlat()) return null; // vertex insertion not supported with simplification
+      var p = ext.translatePixelCoords(e.x, e.y);
+      var shp = target.layer.shapes[e.id];
+      var midpoint = findNearestMidpoint(p, shp, target.arcs);
+      if (!midpoint ||
+          midpoint.distance / ext.getPixelSize() > MIDPOINT_THRESHOLD) return null;
+      return midpoint;
     }
 
     hit.on('dragstart', function(e) {
-      if (!active(e)) return;
-      if (activeMidpoint) {
-        insertMidpoint(activeMidpoint);
-        draggedVertexIds = [activeMidpoint.i];
-        // TODO: combine vertex insertion undo/redo actions with
-        // vertex_dragend undo/redo actions
-        gui.dispatchEvent('vertex_insert', {
-          FID: activeShapeId,
-          vertex_id: activeMidpoint.i,
-          coordinates: activeMidpoint.point
-        });
-        activeMidpoint = null;
+      if (!active()) return;
+      if (insertionPoint) {
+        var target = hit.getHitTarget();
+        internal.insertVertex(target.arcs, insertionPoint.i, insertionPoint.point);
+        dragInfo = {
+          insertion: true,
+          ids: [insertionPoint.i],
+          points: [insertionPoint.point]
+        };
+        insertionPoint = null;
       } else {
-        draggedVertexIds = findDraggableVertices(e);
+        dragInfo = findDraggableVertices(e);
+      }
+      if (dragInfo) {
+        setHoverVertex(dragInfo.ids[0]);
       }
-      if (!draggedVertexIds) return;
-      setHoverVertex(draggedVertexIds[0]);
-      activeShapeId = e.id;
-      fire('vertex_dragstart');
     });
 
     hit.on('drag', function(e) {
-      if (!active(e) || !draggedVertexIds) return;
+      if (!dragging()) return;
       var target = hit.getHitTarget();
       var p = ext.translatePixelCoords(e.x, e.y);
       if (gui.keyboard.shiftIsPressed()) {
-        internal.snapPointToArcEndpoint(p, draggedVertexIds, target.arcs);
+        internal.snapPointToArcEndpoint(p, dragInfo.ids, target.arcs);
       }
-      internal.snapVerticesToPoint(draggedVertexIds, p, target.arcs);
-      setHoverVertex(draggedVertexIds[0]);
+      internal.snapVerticesToPoint(dragInfo.ids, p, target.arcs);
+      setHoverVertex(dragInfo.ids[0]);
       // redrawing the whole map updates the data layer as well as the overlay layer
       // gui.dispatchEvent('map-needs-refresh');
     });
 
     hit.on('dragend', function(e) {
-      if (!active(e) || !draggedVertexIds) return;
+      if (!dragging()) return;
       // kludge to get dataset to recalculate internal bounding boxes
       hit.getHitTarget().arcs.transformPoints(function() {});
       clearHoverVertex();
-
-
-
-      fire('vertex_dragend');
-      draggedVertexIds = null;
-      activeShapeId = -1;
-      // redraw data layer
+      gui.dispatchEvent('vertex_dragend', dragInfo);
       gui.dispatchEvent('map-needs-refresh');
+      dragInfo = null;
     });
 
-    // select clicked vertices
-    hit.on('click', function(e) {
-      if (!active(e)) return;
-      var vertices = findDraggableVertices(e); // same selection criteria as for dragging
-
-      // CASE: no draggable vertices
-      //   if selected vertices, deselect, else no-op
-      // CASE: draggable vertices
-      //   if vertex is arc endpoint, ignore
-      //   if vertex is selected, deselect
-      //   if vertex is not selected, select
-
-      // if (vertices) {
-      //   toggleVertexSelection(vertices);
-      // } else if (selectedVertexIds) {
-      //   toggleVertexSelection(selectedVertexIds);
-      // }
-
+    hit.on('dblclick', function(e) {
+      if (!active()) return;
+      var info = findDraggableVertices(e); // same selection criteria as for dragging
+      if (!info) return;
+      var target = hit.getHitTarget();
+      var vId = info.ids[0];
+      if (internal.vertexIsArcStart(vId, target.arcs) ||
+          internal.vertexIsArcEnd(vId, target.arcs)) {
+        // TODO: support removing arc endpoints
+        return;
+      }
+      gui.dispatchEvent('vertex_delete', {
+        vertex_id: vId
+      });
+      internal.deleteVertex(target.arcs, vId);
+      clearHoverVertex();
+      gui.dispatchEvent('map-needs-refresh');
     });
 
     // highlight hit vertex in path edit mode
     hit.on('hover', function(e) {
-      activeMidpoint = null;
-      if (!active(e) || draggedVertexIds) return; // no hover effect while dragging
-      var vertexIds = findDraggableVertices(e);
-      if (vertexIds) {
-        setHoverVertex(vertexIds[0]);
+      insertionPoint = null;
+      if (!active() || dragging()) return; // no hover effect while dragging
+      var info = findDraggableVertices(e);
+      if (info) {
+        // hovering near a vertex: highlight the vertex
+        setHoverVertex(info.ids[0]);
         return;
       }
-      var target = hit.getHitTarget();
-      // vertex insertion doesn't work yet with simplification applied
-      if (!target.arcs.isFlat()) return;
-      var shp = target.layer.shapes[e.id];
-      var p = ext.translatePixelCoords(e.x, e.y);
-      var midpoint = findNearestMidpoint(p, shp, target.arcs);
-      if (midpoint && midpoint.distance / ext.getPixelSize() < MIDPOINT_THRESHOLD) {
-        hit.setHoverVertex(midpoint.point);
-        activeMidpoint = midpoint;
+      // if hovering near a segment midpoint: show the midpoint and save midpoint info
+      insertionPoint = findVertexInsertionPoint(e);
+      if (insertionPoint) {
+        hit.setHoverVertex(insertionPoint.point);
       } else {
+        // pointer is not over a vertex: clear any hover effect
         clearHoverVertex();
       }
     }, null, 100);
@@ -7696,15 +7671,8 @@
 
 
   // Given a location @p (e.g. corresponding to the mouse pointer location),
-  // find the midpoint of two vertices on @shp suitable for inserting a new vertex,
-  // but only if:
-  //   1. point @p is closer to the midpoint than either adjacent vertex
-  //   2. the segment containing @p is longer than a minimum distance in pixels.
-  //
+  // find the midpoint of two vertices on @shp suitable for inserting a new vertex
   function findNearestMidpoint(p, shp, arcs) {
-    // var v1 = internal.findNearestVertex(p[0], p[1], shp, arcs);
-    // var v0 = internal.findAdjacentVertex(v1, shp, arcs, -1);
-    // var v2 = internal.findAdjacentVertex(v1, shp, arcs, 1);
     var minDist = Infinity, v;
     internal.forEachSegmentInShape(shp, arcs, function(i, j, xx, yy) {
       var x1 = xx[i],
@@ -7719,6 +7687,7 @@
         v = {
           i: (i < j ? i : j) + 1, // insertion point
           segment: [i, j],
+          segmentLen: geom.distance2D(x1, y1, x2, y2),
           point: [cx, cy],
           distance: dist
         };
@@ -7901,6 +7870,20 @@
     return style;
   }
 
+  // style for vertex edit mode
+  function getVertexStyle(lyr, o) {
+    return {
+      ids: o.ids,
+      overlay: true,
+      strokeColor: black,
+      strokeWidth: 1.5,
+      vertices: true,
+      vertex_overlay: o.hit_coordinates || null,
+      selected_points: o.selected_points || null,
+      fillColor: null
+    };
+  }
+
   // Returns a display style for the overlay layer.
   // The overlay layer renders several kinds of feature, each of which is displayed
   // with a different style.
@@ -7910,41 +7893,45 @@
   // * pinned shapes
   //
   function getOverlayStyle(lyr, o) {
+    if (o.mode == 'vertices') {
+      return getVertexStyle(lyr, o);
+    }
     var geomType = lyr.geometry_type;
     var topId = o.id; // pinned id (if pinned) or hover id
     var topIdx = -1;
     var styler = function(style, i) {
       utils$1.extend(style, i === topIdx ? topStyle: baseStyle);
-      // kludge to show vertices when editing path shapes
-      if (o.mode == 'vertices') {
-        style.vertices = true;
-        style.vertex_overlay = o.hit_coordinates || null;
-        style.selected_points = o.selected_points || null;
-        style.fillColor = null;
-      }
     };
     var baseStyle = getDefaultStyle(lyr, selectionStyles[geomType]);
     var topStyle;
     var ids = o.ids.filter(function(i) {
       return i != o.id; // move selected id to the end
     });
-    if (o.id > -1) {
+    if (o.id > -1) { // pinned or hover style
       topStyle = getSelectedFeatureStyle(lyr, o);
       topIdx = ids.length;
       ids.push(o.id); // put the pinned/hover feature last in the render order
     }
-    var overlayStyle = {
+    var style = {
       styler: styler,
       ids: ids,
       overlay: true
     };
+    // kludge to show vertices when editing path shapes
+    if (o.mode == 'vertices') {
+      style.vertices = true;
+      style.vertex_overlay = o.hit_coordinates || null;
+      style.selected_points = o.selected_points || null;
+      style.fillColor = null;
+    }
+
     if (layerHasCanvasDisplayStyle(lyr)) {
       if (geomType == 'point') {
-        overlayStyle.styler = getOverlayPointStyler(getCanvasDisplayStyle(lyr).styler, styler);
+        style.styler = getOverlayPointStyler(getCanvasDisplayStyle(lyr).styler, styler);
       }
-      overlayStyle.type = 'styled';
+      style.type = 'styled';
     }
-    return ids.length > 0 ? overlayStyle : null;
+    return ids.length > 0 ? style : null;
   }
 
   function getSelectedFeatureStyle(lyr, o) {
@@ -8392,9 +8379,10 @@
     _self.drawVertices = function(shapes, arcs, style, filter) {
       var iter = new internal.ShapeIter(arcs);
       var t = getScaledTransform(_ext);
+      var bounds = _ext.getBounds();
       var radius = (style.strokeWidth > 2 ? style.strokeWidth * 0.9 : 2) * GUI.getPixelRatio() * getScaledLineScale(_ext);
       var color = style.strokeColor || 'black';
-      var radius2 = radius * 1.7;
+
       var i, j, p;
       _ctx.beginPath();
       _ctx.fillStyle = color;
@@ -8404,6 +8392,7 @@
         for (j=0; j<shp.length; j++) {
           iter.init(shp[j]);
           while (iter.hasNext()) {
+            if (!bounds.containsPoint(iter.x, iter.y)) continue;
             drawCircle(iter.x * t.mx + t.bx, iter.y * t.my + t.by, radius, _ctx);
           }
         }
@@ -8411,21 +8400,10 @@
 
       if (style.vertex_overlay) {
         p = style.vertex_overlay;
-        drawCircle(p[0] * t.mx + t.bx, p[1] * t.my + t.by, radius2, _ctx);
+        drawCircle(p[0] * t.mx + t.bx, p[1] * t.my + t.by, radius * 1.5, _ctx);
       }
       _ctx.fill();
       _ctx.closePath();
-
-      if (style.selected_points) {
-        _ctx.beginPath();
-        _ctx.fillStyle = 'magenta';
-        for (i=0; i<style.selected_points.length; i++) {
-          p = style.selected_points[i];
-          drawCircle(p[0] * t.mx + t.bx, p[1] * t.my + t.by, radius2, _ctx);
-        }
-        _ctx.fill();
-        _ctx.closePath();
-      }
     };
 
     // Optimized to draw paths in same-style batches (faster Canvas drawing)