mapshaper 0.5.84 → 0.5.88

package/package.json

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

package/www/mapshaper-gui.js

@@ -182,6 +182,10 @@
     return (el && (el.tagName == 'INPUT' || el.contentEditable == 'true')) ? el : null;
   };
 
+  GUI.textIsSelected = function() {
+    return !!GUI.getInputElement();
+  };
+
   GUI.selectElement = function(el) {
     var range = document.createRange(),
         sel = window.getSelection();
@@ -1027,6 +1031,10 @@
       var types = Array.from(e.clipboardData.types || []).join(',');
       var items = Array.from(e.clipboardData.items || []);
       var files;
+      if (GUI.textIsSelected()) {
+        // user is probably pasting text into an editable text field
+        return;
+      }
       block(e);
       // Browser compatibility (tested on MacOS only):
       // Chrome and Safari: full support
@@ -3395,7 +3403,7 @@
       GUI.onClick(entry, function() {
         var target = findLayerById(id);
         // don't select if user is typing or dragging
-        if (!GUI.getInputElement() && !dragging) {
+        if (!GUI.textIsSelected() && !dragging) {
           gui.clearMode();
           if (!map.isActiveLayer(target.layer)) {
             model.selectLayer(target.layer, target.dataset);
@@ -3574,6 +3582,153 @@
     }
   }
 
+  // import { cloneShape } from '../paths/mapshaper-shape-utils';
+  // import { copyRecord } from '../datatable/mapshaper-data-utils';
+  var snapVerticesToPoint$1 = internal.snapVerticesToPoint;
+  var cloneShape = internal.cloneShape;
+  var copyRecord = internal.copyRecord;
+
+  function Undo(gui) {
+    var history, offset, stashedUndo;
+    reset();
+
+    function reset() {
+      history = [];
+      stashedUndo = null;
+      offset = 0;
+    }
+
+
+    function isUndoEvt(e) {
+      return (e.ctrlKey || e.metaKey) && !e.shiftKey && e.key == 'z';
+    }
+
+    function isRedoEvt(e) {
+      return (e.ctrlKey || e.metaKey) && (e.shiftKey && e.key == 'z' || !e.shiftKey && e.key == 'y');
+    }
+
+    gui.keyboard.on('keydown', function(evt) {
+      var e = evt.originalEvent,
+          kc = e.keyCode;
+      if (isUndoEvt(e)) {
+        this.undo();
+        e.stopPropagation();
+        e.preventDefault();
+      }
+      if (isRedoEvt(e)) {
+        this.redo();
+        e.stopPropagation();
+        e.preventDefault();
+      }
+
+    }, this, 10);
+
+    // undo/redo point/symbol dragging
+    //
+    gui.on('symbol_dragstart', function(e) {
+      stashedUndo = this.makePointSetter(e.FID);
+    }, this);
+
+    gui.on('symbol_dragend', function(e) {
+      var redo = this.makePointSetter(e.FID);
+      this.addHistoryState(stashedUndo, redo);
+    }, this);
+
+    // undo/redo label dragging
+    //
+    gui.on('label_dragstart', function(e) {
+      stashedUndo = this.makeDataSetter(e.FID);
+    }, this);
+
+    gui.on('label_dragend', function(e) {
+      var redo = this.makeDataSetter(e.FID);
+      this.addHistoryState(stashedUndo, redo);
+    }, this);
+
+    // undo/redo data editing
+    // TODO: consider setting selected feature to the undo/redo target feature
+    //
+    gui.on('data_preupdate', function(e) {
+      stashedUndo = this.makeDataSetter(e.FID);
+    }, this);
+
+    gui.on('data_postupdate', function(e) {
+      var redo = this.makeDataSetter(e.FID);
+      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);
+    }, this);
+
+    this.clear = function() {
+      reset();
+    };
+
+    this.makePointSetter = function(i) {
+      var target = gui.model.getActiveLayer();
+      var shp = cloneShape(target.layer.shapes[i]);
+      return function() {
+        target.layer.shapes[i] = shp;
+      };
+    };
+
+    this.makeDataSetter = function(id) {
+      var target = gui.model.getActiveLayer();
+      var rec = copyRecord(target.layer.data.getRecordAt(id));
+      return function() {
+        target.layer.data.getRecords()[id] = rec;
+        gui.dispatchEvent('popup-needs-refresh');
+      };
+    };
+
+    this.makeVertexSetter = function(fid, ids) {
+      var target = gui.model.getActiveLayer();
+      var arcs = target.dataset.arcs;
+      var p = internal.getVertexCoords(ids[0], arcs);
+      return function() {
+        snapVerticesToPoint$1(ids, p, arcs, true);
+      };
+    };
+
+    this.addHistoryState = function(undo, redo) {
+      if (offset > 0) {
+        history.splice(-offset);
+        offset = 0;
+      }
+      history.push({undo, redo});
+    };
+
+    this.undo = function() {
+      var item = getHistoryItem();
+      if (item) {
+        offset++;
+        item.undo();
+        gui.dispatchEvent('map-needs-refresh');
+      }
+    };
+
+    this.redo = function() {
+      if (offset <= 0) return;
+      offset--;
+      var item = getHistoryItem();
+      item.redo();
+      gui.dispatchEvent('map-needs-refresh');
+    };
+
+    function getHistoryItem() {
+      var item = history[history.length - offset - 1];
+      return item || null;
+    }
+
+  }
+
   function SidebarButtons(gui) {
     var root = gui.container.findChild('.mshp-main-map');
     var buttons = El('div').addClass('nav-buttons').appendTo(root).hide();
@@ -3705,6 +3860,7 @@
 
     var menus = {
       standard: ['info', 'selection', 'data', 'box'],
+      polygons: ['info', 'selection', 'data', 'box', 'vertices'],
       lines: ['info', 'selection', 'data', 'box', 'vertices'],
       table: ['info', 'selection', 'data'],
       labels: ['info', 'selection', 'data', 'box', 'labels', 'location'],
@@ -3816,6 +3972,9 @@
       if (internal.layerHasPaths(o.layer) && o.layer.geometry_type == 'polyline') {
         return menus.lines;
       }
+      if (internal.layerHasPaths(o.layer) && o.layer.geometry_type == 'polygon') {
+        return menus.polygons;
+      }
       return menus.standard;
     }
 
@@ -3888,7 +4047,9 @@
     }
 
     function onModeChange() {
-      gui.dispatchEvent('interaction_mode_change', {mode: getInteractionMode()});
+      var mode = getInteractionMode();
+      gui.state.interaction_mode = mode;
+      gui.dispatchEvent('interaction_mode_change', {mode: mode});
     }
 
     // Update button highlight and selected menu item highlight (if any)
@@ -4319,7 +4480,7 @@
       }
 
       // ignore keypress if no feature is selected or user is editing text
-      if (pinnedId() == -1 || GUI.getInputElement()) return;
+      if (pinnedId() == -1 || GUI.textIsSelected()) return;
 
       if (e.keyCode == 37 || e.keyCode == 39) {
         // L/R arrow keys
@@ -4477,6 +4638,7 @@
 
     // Hits are re-detected on 'hover' (if hit detection is active)
     mouse.on('hover', function(e) {
+      handlePointerEvent(e);
       if (storedData.pinned || !hitTest || !active) return;
       if (e.hover && isOverMap(e)) {
         // mouse is hovering directly over map area -- update hit detection
@@ -5521,7 +5683,9 @@
         } else {
           // field content has changed
           strval = strval2;
+          gui.dispatchEvent('data_preupdate', {FID: currId}); // for undo/redo
           rec[key] = val2;
+          gui.dispatchEvent('data_postupdate', {FID: currId});
           input.value(strval);
           setFieldClass(el, val2, type);
           self.dispatchEvent('update', {field: key, value: val2, id: currId});
@@ -5737,6 +5901,8 @@
     rec[key] = isString ? String(newVal) : newVal;
   }
 
+  var snapVerticesToPoint = internal.snapVerticesToPoint;
+
   function getDisplayCoordsById(id, layer, ext) {
     var coords = getPointCoordsById(id, layer);
     return ext.translateCoords(coords[0], coords[1]);
@@ -5757,7 +5923,7 @@
   }
 
 
-  function SymbolDragging2(gui, ext, hit) {
+  function InteractiveEditor(gui, ext, hit) {
     // var targetTextNode; // text node currently being dragged
     var dragging = false;
     var activeRecord;
@@ -5819,6 +5985,7 @@
         if (e.mode != 'labels') {
           stopDragging();
         }
+        gui.undo.clear(); // TODO: put this elsewhere?
       });
 
       // down event on svg
@@ -5830,12 +5997,17 @@
       //    3: on other text -> stop dragging, select new text
 
       hit.on('dragstart', function(e) {
-        if (labelEditingEnabled()) {
-          onLabelDragStart(e);
+        if (e.id >= 0 === false) return;
+        if (labelEditingEnabled() && onLabelDragStart(e)) {
+          triggerGlobalEvent('label_dragstart', e);
+          startDragging();
         } else if (locationEditingEnabled()) {
-          onLocationDragStart(e);
+          triggerGlobalEvent('symbol_dragstart', e);
+          startDragging();
         } else if (vertexEditingEnabled()) {
           onVertexDragStart(e);
+          triggerGlobalEvent('vertex_dragstart', e);
+          startDragging();
         }
       });
 
@@ -5851,70 +6023,77 @@
 
       hit.on('dragend', function(e) {
         if (locationEditingEnabled()) {
-          onLocationDragEnd(e);
+          triggerGlobalEvent('symbol_dragend', e);
           stopDragging();
         } else if (labelEditingEnabled()) {
+          triggerGlobalEvent('label_dragend', e);
           stopDragging();
         } else if (vertexEditingEnabled()) {
-          onVertexDragEnd(e);
+          // kludge to get dataset to recalculate internal bounding boxes
+          hit.getHitTarget().arcs.transformPoints(function() {});
+          triggerGlobalEvent('vertex_dragend', e);
           stopDragging();
         }
       });
 
       hit.on('click', function(e) {
         if (labelEditingEnabled()) {
+          var target = hit.getHitTarget();
           onLabelClick(e);
         }
       });
 
-      function onLocationDragStart(e) {
-        if (e.id >= 0) {
-          dragging = true;
-          triggerGlobalEvent('symbol_dragstart', e);
+      // TODO: highlight hit vertex in path edit mode
+      if (false) hit.on('hover', function(e) {
+        if (vertexEditingEnabled() && !dragging) {
+          onVertexHover(e);
         }
+      }, null, 100);
+
+      function onVertexHover(e) {
+        // hovering in vertex edit mode: find vertex insertion point
+        var target = hit.getHitTarget();
+        var shp = target.layer.shapes[e.id];
+        var p = ext.translatePixelCoords(e.x, e.y);
+        var o = internal.findInsertionPoint(p, shp, target.arcs, ext.getPixelSize());
       }
 
-      function onVertexDragStart(e) {
-        if (e.id >= 0) {
-          dragging = true;
-        }
+
+      function getVertexEventData(e) {
+        return {
+          FID: activeId,
+          vertexIds: activeVertexIds
+        };
       }
 
       function onLocationDrag(e) {
         var lyr = hit.getHitTarget().layer;
-        var p = getPointCoordsById(e.id, hit.getHitTarget().layer);
+        var p = getPointCoordsById(e.id, lyr);
         if (!p) return;
         var diff = translateDeltaDisplayCoords(e.dx, e.dy, ext);
         p[0] += diff[0];
         p[1] += diff[1];
-        self.dispatchEvent('location_change'); // signal map to redraw
+        triggerRedraw();
         triggerGlobalEvent('symbol_drag', e);
       }
 
-      function onVertexDrag(e) {
+      function onVertexDragStart(e) {
         var target = hit.getHitTarget();
+        var shp = target.layer.shapes[e.id];
         var p = ext.translatePixelCoords(e.x, e.y);
-        if (!activeVertexIds) {
-          activeVertexIds = internal.findNearestVertices(p, target.layer.shapes[e.id], target.arcs);
-        }
+        activeVertexIds = internal.findNearestVertices(p, shp, target.arcs);
+        activeId = e.id;
+      }
+
+      function onVertexDrag(e) {
+        var target = hit.getHitTarget();
         if (!activeVertexIds) return; // ignore error condition
+        var p = ext.translatePixelCoords(e.x, e.y);
         if (gui.keyboard.shiftIsPressed()) {
           internal.snapPointToArcEndpoint(p, activeVertexIds, target.arcs);
         }
-        activeVertexIds.forEach(function(idx) {
-          internal.setVertexCoords(p[0], p[1], idx, target.arcs);
-        });
-        self.dispatchEvent('location_change'); // signal map to redraw
-      }
-
-      function onLocationDragEnd(e) {
-        triggerGlobalEvent('symbol_dragend', e);
-      }
-
-      function onVertexDragEnd(e) {
-        // kludge to get dataset to recalculate internal bounding boxes
-        hit.getHitTarget().arcs.transformPoints(function() {});
-        activeVertexIds = null;
+        snapVerticesToPoint(activeVertexIds, p, target.arcs);
+        triggerRedraw();
       }
 
       function onLabelClick(e) {
@@ -5927,11 +6106,19 @@
         }
       }
 
+      function triggerRedraw() {
+        gui.dispatchEvent('map-needs-refresh');
+      }
+
       function triggerGlobalEvent(type, e) {
-        if (e.id >= 0) {
-          // fire event to signal external editor that symbol coords have changed
-          gui.dispatchEvent(type, {FID: e.id, layer_name: hit.getHitTarget().layer.name});
-        }
+        if (e.id >= 0 === false) return;
+        var o = {
+          FID: e.id,
+          layer_name: hit.getHitTarget().layer.name,
+          vertex_ids: activeVertexIds
+        };
+        // fire event to signal external editor that symbol coords have changed
+        gui.dispatchEvent(type, o);
       }
 
       function getLabelRecordById(id) {
@@ -5953,11 +6140,11 @@
       function onLabelDragStart(e) {
         var textNode = getTextTarget3(e);
         var table = hit.getTargetDataTable();
-        if (!textNode || !table) return;
+        if (!textNode || !table) return false;
         activeId = e.id;
         activeRecord = getLabelRecordById(activeId);
-        dragging = true;
         downEvt = e;
+        return true;
       }
 
       function onLabelDrag(e) {
@@ -6006,88 +6193,17 @@
         }
         return el.tagName == 'text' ? el : null;
       }
+    }
 
-      // svg.addEventListener('mousedown', function(e) {
-      //   var textTarget = getTextTarget(e);
-      //   downEvt = e;
-      //   if (!textTarget) {
-      //     stopEditing();
-      //   } else if (!editing) {
-      //     // nop
-      //   } else if (textTarget == targetTextNode) {
-      //     startDragging();
-      //   } else {
-      //     startDragging();
-      //     editTextNode(textTarget);
-      //   }
-      // });
-
-      // up event on svg
-      // a: currently dragging text
-      //   -> stop dragging
-      // b: clicked on a text feature
-      //   -> start editing it
-
-
-      // svg.addEventListener('mouseup', function(e) {
-      //   var textTarget = getTextTarget(e);
-      //   var isClick = isClickEvent(e, downEvt);
-      //   if (isClick && textTarget && textTarget == targetTextNode &&
-      //       activeRecord && isMultilineLabel(targetTextNode)) {
-      //     toggleTextAlign(targetTextNode, activeRecord);
-      //     updateSymbol();
-      //   }
-      //   if (dragging) {
-      //     stopDragging();
-      //    } else if (isClick && textTarget) {
-      //     editTextNode(textTarget);
-      //   }
-      // });
-
-      // block dbl-click navigation when editing
-      // mouse.on('dblclick', function(e) {
-      //   if (editing) e.stopPropagation();
-      // }, null, eventPriority);
-
-      // mouse.on('dragstart', function(e) {
-      //   onLabelDrag(e);
-      // }, null, eventPriority);
-
-      // mouse.on('drag', function(e) {
-      //   var scale = ext.getSymbolScale() || 1;
-      //   onLabelDrag(e);
-      //   if (!dragging || !activeRecord) return;
-      //   applyDelta(activeRecord, 'dx', e.dx / scale);
-      //   applyDelta(activeRecord, 'dy', e.dy / scale);
-      //   if (!isMultilineLabel(targetTextNode)) {
-      //     // update anchor position of single-line labels based on label position
-      //     // relative to anchor point, for better placement when eventual display font is
-      //     // different from mapshaper's font.
-      //     updateTextAnchor(targetTextNode, activeRecord);
-      //   }
-      //   // updateSymbol(targetTextNode, activeRecord);
-      //   targetTextNode = updateSymbol2(targetTextNode, activeRecord, activeId);
-      // }, null, eventPriority);
-
-      // mouse.on('dragend', function(e) {
-      //   onLabelDrag(e);
-      //   stopDragging();
-      // }, null, eventPriority);
-
-
-      // function onLabelDrag(e) {
-      //   if (dragging) {
-      //     e.stopPropagation();
-      //   }
-      // }
+    function startDragging() {
+      dragging = true;
     }
 
     function stopDragging() {
       dragging = false;
       activeId = -1;
       activeRecord = null;
-      // targetTextNode = null;
-      // svg.removeAttribute('class');
+      activeVertexIds = null;
     }
 
     function isClickEvent(up, down) {
@@ -6098,16 +6214,6 @@
       return dist <= 4 && elapsed < 300;
     }
 
-
-    // function deselectText(el) {
-    //   el.removeAttribute('class');
-    // }
-
-    // function selectText(el) {
-    //   el.setAttribute('class', 'selected');
-    // }
-
-
   }
 
   var darkStroke = "#334",
@@ -6151,7 +6257,7 @@
           dotSize: 2.5
         }, polyline: {
           strokeColor: black,
-          strokeWidth: 2.5
+          strokeWidth: 2.5,
         }
       },
       unselectedHoverStyles = {
@@ -6465,6 +6571,7 @@
 
     this.maxScale = maxScale;
 
+    // Display scale, e.g. meters per pixel or degrees per pixel
     this.getPixelSize = function() {
       return 1 / this.getTransform().mx;
     };
@@ -6656,7 +6763,10 @@
     } else {
       arcs = getArcsForRendering(obj, ext);
       filter = getShapeFilter(arcs, ext);
-      canv.drawPathShapes(layer.shapes, arcs, style, filter);
+      canv.drawStyledPaths(layer.shapes, arcs, style, filter);
+      if (style.vertices) {
+        canv.drawVertices(layer.shapes, arcs, style, filter);
+      }
     }
   }
 
@@ -6730,7 +6840,7 @@
 
     /*
     // Original function, not optimized
-    _self.drawPathShapes = function(shapes, arcs, style) {
+    _self.drawStyledPaths = function(shapes, arcs, style) {
       var startPath = getPathStart(_ext),
           drawPath = getShapePencil(arcs, _ext),
           styler = style.styler || null;
@@ -6743,8 +6853,28 @@
     };
     */
 
+    _self.drawVertices = function(shapes, arcs, style, filter) {
+      var iter = new internal.ShapeIter(arcs);
+      var t = getScaledTransform(_ext);
+      var radius = (style.strokeWidth * 0.9 || 2.2) * GUI.getPixelRatio() * getScaledLineScale(_ext);
+      var color = style.strokeColor || 'black';
+      var shp;
+      _ctx.beginPath();
+      _ctx.fillStyle = color;
+      for (var i=0; i<shapes.length; i++) {
+        shp = shapes[i];
+        if (!shp || filter && !filter(shp)) continue;
+        iter.init(shp);
+        while (iter.hasNext()) {
+          drawCircle(iter.x * t.mx + t.bx, iter.y * t.my + t.by, radius, _ctx);
+        }
+      }
+      _ctx.fill();
+      _ctx.closePath();
+    };
+
     // Optimized to draw paths in same-style batches (faster Canvas drawing)
-    _self.drawPathShapes = function(shapes, arcs, style, filter) {
+    _self.drawStyledPaths = function(shapes, arcs, style, filter) {
       var styleIndex = {};
       var batchSize = 1500;
       var startPath = getPathStart(_ext, getScaledLineScale(_ext));
@@ -6872,7 +7002,7 @@
       }
     }
 
-    // TODO: consider using drawPathShapes(), which draws paths in batches
+    // TODO: consider using drawStyledPaths(), which draws paths in batches
     // for faster Canvas rendering. Downside: changes stacking order, which
     // is bad if circles are graduated.
     _self.drawPoints = function(shapes, style) {
@@ -7812,6 +7942,10 @@
       _mouse.disable();
     });
 
+    gui.on('map-needs-refresh', function() {
+      drawLayers();
+    });
+
     model.on('update', onUpdate);
 
     // Update display of segment intersections
@@ -7970,13 +8104,7 @@
         });
       }
 
-      if (true) { // TODO: add option to disable?
-        _editor = new SymbolDragging2(gui, _ext, _hit);
-        _editor.on('location_change', function(e) {
-          // TODO: look into optimizing, so only changed symbol is redrawn
-          drawLayers();
-        });
-      }
+      _editor = new InteractiveEditor(gui, _ext, _hit);
 
       _ext.on('change', function(e) {
         if (e.reset) return; // don't need to redraw map here if extent has been reset
@@ -7996,6 +8124,10 @@
     function updateOverlayLayer(e) {
       var style = getOverlayStyle(_activeLyr.layer, e);
       if (style) {
+        // kludge to show vertices when editing path shapes
+        if (gui.state.interaction_mode == 'vertices') {
+          style.vertices = true;
+        }
         _overlayLyr = utils.defaults({
           layer: filterLayerByIds(_activeLyr.layer, style.ids),
           style: style
@@ -8235,6 +8367,8 @@
     gui.map = new MshpMap(gui);
     gui.interaction = new InteractionMode(gui);
     gui.session = new SessionHistory(gui);
+    gui.undo = new Undo(gui);
+    gui.state = {};
 
     gui.showProgressMessage = function(msg) {
       if (!gui.progressMessage) {