mapshaper 0.6.65 → 0.6.67

package/www/mapshaper-gui.js

@@ -1714,6 +1714,47 @@
     }
   }
 
+  function openAddLayerPopup(gui) {
+    var popup = showPopupAlert('', 'Add empty layer');
+    var el = popup.container();
+    el.addClass('option-menu');
+    var html = `<div><input type="text" class="layer-name text-input" placeholder="layer name"></div>
+  <div style="margin: 2px 0 4px;">
+    Type: &nbsp;
+    <label><input type="radio" name="geomtype" checked value="point" class="radio">point</label> &nbsp;
+    <label><input type="radio" name="geomtype" value="polygon" class="radio">polygon</label> &nbsp;
+    <label><input type="radio" name="geomtype" value="polyline" class="radio">line</label>
+  </div>
+  <div tabindex="0" class="btn dialog-btn">Create</div></span>`;
+    el.html(html);
+    var name = el.findChild('.layer-name');
+    name.node().focus();
+    var btn = el.findChild('.btn').on('click', function() {
+      var nameStr = name.node().value.trim();
+      var type = el.findChild('input:checked').node().value;
+      addLayer(gui, nameStr, type);
+      popup.close();
+    });
+  }
+
+  function addLayer(gui, name, type) {
+    var targ = gui.model.getActiveLayer();
+    var crsInfo = targ && internal.getDatasetCrsInfo(targ.dataset);
+    var dataset = {
+      layers: [{
+        name: name || undefined,
+        geometry_type: type,
+        shapes: []
+      }],
+      info: {}
+    };
+    if (crsInfo) {
+      internal.setDatasetCrsInfo(dataset, crsInfo);
+    }
+    gui.model.addDataset(dataset);
+    gui.model.updated({select: true});
+  }
+
   // @cb function(<FileList>)
   function DropControl(gui, el, cb) {
     var area = El(el);
@@ -1832,7 +1873,10 @@
     new FileChooser('#file-selection-btn', receiveFiles);
     new FileChooser('#import-buttons .add-btn', receiveFiles);
     new FileChooser('#add-file-btn', receiveFiles);
-    // new SimpleButton('#add-empty-btn').on('click', addEmptyLayer);
+    new SimpleButton('#add-empty-btn').on('click', function() {
+      gui.clearMode(); // close import dialog
+      openAddLayerPopup(gui);
+    });
     initDropArea('#import-quick-drop', true);
     initDropArea('#import-drop');
     gui.keyboard.onMenuSubmit(El('#import-options'), importQueuedFiles);
@@ -2040,18 +2084,7 @@
       return true;
     }
 
-    function addEmptyLayer() {
-      var dataset = {
-        layers: [{
-          name: 'New layer',
-          geometry_type: 'point',
-          shapes: []
-        }],
-        info: {}
-      };
-      model.addDataset(dataset);
-      gui.clearMode();
-    }
+
 
     function filesMayContainPaths(files) {
       return utils$1.some(files, function(f) {
@@ -2565,6 +2598,7 @@
     }
   }
 
+  // coords: [x, y] point in data CRS (not display CRS)
   function setPointCoords(lyr, fid, coords) {
     lyr.source.layer.shapes[fid] = coords;
     if (isProjectedLayer(lyr)) {
@@ -2602,7 +2636,7 @@
     return !!(lyr.source && lyr.invertPoint);
   }
 
-  // Update data coordinates by projecting display coordinates
+  // Update source data coordinates by projecting display coordinates
   function updatePointCoords(lyr, fid) {
     if (!isProjectedLayer(lyr)) return;
     var displayShp = lyr.layer.shapes[fid];
@@ -3875,7 +3909,7 @@
     async function exportMenuSelection(targets) {
       var opts = getExportOpts();
       // note: command line "target" option gets ignored
-      var files = await internal.exportTargetLayers(targets, opts);
+      var files = await internal.exportTargetLayers(model, targets, opts);
       gui.session.layersExported(getTargetLayerIds(), getExportOptsAsString());
       if (files.length == 1 && checkboxOn(clipboardCheckbox)) {
         await saveFileContentToClipboard(files[0].content);
@@ -4272,6 +4306,7 @@
 
       if (opts.pinnable) classes += ' pinnable';
       if (map.isActiveLayer(lyr)) classes += ' active';
+      if (lyr.hidden) classes += ' invisible';
       if (lyr.pinned) classes += ' pinned';
 
       html = '<!-- ' + lyr.menu_id + '--><div class="' + classes + '">';
@@ -4350,10 +4385,24 @@
         // init pin button
         GUI.onClick(entry.findChild('img.black-eye'), function(e) {
           var target = findLayerById(id);
-          var pinned = target.layer.pinned;
+          var lyr = target.layer;
+          var active = map.isActiveLayer(lyr);
+          var hidden = false; // active && lyr.hidden || false;
+          var pinned = false;
+          var unpinned = false;
           e.stopPropagation();
-          map.setLayerPinning(target, !pinned);
-          entry.classed('pinned', !pinned);
+          if (active) {
+            hidden = !lyr.hidden;
+            pinned = !hidden && lyr.unpinned;
+            unpinned = lyr.pinned && hidden;
+          } else {
+            pinned = !lyr.pinned;
+          }
+          lyr.hidden = hidden;
+          lyr.unpinned = unpinned;
+          map.setLayerPinning(target, pinned);
+          entry.classed('pinned', pinned);
+          entry.classed('invisible', hidden);
           updatePinAllButton();
           map.redraw();
         });
@@ -4379,12 +4428,16 @@
       GUI.onClick(entry, function() {
         var target = findLayerById(id);
         // don't select if user is typing or dragging
-        if (!GUI.textIsSelected() && !dragging) {
-          gui.clearMode();
-          if (!map.isActiveLayer(target.layer)) {
-            model.selectLayer(target.layer, target.dataset);
-          }
+        if (GUI.textIsSelected() || dragging) return;
+        // undo any temporary hiding when layer is selected
+        target.layer.hidden = false;
+        if (!map.isActiveLayer(target.layer)) {
+          model.selectLayer(target.layer, target.dataset);
         }
+        // close menu after a delay
+        setTimeout(function() {
+          gui.clearMode();
+        }, 230);
       });
     }
 
@@ -4656,6 +4709,19 @@
       addHistoryState(stashedUndo, redo);
     });
 
+    gui.on('rectangle_dragend', function(e) {
+      var target = e.data.target;
+      var points1 = e.points;
+      var points2 = e.ids.map(id => getVertexCoords(target, id));
+      var undo = function() {
+        setRectangleCoords(target, e.ids, points1);
+      };
+      var redo = function() {
+        setRectangleCoords(target, e.ids, points2);
+      };
+      addHistoryState(undo, redo);
+    });
+
     gui.on('vertex_dragend', function(e) {
       var target = e.data.target;
       var startPoint = e.points[0]; // in data coords
@@ -4701,6 +4767,9 @@
     }
 
     this.undo = function() {
+      // firing even if history is empty
+      // (because this event may trigger a new history state)
+      gui.dispatchEvent('undo_redo_pre');
       var item = getHistoryItem();
       if (item) {
         offset++;
@@ -4710,6 +4779,7 @@
     };
 
     this.redo = function() {
+      gui.dispatchEvent('undo_redo_pre');
       if (offset <= 0) return;
       offset--;
       var item = getHistoryItem();
@@ -4783,6 +4853,30 @@
     });
   }
 
+  function ToggleButton(el) {
+    var btn = El(el),
+        self = new EventDispatcher(),
+        on = false;
+
+    btn.on('click', function(e) {
+      on = !on;
+      btn.classed('active', on);
+      self.dispatchEvent('click', {on: on, active: on});
+    });
+
+    self.turnOff = function() {
+      on = false;
+      btn.removeClass('active');
+    };
+
+    self.turnOn = function() {
+      on = true;
+      btn.addClass('active');
+    };
+
+    return self;
+  }
+
   function ModeSwitcher() {
     var self = this;
     var mode = null;
@@ -4872,11 +4966,10 @@
       standard: ['info', 'selection', 'data', 'box'],
       polygons: ['info', 'selection', 'data', 'box', 'vertices'],
       rectangles: ['info', 'selection', 'data', 'box', 'rectangles', 'vertices'],
-      lines: ['info', 'selection', 'data', 'box', 'vertices'],
+      lines: ['info', 'selection', 'data', 'box', 'vertices' /*, 'draw-lines'*/],
       table: ['info', 'selection', 'data'],
-      labels: ['info', 'selection', 'data', 'box', 'labels', 'location'],
-      // points: ['info', 'selection', 'data', 'box', 'location', 'add-points']
-      points: ['info', 'selection', 'data', 'box', 'location']
+      labels: ['info', 'selection', 'data', 'box', 'labels', 'location', 'add-points'],
+      points: ['info', 'selection', 'data', 'box', 'location', 'add-points']
     };
 
     var prompts = {
@@ -4895,6 +4988,7 @@
       vertices: 'edit vertices',
       selection: 'select features',
       'add-points': 'add points',
+      'draw-lines': 'draw lines',
       rectangles: 'drag-to-resize',
       off: 'turn off'
     };
@@ -5138,7 +5232,9 @@
     };
 
     self.selectLayer = function(lyr, dataset) {
-      if (self.getActiveLayer().layer == lyr) return;
+      if (self.getActiveLayer().layer == lyr) {
+        return;
+      }
       self.setDefaultTarget([lyr], dataset);
       self.updated({select: true});
       gui.session.setTargetLayer(lyr);
@@ -6844,7 +6940,6 @@
     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++) {
@@ -6868,7 +6963,7 @@
     }
   }
 
-  function renderSymbols(lyr, ext, type) {
+  function renderSymbols(lyr, ext) {
     var records = lyr.data.getRecords();
     var symbols = lyr.shapes.map(function(shp, i) {
       var d = records[i];
@@ -6976,6 +7071,8 @@
     var interactionMode;
     var targetLayer;
     var hitTest;
+    var pinnedOn; // used in multi-edit mode (selection) for toggling pinning behavior
+
     // event priority is higher than navigation, so stopping propagation disables
     // pan navigation
     var priority = 2;
@@ -7034,6 +7131,7 @@
         updateSelectionState(null); // no hit data, no event
         active = false;
         hitTest = null;
+        pinnedOn = false;
       }
     }
 
@@ -7070,6 +7168,13 @@
       updateSelectionState({ids: ids});
     };
 
+    self.setPinning = function(val) {
+      if (pinnedOn != val) {
+        pinnedOn = val;
+        triggerHitEvent('change');
+      }
+    };
+
     self.setTransientIds = function(ids) {
       // turnOn('selection');
       transientIds = ids || [];
@@ -7139,7 +7244,7 @@
     // 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);
+      self.clearSelection();
       // if (e.mode == 'off' || e.mode == 'box') {
       if (gui.interaction.modeUsesSelection(e.mode)) {
         turnOn(e.mode);
@@ -7148,7 +7253,11 @@
       }
     });
 
-    gui.on('box_drag_start', function() {
+    gui.on('undo_redo_pre', function() {
+      self.clearSelection();
+    });
+
+    gui.on('shift_drag_start', function() {
       self.clearHover();
     });
 
@@ -7300,6 +7409,9 @@
       if (transientIds.length) {
         eventData.ids = utils$1.uniq(transientIds.concat(eventData.ids || []));
       }
+      if (pinnedOn) {
+        eventData.pinned = true;
+      }
       self.dispatchEvent(type, eventData);
     }
 
@@ -7801,13 +7913,19 @@
 
   function HighlightBox(gui, optsArg) {
     var el = El('div').addClass('zoom-box').appendTo('body'),
-        opts = Object.assign({handles: false, persistent: false}, optsArg),
+        opts = Object.assign({
+          name: 'box',
+          handles: false,
+          persistent: false,
+          draggable: false  // does dragging the map draw a box
+        }, optsArg),
         box = new EventDispatcher(),
         stroke = 2,
         activeHandle = null,
         prevXY = null,
         boxCoords = null,
         _on = false,
+        _visible = false,
         handles;
 
     if (opts.classname) {
@@ -7817,19 +7935,20 @@
     el.hide();
 
     gui.on('map_rendered', function() {
-      if (!_on) return;
+      if (!_on || !_visible) return;
       redraw();
     });
 
-    gui.on('box_drag', function(e) {
+    gui.on('shift_drag', function(e) {
       if (!_on) return;
+      if (!opts.draggable) return;
       boxCoords = getBoxCoords(e.data);
       redraw();
       box.dispatchEvent('drag');
     });
 
-    gui.on('box_drag_end', function(e) {
-      if (!_on) return;
+    gui.on('shift_drag_end', function(e) {
+      if (!_on || !_visible || !opts.draggable) return;
       boxCoords = getBoxCoords(e.data);
       var pix = coordsToPix(boxCoords, gui.map.getExtent());
       box.dispatchEvent('dragend', {map_bbox: pix});
@@ -7851,21 +7970,30 @@
       });
 
       document.addEventListener('mousemove', function(e) {
-        if (!_on || !activeHandle || !prevXY || !boxCoords) return;
+        if (!_on || !activeHandle || !prevXY || !boxCoords || !_visible) return;
         var xy = {x: e.pageX, y: e.pageY};
         var scale = gui.map.getExtent().getPixelSize();
         var dx = (xy.x - prevXY.x) * scale;
         var dy = -(xy.y - prevXY.y) * scale;
-        if (activeHandle.col == 'left') {
+        var shifting = activeHandle.col == 'center' && activeHandle.row == 'center';
+        var centered = gui.keyboard.shiftIsPressed() && !shifting;
+        if (activeHandle.col == 'left' || shifting) {
           boxCoords[0] += dx;
-        } else if (activeHandle.col == 'right') {
+          if (centered) boxCoords[2] -= dx;
+        }
+        if (activeHandle.col == 'right' || shifting) {
           boxCoords[2] += dx;
+          if (centered) boxCoords[0] -= dx;
         }
-        if (activeHandle.row == 'top') {
+        if (activeHandle.row == 'top' || shifting) {
           boxCoords[3] += dy;
-        } else if (activeHandle.row == 'bottom') {
+          if (centered) boxCoords[1] -= dy;
+        }
+        if (activeHandle.row == 'bottom' || shifting) {
           boxCoords[1] += dy;
+          if (centered) boxCoords[3] -= dy;
         }
+
         prevXY = xy;
         redraw();
         box.dispatchEvent('handle_drag');
@@ -7907,9 +8035,11 @@
     box.hide = function() {
       el.hide();
       boxCoords = null;
+      _visible = false;
     };
 
     box.show = function(x1, y1, x2, y2) {
+      _visible = true;
       var w = Math.abs(x1 - x2),
           h = Math.abs(y1 - y2),
           props = {
@@ -7974,7 +8104,7 @@
   function initHandles(el) {
     var handles = [];
     for (var i=0; i<9; i++) {
-      if (i == 4) continue;
+      // if (i == 4) continue; // skip middle handle
       var c = Math.floor(i / 3);
       var r = i % 3;
       handles.push({
@@ -8020,13 +8150,14 @@
   function MapNav(gui, ext, mouse) {
     var wheel = new MouseWheel(mouse),
         zoomTween = new Tween(Tween.sineInOut),
-        zoomBox = new HighlightBox(gui), // .addClass('zooming'),
-        boxDrag = false,
+        zoomBox = new HighlightBox(gui, {draggable: true, name: 'zoom-box'}), // .addClass('zooming'),
+        shiftDrag = false,
         zoomScaleMultiplier = 1,
         inBtn, outBtn,
         dragStartEvt,
         _fx, _fy; // zoom foci, [0,1]
 
+    // Was used in old frame view... remove?
     this.setZoomFactor = function(k) {
       zoomScaleMultiplier = k || 1;
     };
@@ -8071,18 +8202,18 @@
       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) {
+      shiftDrag = !!e.shiftKey;
+      if (shiftDrag) {
         if (useBoxZoom()) zoomBox.turnOn();
         dragStartEvt = e;
-        gui.dispatchEvent('box_drag_start');
+        gui.dispatchEvent('shift_drag_start');
       }
     });
 
     mouse.on('drag', function(e) {
       if (disabled()) return;
-      if (boxDrag) {
-        gui.dispatchEvent('box_drag', getBoxData(e));
+      if (shiftDrag) {
+        gui.dispatchEvent('shift_drag', getBoxData(e));
       } else {
         ext.pan(e.dx, e.dy);
       }
@@ -8091,9 +8222,9 @@
     mouse.on('dragend', function(e) {
       var bbox;
       if (disabled()) return;
-      if (boxDrag) {
-        boxDrag = false;
-        gui.dispatchEvent('box_drag_end', getBoxData(e));
+      if (shiftDrag) {
+        shiftDrag = false;
+        gui.dispatchEvent('shift_drag_end', getBoxData(e));
         zoomBox.turnOff();
       }
     });
@@ -8111,7 +8242,9 @@
     });
 
     function useBoxZoom() {
-      return gui.getMode() != 'selection_tool' && gui.getMode() != 'box_tool';
+      var mode = gui.getMode();
+      var disabled = ['selection_tool', 'box_tool', 'rectangle_tool'].includes(mode);
+      return !disabled;
     }
 
     function getBoxData(e) {
@@ -8167,7 +8300,7 @@
 
   function SelectionTool(gui, ext, hit) {
     var popup = gui.container.findChild('.selection-tool-options');
-    var box = new HighlightBox(gui);
+    var box = new HighlightBox(gui, {draggable: true});
     var coords = popup.findChild('.box-coords').hide();
     var _on = false;
 
@@ -8211,6 +8344,7 @@
     }
 
     function turnOff() {
+      dataBtn.turnOff();
       box.turnOff();
       reset();
       _on = false;
@@ -8221,10 +8355,17 @@
     }
 
     function reset() {
-      popup.hide();
+      hidePopup();
+      setPinning(false);
       hit.clearSelection();
     }
 
+    function setPinning(on) {
+      hit.setPinning(on);
+      if (on) dataBtn.turnOn();
+      else dataBtn.turnOff();
+    }
+
     function getIdsOpt() {
       return hit.getSelectionIds().join(',');
     }
@@ -8239,11 +8380,15 @@
         popup.show();
         updateCoords();
       } else {
-        popup.hide();
-        hideCoords();
+        hidePopup();
       }
     });
 
+    function hidePopup() {
+      popup.hide();
+      hideCoords();
+    }
+
     new SimpleButton(popup.findChild('.delete-btn')).on('click', function() {
       var cmd = '-filter invert ids=' + getIdsOpt();
       runCommand(cmd);
@@ -8259,6 +8404,10 @@
       runCommand(cmd);
     });
 
+    var dataBtn = new ToggleButton(popup.findChild('.data-btn')).on('click', function(e) {
+      setPinning(e.on);
+    });
+
     new SimpleButton(popup.findChild('.duplicate-btn')).on('click', function() {
       var cmd = '-filter + name=selection ids=' + getIdsOpt();
       runCommand(cmd);
@@ -8296,19 +8445,19 @@
         hideCoords();
         return;
       }
-      El(coordsBtn.node()).addClass('selected-btn');
+      El(coordsBtn.node()).addClass('active');
       coords.text(bbox.join(','));
       coords.show();
       GUI.selectElement(coords.node());
     }
 
     function hideCoords() {
-      El(coordsBtn.node()).removeClass('selected-btn');
+      El(coordsBtn.node()).removeClass('active');
       coords.hide();
     }
 
     function runCommand(cmd, turnOff) {
-      popup.hide();
+      hidePopup();
       gui.quiet(true);
       if (gui.console) gui.console.runMapshaperCommands(cmd, function(err) {
         gui.quiet(false);
@@ -8318,6 +8467,55 @@
     }
   }
 
+  function openAddFieldPopup(gui, ids, lyr) {
+    var popup = showPopupAlert('', 'Add field');
+    var el = popup.container();
+    el.addClass('option-menu');
+    var html = `<div><input type="text" class="field-name text-input" placeholder="field name"></div>
+  <div><input type="text" class="field-value text-input" placeholder="value"><div>
+  <div tabindex="0" class="btn dialog-btn">Apply</div> <span class="inline-checkbox"><input type="checkbox" class="all" />assign value to all records</span>`;
+    el.html(html);
+
+    var name = el.findChild('.field-name');
+    name.node().focus();
+    var val = el.findChild('.field-value');
+    var box = el.findChild('.all');
+    var btn = el.findChild('.btn').on('click', function() {
+      var table = internal.getLayerDataTable(lyr); // creates new table if missing
+      var all = box.node().checked;
+      var nameStr = name.node().value.trim();
+      if (!nameStr) return;
+      if (table.fieldExists(nameStr)) {
+        name.node().value = '';
+        return;
+      }
+      var valStr = val.node().value.trim();
+      var value = internal.parseUnknownType(valStr);
+      // table.addField(nameStr, function(d) {
+      //   // parse each time to avoid multiple references to objects
+      //   return (all || d == rec) ? parseUnknownType(valStr) : null;
+      // });
+
+      var cmdStr = `-each "d['${nameStr}'] = `;
+      if (!all) {
+        cmdStr += ids.length == 1 ?
+          `this.id != ${ids[0]}` :
+          `!${JSON.stringify(ids)}.includes(this.id)`;
+        cmdStr += ' ? null : ';
+      }
+      valStr = JSON.stringify(JSON.stringify(value)); // add escapes to strings
+      cmdStr = valStr.replace('"', cmdStr);
+
+      gui.console.runMapshaperCommands(cmdStr, function(err) {
+        if (!err) {
+          popup.close();
+        } else {
+          console.error(err);
+        }
+      });
+    });
+  }
+
   // toNext, toPrev: trigger functions for switching between multiple records
   function Popup(gui, toNext, toPrev) {
     var self = new EventDispatcher();
@@ -8331,7 +8529,6 @@
     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 currIds = [];
 
     el.addClass('rollover'); // used as a sentinel for the hover function
 
@@ -8342,16 +8539,20 @@
     });
 
     self.show = function(id, ids, lyr, pinned) {
-      var editable = pinned && gui.interaction.getMode() == 'data';
+      var singleEdit = pinned && gui.interaction.getMode() == 'data';
+      var multiEdit = pinned && gui.interaction.getMode() == 'selection';
       var maxHeight = parent.node().clientHeight - 36;
-      currIds = [id];
+      var recIds = multiEdit ? ids : [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() {
-        render(content, id, lyr, editable);
+        render(content, recIds, lyr, singleEdit || multiEdit);
       };
       refresh();
-      if (ids && ids.length > 1) {
+      if (multiEdit) {
+        showRecords(ids.length);
+      } else if (ids && ids.length > 1 && !multiEdit) {
         showNav(id, ids, pinned);
       } else {
         tab.hide();
@@ -8365,7 +8566,6 @@
     self.hide = function() {
       if (!isOpen()) return;
       refresh = null;
-      currIds = [];
       // 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();
@@ -8379,6 +8579,13 @@
       return el.visible();
     }
 
+    function showRecords(n) {
+      navInfo.text(n);
+      nextLink.css('display','none');
+      prevLink.css('display','none');
+      tab.show();
+    }
+
     function showNav(id, ids, pinned) {
       var num = ids.indexOf(id) + 1;
       navInfo.text(' ' + num + ' / ' + ids.length + ' ');
@@ -8387,28 +8594,12 @@
       tab.show();
     }
 
-    function render(el, recId, lyr, editable) {
-      var recIds = [recId]; // TODO: support multiple ids
+    function render(el, recIds, lyr, editable) {
       var table = lyr.data; // table can be null (e.g. if layer has no attribute data)
-      var rec = table && (editable ? table.getRecordAt(recId) : table.getReadOnlyRecordAt(recId)) || {};
-      var tableEl = El('table').addClass('selectable'),
-          rows = 0;
-      // self.hide(); // clean up if panel is already open
+      var tableEl = table ? renderTable(recIds, table, editable) : null;
       el.empty(); // clean up if panel is already open
-      utils$1.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++;
-        }
-      });
-
-      tableEl.appendTo(el);
-      if (rows > 0) {
-        // tableEl.appendTo(el);
-
+      if (tableEl) {
+        tableEl.appendTo(el);
         tableEl.on('copy', function(e) {
           // remove leading or trailing tabs that sometimes get copied when
           // selecting from a table
@@ -8419,7 +8610,6 @@
             e.preventDefault(); // don't copy original string with tabs
           }
         });
-
       } else {
         // Some individual features can have undefined values for some or all of
         // their data properties (properties are set to undefined when an input JSON file
@@ -8433,72 +8623,65 @@
         var line = El('div').appendTo(el);
         El('span').addClass('add-field-btn').appendTo(line).on('click', async function(e) {
           // show "add field" dialog
-          renderAddFieldPopup(recIds, lyr);
+          openAddFieldPopup(gui, recIds, lyr);
         }).text('+ add field');
       }
     }
 
-    function renderAddFieldPopup(ids, lyr) {
-      var popup = showPopupAlert('', 'Add field');
-      var el = popup.container();
-      el.addClass('option-menu');
-      var html = `<div><input type="text" class="field-name text-input" placeholder="field name"></div>
-    <div><input type="text" class="field-value text-input" placeholder="value"><div>
-    <div tabindex="0" class="btn dialog-btn">Apply</div> <span class="inline-checkbox"><input type="checkbox" class="all" />assign value to all records</span>`;
-      el.html(html);
-
-      var name = el.findChild('.field-name');
-      name.node().focus();
-      var val = el.findChild('.field-value');
-      var box = el.findChild('.all');
-      var btn = el.findChild('.btn').on('click', function() {
-        var table = internal.getLayerDataTable(lyr); // creates new table if missing
-        var all = box.node().checked;
-        var nameStr = name.node().value.trim();
-        if (!nameStr) return;
-        if (table.fieldExists(nameStr)) {
-          name.node().value = '';
-          return;
+    function renderTable(recIds, table, editable) {
+      var tableEl = El('table').addClass('selectable');
+      var rows = 0;
+      var rec;
+      if (recIds.length == 1) {
+        rec = editable ?
+          table.getReadOnlyRecordAt(recIds[0]) :
+          table.getRecordAt(recIds[0]);
+      } else {
+        rec = getMultiRecord(recIds, table);
+      }
+      utils$1.forEachProperty(rec, function(v, k) {
+        // missing GeoJSON fields are set to undefined on import; skip these
+        if (v === undefined) return;
+        var rowEl = renderRow(k, v, recIds, table, editable);
+        if (rowEl) {
+          rowEl.appendTo(tableEl);
+          rows++;
         }
-        var valStr = val.node().value.trim();
-        var value = parseUnknownType(valStr);
-        // table.addField(nameStr, function(d) {
-        //   // parse each time to avoid multiple references to objects
-        //   return (all || d == rec) ? parseUnknownType(valStr) : null;
-        // });
-
-        var cmdStr = `-each "d['${nameStr}'] = `;
-        if (!all) {
-          cmdStr += ids.length == 1 ?
-            `this.id != ${ids[0]}` :
-            `!${JSON.stringify(ids)}.includes(this.id)`;
-          cmdStr += ' ? null : ';
-        }
-        valStr = JSON.stringify(JSON.stringify(value)); // add escapes to strings
-        cmdStr = valStr.replace('"', cmdStr);
-
-        gui.console.runMapshaperCommands(cmdStr, function(err) {
-          if (!err) {
-            popup.close();
-          } else {
-            console.error(err);
+      });
+      return rows > 0 ? tableEl : null;
+    }
+
+    function getMultiRecord(recIds, table) {
+      var fields = table.getFields();
+      var rec = {};
+      recIds.forEach(function(id) {
+        var d = table.getRecordAt(id) || {};
+        var k, v;
+        for (var i=0; i<fields.length; i++) {
+          k = fields[i];
+          v = d[k];
+          if (k in rec === false) {
+            rec[k] = v;
+          } else if (rec[k] !== v) {
+            rec[k] = null;
           }
-        });
+        }
       });
+      return rec;
     }
 
-    function renderRow(table, rec, key, type, editable) {
-      var val = rec[key];
+
+    function renderRow(key, val, recIds, table, editable) {
+      var type = getFieldType(val, key, table);
       var str = formatInspectorValue(val, type);
       var rowHtml = `<td class="field-name">${key}</td><td><span class="value">${utils$1.htmlEscape(str)}</span> </td>`;
-      var cell = El('tr')
-          .appendTo(table)
-          .html(rowHtml)
-          .findChild('.value');
-      setFieldClass(cell, val, type);
+      var rowEl = El('tr').html(rowHtml);
+      var cellEl = rowEl.findChild('.value');
+      setFieldClass(cellEl, val, type);
       if (editable) {
-        editItem(cell, rec, key, type);
+        editItem(cellEl, key, val, recIds, table, type);
       }
+      return rowEl;
     }
 
     function setFieldClass(el, val, type) {
@@ -8511,10 +8694,10 @@
       el.classed('empty', isEmpty);
     }
 
-    function editItem(el, rec, key, type) {
+    function editItem(el, key, val, recIds, table, type) {
       var input = new ClickText2(el),
-          strval = formatInspectorValue(rec[key], type),
-          parser = getInputParser(type);
+          strval = formatInspectorValue(val, type),
+          parser = internal.getInputParser(type);
       el.parent().addClass('editable-cell');
       el.addClass('colored-text dot-underline');
       input.on('change', function(e) {
@@ -8526,17 +8709,27 @@
         } else if (strval != strval2) {
           // field content has changed
           strval = strval2;
-          gui.dispatchEvent('data_preupdate', {ids: currIds}); // for undo/redo
-          rec[key] = val2;
-          gui.dispatchEvent('data_postupdate', {ids: currIds});
+          gui.dispatchEvent('data_preupdate', {ids: recIds}); // for undo/redo
+          // rec[key] = val2;
+          updateRecords(recIds, key, val2, table);
+          gui.dispatchEvent('data_postupdate', {ids: recIds});
           input.value(strval);
           setFieldClass(el, val2, type);
-          self.dispatchEvent('data_updated', {field: key, value: val2, ids: currIds});
+          self.dispatchEvent('data_updated', {field: key, value: val2, ids: recIds});
         }
       });
     }
   }
 
+  function updateRecords(ids, f, v, table) {
+    var records = table.getRecords();
+    ids.forEach(function(id) {
+      var d = records[id] || {};
+      d[f] = v;
+      records[id] = d;
+    });
+  }
+
   function formatInspectorValue(val, type) {
     var str;
     if (type == 'date') {
@@ -8549,60 +8742,10 @@
     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;
-      }
-      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;
-    }
-  };
-
-  function parseUnknownType(str) {
-    var val = inputParsers.number(str);
-    if (val !== null) return val;
-    val = inputParsers.object(str);
-    if (val !== null) return val;
-    return str;
-  }
-
-  function getInputParser(type) {
-    return inputParsers[type || 'multiple'];
-  }
 
   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());
+    return internal.getValueType(val) || internal.getColumnType(key, table.getRecords()) ;
   }
 
   function InspectionControl2(gui, hit) {
@@ -8627,16 +8770,20 @@
     });
 
     hit.on('change', function(e) {
-      var ids;
       if (!inspecting()) return;
-      ids = e.mode == 'selection' ? null : e.ids;
-      inspect(e.id, e.pinned, ids);
+      var ids;
+      if (e.mode == 'selection') {
+        ids = e.pinned && e.ids || [];
+      } else {
+        ids = e.ids || [];
+      }
+      inspect(e.id, ids, e.pinned);
     });
 
     // id: Id of a feature in the active layer, or -1
-    function inspect(id, pin, ids) {
+    function inspect(id, ids, pin) {
       var target = hit.getHitTarget();
-      if (id > -1 && inspecting() && target && target.layer) {
+      if ((id > -1 || ids && ids.length > 0) && inspecting() && target && target.layer) {
         _popup.show(id, ids, target.layer, pin);
       } else {
         _popup.hide();
@@ -8935,6 +9082,9 @@
       hit.clearVertexOverlay();
     }
 
+    // return data on the nearest vertex (or identical vertices) to the pointer
+    // (if within a distance threshold)
+    //
     function findDraggableVertices(e) {
       var target = hit.getHitTarget();
       var shp = target.layer.shapes[e.id];
@@ -9097,35 +9247,6 @@
     // }
   }
 
-  function initPointDrawing(gui, ext, hit) {
-    function active(e) {
-      return e.id > -1 && gui.interaction.getMode() == 'add-points';
-    }
-  }
-
-  function Pencil(gui, mouse, hit) {
-    var self = this;
-    var _on = false;
-
-    self.turnOn = function() {
-      _on = true;
-    };
-
-    self.turnOff = function() {
-      _on = false;
-    };
-
-
-
-
-
-
-  }
-
-  function initDrawing(gui, ext, mouse, hit) {
-    initPointDrawing(gui, new Pencil(gui, mouse, hit));
-  }
-
   var darkStroke = "#334",
       lightStroke = "#b7d9ea",
       violet = "#cc6acc",
@@ -9452,13 +9573,145 @@
     return internal.findPropertiesBySymbolGeom(fields, lyr.geometry_type);
   }
 
+  function initPointDrawing(gui, ext, mouse, hit) {
+
+    gui.on('interaction_mode_change', function(e) {
+      gui.container.findChild('.map-layers').classed('add-points', e.mode === 'add-points');
+    });
+
+    function active() {
+      return gui.interaction.getMode() == 'add-points';
+    }
+
+    mouse.on('click', function(e) {
+      if (!active()) return;
+      addPoint(e.x, e.y);
+      gui.dispatchEvent('map-needs-refresh');
+    });
+
+    // x, y: pixel coordinates
+    function addPoint(x, y) {
+      var p = ext.translatePixelCoords(x, y);
+      var target = hit.getHitTarget();
+      var lyr = target.layer;
+      var fid = lyr.shapes.length;
+      var d = lyr.data ? getEmptyDataRecord(lyr.data) : null;
+      if (d) {
+        // this seems to work even for projected layers -- the data tables
+        // of projected and original data seem to be shared.
+        lyr.data.getRecords()[fid] = d;
+        // TODO: handle SVG symbol layer
+        if (internal.layerHasLabels(lyr)) {
+          d['label-text'] = 'TBD'; // without text, new labels will be invisible
+        } else if (layerHasCanvasDisplayStyle(lyr)) {
+          d.r = 3; // show a black circle if layer is styled
+        }
+      }
+      lyr.shapes[fid] = [p];
+      updatePointCoords(target, fid);
+    }
+
+    function getEmptyDataRecord(table) {
+      return table.getFields().reduce(function(memo, name) {
+        memo[name] = null;
+        return memo;
+      }, {});
+    }
+  }
+
+  function initLineDrawing(gui, ext, mouse, hit) {
+    var _on = false;
+    var _coords;
+    var _lastClick;
+
+    gui.on('interaction_mode_change', function(e) {
+      _on = e.mode === 'draw-lines';
+      gui.container.findChild('.map-layers').classed('draw-lines', _on);
+    });
+
+    function active() {
+      return _on;
+    }
+
+    function extending() {
+      return active() && !!_coords;
+    }
+
+    function startPath(e) {
+
+    }
+
+    function extendPath(e) {
+
+    }
+
+    function finishPath() {
+      _coords = null;
+    }
+
+    gui.keyboard.on('keydown', function(evt) {
+      if (!active()) return;
+      if (evt.keyCode == 27) { // esc
+        finishPath();
+      }
+    });
+
+    mouse.on('click', function(e) {
+      if (!active()) return;
+      // console.log('[click]', e)
+      // addPoint(e.x, e.y);
+      // gui.dispatchEvent('map-needs-refresh');
+      _lastClick = e;
+    });
+
+    // note: second click event is fired before this
+    mouse.on('dblclick', function(e) {
+      if (!active()) return;
+      // block navigation
+      e.stopPropagation();
+      finishPath();
+
+    }, null, 3); // hit detection is priority 2
+
+    mouse.on('hover', function(e) {
+      if (!active()) return;
+    });
+
+    // x, y: pixel coordinates
+    function addPoint(x, y) {
+      var p = ext.translatePixelCoords(x, y);
+      var target = hit.getHitTarget();
+      var lyr = target.layer;
+      var fid = lyr.shapes.length;
+      if (lyr.data) {
+        // this seems to work even for projected layers -- the data tables
+        // of projected and original data seem to be shared.
+        lyr.data.getRecords()[fid] = getEmptyDataRecord(lyr.data);
+      }
+      lyr.shapes[fid] = [p];
+      updatePointCoords(target, fid);
+    }
+
+    function getEmptyDataRecord(table) {
+      return table.getFields().reduce(function(memo, name) {
+        memo[name] = null;
+        return memo;
+      }, {});
+    }
+  }
+
+  function initDrawing(gui, ext, mouse, hit) {
+    initPointDrawing(gui, ext, mouse, hit);
+    initLineDrawing(gui, ext, mouse, hit);
+  }
+
   function MapExtent(_position) {
     var _scale = 1,
         _cx, _cy, // center in geographic units
         _fullBounds, // full (zoomed-out) content bounds, including any padding
         _strictBounds, // full extent must fit inside, if set
         _self = this,
-        _frame;
+        _frame; // optional frame data (bbox, width, height)
 
     _position.on('resize', function(e) {
       if (ready()) {
@@ -9576,16 +9829,16 @@
       return this.getTransform().transform(x, y);
     };
 
-    this.setFrame = function(frame) {
+    this.setFrameData = function(frame) {
       _frame = frame || null;
     };
 
-    this.getFrame = function() {
+    this.getFrameData = function() {
       return _frame || null;
     };
 
     this.getSymbolScale = function() {
-      if (!_frame) return 0;
+      if (!_frame) return 1;
       var bounds = new Bounds(_frame.bbox);
       var bounds2 = bounds.clone().transform(this.getTransform());
       return bounds2.width() / _frame.width;
@@ -10198,12 +10451,12 @@
         // (style.opacity < 1 ? '~' + style.opacity : '') +
         (style.fillPattern ? '~' + style.fillPattern : '');
     }
-
     return _self;
   }
 
   function getScaledLineScale(ext) {
-    return ext.getSymbolScale() || getLineScale(ext);
+    var previewScale = ext.getSymbolScale();
+    return previewScale == 1 ? getLineScale(ext) : previewScale;
   }
 
   // Vary line width according to zoom ratio.
@@ -10381,7 +10634,8 @@
         if (pixRatio > 1) {
           // bump up thin lines on retina, but not to more than 1px
           // (tests on Chrome showed much faster rendering of 1px lines)
-          strokeWidth = strokeWidth < 1 ? 1 : strokeWidth * pixRatio;
+          // strokeWidth = strokeWidth < 1 ? 1 : strokeWidth * pixRatio;
+          strokeWidth = strokeWidth * pixRatio;
         }
         ctx.lineCap = style.lineCap || 'round';
         ctx.lineJoin = style.lineJoin || 'round';
@@ -10431,7 +10685,7 @@
 
   function getSvgFurnitureTransform(ext) {
     var scale = ext.getSymbolScale();
-    var frame = ext.getFrame();
+    var frame = ext.getFrameData();
     var p = ext.translateCoords(frame.bbox[0], frame.bbox[3]);
     return internal.svg.getTransform(p, scale);
   }
@@ -10442,7 +10696,7 @@
   }
 
   function renderFurniture(lyr, ext) {
-    var frame = ext.getFrame(); // frame should be set if we're rendering a furniture layer
+    var frame = ext.getFrameData(); // frame should be set if we're rendering a furniture layer
     var obj = internal.getEmptyLayerForSVG(lyr, {});
     if (!frame) {
       stop$1('Missing map frame data');
@@ -10479,7 +10733,7 @@
       target.svg_id = id;
       resize(ext);
       if (type == 'label' || type == 'symbol') {
-        html = renderSymbols(target.layer, ext, type);
+        html = renderSymbols(target.layer, ext);
       } else if (type == 'furniture') {
         html = renderFurniture(target.layer, ext);
       }
@@ -10493,13 +10747,17 @@
     };
 
     function reposition(target, type, ext) {
-      var container = el.findChild('.' + target.svg_id).node();
+      var container = el.findChild('.' + target.svg_id);
+      if (!container || !container.node()) {
+        console.error('[reposition] missing SVG container');
+        return;
+      }
       var elements;
       if (type == 'symbol') {
-        elements = El.findAll('.mapshaper-svg-symbol', container);
+        elements = El.findAll('.mapshaper-svg-symbol', container.node());
         repositionSymbols(elements, target.layer, ext);
       } else if (type == 'furniture') {
-        repositionFurniture(container, target.layer, ext);
+        repositionFurniture(container.node(), target.layer, ext);
       } else {
         // container.getElementsByTagName('text')
         error('Unsupported symbol type:', type);
@@ -10514,7 +10772,7 @@
     return el;
   }
 
-  function LayerStack(gui, container, ext, mouse) {
+  function LayerRenderer(gui, container, ext, mouse) {
     var el = El(container),
         _mainCanv = new DisplayCanvas().appendTo(el),
         _overlayCanv = new DisplayCanvas().appendTo(el),
@@ -10534,14 +10792,12 @@
       }
       layers.forEach(function(lyr) {
         var isSvgLayer = internal.layerHasSvgSymbols(lyr.layer) || internal.layerHasLabels(lyr.layer);
-        //if (!svgType || svgType == 'label') { // svg labels may have canvas dots
-        if (!isSvgLayer) { // svg labels may have canvas dots
-          drawCanvasLayer(lyr, _mainCanv);
-        }
         if (isSvgLayer && !needSvgRedraw) {
           _svg.reposition(lyr, 'symbol');
         } else if (isSvgLayer) {
           _svg.drawLayer(lyr, 'symbol');
+        } else {
+           drawCanvasLayer(lyr, _mainCanv);
         }
       });
     };
@@ -10606,7 +10862,7 @@
   //
   function BoxTool(gui, ext, nav) {
     var self = new EventDispatcher();
-    var box = new HighlightBox(gui, {persistent: true, handles: true});
+    var box = new HighlightBox(gui, {name: 'box-tool', persistent: true, handles: true, draggable: true});
     var popup = gui.container.findChild('.box-tool-options');
     var coords = popup.findChild('.box-coords');
     var _on = false;
@@ -10639,7 +10895,8 @@
     });
 
     new SimpleButton(popup.findChild('.rect-btn')).on('click', function() {
-      runCommand('-rectangle + bbox=' + box.getDataCoords().join(','));
+      var cmd = '-rectangle + bbox=' + box.getDataCoords().join(',');
+      runCommand(cmd);
     });
 
     gui.addMode('box_tool', turnOn, turnOff);
@@ -10652,7 +10909,7 @@
       }
     });
 
-    gui.on('box_drag_start', function() {
+    gui.on('shift_drag_start', function() {
       // box.classed('zooming', inZoomMode());
       hideCoords();
     });
@@ -10718,7 +10975,7 @@
   }
 
   function RectangleControl(gui, hit) {
-    var box = new HighlightBox(gui, {persistent: true, handles: true, classname: 'rectangles'});
+    var box = new HighlightBox(gui, {name: 'rectangle-tool', persistent: true, handles: true, classname: 'rectangles', draggable: false});
     var _on = false;
     var dragInfo;
 
@@ -10734,7 +10991,7 @@
 
     hit.on('change', function(e) {
       if (!_on) return;
-      // TODO: handle multiple hits (see gui-inspection-control2)
+      // TODO: handle multiple hits (see gui-inspection-control)
       var id = e.id;
       if (e.id > -1 && e.pinned) {
         var target = hit.getHitTarget();
@@ -10755,8 +11012,7 @@
         gui.container.findChild('.map-layers').classed('dragging', true);
 
       } else if (dragInfo) {
-        // TODO: handle this event: add undo/redo states
-        gui.dispatchEvent('rectangle_dragend', dragInfo);
+        gui.dispatchEvent('rectangle_dragend', dragInfo); // save undo state
         gui.container.findChild('.map-layers').classed('dragging', false);
         reset();
       } else {
@@ -11296,7 +11552,7 @@
         _hit,
         _basemap,
         _intersectionLyr, _activeLyr, _overlayLyr,
-        _stack, _dynamicCRS;
+        _renderer, _dynamicCRS;
 
     _basemap = new Basemap(gui, _ext);
 
@@ -11391,13 +11647,12 @@
       clearAllDisplayArcs();
 
       // Reproject all visible map layers
-      if (_activeLyr) projectDisplayLayer(_activeLyr, newCRS);
-      if (_intersectionLyr) projectDisplayLayer(_intersectionLyr, newCRS);
-      if (_overlayLyr) {
-        projectDisplayLayer(_overlayLyr, newCRS);
-      }
-      updateVisibleMapLayers(); // any other display layers will be projected as they are regenerated
-      updateLayerStyles(getDrawableContentLayers()); // kludge to make sure all layers have styles
+      getContentLayers().forEach(function(lyr) {
+        projectDisplayLayer(lyr, newCRS);
+      });
+
+      // kludge to make sure all layers have styles
+      updateLayerStyles(getContentLayers());
 
       // Update map extent (also triggers redraw)
       projectMapExtent(_ext, oldCRS, this.getDisplayCRS(), calcFullBounds());
@@ -11450,19 +11705,12 @@
       updateVisibleMapLayers();
       fullBounds = calcFullBounds();
 
-      if (!prevLyr || prevLyr.tabular || _activeLyr.tabular || isFrameView()) {
+      if (!prevLyr || prevLyr.tabular || _activeLyr.tabular) {
         needReset = true;
       } else {
         needReset = mapNeedsReset(fullBounds, _ext.getFullBounds(), _ext.getBounds(), e.flags);
       }
 
-      if (isFrameView()) {
-        _nav.setZoomFactor(0.05); // slow zooming way down to allow fine-tuning frame placement // 0.03
-        _ext.setFrame(calcFullBounds()); // TODO: remove redundancy with drawLayers()
-        needReset = true; // snap to frame extent
-      } else {
-        _nav.setZoomFactor(1);
-      }
       _ext.setFullBounds(fullBounds, getStrictBounds()); // update 'home' button extent
 
       if (needReset) {
@@ -11475,7 +11723,7 @@
     // Initialization just before displaying the map for the first time
     function initMap() {
       _ext.resize();
-      _stack = new LayerStack(gui, el, _ext, _mouse);
+      _renderer = new LayerRenderer(gui, el, _ext, _mouse);
       gui.buttons.show();
 
       if (opts.inspectorControl) {
@@ -11485,16 +11733,13 @@
         new BoxTool(gui, _ext, _nav),
         new RectangleControl(gui, _hit),
         initInteractiveEditing(gui, _ext, _hit);
-        // initDrawing(gui, _ext, _mouse, _hit);
+        initDrawing(gui, _ext, _mouse, _hit);
         _hit.on('change', updateOverlayLayer);
       }
 
       _ext.on('change', function(e) {
         if (_basemap) _basemap.refresh(); // keep basemap synced up (if enabled)
         if (e.reset) return; // don't need to redraw map here if extent has been reset
-        if (isFrameView()) {
-          updateFrameExtent();
-        }
         drawLayers('nav');
       });
 
@@ -11516,7 +11761,6 @@
 
       // 'hover' avoids redrawing all svg symbols when only highlight needs to refresh
       drawLayers('hover');
-      // drawLayers();
     }
 
     function getDisplayOptions() {
@@ -11525,21 +11769,6 @@
       };
     }
 
-    // Update map frame after user navigates the map in frame edit mode
-    function updateFrameExtent() {
-      var frameLyr = internal.findFrameLayer(model);
-      var rec = frameLyr.data.getRecordAt(0);
-      var viewBounds = _ext.getBounds();
-      var w = viewBounds.width() * rec.width / _ext.width();
-      var h = w * rec.height / rec.width;
-      var cx = viewBounds.centerX();
-      var cy = viewBounds.centerY();
-      rec.bbox = [cx - w/2, cy - h/2, cx + w/2, cy + h/2];
-      _ext.setFrame(getFrameData());
-      _ext.setFullBounds(new Bounds(rec.bbox));
-      _ext.reset();
-    }
-
     function getStrictBounds() {
       if (internal.isWebMercator(map.getDisplayCRS())) {
         return getMapboxBounds();
@@ -11551,12 +11780,9 @@
       _ext.setFullBounds(calcFullBounds(), getStrictBounds());
     }
 
-    function calcFullBounds() {
-      if (isPreviewView()) {
-        return internal.getFrameLayerBounds(internal.findFrameLayer(model));
-      }
+    function getContentLayerBounds() {
       var b = new Bounds();
-      var layers = getDrawableContentLayers();
+      var layers = getContentLayers();
       layers.forEach(function(lyr) {
         b.mergeBounds(lyr.bounds);
       });
@@ -11565,6 +11791,11 @@
         // assign bounds to empty layers, to prevent rendering errors downstream
         b.setBounds(0,0,0,0);
       }
+      return b;
+    }
+
+    function calcFullBounds() {
+      var b = getContentLayerBounds();
 
       // add margin
       // use larger margin for small sizes
@@ -11590,33 +11821,25 @@
       return isActiveLayer(lyr) || lyr.pinned;
     }
 
-    function isFrameLayer(lyr) {
-      return !!(lyr && lyr == internal.findFrameLayer(model));
-    }
-
     function isTableView() {
       return !isPreviewView() && !!_activeLyr.tabular;
     }
 
-    // Preview view: a special view centering the map 'frame'
-    // (disabling this pending interface rethink)
-    function isPreviewView() {
-      return false;
-      // var frameLyr = internal.findFrameLayer(model);
-      // return !!frameLyr; //  && isVisibleLayer(frameLyr)
+    function findFrameLayer() {
+      return getVisibleMapLayers().find(function(lyr) {
+        return internal.isFrameLayer(lyr.layer, lyr.arcs);
+      });
     }
 
-    // Frame view means frame layer is visible and active (selected)
-    // (disabling pending rethink)
-    function isFrameView() {
-      return false;
-      // var frameLyr = internal.findFrameLayer(model);
-      // return isActiveLayer(frameLyr) && isVisibleLayer(frameLyr);
+    // Preview view: symbols are scaled based on display size of frame layer
+    function isPreviewView() {
+      var data = getFrameData();
+      return !!data;
     }
 
     function getFrameData() {
-      var frameLyr = internal.findFrameLayer(model);
-      return frameLyr && internal.getFurnitureLayerData(frameLyr) || null;
+      var lyr = findFrameLayer();
+      return lyr && internal.getFrameLayerData(lyr.layer, lyr.arcs) || null;
     }
 
     function clearAllDisplayArcs() {
@@ -11648,7 +11871,7 @@
       });
     }
 
-    function getDrawableContentLayers() {
+    function getContentLayers() {
       var layers = getVisibleMapLayers();
       if (isTableView()) return findActiveLayer(layers);
       return layers.filter(function(o) {
@@ -11656,6 +11879,13 @@
       });
     }
 
+    function getDrawableContentLayers() {
+      return getContentLayers().filter(function(lyr) {
+        if (isActiveLayer(lyr.layer) && lyr.layer.hidden) return false;
+        return true;
+      });
+    }
+
     function getDrawableFurnitureLayers(layers) {
       if (!isPreviewView()) return [];
       return getVisibleMapLayers().filter(function(o) {
@@ -11706,7 +11936,7 @@
       var layersMayHaveChanged = action != 'nav'; // !action;
       var fullBounds;
       var contentLayers = getDrawableContentLayers();
-      var furnitureLayers = getDrawableFurnitureLayers();
+      // var furnitureLayers = getDrawableFurnitureLayers();
       if (!(_ext.width() > 0 && _ext.height() > 0)) {
         // TODO: track down source of these errors
         console.error("Collapsed map container, unable to draw.");
@@ -11714,7 +11944,7 @@
       }
       if (layersMayHaveChanged) {
         // kludge to handle layer visibility toggling
-        _ext.setFrame(isPreviewView() ? getFrameData() : null);
+        _ext.setFrameData(isPreviewView() ? getFrameData() : null);
         updateFullBounds();
         updateLayerStyles(contentLayers);
         updateLayerStackOrder(model.getLayers());// update menu_order property of all layers
@@ -11725,11 +11955,11 @@
       }
       // RENDERING
       // draw main content layers
-      _stack.drawMainLayers(contentLayers, action);
+      _renderer.drawMainLayers(contentLayers, action);
       // draw hover & selection overlay
-      _stack.drawOverlayLayer(_overlayLyr, action);
+      _renderer.drawOverlayLayer(_overlayLyr, action);
       // draw furniture
-      _stack.drawFurnitureLayers(furnitureLayers, action);
+      // _renderer.drawFurnitureLayers(furnitureLayers, action);
       gui.dispatchEvent('map_rendered');
     }
   }