mapshaper 0.5.85 → 0.5.89

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();
@@ -229,6 +233,30 @@
     return parsed[0].options;
   };
 
+  // Convert an options object to a command line options string
+  // (used by gui-import-control.js)
+  // TODO: handle options with irregular string <-> object conversion
+  GUI.formatCommandOptions = function(o) {
+    var arr = [];
+    Object.keys(o).forEach(function(key) {
+      var name = key.replace(/_/g, '-');
+      var val = o[key];
+      var str;
+      // TODO: quote values that contain spaces
+      if (Array.isArray(val)) {
+        str = name + '=' + val.join(',');
+      } else if (val === true) {
+        str = name;
+      } else if (val === false) {
+        return;
+      } else {
+        str = name + '=' + val;
+      }
+      arr.push(str);
+    });
+    return arr.join(' ');
+  };
+
   // @file: Zip file
   // @cb: function(err, <files>)
   //
@@ -1027,6 +1055,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
@@ -1099,20 +1131,19 @@
 
   function ImportControl(gui, opts) {
     var model = gui.model;
+    var initialImport = true;
     var importCount = 0;
     var importTotal = 0;
     var overQuickView = false;
-    var useQuickView = opts.quick_view; // may be set by mapshaper-gui
     var queuedFiles = [];
     var manifestFiles = opts.files || [];
-    var cachedFiles = {};
     var catalog;
 
     if (opts.catalog) {
       catalog = new CatalogControl(gui, opts.catalog, downloadFiles);
     }
 
-    new SimpleButton('#import-buttons .submit-btn').on('click', onSubmit);
+    new SimpleButton('#import-buttons .submit-btn').on('click', importQueuedFiles);
     new SimpleButton('#import-buttons .cancel-btn').on('click', gui.clearMode);
     new DropControl(gui, 'body', receiveFiles);
     new FileChooser('#file-selection-btn', receiveFiles);
@@ -1120,7 +1151,7 @@
     new FileChooser('#add-file-btn', receiveFiles);
     initDropArea('#import-quick-drop', true);
     initDropArea('#import-drop');
-    gui.keyboard.onMenuSubmit(El('#import-options'), onSubmit);
+    gui.keyboard.onMenuSubmit(El('#import-options'), importQueuedFiles);
 
     gui.addMode('import', turnOn, turnOff);
     gui.enterMode('import');
@@ -1132,6 +1163,10 @@
       }
     });
 
+    function useQuickView() {
+      return initialImport && (opts.quick_view || overQuickView);
+    }
+
     function initDropArea(el, isQuick) {
       var area = El(el)
         .on('dragleave', onout)
@@ -1149,15 +1184,19 @@
       }
     }
 
-    function findMatchingShp(filename) {
-      // use case-insensitive matching
-      var base = internal.getPathBase(filename).toLowerCase();
-      return model.getDatasets().filter(function(d) {
-        var fname = d.info.input_files && d.info.input_files[0] || "";
-        var ext = internal.getFileExtension(fname).toLowerCase();
-        var base2 = internal.getPathBase(fname).toLowerCase();
-        return base == base2 && ext == 'shp';
-      });
+    async function importQueuedFiles() {
+      gui.container.removeClass('queued-files');
+      gui.container.removeClass('splash-screen');
+      var files = queuedFiles;
+      try {
+        if (files.length > 0) {
+          queuedFiles = [];
+          await importFiles(files);
+        }
+      } catch(e) {
+        console.error(e);
+      }
+      gui.clearMode();
     }
 
     function turnOn() {
@@ -1178,13 +1217,8 @@
         importCount = 0;
       }
       gui.clearProgressMessage();
-      useQuickView = false; // unset 'quick view' mode, if on
-      close();
-    }
-
-    function close() {
+      initialImport = false; // unset 'quick view' mode, if on
       clearQueuedFiles();
-      cachedFiles = {};
     }
 
     function onImportComplete() {
@@ -1218,34 +1252,6 @@
       }, []);
     }
 
-    // When a Shapefile component is at the head of the queue, move the entire
-    // Shapefile to the front of the queue, sorted in reverse alphabetical order,
-    // (a kludge), so .shp is read before .dbf and .prj
-    // (If a .dbf file is imported before a .shp, it becomes a separate dataset)
-    // TODO: import Shapefile parts without relying on this kludge
-    function sortQueue(queue) {
-      var nextFile = queue[0];
-      var basename, parts;
-      if (!isShapefilePart(nextFile.name)) {
-        return queue;
-      }
-      basename = internal.getFileBase(nextFile.name).toLowerCase();
-      parts = [];
-      queue = queue.filter(function(file) {
-        if (internal.getFileBase(file.name).toLowerCase() == basename) {
-          parts.push(file);
-          return false;
-        }
-        return true;
-      });
-      parts.sort(function(a, b) {
-        // Sorting on LC filename so Shapefiles with mixed-case
-        // extensions are sorted correctly
-        return a.name.toLowerCase() < b.name.toLowerCase() ? 1 : -1;
-      });
-      return parts.concat(queue);
-    }
-
     function showQueuedFiles() {
       var list = gui.container.findChild('.dropped-file-list').empty();
       queuedFiles.forEach(function(f) {
@@ -1253,16 +1259,14 @@
       });
     }
 
-    function receiveFiles(files) {
-      var prevSize = queuedFiles.length;
-      useQuickView = useQuickView || overQuickView;
-      files = handleZipFiles(utils.toArray(files));
-      addFilesToQueue(files);
+    async function receiveFiles(files) {
+      // TODO: show importing message here?
+      var expanded = await expandFiles(files);
+      addFilesToQueue(expanded);
       if (queuedFiles.length === 0) return;
       gui.enterMode('import');
-
-      if (useQuickView) {
-        onSubmit();
+      if (useQuickView()) {
+        importQueuedFiles();
       } else {
         gui.container.addClass('queued-files');
         El('#path-import-options').classed('hidden', !filesMayContainPaths(queuedFiles));
@@ -1270,25 +1274,51 @@
       }
     }
 
-    function filesMayContainPaths(files) {
-      return utils.some(files, function(f) {
-          var type = internal.guessInputFileType(f.name);
-          return type == 'shp' || type == 'json' || internal.isZipFile(f.name);
-      });
+    async function expandFiles(files) {
+      var files2 = [], expanded;
+      for (var f of files) {
+        if (internal.isZipFile(f.name)) {
+          expanded = await readZipFile(f);
+          files2 = files2.concat(expanded);
+        } else {
+          files2.push(f);
+        }
+      }
+      return files2;
     }
 
-    function onSubmit() {
-      gui.container.removeClass('queued-files');
-      gui.container.removeClass('splash-screen');
-      procNextQueuedFile();
+    async function importFiles(files) {
+      var fileData = await readFiles(files);
+      var importOpts = readImportOpts();
+      var groups = groupFilesForImport(fileData, importOpts);
+      for (var group of groups) {
+        if (group.size > 4e7) {
+          gui.showProgressMessage('Importing');
+          await wait(35);
+        }
+        importDataset(group, importOpts);
+      }
     }
 
-    function addDataset(dataset) {
-      if (!datasetIsEmpty(dataset)) {
-        model.addDataset(dataset);
-        importCount++;
+    function importDataset(group, importOpts) {
+      var optStr = GUI.formatCommandOptions(importOpts);
+      var dataset = internal.importContent(group, importOpts);
+      if (datasetIsEmpty(dataset)) return;
+      if (group.layername) {
+        dataset.layers.forEach(lyr => lyr.name = group.layername);
       }
-      procNextQueuedFile();
+      // save import options for use by repair control, etc.
+      dataset.info.import_options = importOpts;
+      model.addDataset(dataset);
+      importCount++;
+      gui.session.fileImported(group.filename, optStr);
+    }
+
+    function filesMayContainPaths(files) {
+      return utils.some(files, function(f) {
+          var type = internal.guessInputFileType(f.name);
+          return type == 'shp' || type == 'json' || internal.isZipFile(f.name);
+      });
     }
 
     function datasetIsEmpty(dataset) {
@@ -1297,41 +1327,27 @@
       });
     }
 
-    function procNextQueuedFile() {
-      if (queuedFiles.length === 0) {
-        gui.clearMode();
-      } else {
-        queuedFiles = sortQueue(queuedFiles);
-        readFile(queuedFiles.shift());
-      }
-    }
 
     // TODO: support .cpg
     function isShapefilePart(name) {
       return /\.(shp|shx|dbf|prj)$/i.test(name);
     }
 
-
     function readImportOpts() {
-      if (useQuickView) return {};
-      var freeform = El('#import-options .advanced-options').node().value,
-          opts = GUI.parseFreeformOptions(freeform, 'i');
-      opts.no_repair = !El("#repair-intersections-opt").node().checked;
-      opts.snap = !!El("#snap-points-opt").node().checked;
-      return opts;
-    }
-
-    // for CLI output
-    function readImportOptsAsString() {
-      if (useQuickView) return '';
-      var freeform = El('#import-options .advanced-options').node().value;
-      var opts = readImportOpts();
-      if (opts.snap) freeform = 'snap ' + freeform;
-      return freeform.trim();
+      var importOpts;
+      if (useQuickView()) {
+        importOpts = {}; // default opts using quickview
+      } else {
+        var freeform = El('#import-options .advanced-options').node().value;
+        importOpts = GUI.parseFreeformOptions(freeform, 'i');
+        importOpts.no_repair = !El("#repair-intersections-opt").node().checked;
+        importOpts.snap = !!El("#snap-points-opt").node().checked;
+      }
+      return importOpts;
     }
 
     // @file a File object
-    function readFile(file) {
+    async function readContentFileAsync(file, cb) {
       var name = file.name,
           reader = new FileReader(),
           useBinary = internal.isSupportedBinaryInputType(name) ||
@@ -1341,9 +1357,9 @@
 
       reader.addEventListener('loadend', function(e) {
         if (!reader.result) {
-          handleImportError("Web browser was unable to load the file.", name);
+          cb(new Error());
         } else {
-          importFileContent(name, reader.result);
+          cb(null, reader.result);
         }
       });
       if (useBinary) {
@@ -1354,91 +1370,6 @@
       }
     }
 
-    function importFileContent(fileName, content) {
-      var fileType = internal.guessInputType(fileName, content),
-          importOpts = readImportOpts(),
-          matches = findMatchingShp(fileName),
-          dataset, lyr;
-
-      // Add dbf data to a previously imported .shp file with a matching name
-      // (.shp should have been queued before .dbf)
-      if (fileType == 'dbf' && matches.length > 0) {
-        // find an imported .shp layer that is missing attribute data
-        // (if multiple matches, try to use the most recently imported one)
-        dataset = matches.reduce(function(memo, d) {
-          if (!d.layers[0].data) {
-            memo = d;
-          }
-          return memo;
-        }, null);
-        if (dataset) {
-          lyr = dataset.layers[0];
-          lyr.data = new internal.ShapefileTable(content, importOpts.encoding);
-          if (lyr.shapes && lyr.data.size() != lyr.shapes.length) {
-            stop("Different number of records in .shp and .dbf files");
-          }
-          if (!lyr.geometry_type) {
-            // kludge: trigger display of table cells if .shp has null geometry
-            // TODO: test case if lyr is not the current active layer
-            model.updated({});
-          }
-          procNextQueuedFile();
-          return;
-        }
-      }
-
-      if (fileType == 'shx') {
-        // save .shx for use when importing .shp
-        // (queue should be sorted so that .shx is processed before .shp)
-        cachedFiles[fileName.toLowerCase()] = {filename: fileName, content: content};
-        procNextQueuedFile();
-        return;
-      }
-
-      // Add .prj file to previously imported .shp file
-      if (fileType == 'prj') {
-        matches.forEach(function(d) {
-          if (!d.info.prj) {
-            d.info.prj = content;
-          }
-        });
-        procNextQueuedFile();
-        return;
-      }
-
-      importNewDataset(fileType, fileName, content, importOpts);
-    }
-
-    function importNewDataset(fileType, fileName, content, importOpts) {
-      var size = content.byteLength || content.length, // ArrayBuffer or string
-          delay = 0;
-
-      // show importing message if file is large
-      if (size > 4e7) {
-        gui.showProgressMessage('Importing');
-        delay = 35;
-      }
-      setTimeout(function() {
-        var dataset;
-        var input = {};
-        try {
-          input[fileType] = {filename: fileName, content: content};
-          if (fileType == 'shp') {
-            // shx file should already be cached, if it was added together with the shp
-            input.shx = cachedFiles[fileName.replace(/shp$/i, 'shx').toLowerCase()] || null;
-          }
-          dataset = internal.importContent(input, importOpts);
-          // save import options for use by repair control, etc.
-          dataset.info.import_options = importOpts;
-          gui.session.fileImported(fileName, readImportOptsAsString());
-          addDataset(dataset);
-
-        } catch(e) {
-          handleImportError(e, fileName);
-        }
-      }, delay);
-    }
-
     function handleImportError(e, fileName) {
       var msg = utils.isString(e) ? e : e.message;
       if (fileName) {
@@ -1449,34 +1380,6 @@
       console.error(e);
     }
 
-    function handleZipFiles(files) {
-      return files.filter(function(file) {
-        var isZip = internal.isZipFile(file.name);
-        if (isZip) {
-          importZipFile(file);
-        }
-        return !isZip;
-      });
-    }
-
-    function importZipFile(file) {
-      // gui.showProgressMessage('Importing');
-      setTimeout(function() {
-        GUI.readZipFile(file, function(err, files) {
-          if (err) {
-            handleImportError(err, file.name);
-          } else {
-            // don't try to import .txt files from zip files
-            // (these would be parsed as dsv and throw errows)
-            files = files.filter(function(f) {
-              return !/\.txt$/i.test(f.name);
-            });
-            receiveFiles(files);
-          }
-        });
-      }, 35);
-    }
-
     function prepFilesForDownload(names) {
       var items = names.map(function(name) {
         var isUrl = /:\/\//.test(name);
@@ -1522,37 +1425,107 @@
       });
     }
 
-    function downloadNextFile_v1(memo, item, next) {
-      var req = new XMLHttpRequest();
-      var blob;
-      req.responseType = 'blob';
-      req.addEventListener('load', function(e) {
-        if (req.status == 200) {
-          blob = req.response;
-        }
-      });
-      req.addEventListener('progress', function(e) {
-        if (!e.lengthComputable) return;
-        var pct = e.loaded / e.total;
-        if (catalog) catalog.progress(pct);
+    function wait(ms) {
+      return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+    function runAsync(fn, arg) {
+      return new Promise((resolve, reject) => {
+        fn(arg, function(err, data) {
+          return err ? reject(err) : resolve(data);
+        });
       });
-      req.addEventListener('loadend', function() {
-        var err;
-        if (req.status == 404) {
-          err = "Not&nbsp;found:&nbsp;" + item.name;
-        } else if (!blob) {
-          // Errors like DNS lookup failure, no CORS headers, no network connection
-          // all are status 0 - it seems impossible to show a more specific message
-          // actual reason is displayed on the console
-          err = "Error&nbsp;loading&nbsp;" + item.name + ". Possible causes include: wrong URL, no network connection, server not configured for cross-domain sharing (CORS).";
+    }
+
+    async function readZipFile(file) {
+      var files;
+      await wait(35); // pause a beat so status message can display
+      try {
+        files = await runAsync(GUI.readZipFile, file);
+        // don't try to import .txt files from zip files
+        // (these would be parsed as dsv and throw errows)
+        files = files.filter(function(f) {
+          return !/\.txt$/i.test(f.name);
+        });
+      } catch(e) {
+        handleImportError(e, file.name);
+        files = [];
+      }
+      return files;
+    }
+
+    async function readFileData(file) {
+      try {
+        var content = await runAsync(readContentFileAsync, file);
+        return {
+          content: content,
+          size: content.byteLength || content.length, // ArrayBuffer or string
+          name: file.name,
+          basename: internal.getFileBase(file.name).toLowerCase(),
+          type: internal.guessInputType(file.name, content)
+        };
+      } catch (e) {
+        handleImportError("Web browser was unable to load the file.", file.name);
+      }
+      return null;
+    }
+
+    async function readFiles(files) {
+      var data = [], d;
+      for (var file of files) {
+        d = await readFileData(file);
+        if (d) data.push(d);
+      }
+      return data;
+    }
+
+    function groupFilesForImport(data, importOpts) {
+      var names = importOpts.name ? [importOpts.name] : null;
+      if (initialImport && opts.name) { // name from mapshaper-gui --name option
+        names = opts.name.split(',');
+      }
+
+      function key(basename, type) {
+        return basename + '.' + type;
+      }
+      function hasShp(basename) {
+        var shpKey = key(basename, 'shp');
+        return data.some(d => key(d.basename, d.type) == shpKey);
+      }
+      data.forEach(d => {
+        if (d.type == 'shp' || !isShapefilePart(d.name)) {
+          d.group = key(d.basename, d.type);
+          d.filename = d.name;
+        } else if (hasShp(d.basename)) {
+          d.group = key(d.basename, 'shp');
+        } else if (d.type == 'dbf') {
+          d.filename = d.name;
+          d.group = key(d.basename, 'dbf');
         } else {
-          blob.name = item.basename;
-          memo.push(blob);
+          // shapefile part without a .shp file
+          d.group = null;
         }
-        next(err, memo);
       });
-      req.open('GET', item.url);
-      req.send();
+      var index = {};
+      var groups = [];
+      data.forEach(d => {
+        if (!d.group) return;
+        var g = index[d.group];
+        if (!g) {
+          g = {};
+          g.layername = names ? names[groups.length] || names[names.length - 1] : null;
+          groups.push(g);
+          index[d.group] = g;
+        }
+        g.size = (g.size || 0) + d.size; // accumulate size
+        g[d.type] = {
+          filename: d.name,
+          content: d.content
+        };
+        // kludge: stash import name for session history
+        if (d.filename) g.filename = d.filename;
+      });
+      return groups;
     }
   }
 
@@ -3395,7 +3368,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 +3547,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 +3825,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 +3937,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 +4012,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 +4445,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 +4603,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 +5648,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 +5866,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 +5888,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 +5950,7 @@
         if (e.mode != 'labels') {
           stopDragging();
         }
+        gui.undo.clear(); // TODO: put this elsewhere?
       });
 
       // down event on svg
@@ -5830,12 +5962,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 +5988,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 +6071,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 +6105,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 +6158,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 +6179,6 @@
       return dist <= 4 && elapsed < 300;
     }
 
-
-    // function deselectText(el) {
-    //   el.removeAttribute('class');
-    // }
-
-    // function selectText(el) {
-    //   el.setAttribute('class', 'selected');
-    // }
-
-
   }
 
   var darkStroke = "#334",
@@ -6151,7 +6222,7 @@
           dotSize: 2.5
         }, polyline: {
           strokeColor: black,
-          strokeWidth: 2.5
+          strokeWidth: 2.5,
         }
       },
       unselectedHoverStyles = {
@@ -6465,6 +6536,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 +6728,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 +6805,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 +6818,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 +6967,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 +7907,10 @@
       _mouse.disable();
     });
 
+    gui.on('map-needs-refresh', function() {
+      drawLayers();
+    });
+
     model.on('update', onUpdate);
 
     // Update display of segment intersections
@@ -7970,13 +8069,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 +8089,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 +8332,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) {
@@ -8318,6 +8417,7 @@
     opts.display_all = vars['display-all'] || vars.a || !!manifest.display_all;
     opts.quick_view = vars['quick-view'] || vars.q || !!manifest.quick_view;
     opts.target = vars.target || manifest.target || null;
+    opts.name = vars.name || manifest.name || null;
     return opts;
   }