mapshaper 0.5.87 → 0.5.88

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,637 +3582,135 @@
     }
   }
 
-  function getSymbolNodeId(node) {
-    return parseInt(node.getAttribute('data-id'));
-  }
-
-  function getSvgSymbolTransform(xy, ext) {
-    var scale = ext.getSymbolScale();
-    var p = ext.translateCoords(xy[0], xy[1]);
-    return internal.svg.getTransform(p, scale);
-  }
+  // 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 repositionSymbols(elements, layer, ext) {
-    var el, idx, shp, p, displayOn, inView, displayBounds;
-    for (var i=0, n=elements.length; i<n; i++) {
-      el = elements[i];
-      idx = getSymbolNodeId(el);
-      shp = layer.shapes[idx];
-      if (!shp) continue;
-      p = shp[0];
-      // OPTIMIZATION: only display symbols that are in view
-      // quick-and-dirty hit-test: expand the extent rectangle by a percentage.
-      //   very large symbols will disappear before they're completely out of view
-      displayBounds = ext.getBounds(1.15);
-      displayOn = !el.hasAttribute('display') || el.getAttribute('display') == 'block';
-      inView = displayBounds.containsPoint(p[0], p[1]);
-      if (inView) {
-        if (!displayOn) el.setAttribute('display', 'block');
-        el.setAttribute('transform', getSvgSymbolTransform(p, ext));
-      } else {
-        if (displayOn) el.setAttribute('display', 'none');
-      }
+    function reset() {
+      history = [];
+      stashedUndo = null;
+      offset = 0;
     }
-  }
-
-  function renderSymbols(lyr, ext, type) {
-    var records = lyr.data.getRecords();
-    var symbols = lyr.shapes.map(function(shp, i) {
-      var d = records[i];
-      var obj = type == 'label' ? internal.svg.importStyledLabel(d) :
-          internal.svg.importSymbol(d['svg-symbol']);
-      if (!obj || !shp) return null;
-      obj.properties.transform = getSvgSymbolTransform(shp[0], ext);
-      obj.properties['data-id'] = i;
-      return obj;
-    });
-    var obj = internal.getEmptyLayerForSVG(lyr, {});
-    obj.children = symbols;
-    return internal.svg.stringify(obj);
-  }
-
-  function isMultilineLabel(textNode) {
-    return textNode.childNodes.length > 1;
-  }
 
-  function toggleTextAlign(textNode, rec) {
-    var curr = rec['text-anchor'] || 'middle';
-    var value = curr == 'middle' && 'start' || curr == 'start' && 'end' || 'middle';
-    updateTextAnchor(value, textNode, rec);
-  }
 
-  // Set an attribute on a <text> node and any child <tspan> elements
-  // (mapshaper's svg labels require tspans to have the same x and dx values
-  //  as the enclosing text node)
-  function setMultilineAttribute(textNode, name, value) {
-    var n = textNode.childNodes.length;
-    var i = -1;
-    var child;
-    textNode.setAttribute(name, value);
-    while (++i < n) {
-      child = textNode.childNodes[i];
-      if (child.tagName == 'tspan') {
-        child.setAttribute(name, value);
-      }
+    function isUndoEvt(e) {
+      return (e.ctrlKey || e.metaKey) && !e.shiftKey && e.key == 'z';
     }
-  }
 
-  function findSvgRoot(el) {
-    while (el && el.tagName != 'html' && el.tagName != 'body') {
-      if (el.tagName == 'svg') return el;
-      el = el.parentNode;
+    function isRedoEvt(e) {
+      return (e.ctrlKey || e.metaKey) && (e.shiftKey && e.key == 'z' || !e.shiftKey && e.key == 'y');
     }
-    return null;
-  }
-
-  // p: pixel coordinates of label anchor
-  function autoUpdateTextAnchor(textNode, rec, p) {
-    var svg = findSvgRoot(textNode);
-    var rect = textNode.getBoundingClientRect();
-    var labelCenterX = rect.left - svg.getBoundingClientRect().left + rect.width / 2;
-    var xpct = (labelCenterX - p[0]) / rect.width; // offset of label center from anchor center
-    var value = xpct < -0.25 && 'end' || xpct > 0.25 && 'start' || 'middle';
-    updateTextAnchor(value, textNode, rec);
-  }
 
-  // @value: optional position to set; if missing, auto-set
-  function updateTextAnchor(value, textNode, rec) {
-    var rect = textNode.getBoundingClientRect();
-    var width = rect.width;
-    var curr = rec['text-anchor'] || 'middle';
-    var xshift = 0;
+    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();
+      }
 
-    // console.log("anchor() curr:", curr, "xpct:", xpct, "left:", rect.left, "anchorX:", anchorX, "targ:", targ, "dx:", xshift)
-    if (curr == 'middle' && value == 'end' || curr == 'start' && value == 'middle') {
-      xshift = width / 2;
-    } else if (curr == 'middle' && value == 'start' || curr == 'end' && value == 'middle') {
-      xshift = -width / 2;
-    } else if (curr == 'start' && value == 'end') {
-      xshift = width;
-    } else if (curr == 'end' && value == 'start') {
-      xshift = -width;
-    }
-    if (xshift) {
-      rec['text-anchor'] = value;
-      applyDelta(rec, 'dx', Math.round(xshift));
-    }
-  }
+    }, this, 10);
 
-  // handle either numeric strings or numbers in fields
-  function applyDelta(rec, key, delta) {
-    var currVal = rec[key];
-    var isString = utils.isString(currVal);
-    var newVal = (+currVal + delta) || 0;
-    rec[key] = isString ? String(newVal) : newVal;
-  }
+    // undo/redo point/symbol dragging
+    //
+    gui.on('symbol_dragstart', function(e) {
+      stashedUndo = this.makePointSetter(e.FID);
+    }, this);
 
-  function getDisplayCoordsById(id, layer, ext) {
-    var coords = getPointCoordsById(id, layer);
-    return ext.translateCoords(coords[0], coords[1]);
-  }
+    gui.on('symbol_dragend', function(e) {
+      var redo = this.makePointSetter(e.FID);
+      this.addHistoryState(stashedUndo, redo);
+    }, this);
 
-  function snapVerticesToPoint(ids, p, arcs, final) {
-    ids.forEach(function(idx) {
-      internal.setVertexCoords(p[0], p[1], idx, arcs);
-    });
-    if (final) {
-      // kludge to get dataset to recalculate internal bounding boxes
-      arcs.transformPoints(function() {});
-    }
-  }
+    // undo/redo label dragging
+    //
+    gui.on('label_dragstart', function(e) {
+      stashedUndo = this.makeDataSetter(e.FID);
+    }, this);
 
-  function getPointCoordsById(id, layer) {
-    var coords = layer && layer.geometry_type == 'point' && layer.shapes[id];
-    if (!coords || coords.length != 1) {
-      return null;
-    }
-    return coords[0];
-  }
+    gui.on('label_dragend', function(e) {
+      var redo = this.makeDataSetter(e.FID);
+      this.addHistoryState(stashedUndo, redo);
+    }, this);
 
-  function translateDeltaDisplayCoords(dx, dy, ext) {
-    var a = ext.translatePixelCoords(0, 0);
-    var b = ext.translatePixelCoords(dx, dy);
-    return [b[0] - a[0], b[1] - a[1]];
-  }
+    // 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);
 
-  function SymbolDragging2(gui, ext, hit) {
-    // var targetTextNode; // text node currently being dragged
-    var dragging = false;
-    var activeRecord;
-    var activeId = -1;
-    var self = new EventDispatcher();
-    var activeVertexIds = null; // for vertex dragging
+    // undo/redo vertex dragging
+    gui.on('vertex_dragstart', function(e) {
+      stashedUndo = this.makeVertexSetter(e.FID, e.vertex_ids);
+    }, this);
 
-    initDragging();
+    gui.on('vertex_dragend', function(e) {
+      var redo = this.makeVertexSetter(e.FID, e.vertex_ids);
+      this.addHistoryState(stashedUndo, redo);
+    }, this);
 
-    return self;
+    this.clear = function() {
+      reset();
+    };
 
-    function labelEditingEnabled() {
-      return gui.interaction && gui.interaction.getMode() == 'labels' ? true : false;
-    }
+    this.makePointSetter = function(i) {
+      var target = gui.model.getActiveLayer();
+      var shp = cloneShape(target.layer.shapes[i]);
+      return function() {
+        target.layer.shapes[i] = shp;
+      };
+    };
 
-    function locationEditingEnabled() {
-      return gui.interaction && gui.interaction.getMode() == 'location' ? true : false;
-    }
+    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');
+      };
+    };
 
-    function vertexEditingEnabled() {
-      return gui.interaction && gui.interaction.getMode() == 'vertices' ? true : false;
-    }
+    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);
+      };
+    };
 
-    // update symbol by setting attributes
-    function updateSymbol(node, d) {
-      var a = d['text-anchor'];
-      if (a) node.setAttribute('text-anchor', a);
-      setMultilineAttribute(node, 'dx', d.dx || 0);
-      node.setAttribute('y', d.dy || 0);
-    }
-
-    // update symbol by re-rendering it
-    function updateSymbol2(node, d, id) {
-      var o = internal.svg.importStyledLabel(d); // TODO: symbol support
-      var activeLayer = hit.getHitTarget().layer;
-      var xy = activeLayer.shapes[id][0];
-      var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-      var node2;
-      o.properties.transform = getSvgSymbolTransform(xy, ext);
-      o.properties['data-id'] = id;
-      // o.properties['class'] = 'selected';
-      g.innerHTML = internal.svg.stringify(o);
-      node2 = g.firstChild;
-      node.parentNode.replaceChild(node2, node);
-      gui.dispatchEvent('popup-needs-refresh');
-      return node2;
-    }
-
-    function initDragging() {
-      var downEvt;
-      var eventPriority = 1;
-
-      // inspector and label editing aren't fully synced - stop editing if inspector opens
-      // gui.on('inspector_on', function() {
-      //   stopEditing();
-      // });
-
-      gui.on('interaction_mode_change', function(e) {
-        if (e.mode != 'labels') {
-          stopDragging();
-        }
-        gui.undo.clear(); // TODO: put this elsewhere?
-      });
-
-      // down event on svg
-      // a: off text
-      //    -> stop editing
-      // b: on text
-      //    1: not editing -> nop
-      //    2: on selected text -> start dragging
-      //    3: on other text -> stop dragging, select new text
-
-      hit.on('dragstart', function(e) {
-        if (e.id >= 0 === false) return;
-        if (labelEditingEnabled() && onLabelDragStart(e)) {
-          triggerGlobalEvent('label_dragstart', e);
-          startDragging();
-        } else if (locationEditingEnabled()) {
-          triggerGlobalEvent('symbol_dragstart', e);
-          startDragging();
-        } else if (vertexEditingEnabled()) {
-          onVertexDragStart(e);
-          triggerGlobalEvent('vertex_dragstart', e);
-          startDragging();
-        }
-      });
-
-      hit.on('drag', function(e) {
-        if (labelEditingEnabled()) {
-          onLabelDrag(e);
-        } else if (locationEditingEnabled()) {
-          onLocationDrag(e);
-        } else if (vertexEditingEnabled()) {
-          onVertexDrag(e);
-        }
-      });
-
-      hit.on('dragend', function(e) {
-        if (locationEditingEnabled()) {
-          triggerGlobalEvent('symbol_dragend', e);
-          stopDragging();
-        } else if (labelEditingEnabled()) {
-          triggerGlobalEvent('label_dragend', e);
-          stopDragging();
-        } else if (vertexEditingEnabled()) {
-          // 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()) {
-          onLabelClick(e);
-        }
-      });
-
-      function getVertexEventData(e) {
-        return {
-          FID: activeId,
-          vertexIds: activeVertexIds
-        };
-      }
-
-      function onLocationDrag(e) {
-        var lyr = 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
-        triggerGlobalEvent('symbol_drag', e);
-      }
-
-      function onVertexDragStart(e) {
-        var target = hit.getHitTarget();
-        var p = ext.translatePixelCoords(e.x, e.y);
-        activeVertexIds = internal.findNearestVertices(p, target.layer.shapes[e.id], 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);
-        }
-        snapVerticesToPoint(activeVertexIds, p, target.arcs);
-        self.dispatchEvent('location_change'); // signal map to redraw
-      }
-
-      function onLabelClick(e) {
-        var textNode = getTextTarget3(e);
-        var rec = getLabelRecordById(e.id);
-        if (textNode && rec && isMultilineLabel(textNode)) {
-          toggleTextAlign(textNode, rec);
-          updateSymbol2(textNode, rec, e.id);
-          // e.stopPropagation(); // prevent pin/unpin on popup
-        }
-      }
-
-      function triggerGlobalEvent(type, e) {
-        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) {
-        var table = hit.getTargetDataTable();
-        if (id >= 0 === false || !table) return null;
-        // add dx and dy properties, if not available
-        if (!table.fieldExists('dx')) {
-          table.addField('dx', 0);
-        }
-        if (!table.fieldExists('dy')) {
-          table.addField('dy', 0);
-        }
-        if (!table.fieldExists('text-anchor')) {
-          table.addField('text-anchor', '');
-        }
-        return table.getRecordAt(id);
-      }
-
-      function onLabelDragStart(e) {
-        var textNode = getTextTarget3(e);
-        var table = hit.getTargetDataTable();
-        if (!textNode || !table) return false;
-        activeId = e.id;
-        activeRecord = getLabelRecordById(activeId);
-        downEvt = e;
-        return true;
-      }
-
-      function onLabelDrag(e) {
-        var scale = ext.getSymbolScale() || 1;
-        var textNode;
-        if (!dragging) return;
-        if (e.id != activeId) {
-          error("Mismatched hit ids:", e.id, activeId);
-        }
-        applyDelta(activeRecord, 'dx', e.dx / scale);
-        applyDelta(activeRecord, 'dy', e.dy / scale);
-        textNode = getTextTarget3(e);
-        if (!isMultilineLabel(textNode)) {
-          // 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.
-          autoUpdateTextAnchor(textNode, activeRecord, getDisplayCoordsById(activeId, hit.getHitTarget().layer, ext));
-        }
-        // updateSymbol(targetTextNode, activeRecord);
-        updateSymbol2(textNode, activeRecord, activeId);
-      }
-
-      function getSymbolNodeById(id, parent) {
-        // TODO: optimize selector
-        var sel = '[data-id="' + id + '"]';
-        return parent.querySelector(sel);
-      }
-
-      function getTextTarget3(e) {
-        if (e.id > -1 === false || !e.container) return null;
-        return getSymbolNodeById(e.id, e.container);
-      }
-
-      function getTextTarget2(e) {
-        var el = e && e.targetSymbol || null;
-        if (el && el.tagName == 'tspan') {
-          el = el.parentNode;
-        }
-        return el && el.tagName == 'text' ? el : null;
-      }
-
-      function getTextTarget(e) {
-        var el = e.target;
-        if (el.tagName == 'tspan') {
-          el = el.parentNode;
-        }
-        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;
-      activeVertexIds = null;
-    }
-
-    function isClickEvent(up, down) {
-      var elapsed = Math.abs(down.timeStamp - up.timeStamp);
-      var dx = up.screenX - down.screenX;
-      var dy = up.screenY - down.screenY;
-      var dist = Math.sqrt(dx * dx + dy * dy);
-      return dist <= 4 && elapsed < 300;
-    }
-
-  }
-
-  // import { cloneShape } from '../paths/mapshaper-shape-utils';
-  // import { copyRecord } from '../datatable/mapshaper-data-utils';
-  var cloneShape = internal.cloneShape;
-  var copyRecord = internal.copyRecord;
-
-  function Undo(gui) {
-    var history, offset, stashedUndo;
-    reset();
-
-    function reset() {
-      history = [];
-      stashedUndo = null;
-      offset = 0;
-    }
-
-    function refreshMap() {
-      gui.dispatchEvent('undo_redo');
-    }
-
-    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 = arcs.getVertex2(ids[0]);
-      return function() {
-        snapVerticesToPoint(ids, p, arcs, true);
-      };
-    };
-
-    this.addHistoryState = function(undo, redo) {
-      if (offset > 0) {
-        history.splice(-offset);
-        offset = 0;
-      }
-      history.push({undo, redo});
-    };
+    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();
-        refreshMap();
+        gui.dispatchEvent('map-needs-refresh');
       }
     };
 
@@ -4213,7 +3719,7 @@
       offset--;
       var item = getHistoryItem();
       item.redo();
-      refreshMap();
+      gui.dispatchEvent('map-needs-refresh');
     };
 
     function getHistoryItem() {
@@ -4354,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'],
@@ -4465,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;
     }
 
@@ -4811,6 +4321,56 @@
     }
   }
 
+  function getSymbolNodeId(node) {
+    return parseInt(node.getAttribute('data-id'));
+  }
+
+  function getSvgSymbolTransform(xy, ext) {
+    var scale = ext.getSymbolScale();
+    var p = ext.translateCoords(xy[0], xy[1]);
+    return internal.svg.getTransform(p, scale);
+  }
+
+
+  function repositionSymbols(elements, layer, ext) {
+    var el, idx, shp, p, displayOn, inView, displayBounds;
+    for (var i=0, n=elements.length; i<n; i++) {
+      el = elements[i];
+      idx = getSymbolNodeId(el);
+      shp = layer.shapes[idx];
+      if (!shp) continue;
+      p = shp[0];
+      // OPTIMIZATION: only display symbols that are in view
+      // quick-and-dirty hit-test: expand the extent rectangle by a percentage.
+      //   very large symbols will disappear before they're completely out of view
+      displayBounds = ext.getBounds(1.15);
+      displayOn = !el.hasAttribute('display') || el.getAttribute('display') == 'block';
+      inView = displayBounds.containsPoint(p[0], p[1]);
+      if (inView) {
+        if (!displayOn) el.setAttribute('display', 'block');
+        el.setAttribute('transform', getSvgSymbolTransform(p, ext));
+      } else {
+        if (displayOn) el.setAttribute('display', 'none');
+      }
+    }
+  }
+
+  function renderSymbols(lyr, ext, type) {
+    var records = lyr.data.getRecords();
+    var symbols = lyr.shapes.map(function(shp, i) {
+      var d = records[i];
+      var obj = type == 'label' ? internal.svg.importStyledLabel(d) :
+          internal.svg.importSymbol(d['svg-symbol']);
+      if (!obj || !shp) return null;
+      obj.properties.transform = getSvgSymbolTransform(shp[0], ext);
+      obj.properties['data-id'] = i;
+      return obj;
+    });
+    var obj = internal.getEmptyLayerForSVG(lyr, {});
+    obj.children = symbols;
+    return internal.svg.stringify(obj);
+  }
+
   function getSvgHitTest(displayLayer) {
 
     return function(pointerEvent) {
@@ -4920,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
@@ -5078,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
@@ -5728,541 +5289,931 @@
       });
     }
 
-    gui.on('map_reset', function() {
-      ext.home();
+    gui.on('map_reset', function() {
+      ext.home();
+    });
+
+    zoomTween.on('change', function(e) {
+      ext.zoomToExtent(e.value, _fx, _fy);
+    });
+
+    mouse.on('dblclick', function(e) {
+      if (disabled()) return;
+      zoomByPct(getZoomInPct(), e.x / ext.width(), e.y / ext.height());
+    });
+
+    mouse.on('dragstart', function(e) {
+      if (disabled()) return;
+      if (!internal.layerHasGeometry(gui.model.getActiveLayer().layer)) return;
+      // zoomDrag = !!e.metaKey || !!e.ctrlKey; // meta is command on mac, windows key on windows
+      boxDrag = !!e.shiftKey;
+      if (boxDrag) {
+        dragStartEvt = e;
+        gui.dispatchEvent('box_drag_start');
+      }
+    });
+
+    mouse.on('drag', function(e) {
+      if (disabled()) return;
+      if (boxDrag) {
+        gui.dispatchEvent('box_drag', getBoxData(e));
+      } else {
+        ext.pan(e.dx, e.dy);
+      }
+    });
+
+    mouse.on('dragend', function(e) {
+      var bbox;
+      if (disabled()) return;
+      if (boxDrag) {
+        boxDrag = false;
+        gui.dispatchEvent('box_drag_end', getBoxData(e));
+      }
+    });
+
+    wheel.on('mousewheel', function(e) {
+      var tickFraction = 0.11; // 0.15; // fraction of zoom step per wheel event;
+      var k = 1 + (tickFraction * e.multiplier * zoomScaleMultiplier),
+          delta = e.direction > 0 ? k : 1 / k;
+      if (disabled()) return;
+      ext.zoomByPct(delta, e.x / ext.width(), e.y / ext.height());
+    });
+
+    function swapElements(arr, i, j) {
+      var tmp = arr[i];
+      arr[i] = arr[j];
+      arr[j] = tmp;
+    }
+
+    function getBoxData(e) {
+      var pageBox = [e.pageX, e.pageY, dragStartEvt.pageX, dragStartEvt.pageY];
+      var mapBox = [e.x, e.y, dragStartEvt.x, dragStartEvt.y];
+      var tmp;
+      if (pageBox[0] > pageBox[2]) {
+        swapElements(pageBox, 0, 2);
+        swapElements(mapBox, 0, 2);
+      }
+      if (pageBox[1] > pageBox[3]) {
+        swapElements(pageBox, 1, 3);
+        swapElements(mapBox, 1, 3);
+      }
+      return {
+        map_bbox: mapBox,
+        page_bbox: pageBox
+      };
+    }
+
+    function disabled() {
+      return !!gui.options.disableNavigation;
+    }
+
+    function zoomIn(e) {
+      if (disabled()) return;
+      zoomByPct(getZoomInPct(e.time), 0.5, 0.5);
+    }
+
+    function zoomOut(e) {
+      if (disabled()) return;
+      zoomByPct(1/getZoomInPct(e.time), 0.5, 0.5);
+    }
+
+    function getZoomInPct(clickTime) {
+      var minScale = 0.2,
+          maxScale = 4,
+          minTime = 100,
+          maxTime = 800,
+          time = utils.clamp(clickTime || 200, minTime, maxTime),
+          k = (time - minTime) / (maxTime - minTime),
+          scale = minScale + k * (maxScale - minScale);
+      return 1 + scale * zoomScaleMultiplier;
+    }
+
+    // @box Bounds with pixels from t,l corner of map area.
+    function zoomToBbox(bbox) {
+      var bounds = new Bounds(bbox),
+          pct = Math.max(bounds.width() / ext.width(), bounds.height() / ext.height()),
+          fx = bounds.centerX() / ext.width() * (1 + pct) - pct / 2,
+          fy = bounds.centerY() / ext.height() * (1 + pct) - pct / 2;
+      zoomByPct(1 / pct, fx, fy);
+    }
+
+    // @pct Change in scale (2 = 2x zoom)
+    // @fx, @fy zoom focus, [0, 1]
+    function zoomByPct(pct, fx, fy) {
+      var w = ext.getBounds().width();
+      _fx = fx;
+      _fy = fy;
+      zoomTween.start(w, w / pct, 400);
+    }
+  }
+
+  function HighlightBox() {
+    var box = El('div').addClass('zoom-box').appendTo('body'),
+        show = box.show.bind(box), // original show() function
+        stroke = 2;
+    box.hide();
+    box.show = function(x1, y1, x2, y2) {
+      var w = Math.abs(x1 - x2),
+          h = Math.abs(y1 - y2);
+      box.css({
+        top: Math.min(y1, y2),
+        left: Math.min(x1, x2),
+        width: Math.max(w - stroke * 2, 1),
+        height: Math.max(h - stroke * 2, 1)
+      });
+      show();
+    };
+    return box;
+  }
+
+  function SelectionTool(gui, ext, hit) {
+    var popup = gui.container.findChild('.selection-tool-options');
+    var box = new HighlightBox();
+    var _on = false;
+
+    gui.addMode('selection_tool', turnOn, turnOff);
+
+    gui.on('interaction_mode_change', function(e) {
+      if (e.mode === 'selection') {
+        gui.enterMode('selection_tool');
+      } else if (gui.getMode() == 'selection_tool') {
+        gui.clearMode();
+      }
+    });
+
+    gui.on('box_drag', function(e) {
+      if (!_on) return;
+      var b = e.page_bbox;
+      box.show(b[0], b[1], b[2], b[3]);
+      updateSelection(e.map_bbox, true);
+    });
+
+    gui.on('box_drag_end', function(e) {
+      if (!_on) return;
+      box.hide();
+      updateSelection(e.map_bbox);
+    });
+
+    function updateSelection(bboxPixels, transient) {
+      var bbox = bboxToCoords(bboxPixels);
+      var active = gui.model.getActiveLayer();
+      var ids = internal.findShapesIntersectingBBox(bbox, active.layer, active.dataset.arcs);
+      if (transient) {
+        hit.setTransientIds(ids);
+      } else if (ids.length) {
+        hit.addSelectionIds(ids);
+      }
+    }
+
+    function turnOn() {
+      _on = true;
+    }
+
+    function bboxToCoords(bbox) {
+      var a = ext.translatePixelCoords(bbox[0], bbox[1]);
+      var b = ext.translatePixelCoords(bbox[2], bbox[3]);
+      return [a[0], b[1], b[0], a[1]];
+    }
+
+    function turnOff() {
+      reset();
+      _on = false;
+      if (gui.interaction.getMode() == 'selection') {
+        // mode change was not initiated by interactive menu -- turn off interactivity
+        gui.interaction.turnOff();
+      }
+    }
+
+    function reset() {
+      popup.hide();
+      hit.clearSelection();
+    }
+
+    function getIdsOpt() {
+      return hit.getSelectionIds().join(',');
+    }
+
+    hit.on('change', function(e) {
+      if (e.mode != 'selection') return;
+      var ids = hit.getSelectionIds();
+      if (ids.length > 0) {
+        // enter this mode when we're ready to show the selection options
+        // (this closes any other active mode, e.g. box_tool)
+        gui.enterMode('selection_tool');
+        popup.show();
+      } else {
+        popup.hide();
+      }
+    });
+
+    new SimpleButton(popup.findChild('.delete-btn')).on('click', function() {
+      var cmd = '-filter invert ids=' + getIdsOpt();
+      runCommand(cmd);
+    });
+
+    new SimpleButton(popup.findChild('.filter-btn')).on('click', function() {
+      var cmd = '-filter ids=' + getIdsOpt();
+      runCommand(cmd);
     });
 
-    zoomTween.on('change', function(e) {
-      ext.zoomToExtent(e.value, _fx, _fy);
+    new SimpleButton(popup.findChild('.split-btn')).on('click', function() {
+      var cmd = '-split ids=' + getIdsOpt();
+      runCommand(cmd);
     });
 
-    mouse.on('dblclick', function(e) {
-      if (disabled()) return;
-      zoomByPct(getZoomInPct(), e.x / ext.width(), e.y / ext.height());
+    new SimpleButton(popup.findChild('.cancel-btn')).on('click', function() {
+      hit.clearSelection();
     });
 
-    mouse.on('dragstart', function(e) {
-      if (disabled()) return;
-      if (!internal.layerHasGeometry(gui.model.getActiveLayer().layer)) return;
-      // zoomDrag = !!e.metaKey || !!e.ctrlKey; // meta is command on mac, windows key on windows
-      boxDrag = !!e.shiftKey;
-      if (boxDrag) {
-        dragStartEvt = e;
-        gui.dispatchEvent('box_drag_start');
-      }
+    function runCommand(cmd) {
+      popup.hide();
+      if (gui.console) gui.console.runMapshaperCommands(cmd, function(err) {
+        reset();
+      });
+    }
+  }
+
+  // toNext, toPrev: trigger functions for switching between multiple records
+  function Popup(gui, toNext, toPrev) {
+    var self = new EventDispatcher();
+    var parent = gui.container.findChild('.mshp-main-map');
+    var el = El('div').addClass('popup').appendTo(parent).hide();
+    var content = El('div').addClass('popup-content').appendTo(el);
+    // multi-hit display and navigation
+    var tab = El('div').addClass('popup-tab').appendTo(el).hide();
+    var nav = El('div').addClass('popup-nav').appendTo(tab);
+    var prevLink = El('span').addClass('popup-nav-arrow colored-text').appendTo(nav).text('◀');
+    var navInfo = El('span').addClass('popup-nav-info').appendTo(nav);
+    var nextLink = El('span').addClass('popup-nav-arrow colored-text').appendTo(nav).text('▶');
+    var refresh = null;
+    var currId = -1;
+
+    el.addClass('rollover'); // used as a sentinel for the hover function
+
+    nextLink.on('click', toNext);
+    prevLink.on('click', toPrev);
+    gui.on('popup-needs-refresh', function() {
+      if (refresh) refresh();
     });
 
-    mouse.on('drag', function(e) {
-      if (disabled()) return;
-      if (boxDrag) {
-        gui.dispatchEvent('box_drag', getBoxData(e));
+    self.show = function(id, ids, lyr, pinned) {
+      var table = lyr.data; // table can be null (e.g. if layer has no attribute data)
+      var editable = pinned && gui.interaction.getMode() == 'data';
+      var maxHeight = parent.node().clientHeight - 36;
+      currId = id;
+      // stash a function for refreshing the current popup when data changes
+      // while the popup is being displayed (e.g. while dragging a label)
+      refresh = function() {
+        var rec = table && (editable ? table.getRecordAt(id) : table.getReadOnlyRecordAt(id)) || {};
+        render(content, rec, table, editable);
+      };
+      refresh();
+      if (ids && ids.length > 1) {
+        showNav(id, ids, pinned);
       } else {
-        ext.pan(e.dx, e.dy);
+        tab.hide();
       }
-    });
-
-    mouse.on('dragend', function(e) {
-      var bbox;
-      if (disabled()) return;
-      if (boxDrag) {
-        boxDrag = false;
-        gui.dispatchEvent('box_drag_end', getBoxData(e));
+      el.show();
+      if (content.node().clientHeight > maxHeight) {
+        content.css('height:' + maxHeight + 'px');
       }
-    });
+    };
 
-    wheel.on('mousewheel', function(e) {
-      var tickFraction = 0.11; // 0.15; // fraction of zoom step per wheel event;
-      var k = 1 + (tickFraction * e.multiplier * zoomScaleMultiplier),
-          delta = e.direction > 0 ? k : 1 / k;
-      if (disabled()) return;
-      ext.zoomByPct(delta, e.x / ext.width(), e.y / ext.height());
-    });
+    self.hide = function() {
+      if (!isOpen()) return;
+      refresh = null;
+      currId = -1;
+      // make sure any pending edits are made before re-rendering popup
+      GUI.blurActiveElement(); // this should be more selective -- could cause a glitch if typing in console
+      content.empty();
+      content.node().removeAttribute('style'); // remove inline height
+      el.hide();
+    };
 
-    function swapElements(arr, i, j) {
-      var tmp = arr[i];
-      arr[i] = arr[j];
-      arr[j] = tmp;
+    return self;
+
+    function isOpen() {
+      return el.visible();
     }
 
-    function getBoxData(e) {
-      var pageBox = [e.pageX, e.pageY, dragStartEvt.pageX, dragStartEvt.pageY];
-      var mapBox = [e.x, e.y, dragStartEvt.x, dragStartEvt.y];
-      var tmp;
-      if (pageBox[0] > pageBox[2]) {
-        swapElements(pageBox, 0, 2);
-        swapElements(mapBox, 0, 2);
-      }
-      if (pageBox[1] > pageBox[3]) {
-        swapElements(pageBox, 1, 3);
-        swapElements(mapBox, 1, 3);
+    function showNav(id, ids, pinned) {
+      var num = ids.indexOf(id) + 1;
+      navInfo.text(' ' + num + ' / ' + ids.length + ' ');
+      nextLink.css('display', pinned ? 'inline-block' : 'none');
+      prevLink.css('display', pinned && ids.length > 2 ? 'inline-block' : 'none');
+      tab.show();
+    }
+
+    function render(el, rec, table, editable) {
+      var tableEl = El('table').addClass('selectable'),
+          rows = 0;
+      // self.hide(); // clean up if panel is already open
+      el.empty(); // clean up if panel is already open
+      utils.forEachProperty(rec, function(v, k) {
+        var type;
+        // missing GeoJSON fields are set to undefined on import; skip these
+        if (v !== undefined) {
+          type = getFieldType(v, k, table);
+          renderRow(tableEl, rec, k, type, editable);
+          rows++;
+        }
+      });
+
+      if (rows > 0) {
+        tableEl.appendTo(el);
+
+        tableEl.on('copy', function(e) {
+          // remove leading or trailing tabs that sometimes get copied when
+          // selecting from a table
+          var pasted = window.getSelection().toString();
+          var cleaned = pasted.replace(/^\t/, '').replace(/\t$/, '');
+          if (pasted != cleaned && !window.clipboardData) { // ignore ie
+            (e.clipboardData || e.originalEvent.clipboardData).setData("text", cleaned);
+            e.preventDefault(); // don't copy original string with tabs
+          }
+        });
+
+      } else {
+        // Some individual features can have undefined values for some or all of
+        // their data properties (properties are set to undefined when an input JSON file
+        // has inconsistent fields, or after force-merging layers with inconsistent fields).
+        el.html(utils.format('<div class="note">This %s is missing attribute data.</div>',
+            table && table.getFields().length > 0 ? 'feature': 'layer'));
       }
-      return {
-        map_bbox: mapBox,
-        page_bbox: pageBox
-      };
     }
 
-    function disabled() {
-      return !!gui.options.disableNavigation;
+    function renderRow(table, rec, key, type, editable) {
+      var rowHtml = '<td class="field-name">%s</td><td><span class="value">%s</span> </td>';
+      var val = rec[key];
+      var str = formatInspectorValue(val, type);
+      var cell = El('tr')
+          .appendTo(table)
+          .html(utils.format(rowHtml, key, utils.htmlEscape(str)))
+          .findChild('.value');
+      setFieldClass(cell, val, type);
+      if (editable) {
+        editItem(cell, rec, key, type);
+      }
     }
 
-    function zoomIn(e) {
-      if (disabled()) return;
-      zoomByPct(getZoomInPct(e.time), 0.5, 0.5);
+    function setFieldClass(el, val, type) {
+      var isNum = type ? type == 'number' : utils.isNumber(val);
+      var isNully = val === undefined || val === null || val !== val;
+      var isEmpty = val === '';
+      el.classed('num-field', isNum);
+      el.classed('object-field', type == 'object');
+      el.classed('null-value', isNully);
+      el.classed('empty', isEmpty);
     }
 
-    function zoomOut(e) {
-      if (disabled()) return;
-      zoomByPct(1/getZoomInPct(e.time), 0.5, 0.5);
+    function editItem(el, rec, key, type) {
+      var input = new ClickText2(el),
+          strval = formatInspectorValue(rec[key], type),
+          parser = getInputParser(type);
+      el.parent().addClass('editable-cell');
+      el.addClass('colored-text dot-underline');
+      input.on('change', function(e) {
+        var val2 = parser(input.value()),
+            strval2 = formatInspectorValue(val2, type);
+        if (strval == strval2) {
+          // contents unchanged
+        } else if (val2 === null && type != 'object') { // allow null objects
+          // invalid value; revert to previous value
+          input.value(strval);
+        } 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});
+        }
+      });
     }
+  }
 
-    function getZoomInPct(clickTime) {
-      var minScale = 0.2,
-          maxScale = 4,
-          minTime = 100,
-          maxTime = 800,
-          time = utils.clamp(clickTime || 200, minTime, maxTime),
-          k = (time - minTime) / (maxTime - minTime),
-          scale = minScale + k * (maxScale - minScale);
-      return 1 + scale * zoomScaleMultiplier;
+  function formatInspectorValue(val, type) {
+    var str;
+    if (type == 'date') {
+      str = utils.formatDateISO(val);
+    } else if (type == 'object') {
+      str = val ? JSON.stringify(val) : "";
+    } else {
+      str = String(val);
     }
+    return str;
+  }
 
-    // @box Bounds with pixels from t,l corner of map area.
-    function zoomToBbox(bbox) {
-      var bounds = new Bounds(bbox),
-          pct = Math.max(bounds.width() / ext.width(), bounds.height() / ext.height()),
-          fx = bounds.centerX() / ext.width() * (1 + pct) - pct / 2,
-          fy = bounds.centerY() / ext.height() * (1 + pct) - pct / 2;
-      zoomByPct(1 / pct, fx, fy);
+  var inputParsers = {
+    date: function(raw) {
+      var d = new Date(raw);
+      return isNaN(+d) ? null : d;
+    },
+    string: function(raw) {
+      return raw;
+    },
+    number: function(raw) {
+      var val = Number(raw);
+      if (raw == 'NaN') {
+        val = NaN;
+      } else if (isNaN(val)) {
+        val = null;
+      }
+      return val;
+    },
+    object: function(raw) {
+      var val = null;
+      try {
+        val = JSON.parse(raw);
+      } catch(e) {}
+      return val;
+    },
+    boolean: function(raw) {
+      var val = null;
+      if (raw == 'true') {
+        val = true;
+      } else if (raw == 'false') {
+        val = false;
+      }
+      return val;
+    },
+    multiple: function(raw) {
+      var val = Number(raw);
+      return isNaN(val) ? raw : val;
     }
+  };
 
-    // @pct Change in scale (2 = 2x zoom)
-    // @fx, @fy zoom focus, [0, 1]
-    function zoomByPct(pct, fx, fy) {
-      var w = ext.getBounds().width();
-      _fx = fx;
-      _fy = fy;
-      zoomTween.start(w, w / pct, 400);
-    }
+  function getInputParser(type) {
+    return inputParsers[type || 'multiple'];
   }
 
-  function HighlightBox() {
-    var box = El('div').addClass('zoom-box').appendTo('body'),
-        show = box.show.bind(box), // original show() function
-        stroke = 2;
-    box.hide();
-    box.show = function(x1, y1, x2, y2) {
-      var w = Math.abs(x1 - x2),
-          h = Math.abs(y1 - y2);
-      box.css({
-        top: Math.min(y1, y2),
-        left: Math.min(x1, x2),
-        width: Math.max(w - stroke * 2, 1),
-        height: Math.max(h - stroke * 2, 1)
-      });
-      show();
-    };
-    return box;
+  function getFieldType(val, key, table) {
+    // if a field has a null value, look at entire column to identify type
+    return internal.getValueType(val) || internal.getColumnType(key, table.getRecords());
   }
 
-  function SelectionTool(gui, ext, hit) {
-    var popup = gui.container.findChild('.selection-tool-options');
-    var box = new HighlightBox();
-    var _on = false;
-
-    gui.addMode('selection_tool', turnOn, turnOff);
+  function InspectionControl2(gui, hit) {
+    var _popup = new Popup(gui, hit.getSwitchTrigger(1), hit.getSwitchTrigger(-1));
+    var _self = new EventDispatcher();
 
     gui.on('interaction_mode_change', function(e) {
-      if (e.mode === 'selection') {
-        gui.enterMode('selection_tool');
-      } else if (gui.getMode() == 'selection_tool') {
-        gui.clearMode();
+      if (e.mode == 'off') {
+        inspect(-1); // clear the popup
       }
     });
 
-    gui.on('box_drag', function(e) {
-      if (!_on) return;
-      var b = e.page_bbox;
-      box.show(b[0], b[1], b[2], b[3]);
-      updateSelection(e.map_bbox, true);
+    _popup.on('update', function(e) {
+      _self.dispatchEvent('data_change', e.data); // let map know which field has changed
     });
 
-    gui.on('box_drag_end', function(e) {
-      if (!_on) return;
-      box.hide();
-      updateSelection(e.map_bbox);
+    hit.on('change', function(e) {
+      var ids;
+      if (!inspecting()) return;
+      ids = e.mode == 'selection' ? null : e.ids;
+      inspect(e.id, e.pinned, ids);
     });
 
-    function updateSelection(bboxPixels, transient) {
-      var bbox = bboxToCoords(bboxPixels);
-      var active = gui.model.getActiveLayer();
-      var ids = internal.findShapesIntersectingBBox(bbox, active.layer, active.dataset.arcs);
-      if (transient) {
-        hit.setTransientIds(ids);
-      } else if (ids.length) {
-        hit.addSelectionIds(ids);
+    // id: Id of a feature in the active layer, or -1
+    function inspect(id, pin, ids) {
+      var target = hit.getHitTarget();
+      if (id > -1 && inspecting() && target && target.layer) {
+        _popup.show(id, ids, target.layer, pin);
+      } else {
+        _popup.hide();
       }
     }
 
-    function turnOn() {
-      _on = true;
+    // does the attribute inspector appear on rollover
+    function inspecting() {
+      return gui.interaction && gui.interaction.getMode() != 'off';
     }
 
-    function bboxToCoords(bbox) {
-      var a = ext.translatePixelCoords(bbox[0], bbox[1]);
-      var b = ext.translatePixelCoords(bbox[2], bbox[3]);
-      return [a[0], b[1], b[0], a[1]];
-    }
+    return _self;
+  }
 
-    function turnOff() {
-      reset();
-      _on = false;
-      if (gui.interaction.getMode() == 'selection') {
-        // mode change was not initiated by interactive menu -- turn off interactivity
-        gui.interaction.turnOff();
-      }
-    }
+  // Test if map should be re-framed to show updated layer
+  function mapNeedsReset(newBounds, prevBounds, viewportBounds, flags) {
+    var viewportPct = getIntersectionPct(newBounds, viewportBounds);
+    var contentPct = getIntersectionPct(viewportBounds, newBounds);
+    var boundsChanged = !prevBounds.equals(newBounds);
+    var inView = newBounds.intersects(viewportBounds);
+    var areaChg = newBounds.area() / prevBounds.area();
+    var chgThreshold = flags.proj ? 1e3 : 1e8;
+    // don't reset if layer extent hasn't changed
+    if (!boundsChanged) return false;
+    // reset if layer is out-of-view
+    if (!inView) return true;
+    // reset if content is mostly offscreen
+    if (viewportPct < 0.3 && contentPct < 0.9) return true;
+    // reset if content bounds have changed a lot (e.g. after projection)
+    if (areaChg > chgThreshold || areaChg < 1/chgThreshold) return true;
+    return false;
+  }
 
-    function reset() {
-      popup.hide();
-      hit.clearSelection();
-    }
+  // Returns proportion of bb2 occupied by bb1
+  function getIntersectionPct(bb1, bb2) {
+    return getBoundsIntersection(bb1, bb2).area() / bb2.area() || 0;
+  }
 
-    function getIdsOpt() {
-      return hit.getSelectionIds().join(',');
+  function getBoundsIntersection(a, b) {
+    var c = new Bounds();
+    if (a.intersects(b)) {
+      c.setBounds(Math.max(a.xmin, b.xmin), Math.max(a.ymin, b.ymin),
+      Math.min(a.xmax, b.xmax), Math.min(a.ymax, b.ymax));
     }
+    return c;
+  }
 
-    hit.on('change', function(e) {
-      if (e.mode != 'selection') return;
-      var ids = hit.getSelectionIds();
-      if (ids.length > 0) {
-        // enter this mode when we're ready to show the selection options
-        // (this closes any other active mode, e.g. box_tool)
-        gui.enterMode('selection_tool');
-        popup.show();
-      } else {
-        popup.hide();
+  function isMultilineLabel(textNode) {
+    return textNode.childNodes.length > 1;
+  }
+
+  function toggleTextAlign(textNode, rec) {
+    var curr = rec['text-anchor'] || 'middle';
+    var value = curr == 'middle' && 'start' || curr == 'start' && 'end' || 'middle';
+    updateTextAnchor(value, textNode, rec);
+  }
+
+  // Set an attribute on a <text> node and any child <tspan> elements
+  // (mapshaper's svg labels require tspans to have the same x and dx values
+  //  as the enclosing text node)
+  function setMultilineAttribute(textNode, name, value) {
+    var n = textNode.childNodes.length;
+    var i = -1;
+    var child;
+    textNode.setAttribute(name, value);
+    while (++i < n) {
+      child = textNode.childNodes[i];
+      if (child.tagName == 'tspan') {
+        child.setAttribute(name, value);
       }
-    });
+    }
+  }
 
-    new SimpleButton(popup.findChild('.delete-btn')).on('click', function() {
-      var cmd = '-filter invert ids=' + getIdsOpt();
-      runCommand(cmd);
-    });
+  function findSvgRoot(el) {
+    while (el && el.tagName != 'html' && el.tagName != 'body') {
+      if (el.tagName == 'svg') return el;
+      el = el.parentNode;
+    }
+    return null;
+  }
 
-    new SimpleButton(popup.findChild('.filter-btn')).on('click', function() {
-      var cmd = '-filter ids=' + getIdsOpt();
-      runCommand(cmd);
-    });
+  // p: pixel coordinates of label anchor
+  function autoUpdateTextAnchor(textNode, rec, p) {
+    var svg = findSvgRoot(textNode);
+    var rect = textNode.getBoundingClientRect();
+    var labelCenterX = rect.left - svg.getBoundingClientRect().left + rect.width / 2;
+    var xpct = (labelCenterX - p[0]) / rect.width; // offset of label center from anchor center
+    var value = xpct < -0.25 && 'end' || xpct > 0.25 && 'start' || 'middle';
+    updateTextAnchor(value, textNode, rec);
+  }
 
-    new SimpleButton(popup.findChild('.split-btn')).on('click', function() {
-      var cmd = '-split ids=' + getIdsOpt();
-      runCommand(cmd);
-    });
+  // @value: optional position to set; if missing, auto-set
+  function updateTextAnchor(value, textNode, rec) {
+    var rect = textNode.getBoundingClientRect();
+    var width = rect.width;
+    var curr = rec['text-anchor'] || 'middle';
+    var xshift = 0;
 
-    new SimpleButton(popup.findChild('.cancel-btn')).on('click', function() {
-      hit.clearSelection();
-    });
+    // console.log("anchor() curr:", curr, "xpct:", xpct, "left:", rect.left, "anchorX:", anchorX, "targ:", targ, "dx:", xshift)
+    if (curr == 'middle' && value == 'end' || curr == 'start' && value == 'middle') {
+      xshift = width / 2;
+    } else if (curr == 'middle' && value == 'start' || curr == 'end' && value == 'middle') {
+      xshift = -width / 2;
+    } else if (curr == 'start' && value == 'end') {
+      xshift = width;
+    } else if (curr == 'end' && value == 'start') {
+      xshift = -width;
+    }
+    if (xshift) {
+      rec['text-anchor'] = value;
+      applyDelta(rec, 'dx', Math.round(xshift));
+    }
+  }
+
+  // handle either numeric strings or numbers in fields
+  function applyDelta(rec, key, delta) {
+    var currVal = rec[key];
+    var isString = utils.isString(currVal);
+    var newVal = (+currVal + delta) || 0;
+    rec[key] = isString ? String(newVal) : newVal;
+  }
 
-    function runCommand(cmd) {
-      popup.hide();
-      if (gui.console) gui.console.runMapshaperCommands(cmd, function(err) {
-        reset();
-      });
+  var snapVerticesToPoint = internal.snapVerticesToPoint;
+
+  function getDisplayCoordsById(id, layer, ext) {
+    var coords = getPointCoordsById(id, layer);
+    return ext.translateCoords(coords[0], coords[1]);
+  }
+
+  function getPointCoordsById(id, layer) {
+    var coords = layer && layer.geometry_type == 'point' && layer.shapes[id];
+    if (!coords || coords.length != 1) {
+      return null;
     }
+    return coords[0];
   }
 
-  // toNext, toPrev: trigger functions for switching between multiple records
-  function Popup(gui, toNext, toPrev) {
+  function translateDeltaDisplayCoords(dx, dy, ext) {
+    var a = ext.translatePixelCoords(0, 0);
+    var b = ext.translatePixelCoords(dx, dy);
+    return [b[0] - a[0], b[1] - a[1]];
+  }
+
+
+  function InteractiveEditor(gui, ext, hit) {
+    // var targetTextNode; // text node currently being dragged
+    var dragging = false;
+    var activeRecord;
+    var activeId = -1;
     var self = new EventDispatcher();
-    var parent = gui.container.findChild('.mshp-main-map');
-    var el = El('div').addClass('popup').appendTo(parent).hide();
-    var content = El('div').addClass('popup-content').appendTo(el);
-    // multi-hit display and navigation
-    var tab = El('div').addClass('popup-tab').appendTo(el).hide();
-    var nav = El('div').addClass('popup-nav').appendTo(tab);
-    var prevLink = El('span').addClass('popup-nav-arrow colored-text').appendTo(nav).text('◀');
-    var navInfo = El('span').addClass('popup-nav-info').appendTo(nav);
-    var nextLink = El('span').addClass('popup-nav-arrow colored-text').appendTo(nav).text('▶');
-    var refresh = null;
-    var currId = -1;
+    var activeVertexIds = null; // for vertex dragging
 
-    el.addClass('rollover'); // used as a sentinel for the hover function
+    initDragging();
 
-    nextLink.on('click', toNext);
-    prevLink.on('click', toPrev);
-    gui.on('popup-needs-refresh', function() {
-      if (refresh) refresh();
-    });
+    return self;
 
-    self.show = function(id, ids, lyr, pinned) {
-      var table = lyr.data; // table can be null (e.g. if layer has no attribute data)
-      var editable = pinned && gui.interaction.getMode() == 'data';
-      var maxHeight = parent.node().clientHeight - 36;
-      currId = id;
-      // stash a function for refreshing the current popup when data changes
-      // while the popup is being displayed (e.g. while dragging a label)
-      refresh = function() {
-        var rec = table && (editable ? table.getRecordAt(id) : table.getReadOnlyRecordAt(id)) || {};
-        render(content, rec, table, editable);
-      };
-      refresh();
-      if (ids && ids.length > 1) {
-        showNav(id, ids, pinned);
-      } else {
-        tab.hide();
-      }
-      el.show();
-      if (content.node().clientHeight > maxHeight) {
-        content.css('height:' + maxHeight + 'px');
-      }
-    };
+    function labelEditingEnabled() {
+      return gui.interaction && gui.interaction.getMode() == 'labels' ? true : false;
+    }
 
-    self.hide = function() {
-      if (!isOpen()) return;
-      refresh = null;
-      currId = -1;
-      // make sure any pending edits are made before re-rendering popup
-      GUI.blurActiveElement(); // this should be more selective -- could cause a glitch if typing in console
-      content.empty();
-      content.node().removeAttribute('style'); // remove inline height
-      el.hide();
-    };
+    function locationEditingEnabled() {
+      return gui.interaction && gui.interaction.getMode() == 'location' ? true : false;
+    }
 
-    return self;
+    function vertexEditingEnabled() {
+      return gui.interaction && gui.interaction.getMode() == 'vertices' ? true : false;
+    }
 
-    function isOpen() {
-      return el.visible();
+    // update symbol by setting attributes
+    function updateSymbol(node, d) {
+      var a = d['text-anchor'];
+      if (a) node.setAttribute('text-anchor', a);
+      setMultilineAttribute(node, 'dx', d.dx || 0);
+      node.setAttribute('y', d.dy || 0);
     }
 
-    function showNav(id, ids, pinned) {
-      var num = ids.indexOf(id) + 1;
-      navInfo.text(' ' + num + ' / ' + ids.length + ' ');
-      nextLink.css('display', pinned ? 'inline-block' : 'none');
-      prevLink.css('display', pinned && ids.length > 2 ? 'inline-block' : 'none');
-      tab.show();
+    // update symbol by re-rendering it
+    function updateSymbol2(node, d, id) {
+      var o = internal.svg.importStyledLabel(d); // TODO: symbol support
+      var activeLayer = hit.getHitTarget().layer;
+      var xy = activeLayer.shapes[id][0];
+      var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+      var node2;
+      o.properties.transform = getSvgSymbolTransform(xy, ext);
+      o.properties['data-id'] = id;
+      // o.properties['class'] = 'selected';
+      g.innerHTML = internal.svg.stringify(o);
+      node2 = g.firstChild;
+      node.parentNode.replaceChild(node2, node);
+      gui.dispatchEvent('popup-needs-refresh');
+      return node2;
     }
 
-    function render(el, rec, table, editable) {
-      var tableEl = El('table').addClass('selectable'),
-          rows = 0;
-      // self.hide(); // clean up if panel is already open
-      el.empty(); // clean up if panel is already open
-      utils.forEachProperty(rec, function(v, k) {
-        var type;
-        // missing GeoJSON fields are set to undefined on import; skip these
-        if (v !== undefined) {
-          type = getFieldType(v, k, table);
-          renderRow(tableEl, rec, k, type, editable);
-          rows++;
+    function initDragging() {
+      var downEvt;
+      var eventPriority = 1;
+
+      // inspector and label editing aren't fully synced - stop editing if inspector opens
+      // gui.on('inspector_on', function() {
+      //   stopEditing();
+      // });
+
+      gui.on('interaction_mode_change', function(e) {
+        if (e.mode != 'labels') {
+          stopDragging();
         }
+        gui.undo.clear(); // TODO: put this elsewhere?
       });
 
-      if (rows > 0) {
-        tableEl.appendTo(el);
-
-        tableEl.on('copy', function(e) {
-          // remove leading or trailing tabs that sometimes get copied when
-          // selecting from a table
-          var pasted = window.getSelection().toString();
-          var cleaned = pasted.replace(/^\t/, '').replace(/\t$/, '');
-          if (pasted != cleaned && !window.clipboardData) { // ignore ie
-            (e.clipboardData || e.originalEvent.clipboardData).setData("text", cleaned);
-            e.preventDefault(); // don't copy original string with tabs
-          }
-        });
+      // down event on svg
+      // a: off text
+      //    -> stop editing
+      // b: on text
+      //    1: not editing -> nop
+      //    2: on selected text -> start dragging
+      //    3: on other text -> stop dragging, select new text
 
-      } else {
-        // Some individual features can have undefined values for some or all of
-        // their data properties (properties are set to undefined when an input JSON file
-        // has inconsistent fields, or after force-merging layers with inconsistent fields).
-        el.html(utils.format('<div class="note">This %s is missing attribute data.</div>',
-            table && table.getFields().length > 0 ? 'feature': 'layer'));
-      }
-    }
+      hit.on('dragstart', function(e) {
+        if (e.id >= 0 === false) return;
+        if (labelEditingEnabled() && onLabelDragStart(e)) {
+          triggerGlobalEvent('label_dragstart', e);
+          startDragging();
+        } else if (locationEditingEnabled()) {
+          triggerGlobalEvent('symbol_dragstart', e);
+          startDragging();
+        } else if (vertexEditingEnabled()) {
+          onVertexDragStart(e);
+          triggerGlobalEvent('vertex_dragstart', e);
+          startDragging();
+        }
+      });
 
-    function renderRow(table, rec, key, type, editable) {
-      var rowHtml = '<td class="field-name">%s</td><td><span class="value">%s</span> </td>';
-      var val = rec[key];
-      var str = formatInspectorValue(val, type);
-      var cell = El('tr')
-          .appendTo(table)
-          .html(utils.format(rowHtml, key, utils.htmlEscape(str)))
-          .findChild('.value');
-      setFieldClass(cell, val, type);
-      if (editable) {
-        editItem(cell, rec, key, type);
-      }
-    }
+      hit.on('drag', function(e) {
+        if (labelEditingEnabled()) {
+          onLabelDrag(e);
+        } else if (locationEditingEnabled()) {
+          onLocationDrag(e);
+        } else if (vertexEditingEnabled()) {
+          onVertexDrag(e);
+        }
+      });
 
-    function setFieldClass(el, val, type) {
-      var isNum = type ? type == 'number' : utils.isNumber(val);
-      var isNully = val === undefined || val === null || val !== val;
-      var isEmpty = val === '';
-      el.classed('num-field', isNum);
-      el.classed('object-field', type == 'object');
-      el.classed('null-value', isNully);
-      el.classed('empty', isEmpty);
-    }
+      hit.on('dragend', function(e) {
+        if (locationEditingEnabled()) {
+          triggerGlobalEvent('symbol_dragend', e);
+          stopDragging();
+        } else if (labelEditingEnabled()) {
+          triggerGlobalEvent('label_dragend', e);
+          stopDragging();
+        } else if (vertexEditingEnabled()) {
+          // kludge to get dataset to recalculate internal bounding boxes
+          hit.getHitTarget().arcs.transformPoints(function() {});
+          triggerGlobalEvent('vertex_dragend', e);
+          stopDragging();
+        }
+      });
 
-    function editItem(el, rec, key, type) {
-      var input = new ClickText2(el),
-          strval = formatInspectorValue(rec[key], type),
-          parser = getInputParser(type);
-      el.parent().addClass('editable-cell');
-      el.addClass('colored-text dot-underline');
-      input.on('change', function(e) {
-        var val2 = parser(input.value()),
-            strval2 = formatInspectorValue(val2, type);
-        if (strval == strval2) {
-          // contents unchanged
-        } else if (val2 === null && type != 'object') { // allow null objects
-          // invalid value; revert to previous value
-          input.value(strval);
-        } 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});
+      hit.on('click', function(e) {
+        if (labelEditingEnabled()) {
+          var target = hit.getHitTarget();
+          onLabelClick(e);
         }
       });
-    }
-  }
 
-  function formatInspectorValue(val, type) {
-    var str;
-    if (type == 'date') {
-      str = utils.formatDateISO(val);
-    } else if (type == 'object') {
-      str = val ? JSON.stringify(val) : "";
-    } else {
-      str = String(val);
-    }
-    return str;
-  }
+      // TODO: highlight hit vertex in path edit mode
+      if (false) hit.on('hover', function(e) {
+        if (vertexEditingEnabled() && !dragging) {
+          onVertexHover(e);
+        }
+      }, null, 100);
 
-  var inputParsers = {
-    date: function(raw) {
-      var d = new Date(raw);
-      return isNaN(+d) ? null : d;
-    },
-    string: function(raw) {
-      return raw;
-    },
-    number: function(raw) {
-      var val = Number(raw);
-      if (raw == 'NaN') {
-        val = NaN;
-      } else if (isNaN(val)) {
-        val = null;
+      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());
       }
-      return val;
-    },
-    object: function(raw) {
-      var val = null;
-      try {
-        val = JSON.parse(raw);
-      } catch(e) {}
-      return val;
-    },
-    boolean: function(raw) {
-      var val = null;
-      if (raw == 'true') {
-        val = true;
-      } else if (raw == 'false') {
-        val = false;
+
+
+      function getVertexEventData(e) {
+        return {
+          FID: activeId,
+          vertexIds: activeVertexIds
+        };
       }
-      return val;
-    },
-    multiple: function(raw) {
-      var val = Number(raw);
-      return isNaN(val) ? raw : val;
-    }
-  };
 
-  function getInputParser(type) {
-    return inputParsers[type || 'multiple'];
-  }
+      function onLocationDrag(e) {
+        var lyr = 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];
+        triggerRedraw();
+        triggerGlobalEvent('symbol_drag', e);
+      }
 
-  function getFieldType(val, key, table) {
-    // if a field has a null value, look at entire column to identify type
-    return internal.getValueType(val) || internal.getColumnType(key, table.getRecords());
-  }
+      function onVertexDragStart(e) {
+        var target = hit.getHitTarget();
+        var shp = target.layer.shapes[e.id];
+        var p = ext.translatePixelCoords(e.x, e.y);
+        activeVertexIds = internal.findNearestVertices(p, shp, target.arcs);
+        activeId = e.id;
+      }
 
-  function InspectionControl2(gui, hit) {
-    var _popup = new Popup(gui, hit.getSwitchTrigger(1), hit.getSwitchTrigger(-1));
-    var _self = new EventDispatcher();
+      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);
+        }
+        snapVerticesToPoint(activeVertexIds, p, target.arcs);
+        triggerRedraw();
+      }
 
-    gui.on('interaction_mode_change', function(e) {
-      if (e.mode == 'off') {
-        inspect(-1); // clear the popup
+      function onLabelClick(e) {
+        var textNode = getTextTarget3(e);
+        var rec = getLabelRecordById(e.id);
+        if (textNode && rec && isMultilineLabel(textNode)) {
+          toggleTextAlign(textNode, rec);
+          updateSymbol2(textNode, rec, e.id);
+          // e.stopPropagation(); // prevent pin/unpin on popup
+        }
       }
-    });
 
-    _popup.on('update', function(e) {
-      _self.dispatchEvent('data_change', e.data); // let map know which field has changed
-    });
+      function triggerRedraw() {
+        gui.dispatchEvent('map-needs-refresh');
+      }
 
-    hit.on('change', function(e) {
-      var ids;
-      if (!inspecting()) return;
-      ids = e.mode == 'selection' ? null : e.ids;
-      inspect(e.id, e.pinned, ids);
-    });
+      function triggerGlobalEvent(type, e) {
+        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);
+      }
 
-    // id: Id of a feature in the active layer, or -1
-    function inspect(id, pin, ids) {
-      var target = hit.getHitTarget();
-      if (id > -1 && inspecting() && target && target.layer) {
-        _popup.show(id, ids, target.layer, pin);
-      } else {
-        _popup.hide();
+      function getLabelRecordById(id) {
+        var table = hit.getTargetDataTable();
+        if (id >= 0 === false || !table) return null;
+        // add dx and dy properties, if not available
+        if (!table.fieldExists('dx')) {
+          table.addField('dx', 0);
+        }
+        if (!table.fieldExists('dy')) {
+          table.addField('dy', 0);
+        }
+        if (!table.fieldExists('text-anchor')) {
+          table.addField('text-anchor', '');
+        }
+        return table.getRecordAt(id);
       }
-    }
 
-    // does the attribute inspector appear on rollover
-    function inspecting() {
-      return gui.interaction && gui.interaction.getMode() != 'off';
-    }
+      function onLabelDragStart(e) {
+        var textNode = getTextTarget3(e);
+        var table = hit.getTargetDataTable();
+        if (!textNode || !table) return false;
+        activeId = e.id;
+        activeRecord = getLabelRecordById(activeId);
+        downEvt = e;
+        return true;
+      }
 
-    return _self;
-  }
+      function onLabelDrag(e) {
+        var scale = ext.getSymbolScale() || 1;
+        var textNode;
+        if (!dragging) return;
+        if (e.id != activeId) {
+          error("Mismatched hit ids:", e.id, activeId);
+        }
+        applyDelta(activeRecord, 'dx', e.dx / scale);
+        applyDelta(activeRecord, 'dy', e.dy / scale);
+        textNode = getTextTarget3(e);
+        if (!isMultilineLabel(textNode)) {
+          // 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.
+          autoUpdateTextAnchor(textNode, activeRecord, getDisplayCoordsById(activeId, hit.getHitTarget().layer, ext));
+        }
+        // updateSymbol(targetTextNode, activeRecord);
+        updateSymbol2(textNode, activeRecord, activeId);
+      }
 
-  // Test if map should be re-framed to show updated layer
-  function mapNeedsReset(newBounds, prevBounds, viewportBounds, flags) {
-    var viewportPct = getIntersectionPct(newBounds, viewportBounds);
-    var contentPct = getIntersectionPct(viewportBounds, newBounds);
-    var boundsChanged = !prevBounds.equals(newBounds);
-    var inView = newBounds.intersects(viewportBounds);
-    var areaChg = newBounds.area() / prevBounds.area();
-    var chgThreshold = flags.proj ? 1e3 : 1e8;
-    // don't reset if layer extent hasn't changed
-    if (!boundsChanged) return false;
-    // reset if layer is out-of-view
-    if (!inView) return true;
-    // reset if content is mostly offscreen
-    if (viewportPct < 0.3 && contentPct < 0.9) return true;
-    // reset if content bounds have changed a lot (e.g. after projection)
-    if (areaChg > chgThreshold || areaChg < 1/chgThreshold) return true;
-    return false;
-  }
+      function getSymbolNodeById(id, parent) {
+        // TODO: optimize selector
+        var sel = '[data-id="' + id + '"]';
+        return parent.querySelector(sel);
+      }
 
-  // Returns proportion of bb2 occupied by bb1
-  function getIntersectionPct(bb1, bb2) {
-    return getBoundsIntersection(bb1, bb2).area() / bb2.area() || 0;
-  }
+      function getTextTarget3(e) {
+        if (e.id > -1 === false || !e.container) return null;
+        return getSymbolNodeById(e.id, e.container);
+      }
 
-  function getBoundsIntersection(a, b) {
-    var c = new Bounds();
-    if (a.intersects(b)) {
-      c.setBounds(Math.max(a.xmin, b.xmin), Math.max(a.ymin, b.ymin),
-      Math.min(a.xmax, b.xmax), Math.min(a.ymax, b.ymax));
+      function getTextTarget2(e) {
+        var el = e && e.targetSymbol || null;
+        if (el && el.tagName == 'tspan') {
+          el = el.parentNode;
+        }
+        return el && el.tagName == 'text' ? el : null;
+      }
+
+      function getTextTarget(e) {
+        var el = e.target;
+        if (el.tagName == 'tspan') {
+          el = el.parentNode;
+        }
+        return el.tagName == 'text' ? el : null;
+      }
     }
-    return c;
+
+    function startDragging() {
+      dragging = true;
+    }
+
+    function stopDragging() {
+      dragging = false;
+      activeId = -1;
+      activeRecord = null;
+      activeVertexIds = null;
+    }
+
+    function isClickEvent(up, down) {
+      var elapsed = Math.abs(down.timeStamp - up.timeStamp);
+      var dx = up.screenX - down.screenX;
+      var dy = up.screenY - down.screenY;
+      var dist = Math.sqrt(dx * dx + dy * dy);
+      return dist <= 4 && elapsed < 300;
+    }
+
   }
 
   var darkStroke = "#334",
@@ -6620,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;
     };
@@ -6904,7 +6856,7 @@
     _self.drawVertices = function(shapes, arcs, style, filter) {
       var iter = new internal.ShapeIter(arcs);
       var t = getScaledTransform(_ext);
-      var radius = (style.strokeWidth * 0.8 || 2.2) * GUI.getPixelRatio() * getScaledLineScale(_ext);
+      var radius = (style.strokeWidth * 0.9 || 2.2) * GUI.getPixelRatio() * getScaledLineScale(_ext);
       var color = style.strokeColor || 'black';
       var shp;
       _ctx.beginPath();
@@ -7990,7 +7942,7 @@
       _mouse.disable();
     });
 
-    gui.on('undo_redo', function() {
+    gui.on('map-needs-refresh', function() {
       drawLayers();
     });
 
@@ -8152,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