mapshaper 0.5.83 → 0.5.87

package/www/mapshaper-gui.js

@@ -3574,2540 +3574,2695 @@
     }
   }
 
-  function SidebarButtons(gui) {
-    var root = gui.container.findChild('.mshp-main-map');
-    var buttons = El('div').addClass('nav-buttons').appendTo(root).hide();
-    var _hidden = true;
-    gui.on('active', updateVisibility);
-    gui.on('inactive', updateVisibility);
-
-    // @iconRef: selector for an (svg) button icon
-    this.addButton = function(iconRef) {
-      var btn = initButton(iconRef).addClass('nav-btn');
-      btn.appendTo(buttons);
-      return btn;
-    };
-
-    this.show = function() {
-      _hidden = false;
-      updateVisibility();
-    };
+  function getSymbolNodeId(node) {
+    return parseInt(node.getAttribute('data-id'));
+  }
 
-    this.hide = function() {
-      _hidden = true;
-      updateVisibility();
-    };
+  function getSvgSymbolTransform(xy, ext) {
+    var scale = ext.getSymbolScale();
+    var p = ext.translateCoords(xy[0], xy[1]);
+    return internal.svg.getTransform(p, scale);
+  }
 
-    var initButton = this.initButton = function(iconRef) {
-      var icon = El('body').findChild(iconRef).node().cloneNode(true);
-      var btn = El('div')
-        .on('dblclick', function(e) {e.stopPropagation();}); // block dblclick zoom
-      btn.appendChild(icon);
-      if (icon.hasAttribute('id')) icon.removeAttribute('id');
-      return btn;
-    };
 
-    function updateVisibility() {
-      if (GUI.isActiveInstance(gui) && !_hidden) {
-        buttons.show();
+  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 {
-        buttons.hide();
+        if (displayOn) el.setAttribute('display', 'none');
       }
     }
   }
 
-  function ModeButton(modes, el, name) {
-    var btn = El(el),
-        active = false;
-    modes.on('mode', function(e) {
-      active = e.name == name;
-      if (active) {
-        btn.addClass('active');
-      } else {
-        btn.removeClass('active');
-      }
-    });
-
-    btn.on('click', function() {
-      modes.enterMode(active ? null : name);
+  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 ModeSwitcher() {
-    var self = this;
-    var mode = null;
+  function isMultilineLabel(textNode) {
+    return textNode.childNodes.length > 1;
+  }
 
-    self.getMode = function() {
-      return mode;
-    };
+  function toggleTextAlign(textNode, rec) {
+    var curr = rec['text-anchor'] || 'middle';
+    var value = curr == 'middle' && 'start' || curr == 'start' && 'end' || 'middle';
+    updateTextAnchor(value, textNode, rec);
+  }
 
-    // return a function to trigger this mode
-    self.addMode = function(name, enter, exit, btn) {
-      self.on('mode', function(e) {
-        if (e.prev == name) {
-          exit();
-        }
-        if (e.name == name) {
-          enter();
-        }
-      });
-      if (btn) {
-        new ModeButton(self, btn, name);
+  // 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);
       }
-    };
+    }
+  }
 
-    self.addMode(null, function() {}, function() {}); // null mode
+  function findSvgRoot(el) {
+    while (el && el.tagName != 'html' && el.tagName != 'body') {
+      if (el.tagName == 'svg') return el;
+      el = el.parentNode;
+    }
+    return null;
+  }
 
-    self.clearMode = function() {
-      self.enterMode(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);
+  }
 
-    self.enterMode = function(next) {
-      var prev = mode;
-      if (next != prev) {
-        mode = next;
-        self.dispatchEvent('mode', {name: next, prev: prev});
-      }
-    };
+  // @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;
+
+    // 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));
+    }
   }
 
-  utils.inherit(ModeSwitcher, EventDispatcher);
+  // 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 KeyboardEvents(gui) {
-    var self = this;
-    var shiftDown = false;
-    document.addEventListener('keyup', function(e) {
-      if (!GUI.isActiveInstance(gui)) return;
-      if (e.keyCode == 16) shiftDown = false;
-    });
+  function getDisplayCoordsById(id, layer, ext) {
+    var coords = getPointCoordsById(id, layer);
+    return ext.translateCoords(coords[0], coords[1]);
+  }
 
-    document.addEventListener('keydown', function(e) {
-      if (!GUI.isActiveInstance(gui)) return;
-      if (e.keyCode == 16) shiftDown = true;
-      self.dispatchEvent('keydown', {originalEvent: e});
+  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() {});
+    }
+  }
 
-    this.shiftIsPressed = function() { return shiftDown; };
+  function getPointCoordsById(id, layer) {
+    var coords = layer && layer.geometry_type == 'point' && layer.shapes[id];
+    if (!coords || coords.length != 1) {
+      return null;
+    }
+    return coords[0];
+  }
 
-    this.onMenuSubmit = function(menuEl, cb) {
-      gui.on('enter_key', function(e) {
-        if (menuEl.visible()) {
-          e.originalEvent.stopPropagation();
-          cb();
-        }
-      });
-    };
+  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]];
   }
 
-  utils.inherit(KeyboardEvents, EventDispatcher);
 
-  function InteractionMode(gui) {
+  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
 
-    var menus = {
-      standard: ['info', 'selection', 'data', 'box'],
-      lines: ['info', 'selection', 'data', 'box', 'vertices'],
-      table: ['info', 'selection', 'data'],
-      labels: ['info', 'selection', 'data', 'box', 'labels', 'location'],
-      points: ['info', 'selection', 'data', 'box', 'location']
-    };
+    initDragging();
 
-    var prompts = {
-      box: 'Shift-drag to draw a box',
-      data: 'Click-select features to edit their attributes',
-      selection: 'Click-select or shift-drag to select features'
-    };
+    return self;
 
-    // mode name -> menu text lookup
-    var labels = {
-      info: 'inspect features',
-      box: 'shift-drag box tool',
-      data: 'edit attributes',
-      labels: 'position labels',
-      location: 'drag points',
-      vertices: 'drag vertices',
-      selection: 'select features',
-      off: 'turn off'
-    };
-    var btn, menu;
-    var _menuTimeout;
+    function labelEditingEnabled() {
+      return gui.interaction && gui.interaction.getMode() == 'labels' ? true : false;
+    }
 
-    // state variables
-    var _editMode = 'off';
-    var _menuOpen = false;
+    function locationEditingEnabled() {
+      return gui.interaction && gui.interaction.getMode() == 'location' ? true : false;
+    }
 
-    // Only render edit mode button/menu if this option is present
-    if (gui.options.inspectorControl) {
-      btn = gui.buttons.addButton('#pointer-icon').addClass('menu-btn');
-      menu = El('div').addClass('nav-sub-menu').appendTo(btn.node());
+    function vertexEditingEnabled() {
+      return gui.interaction && gui.interaction.getMode() == 'vertices' ? true : false;
+    }
 
-      btn.on('mouseleave', function() {
-        if (!_menuOpen) {
-          btn.removeClass('hover');
-        } else {
-          closeMenu(200);
+    // 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?
       });
 
-      btn.on('mouseenter', function() {
-        btn.addClass('hover');
-        if (_menuOpen) {
-          clearTimeout(_menuTimeout); // prevent timed closing
-        } else {
-          openMenu();
+      // 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();
         }
-        // if (_editMode != 'off') {
-        //   openMenu();
-        // }
       });
 
-      btn.on('click', function(e) {
-        if (active()) {
-          setMode('off');
-          closeMenu();
-        } else if (_menuOpen) {
-          setMode('info'); // select info (inspect) as the default
-          // closeMenu(350);
-        } else {
-          openMenu();
+      hit.on('drag', function(e) {
+        if (labelEditingEnabled()) {
+          onLabelDrag(e);
+        } else if (locationEditingEnabled()) {
+          onLocationDrag(e);
+        } else if (vertexEditingEnabled()) {
+          onVertexDrag(e);
         }
-        e.stopPropagation();
       });
-    }
 
-    this.turnOff = function() {
-      setMode('off');
-    };
+      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();
+        }
+      });
 
-    this.getMode = getInteractionMode;
+      hit.on('click', function(e) {
+        if (labelEditingEnabled()) {
+          onLabelClick(e);
+        }
+      });
 
-    this.setMode = function(mode) {
-      // TODO: check that this mode is valid for the current dataset
-      if (mode in labels) {
-        setMode(mode);
+      function getVertexEventData(e) {
+        return {
+          FID: activeId,
+          vertexIds: activeVertexIds
+        };
       }
-    };
 
-    gui.model.on('update', function(e) {
-      // change mode if active layer doesn't support the current mode
-      updateCurrentMode();
-      if (_menuOpen) {
-        renderMenu();
+      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);
       }
-    }, null, -1); // low priority?
-
-    function active() {
-      return _editMode && _editMode != 'off';
-    }
 
-    function getAvailableModes() {
-      var o = gui.model.getActiveLayer();
-      if (!o || !o.layer) {
-        return menus.standard; // TODO: more sensible handling of missing layer
-      }
-      if (!internal.layerHasGeometry(o.layer)) {
-        return menus.table;
-      }
-      if (internal.layerHasLabels(o.layer)) {
-        return menus.labels;
-      }
-      if (internal.layerHasPoints(o.layer)) {
-        return menus.points;
-      }
-      if (internal.layerHasPaths(o.layer) && o.layer.geometry_type == 'polyline') {
-        return menus.lines;
+      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;
       }
-      return menus.standard;
-    }
 
-    function getInteractionMode() {
-      return active() ? _editMode : 'off';
-    }
+      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 renderMenu() {
-      if (!menu) return;
-      var modes = getAvailableModes();
-      menu.empty();
-      modes.forEach(function(mode) {
-        // don't show "turn off" link if not currently editing
-        if (_editMode == 'off' && mode == 'off') return;
-        var link = El('div').addClass('nav-menu-item').attr('data-name', mode).text(labels[mode]).appendTo(menu);
-        link.on('click', function(e) {
-          if (_editMode == mode) {
-            // closeMenu();
-            setMode('off');
-          } else if (_editMode != mode) {
-            setMode(mode);
-            if (mode == 'off') closeMenu(120); // only close if turning off
-            // closeMenu(mode == 'off' ? 120 : 400); // close after selecting
-          }
-          e.stopPropagation();
-        });
-      });
-      updateSelectionHighlight();
-    }
+      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
+        }
+      }
 
-    // if current editing mode is not available, turn off the tool
-    function updateCurrentMode() {
-      var modes = getAvailableModes();
-      if (modes.indexOf(_editMode) == -1) {
-        setMode('off');
+      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 openMenu() {
-      clearTimeout(_menuTimeout);
-      if (!_menuOpen) {
-        _menuOpen = true;
-        renderMenu();
-        updateArrowButton();
+      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);
       }
-    }
 
-    // Calling with a delay lets users see the menu update after clicking a selection,
-    // and prevents the menu from closing immediately if the pointer briefly drifts
-    // off the menu while hovering.
-    //
-    function closeMenu(delay) {
-      if (!_menuOpen) return;
-      clearTimeout(_menuTimeout);
-      _menuTimeout = setTimeout(function() {
-        _menuOpen = false;
-        updateArrowButton();
-      }, delay || 0);
-    }
+      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 setMode(mode) {
-      var changed = mode != _editMode;
-      if (changed) {
-        menu.classed('active', mode != 'off');
-        _editMode = mode;
-        onModeChange();
-        updateArrowButton();
-        updateSelectionHighlight();
+      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 onModeChange() {
-      gui.dispatchEvent('interaction_mode_change', {mode: getInteractionMode()});
+    function startDragging() {
+      dragging = true;
     }
 
-    // Update button highlight and selected menu item highlight (if any)
-    function updateArrowButton() {
-      if (!menu) return;
-      if (_menuOpen) {
-        btn.addClass('open');
-      } else {
-        btn.removeClass('open');
-      }
-      btn.classed('hover', _menuOpen);
-      // btn.classed('selected', active() && !_menuOpen);
-      btn.classed('selected', active());
+    function stopDragging() {
+      dragging = false;
+      activeId = -1;
+      activeRecord = null;
+      activeVertexIds = null;
     }
 
-    function updateSelectionHighlight() {
-      El.findAll('.nav-menu-item').forEach(function(el) {
-        el = El(el);
-        el.classed('selected', el.attr('data-name') == _editMode);
-      });
+    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;
     }
+
   }
 
-  function Model(gui) {
-    var self = new internal.Catalog();
-    var deleteLayer = self.deleteLayer;
-    utils.extend(self, EventDispatcher.prototype);
+  // import { cloneShape } from '../paths/mapshaper-shape-utils';
+  // import { copyRecord } from '../datatable/mapshaper-data-utils';
+  var cloneShape = internal.cloneShape;
+  var copyRecord = internal.copyRecord;
 
-    // override Catalog method (so -drop command will work in web console)
-    self.deleteLayer = function(lyr, dataset) {
-      var active, flags;
-      deleteLayer.call(self, lyr, dataset);
-      if (self.isEmpty()) {
-        // refresh browser if deleted layer was the last layer
-        window.location.href = window.location.href.toString();
-      } else {
-        // trigger event to update layer list and, if needed, the map view
-        flags = {};
-        active = self.getActiveLayer();
-        if (active.layer != lyr) {
-          flags.select = true;
-        }
-        internal.cleanupArcs(active.dataset);
-        if (internal.layerHasPaths(lyr)) {
-          flags.arc_count = true; // looks like a kludge, try to remove
-        }
-        self.updated(flags, active.layer, active.dataset);
-      }
-    };
+  function Undo(gui) {
+    var history, offset, stashedUndo;
+    reset();
 
-    self.updated = function(flags) {
-      var targets = self.getDefaultTargets();
-      var active = self.getActiveLayer();
-      if (internal.countTargetLayers(targets) > 1) {
-        self.setDefaultTarget([active.layer], active.dataset);
-        gui.session.setTargetLayer(active.layer); // add -target command to target single layer
+    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 (flags.select) {
-        self.dispatchEvent('select', active);
+      if (isRedoEvt(e)) {
+        this.redo();
+        e.stopPropagation();
+        e.preventDefault();
       }
-      self.dispatchEvent('update', utils.extend({flags: flags}, active));
+
+    }, 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();
     };
 
-    self.selectLayer = function(lyr, dataset) {
-      if (self.getActiveLayer().layer == lyr) return;
-      self.setDefaultTarget([lyr], dataset);
-      self.updated({select: true});
-      gui.session.setTargetLayer(lyr);
+    this.makePointSetter = function(i) {
+      var target = gui.model.getActiveLayer();
+      var shp = cloneShape(target.layer.shapes[i]);
+      return function() {
+        target.layer.shapes[i] = shp;
+      };
     };
 
-    self.selectNextLayer = function() {
-      var next = self.findNextLayer(self.getActiveLayer().layer);
-      if (next) self.selectLayer(next.layer, next.dataset);
+    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');
+      };
     };
 
-    self.selectPrevLayer = function() {
-      var prev = self.findPrevLayer(self.getActiveLayer().layer);
-      if (prev) self.selectLayer(prev.layer, prev.dataset);
+    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);
+      };
     };
 
-    return self;
-  }
+    this.addHistoryState = function(undo, redo) {
+      if (offset > 0) {
+        history.splice(-offset);
+        offset = 0;
+      }
+      history.push({undo, redo});
+    };
 
-  function getShapeHitTest(displayLayer, ext) {
-    var geoType = displayLayer.layer.geometry_type;
-    var test;
-    if (geoType == 'point' && displayLayer.style.type == 'styled') {
-      test = getGraduatedCircleTest(getRadiusFunction(displayLayer.style));
-    } else if (geoType == 'point') {
-      test = pointTest;
-    } else if (geoType == 'polyline') {
-      test = polylineTest;
-    } else if (geoType == 'polygon') {
-      test = polygonTest;
-    } else {
-      error("Unexpected geometry type:", geoType);
+    this.undo = function() {
+      var item = getHistoryItem();
+      if (item) {
+        offset++;
+        item.undo();
+        refreshMap();
+      }
+    };
+
+    this.redo = function() {
+      if (offset <= 0) return;
+      offset--;
+      var item = getHistoryItem();
+      item.redo();
+      refreshMap();
+    };
+
+    function getHistoryItem() {
+      var item = history[history.length - offset - 1];
+      return item || null;
     }
-    return test;
 
-    // Convert pixel distance to distance in coordinate units.
-    function getHitBuffer(pix) {
-      return pix / ext.getTransform().mx;
-    }
-
-    // reduce hit threshold when zoomed out
-    function getZoomAdjustedHitBuffer(pix, minPix) {
-      var scale = ext.scale();
-      if (scale < 1) {
-        pix *= scale;
-      }
-      if (minPix > 0 && pix < minPix) pix = minPix;
-      return getHitBuffer(pix);
-    }
-
-    function polygonTest(x, y) {
-      var maxDist = getZoomAdjustedHitBuffer(5, 1),
-          cands = findHitCandidates(x, y, maxDist),
-          hits = [],
-          cand, hitId;
-      for (var i=0; i<cands.length; i++) {
-        cand = cands[i];
-        if (geom.testPointInPolygon(x, y, cand.shape, displayLayer.arcs)) {
-          hits.push(cand.id);
-        }
-      }
-      if (cands.length > 0 && hits.length === 0) {
-        // secondary detection: proximity, if not inside a polygon
-        sortByDistance(x, y, cands, displayLayer.arcs);
-        hits = pickNearestCandidates(cands, 0, maxDist);
-      }
-      return hits;
-    }
+  }
 
-    function pickNearestCandidates(sorted, bufDist, maxDist) {
-      var hits = [],
-          cand, minDist;
-      for (var i=0; i<sorted.length; i++) {
-        cand = sorted[i];
-        if (cand.dist < maxDist !== true) {
-          break;
-        } else if (i === 0) {
-          minDist = cand.dist;
-        } else if (cand.dist - minDist > bufDist) {
-          break;
-        }
-        hits.push(cand.id);
-      }
-      return hits;
-    }
+  function SidebarButtons(gui) {
+    var root = gui.container.findChild('.mshp-main-map');
+    var buttons = El('div').addClass('nav-buttons').appendTo(root).hide();
+    var _hidden = true;
+    gui.on('active', updateVisibility);
+    gui.on('inactive', updateVisibility);
 
-    function polylineTest(x, y) {
-      var maxDist = getZoomAdjustedHitBuffer(15, 2),
-          bufDist = getZoomAdjustedHitBuffer(0.05), // tiny threshold for hitting almost-identical lines
-          cands = findHitCandidates(x, y, maxDist);
-      sortByDistance(x, y, cands, displayLayer.arcs);
-      return pickNearestCandidates(cands, bufDist, maxDist);
-    }
+    // @iconRef: selector for an (svg) button icon
+    this.addButton = function(iconRef) {
+      var btn = initButton(iconRef).addClass('nav-btn');
+      btn.appendTo(buttons);
+      return btn;
+    };
 
-    function sortByDistance(x, y, cands, arcs) {
-      for (var i=0; i<cands.length; i++) {
-        cands[i].dist = geom.getPointToShapeDistance(x, y, cands[i].shape, arcs);
-      }
-      utils.sortOn(cands, 'dist');
-    }
+    this.show = function() {
+      _hidden = false;
+      updateVisibility();
+    };
 
-    function pointTest(x, y) {
-      var bullseyeDist = 2, // hit all points w/in 2 px
-          tinyDist = 0.5,
-          toPx = ext.getTransform().mx,
-          hits = [],
-          hitThreshold = 25,
-          newThreshold = Infinity;
+    this.hide = function() {
+      _hidden = true;
+      updateVisibility();
+    };
 
-      internal.forEachPoint(displayLayer.layer.shapes, function(p, id) {
-        var dist = geom.distance2D(x, y, p[0], p[1]) * toPx;
-        if (dist > hitThreshold) return;
-        // got a hit
-        if (dist < newThreshold) {
-          // start a collection of hits
-          hits = [id];
-          hitThreshold = Math.max(bullseyeDist, dist + tinyDist);
-          newThreshold = dist < bullseyeDist ? -1 : dist - tinyDist;
-        } else {
-          // add to hits if inside bullseye or is same dist as previous hit
-          hits.push(id);
-        }
-      });
-      // console.log(hitThreshold, bullseye);
-      return utils.uniq(hits); // multipoint features can register multiple hits
-    }
+    var initButton = this.initButton = function(iconRef) {
+      var icon = El('body').findChild(iconRef).node().cloneNode(true);
+      var btn = El('div')
+        .on('dblclick', function(e) {e.stopPropagation();}); // block dblclick zoom
+      btn.appendChild(icon);
+      if (icon.hasAttribute('id')) icon.removeAttribute('id');
+      return btn;
+    };
 
-    function getRadiusFunction(style) {
-      var o = {};
-      if (style.styler) {
-        return function(i) {
-          style.styler(o, i);
-          return o.radius || 0;
-        };
+    function updateVisibility() {
+      if (GUI.isActiveInstance(gui) && !_hidden) {
+        buttons.show();
+      } else {
+        buttons.hide();
       }
-      return function() {return style.radius || 0;};
-    }
-
-    function getGraduatedCircleTest(radius) {
-      return function(x, y) {
-        var hits = [],
-            margin = getHitBuffer(12),
-            limit = getHitBuffer(50), // short-circuit hit test beyond this threshold
-            directHit = false,
-            hitRadius = 0,
-            hitDist;
-        internal.forEachPoint(displayLayer.layer.shapes, function(p, id) {
-          var distSq = geom.distanceSq(x, y, p[0], p[1]);
-          var isHit = false;
-          var isOver, isNear, r, d, rpix;
-          if (distSq > limit * limit) return;
-          rpix = radius(id);
-          r = getHitBuffer(rpix + 1); // increase effective radius to make small bubbles easier to hit in clusters
-          d = Math.sqrt(distSq) - r; // pointer distance from edge of circle (negative = inside)
-          isOver = d < 0;
-          isNear = d < margin;
-          if (!isNear || rpix > 0 === false) {
-            isHit = false;
-          } else if (hits.length === 0) {
-            isHit = isNear;
-          } else if (!directHit && isOver) {
-            isHit = true;
-          } else if (directHit && isOver) {
-            isHit = r == hitRadius ? d <= hitDist : r < hitRadius; // smallest bubble wins if multiple direct hits
-          } else if (!directHit && !isOver) {
-            // closest to bubble edge wins
-            isHit = hitDist == d ? r <= hitRadius : d < hitDist; // closest bubble wins if multiple indirect hits
-          }
-          if (isHit) {
-            if (hits.length > 0 && (r != hitRadius || d != hitDist)) {
-              hits = [];
-            }
-            hitRadius = r;
-            hitDist = d;
-            directHit = isOver;
-            hits.push(id);
-          }
-        });
-        return hits;
-      };
-    }
-
-    function findHitCandidates(x, y, dist) {
-      var arcs = displayLayer.arcs,
-          index = {},
-          cands = [],
-          bbox = [];
-      displayLayer.layer.shapes.forEach(function(shp, shpId) {
-        var cand;
-        for (var i = 0, n = shp && shp.length; i < n; i++) {
-          arcs.getSimpleShapeBounds2(shp[i], bbox);
-          if (x + dist < bbox[0] || x - dist > bbox[2] ||
-            y + dist < bbox[1] || y - dist > bbox[3]) {
-            continue; // bbox non-intersection
-          }
-          cand = index[shpId];
-          if (!cand) {
-            cand = index[shpId] = {shape: [], id: shpId, dist: 0};
-            cands.push(cand);
-          }
-          cand.shape.push(shp[i]);
-        }
-      });
-      return cands;
     }
   }
 
-  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));
+  function ModeButton(modes, el, name) {
+    var btn = El(el),
+        active = false;
+    modes.on('mode', function(e) {
+      active = e.name == name;
+      if (active) {
+        btn.addClass('active');
       } else {
-        if (displayOn) el.setAttribute('display', 'none');
+        btn.removeClass('active');
       }
-    }
-  }
-
-  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) {
-      // target could be a part of an SVG symbol, or the SVG element, or something else
-      var target = pointerEvent.originalEvent.target;
-      var symbolNode = getSymbolNode(target);
-      if (!symbolNode) {
-        return null;
-      }
-      return {
-        targetId: getSymbolNodeId(symbolNode), // TODO: some validation on id
-        targetSymbol: symbolNode,
-        targetNode: target,
-        container: symbolNode.parentNode
-      };
-    };
-
-    // target: event target (could be any DOM element)
-    function getSymbolNode(target) {
-      var node = target;
-      while (node && nodeHasSymbolTagType(node)) {
-        if (isSymbolNode(node)) {
-          return node;
-        }
-        node = node.parentElement;
-      }
-      return null;
-    }
-
-    // TODO: switch to attribute detection
-    function nodeHasSymbolTagType(node) {
-      var tag = node.tagName;
-      return tag == 'g' || tag == 'tspan' || tag == 'text' || tag == 'image' ||
-        tag == 'path' || tag == 'circle' || tag == 'rect' || tag == 'line';
-    }
-
-    function isSymbolNode(node) {
-      return node.hasAttribute('data-id') && (node.tagName == 'text' || node.tagName == 'g');
-    }
-
-    function isSymbolChildNode(node) {
-
-    }
-
-    function getChildId(childNode) {
-
-    }
-
-    function getSymbolId(symbolNode) {
-
-    }
-
-    function getFeatureId(symbolNode) {
-
-    }
-
-  }
-
-  function getPointerHitTest(mapLayer, ext) {
-    var shapeTest, svgTest, targetLayer;
-    if (!mapLayer || !internal.layerHasGeometry(mapLayer.layer)) {
-      return null;
-    }
-    shapeTest = getShapeHitTest(mapLayer, ext);
-    svgTest = getSvgHitTest(mapLayer);
-
-    // e: pointer event
-    return function(e) {
-      var p = ext.translatePixelCoords(e.x, e.y);
-      var data = {
-        ids: shapeTest(p[0], p[1]) || []
-      };
-      var svgData = svgTest(e); // null or a data object
-      if (svgData) { // mouse is over an SVG symbol
-        utils.extend(data, svgData);
-        // placing symbol id in front of any other hits
-        data.ids = utils.uniq([svgData.targetId].concat(data.ids));
-      }
-      data.id = data.ids.length > 0 ? data.ids[0] : -1;
-      return data;
-    };
+    btn.on('click', function() {
+      modes.enterMode(active ? null : name);
+    });
   }
 
-  function InteractiveSelection(gui, ext, mouse) {
-    var self = new EventDispatcher();
-    var storedData = noHitData(); // may include additional data from SVG symbol hit (e.g. hit node)
-    var selectionIds = [];
-    var transientIds = []; // e.g. hit ids while dragging a box
-    var active = false;
-    var interactionMode;
-    var targetLayer;
-    var hitTest;
-    // event priority is higher than navigation, so stopping propagation disables
-    // pan navigation
-    var priority = 2;
-
-    // init keyboard controls for pinned features
-    gui.keyboard.on('keydown', function(evt) {
-      var e = evt.originalEvent;
-
-      if (gui.interaction.getMode() == 'off' || !targetLayer) return;
-
-      // esc key clears selection (unless in an editing mode -- esc key also exits current mode)
-      if (e.keyCode == 27 && !gui.getMode()) {
-        self.clearSelection();
-        return;
-      }
-
-      // ignore keypress if no feature is selected or user is editing text
-      if (pinnedId() == -1 || GUI.getInputElement()) return;
-
-      if (e.keyCode == 37 || e.keyCode == 39) {
-        // L/R arrow keys
-        // advance pinned feature
-        advanceSelectedFeature(e.keyCode == 37 ? -1 : 1);
-        e.stopPropagation();
+  function ModeSwitcher() {
+    var self = this;
+    var mode = null;
 
-      } else if (e.keyCode == 8) {
-        // DELETE key
-        // delete pinned feature
-        // to help protect against inadvertent deletion, don't delete
-        // when console is open or a popup menu is open
-        if (!gui.getMode() && !gui.consoleIsOpen()) {
-          internal.deleteFeatureById(targetLayer.layer, pinnedId());
-          self.clearSelection();
-          gui.model.updated({flags: 'filter'}); // signal map to update
+    self.getMode = function() {
+      return mode;
+    };
+
+    // return a function to trigger this mode
+    self.addMode = function(name, enter, exit, btn) {
+      self.on('mode', function(e) {
+        if (e.prev == name) {
+          exit();
+        }
+        if (e.name == name) {
+          enter();
         }
+      });
+      if (btn) {
+        new ModeButton(self, btn, name);
       }
-    }, !!'capture'); // preempt the layer control's arrow key handler
+    };
 
-    self.setLayer = function(mapLayer) {
-      hitTest = getPointerHitTest(mapLayer, ext);
-      if (!hitTest) {
-        hitTest = function() {return {ids: []};};
+    self.addMode(null, function() {}, function() {}); // null mode
+
+    self.clearMode = function() {
+      self.enterMode(null);
+    };
+
+    self.enterMode = function(next) {
+      var prev = mode;
+      if (next != prev) {
+        mode = next;
+        self.dispatchEvent('mode', {name: next, prev: prev});
       }
-      targetLayer = mapLayer;
     };
+  }
 
-    function turnOn(mode) {
-      interactionMode = mode;
-      active = true;
-    }
+  utils.inherit(ModeSwitcher, EventDispatcher);
 
-    function turnOff() {
-      if (active) {
-        updateSelectionState(null); // no hit data, no event
-        active = false;
-      }
-    }
+  function KeyboardEvents(gui) {
+    var self = this;
+    var shiftDown = false;
+    document.addEventListener('keyup', function(e) {
+      if (!GUI.isActiveInstance(gui)) return;
+      if (e.keyCode == 16) shiftDown = false;
+    });
 
-    function selectable() {
-      return interactionMode == 'selection';
-    }
+    document.addEventListener('keydown', function(e) {
+      if (!GUI.isActiveInstance(gui)) return;
+      if (e.keyCode == 16) shiftDown = true;
+      self.dispatchEvent('keydown', {originalEvent: e});
+    });
 
-    function pinnable() {
-      return clickable() && interactionMode != 'selection';
-    }
+    this.shiftIsPressed = function() { return shiftDown; };
 
-    function draggable() {
-      return interactionMode == 'vertices' || interactionMode == 'location' || interactionMode == 'labels';
-    }
+    this.onMenuSubmit = function(menuEl, cb) {
+      gui.on('enter_key', function(e) {
+        if (menuEl.visible()) {
+          e.originalEvent.stopPropagation();
+          cb();
+        }
+      });
+    };
+  }
 
-    function clickable() {
-      // click used to pin popup and select features
-      return interactionMode == 'data' || interactionMode == 'info' || interactionMode == 'selection';
-    }
+  utils.inherit(KeyboardEvents, EventDispatcher);
 
-    self.getHitId = function() {return storedData.id;};
+  function InteractionMode(gui) {
 
-    // Get a reference to the active layer, so listeners to hit events can interact
-    // with data and shapes
-    self.getHitTarget = function() {
-      return targetLayer;
+    var menus = {
+      standard: ['info', 'selection', 'data', 'box'],
+      lines: ['info', 'selection', 'data', 'box', 'vertices'],
+      table: ['info', 'selection', 'data'],
+      labels: ['info', 'selection', 'data', 'box', 'labels', 'location'],
+      points: ['info', 'selection', 'data', 'box', 'location']
     };
 
-    self.addSelectionIds = function(ids) {
-      turnOn('selection');
-      selectionIds = utils.uniq(selectionIds.concat(ids));
-      ids = utils.uniq(storedData.ids.concat(ids));
-      updateSelectionState({ids: ids});
+    var prompts = {
+      box: 'Shift-drag to draw a box',
+      data: 'Click-select features to edit their attributes',
+      selection: 'Click-select or shift-drag to select features'
     };
 
-    self.setTransientIds = function(ids) {
-      // turnOn('selection');
-      transientIds = ids || [];
-      if (active) {
-        triggerHitEvent('change');
-      }
+    // mode name -> menu text lookup
+    var labels = {
+      info: 'inspect features',
+      box: 'shift-drag box tool',
+      data: 'edit attributes',
+      labels: 'position labels',
+      location: 'drag points',
+      vertices: 'drag vertices',
+      selection: 'select features',
+      off: 'turn off'
     };
+    var btn, menu;
+    var _menuTimeout;
 
-    self.clearSelection = function() {
-      updateSelectionState(null);
-    };
+    // state variables
+    var _editMode = 'off';
+    var _menuOpen = false;
 
-    self.clearHover = function() {
-      updateSelectionState(mergeHoverData({ids: []}));
-    };
+    // Only render edit mode button/menu if this option is present
+    if (gui.options.inspectorControl) {
+      btn = gui.buttons.addButton('#pointer-icon').addClass('menu-btn');
+      menu = El('div').addClass('nav-sub-menu').appendTo(btn.node());
 
-    self.getSelectionIds = function() {
-      return selectionIds.concat();
-    };
+      btn.on('mouseleave', function() {
+        if (!_menuOpen) {
+          btn.removeClass('hover');
+        } else {
+          closeMenu(200);
+        }
+      });
 
-    self.getTargetDataTable = function() {
-      var targ = self.getHitTarget();
-      return targ && targ.layer.data || null;
+      btn.on('mouseenter', function() {
+        btn.addClass('hover');
+        if (_menuOpen) {
+          clearTimeout(_menuTimeout); // prevent timed closing
+        } else {
+          openMenu();
+        }
+        // if (_editMode != 'off') {
+        //   openMenu();
+        // }
+      });
+
+      btn.on('click', function(e) {
+        if (active()) {
+          setMode('off');
+          closeMenu();
+        } else if (_menuOpen) {
+          setMode('info'); // select info (inspect) as the default
+          // closeMenu(350);
+        } else {
+          openMenu();
+        }
+        e.stopPropagation();
+      });
+    }
+
+    this.turnOff = function() {
+      setMode('off');
     };
 
-    // get function for selecting next or prev feature within the current set of
-    // selected features
-    self.getSwitchTrigger = function(diff) {
-      return function() {
-        switchWithinSelection(diff);
-      };
+    this.getMode = getInteractionMode;
+
+    this.setMode = function(mode) {
+      // TODO: check that this mode is valid for the current dataset
+      if (mode in labels) {
+        setMode(mode);
+      }
     };
 
-    // diff: 1 or -1
-    function advanceSelectedFeature(diff) {
-      var n = internal.getFeatureCount(targetLayer.layer);
-      if (n < 2 || pinnedId() == -1) return;
-      storedData.id = (pinnedId() + n + diff) % n;
-      storedData.ids = [storedData.id];
-      triggerHitEvent('change');
+    gui.model.on('update', function(e) {
+      // change mode if active layer doesn't support the current mode
+      updateCurrentMode();
+      if (_menuOpen) {
+        renderMenu();
+      }
+    }, null, -1); // low priority?
+
+    function active() {
+      return _editMode && _editMode != 'off';
     }
 
-    // diff: 1 or -1
-    function switchWithinSelection(diff) {
-      var id = pinnedId();
-      var i = storedData.ids.indexOf(id);
-      var n = storedData.ids.length;
-      if (i < 0 || n < 2) return;
-      storedData.id = storedData.ids[(i + diff + n) % n];
-      triggerHitEvent('change');
+    function getAvailableModes() {
+      var o = gui.model.getActiveLayer();
+      if (!o || !o.layer) {
+        return menus.standard; // TODO: more sensible handling of missing layer
+      }
+      if (!internal.layerHasGeometry(o.layer)) {
+        return menus.table;
+      }
+      if (internal.layerHasLabels(o.layer)) {
+        return menus.labels;
+      }
+      if (internal.layerHasPoints(o.layer)) {
+        return menus.points;
+      }
+      if (internal.layerHasPaths(o.layer) && o.layer.geometry_type == 'polyline') {
+        return menus.lines;
+      }
+      return menus.standard;
+    }
+
+    function getInteractionMode() {
+      return active() ? _editMode : 'off';
+    }
+
+    function renderMenu() {
+      if (!menu) return;
+      var modes = getAvailableModes();
+      menu.empty();
+      modes.forEach(function(mode) {
+        // don't show "turn off" link if not currently editing
+        if (_editMode == 'off' && mode == 'off') return;
+        var link = El('div').addClass('nav-menu-item').attr('data-name', mode).text(labels[mode]).appendTo(menu);
+        link.on('click', function(e) {
+          if (_editMode == mode) {
+            // closeMenu();
+            setMode('off');
+          } else if (_editMode != mode) {
+            setMode(mode);
+            if (mode == 'off') closeMenu(120); // only close if turning off
+            // closeMenu(mode == 'off' ? 120 : 400); // close after selecting
+          }
+          e.stopPropagation();
+        });
+      });
+      updateSelectionHighlight();
     }
 
-    // make sure popup is unpinned and turned off when switching editing modes
-    // (some modes do not support pinning)
-    gui.on('interaction_mode_change', function(e) {
-      updateSelectionState(null);
-      if (e.mode == 'off' || e.mode == 'box') {
-        turnOff();
-      } else {
-        turnOn(e.mode);
+    // if current editing mode is not available, turn off the tool
+    function updateCurrentMode() {
+      var modes = getAvailableModes();
+      if (modes.indexOf(_editMode) == -1) {
+        setMode('off');
       }
-    });
-
-    gui.on('box_drag_start', function() {
-      self.clearHover();
-    });
+    }
 
-    mouse.on('dblclick', handlePointerEvent, null, priority);
-    mouse.on('dragstart', handlePointerEvent, null, priority);
-    mouse.on('drag', handlePointerEvent, null, priority);
-    mouse.on('dragend', handlePointerEvent, null, priority);
+    function openMenu() {
+      clearTimeout(_menuTimeout);
+      if (!_menuOpen) {
+        _menuOpen = true;
+        renderMenu();
+        updateArrowButton();
+      }
+    }
 
-    mouse.on('click', function(e) {
-      if (!hitTest || !active) return;
-      e.stopPropagation();
+    // Calling with a delay lets users see the menu update after clicking a selection,
+    // and prevents the menu from closing immediately if the pointer briefly drifts
+    // off the menu while hovering.
+    //
+    function closeMenu(delay) {
+      if (!_menuOpen) return;
+      clearTimeout(_menuTimeout);
+      _menuTimeout = setTimeout(function() {
+        _menuOpen = false;
+        updateArrowButton();
+      }, delay || 0);
+    }
 
-      // TODO: move pinning to inspection control?
-      if (clickable()) {
-        updateSelectionState(mergeClickData(hitTest(e)));
+    function setMode(mode) {
+      var changed = mode != _editMode;
+      if (changed) {
+        menu.classed('active', mode != 'off');
+        _editMode = mode;
+        onModeChange();
+        updateArrowButton();
+        updateSelectionHighlight();
       }
-      triggerHitEvent('click', e.data);
-    }, null, priority);
+    }
 
-    // Hits are re-detected on 'hover' (if hit detection is active)
-    mouse.on('hover', function(e) {
-      if (storedData.pinned || !hitTest || !active) return;
-      if (e.hover && isOverMap(e)) {
-        // mouse is hovering directly over map area -- update hit detection
-        updateSelectionState(mergeHoverData(hitTest(e)));
-      } else if (targetIsRollover(e.originalEvent.target)) {
-        // don't update hit detection if mouse is over the rollover (to prevent
-        // on-off flickering)
+    function onModeChange() {
+      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)
+    function updateArrowButton() {
+      if (!menu) return;
+      if (_menuOpen) {
+        btn.addClass('open');
       } else {
-        updateSelectionState(mergeHoverData({ids:[]}));
+        btn.removeClass('open');
       }
-    }, null, priority);
+      btn.classed('hover', _menuOpen);
+      // btn.classed('selected', active() && !_menuOpen);
+      btn.classed('selected', active());
+    }
 
-    function targetIsRollover(target) {
-      while (target.parentNode && target != target.parentNode) {
-        if (target.className && String(target.className).indexOf('rollover') > -1) {
-          return true;
-        }
-        target = target.parentNode;
-      }
-      return false;
+    function updateSelectionHighlight() {
+      El.findAll('.nav-menu-item').forEach(function(el) {
+        el = El(el);
+        el.classed('selected', el.attr('data-name') == _editMode);
+      });
     }
+  }
 
-    function noHitData() {return {ids: [], id: -1, pinned: false};}
+  function Model(gui) {
+    var self = new internal.Catalog();
+    var deleteLayer = self.deleteLayer;
+    utils.extend(self, EventDispatcher.prototype);
 
-    function mergeClickData(hitData) {
-      // mergeCurrentState(hitData);
-      // TOGGLE pinned state under some conditions
-      var id = hitData.ids.length > 0 ? hitData.ids[0] : -1;
-      hitData.id = id;
-      if (pinnable()) {
-        if (!storedData.pinned && id > -1) {
-          hitData.pinned = true; // add pin
-        } else if (storedData.pinned && storedData.id == id) {
-          delete hitData.pinned; // remove pin
-          // hitData.id = -1; // keep highlighting (pointer is still hovering)
-        } else if (storedData.pinned && id > -1) {
-          hitData.pinned = true; // stay pinned, switch id
+    // override Catalog method (so -drop command will work in web console)
+    self.deleteLayer = function(lyr, dataset) {
+      var active, flags;
+      deleteLayer.call(self, lyr, dataset);
+      if (self.isEmpty()) {
+        // refresh browser if deleted layer was the last layer
+        window.location.href = window.location.href.toString();
+      } else {
+        // trigger event to update layer list and, if needed, the map view
+        flags = {};
+        active = self.getActiveLayer();
+        if (active.layer != lyr) {
+          flags.select = true;
         }
-      }
-      if (selectable()) {
-        if (id > -1) {
-          selectionIds = toggleId(id, selectionIds);
+        internal.cleanupArcs(active.dataset);
+        if (internal.layerHasPaths(lyr)) {
+          flags.arc_count = true; // looks like a kludge, try to remove
         }
-        hitData.ids = selectionIds;
+        self.updated(flags, active.layer, active.dataset);
       }
-      return hitData;
-    }
+    };
 
-    function mergeHoverData(hitData) {
-      if (storedData.pinned) {
-        hitData.id = storedData.id;
-        hitData.pinned = true;
-      } else {
-        hitData.id = hitData.ids.length > 0 ? hitData.ids[0] : -1;
+    self.updated = function(flags) {
+      var targets = self.getDefaultTargets();
+      var active = self.getActiveLayer();
+      if (internal.countTargetLayers(targets) > 1) {
+        self.setDefaultTarget([active.layer], active.dataset);
+        gui.session.setTargetLayer(active.layer); // add -target command to target single layer
       }
-      if (selectable()) {
-        hitData.ids = selectionIds;
-        // kludge to inhibit hover effect while dragging a box
-        if (gui.keydown) hitData.id = -1;
+      if (flags.select) {
+        self.dispatchEvent('select', active);
       }
-      return hitData;
-    }
+      self.dispatchEvent('update', utils.extend({flags: flags}, active));
+    };
 
-    function pinnedId() {
-      return storedData.pinned ? storedData.id : -1;
-    }
+    self.selectLayer = function(lyr, dataset) {
+      if (self.getActiveLayer().layer == lyr) return;
+      self.setDefaultTarget([lyr], dataset);
+      self.updated({select: true});
+      gui.session.setTargetLayer(lyr);
+    };
 
-    function toggleId(id, ids) {
-      if (ids.indexOf(id) > -1) {
-        return utils.difference(ids, [id]);
-      }
-      return [id].concat(ids);
-    }
+    self.selectNextLayer = function() {
+      var next = self.findNextLayer(self.getActiveLayer().layer);
+      if (next) self.selectLayer(next.layer, next.dataset);
+    };
 
-    // If hit ids have changed, update stored hit ids and fire 'hover' event
-    // evt: (optional) mouse event
-    function updateSelectionState(newData) {
-      var nonEmpty = newData && (newData.ids.length || newData.id > -1);
-      transientIds = [];
-      if (!newData) {
-        newData = noHitData();
-        selectionIds = [];
-      }
-      if (!testHitChange(storedData, newData)) {
-        return;
-      }
-      storedData = newData;
-      gui.container.findChild('.map-layers').classed('symbol-hit', nonEmpty);
-      if (active) {
-        triggerHitEvent('change');
-      }
+    self.selectPrevLayer = function() {
+      var prev = self.findPrevLayer(self.getActiveLayer().layer);
+      if (prev) self.selectLayer(prev.layer, prev.dataset);
+    };
+
+    return self;
+  }
+
+  function getShapeHitTest(displayLayer, ext) {
+    var geoType = displayLayer.layer.geometry_type;
+    var test;
+    if (geoType == 'point' && displayLayer.style.type == 'styled') {
+      test = getGraduatedCircleTest(getRadiusFunction(displayLayer.style));
+    } else if (geoType == 'point') {
+      test = pointTest;
+    } else if (geoType == 'polyline') {
+      test = polylineTest;
+    } else if (geoType == 'polygon') {
+      test = polygonTest;
+    } else {
+      error("Unexpected geometry type:", geoType);
     }
+    return test;
 
-    // check if an event is used in the current interaction mode
-    function eventIsEnabled(type) {
-      if (type == 'click' && !clickable()) {
-        return false;
-      }
-      if ((type == 'drag' || type == 'dragstart' || type == 'dragend') && !draggable()) {
-        return false;
-      }
-      return true;
+    // Convert pixel distance to distance in coordinate units.
+    function getHitBuffer(pix) {
+      return pix / ext.getTransform().mx;
     }
 
-    function isOverMap(e) {
-      return e.x >= 0 && e.y >= 0 && e.x < ext.width() && e.y < ext.height();
+    // reduce hit threshold when zoomed out
+    function getZoomAdjustedHitBuffer(pix, minPix) {
+      var scale = ext.scale();
+      if (scale < 1) {
+        pix *= scale;
+      }
+      if (minPix > 0 && pix < minPix) pix = minPix;
+      return getHitBuffer(pix);
     }
 
-    function handlePointerEvent(e) {
-      if (!hitTest || !active) return;
-      if (self.getHitId() == -1) return; // ignore pointer events when no features are being hit
-      // don't block pan and other navigation in modes when they are not being used
-      if (eventIsEnabled(e.type)) {
-        e.stopPropagation(); // block navigation
-        triggerHitEvent(e.type, e.data);
+    function polygonTest(x, y) {
+      var maxDist = getZoomAdjustedHitBuffer(5, 1),
+          cands = findHitCandidates(x, y, maxDist),
+          hits = [],
+          cand, hitId;
+      for (var i=0; i<cands.length; i++) {
+        cand = cands[i];
+        if (geom.testPointInPolygon(x, y, cand.shape, displayLayer.arcs)) {
+          hits.push(cand.id);
+        }
+      }
+      if (cands.length > 0 && hits.length === 0) {
+        // secondary detection: proximity, if not inside a polygon
+        sortByDistance(x, y, cands, displayLayer.arcs);
+        hits = pickNearestCandidates(cands, 0, maxDist);
       }
+      return hits;
     }
 
-    // d: event data (may be a pointer event object, an ordinary object or null)
-    function triggerHitEvent(type, d) {
-      // Merge stored hit data into the event data
-      var eventData = utils.extend({mode: interactionMode}, d || {}, storedData);
-      if (transientIds.length) {
-        eventData.ids = utils.uniq(transientIds.concat(eventData.ids || []));
+    function pickNearestCandidates(sorted, bufDist, maxDist) {
+      var hits = [],
+          cand, minDist;
+      for (var i=0; i<sorted.length; i++) {
+        cand = sorted[i];
+        if (cand.dist < maxDist !== true) {
+          break;
+        } else if (i === 0) {
+          minDist = cand.dist;
+        } else if (cand.dist - minDist > bufDist) {
+          break;
+        }
+        hits.push(cand.id);
       }
-      self.dispatchEvent(type, eventData);
+      return hits;
     }
 
-    // Test if two hit data objects are equivalent
-    function testHitChange(a, b) {
-      // check change in 'container', e.g. so moving from anchor hit to label hit
-      //   is detected
-      if (sameIds(a.ids, b.ids) && a.container == b.container && a.pinned == b.pinned && a.id == b.id) {
-        return false;
-      }
-      return true;
+    function polylineTest(x, y) {
+      var maxDist = getZoomAdjustedHitBuffer(15, 2),
+          bufDist = getZoomAdjustedHitBuffer(0.05), // tiny threshold for hitting almost-identical lines
+          cands = findHitCandidates(x, y, maxDist);
+      sortByDistance(x, y, cands, displayLayer.arcs);
+      return pickNearestCandidates(cands, bufDist, maxDist);
     }
 
-    function sameIds(a, b) {
-      if (a.length != b.length) return false;
-      for (var i=0; i<a.length; i++) {
-        if (a[i] !== b[i]) return false;
+    function sortByDistance(x, y, cands, arcs) {
+      for (var i=0; i<cands.length; i++) {
+        cands[i].dist = geom.getPointToShapeDistance(x, y, cands[i].shape, arcs);
       }
-      return true;
+      utils.sortOn(cands, 'dist');
     }
 
-    return self;
-  }
-
-  function CoordinatesDisplay(gui, ext, mouse) {
-    var readout = gui.container.findChild('.coordinate-info').hide();
-    var enabled = false;
-
-    gui.model.on('select', function(e) {
-      enabled = !!e.layer.geometry_type; // no display on tabular layers
-      readout.hide();
-    });
-
-    readout.on('copy', function(e) {
-      // remove selection on copy (using timeout or else copy is cancelled)
-      setTimeout(function() {
-        window.getSelection().removeAllRanges();
-      }, 50);
-    });
-
-    // clear coords when map pans
-    ext.on('change', function() {
-      clearCoords();
-      // shapes may change along with map scale
-      // target = lyr ? lyr.getDisplayLayer() : null;
-    });
-
-    mouse.on('leave', clearCoords);
-
-    mouse.on('click', function(e) {
-      if (!enabled) return;
-      GUI.selectElement(readout.node());
-    });
-
-    mouse.on('hover', onMouseChange);
-    mouse.on('drag', onMouseChange, null, 10); // high priority so editor doesn't block propagation
+    function pointTest(x, y) {
+      var bullseyeDist = 2, // hit all points w/in 2 px
+          tinyDist = 0.5,
+          toPx = ext.getTransform().mx,
+          hits = [],
+          hitThreshold = 25,
+          newThreshold = Infinity;
 
-    function onMouseChange(e) {
-      if (!enabled) return;
-      if (isOverMap(e)) {
-        displayCoords(ext.translatePixelCoords(e.x, e.y));
-      } else {
-        clearCoords();
-      }
+      internal.forEachPoint(displayLayer.layer.shapes, function(p, id) {
+        var dist = geom.distance2D(x, y, p[0], p[1]) * toPx;
+        if (dist > hitThreshold) return;
+        // got a hit
+        if (dist < newThreshold) {
+          // start a collection of hits
+          hits = [id];
+          hitThreshold = Math.max(bullseyeDist, dist + tinyDist);
+          newThreshold = dist < bullseyeDist ? -1 : dist - tinyDist;
+        } else {
+          // add to hits if inside bullseye or is same dist as previous hit
+          hits.push(id);
+        }
+      });
+      // console.log(hitThreshold, bullseye);
+      return utils.uniq(hits); // multipoint features can register multiple hits
     }
 
-    function displayCoords(p) {
-      var decimals = internal.getBoundsPrecisionForDisplay(ext.getBounds().toArray());
-      var str = internal.getRoundedCoordString(p, decimals);
-      readout.text(str).show();
+    function getRadiusFunction(style) {
+      var o = {};
+      if (style.styler) {
+        return function(i) {
+          style.styler(o, i);
+          return o.radius || 0;
+        };
+      }
+      return function() {return style.radius || 0;};
     }
 
-    function clearCoords() {
-      readout.hide();
+    function getGraduatedCircleTest(radius) {
+      return function(x, y) {
+        var hits = [],
+            margin = getHitBuffer(12),
+            limit = getHitBuffer(50), // short-circuit hit test beyond this threshold
+            directHit = false,
+            hitRadius = 0,
+            hitDist;
+        internal.forEachPoint(displayLayer.layer.shapes, function(p, id) {
+          var distSq = geom.distanceSq(x, y, p[0], p[1]);
+          var isHit = false;
+          var isOver, isNear, r, d, rpix;
+          if (distSq > limit * limit) return;
+          rpix = radius(id);
+          r = getHitBuffer(rpix + 1); // increase effective radius to make small bubbles easier to hit in clusters
+          d = Math.sqrt(distSq) - r; // pointer distance from edge of circle (negative = inside)
+          isOver = d < 0;
+          isNear = d < margin;
+          if (!isNear || rpix > 0 === false) {
+            isHit = false;
+          } else if (hits.length === 0) {
+            isHit = isNear;
+          } else if (!directHit && isOver) {
+            isHit = true;
+          } else if (directHit && isOver) {
+            isHit = r == hitRadius ? d <= hitDist : r < hitRadius; // smallest bubble wins if multiple direct hits
+          } else if (!directHit && !isOver) {
+            // closest to bubble edge wins
+            isHit = hitDist == d ? r <= hitRadius : d < hitDist; // closest bubble wins if multiple indirect hits
+          }
+          if (isHit) {
+            if (hits.length > 0 && (r != hitRadius || d != hitDist)) {
+              hits = [];
+            }
+            hitRadius = r;
+            hitDist = d;
+            directHit = isOver;
+            hits.push(id);
+          }
+        });
+        return hits;
+      };
     }
 
-    function isOverMap(e) {
-      return e.x >= 0 && e.y >= 0 && e.x < ext.width() && e.y < ext.height();
+    function findHitCandidates(x, y, dist) {
+      var arcs = displayLayer.arcs,
+          index = {},
+          cands = [],
+          bbox = [];
+      displayLayer.layer.shapes.forEach(function(shp, shpId) {
+        var cand;
+        for (var i = 0, n = shp && shp.length; i < n; i++) {
+          arcs.getSimpleShapeBounds2(shp[i], bbox);
+          if (x + dist < bbox[0] || x - dist > bbox[2] ||
+            y + dist < bbox[1] || y - dist > bbox[3]) {
+            continue; // bbox non-intersection
+          }
+          cand = index[shpId];
+          if (!cand) {
+            cand = index[shpId] = {shape: [], id: shpId, dist: 0};
+            cands.push(cand);
+          }
+          cand.shape.push(shp[i]);
+        }
+      });
+      return cands;
     }
   }
 
-  function getTimerFunction() {
-    return typeof requestAnimationFrame == 'function' ?
-      requestAnimationFrame : function(cb) {setTimeout(cb, 25);};
-  }
-
-  function Timer() {
-    var self = this,
-        running = false,
-        busy = false,
-        tickTime, startTime, duration;
-
-    this.start = function(ms) {
-      var now = +new Date();
-      duration = ms || Infinity;
-      startTime = now;
-      running = true;
-      if (!busy) startTick(now);
-    };
+  function getSvgHitTest(displayLayer) {
 
-    this.stop = function() {
-      running = false;
+    return function(pointerEvent) {
+      // target could be a part of an SVG symbol, or the SVG element, or something else
+      var target = pointerEvent.originalEvent.target;
+      var symbolNode = getSymbolNode(target);
+      if (!symbolNode) {
+        return null;
+      }
+      return {
+        targetId: getSymbolNodeId(symbolNode), // TODO: some validation on id
+        targetSymbol: symbolNode,
+        targetNode: target,
+        container: symbolNode.parentNode
+      };
     };
 
-    function startTick(now) {
-      busy = true;
-      tickTime = now;
-      getTimerFunction()(onTick);
-    }
-
-    function onTick() {
-      var now = +new Date(),
-          elapsed = now - startTime,
-          pct = Math.min((elapsed + 10) / duration, 1),
-          done = pct >= 1;
-      if (!running) { // interrupted
-        busy = false;
-        return;
+    // target: event target (could be any DOM element)
+    function getSymbolNode(target) {
+      var node = target;
+      while (node && nodeHasSymbolTagType(node)) {
+        if (isSymbolNode(node)) {
+          return node;
+        }
+        node = node.parentElement;
       }
-      if (done) running = false;
-      self.dispatchEvent('tick', {
-        elapsed: elapsed,
-        pct: pct,
-        done: done,
-        time: now,
-        tickTime: now - tickTime
-      });
-      busy = false;
-      if (running) startTick(now);
+      return null;
     }
-  }
-
-  utils.inherit(Timer, EventDispatcher);
 
-  function Tween(ease) {
-    var self = this,
-        timer = new Timer(),
-        start, end;
+    // TODO: switch to attribute detection
+    function nodeHasSymbolTagType(node) {
+      var tag = node.tagName;
+      return tag == 'g' || tag == 'tspan' || tag == 'text' || tag == 'image' ||
+        tag == 'path' || tag == 'circle' || tag == 'rect' || tag == 'line';
+    }
 
-    timer.on('tick', onTick);
+    function isSymbolNode(node) {
+      return node.hasAttribute('data-id') && (node.tagName == 'text' || node.tagName == 'g');
+    }
 
-    this.start = function(a, b, duration) {
-      start = a;
-      end = b;
-      timer.start(duration || 500);
-    };
+    function isSymbolChildNode(node) {
 
-    function onTick(e) {
-      var pct = ease ? ease(e.pct) : e.pct,
-          val = end * pct + start * (1 - pct);
-      self.dispatchEvent('change', {value: val});
     }
-  }
 
-  utils.inherit(Tween, EventDispatcher);
+    function getChildId(childNode) {
 
-  Tween.sineInOut = function(n) {
-    return 0.5 - Math.cos(n * Math.PI) / 2;
-  };
+    }
 
-  Tween.quadraticOut = function(n) {
-    return 1 - Math.pow((1 - n), 2);
-  };
+    function getSymbolId(symbolNode) {
 
-  function ElementPosition(ref) {
-    var self = this,
-        el = El(ref),
-        pageX = 0,
-        pageY = 0,
-        width = 0,
-        height = 0;
+    }
 
-    el.on('mouseover', update);
-    if (window.onorientationchange) window.addEventListener('orientationchange', update);
-    window.addEventListener('scroll', update);
-    window.addEventListener('resize', update);
+    function getFeatureId(symbolNode) {
 
-    // trigger an update, e.g. when map container is resized
-    this.update = function() {
-      update();
-    };
+    }
 
-    this.resize = function(w, h) {
-      el.css('width', w).css('height', h);
-      update();
-    };
+  }
 
-    this.width = function() { return width; };
-    this.height = function() { return height; };
-    this.position = function() {
-      return {
-        element: el.node(),
-        pageX: pageX,
-        pageY: pageY,
-        width: width,
-        height: height
-      };
-    };
+  function getPointerHitTest(mapLayer, ext) {
+    var shapeTest, svgTest, targetLayer;
+    if (!mapLayer || !internal.layerHasGeometry(mapLayer.layer)) {
+      return null;
+    }
+    shapeTest = getShapeHitTest(mapLayer, ext);
+    svgTest = getSvgHitTest(mapLayer);
 
-    function update() {
-      var div = el.node(),
-          xy = getPageXY(div),
-          w = div.clientWidth,
-          h = div.clientHeight,
-          x = xy.x,
-          y = xy.y,
-          resized = w != width || h != height,
-          moved = x != pageX || y != pageY;
-      if (resized || moved) {
-        pageX = x;
-        pageY = y;
-        width = w;
-        height = h;
-        self.dispatchEvent('change', self.position());
-        if (resized) {
-          self.dispatchEvent('resize', self.position());
-        }
+    // e: pointer event
+    return function(e) {
+      var p = ext.translatePixelCoords(e.x, e.y);
+      var data = {
+        ids: shapeTest(p[0], p[1]) || []
+      };
+      var svgData = svgTest(e); // null or a data object
+      if (svgData) { // mouse is over an SVG symbol
+        utils.extend(data, svgData);
+        // placing symbol id in front of any other hits
+        data.ids = utils.uniq([svgData.targetId].concat(data.ids));
       }
-    }
-    update();
+      data.id = data.ids.length > 0 ? data.ids[0] : -1;
+      return data;
+    };
   }
 
-  utils.inherit(ElementPosition, EventDispatcher);
+  function InteractiveSelection(gui, ext, mouse) {
+    var self = new EventDispatcher();
+    var storedData = noHitData(); // may include additional data from SVG symbol hit (e.g. hit node)
+    var selectionIds = [];
+    var transientIds = []; // e.g. hit ids while dragging a box
+    var active = false;
+    var interactionMode;
+    var targetLayer;
+    var hitTest;
+    // event priority is higher than navigation, so stopping propagation disables
+    // pan navigation
+    var priority = 2;
 
-  function MouseWheelDirection() {
-    var prevTime = 0;
-    var getAvgDir;
+    // init keyboard controls for pinned features
+    gui.keyboard.on('keydown', function(evt) {
+      var e = evt.originalEvent;
 
-    // returns 1, -1 or 0 to indicate direction of scroll
-    // use avg of three values, as a buffer against single anomalous values
-    return function(e, now) {
-      var delta = e.wheelDelta || -e.detail || 0;
-      var dir = delta > 0 && 1 || delta < 0 && -1 || 0;
-      var avg;
-      if (!getAvgDir || now - prevTime > 300) {
-        getAvgDir =  LimitedAverage(3); // reset if wheel has paused
-      }
-      prevTime = now;
-      avg = getAvgDir(dir) || dir; // handle average == 0
-      return avg > 0 && 1 || avg < 0 && -1 || 0;
-    };
-  }
+      if (gui.interaction.getMode() == 'off' || !targetLayer) return;
 
-  function LimitedAverage(maxSize) {
-    var arr = [];
-    return function(val) {
-      var sum = 0,
-          i = -1;
-      arr.push(val);
-      if (arr.length > maxSize) arr.shift();
-      while (++i < arr.length) {
-        sum += arr[i];
+      // esc key clears selection (unless in an editing mode -- esc key also exits current mode)
+      if (e.keyCode == 27 && !gui.getMode()) {
+        self.clearSelection();
+        return;
       }
-      return sum / arr.length;
-    };
-  }
-
-  // @mouse: MouseArea object
-  function MouseWheel(mouse) {
-    var self = this,
-        active = false,
-        timer = new Timer().addEventListener('tick', onTick),
-        sustainInterval = 150,
-        fadeDelay = 70,
-        eventTime = 0,
-        getAverageRate = LimitedAverage(10),
-        getWheelDirection = MouseWheelDirection(),
-        wheelDirection;
 
-    if (window.onmousewheel !== undefined) { // ie, webkit
-      window.addEventListener('mousewheel', handleWheel, {passive: false});
-    } else { // firefox
-      window.addEventListener('DOMMouseScroll', handleWheel);
-    }
+      // ignore keypress if no feature is selected or user is editing text
+      if (pinnedId() == -1 || GUI.getInputElement()) return;
 
-    function updateSustainInterval(eventRate) {
-      var fadeInterval = 80;
-      fadeDelay = eventRate + 50; // adding a little extra time helps keep trackpad scrolling smooth in Firefox
-      sustainInterval = fadeDelay + fadeInterval;
-    }
+      if (e.keyCode == 37 || e.keyCode == 39) {
+        // L/R arrow keys
+        // advance pinned feature
+        advanceSelectedFeature(e.keyCode == 37 ? -1 : 1);
+        e.stopPropagation();
 
-    function handleWheel(evt) {
-      var now = +new Date();
-      wheelDirection = getWheelDirection(evt, now);
-      if (evt.ctrlKey) {
-        // Prevent pinch-zoom in Chrome (doesn't work in Safari, though)
-        evt.preventDefault();
-        evt.stopImmediatePropagation();
-      }
-      if (!mouse.isOver()) return;
-      if (wheelDirection === 0) {
-        // first event may not have a direction, e.g. if 'smooth scrolling' is on
-        return;
+      } else if (e.keyCode == 8) {
+        // DELETE key
+        // delete pinned feature
+        // to help protect against inadvertent deletion, don't delete
+        // when console is open or a popup menu is open
+        if (!gui.getMode() && !gui.consoleIsOpen()) {
+          internal.deleteFeatureById(targetLayer.layer, pinnedId());
+          self.clearSelection();
+          gui.model.updated({flags: 'filter'}); // signal map to update
+        }
       }
-      evt.preventDefault();
-      if (!active) {
-        active = true;
-        self.dispatchEvent('mousewheelstart');
-      } else {
-        updateSustainInterval(getAverageRate(now - eventTime));
+    }, !!'capture'); // preempt the layer control's arrow key handler
+
+    self.setLayer = function(mapLayer) {
+      hitTest = getPointerHitTest(mapLayer, ext);
+      if (!hitTest) {
+        hitTest = function() {return {ids: []};};
       }
-      eventTime = now;
-      timer.start(sustainInterval);
+      targetLayer = mapLayer;
+    };
+
+    function turnOn(mode) {
+      interactionMode = mode;
+      active = true;
     }
 
-    function onTick(evt) {
-      var tickInterval = evt.time - eventTime,
-          multiplier = evt.tickTime / 25,
-          fadeFactor = 0,
-          obj;
-      if (tickInterval > fadeDelay) {
-        fadeFactor = Math.min(1, (tickInterval - fadeDelay) / (sustainInterval - fadeDelay));
-      }
-      if (evt.done) {
+    function turnOff() {
+      if (active) {
+        updateSelectionState(null); // no hit data, no event
         active = false;
-      } else {
-        if (fadeFactor > 0) {
-          // Decelerate towards the end of the sustain interval (for smoother zooming)
-          multiplier *= Tween.quadraticOut(1 - fadeFactor);
-        }
-        obj = utils.extend({direction: wheelDirection, multiplier: multiplier}, mouse.mouseData());
-        self.dispatchEvent('mousewheel', obj);
       }
     }
-  }
 
-  utils.inherit(MouseWheel, EventDispatcher);
+    function selectable() {
+      return interactionMode == 'selection';
+    }
 
+    function pinnable() {
+      return clickable() && interactionMode != 'selection';
+    }
 
-  function MouseArea(element, pos) {
-    var _pos = pos || new ElementPosition(element),
-        _areaPos = _pos.position(),
-        _self = this,
-        _dragging = false,
-        _isOver = false,
-        _disabled = false,
-        _prevEvt,
-        _downEvt;
+    function draggable() {
+      return interactionMode == 'vertices' || interactionMode == 'location' || interactionMode == 'labels';
+    }
 
-    _pos.on('change', function() {_areaPos = _pos.position();});
-    // TODO: think about touch events
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mousedown', onMouseDown);
-    document.addEventListener('mouseup', onMouseUp);
-    element.addEventListener('mouseover', onAreaEnter);
-    element.addEventListener('mousemove', onAreaEnter);
-    element.addEventListener('mouseout', onAreaOut);
-    element.addEventListener('mousedown', onAreaDown);
-    element.addEventListener('dblclick', onAreaDblClick);
+    function clickable() {
+      // click used to pin popup and select features
+      return interactionMode == 'data' || interactionMode == 'info' || interactionMode == 'selection';
+    }
 
-    this.enable = function() {
-      if (!_disabled) return;
-      _disabled = false;
-      element.style.pointerEvents = 'auto';
+    self.getHitId = function() {return storedData.id;};
+
+    // Get a reference to the active layer, so listeners to hit events can interact
+    // with data and shapes
+    self.getHitTarget = function() {
+      return targetLayer;
     };
 
-    this.stopDragging = function() {
-      if (_downEvt) {
-        if (_dragging) stopDragging(_downEvt);
-        _downEvt = null;
+    self.addSelectionIds = function(ids) {
+      turnOn('selection');
+      selectionIds = utils.uniq(selectionIds.concat(ids));
+      ids = utils.uniq(storedData.ids.concat(ids));
+      updateSelectionState({ids: ids});
+    };
+
+    self.setTransientIds = function(ids) {
+      // turnOn('selection');
+      transientIds = ids || [];
+      if (active) {
+        triggerHitEvent('change');
       }
     };
 
-    this.disable = function() {
-      if (_disabled) return;
-      _disabled = true;
-      if (_isOver) onAreaOut();
-      this.stopDragging();
-      element.style.pointerEvents = 'none';
+    self.clearSelection = function() {
+      updateSelectionState(null);
     };
 
-    this.isOver = function() {
-      return _isOver;
+    self.clearHover = function() {
+      updateSelectionState(mergeHoverData({ids: []}));
     };
 
-    this.isDown = function() {
-      return !!_downEvt;
+    self.getSelectionIds = function() {
+      return selectionIds.concat();
     };
 
-    this.mouseData = function() {
-      return utils.extend({}, _prevEvt);
+    self.getTargetDataTable = function() {
+      var targ = self.getHitTarget();
+      return targ && targ.layer.data || null;
     };
 
-    function onAreaDown(e) {
-      e.preventDefault(); // prevent text selection cursor on drag
+    // get function for selecting next or prev feature within the current set of
+    // selected features
+    self.getSwitchTrigger = function(diff) {
+      return function() {
+        switchWithinSelection(diff);
+      };
+    };
+
+    // diff: 1 or -1
+    function advanceSelectedFeature(diff) {
+      var n = internal.getFeatureCount(targetLayer.layer);
+      if (n < 2 || pinnedId() == -1) return;
+      storedData.id = (pinnedId() + n + diff) % n;
+      storedData.ids = [storedData.id];
+      triggerHitEvent('change');
     }
 
-    function onAreaEnter() {
-      if (!_isOver) {
-        _isOver = true;
-        _self.dispatchEvent('enter');
-      }
+    // diff: 1 or -1
+    function switchWithinSelection(diff) {
+      var id = pinnedId();
+      var i = storedData.ids.indexOf(id);
+      var n = storedData.ids.length;
+      if (i < 0 || n < 2) return;
+      storedData.id = storedData.ids[(i + diff + n) % n];
+      triggerHitEvent('change');
     }
 
-    function onAreaOut() {
-      _isOver = false;
-      _self.dispatchEvent('leave');
+    // make sure popup is unpinned and turned off when switching editing modes
+    // (some modes do not support pinning)
+    gui.on('interaction_mode_change', function(e) {
+      updateSelectionState(null);
+      if (e.mode == 'off' || e.mode == 'box') {
+        turnOff();
+      } else {
+        turnOn(e.mode);
+      }
+    });
+
+    gui.on('box_drag_start', function() {
+      self.clearHover();
+    });
+
+    mouse.on('dblclick', handlePointerEvent, null, priority);
+    mouse.on('dragstart', handlePointerEvent, null, priority);
+    mouse.on('drag', handlePointerEvent, null, priority);
+    mouse.on('dragend', handlePointerEvent, null, priority);
+
+    mouse.on('click', function(e) {
+      if (!hitTest || !active) return;
+      e.stopPropagation();
+
+      // TODO: move pinning to inspection control?
+      if (clickable()) {
+        updateSelectionState(mergeClickData(hitTest(e)));
+      }
+      triggerHitEvent('click', e.data);
+    }, null, priority);
+
+    // Hits are re-detected on 'hover' (if hit detection is active)
+    mouse.on('hover', function(e) {
+      if (storedData.pinned || !hitTest || !active) return;
+      if (e.hover && isOverMap(e)) {
+        // mouse is hovering directly over map area -- update hit detection
+        updateSelectionState(mergeHoverData(hitTest(e)));
+      } else if (targetIsRollover(e.originalEvent.target)) {
+        // don't update hit detection if mouse is over the rollover (to prevent
+        // on-off flickering)
+      } else {
+        updateSelectionState(mergeHoverData({ids:[]}));
+      }
+    }, null, priority);
+
+    function targetIsRollover(target) {
+      while (target.parentNode && target != target.parentNode) {
+        if (target.className && String(target.className).indexOf('rollover') > -1) {
+          return true;
+        }
+        target = target.parentNode;
+      }
+      return false;
     }
 
-    function onMouseUp(e) {
-      var evt = procMouseEvent(e),
-          elapsed, dx, dy;
-      if (_dragging) {
-        stopDragging(evt);
+    function noHitData() {return {ids: [], id: -1, pinned: false};}
+
+    function mergeClickData(hitData) {
+      // mergeCurrentState(hitData);
+      // TOGGLE pinned state under some conditions
+      var id = hitData.ids.length > 0 ? hitData.ids[0] : -1;
+      hitData.id = id;
+      if (pinnable()) {
+        if (!storedData.pinned && id > -1) {
+          hitData.pinned = true; // add pin
+        } else if (storedData.pinned && storedData.id == id) {
+          delete hitData.pinned; // remove pin
+          // hitData.id = -1; // keep highlighting (pointer is still hovering)
+        } else if (storedData.pinned && id > -1) {
+          hitData.pinned = true; // stay pinned, switch id
+        }
       }
-      if (_downEvt) {
-        elapsed = evt.time - _downEvt.time;
-        dx = evt.pageX - _downEvt.pageX;
-        dy = evt.pageY - _downEvt.pageY;
-        if (_isOver && elapsed < 500 && Math.sqrt(dx * dx + dy * dy) < 6) {
-          _self.dispatchEvent('click', evt);
+      if (selectable()) {
+        if (id > -1) {
+          selectionIds = toggleId(id, selectionIds);
         }
-        _downEvt = null;
+        hitData.ids = selectionIds;
+      }
+      return hitData;
+    }
+
+    function mergeHoverData(hitData) {
+      if (storedData.pinned) {
+        hitData.id = storedData.id;
+        hitData.pinned = true;
+      } else {
+        hitData.id = hitData.ids.length > 0 ? hitData.ids[0] : -1;
+      }
+      if (selectable()) {
+        hitData.ids = selectionIds;
+        // kludge to inhibit hover effect while dragging a box
+        if (gui.keydown) hitData.id = -1;
+      }
+      return hitData;
+    }
+
+    function pinnedId() {
+      return storedData.pinned ? storedData.id : -1;
+    }
+
+    function toggleId(id, ids) {
+      if (ids.indexOf(id) > -1) {
+        return utils.difference(ids, [id]);
+      }
+      return [id].concat(ids);
+    }
+
+    // If hit ids have changed, update stored hit ids and fire 'hover' event
+    // evt: (optional) mouse event
+    function updateSelectionState(newData) {
+      var nonEmpty = newData && (newData.ids.length || newData.id > -1);
+      transientIds = [];
+      if (!newData) {
+        newData = noHitData();
+        selectionIds = [];
+      }
+      if (!testHitChange(storedData, newData)) {
+        return;
+      }
+      storedData = newData;
+      gui.container.findChild('.map-layers').classed('symbol-hit', nonEmpty);
+      if (active) {
+        triggerHitEvent('change');
+      }
+    }
+
+    // check if an event is used in the current interaction mode
+    function eventIsEnabled(type) {
+      if (type == 'click' && !clickable()) {
+        return false;
+      }
+      if ((type == 'drag' || type == 'dragstart' || type == 'dragend') && !draggable()) {
+        return false;
       }
+      return true;
     }
 
-    function stopDragging(evt) {
-      _dragging = false;
-      _self.dispatchEvent('dragend', evt);
+    function isOverMap(e) {
+      return e.x >= 0 && e.y >= 0 && e.x < ext.width() && e.y < ext.height();
     }
 
-    function onMouseDown(e) {
-     if (e.button != 2 && e.which != 3) { // ignore right-click
-        _downEvt = procMouseEvent(e);
+    function handlePointerEvent(e) {
+      if (!hitTest || !active) return;
+      if (self.getHitId() == -1) return; // ignore pointer events when no features are being hit
+      // don't block pan and other navigation in modes when they are not being used
+      if (eventIsEnabled(e.type)) {
+        e.stopPropagation(); // block navigation
+        triggerHitEvent(e.type, e.data);
       }
     }
 
-    function onMouseMove(e) {
-      var evt = procMouseEvent(e);
-      if (!_dragging && _downEvt && _downEvt.hover) {
-        _dragging = true;
-        _self.dispatchEvent('dragstart', evt);
-      }
-      if (evt.dx === 0 && evt.dy === 0) return; // seen in Chrome
-      if (_dragging) {
-        var obj = {
-          dragX: evt.pageX - _downEvt.pageX,
-          dragY: evt.pageY - _downEvt.pageY
-        };
-        _self.dispatchEvent('drag', utils.extend(obj, evt));
-      } else {
-        _self.dispatchEvent('hover', evt);
+    // d: event data (may be a pointer event object, an ordinary object or null)
+    function triggerHitEvent(type, d) {
+      // Merge stored hit data into the event data
+      var eventData = utils.extend({mode: interactionMode}, d || {}, storedData);
+      if (transientIds.length) {
+        eventData.ids = utils.uniq(transientIds.concat(eventData.ids || []));
       }
+      self.dispatchEvent(type, eventData);
     }
 
-    function onAreaDblClick(e) {
-      if (_isOver) _self.dispatchEvent('dblclick', procMouseEvent(e));
+    // Test if two hit data objects are equivalent
+    function testHitChange(a, b) {
+      // check change in 'container', e.g. so moving from anchor hit to label hit
+      //   is detected
+      if (sameIds(a.ids, b.ids) && a.container == b.container && a.pinned == b.pinned && a.id == b.id) {
+        return false;
+      }
+      return true;
     }
 
-    function procMouseEvent(e) {
-      var pageX = e.pageX,
-          pageY = e.pageY,
-          prev = _prevEvt;
-      _prevEvt = {
-        originalEvent: e,
-        shiftKey: e.shiftKey,
-        metaKey: e.metaKey,
-        ctrlKey: e.ctrlKey,
-        time: +new Date(),
-        pageX: pageX,
-        pageY: pageY,
-        hover: _isOver,
-        x: pageX - _areaPos.pageX,
-        y: pageY - _areaPos.pageY,
-        dx: prev ? pageX - prev.pageX : 0,
-        dy: prev ? pageY - prev.pageY : 0
-      };
-      return _prevEvt;
+    function sameIds(a, b) {
+      if (a.length != b.length) return false;
+      for (var i=0; i<a.length; i++) {
+        if (a[i] !== b[i]) return false;
+      }
+      return true;
     }
+
+    return self;
   }
 
-  utils.inherit(MouseArea, EventDispatcher);
+  function CoordinatesDisplay(gui, ext, mouse) {
+    var readout = gui.container.findChild('.coordinate-info').hide();
+    var enabled = false;
 
-  function initVariableClick(node, cb) {
-    var downEvent = null;
-    var downTime = 0;
+    gui.model.on('select', function(e) {
+      enabled = !!e.layer.geometry_type; // no display on tabular layers
+      readout.hide();
+    });
 
-    node.addEventListener('mousedown', function(e) {
-      downEvent = e;
-      downTime = Date.now();
+    readout.on('copy', function(e) {
+      // remove selection on copy (using timeout or else copy is cancelled)
+      setTimeout(function() {
+        window.getSelection().removeAllRanges();
+      }, 50);
     });
 
-    node.addEventListener('mouseup', function(upEvent) {
-      if (!downEvent) return;
-      var shift = Math.abs(downEvent.pageX - upEvent.pageX) +
-          Math.abs(downEvent.pageY - upEvent.pageY);
-      var elapsed = Date.now() - downTime;
-      if (shift > 5 || elapsed > 1000) return;
-      downEvent = null;
-      cb({time: elapsed});
+    // clear coords when map pans
+    ext.on('change', function() {
+      clearCoords();
+      // shapes may change along with map scale
+      // target = lyr ? lyr.getDisplayLayer() : null;
     });
-  }
 
-  function MapNav(gui, ext, mouse) {
-    var wheel = new MouseWheel(mouse),
-        zoomTween = new Tween(Tween.sineInOut),
-        boxDrag = false,
-        zoomScaleMultiplier = 1,
-        inBtn, outBtn,
-        dragStartEvt,
-        _fx, _fy; // zoom foci, [0,1]
+    mouse.on('leave', clearCoords);
 
-    this.setZoomFactor = function(k) {
-      zoomScaleMultiplier = k || 1;
-    };
+    mouse.on('click', function(e) {
+      if (!enabled) return;
+      GUI.selectElement(readout.node());
+    });
 
-    this.zoomToBbox = zoomToBbox;
+    mouse.on('hover', onMouseChange);
+    mouse.on('drag', onMouseChange, null, 10); // high priority so editor doesn't block propagation
 
-    if (gui.options.homeControl) {
-      gui.buttons.addButton("#home-icon").on('click', function() {
-        if (disabled()) return;
-        gui.dispatchEvent('map_reset');
-      });
+    function onMouseChange(e) {
+      if (!enabled) return;
+      if (isOverMap(e)) {
+        displayCoords(ext.translatePixelCoords(e.x, e.y));
+      } else {
+        clearCoords();
+      }
     }
 
-    if (gui.options.zoomControl) {
-      inBtn = gui.buttons.addButton("#zoom-in-icon");
-      outBtn = gui.buttons.addButton("#zoom-out-icon");
-      initVariableClick(inBtn.node(), zoomIn);
-      initVariableClick(outBtn.node(), zoomOut);
-      ext.on('change', function() {
-        inBtn.classed('disabled', ext.scale() >= ext.maxScale());
-      });
+    function displayCoords(p) {
+      var decimals = internal.getBoundsPrecisionForDisplay(ext.getBounds().toArray());
+      var str = internal.getRoundedCoordString(p, decimals);
+      readout.text(str).show();
     }
 
-    gui.on('map_reset', function() {
-      ext.home();
-    });
-
-    zoomTween.on('change', function(e) {
-      ext.zoomToExtent(e.value, _fx, _fy);
-    });
+    function clearCoords() {
+      readout.hide();
+    }
 
-    mouse.on('dblclick', function(e) {
-      if (disabled()) return;
-      zoomByPct(getZoomInPct(), e.x / ext.width(), e.y / ext.height());
-    });
+    function isOverMap(e) {
+      return e.x >= 0 && e.y >= 0 && 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');
-      }
-    });
+  function getTimerFunction() {
+    return typeof requestAnimationFrame == 'function' ?
+      requestAnimationFrame : function(cb) {setTimeout(cb, 25);};
+  }
 
-    mouse.on('drag', function(e) {
-      if (disabled()) return;
-      if (boxDrag) {
-        gui.dispatchEvent('box_drag', getBoxData(e));
-      } else {
-        ext.pan(e.dx, e.dy);
-      }
-    });
+  function Timer() {
+    var self = this,
+        running = false,
+        busy = false,
+        tickTime, startTime, duration;
 
-    mouse.on('dragend', function(e) {
-      var bbox;
-      if (disabled()) return;
-      if (boxDrag) {
-        boxDrag = false;
-        gui.dispatchEvent('box_drag_end', getBoxData(e));
-      }
-    });
+    this.start = function(ms) {
+      var now = +new Date();
+      duration = ms || Infinity;
+      startTime = now;
+      running = true;
+      if (!busy) startTick(now);
+    };
 
-    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());
-    });
+    this.stop = function() {
+      running = false;
+    };
 
-    function swapElements(arr, i, j) {
-      var tmp = arr[i];
-      arr[i] = arr[j];
-      arr[j] = tmp;
+    function startTick(now) {
+      busy = true;
+      tickTime = now;
+      getTimerFunction()(onTick);
     }
 
-    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 onTick() {
+      var now = +new Date(),
+          elapsed = now - startTime,
+          pct = Math.min((elapsed + 10) / duration, 1),
+          done = pct >= 1;
+      if (!running) { // interrupted
+        busy = false;
+        return;
       }
-      return {
-        map_bbox: mapBox,
-        page_bbox: pageBox
-      };
-    }
-
-    function disabled() {
-      return !!gui.options.disableNavigation;
+      if (done) running = false;
+      self.dispatchEvent('tick', {
+        elapsed: elapsed,
+        pct: pct,
+        done: done,
+        time: now,
+        tickTime: now - tickTime
+      });
+      busy = false;
+      if (running) startTick(now);
     }
+  }
 
-    function zoomIn(e) {
-      if (disabled()) return;
-      zoomByPct(getZoomInPct(e.time), 0.5, 0.5);
-    }
+  utils.inherit(Timer, EventDispatcher);
 
-    function zoomOut(e) {
-      if (disabled()) return;
-      zoomByPct(1/getZoomInPct(e.time), 0.5, 0.5);
-    }
+  function Tween(ease) {
+    var self = this,
+        timer = new Timer(),
+        start, end;
 
-    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;
-    }
+    timer.on('tick', onTick);
 
-    // @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);
-    }
+    this.start = function(a, b, duration) {
+      start = a;
+      end = b;
+      timer.start(duration || 500);
+    };
 
-    // @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 onTick(e) {
+      var pct = ease ? ease(e.pct) : e.pct,
+          val = end * pct + start * (1 - pct);
+      self.dispatchEvent('change', {value: val});
     }
   }
 
-  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();
+  utils.inherit(Tween, EventDispatcher);
+
+  Tween.sineInOut = function(n) {
+    return 0.5 - Math.cos(n * Math.PI) / 2;
+  };
+
+  Tween.quadraticOut = function(n) {
+    return 1 - Math.pow((1 - n), 2);
+  };
+
+  function ElementPosition(ref) {
+    var self = this,
+        el = El(ref),
+        pageX = 0,
+        pageY = 0,
+        width = 0,
+        height = 0;
+
+    el.on('mouseover', update);
+    if (window.onorientationchange) window.addEventListener('orientationchange', update);
+    window.addEventListener('scroll', update);
+    window.addEventListener('resize', update);
+
+    // trigger an update, e.g. when map container is resized
+    this.update = function() {
+      update();
     };
-    return box;
-  }
 
-  function SelectionTool(gui, ext, hit) {
-    var popup = gui.container.findChild('.selection-tool-options');
-    var box = new HighlightBox();
-    var _on = false;
+    this.resize = function(w, h) {
+      el.css('width', w).css('height', h);
+      update();
+    };
 
-    gui.addMode('selection_tool', turnOn, turnOff);
+    this.width = function() { return width; };
+    this.height = function() { return height; };
+    this.position = function() {
+      return {
+        element: el.node(),
+        pageX: pageX,
+        pageY: pageY,
+        width: width,
+        height: height
+      };
+    };
 
-    gui.on('interaction_mode_change', function(e) {
-      if (e.mode === 'selection') {
-        gui.enterMode('selection_tool');
-      } else if (gui.getMode() == 'selection_tool') {
-        gui.clearMode();
+    function update() {
+      var div = el.node(),
+          xy = getPageXY(div),
+          w = div.clientWidth,
+          h = div.clientHeight,
+          x = xy.x,
+          y = xy.y,
+          resized = w != width || h != height,
+          moved = x != pageX || y != pageY;
+      if (resized || moved) {
+        pageX = x;
+        pageY = y;
+        width = w;
+        height = h;
+        self.dispatchEvent('change', self.position());
+        if (resized) {
+          self.dispatchEvent('resize', self.position());
+        }
       }
-    });
+    }
+    update();
+  }
 
-    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);
-    });
+  utils.inherit(ElementPosition, EventDispatcher);
 
-    gui.on('box_drag_end', function(e) {
-      if (!_on) return;
-      box.hide();
-      updateSelection(e.map_bbox);
-    });
+  function MouseWheelDirection() {
+    var prevTime = 0;
+    var getAvgDir;
 
-    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);
+    // returns 1, -1 or 0 to indicate direction of scroll
+    // use avg of three values, as a buffer against single anomalous values
+    return function(e, now) {
+      var delta = e.wheelDelta || -e.detail || 0;
+      var dir = delta > 0 && 1 || delta < 0 && -1 || 0;
+      var avg;
+      if (!getAvgDir || now - prevTime > 300) {
+        getAvgDir =  LimitedAverage(3); // reset if wheel has paused
       }
-    }
+      prevTime = now;
+      avg = getAvgDir(dir) || dir; // handle average == 0
+      return avg > 0 && 1 || avg < 0 && -1 || 0;
+    };
+  }
 
-    function turnOn() {
-      _on = true;
+  function LimitedAverage(maxSize) {
+    var arr = [];
+    return function(val) {
+      var sum = 0,
+          i = -1;
+      arr.push(val);
+      if (arr.length > maxSize) arr.shift();
+      while (++i < arr.length) {
+        sum += arr[i];
+      }
+      return sum / arr.length;
+    };
+  }
+
+  // @mouse: MouseArea object
+  function MouseWheel(mouse) {
+    var self = this,
+        active = false,
+        timer = new Timer().addEventListener('tick', onTick),
+        sustainInterval = 150,
+        fadeDelay = 70,
+        eventTime = 0,
+        getAverageRate = LimitedAverage(10),
+        getWheelDirection = MouseWheelDirection(),
+        wheelDirection;
+
+    if (window.onmousewheel !== undefined) { // ie, webkit
+      window.addEventListener('mousewheel', handleWheel, {passive: false});
+    } else { // firefox
+      window.addEventListener('DOMMouseScroll', handleWheel);
     }
 
-    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 updateSustainInterval(eventRate) {
+      var fadeInterval = 80;
+      fadeDelay = eventRate + 50; // adding a little extra time helps keep trackpad scrolling smooth in Firefox
+      sustainInterval = fadeDelay + fadeInterval;
     }
 
-    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 handleWheel(evt) {
+      var now = +new Date();
+      wheelDirection = getWheelDirection(evt, now);
+      if (evt.ctrlKey) {
+        // Prevent pinch-zoom in Chrome (doesn't work in Safari, though)
+        evt.preventDefault();
+        evt.stopImmediatePropagation();
+      }
+      if (!mouse.isOver()) return;
+      if (wheelDirection === 0) {
+        // first event may not have a direction, e.g. if 'smooth scrolling' is on
+        return;
+      }
+      evt.preventDefault();
+      if (!active) {
+        active = true;
+        self.dispatchEvent('mousewheelstart');
+      } else {
+        updateSustainInterval(getAverageRate(now - eventTime));
       }
+      eventTime = now;
+      timer.start(sustainInterval);
     }
 
-    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();
+    function onTick(evt) {
+      var tickInterval = evt.time - eventTime,
+          multiplier = evt.tickTime / 25,
+          fadeFactor = 0,
+          obj;
+      if (tickInterval > fadeDelay) {
+        fadeFactor = Math.min(1, (tickInterval - fadeDelay) / (sustainInterval - fadeDelay));
+      }
+      if (evt.done) {
+        active = false;
       } else {
-        popup.hide();
+        if (fadeFactor > 0) {
+          // Decelerate towards the end of the sustain interval (for smoother zooming)
+          multiplier *= Tween.quadraticOut(1 - fadeFactor);
+        }
+        obj = utils.extend({direction: wheelDirection, multiplier: multiplier}, mouse.mouseData());
+        self.dispatchEvent('mousewheel', obj);
       }
-    });
-
-    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);
-    });
-
-    new SimpleButton(popup.findChild('.split-btn')).on('click', function() {
-      var cmd = '-split ids=' + getIdsOpt();
-      runCommand(cmd);
-    });
-
-    new SimpleButton(popup.findChild('.cancel-btn')).on('click', function() {
-      hit.clearSelection();
-    });
-
-    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;
+  utils.inherit(MouseWheel, EventDispatcher);
 
-    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();
-    });
+  function MouseArea(element, pos) {
+    var _pos = pos || new ElementPosition(element),
+        _areaPos = _pos.position(),
+        _self = this,
+        _dragging = false,
+        _isOver = false,
+        _disabled = false,
+        _prevEvt,
+        _downEvt;
 
-    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');
-      }
-    };
+    _pos.on('change', function() {_areaPos = _pos.position();});
+    // TODO: think about touch events
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('mouseup', onMouseUp);
+    element.addEventListener('mouseover', onAreaEnter);
+    element.addEventListener('mousemove', onAreaEnter);
+    element.addEventListener('mouseout', onAreaOut);
+    element.addEventListener('mousedown', onAreaDown);
+    element.addEventListener('dblclick', onAreaDblClick);
 
-    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();
+    this.enable = function() {
+      if (!_disabled) return;
+      _disabled = false;
+      element.style.pointerEvents = 'auto';
     };
 
-    return self;
-
-    function isOpen() {
-      return el.visible();
-    }
+    this.stopDragging = function() {
+      if (_downEvt) {
+        if (_dragging) stopDragging(_downEvt);
+        _downEvt = null;
+      }
+    };
 
-    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();
-    }
+    this.disable = function() {
+      if (_disabled) return;
+      _disabled = true;
+      if (_isOver) onAreaOut();
+      this.stopDragging();
+      element.style.pointerEvents = 'none';
+    };
 
-    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++;
-        }
-      });
+    this.isOver = function() {
+      return _isOver;
+    };
 
-      if (rows > 0) {
-        tableEl.appendTo(el);
+    this.isDown = function() {
+      return !!_downEvt;
+    };
 
-        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
-          }
-        });
+    this.mouseData = function() {
+      return utils.extend({}, _prevEvt);
+    };
 
-      } 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'));
-      }
+    function onAreaDown(e) {
+      e.preventDefault(); // prevent text selection cursor on drag
     }
 
-    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 onAreaEnter() {
+      if (!_isOver) {
+        _isOver = true;
+        _self.dispatchEvent('enter');
       }
     }
 
-    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 onAreaOut() {
+      _isOver = false;
+      _self.dispatchEvent('leave');
     }
 
-    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;
-          rec[key] = val2;
-          input.value(strval);
-          setFieldClass(el, val2, type);
-          self.dispatchEvent('update', {field: key, value: val2, id: currId});
+    function onMouseUp(e) {
+      var evt = procMouseEvent(e),
+          elapsed, dx, dy;
+      if (_dragging) {
+        stopDragging(evt);
+      }
+      if (_downEvt) {
+        elapsed = evt.time - _downEvt.time;
+        dx = evt.pageX - _downEvt.pageX;
+        dy = evt.pageY - _downEvt.pageY;
+        if (_isOver && elapsed < 500 && Math.sqrt(dx * dx + dy * dy) < 6) {
+          _self.dispatchEvent('click', evt);
         }
-      });
+        _downEvt = null;
+      }
     }
-  }
 
-  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);
+    function stopDragging(evt) {
+      _dragging = false;
+      _self.dispatchEvent('dragend', evt);
     }
-    return str;
-  }
 
-  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 onMouseDown(e) {
+     if (e.button != 2 && e.which != 3) { // ignore right-click
+        _downEvt = procMouseEvent(e);
       }
-      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 onMouseMove(e) {
+      var evt = procMouseEvent(e);
+      if (!_dragging && _downEvt && _downEvt.hover) {
+        _dragging = true;
+        _self.dispatchEvent('dragstart', evt);
+      }
+      if (evt.dx === 0 && evt.dy === 0) return; // seen in Chrome
+      if (_dragging) {
+        var obj = {
+          dragX: evt.pageX - _downEvt.pageX,
+          dragY: evt.pageY - _downEvt.pageY
+        };
+        _self.dispatchEvent('drag', utils.extend(obj, evt));
+      } else {
+        _self.dispatchEvent('hover', evt);
       }
-      return val;
-    },
-    multiple: function(raw) {
-      var val = Number(raw);
-      return isNaN(val) ? raw : val;
     }
-  };
 
-  function getInputParser(type) {
-    return inputParsers[type || 'multiple'];
-  }
+    function onAreaDblClick(e) {
+      if (_isOver) _self.dispatchEvent('dblclick', procMouseEvent(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 procMouseEvent(e) {
+      var pageX = e.pageX,
+          pageY = e.pageY,
+          prev = _prevEvt;
+      _prevEvt = {
+        originalEvent: e,
+        shiftKey: e.shiftKey,
+        metaKey: e.metaKey,
+        ctrlKey: e.ctrlKey,
+        time: +new Date(),
+        pageX: pageX,
+        pageY: pageY,
+        hover: _isOver,
+        x: pageX - _areaPos.pageX,
+        y: pageY - _areaPos.pageY,
+        dx: prev ? pageX - prev.pageX : 0,
+        dy: prev ? pageY - prev.pageY : 0
+      };
+      return _prevEvt;
+    }
   }
 
-  function InspectionControl2(gui, hit) {
-    var _popup = new Popup(gui, hit.getSwitchTrigger(1), hit.getSwitchTrigger(-1));
-    var _self = new EventDispatcher();
+  utils.inherit(MouseArea, EventDispatcher);
 
-    gui.on('interaction_mode_change', function(e) {
-      if (e.mode == 'off') {
-        inspect(-1); // clear the popup
-      }
-    });
+  function initVariableClick(node, cb) {
+    var downEvent = null;
+    var downTime = 0;
 
-    _popup.on('update', function(e) {
-      _self.dispatchEvent('data_change', e.data); // let map know which field has changed
+    node.addEventListener('mousedown', function(e) {
+      downEvent = e;
+      downTime = Date.now();
     });
 
-    hit.on('change', function(e) {
-      var ids;
-      if (!inspecting()) return;
-      ids = e.mode == 'selection' ? null : e.ids;
-      inspect(e.id, e.pinned, ids);
+    node.addEventListener('mouseup', function(upEvent) {
+      if (!downEvent) return;
+      var shift = Math.abs(downEvent.pageX - upEvent.pageX) +
+          Math.abs(downEvent.pageY - upEvent.pageY);
+      var elapsed = Date.now() - downTime;
+      if (shift > 5 || elapsed > 1000) return;
+      downEvent = null;
+      cb({time: elapsed});
     });
+  }
 
-    // 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 MapNav(gui, ext, mouse) {
+    var wheel = new MouseWheel(mouse),
+        zoomTween = new Tween(Tween.sineInOut),
+        boxDrag = false,
+        zoomScaleMultiplier = 1,
+        inBtn, outBtn,
+        dragStartEvt,
+        _fx, _fy; // zoom foci, [0,1]
+
+    this.setZoomFactor = function(k) {
+      zoomScaleMultiplier = k || 1;
+    };
+
+    this.zoomToBbox = zoomToBbox;
+
+    if (gui.options.homeControl) {
+      gui.buttons.addButton("#home-icon").on('click', function() {
+        if (disabled()) return;
+        gui.dispatchEvent('map_reset');
+      });
     }
 
-    // does the attribute inspector appear on rollover
-    function inspecting() {
-      return gui.interaction && gui.interaction.getMode() != 'off';
+    if (gui.options.zoomControl) {
+      inBtn = gui.buttons.addButton("#zoom-in-icon");
+      outBtn = gui.buttons.addButton("#zoom-out-icon");
+      initVariableClick(inBtn.node(), zoomIn);
+      initVariableClick(outBtn.node(), zoomOut);
+      ext.on('change', function() {
+        inBtn.classed('disabled', ext.scale() >= ext.maxScale());
+      });
     }
 
-    return _self;
-  }
+    gui.on('map_reset', function() {
+      ext.home();
+    });
 
-  // 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;
-  }
+    zoomTween.on('change', function(e) {
+      ext.zoomToExtent(e.value, _fx, _fy);
+    });
 
-  // Returns proportion of bb2 occupied by bb1
-  function getIntersectionPct(bb1, bb2) {
-    return getBoundsIntersection(bb1, bb2).area() / bb2.area() || 0;
-  }
+    mouse.on('dblclick', function(e) {
+      if (disabled()) return;
+      zoomByPct(getZoomInPct(), e.x / ext.width(), e.y / ext.height());
+    });
 
-  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;
-  }
+    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 isMultilineLabel(textNode) {
-    return textNode.childNodes.length > 1;
-  }
+    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 toggleTextAlign(textNode, rec) {
-    var curr = rec['text-anchor'] || 'middle';
-    var value = curr == 'middle' && 'start' || curr == 'start' && 'end' || 'middle';
-    updateTextAnchor(value, textNode, rec);
-  }
+    function swapElements(arr, i, j) {
+      var tmp = arr[i];
+      arr[i] = arr[j];
+      arr[j] = tmp;
+    }
 
-  // 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 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 findSvgRoot(el) {
-    while (el && el.tagName != 'html' && el.tagName != 'body') {
-      if (el.tagName == 'svg') return el;
-      el = el.parentNode;
+    function disabled() {
+      return !!gui.options.disableNavigation;
     }
-    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;
 
-    // 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;
+    function zoomIn(e) {
+      if (disabled()) return;
+      zoomByPct(getZoomInPct(e.time), 0.5, 0.5);
     }
-    if (xshift) {
-      rec['text-anchor'] = value;
-      applyDelta(rec, 'dx', Math.round(xshift));
+
+    function zoomOut(e) {
+      if (disabled()) return;
+      zoomByPct(1/getZoomInPct(e.time), 0.5, 0.5);
     }
-  }
 
-  // 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 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 getDisplayCoordsById(id, layer, ext) {
-    var coords = getPointCoordsById(id, layer);
-    return ext.translateCoords(coords[0], coords[1]);
-  }
+    // @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);
+    }
 
-  function getPointCoordsById(id, layer) {
-    var coords = layer && layer.geometry_type == 'point' && layer.shapes[id];
-    if (!coords || coords.length != 1) {
-      return null;
+    // @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);
     }
-    return coords[0];
   }
 
-  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 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;
 
-  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
+    gui.addMode('selection_tool', turnOn, turnOff);
 
-    initDragging();
+    gui.on('interaction_mode_change', function(e) {
+      if (e.mode === 'selection') {
+        gui.enterMode('selection_tool');
+      } else if (gui.getMode() == 'selection_tool') {
+        gui.clearMode();
+      }
+    });
 
-    return self;
+    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);
+    });
 
-    function labelEditingEnabled() {
-      return gui.interaction && gui.interaction.getMode() == 'labels' ? true : false;
+    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 locationEditingEnabled() {
-      return gui.interaction && gui.interaction.getMode() == 'location' ? true : false;
+    function turnOn() {
+      _on = true;
     }
 
-    function vertexEditingEnabled() {
-      return gui.interaction && gui.interaction.getMode() == 'vertices' ? true : false;
+    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]];
     }
 
-    // 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 turnOff() {
+      reset();
+      _on = false;
+      if (gui.interaction.getMode() == 'selection') {
+        // mode change was not initiated by interactive menu -- turn off interactivity
+        gui.interaction.turnOff();
+      }
     }
 
-    // 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 reset() {
+      popup.hide();
+      hit.clearSelection();
     }
 
-    function initDragging() {
-      var downEvt;
-      var eventPriority = 1;
+    function getIdsOpt() {
+      return hit.getSelectionIds().join(',');
+    }
 
-      // inspector and label editing aren't fully synced - stop editing if inspector opens
-      // gui.on('inspector_on', function() {
-      //   stopEditing();
-      // });
+    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();
+      }
+    });
 
-      gui.on('interaction_mode_change', function(e) {
-        if (e.mode != 'labels') {
-          stopDragging();
-        }
-      });
+    new SimpleButton(popup.findChild('.delete-btn')).on('click', function() {
+      var cmd = '-filter invert ids=' + getIdsOpt();
+      runCommand(cmd);
+    });
 
-      // 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
+    new SimpleButton(popup.findChild('.filter-btn')).on('click', function() {
+      var cmd = '-filter ids=' + getIdsOpt();
+      runCommand(cmd);
+    });
 
-      hit.on('dragstart', function(e) {
-        if (labelEditingEnabled()) {
-          onLabelDragStart(e);
-        } else if (locationEditingEnabled()) {
-          onLocationDragStart(e);
-        } else if (vertexEditingEnabled()) {
-          onVertexDragStart(e);
-        }
-      });
+    new SimpleButton(popup.findChild('.split-btn')).on('click', function() {
+      var cmd = '-split ids=' + getIdsOpt();
+      runCommand(cmd);
+    });
 
-      hit.on('drag', function(e) {
-        if (labelEditingEnabled()) {
-          onLabelDrag(e);
-        } else if (locationEditingEnabled()) {
-          onLocationDrag(e);
-        } else if (vertexEditingEnabled()) {
-          onVertexDrag(e);
-        }
-      });
+    new SimpleButton(popup.findChild('.cancel-btn')).on('click', function() {
+      hit.clearSelection();
+    });
 
-      hit.on('dragend', function(e) {
-        if (locationEditingEnabled()) {
-          onLocationDragEnd(e);
-          stopDragging();
-        } else if (labelEditingEnabled()) {
-          stopDragging();
-        } else if (vertexEditingEnabled()) {
-          onVertexDragEnd(e);
-          stopDragging();
-        }
+    function runCommand(cmd) {
+      popup.hide();
+      if (gui.console) gui.console.runMapshaperCommands(cmd, function(err) {
+        reset();
       });
+    }
+  }
 
-      hit.on('click', function(e) {
-        if (labelEditingEnabled()) {
-          onLabelClick(e);
-        }
-      });
+  // 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;
 
-      function onLocationDragStart(e) {
-        if (e.id >= 0) {
-          dragging = true;
-          triggerGlobalEvent('symbol_dragstart', e);
-        }
-      }
+    el.addClass('rollover'); // used as a sentinel for the hover function
 
-      function onVertexDragStart(e) {
-        if (e.id >= 0) {
-          dragging = true;
-        }
-      }
+    nextLink.on('click', toNext);
+    prevLink.on('click', toPrev);
+    gui.on('popup-needs-refresh', function() {
+      if (refresh) refresh();
+    });
 
-      function onLocationDrag(e) {
-        var lyr = hit.getHitTarget().layer;
-        var p = getPointCoordsById(e.id, hit.getHitTarget().layer);
-        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);
+    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();
       }
-
-      function onVertexDrag(e) {
-        var target = hit.getHitTarget();
-        var p = ext.translatePixelCoords(e.x, e.y);
-        if (!activeVertexIds) {
-          activeVertexIds = internal.findNearestVertices(p, target.layer.shapes[e.id], target.arcs);
-        }
-        if (!activeVertexIds) return; // ignore error condition
-        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
+      el.show();
+      if (content.node().clientHeight > maxHeight) {
+        content.css('height:' + maxHeight + 'px');
       }
+    };
 
-      function onLocationDragEnd(e) {
-        triggerGlobalEvent('symbol_dragend', e);
-      }
+    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 onVertexDragEnd(e) {
-        // kludge to get dataset to recalculate internal bounding boxes
-        hit.getHitTarget().arcs.transformPoints(function() {});
-        activeVertexIds = null;
-      }
+    return self;
 
-      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 isOpen() {
+      return el.visible();
+    }
 
-      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});
-        }
-      }
+    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 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', '');
+    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++;
         }
-        return table.getRecordAt(id);
-      }
+      });
 
-      function onLabelDragStart(e) {
-        var textNode = getTextTarget3(e);
-        var table = hit.getTargetDataTable();
-        if (!textNode || !table) return;
-        activeId = e.id;
-        activeRecord = getLabelRecordById(activeId);
-        dragging = true;
-        downEvt = e;
-      }
+      if (rows > 0) {
+        tableEl.appendTo(el);
 
-      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);
-      }
+        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
+          }
+        });
 
-      function getSymbolNodeById(id, parent) {
-        // TODO: optimize selector
-        var sel = '[data-id="' + id + '"]';
-        return parent.querySelector(sel);
+      } 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'));
       }
+    }
 
-      function getTextTarget3(e) {
-        if (e.id > -1 === false || !e.container) return null;
-        return getSymbolNodeById(e.id, e.container);
+    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 getTextTarget2(e) {
-        var el = e && e.targetSymbol || null;
-        if (el && el.tagName == 'tspan') {
-          el = el.parentNode;
-        }
-        return el && el.tagName == 'text' ? el : null;
-      }
+    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 getTextTarget(e) {
-        var el = e.target;
-        if (el.tagName == 'tspan') {
-          el = el.parentNode;
+    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});
         }
-        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
+      });
+    }
+  }
 
+  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;
+  }
 
-      // 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);
-      //   }
-      // });
+  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;
+    }
+  };
 
-      // block dbl-click navigation when editing
-      // mouse.on('dblclick', function(e) {
-      //   if (editing) e.stopPropagation();
-      // }, null, eventPriority);
+  function getInputParser(type) {
+    return inputParsers[type || 'multiple'];
+  }
 
-      // mouse.on('dragstart', function(e) {
-      //   onLabelDrag(e);
-      // }, null, eventPriority);
+  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());
+  }
 
-      // 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);
+  function InspectionControl2(gui, hit) {
+    var _popup = new Popup(gui, hit.getSwitchTrigger(1), hit.getSwitchTrigger(-1));
+    var _self = new EventDispatcher();
 
-      // mouse.on('dragend', function(e) {
-      //   onLabelDrag(e);
-      //   stopDragging();
-      // }, null, eventPriority);
+    gui.on('interaction_mode_change', function(e) {
+      if (e.mode == 'off') {
+        inspect(-1); // clear the popup
+      }
+    });
 
+    _popup.on('update', function(e) {
+      _self.dispatchEvent('data_change', e.data); // let map know which field has changed
+    });
 
-      // function onLabelDrag(e) {
-      //   if (dragging) {
-      //     e.stopPropagation();
-      //   }
-      // }
-    }
+    hit.on('change', function(e) {
+      var ids;
+      if (!inspecting()) return;
+      ids = e.mode == 'selection' ? null : e.ids;
+      inspect(e.id, e.pinned, ids);
+    });
 
-    function stopDragging() {
-      dragging = false;
-      activeId = -1;
-      activeRecord = null;
-      // targetTextNode = null;
-      // svg.removeAttribute('class');
+    // 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 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;
+    // does the attribute inspector appear on rollover
+    function inspecting() {
+      return gui.interaction && gui.interaction.getMode() != 'off';
     }
 
+    return _self;
+  }
 
-    // function deselectText(el) {
-    //   el.removeAttribute('class');
-    // }
-
-    // function selectText(el) {
-    //   el.setAttribute('class', 'selected');
-    // }
+  // 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;
+  }
 
+  // Returns proportion of bb2 occupied by bb1
+  function getIntersectionPct(bb1, bb2) {
+    return getBoundsIntersection(bb1, bb2).area() / bb2.area() || 0;
+  }
 
+  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;
   }
 
   var darkStroke = "#334",
@@ -6151,7 +6306,7 @@
           dotSize: 2.5
         }, polyline: {
           strokeColor: black,
-          strokeWidth: 2.5
+          strokeWidth: 2.5,
         }
       },
       unselectedHoverStyles = {
@@ -6656,7 +6811,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 +6888,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 +6901,28 @@
     };
     */
 
+    _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 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 +7050,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 +7990,10 @@
       _mouse.disable();
     });
 
+    gui.on('undo_redo', function() {
+      drawLayers();
+    });
+
     model.on('update', onUpdate);
 
     // Update display of segment intersections
@@ -7996,6 +8178,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 +8421,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) {