mapshaper 0.6.66 → 0.6.68

package/www/mapshaper-gui.js

@@ -4306,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 + '">';
@@ -4384,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();
         });
@@ -4413,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);
       });
     }
 
@@ -7238,7 +7257,7 @@
       self.clearSelection();
     });
 
-    gui.on('box_drag_start', function() {
+    gui.on('shift_drag_start', function() {
       self.clearHover();
     });
 
@@ -7801,6 +7820,7 @@
     function onMouseUp(e) {
       var evt = procMouseEvent(e),
           elapsed, dx, dy;
+      _self.dispatchEvent('mouseup', evt);
       if (_dragging) {
         stopDragging(evt);
       }
@@ -7828,6 +7848,7 @@
 
     function onMouseMove(e) {
       var evt = procMouseEvent(e);
+      _self.dispatchEvent('mousemove', evt);
       if (!_dragging && _downEvt && _downEvt.hover) {
         _dragging = true;
         _self.dispatchEvent('dragstart', evt);
@@ -7894,13 +7915,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) {
@@ -7910,19 +7937,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});
@@ -7943,31 +7971,21 @@
         });
       });
 
-      document.addEventListener('mousemove', function(e) {
-        if (!_on || !activeHandle || !prevXY || !boxCoords) return;
+      gui.map.getMouse().on('mousemove', function(e) {
+        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;
-        var center = activeHandle.col == 'center' && activeHandle.row == 'center';
-        if (activeHandle.col == 'left' || center) {
-          boxCoords[0] += dx;
-        }
-        if (activeHandle.col == 'right' || center) {
-          boxCoords[2] += dx;
-        }
-        if (activeHandle.row == 'top' || center) {
-          boxCoords[3] += dy;
-        }
-        if (activeHandle.row == 'bottom' || center) {
-          boxCoords[1] += dy;
+        var scaling = gui.keyboard.shiftIsPressed() && activeHandle.type == 'corner';
+        if (scaling) {
+          rescaleBox(e.x, e.y);
+        } else {
+          resizeBox(xy.x - prevXY.x, xy.y - prevXY.y, activeHandle);
         }
         prevXY = xy;
         redraw();
         box.dispatchEvent('handle_drag');
       });
 
-      document.addEventListener('mouseup', function() {
+      gui.map.getMouse().on('mouseup', function(e) {
         if (activeHandle && _on) {
           activeHandle.el.css('background', null);
           activeHandle = null;
@@ -7980,6 +7998,43 @@
       });
     }
 
+    function resizeBox(dx, dy, activeHandle) {
+      var shifting = activeHandle.type == 'center';
+      var centered = gui.keyboard.shiftIsPressed() && activeHandle.type == 'edge';
+      var scale = gui.map.getExtent().getPixelSize();
+      dx *= scale;
+      dy *= -scale;
+
+      if (activeHandle.col == 'left' || shifting) {
+        boxCoords[0] += dx;
+        if (centered) boxCoords[2] -= dx;
+      }
+      if (activeHandle.col == 'right' || shifting) {
+        boxCoords[2] += dx;
+        if (centered) boxCoords[0] -= dx;
+      }
+      if (activeHandle.row == 'top' || shifting) {
+        boxCoords[3] += dy;
+        if (centered) boxCoords[1] -= dy;
+      }
+      if (activeHandle.row == 'bottom' || shifting) {
+        boxCoords[1] += dy;
+        if (centered) boxCoords[3] -= dy;
+      }
+    }
+
+    function rescaleBox(x, y) {
+      var p = gui.map.getExtent().translatePixelCoords(x, y);
+      var cx = (boxCoords[0] + boxCoords[2])/2;
+      var cy = (boxCoords[1] + boxCoords[3])/2;
+      var dist2 = geom.distance2D(cx, cy, p[0], p[1]);
+      var dist = geom.distance2D(cx, cy, boxCoords[0], boxCoords[1]);
+      var k = dist2 / dist;
+      var dx = (boxCoords[2] - cx) * k;
+      var dy = (boxCoords[3] - cy) * k;
+      boxCoords = [cx - dx, cy - dy, cx + dx, cy + dy];
+    }
+
     box.setDataCoords = function(bbox) {
       boxCoords = bbox;
       redraw();
@@ -8003,9 +8058,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 = {
@@ -8073,8 +8130,10 @@
       // if (i == 4) continue; // skip middle handle
       var c = Math.floor(i / 3);
       var r = i % 3;
+      var type = i == 4 && 'center' || c != 1 && r != 1 && 'corner' || 'edge';
       handles.push({
         el: El('div').addClass('handle').appendTo(el),
+        type: type,
         col: c == 0 && 'left' || c == 1 && 'center' || 'right',
         row: r == 0 && 'top' || r == 1 && 'center' || 'bottom'
       });
@@ -8116,13 +8175,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;
     };
@@ -8167,18 +8227,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);
       }
@@ -8187,9 +8247,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();
       }
     });
@@ -8207,7 +8267,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) {
@@ -8263,7 +8325,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;
 
@@ -9310,50 +9372,22 @@
           dotColor: violet,
           dotSize: 3
         }, polyline:  {
-          strokeColor: black, // violet,
+          strokeColor: violet, // black, // violet,
           strokeWidth: 3
         }
       };
 
-  function getIntersectionStyle(lyr) {
+  function getIntersectionStyle(lyr, opts) {
     return getDefaultStyle(lyr, intersectionStyle);
   }
 
-  function getDefaultStyle(lyr, baseStyle) {
-    var style = utils$1.extend({}, baseStyle);
-    // reduce the dot size of large point layers
-    if (lyr.geometry_type == 'point' && style.dotSize > 0) {
-      style.dotSize *= getDotScale$1(lyr);
-    }
-    return style;
-  }
-
-  function getDotScale$1(lyr) {
-    var topTier = 50000;
-    var n = countPoints(lyr.shapes, topTier + 2); // short-circuit point counting above top threshold
-    var k = n < 200 && 4 || n < 2500 && 3 || n < 10000 && 2 || 1;
-    // var k = n >= topTier && 0.25 || n > 10000 && 0.45 || n > 2500 && 0.65 || n > 200 && 0.85 || 1;
-    return k;
-  }
-
-  function countPoints(shapes, max) {
-    var count = 0;
-    var i, n, shp;
-    max = max || Infinity;
-    for (i=0, n=shapes.length; i<n && count<=max; i++) {
-      shp = shapes[i];
-      count += shp ? shp.length : 0;
-    }
-    return count;
-  }
-
   // Style for unselected layers with visibility turned on
   // (styled layers have)
-  function getReferenceStyle(lyr) {
+  function getReferenceLayerStyle(lyr, opts) {
     var style;
-    if (layerHasCanvasDisplayStyle(lyr)) {
+    if (layerHasCanvasDisplayStyle(lyr) && !opts.outlineMode) {
       style = getCanvasDisplayStyle(lyr);
-    } else if (internal.layerHasLabels(lyr)) {
+    } else if (internal.layerHasLabels(lyr) && !opts.outlineMode) {
       style = {dotSize: 0}; // no reference dots if labels are visible
     } else {
       style = getDefaultStyle(lyr, referenceStyle);
@@ -9361,13 +9395,13 @@
     return style;
   }
 
-  function getActiveStyle(lyr, darkMode) {
+  function getActiveLayerStyle(lyr, opts) {
     var style;
-    if (layerHasCanvasDisplayStyle(lyr)) {
+    if (layerHasCanvasDisplayStyle(lyr) && !opts.outlineMode) {
       style = getCanvasDisplayStyle(lyr);
-    } else if (internal.layerHasLabels(lyr)) {
+    } else if (internal.layerHasLabels(lyr) && !opts.outlineMode) {
       style = getDefaultStyle(lyr, activeStyleForLabels);
-    } else if (darkMode) {
+    } else if (opts.darkMode) {
       style = getDefaultStyle(lyr, activeStyleDarkMode);
     } else {
       style = getDefaultStyle(lyr, activeStyle);
@@ -9375,21 +9409,6 @@
     return style;
   }
 
-  // style for vertex edit mode
-  function getVertexStyle(lyr, o) {
-    return {
-      ids: o.ids,
-      overlay: true,
-      strokeColor: black,
-      strokeWidth: 1.5,
-      vertices: true,
-      vertex_overlay_color: violet,
-      vertex_overlay: o.hit_coordinates || null,
-      selected_points: o.selected_points || null,
-      fillColor: null
-    };
-  }
-
   // Returns a display style for the overlay layer.
   // The overlay layer renders several kinds of feature, each of which is displayed
   // with a different style.
@@ -9398,47 +9417,103 @@
   // * selected shapes
   // * pinned shapes
   //
-  function getOverlayStyle(lyr, o) {
-    if (o.mode == 'vertices') {
-      return getVertexStyle(lyr, o);
+  function getOverlayStyle(baseLyr, o, opts) {
+    if (opts.interactionMode == 'vertices') {
+      return getVertexStyle(baseLyr, o);
     }
-    var geomType = lyr.geometry_type;
+    var geomType = baseLyr.geometry_type;
     var topId = o.id; // pinned id (if pinned) or hover id
     var topIdx = -1;
     var styler = function(style, i) {
-      utils$1.extend(style, i === topIdx ? topStyle: baseStyle);
+      var defaultStyle = i === topIdx ? topStyle : outlineStyle;
+      if (baseStyle.styler) {
+        Object.assign(style, baseStyle);
+        baseStyle.styler(style, i);
+        style.strokeColor = defaultStyle.strokeColor;
+        style.fillColor = defaultStyle.fillColor;
+      } else {
+        Object.assign(style, defaultStyle);
+      }
     };
-    var baseStyle = getDefaultStyle(lyr, selectionStyles[geomType]);
+    // var baseStyle = getDefaultStyle(baseLyr, selectionStyles[geomType]);
+    var baseStyle = getActiveLayerStyle(baseLyr, opts);
+    var outlineStyle = getDefaultStyle(baseLyr, selectionStyles[geomType]);
     var topStyle;
     var ids = o.ids.filter(function(i) {
       return i != o.id; // move selected id to the end
     });
     if (o.id > -1) { // pinned or hover style
-      topStyle = getSelectedFeatureStyle(lyr, o);
+      topStyle = getSelectedFeatureStyle(baseLyr, o, opts);
       topIdx = ids.length;
       ids.push(o.id); // put the pinned/hover feature last in the render order
     }
     var style = {
-      styler: styler,
-      ids: ids,
+      baseStyle: baseStyle,
+      styler,
+      ids,
       overlay: true
     };
 
-    if (layerHasCanvasDisplayStyle(lyr)) {
+    if (layerHasCanvasDisplayStyle(baseLyr) && !opts.outlineMode) {
       if (geomType == 'point') {
-        style.styler = getOverlayPointStyler(getCanvasDisplayStyle(lyr).styler, styler);
+        style.styler = getOverlayPointStyler(getCanvasDisplayStyle(baseLyr).styler, styler);
       }
       style.type = 'styled';
     }
     return ids.length > 0 ? style : null;
   }
 
-  function getSelectedFeatureStyle(lyr, o) {
+
+  function getDefaultStyle(lyr, baseStyle) {
+    var style = Object.assign({}, baseStyle);
+    // reduce the dot size of large point layers
+    if (lyr.geometry_type == 'point' && style.dotSize > 0) {
+      style.dotSize *= getDotScale$1(lyr);
+    }
+    return style;
+  }
+
+  function getDotScale$1(lyr) {
+    var topTier = 10000;
+    var n = countPoints(lyr.shapes, topTier); // short-circuit point counting above top threshold
+    var k = n < 200 && 4 || n < 2500 && 3 || n < topTier && 2 || 1;
+    return k;
+  }
+
+  function countPoints(shapes, max) {
+    var count = 0;
+    var i, n, shp;
+    max = max || Infinity;
+    for (i=0, n=shapes.length; i<n && count<max; i++) {
+      shp = shapes[i];
+      count += shp ? shp.length : 0;
+    }
+    return count;
+  }
+
+
+  // style for vertex edit mode
+  function getVertexStyle(lyr, o) {
+    return {
+      ids: o.ids,
+      overlay: true,
+      strokeColor: black,
+      strokeWidth: 1.5,
+      vertices: true,
+      vertex_overlay_color: violet,
+      vertex_overlay: o.hit_coordinates || null,
+      selected_points: o.selected_points || null,
+      fillColor: null
+    };
+  }
+
+
+  function getSelectedFeatureStyle(lyr, o, opts) {
     var isPinned = o.pinned;
     var inSelection = o.ids.indexOf(o.id) > -1;
     var geomType = lyr.geometry_type;
     var style;
-    if (isPinned && o.mode == 'rectangles') {
+    if (isPinned && opts.interactionMode == 'rectangles') {
       // kludge for rectangle editing mode
       style = selectionStyles[geomType];
     } else if (isPinned) {
@@ -9582,11 +9657,90 @@
     }
   }
 
-  // import { initLineDrawing } from './gui-draw-lines';
+  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);
+    initLineDrawing(gui, ext, mouse, hit);
   }
 
   function MapExtent(_position) {
@@ -9595,7 +9749,7 @@
         _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()) {
@@ -9713,16 +9867,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;
@@ -9787,19 +9941,13 @@
     }
 
     function calcBounds(cx, cy, scale) {
-      var full, bounds, w, h;
-      if (_frame) {
-        full = fillOutFrameBounds(_frame);
-      } else {
-        full = fillOut(_fullBounds);
-      }
+      var full = fillOut(_fullBounds);
       if (_strictBounds) {
         full = fitIn(full, _strictBounds);
       }
-      w = full.width() / scale;
-      h = full.height() / scale;
-      bounds = new Bounds(cx - w/2, cy - h/2, cx + w/2, cy + h/2);
-      return bounds;
+      var w = full.width() / scale;
+      var h = full.height() / scale;
+      return new Bounds(cx - w/2, cy - h/2, cx + w/2, cy + h/2);
     }
 
     // Calculate viewport bounds from frame data
@@ -10119,7 +10267,7 @@
       var iter = new internal.ShapeIter(arcs);
       var t = getScaledTransform(_ext);
       var bounds = _ext.getBounds();
-      var radius = (style.strokeWidth > 2 ? style.strokeWidth * 0.9 : 2) * GUI.getPixelRatio() * getScaledLineScale(_ext);
+      var radius = (style.strokeWidth > 2 ? style.strokeWidth * 0.9 : 2) * GUI.getPixelRatio() * getScaledLineScale(_ext, style);
       var color = style.strokeColor || 'black';
 
       var i, j, p;
@@ -10153,7 +10301,7 @@
     _self.drawStyledPaths = function(shapes, arcs, style, filter) {
       var styleIndex = {};
       var batchSize = 1500;
-      var startPath = getPathStart(_ext, getScaledLineScale(_ext));
+      var startPath = getPathStart(_ext, getScaledLineScale(_ext, style));
       var draw = getShapePencil(arcs, _ext);
       var key, item, shp;
       var styler = style.styler || null;
@@ -10329,18 +10477,26 @@
       return (style.strokeWidth > 0 ? style.strokeColor + '~' + style.strokeWidth +
         '~' + (style.lineDash ? style.lineDash + '~' : '') : '') +
         (style.fillColor || '') +
-        // styles with <1 opacity are no longer batch-rendered
+        // styles with <1 opacity are no longer batch-rendered, not relevent to key
         // (style.strokeOpacity >= 0 ? style.strokeOpacity + '~' : '') : '') +
         // (style.fillOpacity ? '~' + style.fillOpacity : '') +
         // (style.opacity < 1 ? '~' + style.opacity : '') +
         (style.fillPattern ? '~' + style.fillPattern : '');
     }
-
     return _self;
   }
 
-  function getScaledLineScale(ext) {
-    return ext.getSymbolScale() || getLineScale(ext);
+  function getScaledLineScale(ext, style) {
+    var previewScale = ext.getSymbolScale();
+    var k = 1;
+    if (previewScale == 1 || style.type != 'styled' || style.baseStyle && style.baseStyle.type != 'styled') {
+      return getLineScale(ext);
+    }
+    if (style.baseStyle?.type == 'styled') {
+      // bump up overlay line width in preview mode
+      k = previewScale < 2 && 2 || previewScale < 5 && 1.5 || previewScale < 10 && 1.25 || 1.1;
+    }
+    return previewScale * k;
   }
 
   // Vary line width according to zoom ratio.
@@ -10510,15 +10666,13 @@
     return function(ctx, style) {
       var strokeWidth;
       ctx.beginPath();
-      // if (style.opacity >= 0) {
-      //   ctx.globalAlpha = style.opacity;
-      // }
       if (style.strokeWidth > 0) {
         strokeWidth = style.strokeWidth;
         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';
@@ -10568,7 +10722,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);
   }
@@ -10579,7 +10733,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');
@@ -10745,7 +10899,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;
@@ -10792,7 +10946,7 @@
       }
     });
 
-    gui.on('box_drag_start', function() {
+    gui.on('shift_drag_start', function() {
       // box.classed('zooming', inZoomMode());
       hideCoords();
     });
@@ -10858,7 +11012,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;
 
@@ -11470,7 +11624,7 @@
       if (lyr == _intersectionLyr) return; // no change
       if (lyr) {
         _intersectionLyr = getDisplayLayer(lyr, dataset, getDisplayOptions());
-        _intersectionLyr.style = getIntersectionStyle(_intersectionLyr.layer);
+        _intersectionLyr.style = getIntersectionStyle(_intersectionLyr.layer, getGlobalStyleOptions());
       } else {
         _intersectionLyr = null;
       }
@@ -11506,6 +11660,7 @@
     };
 
     this.getExtent = function() {return _ext;};
+    this.getMouse = function() {return _mouse;};
     this.isActiveLayer = isActiveLayer;
     this.isVisibleLayer = isVisibleLayer;
     this.getActiveLayer = function() { return _activeLyr; };
@@ -11530,18 +11685,27 @@
       clearAllDisplayArcs();
 
       // Reproject all visible map layers
-      getDrawableContentLayers().forEach(function(lyr) {
+      getContentLayers().forEach(function(lyr) {
         projectDisplayLayer(lyr, newCRS);
       });
 
       // kludge to make sure all layers have styles
-      updateLayerStyles(getDrawableContentLayers());
+      updateLayerStyles(getContentLayers());
 
       // Update map extent (also triggers redraw)
       projectMapExtent(_ext, oldCRS, this.getDisplayCRS(), calcFullBounds());
       updateFullBounds();
     };
 
+    function getGlobalStyleOptions() {
+      var mode = gui.state.interaction_mode;
+      return {
+        darkMode: !!gui.state.dark_basemap,
+        outlineMode: mode == 'vertices',
+        interactionMode: mode
+      };
+    }
+
     // Refresh map display in response to data changes, layer selection, etc.
     function onUpdate(e) {
       var prevLyr = _activeLyr || null;
@@ -11574,7 +11738,6 @@
       }
 
       _activeLyr = getDisplayLayer(e.layer, e.dataset, getDisplayOptions());
-      _activeLyr.style = getActiveStyle(_activeLyr.layer, gui.state.dark_basemap);
       _activeLyr.active = true;
 
       if (popupCanStayOpen(e.flags)) {
@@ -11588,19 +11751,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) {
@@ -11630,9 +11786,6 @@
       _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');
       });
 
@@ -11642,7 +11795,7 @@
     }
 
     function updateOverlayLayer(e) {
-      var style = getOverlayStyle(_activeLyr.layer, e);
+      var style = getOverlayStyle(_activeLyr.layer, e, getGlobalStyleOptions());
       if (style) {
         _overlayLyr = utils$1.defaults({
           layer: filterLayerByIds(_activeLyr.layer, style.ids),
@@ -11662,21 +11815,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();
@@ -11688,9 +11826,9 @@
       _ext.setFullBounds(calcFullBounds(), getStrictBounds());
     }
 
-    function getVisibleContentBounds() {
+    function getContentLayerBounds() {
       var b = new Bounds();
-      var layers = getDrawableContentLayers();
+      var layers = getContentLayers();
       layers.forEach(function(lyr) {
         b.mergeBounds(lyr.bounds);
       });
@@ -11703,10 +11841,7 @@
     }
 
     function calcFullBounds() {
-      if (isPreviewView()) {
-        return internal.getFrameLayerBounds(internal.findFrameLayer(model));
-      }
-      var b = getVisibleContentBounds();
+      var b = getContentLayerBounds();
 
       // add margin
       // use larger margin for small sizes
@@ -11736,25 +11871,21 @@
       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() {
@@ -11786,7 +11917,7 @@
       });
     }
 
-    function getDrawableContentLayers() {
+    function getContentLayers() {
       var layers = getVisibleMapLayers();
       if (isTableView()) return findActiveLayer(layers);
       return layers.filter(function(o) {
@@ -11794,6 +11925,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) {
@@ -11804,9 +11942,10 @@
     function updateLayerStyles(layers) {
       layers.forEach(function(mapLayer, i) {
         if (mapLayer.active) {
-          // assume: style is already assigned
+          // regenerating active style everytime, to support style change when
+          // switching between outline and preview modes.
+          mapLayer.style = getActiveLayerStyle(mapLayer.layer, getGlobalStyleOptions());
           if (mapLayer.style.type != 'styled' && layers.length > 1 && mapLayer.style.strokeColors) {
-          // if (false) { // always show ghosted arcs
             // kludge to hide ghosted layers when reference layers are present
             // TODO: consider never showing ghosted layers (which appear after
             // commands like dissolve and filter).
@@ -11818,7 +11957,7 @@
           if (mapLayer.layer == _activeLyr.layer) {
             console.error("Error: shared map layer");
           }
-          mapLayer.style = getReferenceStyle(mapLayer.layer);
+          mapLayer.style = getReferenceLayerStyle(mapLayer.layer, getGlobalStyleOptions());
         }
       });
     }
@@ -11844,7 +11983,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.");
@@ -11852,7 +11991,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