mapshaper 0.6.67 → 0.6.69

package/www/mapshaper-gui.js

@@ -2417,7 +2417,7 @@
       // Show a popup error message, then throw an error
       var msg = GUI.formatMessageArgs(arguments);
       gui.alert(msg);
-      throw new Error(msg);
+      throw new internal.UserError(msg);
     }
 
     function error() {
@@ -3882,7 +3882,11 @@
           } else {
             // stack seems to change if Error is logged directly
             console.error(err.stack);
-            gui.alert('Export failed for an unknown reason');
+            var msg = 'Export failed for an unknown reason';
+            if (err.name == 'UserError') {
+              msg = err.message;
+            }
+            gui.alert(msg, 'Export failed');
           }
         }).finally(function() {
           gui.clearProgressMessage();
@@ -7820,6 +7824,7 @@
     function onMouseUp(e) {
       var evt = procMouseEvent(e),
           elapsed, dx, dy;
+      _self.dispatchEvent('mouseup', evt);
       if (_dragging) {
         stopDragging(evt);
       }
@@ -7847,6 +7852,7 @@
 
     function onMouseMove(e) {
       var evt = procMouseEvent(e);
+      _self.dispatchEvent('mousemove', evt);
       if (!_dragging && _downEvt && _downEvt.hover) {
         _dragging = true;
         _self.dispatchEvent('dragstart', evt);
@@ -7969,37 +7975,21 @@
         });
       });
 
-      document.addEventListener('mousemove', function(e) {
+      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 shifting = activeHandle.col == 'center' && activeHandle.row == 'center';
-        var centered = gui.keyboard.shiftIsPressed() && !shifting;
-        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;
+        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;
@@ -8012,6 +8002,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();
@@ -8107,8 +8134,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'
       });
@@ -8802,11 +8831,11 @@
     return textNode.childNodes.length > 1;
   }
 
-  function toggleTextAlign(textNode, rec) {
-    var curr = rec['text-anchor'] || 'middle';
-    var value = curr == 'middle' && 'start' || curr == 'start' && 'end' || 'middle';
-    updateTextAnchor(value, textNode, rec);
-  }
+  // export function toggleTextAlign(textNode, rec) {
+  //   var curr = rec['text-anchor'] || 'middle';
+  //   var value = curr == 'middle' && 'start' || curr == 'start' && 'end' || 'middle';
+  //   updateTextAnchor(value, textNode, rec);
+  // }
 
   // Set an attribute on a <text> node and any child <tspan> elements
   // (mapshaper's svg labels require tspans to have the same x and dx values
@@ -8838,6 +8867,7 @@
     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);
   }
@@ -8849,7 +8879,6 @@
     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') {
@@ -8861,16 +8890,29 @@
     }
     if (xshift) {
       rec['text-anchor'] = value;
-      applyDelta(rec, 'dx', Math.round(xshift));
+      applyDelta(rec, 'dx', xshift / getScaleAttribute(textNode));
     }
   }
 
-  // handle either numeric strings or numbers in fields
+  function getScaleAttribute(node) {
+    // this is fragile, consider passing in the value of <MapExtent>.getSymbolScale()
+    var transform = node.getAttribute('transform') ||
+      node.parentNode.getAttribute('transform'); // compound label puts it here
+    var match = /scale\(([^)]+)\)/.exec(transform || '');
+    return match ? parseFloat(match[1]) : 1;
+  }
+
+  // handle either numeric strings or numbers in record
   function applyDelta(rec, key, delta) {
     var currVal = rec[key];
-    var isString = utils$1.isString(currVal);
     var newVal = (+currVal + delta) || 0;
-    rec[key] = isString ? String(newVal) : newVal;
+    updateNumber(rec, key, newVal);
+  }
+
+  // handle either numeric strings or numbers in record
+  function updateNumber(rec, key, num) {
+    var isString = utils$1.isString(rec[key]);
+    rec[key] = isString ? String(num) : num;
   }
 
   function initLabelDragging(gui, ext, hit) {
@@ -8884,9 +8926,9 @@
 
     hit.on('dragstart', function(e) {
       if (!active(e)) return;
-      var textNode = getTextTarget3(e);
+      var symNode = getSymbolTarget(e);
       var table = hit.getTargetDataTable();
-      if (!textNode || !table) {
+      if (!symNode || !table) {
         activeId = -1;
         return false;
       }
@@ -8902,18 +8944,22 @@
         error$1("Mismatched hit ids:", e.id, activeId);
       }
       var scale = ext.getSymbolScale() || 1;
-      var textNode;
+      var symNode, textNode;
       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);
+      symNode = getSymbolTarget(e);
+      textNode = getTextNode(symNode);
+      // update anchor position of labels based on label position relative
+      // to anchor point, for better placement when eventual display font is
+      // different from mapshaper's font.
+      // if (!isMultilineLabel(textNode)) {
+      autoUpdateTextAnchor(textNode, activeRecord, getDisplayCoordsById(activeId, hit.getHitTarget().layer, ext));
+      // }
+      updateNumber(activeRecord, 'dx', internal.roundToDigits(+activeRecord.dx, 3));
+      updateNumber(activeRecord, 'dy', internal.roundToDigits(+activeRecord.dy, 3));
+      updateTextNode(textNode, activeRecord);
+      // updateSymbolNode(symNode, activeRecord, activeId);
+      gui.dispatchEvent('popup-needs-refresh');
     });
 
     hit.on('dragend', function(e) {
@@ -8937,32 +8983,37 @@
       return coords[0];
     }
 
-    function getTextTarget3(e) {
+    function getSymbolTarget(e) {
       if (e.id > -1 === false || !e.container) return null;
       return getSymbolNodeById(e.id, e.container);
     }
 
+    function getTextNode(symNode) {
+      if (symNode.tagName == 'text') return symNode;
+      return symNode.querySelector('text');
+    }
+
     function getSymbolNodeById(id, parent) {
       // TODO: optimize selector
       var sel = '[data-id="' + id + '"]';
       return parent.querySelector(sel);
     }
 
-    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 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;
-    }
+    // function getTextTarget(e) {
+    //   var el = e.target;
+    //   if (el.tagName == 'tspan') {
+    //     el = el.parentNode;
+    //   }
+    //   return el.tagName == 'text' ? el : null;
+    // }
 
     function getLabelRecordById(id) {
       var table = hit.getTargetDataTable();
@@ -8981,7 +9032,7 @@
     }
 
     // update symbol by setting attributes
-    function updateSymbol(node, d) {
+    function updateTextNode(node, d) {
       var a = d['text-anchor'];
       if (a) node.setAttribute('text-anchor', a);
       setMultilineAttribute(node, 'dx', d.dx || 0);
@@ -8989,7 +9040,8 @@
     }
 
     // update symbol by re-rendering it
-    function updateSymbol2(node, d, id) {
+    // fails when symbol includes a dot (<g><circle/><text/></g> structure)
+    function updateSymbolNode(node, d, id) {
       var o = internal.svg.renderStyledLabel(d); // TODO: symbol support
       var activeLayer = hit.getHitTarget().layer;
       var xy = activeLayer.shapes[id][0];
@@ -9002,8 +9054,6 @@
       g.innerHTML = internal.svg.stringify(o);
       node2 = g.firstChild;
       node.parentNode.replaceChild(node2, node);
-      gui.dispatchEvent('popup-needs-refresh');
-      return node2;
     }
   }
 
@@ -9347,50 +9397,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);
@@ -9398,13 +9420,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);
@@ -9412,21 +9434,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.
@@ -9435,47 +9442,104 @@
   // * 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) {
+        // TODO: render default stroke widths without scaling
+        // (will need to pass symbol scale to the styler function)
+        style.strokeWidth = defaultStyle.strokeWidth;
+        baseStyle.styler(style, i); // get styled stroke width (if set)
+        style.strokeColor = defaultStyle.strokeColor;
+        style.fillColor = defaultStyle.fillColor;
+      } else {
+        Object.assign(style, defaultStyle);
+      }
     };
-    var baseStyle = getDefaultStyle(lyr, 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) {
@@ -9903,19 +9967,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
@@ -10235,7 +10293,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;
@@ -10269,14 +10327,16 @@
     _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;
       for (var i=0; i<shapes.length; i++) {
         shp = shapes[i];
         if (!shp || filter && !filter(shp)) continue;
-        if (styler) styler(style, i);
+        if (styler) {
+          styler(style, i);
+        }
         if (style.overlay || style.opacity < 1 || style.fillOpacity < 1 || style.strokeOpacity < 1 || style.fillEffect) {
           // don't batch shapes with opacity, in case they overlap
           drawPaths([shp], startPath, draw, style);
@@ -10445,7 +10505,7 @@
       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 : '') +
@@ -10454,9 +10514,17 @@
     return _self;
   }
 
-  function getScaledLineScale(ext) {
+  function getScaledLineScale(ext, style) {
     var previewScale = ext.getSymbolScale();
-    return previewScale == 1 ? getLineScale(ext) : previewScale;
+    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.
@@ -10626,9 +10694,6 @@
     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) {
@@ -11587,7 +11652,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;
       }
@@ -11623,6 +11688,7 @@
     };
 
     this.getExtent = function() {return _ext;};
+    this.getMouse = function() {return _mouse;};
     this.isActiveLayer = isActiveLayer;
     this.isVisibleLayer = isVisibleLayer;
     this.getActiveLayer = function() { return _activeLyr; };
@@ -11659,6 +11725,15 @@
       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;
@@ -11691,7 +11766,7 @@
       }
 
       _activeLyr = getDisplayLayer(e.layer, e.dataset, getDisplayOptions());
-      _activeLyr.style = getActiveStyle(_activeLyr.layer, gui.state.dark_basemap);
+      _activeLyr.style = getActiveLayerStyle(_activeLyr.layer, getGlobalStyleOptions());
       _activeLyr.active = true;
 
       if (popupCanStayOpen(e.flags)) {
@@ -11749,7 +11824,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),
@@ -11795,7 +11870,12 @@
     }
 
     function calcFullBounds() {
-      var b = getContentLayerBounds();
+      var b;
+      if (isPreviewView()) {
+        b = new Bounds(getFrameData().bbox);
+      } else {
+        b = getContentLayerBounds();
+      }
 
       // add margin
       // use larger margin for small sizes
@@ -11822,7 +11902,7 @@
     }
 
     function isTableView() {
-      return !isPreviewView() && !!_activeLyr.tabular;
+      return !!_activeLyr.tabular;
     }
 
     function findFrameLayer() {
@@ -11833,8 +11913,7 @@
 
     // Preview view: symbols are scaled based on display size of frame layer
     function isPreviewView() {
-      var data = getFrameData();
-      return !!data;
+      return !isTableView() && !!getFrameData();
     }
 
     function getFrameData() {
@@ -11873,7 +11952,9 @@
 
     function getContentLayers() {
       var layers = getVisibleMapLayers();
-      if (isTableView()) return findActiveLayer(layers);
+      if (isTableView()) {
+        return findActiveLayer(layers);
+      }
       return layers.filter(function(o) {
         return !!o.geographic;
       });
@@ -11896,9 +11977,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).
@@ -11910,7 +11992,7 @@
           if (mapLayer.layer == _activeLyr.layer) {
             console.error("Error: shared map layer");
           }
-          mapLayer.style = getReferenceStyle(mapLayer.layer);
+          mapLayer.style = getReferenceLayerStyle(mapLayer.layer, getGlobalStyleOptions());
         }
       });
     }