mapshaper 0.7.67 → 0.7.69

package/www/mapshaper-gui.js

@@ -3324,7 +3324,7 @@
     return str;
   }
 
-  function formatValue(val, matches) {
+  function formatValue$2(val, matches) {
     var flags = matches[1];
     var padding = matches[2];
     var decimals = matches[3] ? parseInt(matches[3].substr(1)) : void 0;
@@ -3420,7 +3420,7 @@
         error$1("[format()] Data does not match format string; format:", fmt, "data:", arguments);
       }
       for (var i=0; i<n; i++) {
-        str += formatValue(arguments[i], formatCodes[i]) + literals[i+1];
+        str += formatValue$2(arguments[i], formatCodes[i]) + literals[i+1];
       }
       return str;
     };
@@ -8623,10 +8623,10 @@
   }
 
   // Whether a layer can be shown on the map alongside the active layer, and so
-  // has an eye icon in the layers panel. A frame is drawn by preview mode, and a
-  // data-only layer has nothing to draw.
+  // has an eye icon in the layers panel. A frame and its furniture are drawn by
+  // preview mode, and a data-only layer has nothing to draw.
   function layerIsPinnable(lyr, dataset) {
-    if (dataset && internal.isFrameLayer(lyr, dataset.arcs)) return false;
+    if (internal.isFrameComponentLayer(lyr, dataset)) return false;
     return internal.layerIsGeometric(lyr) || internal.layerHasRaster(lyr) ||
       internal.layerHasFurniture(lyr);
   }
@@ -9531,7 +9531,7 @@
 
   function Console(gui) {
     var model = gui.model;
-    var CURSOR = '$ ';
+    var CURSOR = '> ';
     var PROMPT = 'Enter mapshaper commands or type "tips" for console help.';
     var el = gui.container.findChild('.console').hide();
     var content = el.findChild('.console-buffer');
@@ -9548,15 +9548,6 @@
     var history = [];
     var historyId = 0;
     var _isOpen = false;
-    var btn = gui.container.findChild('.console-btn')
-      .on('click', toggle)
-      .on('keydown', function(e) {
-        if (e.key == 'Enter' || e.key == ' ') {
-          e.preventDefault();
-          e.stopPropagation();
-          toggle();
-        }
-      });
     var globals = {}; // share user-defined globals (job.defs) between runs
     var sharedVars = {}; // share -vars / -defaults templating scope between runs
 
@@ -9588,10 +9579,6 @@
       }
     });
 
-    function toggle() {
-      gui.toggleSidebarPanel('console');
-    }
-
     gui.on('sidebar', function(e) {
       if (e.panels.includes('console')) {
         turnOn();
@@ -9642,7 +9629,6 @@
     function turnOn() {
       // if (!_isOpen && !model.isEmpty()) {
       if (!_isOpen) {
-        btn.addClass('active').attr('aria-expanded', 'true');
         _isOpen = true;
         // Route logging output to the in-app console while it's open, so a
         // user typing CLI commands here sees the results inline -- the same
@@ -9663,7 +9649,6 @@
 
     function turnOff() {
       if (_isOpen) {
-        btn.removeClass('active').attr('aria-expanded', 'false');
         _isOpen = false;
         if (GUI.isActiveInstance(gui)) {
           setLoggingForGUI(gui); // reset stop, message and error functions
@@ -10237,14 +10222,14 @@
     }
 
     function printExamples() {
-      printExample("See a list of all console commands", "$ help");
-      printExample("Get help using a single command", "$ help innerlines");
-      printExample("Get information about imported datasets", "$ info");
-      printExample("Print bot/debug runtime context as JSON", "$ context");
-      printExample("Display browser session as shell commands", "$ history");
-      printExample("Delete one state from a national dataset","$ filter 'STATE != \"Alaska\"'");
-      printExample("Aggregate counties to states by dissolving shared edges" ,"$ dissolve 'STATE'");
-      printExample("Clear the console", "$ clear");
+      printExample("See a list of all console commands", CURSOR + "help");
+      printExample("Get help using a single command", CURSOR + "help innerlines");
+      printExample("Get information about imported datasets", CURSOR + "info");
+      printExample("Print bot/debug runtime context as JSON", CURSOR + "context");
+      printExample("Display browser session as shell commands", CURSOR + "history");
+      printExample("Delete one state from a national dataset", CURSOR + "filter 'STATE != \"Alaska\"'");
+      printExample("Aggregate counties to states by dissolving shared edges" , CURSOR + "dissolve 'STATE'");
+      printExample("Clear the console", CURSOR + "clear");
     }
 
     function renderStructuredConsoleMessage(msg) {
@@ -10903,6 +10888,9 @@
       if (opts.format == 'svg' || opts.format == 'topojson') {
         opts.gui_frame = getGuiFrameContext();
       }
+      if (opts.format == 'svg') {
+        targets = addFrameFurnitureTargets(targets, opts.gui_frame);
+      }
       try {
         var files = await internal.exportTargetLayers(model, targets, opts);
       } catch(e) {
@@ -10968,7 +10956,7 @@
     function initLayerMenu() {
       var list = menu.findChild('.export-layer-list').empty();
       var layers = model.getLayers().filter(function(o) {
-        return !internal.isFrameLayer(o.layer, o.dataset.arcs);
+        return !internal.isFrameComponentLayer(o.layer, o.dataset);
       });
       sortLayersForMenuDisplay(layers);
 
@@ -11162,21 +11150,42 @@
       };
     }
 
+    // Snapshots keep the frame and its furniture
     function addFrameTarget(targets) {
       var frame = internal.getActiveFrame(model);
-      var group;
       if (!frame) return targets;
+      return addDatasetTargets(targets, frame.dataset,
+        [frame.layer].concat(internal.getFrameFurnitureLayers(frame.dataset)));
+    }
+
+    // The frame's furniture is drawn in SVG output, the way it is in preview.
+    // An unprojected frame can't show a scalebar, so it doesn't block the export.
+    function addFrameFurnitureTargets(targets, frameContext) {
+      var frame = internal.getActiveFrame(model);
+      var furniture = frame ? internal.getFrameFurnitureLayers(frame.dataset) : [];
+      if (furniture.length === 0) return targets;
+      if (internal.getFurnitureFrameProblem(frameContext && frameContext.data)) {
+        console.warn('Map furniture was not exported: the map frame is unprojected');
+        return targets;
+      }
+      return addDatasetTargets(targets, frame.dataset, furniture);
+    }
+
+    function addDatasetTargets(targets, dataset, layers) {
+      var group;
       targets = targets.map(function(target) {
         return Object.assign({}, target, {layers: target.layers.slice()});
       });
       group = targets.find(function(target) {
-        return target.dataset == frame.dataset;
+        return target.dataset == dataset;
       });
-      if (group) {
-        if (!group.layers.includes(frame.layer)) group.layers.push(frame.layer);
-      } else {
-        targets.push({dataset: frame.dataset, layers: [frame.layer]});
+      if (!group) {
+        group = {dataset: dataset, layers: []};
+        targets.push(group);
       }
+      layers.forEach(function(lyr) {
+        if (!group.layers.includes(lyr)) group.layers.push(lyr);
+      });
       return targets;
     }
 
@@ -11219,6 +11228,92 @@
     };
   }
 
+  // Short descriptions of what a layer holds, for the contents column of the
+  // layer panel: "6 polygons", "1 data record", "12 labels".
+  //
+  // A point layer is described by how its features are drawn, in the terms of
+  // the point style panel: labels, symbols, circles and plain points. A layer
+  // that mixes them lists each kind it has, e.g. "12 labels, 30 points".
+  //
+  // Features with null geometry are left out of the counts, which say what is on
+  // the map. The column is too narrow to list them as well, so they go in a
+  // tooltip with the full description.
+
+  var POINT_KINDS = ['label', 'symbol', 'circle', 'point'];
+
+  // How a point feature is drawn, given its data record.
+  // A label wins over any symbol or circle drawn with it.
+  function getPointKind(d) {
+    if (!d) return 'point';
+    if ('label-text' in d) return 'label';
+    if (d['svg-symbol'] || d.icon) return 'symbol';
+    if (d.r > 0) return 'circle';
+    return 'point';
+  }
+
+  // The kind of feature a point layer is set up for, from its field names:
+  // names the features of an empty layer, e.g. "0 labels".
+  function getPointLayerKind(fields) {
+    if (fields.includes('label-text')) return 'label';
+    if (fields.includes('svg-symbol') || fields.includes('icon')) return 'symbol';
+    if (fields.includes('r')) return 'circle';
+    return 'point';
+  }
+
+  // Same test as the -info command's null shape count
+  function isNullShape(shp) {
+    return !shp || shp.length === 0;
+  }
+
+  // @geometryType: 'point', 'polygon' or 'polyline'
+  // @shapes: the layer's shapes
+  // @records: data records, or null for a layer without attribute data
+  // @fields: names of the layer's data fields
+  // Returns {text, nulls, title}; title is the tooltip, or null if there are no nulls.
+  function describeFeatureContents(geometryType, shapes, records, fields) {
+    var nulls = shapes.length - countNonNull(shapes);
+    var text = geometryType == 'point' ?
+      describePoints(shapes, records, fields || []) :
+      formatCount(shapes.length - nulls, geometryType);
+    return {
+      text: text,
+      nulls: nulls,
+      title: nulls > 0 ? text + ', ' + formatInteger(nulls) + ' without geometry' : null
+    };
+  }
+
+  function describePoints(shapes, records, fields) {
+    var counts = {label: 0, symbol: 0, circle: 0, point: 0};
+    var parts, i;
+    for (i=0; i<shapes.length; i++) {
+      if (isNullShape(shapes[i])) continue;
+      counts[getPointKind(records ? records[i] : null)]++;
+    }
+    parts = POINT_KINDS.filter(function(kind) {
+      return counts[kind] > 0;
+    }).map(function(kind) {
+      return formatCount(counts[kind], kind);
+    });
+    return parts.length > 0 ? parts.join(', ') :
+      formatCount(0, getPointLayerKind(fields));
+  }
+
+  function countNonNull(shapes) {
+    var n = 0;
+    for (var i=0; i<shapes.length; i++) {
+      if (!isNullShape(shapes[i])) n++;
+    }
+    return n;
+  }
+
+  function formatCount(n, noun) {
+    return formatInteger(n) + ' ' + noun + (n == 1 ? '' : 's');
+  }
+
+  function formatInteger(n) {
+    return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  }
+
   var openMenu$1;
   var openMenuId;
   // One menu element per parent element, created on demand.
@@ -11385,6 +11480,9 @@
       if (e.frameProperties) {
         addMenuItem('frame properties', e.frameProperties, '');
       }
+      if (e.scalebarProperties) {
+        addMenuItem(e.scalebarLabel || 'scale bar', e.scalebarProperties, '');
+      }
       if (e.resizeFrame) {
         addMenuItem('resize frame', e.resizeFrame, '');
       }
@@ -11612,7 +11710,6 @@
     var el = gui.container.findChild(".layer-control").hide();
     var btn = gui.container.findChild('.layer-control-btn');
     var headerBtn = btn.findChild('.active-layer-label');
-    var tab = gui.container.findChild('.layer-tab');
     var isOpen = false;
     var cache = new DomCache();
     var pinAll = el.findChild('.pin-all'); // button for toggling layer visibility
@@ -11647,17 +11744,6 @@
         gui.toggleSidebarPanel('console');
       }
     });
-    tab.on('click', toggle).on('keydown', function(e) {
-      if (e.key == 'Enter') {
-        e.preventDefault();
-        e.stopPropagation();
-        toggle();
-      } else if (e.key == ' ') {
-        e.preventDefault();
-        e.stopPropagation();
-        gui.toggleSidebarPanel('console');
-      }
-    });
 
     function toggle() {
       gui.toggleSidebarPanel('layers');
@@ -11763,7 +11849,6 @@
     function turnOn() {
       if (isOpen) return;
       isOpen = true;
-      tab.addClass('active').attr('aria-expanded', 'true');
       render();
       el.addClass('open');
       el.show();
@@ -11773,7 +11858,6 @@
       if (!isOpen) return;
       stopDragging();
       isOpen = false;
-      tab.removeClass('active').attr('aria-expanded', 'false');
       el.removeClass('open');
       el.hide();
     }
@@ -11826,6 +11910,8 @@
       sortLayersForMenuDisplay(model.getLayers()).forEach(function(o) {
         var lyr = o.layer;
         var isFrame = internal.isFrameLayer(lyr, o.dataset.arcs);
+        // furniture is shown as part of its frame's entry
+        if (!isFrame && internal.isFrameComponentLayer(lyr, o.dataset)) return;
         var opts = {
           show_source: layerCount < 5,
           pinnable: pinnableCount > 0 && isPinnable(lyr, o.dataset)
@@ -11854,8 +11940,7 @@
 
     function renderLayer(lyr, dataset, opts) {
       var classes = 'layer-item';
-      var isFrame = internal.isFrameLayer(lyr, dataset.arcs);
-      var entry, html;
+      var html;
 
       if (opts.pinnable) classes += ' pinnable';
       if (map.isActiveLayer(lyr)) classes += ' active';
@@ -11863,8 +11948,9 @@
       if (lyr.pinned) classes += ' pinned';
 
       html = '<!-- ' + lyr.menu_id + '--><div class="' + classes + '">';
-      html += rowHTML('name', '<span class="layer-name colored-text dot-underline">' + formatLayerNameForDisplay(lyr.name) + '</span>', 'row1');
-      html += rowHTML(isFrame ? 'size' : 'contents', describeLyr(lyr, dataset));
+      html += '<div class="layer-row"><div class="layer-name-col">' +
+        '<span class="layer-name colored-text dot-underline">' + formatLayerNameForDisplay(lyr.name) + '</span></div>' +
+        renderContents(lyr, dataset) + '</div>';
       html += '<span class="more-btn layer-btn" role="button" aria-label="More layer options"></span>';
       if (opts.pinnable) {
         html += '<img class="eye-btn black-eye layer-btn" draggable="false" src="images/eye.png">';
@@ -11925,25 +12011,39 @@
       function deleteLayer() {
         var target = findLayerById(id);
         var undoTransaction;
+        var furniture;
         if (!target) return;
+        // a frame's furniture goes with it, rather than becoming a stray layer
+        furniture = internal.isFrameLayer(target.layer, target.dataset.arcs) ?
+          internal.getFrameFurnitureLayers(target.dataset) : [];
         undoTransaction = createUndoTransaction(gui, 'delete layer');
         if (map.isVisibleLayer(target.layer)) {
           // TODO: check for double map refresh after model.deleteLayer() below
           setLayerPinning(target.layer, false);
         }
         if (undoTransaction) {
-          undoTransaction.run(function() {
-            model.deleteLayer(target.layer, target.dataset);
-          });
+          undoTransaction.run(deleteLayers);
           addUndoTransactionToHistory(gui, undoTransaction, {
             flags: {select: true, arc_count: true},
             entryPrefix: 'delete-layer'
           });
         } else {
+          deleteLayers();
+        }
+
+        function deleteLayers() {
+          furniture.forEach(function(lyr) {
+            model.deleteLayer(lyr, target.dataset);
+          });
           model.deleteLayer(target.layer, target.dataset);
         }
       }
 
+      function openScalebarProperties() {
+        var target = findLayerById(id);
+        if (target && gui.scalebarProperties) gui.scalebarProperties.open(target);
+      }
+
       // Duplicate a layer by running an equivalent command, so the copy is
       // recorded in session history and can be undone. Uses '-filter true +'
       // to append a copy without replacing the source, keeps the same name
@@ -12031,6 +12131,10 @@
           internal.isFrameLayer(target.layer, target.dataset.arcs);
         if (isFrame) {
           menuEvent.frameProperties = openFrameProperties;
+          menuEvent.scalebarProperties = openScalebarProperties;
+          menuEvent.scalebarLabel =
+            internal.findFrameFurnitureLayer(target.dataset, 'scalebar') ?
+              'scale bar' : 'add scale bar';
           menuEvent.resizeFrame = resizeFrame;
           menuEvent.deleteFrame = deleteLayer;
         } else {
@@ -12114,29 +12218,34 @@
 
     }
 
+    // Returns {text, title}; title is a tooltip, or null
     function describeLyr(lyr, dataset) {
-      var n = internal.getFeatureCount(lyr),
-          isFrame = internal.isFrameLayer(lyr, dataset.arcs),
-          str, type;
-      if (lyr.data && !lyr.shapes) {
-        type = 'data record';
-      } else if (lyr.geometry_type) {
-        type = lyr.geometry_type + ' feature';
-      } else if (internal.layerHasRaster(lyr)) {
-        type = 'raster layer';
-      }
-      if (isFrame) {
-        str = internal.formatFrameSizeForDisplay(
+      if (internal.isFrameLayer(lyr, dataset.arcs)) {
+        return {text: internal.formatFrameSizeForDisplay(
           internal.getFrameLayerData(lyr, dataset.arcs)
-        );
-      } else if (internal.layerHasRaster(lyr)) {
-        str = utils$1.format('%,d x %,d %s', internal.getRasterWidth(lyr.raster), internal.getRasterHeight(lyr.raster), type);
-      } else if (type) {
-        str = utils$1.format('%,d %s%s', n, type, utils$1.pluralSuffix(n));
-      } else {
-        str = "[empty]";
+        ), title: null};
       }
-      return str;
+      if (internal.layerHasRaster(lyr)) {
+        return {text: utils$1.format('%,d x %,d raster', internal.getRasterWidth(lyr.raster),
+          internal.getRasterHeight(lyr.raster)), title: null};
+      }
+      if (lyr.data && !lyr.shapes) {
+        return {text: formatCount(internal.getFeatureCount(lyr), 'data record'), title: null};
+      }
+      if (lyr.geometry_type) {
+        return describeFeatureContents(lyr.geometry_type, lyr.shapes,
+          lyr.data ? lyr.data.getRecords() : null, lyr.data ? lyr.data.getFields() : []);
+      }
+      return {text: '[empty]', title: null};
+    }
+
+    function renderContents(lyr, dataset) {
+      var o = describeLyr(lyr, dataset);
+      if (!o.title) {
+        return '<div class="layer-contents">' + o.text + '</div>';
+      }
+      return '<div class="layer-contents has-nulls"><span title="' + o.title + '">' +
+        o.text + '</span></div>';
     }
 
     function renderLayerInfo(info) {
@@ -12265,9 +12374,48 @@
       return !!(lyr && (lyr.geometry_type == 'point' || lyr.geometry_type == 'polyline' || lyr.geometry_type == 'polygon'));
     }
 
-    function rowHTML(c1, c2, cname) {
-      return utils$1.format('<div class="row%s"><div class="col1">%s</div>' +
-        '<div class="col2">%s</div></div>', cname ? ' ' + cname : '', c1, c2);
+  }
+
+  // The buttons that open and close the sidebar panels: an icon strip on the
+  // map while the sidebar is closed, and a strip of toggles at the top of the
+  // sidebar while it is open. Each button toggles its own panel, so both panels
+  // can be open at once.
+  function SidebarTabs(gui) {
+    var buttons = gui.container.findChildren('.sidebar-tab, .sidebar-strip-btn');
+    var hideBtn = gui.container.findChild('.sidebar-hide-btn');
+
+    buttons.forEach(function(btn) {
+      var panel = btn.attr('data-panel');
+      btn.on('click', function() {
+        gui.toggleSidebarPanel(panel);
+      });
+      onKeyboardActivate(btn, function() {
+        gui.toggleSidebarPanel(panel);
+      });
+    });
+
+    hideBtn.on('click', hideSidebar);
+    onKeyboardActivate(hideBtn, hideSidebar);
+
+    gui.on('sidebar', function(e) {
+      buttons.forEach(function(btn) {
+        var open = e.panels.includes(btn.attr('data-panel'));
+        btn.classed('active', open).attr('aria-expanded', String(open));
+      });
+    });
+
+    function hideSidebar() {
+      gui.setSidebarPanels(null);
+    }
+
+    function onKeyboardActivate(btn, action) {
+      btn.on('keydown', function(e) {
+        if (e.key == 'Enter' || e.key == ' ') {
+          e.preventDefault();
+          e.stopPropagation();
+          action();
+        }
+      });
     }
   }
 
@@ -12400,7 +12548,9 @@
     if (!container.node()) return;
     DRAW_KINDS.forEach(function(kind, i) {
       if (i > 0) {
-        El('span').addClass('layer-menu-link-separator').html('&nbsp;·&nbsp;')
+        // A breaking space after the dot, so that a sidebar too narrow for the
+        // whole list wraps it between links, and never inside one.
+        El('span').addClass('layer-menu-link-separator').html('&nbsp;· ')
           .appendTo(container);
       }
       El('span').addClass('layer-menu-link').attr('data-kind', kind.kind)
@@ -14234,25 +14384,25 @@
     // labelModeIsAvailable().
     var menus = {
       standard: ['info', 'selection', 'box', 'ruler'],
-      empty: ['edit_polygons', 'edit_lines', 'edit_points', 'box', 'ruler'],
-      polygons: ['info', 'selection', 'box', 'polygon_style', 'edit_polygons', 'ruler'],
-      rectangles: ['info', 'selection', 'box', 'polygon_style', 'rectangles', 'edit_polygons', 'ruler'],
-      lines: ['info', 'selection', 'box', 'line_style', 'edit_lines', 'snip_lines', 'ruler'],
+      empty: [ 'label','edit_points', 'edit_lines',  'edit_polygons','box', 'ruler'],
+      polygons: ['info', 'selection', 'polygon_style', 'edit_polygons', 'box', 'ruler'],
+      rectangles: ['info', 'selection', 'polygon_style', 'edit_polygons', 'rectangles', 'box', 'ruler'],
+      lines: ['info', 'selection', 'line_style', 'edit_lines', 'snip_lines', 'box', 'ruler'],
       table: ['info', 'selection'],
-      raster: ['ruler', 'box'],
-      // A label layer has no entry for styling labels, for adding and dragging
-      // points, or for positioning labels: the label tool does all three, along
-      // with creating and retyping labels, so each of them offered a subset of
-      // what sat next to it in the menu.
-      labels: ['info', 'selection', 'box', 'label', 'ruler'],
-      points: ['info', 'selection', 'box', 'point_style', 'edit_points', 'ruler'], // , 'add-points'
+      raster: ['box', 'ruler'],
+      labels: ['info', 'selection', 'label', 'box', 'ruler'],
+      points: ['info', 'selection', 'edit_points', 'point_style', 'box', 'ruler'], // , 'add-points'
       // An empty point layer is the layer the "Draw: labels" link creates,
       // and a label goes into it rather than beside it (see labelWouldJoin), so
       // the label tool belongs in its menu as well as the point tools: it is the
       // way back into a labels layer that has no label in it yet.
-      emptyPoints: ['info', 'selection', 'box', 'point_style', 'label', 'edit_points', 'ruler']
+      emptyPoints: ['info', 'selection', 'label', 'point_style', 'edit_points', 'box', 'ruler']
     };
 
+    // Tools that work the same whatever the active layer is. They go below a
+    // divider, so the layer-name heading visibly covers only the tools above it.
+    var layerIndependentModes = ['box', 'ruler'];
+
     var prompts = {
       box: 'Shift-drag to draw a box',
       data: 'Click-select features to edit their attributes',
@@ -14348,7 +14498,7 @@
     };
 
     this.modeUsesPopup = function(mode) {
-      return ['info', 'selection', 'data', 'box', 'edit_points', 'rectangles'].includes(mode);
+      return ['info', 'selection', 'data', 'box', 'edit_points'].includes(mode);
     };
 
     this.modeSupportsUndo = function(mode) {
@@ -14419,27 +14569,54 @@
 
     function renderMenu() {
       if (!menu) return;
-      var modes = getAvailableModes();
-      menu.empty();
-      modes.forEach(function(mode) {
+      var modes = getAvailableModes().filter(function(mode) {
         // don't show "turn off" link if not currently editing
-        if (_editMode == 'off' && mode == 'off') return;
-        var link = El('div').addClass('nav-menu-item').attr('data-name', mode).text(getModeLabel(mode)).appendTo(menu);
-        link.on('click', function(e) {
-          if (_editMode == mode) {
-            // closeMenu();
-            setMode('off');
-          } else if (_editMode != mode) {
-            setMode(mode);
-            if (mode == 'off') closeMenu(120); // only close if turning off
-            // closeMenu(mode == 'off' ? 120 : 400); // close after selecting
-          }
-          e.stopPropagation();
-        });
+        return !(_editMode == 'off' && mode == 'off');
+      });
+      var layerModes = modes.filter(function(mode) {
+        return !layerIndependentModes.includes(mode);
+      });
+      var otherModes = modes.filter(function(mode) {
+        return layerIndependentModes.includes(mode);
       });
+      var lyr = gui.model.getActiveLayer()?.layer;
+      menu.empty();
+      if (lyr && layerModes.length > 0) {
+        renderLayerHeading(lyr);
+      }
+      layerModes.forEach(renderMenuItem);
+      if (layerModes.length > 0 && otherModes.length > 0) {
+        El('div').addClass('nav-menu-divider').appendTo(menu);
+      }
+      otherModes.forEach(renderMenuItem);
       updateSelectionHighlight();
     }
 
+    // Names the layer the tools above the divider act on.
+    function renderLayerHeading(lyr) {
+      var name = formatLayerNameForDisplay(lyr.name);
+      var heading = El('div').addClass('nav-menu-heading').attr('title', name).text(name).appendTo(menu);
+      // A click on the heading would reach the button, which picks a tool.
+      heading.on('click', function(e) {
+        e.stopPropagation();
+      });
+    }
+
+    function renderMenuItem(mode) {
+      var link = El('div').addClass('nav-menu-item').attr('data-name', mode).text(getModeLabel(mode)).appendTo(menu);
+      link.on('click', function(e) {
+        if (_editMode == mode) {
+          // closeMenu();
+          setMode('off');
+        } else if (_editMode != mode) {
+          setMode(mode);
+          if (mode == 'off') closeMenu(120); // only close if turning off
+          // closeMenu(mode == 'off' ? 120 : 400); // close after selecting
+        }
+        e.stopPropagation();
+      });
+    }
+
     function getModeLabel(mode) {
       return labels[mode];
     }
@@ -16482,20 +16659,43 @@
 
   // The fraction an opacity control's contents mean ("50%", " 50 " -> 0.5), or
   // null if it is not holding a number. Out-of-range values are clamped rather
-  // than refused: a pasted 150% is an intent, not a mistake.
+  // than refused: a pasted 150% is an intent, not a mistake. A blank field is
+  // null, not zero: it is what a colour with no value shows beside it.
   function parseOpacityValue(str) {
-    var pct = Number(String(str).replace('%', '').trim());
-    if (!isFinite(pct)) return null;
+    var txt = String(str).replace('%', '').trim();
+    var pct = Number(txt);
+    if (txt === '' || !isFinite(pct)) return null;
     return Math.max(0, Math.min(100, pct)) / 100;
   }
 
+  // A typed dash pattern in the form -style stroke-dasharray= takes: lengths
+  // separated by single spaces. Commas and runs of whitespace are accepted
+  // because SVG accepts them, and a pasted "4, 2" means the same as "4 2".
+  // Returns '' for a blank field. Does not check that the lengths are numbers.
+  function normalizeDashArrayInput(str) {
+    return String(str).trim().split(/[\s,]+/).filter(Boolean).join(' ');
+  }
+
   // A stored fraction as the percentage a control shows, or '' for no value --
   // which is how a control over a selection that does not agree shows.
   function formatOpacityPct(val) {
+    if (isUnsetValue(val)) return '';
     val = Number(val);
     return isFinite(val) ? Math.round(Math.max(0, Math.min(1, val)) * 100) + '%' : '';
   }
 
+  // The opacity shown beside a colour. A colour with no opacity of its own is
+  // drawn opaque, and says so; with no colour either, there is nothing for an
+  // opacity to apply to, and the field is blank like the colour.
+  function formatColorOpacityPct(opacity, hasColor) {
+    if (isUnsetValue(opacity)) return hasColor ? '100%' : '';
+    return formatOpacityPct(opacity);
+  }
+
+  function isUnsetValue(val) {
+    return val === undefined || val === null || val === '';
+  }
+
   // The parts the style panels are built from. They were the label panel's, and
   // three panels drawing the same control three ways is how they came to look
   // like three programs: a colour was a swatch inside a field in one and a
@@ -16555,6 +16755,16 @@
     return btn;
   }
 
+  // The "?" the rest of the app uses for field help (see .tip-button in
+  // elements.css and the static ones in index.html). The bubble is white-space:
+  // pre, so the line breaks in the text are the ones it gets.
+  function makeFieldTip(parent, text) {
+    var btn = El('div').addClass('tip-button').appendTo(parent).text('?');
+    var anchor = El('div').addClass('tip-anchor').appendTo(btn);
+    El('div').addClass('tip').appendTo(anchor).text(text);
+    return btn;
+  }
+
   function setPanelButtonDisabled(el, disabled) {
     el.classed('disabled', !!disabled)
       .attr('aria-disabled', disabled ? 'true' : 'false');
@@ -16565,23 +16775,38 @@
   function makeColorField(parent, chit, input) {
     var box = El('div').addClass('label-color-field').appendTo(parent);
     chit.appendTo(box);
-    input.appendTo(box);
+    input.addClass('label-color-input').appendTo(box);
     return box;
   }
 
-  // A colour and its opacity on one line: the swatch inside the field with the
-  // hex value, and the opacity in the narrow column beside it. Fill and Stroke
-  // are each one of these, and so are a label's text and icon colours.
+  // A colour field with its opacity at the right-hand end, behind a divider:
+  // opacity qualifies the colour, and one border says so where two fields side
+  // by side said they were separate settings. It also leaves the narrow column
+  // of the row free for a field that needs it. The opacity has no caption; its
+  // percent sign and its tooltip say what it is.
+  //
+  // Returns the field's box; the opacity input is made by makeOpacityInput().
+  function makeColorOpacityField(parent, chit, input, opacityOpts) {
+    var box = makeColorField(parent, chit, input).addClass('label-color-opacity-field');
+    var opacity = makeOpacityInput(box, opacityOpts);
+    return {box: box, opacity: opacity};
+  }
+
+  // A colour and its opacity in one field, captioned, in the wide column of a
+  // split row. Fill and Stroke are each one of these.
   //
-  // opts.label            the caption over the colour field
+  // opts.label            the caption over the field
   // opts.onColor(hex)     a colour was typed, picked or previewed to a finish
   // opts.onOpacity(frac)  a usable percentage was typed
   // opts.revert()         one that was not, so put the row back as it was
+  //
+  // control.aside is the row's narrow column, empty, for a field that belongs
+  // beside the colour -- a stroke's width, say.
   function makeColorRow(parent, opts) {
     var row = El('div').addClass('label-style-row label-split-row').appendTo(parent);
     var colorCell = El('div').addClass('label-split-cell label-color-row').appendTo(row);
-    var opacityCell = El('div').addClass('label-split-cell').appendTo(row);
-    var control = {row: row, chit: null, input: null, opacity: null, picker: null};
+    var aside = El('div').addClass('label-split-cell').appendTo(row);
+    var control = {row: row, aside: aside, chit: null, input: null, opacity: null, picker: null};
 
     control.setColor = function(color) {
       control.input.node().value = color || '';
@@ -16611,7 +16836,10 @@
         if (isHexColor(color)) control.picker.setColor(color);
         opts.onColor(color);
       });
-    makeColorField(colorCell, control.chit, control.input);
+    control.opacity = makeColorOpacityField(colorCell, control.chit, control.input, {
+      onSet: opts.onOpacity,
+      revert: opts.revert
+    }).opacity;
     control.picker = new ColorPicker(colorCell, {
       presetRows: layerColorPresetRows,
       // A drag in the picker shows on the map's own terms -- the swatch and the
@@ -16622,12 +16850,6 @@
         opts.onColor(hex);
       }
     });
-
-    El('span').appendTo(opacityCell).text('Opacity');
-    control.opacity = makeOpacityInput(opacityCell, {
-      onSet: opts.onOpacity,
-      revert: opts.revert
-    });
     return control;
   }
 
@@ -17174,11 +17396,11 @@
   // stroke of twice this.
   var defaultHaloWidth = 2;
   var defaultHaloColor = internal.svg.DEFAULT_HALO_COLOR;
-  // The line height field shows this rather than renderLabel()'s 1.1em default,
-  // and shows it as a placeholder rather than a value, so that a label carries
-  // no line-height until one is chosen. "auto" is the honest description of a
-  // blank field: something else decides.
-  var lineHeightPlaceholder = 'auto';
+  // The line height a label without one is drawn with, shown as a placeholder
+  // rather than a value so that a label carries no line-height until one is
+  // chosen. Shown as a bare multiple, which also says what a bare number typed
+  // here means: a multiple of the font size, as in CSS, not px.
+  var lineHeightPlaceholder = String(internal.svg.DEFAULT_LINE_HEIGHT);
   // What a control shows for a selection whose labels disagree about it. One
   // word, used in every field and menu that can be in that state: the panel
   // otherwise says it by showing nothing, which is also what an unset property
@@ -17451,15 +17673,16 @@
       clearLink = El('span').addClass('label-editing-clear colored-text').appendTo(selectRow).text('deselect').on('click', clearSelection);
 
       // Three sections rather than one flat stack: the text, the symbol beside
-      // it, and where the two sit relative to each other. Text and Icon are
-      // deliberately the same shape -- a colour and its opacity on one line, a
-      // size on the line above -- so that the second reads as a variation on the
-      // first rather than as a different kind of control.
+      // it, and where the two sit relative to each other. Every section's colour
+      // row is the same shape -- the colour with its opacity in one field, and
+      // the value that qualifies it most closely beside it -- so that each reads
+      // as a variation on the first rather than as a different kind of control.
       var textSection = addSection('Text');
 
-      // The controls whose own contents say what they are -- a font name, a hex
-      // colour, a percentage, a size beside a font style -- carry no label. The
-      // ones that would be a bare number otherwise keep theirs.
+      // The controls whose own contents say what they are -- a font name, a
+      // size beside a font style -- carry no label. The ones that would be a bare
+      // number otherwise keep theirs, and so does a colour field, because the
+      // field beside it has one and "Color" says the percentage is its opacity.
       var fontRow = El('div').addClass('label-style-row').appendTo(textSection);
       fontSelect = El('select').attr('title', 'Font').appendTo(fontRow).on('change', function() {
         if (fontSelect.node().value) {
@@ -17485,11 +17708,20 @@
         onDone: releaseFocus
       });
 
+      // Letter spacing beside the colour, above line height: the two spacing
+      // values read as a pair in the narrow column, and the left of the row
+      // below is where the alignment buttons go.
+      //
+      // A text block's width is not here: it is set by dragging the block's
+      // handle, and a field for it would be clutter on every other label.
       var colorRow = El('div').addClass('label-style-row label-split-row').appendTo(textSection);
-      var textColorCell = El('div').addClass('label-split-cell label-color-row').appendTo(colorRow);
+      var textColorCell = El('div').addClass('label-split-cell label-color-row label-text-color-row').appendTo(colorRow);
+      El('span').appendTo(textColorCell).text('Color');
       colorChit = El('div').addClass('label-color-chit').attr('role', 'button');
       colorInput = El('input').attr('type', 'text').attr('title', 'Text color');
-      colorFieldBox = makeColorField(textColorCell, colorChit, colorInput);
+      var textColorField = addColorOpacityField(textColorCell, colorChit, colorInput, applyLabelOpacity);
+      colorFieldBox = textColorField.box;
+      opacityInput = textColorField.opacity;
       colorChit.on('click', function() {
         if (this.classList.contains('disabled')) return;
         toggleColorPicker();
@@ -17505,18 +17737,7 @@
       });
       colorPicker = initColorPicker(textColorCell, colorChit, colorInput, applyLabelColor);
 
-      var opacityCell = El('div').addClass('label-split-cell label-opacity-row label-text-opacity-row').appendTo(colorRow);
-      opacityInput = addOpacityInput(opacityCell, applyLabelOpacity);
-
-      // Letter spacing takes the right-hand column on its own, above line
-      // height: the two spacing values read as a pair there, and the left of the
-      // row is where the alignment buttons go.
-      //
-      // A text block's width is not here: it is set by dragging the block's
-      // handle, and a field for it would be clutter on every other label.
-      var letterRow = El('div').addClass('label-style-row label-split-row').appendTo(textSection);
-      El('div').addClass('label-split-cell').appendTo(letterRow);
-      var letterCell = El('div').addClass('label-split-cell label-spacing-row').appendTo(letterRow);
+      var letterCell = El('div').addClass('label-split-cell label-spacing-row').appendTo(colorRow);
       El('span').appendTo(letterCell).text('Letter spacing');
       letterSpacingInput = makeMeasureInput(letterCell, letterSpacingField, '0');
 
@@ -17554,8 +17775,8 @@
 
       // A halo is a yes/no that its three values then qualify, as a symbol is, so
       // it is switched the same way and its controls are inert while it is off.
-      // Its rows are ones the Text section already has: a colour and its opacity
-      // on one line, and a width in the narrow column beneath, where letter
+      // Its row is the shape of the Text section's colour row: a colour and its
+      // opacity, and a width in the narrow column beside them, where letter
       // spacing sits above.
       haloSection = addSection('Halo');
       var haloTitle = haloSection.findChild('.label-style-section-title');
@@ -17566,10 +17787,13 @@
       });
 
       var haloColorRow = El('div').addClass('label-style-row label-split-row').appendTo(haloSection);
-      var haloColorCell = El('div').addClass('label-split-cell label-color-row').appendTo(haloColorRow);
+      var haloColorCell = El('div').addClass('label-split-cell label-color-row label-halo-color-row').appendTo(haloColorRow);
+      El('span').appendTo(haloColorCell).text('Color');
       haloColorChit = El('div').addClass('label-color-chit').attr('role', 'button');
       haloColorInput = El('input').attr('type', 'text').attr('title', 'Halo color');
-      haloColorFieldBox = makeColorField(haloColorCell, haloColorChit, haloColorInput);
+      var haloColorField = addColorOpacityField(haloColorCell, haloColorChit, haloColorInput, applyHaloOpacity);
+      haloColorFieldBox = haloColorField.box;
+      haloOpacityInput = haloColorField.opacity;
       haloColorChit.on('click', function() {
         if (this.classList.contains('disabled')) return;
         haloColorPicker.toggle();
@@ -17585,12 +17809,7 @@
       });
       haloColorPicker = initColorPicker(haloColorCell, haloColorChit, haloColorInput, applyHaloColor);
 
-      var haloOpacityCell = El('div').addClass('label-split-cell label-opacity-row').appendTo(haloColorRow);
-      haloOpacityInput = addOpacityInput(haloOpacityCell, applyHaloOpacity);
-
-      var haloWidthRow = El('div').addClass('label-style-row label-split-row').appendTo(haloSection);
-      El('div').addClass('label-split-cell').appendTo(haloWidthRow);
-      var haloWidthCell = El('div').addClass('label-split-cell label-spacing-row').appendTo(haloWidthRow);
+      var haloWidthCell = El('div').addClass('label-split-cell label-spacing-row').appendTo(haloColorRow);
       El('span').appendTo(haloWidthCell).text('Width');
       // Halves as well as whole pixels: a halo is usually 1 to 2px, and the
       // step between those two is most of the range anyone uses.
@@ -17617,14 +17836,9 @@
         className: 'label-icon-toggle',
         onChange: setIconOn
       });
-      // The size's caption sits on the heading line, over its own column. It
-      // belongs to the field in the row below, but the shapes beside that field
-      // have no caption of their own, and a caption over one control of a pair
-      // pushes it out of line with the other.
-      El('div').addClass('label-icon-size-caption').appendTo(iconTitle).text('Size');
-
-      var iconSizeRow = El('div').addClass('label-style-row label-split-row label-icon-shapes-row').appendTo(iconSection);
-      var iconRow = El('div').addClass('label-split-cell').appendTo(iconSizeRow);
+      // The shapes have the whole row, so there is room for more of them, and
+      // the size sits beside the colour below, as the halo's width does.
+      var iconRow = El('div').addClass('label-style-row label-icon-shapes-row').appendTo(iconSection);
       var iconGroup = iconGroupEl = El('div').addClass('label-btn-group label-icon-buttons').appendTo(iconRow);
       iconBtns = {};
       iconTypes.forEach(function(icon) {
@@ -17637,21 +17851,14 @@
         appendIconButtonSymbol(btn, icon.name);
       });
 
-      var sizeRow = El('div').addClass('label-split-cell label-icon-size-row').appendTo(iconSizeRow);
-      iconSizeInput = new SizeField(sizeRow, {
-        title: 'Symbol size in px',
-        onSet: function(value) {
-          applyIconSize(value);
-        },
-        onStep: nudgeIconSize,
-        onDone: releaseFocus
-      });
-
       var iconColorRow = El('div').addClass('label-style-row label-split-row').appendTo(iconSection);
       var iconColorCell = El('div').addClass('label-split-cell label-color-row label-icon-color-row').appendTo(iconColorRow);
+      El('span').appendTo(iconColorCell).text('Color');
       iconColorChit = El('div').addClass('label-color-chit').attr('role', 'button');
       iconColorInput = El('input').attr('type', 'text').attr('title', 'Symbol color');
-      iconColorFieldBox = makeColorField(iconColorCell, iconColorChit, iconColorInput);
+      var iconColorField = addColorOpacityField(iconColorCell, iconColorChit, iconColorInput, applyIconOpacity);
+      iconColorFieldBox = iconColorField.box;
+      iconOpacityInput = iconColorField.opacity;
       iconColorChit.on('click', function() {
         if (this.classList.contains('disabled')) return;
         iconColorPicker.toggle();
@@ -17667,8 +17874,16 @@
       });
       iconColorPicker = initColorPicker(iconColorCell, iconColorChit, iconColorInput, applyIconColor);
 
-      var iconOpacityCell = El('div').addClass('label-split-cell label-opacity-row label-icon-opacity-row').appendTo(iconColorRow);
-      iconOpacityInput = addOpacityInput(iconOpacityCell, applyIconOpacity);
+      var sizeRow = El('div').addClass('label-split-cell label-icon-size-row').appendTo(iconColorRow);
+      El('span').appendTo(sizeRow).text('Size');
+      iconSizeInput = new SizeField(sizeRow, {
+        title: 'Symbol size in px',
+        onSet: function(value) {
+          applyIconSize(value);
+        },
+        onStep: nudgeIconSize,
+        onDone: releaseFocus
+      });
 
       initCalloutSection();
 
@@ -17780,10 +17995,13 @@
       });
 
       var colorRow = El('div').addClass('label-style-row label-split-row').appendTo(calloutSection);
-      var colorCell = El('div').addClass('label-split-cell label-color-row').appendTo(colorRow);
+      var colorCell = El('div').addClass('label-split-cell label-color-row label-callout-color-row').appendTo(colorRow);
+      El('span').appendTo(colorCell).text('Color');
       calloutColorChit = El('div').addClass('label-color-chit').attr('role', 'button');
       calloutColorInput = El('input').attr('type', 'text').attr('title', 'Callout color');
-      calloutColorFieldBox = makeColorField(colorCell, calloutColorChit, calloutColorInput);
+      var calloutColorField = addColorOpacityField(colorCell, calloutColorChit, calloutColorInput, applyCalloutOpacity);
+      calloutColorFieldBox = calloutColorField.box;
+      calloutOpacityInput = calloutColorField.opacity;
       calloutColorChit.on('click', function() {
         if (this.classList.contains('disabled')) return;
         calloutColorPicker.toggle();
@@ -17798,14 +18016,10 @@
         }
       });
       calloutColorPicker = initColorPicker(colorCell, calloutColorChit, calloutColorInput, applyCalloutColor);
-      var opacityCell = El('div').addClass('label-split-cell label-opacity-row').appendTo(colorRow);
-      calloutOpacityInput = addOpacityInput(opacityCell, applyCalloutOpacity);
 
       // The gap in the narrow column, under the sizes: it has a blank state,
       // "auto", which clears the anchor's symbol, so it is not a size field.
-      var gapRow = El('div').addClass('label-style-row label-split-row').appendTo(calloutSection);
-      El('div').addClass('label-split-cell').appendTo(gapRow);
-      var gapCell = El('div').addClass('label-split-cell label-spacing-row label-callout-gap-row').appendTo(gapRow);
+      var gapCell = El('div').addClass('label-split-cell label-spacing-row label-callout-gap-row').appendTo(colorRow);
       El('span').appendTo(gapCell).text('Gap');
       calloutGapInput = El('input').attr('type', 'text').addClass('label-measure-input')
         .attr('title', 'Space between the callout and the anchor, in px')
@@ -17887,9 +18101,9 @@
       };
     }
 
-    function addOpacityInput(parent, action) {
-      return makeOpacityInput(parent, {
-        onSet: action,
+    function addColorOpacityField(parent, chit, input, onOpacity) {
+      return makeColorOpacityField(parent, chit, input, {
+        onSet: onOpacity,
         revert: updateControls
       });
     }
@@ -19421,12 +19635,12 @@
   }
 
   var savedStylesKey = 'layer_style_presets';
-  var styleFields = ['stroke', 'stroke-width', 'stroke-opacity', 'fill', 'fill-opacity'];
+  var styleFields = ['stroke', 'stroke-width', 'stroke-opacity', 'stroke-dasharray', 'fill', 'fill-opacity'];
 
   function LayerStyleTool(gui) {
     var parent = gui.container.findChild('.mshp-main-map');
     var panel = El('div').addClass('label-style-panel layer-style-panel rollover').appendTo(parent).hide();
-    var title, editingStatus, clearLink, strokeControl, fillControl, strokeWidthField, randomFillBtn, presetControl, hit;
+    var title, editingStatus, clearLink, strokeControl, fillControl, strokeWidthField, dashControl, randomFillBtn, presetControl, hit;
     var targetLayer = null;
 
     initPanel();
@@ -19511,7 +19725,8 @@
 
       fillControl = addColorControl(panel, 'Fill', 'fill', '');
       strokeControl = addColorControl(panel, 'Stroke', 'stroke', '#000000');
-      strokeWidthField = addStrokeWidthControl(panel);
+      strokeWidthField = addStrokeWidthControl(strokeControl.aside);
+      dashControl = addDashArrayControl(panel);
 
       var buttonRow = El('div').addClass('label-style-row label-panel-button-row').appendTo(panel);
       randomFillBtn = makePanelActionButton(buttonRow, 'Random fills', applyRandomFillColors);
@@ -19553,14 +19768,11 @@
       return control;
     }
 
-    // In the narrow column, under the stroke's opacity. Stepping runs up a ladder
+    // In the narrow column beside the stroke's colour. Stepping runs up a ladder
     // of widths rather than by a fixed amount, because the useful ones are close
     // together at the hairline end and far apart above 2px.
-    function addStrokeWidthControl(parent) {
-      var row = El('div').addClass('label-style-row label-split-row').appendTo(parent);
-      El('div').addClass('label-split-cell').appendTo(row);
-      var cell = El('div').addClass('label-split-cell').appendTo(row);
-      El('span').appendTo(cell).text('Stroke width');
+    function addStrokeWidthControl(cell) {
+      El('span').appendTo(cell).text('Width');
       return new SizeField(cell, {
         min: 0,
         // Quarter-pixel widths are the useful hairlines, and the ladder below
@@ -19575,6 +19787,29 @@
       });
     }
 
+    // A literal stroke-dasharray, in the wide column so that it lines up with
+    // the stroke's colour above it. A blank field makes the line solid again.
+    function addDashArrayControl(parent) {
+      var row = El('div').addClass('label-style-row label-split-row layer-dash-row').appendTo(parent);
+      var cell = El('div').addClass('label-split-cell').appendTo(row);
+      El('div').addClass('label-split-cell').appendTo(row);
+      var caption = El('div').addClass('label-style-row-label').appendTo(cell).text('Dashes');
+      makeFieldTip(caption,
+        'Dash and gap lengths in pixels, separated\n' +
+        'by spaces. "4" gives 4px dashes and 4px gaps.\n' +
+        '"6 3" gives 6px dashes and 3px gaps.');
+      var input = El('input').attr('type', 'text').appendTo(cell)
+        .on('change', function() {
+          var value = normalizeDashArrayInput(input.node().value);
+          if (value && internal.parseStyleLiteral('stroke-dasharray', value) === undefined) {
+            updateControls();
+            return;
+          }
+          applyDashArrayStyle(value);
+        });
+      return {row: row, input: input};
+    }
+
     function releaseFocus() {
       releasePanelFocus(panel.node());
     }
@@ -19588,9 +19823,11 @@
       updateEditingStatus(manualIds.length);
       strokeControl.row.show();
       fillControl.row.classed('hidden', geom != 'polygon');
+      dashControl.row.classed('hidden', geom != 'polyline');
       updateColorControl(strokeControl);
       updateColorControl(fillControl);
       updateStrokeWidthControl();
+      updateDashArrayControl();
       randomFillBtn.classed('hidden', geom != 'polygon');
       presetControl.render();
       updateSavedStyleControls();
@@ -19604,10 +19841,13 @@
       if (!isHexColor(value)) control.picker.hide();
     }
 
+    // A selection whose colours disagree still has colours, so an opacity unset
+    // on all of it shows as full rather than blank.
     function updateOpacityControl(control) {
-      var value = getCommonStyleValue(control.field + '-opacity');
-      control.opacity.node().value =
-        formatOpacityPct(value === '' || value === undefined || value === null ? 1 : value);
+      var field = control.field + '-opacity';
+      control.opacity.node().value = styleFieldIsUnsetForTargets(field) ?
+        formatColorOpacityPct(null, !styleFieldIsUnsetForTargets(control.field)) :
+        formatOpacityPct(getCommonStyleValue(field));
     }
 
     function updateStrokeWidthControl() {
@@ -19617,6 +19857,11 @@
           getDefaultStrokeWidth() : value));
     }
 
+    function updateDashArrayControl() {
+      var value = getCommonStyleValue('stroke-dasharray');
+      dashControl.input.node().value = value === undefined || value === null ? '' : String(value);
+    }
+
     function nudgeStrokeWidth(direction) {
       var value = Number(getCommonStyleValue('stroke-width'));
       if (!isFinite(value)) value = getDefaultStrokeWidth();
@@ -19658,6 +19903,14 @@
       runStyleCommand(styles);
     }
 
+    function applyDashArrayStyle(value) {
+      var styles = [['stroke-dasharray', value]];
+      if (value && styleFieldIsUnsetForTargets('stroke')) {
+        styles.push(['stroke', strokeControl.defaultColor]);
+      }
+      runStyleCommand(styles);
+    }
+
     function runStyleCommand(styles) {
       var parts = ['-style'];
       releaseFocus();
@@ -19719,6 +19972,9 @@
       addStyleValue(style, 'stroke', getControlValue(strokeControl.input));
       addStyleValue(style, 'stroke-width', strokeWidthField.getValue());
       addStyleValue(style, 'stroke-opacity', parseOpacityValue(strokeControl.opacity.node().value));
+      if (targetLayer && targetLayer.geometry_type == 'polyline') {
+        addStyleValue(style, 'stroke-dasharray', getControlValue(dashControl.input));
+      }
       if (targetLayer && targetLayer.geometry_type == 'polygon') {
         addStyleValue(style, 'fill', getControlValue(fillControl.input));
         addStyleValue(style, 'fill-opacity', parseOpacityValue(fillControl.opacity.node().value));
@@ -20007,14 +20263,11 @@
       circleStrokeControl = addCircleColorControl('Stroke', 'stroke');
       circleControlRows.push(circleFillControl.row, circleStrokeControl.row);
 
-      // The two sizes of a circle side by side, in the shape the panel uses for
-      // every other pair.
-      var sizeRow = El('div').addClass('label-style-row label-split-row').appendTo(circlesSection);
-      // Radius in the wide column, stroke width in the narrow one under the
-      // stroke's opacity, matching the line and polygon panels.
-      var radiusCell = El('div').addClass('label-split-cell').appendTo(sizeRow);
-      var widthCell = El('div').addClass('label-split-cell').appendTo(sizeRow);
-      El('span').appendTo(widthCell).text('Stroke width');
+      // Each size beside the colour it goes with: the radius beside the fill,
+      // the stroke's width beside its colour, as in the line and polygon panels.
+      var radiusCell = circleFillControl.aside;
+      var widthCell = circleStrokeControl.aside;
+      El('span').appendTo(widthCell).text('Width');
       circleStrokeWidthField = new SizeField(widthCell, {
         min: 0,
         decimals: 2, // quarter-pixel hairlines, which the ladder below steps through
@@ -20045,7 +20298,6 @@
         },
         onDone: releaseFocus
       });
-      circleControlRows.push(sizeRow);
     }
 
     function initSymbolsSection() {
@@ -20133,27 +20385,42 @@
       var radius = getCommonValue('r');
       var fill = getCommonValue('fill');
       var stroke = getCommonValue('stroke');
-      var fillOpacity = getCommonValue('fill-opacity');
-      var strokeOpacity = getCommonValue('stroke-opacity');
       var strokeWidth = getCommonValue('stroke-width');
       setCircleRadius(radius);
       setCircleColor(circleFillControl, fill);
       setCircleColor(circleStrokeControl, stroke);
-      setCircleOpacity(circleFillControl, fillOpacity);
-      setCircleOpacity(circleStrokeControl, strokeOpacity);
+      updateCircleOpacity(circleFillControl);
+      updateCircleOpacity(circleStrokeControl);
       setCircleStrokeWidth(strokeWidth === '' ? 0 : strokeWidth);
       if (representation != 'circle' && representation != 'unstyled') {
         setCircleRadius(defaultCircleRadius);
         setCircleColor(circleFillControl, '');
         setCircleColor(circleStrokeControl, '');
-        setCircleOpacity(circleFillControl, '');
-        setCircleOpacity(circleStrokeControl, '');
+        circleFillControl.opacity.node().value = '';
+        circleStrokeControl.opacity.node().value = '';
         setCircleStrokeWidth(0);
       }
     }
 
-    function setCircleOpacity(control, value) {
-      control.opacity.node().value = formatOpacityPct(value === '' ? 1 : value);
+    // The opacity to put in the style command: undefined to leave the property
+    // as it is, null for a field holding something that is not an opacity.
+    // A blank field has nothing to say, and 100% over an unset opacity is the
+    // default being shown rather than a value to store.
+    function getCircleOpacityToWrite(control) {
+      var str = control.opacity.node().value.trim();
+      var val = parseOpacityValue(str);
+      if (str === '') return undefined;
+      if (val === 1 && styleFieldIsUnset(control.field + '-opacity')) return undefined;
+      return val;
+    }
+
+    // A selection whose colours disagree still has colours, so an opacity unset
+    // on all of it shows as full rather than blank.
+    function updateCircleOpacity(control) {
+      var field = control.field + '-opacity';
+      control.opacity.node().value = styleFieldIsUnset(field) ?
+        formatColorOpacityPct(null, !styleFieldIsUnset(control.field)) :
+        formatOpacityPct(getCommonValue(field));
     }
 
     function renderCreateFields() {
@@ -20204,16 +20471,16 @@
     function createSimpleCircles() {
       runCommand('-style r=' + defaultCreatedCircleRadius +
         ' fill=' + quoteCommandValue(defaultCircleFill) +
-        ' fill-opacity=1 stroke-opacity=1 stroke-width=0', 'Create circles');
+        ' stroke-width=0', 'Create circles');
     }
 
     function applyCircleStyles() {
       var representation = getPointRepresentation();
       var radius = getCircleRadius();
       var fill = circleFillControl.input.node().value.trim();
-      var fillOpacity = parseOpacityValue(circleFillControl.opacity.node().value);
+      var fillOpacity = getCircleOpacityToWrite(circleFillControl);
       var stroke = circleStrokeControl.input.node().value.trim();
-      var strokeOpacity = parseOpacityValue(circleStrokeControl.opacity.node().value);
+      var strokeOpacity = getCircleOpacityToWrite(circleStrokeControl);
       var strokeWidth = getCircleStrokeWidth();
       var args;
       if (!gui.console || !(representation == 'unstyled' || representation == 'circle') ||
@@ -20222,11 +20489,9 @@
         fill = defaultCircleFill;
         setCircleColor(circleFillControl, fill);
       }
-      args = [
-        'fill-opacity=' + fillOpacity,
-        'stroke-opacity=' + strokeOpacity,
-        'stroke-width=' + strokeWidth
-      ];
+      args = ['stroke-width=' + strokeWidth];
+      if (fillOpacity !== undefined) args.push('fill-opacity=' + fillOpacity);
+      if (strokeOpacity !== undefined) args.push('stroke-opacity=' + strokeOpacity);
       if (radius !== null) args.unshift('r=' + radius);
       if (fill) args.push('fill=' + quoteCommandValue(fill));
       if (stroke) args.push('stroke=' + quoteCommandValue(stroke));
@@ -20453,7 +20718,7 @@
     var setDefaultTargets = self.setDefaultTargets;
     utils$1.extend(self, EventDispatcher.prototype);
 
-    // A map frame is composition state, not editable content. Commands may
+    // A map frame (and its furniture) is composition state, not editable content. Commands may
     // explicitly target it, but it must not replace the GUI's active content
     // layer or become the implicit target of the next console command.
     self.setDefaultTargets = function(targets, opts) {
@@ -20520,15 +20785,25 @@
     };
 
     self.selectNextLayer = function() {
-      var next = self.findNextLayer(self.getActiveLayer().layer);
+      var next = findContentLayer(self.findNextLayer);
       if (next) self.selectLayer(next.layer, next.dataset);
     };
 
     self.selectPrevLayer = function() {
-      var prev = self.findPrevLayer(self.getActiveLayer().layer);
+      var prev = findContentLayer(self.findPrevLayer);
       if (prev) self.selectLayer(prev.layer, prev.dataset);
     };
 
+    // step past the frame and its furniture, which can't be selected
+    function findContentLayer(step) {
+      var start = self.getActiveLayer().layer;
+      var o = step.call(self, start);
+      while (o && o.layer != start && internal.isFrameComponentLayer(o.layer, o.dataset)) {
+        o = step.call(self, o.layer);
+      }
+      return o;
+    }
+
     return self;
 
     function getContentTargets(targets) {
@@ -20536,7 +20811,7 @@
         return {
           dataset: target.dataset,
           layers: target.layers.filter(function(lyr) {
-            return !internal.isFrameLayer(lyr, target.dataset.arcs);
+            return !internal.isFrameComponentLayer(lyr, target.dataset);
           })
         };
       }).filter(function(target) {
@@ -20546,7 +20821,7 @@
 
     function getFirstContentTarget() {
       var target = self.getLayers().find(function(o) {
-        return !internal.isFrameLayer(o.layer, o.dataset.arcs);
+        return !internal.isFrameComponentLayer(o.layer, o.dataset);
       });
       return target ? [{dataset: target.dataset, layers: [target.layer]}] : [];
     }
@@ -22929,15 +23204,22 @@
     this.zoomToBbox = zoomToBbox;
 
     if (gui.options.homeControl) {
-      gui.buttons.addButton("#home-icon").on('click', function() {
-        if (disabled()) return;
-        gui.dispatchEvent('map_reset');
-      });
+      gui.buttons.addButton("#home-icon")
+        .attr('data-tooltip', 'Zoom to fit')
+        .attr('aria-label', 'Zoom to fit')
+        .on('click', function() {
+          if (disabled()) return;
+          gui.dispatchEvent('map_reset');
+        });
     }
 
     if (gui.options.zoomControl) {
-      inBtn = gui.buttons.addButton("#zoom-in-icon");
-      outBtn = gui.buttons.addButton("#zoom-out-icon");
+      inBtn = gui.buttons.addButton("#zoom-in-icon")
+        .attr('data-tooltip', 'Zoom in')
+        .attr('aria-label', 'Zoom in');
+      outBtn = gui.buttons.addButton("#zoom-out-icon")
+        .attr('data-tooltip', 'Zoom out')
+        .attr('aria-label', 'Zoom out');
       initVariableClick(inBtn.node(), zoomIn);
       initVariableClick(outBtn.node(), zoomOut);
       ext.on('change', function() {
@@ -23102,8 +23384,11 @@
     gui.on('interaction_mode_change', function(e) {
       if (e.mode === 'selection') {
         gui.enterMode('selection_tool');
-      } else if (_on) {
-        turnOff();
+      } else if (gui.getMode() == 'selection_tool') {
+        // Leave the gui mode rather than just calling turnOff(): a mode left
+        // behind makes the next enterMode('selection_tool') a no-op, so the tool
+        // would never turn back on.
+        gui.clearMode();
       }
     });
 
@@ -26361,7 +26646,7 @@
 
     function getLineHeight(o) {
       var rec = o.pending ? o.pending.getStyle() : getRecord(o.target, o.id);
-      return rec && rec['line-height'] || '1.1em';
+      return internal.svg.getLineHeightDy(rec && rec['line-height']);
     }
 
     function getProvider(nodes) {
@@ -29211,6 +29496,7 @@
       referenceStyle = { // outline style for reference layers
         type: 'outline',
         strokeColors: [null, '#87b73b'], // was 78c110
+        // strokeColors: [null, 'rgba(79,140,0,0.67)'],
         strokeWidth: 0.85,
         dotColor: "#73ba20",
         dotSize: 1
@@ -30090,37 +30376,103 @@
   }
 
 
-  function getCanvasFillPattern(style) {
-    var fill = hatches[style.fillPattern];
-    if (fill === undefined) {
-      fill = makePatternFill(style);
-      hatches[style.fillPattern] = fill;
+  // symbolScale: the preview symbol scale (1 outside preview). Pattern sizes are
+  // in output pixels, like stroke widths, so the tile grows with the page.
+  // anchor: canvas-pixel position the pattern origin is pinned to, so the tile
+  // travels with the map instead of sticking to the viewport. Panning only
+  // updates this matrix. The tile image is rebuilt when the scale changes,
+  // which is at most once per pattern per render.
+  function getCanvasFillPattern(style, symbolScale, anchor) {
+    var scale = symbolScale > 0 ? symbolScale : 1;
+    var entry = hatches[style.fillPattern];
+    if (!entry || entry.scale != scale) {
+      entry = makePatternEntry(style, scale);
+      hatches[style.fillPattern] = entry;
     }
-    return fill || style.fill || '#000'; // use fill if hatches are invalid
+    if (!entry || !entry.pattern) return style.fill || '#000';
+    if (anchor) applyPatternAnchor(entry, anchor);
+    return entry.pattern;
   }
 
-  function makePatternFill(style) {
+  function makePatternEntry(style, scale) {
     var o = internal.parsePattern(style.fillPattern);
     if (!o) return null;
     var canv = document.createElement('canvas');
     var ctx = canv.getContext('2d');
-    var res = GUI.getPixelRatio();
-    var w = o.tileSize[0] * res;
-    var h = o.tileSize[1] * res;
+    var k = GUI.getPixelRatio() * scale;
+    var tw = o.tileSize[0], th = o.tileSize[1];
+    // A canvas has whole-pixel dimensions, but the scaled tile generally does
+    // not. The tile is drawn into the nearest whole-pixel canvas, and the
+    // pattern transform stretches it back to its exact size so that the
+    // repeat period doesn't drift across a large polygon.
+    var w = Math.max(1, Math.round(tw * k));
+    var h = Math.max(1, Math.round(th * k));
     canv.setAttribute('width', w);
     canv.setAttribute('height', h);
+    ctx.scale(w / tw, h / th);
     if (o.background) {
       ctx.fillStyle = o.background;
-      ctx.fillRect(0, 0, w, h);
-    }
-    if (o.type == 'dots' || o.type == 'squares') makeDotFill(o, ctx, res);
-    if (o.type == 'dashes') makeDashFill(o, ctx, res);
-    if (o.type == 'hatches') makeHatchFill(o, ctx, res);
-    var pattern = ctx.createPattern(canv, 'repeat');
-    if (o.rotation) {
-      pattern.setTransform(new DOMMatrix('rotate(' + o.rotation + 'deg)'));
+      ctx.fillRect(0, 0, tw, th);
     }
-    return pattern;
+    if (o.type == 'dots' || o.type == 'squares') makeDotFill(o, ctx, 1);
+    if (o.type == 'dashes') makeDashFill(o, ctx, 1);
+    if (o.type == 'hatches') makeHatchFill(o, ctx, 1);
+    return {
+      scale: scale,
+      pattern: ctx.createPattern(canv, 'repeat'),
+      rotation: o.rotation || 0,
+      sx: tw * k / w,
+      sy: th * k / h,
+      w: w,
+      h: h
+    };
+  }
+
+  // Pins the cached pattern to @anchor. Skipped when the view has not moved,
+  // so a hover redraw does not touch the pattern.
+  function applyPatternAnchor(entry, anchor) {
+    if (entry.ax == anchor.x && entry.ay == anchor.y) return;
+    entry.ax = anchor.x;
+    entry.ay = anchor.y;
+    var t = getPatternTransform(entry, anchor);
+    entry.pattern.setTransform(new DOMMatrix([t.a, t.b, t.c, t.d, t.e, t.f]));
+  }
+
+  // Matrix taking pattern-image pixels to canvas pixels: translate to the
+  // anchor, then rotate, then scale. The anchor is folded into one tile so a
+  // map origin far outside the viewport does not blow the matrix precision.
+  function getPatternTransform(entry, anchor) {
+    var p = wrapPatternAnchor(anchor.x, anchor.y, entry);
+    var rad = (entry.rotation || 0) * Math.PI / 180;
+    var c = Math.cos(rad);
+    var s = Math.sin(rad);
+    return {
+      a: c * entry.sx,
+      b: s * entry.sx,
+      c: -s * entry.sy,
+      d: c * entry.sy,
+      e: p.x,
+      f: p.y
+    };
+  }
+
+  // @entry.sx/sy scale image pixels to canvas pixels; the image repeats every
+  // @entry.w by @entry.h pixels. Returns a point in the same place on the
+  // pattern, within one tile of the origin.
+  function wrapPatternAnchor(x, y, entry) {
+    var rad = (entry.rotation || 0) * Math.PI / 180;
+    var c = Math.cos(rad);
+    var s = Math.sin(rad);
+    var rx = c * x + s * y;
+    var ry = -s * x + c * y;
+    var qx = rx / entry.sx - Math.floor(rx / entry.sx / entry.w) * entry.w;
+    var qy = ry / entry.sy - Math.floor(ry / entry.sy / entry.h) * entry.h;
+    var lx = qx * entry.sx;
+    var ly = qy * entry.sy;
+    return {
+      x: c * lx - s * ly,
+      y: s * lx + c * ly
+    };
   }
 
   function makeDashFill(o, ctx, res) {
@@ -30811,27 +31163,66 @@
     return iter;
   }
 
+  // Same multiplier as ctx.lineWidth. Retina canvases are pixRatio times the
+  // CSS pixel; preview mode multiplies styled strokes by the symbol scale.
+  function getCanvasStrokeScale(pixRatio, lineScale) {
+    return (pixRatio > 1 ? pixRatio : 1) * (lineScale || 1);
+  }
+
+  // Scale a stroke-dasharray into canvas pixels. Scale 1 returns the authored
+  // tokens, so a 100% preview and a non-preview view keep the pattern as stored.
+  function scaleCanvasLineDash(lineDash, scale) {
+    var parts = String(lineDash).split(' ');
+    var out, i;
+    if (!(scale > 0) || scale === 1) return parts;
+    out = new Array(parts.length);
+    for (i = 0; i < parts.length; i++) {
+      out[i] = +parts[i] * scale;
+    }
+    return out;
+  }
+
+  // Where a fill pattern's origin sits, in canvas pixels. In preview that is
+  // the top-left of the page; otherwise the geographic origin, so a pan (which
+  // only changes the translation) carries the pattern with the shapes.
+  function getPatternAnchor(ext) {
+    var t = ext.getTransform(GUI.getPixelRatio());
+    var frame = ext.getFrameData();
+    if (frame && frame.bbox) {
+      return {
+        x: frame.bbox[0] * t.mx + t.bx,
+        y: frame.bbox[3] * t.my + t.by
+      };
+    }
+    return {x: t.bx, y: t.by};
+  }
+
   function getPathStart(ext, lineScale) {
     var pixRatio = GUI.getPixelRatio();
     if (!lineScale) lineScale = 1;
+    // Same factor as lineWidth, so dash length and gap stay in proportion to
+    // the stroke. In preview that factor includes the symbol scale; without it
+    // the pattern stays a fixed screen size while the line grows.
+    var strokeScale = getCanvasStrokeScale(pixRatio, lineScale);
+    // The symbol scale itself, not lineScale: lineScale adds a bump to widen
+    // hover outlines, which a fill has no reason to follow.
+    var patternScale = ext.getSymbolScale() || 1;
+    // Page corner in preview, so the pattern is fixed to the page the way the
+    // exported SVG is. With no frame, the geographic origin, which is enough
+    // for panning: the pattern is not scaled by the geographic zoom then.
+    var patternAnchor = getPatternAnchor(ext);
     return function(ctx, style) {
       var strokeWidth;
       ctx.beginPath();
       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 * pixRatio;
-        }
         ctx.lineCap = style.lineCap || 'round';
         ctx.lineJoin = style.lineJoin || 'round';
-        ctx.lineWidth = strokeWidth * lineScale;
+        ctx.lineWidth = strokeWidth * strokeScale;
         ctx.strokeStyle = style.strokeColor;
         if (style.lineDash){
           ctx.lineCap = 'butt';
-          ctx.setLineDash(style.lineDash.split(' '));
+          ctx.setLineDash(scaleCanvasLineDash(style.lineDash, strokeScale));
         }
         if (style.miterLimit) {
           ctx.miterLimit = style.miterLimit;
@@ -30839,7 +31230,7 @@
       }
 
       if (style.fillPattern) {
-        ctx.fillStyle = getCanvasFillPattern(style);
+        ctx.fillStyle = getCanvasFillPattern(style, patternScale, patternAnchor);
       } else if (style.fillColor) {
         ctx.fillStyle = style.fillColor;
       }
@@ -30878,20 +31269,28 @@
     return internal.svg.getTransform(p, scale);
   }
 
-  function repositionFurniture(container, layer, ext) {
-    var g = El.findAll('.mapshaper-svg-furniture', container)[0];
-    g.setAttribute('transform', getSvgFurnitureTransform(ext));
+  function repositionFurniture(container, ext) {
+    if (!ext.getFrameData()) return;
+    El.findAll('.mapshaper-svg-furniture', container).forEach(function(g) {
+      g.setAttribute('transform', getSvgFurnitureTransform(ext));
+    });
   }
 
+  // Returns an SVG string, or '' if the furniture can't be drawn in the current
+  // frame (e.g. the map is unprojected). The scalebar panel explains why.
   function renderFurniture(lyr, ext) {
-    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');
-    }
+    var frame = ext.getFrameData();
+    var obj;
+    if (internal.getFurnitureFrameProblem(frame)) return '';
+    obj = internal.getEmptyLayerForSVG(lyr, {});
     obj.properties.transform = getSvgFurnitureTransform(ext);
     obj.properties.class = 'mapshaper-svg-furniture';
-    obj.children = internal.renderFurnitureLayer(lyr, frame);
+    try {
+      obj.children = internal.renderFurnitureLayer(lyr, frame);
+    } catch(e) {
+      console.error(e);
+      return '';
+    }
     return internal.svg.stringify(obj);
   }
 
@@ -30933,8 +31332,6 @@
       resize(ext);
       if (type == 'label' || type == 'symbol') {
         html = renderSymbols(lyr.gui.displayLayer, ext, id);
-      } else if (type == 'furniture') {
-        html = renderFurniture(lyr.gui.displayLayer, ext);
       }
       g.innerHTML = html;
       if (type == 'label' || type == 'symbol') {
@@ -30948,6 +31345,26 @@
       }
     };
 
+    // Furniture layers are dataset layers (they have no display layer)
+    el.drawFurniture = function(layers) {
+      el.clear();
+      resize(ext);
+      layers.forEach(function(lyr) {
+        var html = renderFurniture(lyr, ext);
+        var g;
+        if (!html) return;
+        g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        g.setAttribute('class', 'mapshaper-svg-layer mapshaper-furniture-layer');
+        g.innerHTML = html;
+        svg.append(g);
+      });
+    };
+
+    el.repositionFurniture = function() {
+      resize(ext);
+      repositionFurniture(svg, ext);
+    };
+
     function reposition(lyr, type, ext) {
       var container = el.findChild('.' + lyr.gui.svg_id);
       if (!container || !container.node()) {
@@ -30961,8 +31378,6 @@
         // a symbol group's transform absorbs panning, and zooming too when a
         // frame is defined; anything it can't absorb needs the baselines rebuilt
         updateLabelPaths(container.node(), lyr.gui.displayLayer, ext);
-      } else if (type == 'furniture') {
-        repositionFurniture(container.node(), lyr.gui.displayLayer, ext);
       } else {
         // container.getElementsByTagName('text')
         error('Unsupported symbol type:', type);
@@ -31118,19 +31533,14 @@
       });
     };
 
+    // Furniture is sized in frame pixels, so panning and zooming only need to
+    // update its transform; its content changes only with a full redraw.
     this.drawFurnitureLayers = function(layers, action) {
-      // re-render if action == 'nav', because scalebars get resized
-      var noRedraw = action == 'hover';
-      if (!noRedraw) {
-        _furniture.clear();
+      if (action == 'nav' || action == 'hover') {
+        _furniture.repositionFurniture();
+      } else {
+        _furniture.drawFurniture(layers);
       }
-      layers.forEach(function(lyr) {
-        if (noRedraw) {
-          _furniture.reposition(lyr, 'furniture');
-        } else {
-          _furniture.drawLayer(lyr, 'furniture');
-        }
-      });
     };
 
     // kludge: skip rendering base layers if hovering, except on first hover
@@ -31489,50 +31899,73 @@
     gui.on('interaction_mode_change', function(e) {
       if (e.mode === 'rectangles') {
         gui.enterMode('rectangle_tool');
-      } else if (_on) {
-        turnOff();
+      } else if (gui.getMode() == 'rectangle_tool') {
+        // Leave the gui mode rather than just calling turnOff(): a mode left
+        // behind makes the next enterMode('rectangle_tool') a no-op, so the tool
+        // would never turn back on.
+        gui.clearMode();
       }
     });
 
     hit.on('change', function(e) {
       if (!_on) return;
       // TODO: handle multiple hits (see gui-inspection-control)
-      var id = e.id;
       if (e.id > -1 && e.pinned) {
-        var target = hit.getHitTarget();
-        var path = target.shapes[e.id][0];
-        var bbox = target.gui.displayArcs.getSimpleShapeBounds(path).toArray();
-        box.setDataCoords(bbox);
-        dragInfo = {
-          id: e.id,
-          target: target,
-          ids: [],
-          points: []
-        };
-        var iter = target.gui.displayArcs.getShapeIter(path);
-        while (iter.hasNext()) {
-          dragInfo.points.push([iter.x, iter.y]);
-          dragInfo.ids.push(iter._arc.i);
+        if (!dragInfo || dragInfo.id != e.id) {
+          selectRectangle(e.id);
         }
-        gui.container.findChild('.map-layers').classed('dragging', true);
-
-      } else if (dragInfo) {
-        gui.dispatchEvent('rectangle_dragend', dragInfo); // save undo state
-        gui.container.findChild('.map-layers').classed('dragging', false);
-        reset();
       } else {
-        box.hide();
+        reset();
       }
-
     });
 
     box.on('handle_drag', function(e) {
       if (!_on || !dragInfo) return;
       var coords = internal.bboxToCoords(box.getDataCoords());
       setRectangleCoords(dragInfo.target, dragInfo.ids, coords);
+      dragInfo.moved = true;
       gui.dispatchEvent('map-needs-refresh');
     });
 
+    // Each handle drag is one undo step, saved when it ends -- waiting until the
+    // rectangle is deselected would lose the edit if the mode changes first.
+    box.on('handle_up', function() {
+      if (!_on || !dragInfo || !dragInfo.moved) return;
+      gui.dispatchEvent('rectangle_dragend', {
+        target: dragInfo.target,
+        ids: dragInfo.ids,
+        points: dragInfo.points
+      });
+      dragInfo.points = getDataPoints(dragInfo.target, dragInfo.ids);
+      dragInfo.moved = false;
+    });
+
+    function selectRectangle(id) {
+      var target = hit.getHitTarget();
+      var path = target.shapes[id][0];
+      var bbox = target.gui.displayArcs.getSimpleShapeBounds(path).toArray();
+      var ids = [];
+      var iter = target.gui.displayArcs.getShapeIter(path);
+      while (iter.hasNext()) {
+        ids.push(iter._arc.i);
+      }
+      box.setDataCoords(bbox);
+      dragInfo = {
+        id: id,
+        target: target,
+        ids: ids,
+        points: getDataPoints(target, ids), // for undo
+        moved: false
+      };
+      gui.container.findChild('.map-layers').classed('dragging', true);
+    }
+
+    function getDataPoints(target, ids) {
+      return ids.map(function(id) {
+        return getVertexCoords(target, id);
+      });
+    }
+
     function turnOn() {
       box.turnOn();
       _on = true;
@@ -31550,6 +31983,9 @@
 
     function reset() {
       box.hide();
+      if (dragInfo) {
+        gui.container.findChild('.map-layers').classed('dragging', false);
+      }
       dragInfo = null;
     }
   }
@@ -32955,7 +33391,7 @@
 
     function isFrameMapLayer(lyr) {
       var dataset = lyr && lyr.gui && lyr.gui.source && lyr.gui.source.dataset;
-      return !!dataset && internal.isFrameLayer(lyr, dataset.arcs);
+      return !!dataset && internal.isFrameComponentLayer(lyr, dataset);
     }
 
     function getDrawableContentLayers() {
@@ -32965,11 +33401,18 @@
       });
     }
 
-    function getDrawableFurnitureLayers(layers) {
-      if (!isPreviewView()) return [];
-      return getVisibleMapLayers().filter(function(o) {
-        return internal.isFurnitureLayer(o);
+    // The active frame's furniture, plus any visible standalone furniture layers
+    // (e.g. from -scalebar run before a frame was created)
+    function getDrawableFurnitureLayers() {
+      var frame = isPreviewView() ? internal.getActiveFrame(model) : null;
+      if (!frame) return [];
+      var layers = internal.getFrameFurnitureLayers(frame.dataset);
+      getVisibleMapLayers().forEach(function(lyr) {
+        if (internal.layerIsFurniture(lyr) && !layers.includes(lyr) && !lyr.hidden) {
+          layers.push(lyr);
+        }
       });
+      return layers;
     }
 
     function updateLayerStyles(layers) {
@@ -33021,7 +33464,6 @@
       var layersMayHaveChanged = action != 'nav'; // !action;
       var fullBounds;
       var contentLayers = getDrawableContentLayers();
-      // 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.");
@@ -33062,8 +33504,7 @@
       }
       _renderer.drawOverlayLayers(_overlayLayers, action);
 
-      // TODO: draw furniture
-      // _renderer.drawFurnitureLayers(furnitureLayers, action);
+      _renderer.drawFurnitureLayers(getDrawableFurnitureLayers(), action);
       // The action says how much was redrawn, which a listener rebuilding its own
       // DOM overlays needs: a 'hover' draw leaves the SVG markup and its
       // transforms alone, so anything anchored to them is still good.
@@ -33613,22 +34054,20 @@
 
     // Fitting obeys the same mode as a handle drag: holding the scale grows the
     // output to cover the new extent, holding the output rescales onto it. The
-    // command works out both the padding and the held-scale width, so the
-    // margin's unit handling lives in one place.
+    // command works out the extent, which has to leave room for symbols and
+    // labels at the scale it ends up at, along with the padding and the
+    // held-scale width, so the margin's unit handling lives in one place.
     function fitVisibleLayers() {
       var target = getFrameTarget();
       var entries = getCompositionEntries();
       var margin = getMargin();
-      var parts, bounds;
+      var parts;
       if (!target || !entries.length) return;
-      bounds = entries.reduce(function(memo, o) {
-        return memo.mergeBounds(
-          internal.getLayerBounds(o.layer, o.dataset.arcs)
-        );
-      }, new internal.Bounds());
       parts = [
         '-update-frame',
-        'bbox=' + quoteCommandValue(bounds.toArray().join(','))
+        'fit=' + internal.formatOptionValue(entries.map(function(o) {
+          return internal.getLayerTargetId(gui.model, o.layer);
+        }).join(','))
       ];
       if (margin) parts.push('offset=' + quoteCommandValue(margin));
       if (!lockSize) parts.push('fix-scale');
@@ -33654,10 +34093,7 @@
         return;
       }
       if (!getSourceLayer()) {
-        showPopupAlert(
-          'Add one or more layers before creating a map frame.',
-          'Map frame'
-        );
+        showPopupAlert(getNoSourceMessage(), 'Map frame');
         return;
       }
       var popup = showPopupAlert('', 'Add map frame', {classname: 'frame-create-box'});
@@ -33802,7 +34238,7 @@
     function createFromVisibleLayers(width, aspect, margin) {
       var entries = getCompositionEntries();
       if (!entries.length) {
-        showPopupAlert('No visible geographic layers are available.', 'Map frame');
+        showPopupAlert(getNoSourceMessage(), 'Map frame');
         return;
       }
       var ids = entries.map(function(o) {
@@ -33825,6 +34261,15 @@
       });
     }
 
+    function getNoSourceMessage() {
+      var active = gui.model.getActiveLayer();
+      if (active && active.layer && !internal.layerHasGeometry(active.layer)) {
+        return 'A map frame is fitted to layers with shapes, and this layer ' +
+          'contains only attribute data. Select or show a map layer to create a frame.';
+      }
+      return 'Add one or more layers before creating a map frame.';
+    }
+
     function getFrameTarget() {
       return internal.getActiveFrame(gui.model);
     }
@@ -33844,10 +34289,11 @@
       return entries.length ? entries[0].layer : null;
     }
 
+    // A frame is fitted to shapes, so a data-only layer on show doesn't count
     function getCompositionEntries() {
       var layers = gui.map.getCompositionLayers();
       return gui.model.getLayers().filter(function(o) {
-        return layers.includes(o.layer);
+        return layers.includes(o.layer) && internal.layerHasGeometry(o.layer);
       });
     }
 
@@ -33884,16 +34330,6 @@
       .text(label).on('click', action);
   }
 
-  // The "?" the rest of the app uses for field help (see .tip-button in
-  // elements.css and the static ones in index.html). The bubble is white-space:
-  // pre, so the line breaks in the text are the ones it gets.
-  function makeFieldTip(parent, text) {
-    var btn = El('div').addClass('tip-button').appendTo(parent).text('?');
-    var anchor = El('div').addClass('tip-anchor').appendTo(btn);
-    El('div').addClass('tip').appendTo(anchor).text(text);
-    return btn;
-  }
-
   function getUnitFactor$1(units) {
     return units == 'in' ? 72 : units == 'cm' ? 28.3465 : 1;
   }
@@ -33913,7 +34349,7 @@
   function FrameProperties(gui) {
     var target, form, widthInput, heightInput, unitsSelect, aspectValue;
     var backgroundControl, neatlineControl, neatlineWidthInput;
-    var boundsValue, crsValue;
+    var boundsValue, crsValue, scalebarButton;
 
     gui.frameProperties = this;
 
@@ -33975,9 +34411,9 @@
         revert: updateControls
       });
       // The width belongs to the same property as the colour and opacity beside
-      // it, and all three fit on the row. The background row leaves the column
-      // empty rather than putting the width on a line of its own.
-      neatlineWidthInput = makeRowField(neatlineControl.row, 'Width')
+      // it. The background row leaves the column empty rather than putting the
+      // width on a line of its own.
+      neatlineWidthInput = makeCellField(neatlineControl.aside, 'Width')
         .addClass('frame-neatline-width')
         .on('change', updateNeatlineWidth);
       var clearRow = El('div')
@@ -33985,6 +34421,14 @@
         .appendTo(appearance);
       makeActionButton(clearRow, 'Clear appearance', clearFrameStyle);
 
+      var elements = makePanelSection(form, 'Map elements');
+      var elementsRow = El('div')
+        .addClass('label-style-row label-panel-button-row')
+        .appendTo(elements);
+      scalebarButton = makeActionButton(elementsRow, '', function() {
+        if (gui.scalebarProperties) gui.scalebarProperties.open(target);
+      }).addClass('frame-scalebar-btn');
+
       var details = makePanelSection(form, 'Details');
       boundsValue = makeReadOnlyRow(details, 'Bounds');
       crsValue = makeReadOnlyRow(details, 'CRS');
@@ -34002,11 +34446,13 @@
       unitsSelect.node().value = units;
       aspectValue.text(getAspectText(frame));
       backgroundControl.showColor(rec.fill || '');
-      backgroundControl.opacity.node().value = formatOpacity(rec['fill-opacity']);
+      backgroundControl.opacity.node().value = formatColorOpacityPct(rec['fill-opacity'], !!rec.fill);
       neatlineControl.showColor(rec.stroke || '');
-      neatlineControl.opacity.node().value = formatOpacity(rec['stroke-opacity']);
+      neatlineControl.opacity.node().value = formatColorOpacityPct(rec['stroke-opacity'], !!rec.stroke);
       neatlineWidthInput.node().value =
         rec['stroke-width'] === undefined ? '' : rec['stroke-width'];
+      scalebarButton.text(internal.findFrameFurnitureLayer(target.dataset, 'scalebar') ?
+        'Edit scale bar' : 'Add scale bar');
       boundsValue.text(frame.bbox.map(formatCoordinate).join(', '));
       crsValue.text(info.proj4 || '[unknown]');
     }
@@ -34092,8 +34538,7 @@
   }
 
   // An extra captioned cell on an existing colour row.
-  function makeRowField(row, label) {
-    var cell = El('div').addClass('label-split-cell').appendTo(row);
+  function makeCellField(cell, label) {
     El('span').appendTo(cell).text(label);
     return makeTextInput(cell);
   }
@@ -34131,11 +34576,6 @@
     return String(Number(value.toPrecision(12)));
   }
 
-  function formatOpacity(value) {
-    return value === undefined ? '' :
-      String(Math.round(Number(value) * 100)) + '%';
-  }
-
   // A fixed ratio holds when the frame is rescaled; one taken from the extent
   // changes whenever the extent does. That difference is the reason to show the
   // ratio at all, so it is said rather than implied.
@@ -34149,6 +34589,434 @@
     return formatFrameAspectRatio(ratio) + ' (from extent)';
   }
 
+  // Record fields of a scalebar, in the order they are written as options
+  var scalebarOptions = ['units', 'style', 'position', 'label_position',
+    'font_size', 'font_family', 'font_style', 'font_weight', 'color', 'bar_width',
+    'tic_length', 'label_offset', 'margin'];
+
+  // Returns a -scalebar command that recreates a scalebar with the given
+  // settings (a scalebar data record, with any edits applied). -scalebar
+  // replaces the frame's scalebar, so every setting has to be written.
+  function getScalebarCommand(settings) {
+    var parts = ['-scalebar'];
+    var d = settings || {};
+    if (isSet(d.label)) {
+      parts.push(quoteCommandValue(d.label));
+    }
+    scalebarOptions.forEach(function(k) {
+      if (isSet(d[k])) {
+        parts.push(k.replace(/_/g, '-') + '=' + formatValue$1(d[k]));
+      }
+    });
+    if (d.dual_units) {
+      parts.push('dual-units');
+    }
+    return parts.join(' ');
+  }
+
+  function isSet(val) {
+    return val !== undefined && val !== null && val !== '';
+  }
+
+  function formatValue$1(val) {
+    var str = String(val);
+    return /^[\w.#-]+$/.test(str) ? str : quoteCommandValue(str);
+  }
+
+  var positionOptions = [
+    ['top-left', 'Top left'],
+    ['top-right', 'Top right'],
+    ['bottom-left', 'Bottom left'],
+    ['bottom-right', 'Bottom right']
+  ];
+
+  // What the scalebar is drawn in when it has no color of its own
+  var defaultColor = '#000000';
+
+  // Settings of the frame's scalebar. Every edit sends a complete -scalebar
+  // command, which replaces the scalebar, so edits are undoable and replayable
+  // like any other command.
+  function ScalebarProperties(gui) {
+    var popup, form, note;
+    var labelInput, unitsSelect, styleSelect, dualUnitsBox, positionSelect,
+      labelPositionSelect, fontSizeInput, barWidthInput, marginInput,
+      fontSelect, fontStyleSelect, colorChit, colorInput, colorPicker;
+
+    gui.scalebarProperties = this;
+
+    // The panel doesn't block the map, so anything can change the scalebar or
+    // the frame while it is open: an undo, a frame edit, a console command.
+    gui.model.on('update', function(e) {
+      var flags = e.flags || {};
+      if (!popup || flags.simplify_amount || flags.redraw_only) return;
+      if (getScalebarRecord()) {
+        updateControls();
+      } else {
+        closePanel();
+      }
+    });
+
+    // Adds a scalebar to the frame if it doesn't have one
+    this.open = function(frameTarget) {
+      var frame = frameTarget || internal.getActiveFrame(gui.model);
+      if (!frame) return;
+      if (getScalebarRecord()) {
+        showPanel();
+      } else {
+        runCommand('-scalebar', 'Add scale bar', showPanel);
+      }
+    };
+
+    this.isOpen = function() {
+      return !!popup;
+    };
+
+    // The map stays live, so the panel is placed where it is least likely to
+    // hide the scalebar: at the top of the map, on the side away from it
+    function showPanel() {
+      var d = getScalebarRecord();
+      if (!d) return;
+      closePanel();
+      popup = showPopupAlert('', 'Scale bar', {
+        non_blocking: true,
+        classname: 'scalebar-properties-box'
+      });
+      popup.onClose(function() {
+        popup = form = null;
+      });
+      popup.container().addClass('scalebar-properties-popup');
+      form = El('div')
+        .addClass('label-style-panel scalebar-properties-form')
+        .appendTo(popup.container());
+      initForm();
+      updateControls();
+      placePanel(/right/.test(d.position || '') ? 'left' : 'right');
+    }
+
+    function closePanel() {
+      if (popup) popup.close();
+    }
+
+    function placePanel(side) {
+      var box = popup.container().node().parentNode;
+      var map = gui.container.findChild('.map-layers').node().getBoundingClientRect();
+      // clears the zoom buttons on the right edge of the map
+      var rightInset = 58;
+      var leftInset = 16;
+      box.style.position = 'absolute';
+      box.style.marginTop = '0';
+      box.style.top = Math.round(map.top + 12) + 'px';
+      if (side == 'left') {
+        box.style.left = Math.round(map.left + leftInset) + 'px';
+      } else {
+        box.style.right = Math.round(window.innerWidth - map.right + rightInset) + 'px';
+      }
+    }
+
+    function initForm() {
+      var row;
+      note = El('div').addClass('scalebar-properties-note').appendTo(form).hide();
+
+      row = makeRow(form);
+      labelInput = makeInput(makeCell(row, 'Distance'), 'scalebar-label-input')
+        .attr('placeholder', 'Automatic')
+        .on('change', function() {
+          update({label: labelInput.node().value.trim()});
+        });
+      unitsSelect = makeSelect(makeCell(row, 'Units'), 'scalebar-units-select',
+        [['miles', 'Miles'], ['km', 'Kilometers']])
+        .on('change', function() {
+          var changes = {units: unitsSelect.node().value};
+          var bare = getBareDistance(getScalebarRecord().label);
+          if (bare) changes.label = bare;
+          update(changes);
+        });
+
+      row = makeRow(form);
+      styleSelect = makeSelect(makeCell(row, 'Style'), 'scalebar-style-select',
+        [['a', 'Bar'], ['b', 'Ticks']])
+        .on('change', function() {
+          update({style: styleSelect.node().value});
+        });
+      dualUnitsBox = makeCheckbox(row, 'Metric + imperial', 'scalebar-dual-units')
+        .on('change', function() {
+          update({dual_units: dualUnitsBox.node().checked});
+        });
+
+      row = makeRow(form);
+      positionSelect = makeSelect(makeCell(row, 'Position'), 'scalebar-position-select',
+        positionOptions)
+        .on('change', function() {
+          update({position: positionSelect.node().value});
+        });
+      labelPositionSelect = makeSelect(makeCell(row, 'Labels'),
+        'scalebar-label-position-select', [['top', 'Above'], ['bottom', 'Below']])
+        .on('change', function() {
+          update({label_position: labelPositionSelect.node().value});
+        });
+
+      var appearance = makePanelSection(form, 'Appearance');
+
+      // Font and face menus, as in the label panel
+      row = makeRow(appearance);
+      fontSelect = El('select').attr('title', 'Font').addClass('scalebar-font-select')
+        .appendTo(makeCell(row, 'Font'))
+        .on('change', function() {
+          if (fontSelect.node().value) applyFont(fontSelect.node().value);
+        });
+      renderFontOptions();
+      fontStyleSelect = El('select').attr('title', 'Font style')
+        .addClass('scalebar-font-style-select')
+        .appendTo(makeCell(row, 'Font style'))
+        .on('change', function() {
+          if (fontStyleSelect.node().value) applyFontStyle(fontStyleSelect.node().value);
+        });
+
+      // The picker lines up with the right edge of its parent, so the row is its
+      // parent rather than the narrow color cell
+      row = makeRow(appearance);
+      var colorCell = El('div').addClass('frame-input-cell scalebar-color-cell').appendTo(row);
+      El('span').appendTo(colorCell).text('Color');
+      colorChit = El('div').addClass('label-color-chit').attr('role', 'button')
+        .on('click', function() { colorPicker.toggle(); });
+      colorInput = El('input').attr('type', 'text').attr('title', 'Scale bar color')
+        .on('change', function() {
+          var color = colorInput.node().value.trim();
+          if (!color) {
+            updateControls();
+            return;
+          }
+          if (isHexColor(color)) colorPicker.setColor(color);
+          update({color: color});
+        });
+      makeColorField(colorCell, colorChit, colorInput);
+      colorPicker = new ColorPicker(row, {
+        onPreview: showColor,
+        onChange: function(hex) {
+          showColor(hex);
+          update({color: hex});
+        }
+      });
+      fontSizeInput = makeNumberInput(makeCell(row, 'Font size'), 'font_size',
+        'scalebar-font-size');
+
+      row = makeRow(appearance);
+      barWidthInput = makeNumberInput(makeCell(row, 'Bar width'), 'bar_width',
+        'scalebar-bar-width');
+      marginInput = makeNumberInput(makeCell(row, 'Inset'), 'margin',
+        'scalebar-margin')
+        .attr('title', 'Distance from the edges of the frame, in pixels');
+
+      row = El('div').addClass('label-style-row label-panel-button-row').appendTo(form);
+      makePanelActionButton(row, 'Remove scale bar', function() {
+        runCommand('-scalebar remove', 'Remove scale bar', function() {
+          if (popup) popup.close();
+        });
+      });
+    }
+
+    function updateControls() {
+      var d = getScalebarRecord();
+      var problem;
+      if (!d || !form) return;
+      labelInput.node().value = d.label || '';
+      setSelectValue(unitsSelect, getUnitsMenuValue(d.units ||
+        internal.parseScalebarUnits(d.label || '')));
+      setSelectValue(styleSelect, d.style == 'b' || d.style == 'B' ||
+        !d.style && d.dual_units ? 'b' : 'a');
+      dualUnitsBox.node().checked = !!d.dual_units;
+      setSelectValue(positionSelect, d.position || 'top-left');
+      setSelectValue(labelPositionSelect, d.label_position || 'top');
+      fontSizeInput.node().value = formatValue(d.font_size);
+      barWidthInput.node().value = formatValue(d.bar_width);
+      marginInput.node().value = formatValue(d.margin);
+      updateFontControls(d);
+      showColor(d.color || defaultColor);
+      if (isHexColor(d.color || defaultColor)) colorPicker.setColor(d.color || defaultColor);
+      problem = getFrameProblem();
+      note.text(problem ? 'The scale bar is hidden: ' + problem + '.' : '');
+      if (problem) note.show(); else note.hide();
+    }
+
+    function showColor(color) {
+      colorInput.node().value = color || '';
+      colorChit.css('background-color', color || 'transparent');
+    }
+
+    function renderFontOptions() {
+      getInstalledFonts().forEach(function(group) {
+        var optgroup = El('optgroup').attr('label', group.name).appendTo(fontSelect);
+        group.fonts.forEach(function(fontName) {
+          El('option').attr('value', fontName).appendTo(optgroup).text(fontName);
+        });
+      });
+    }
+
+    // A scalebar with no font of its own is shown in the font it is drawn in
+    function getShownFont(d) {
+      return d.font_family || getDefaultFontName();
+    }
+
+    function updateFontControls(d) {
+      var font = getShownFont(d);
+      var shown = font ? getNearestFontStyleVariant(font, d.font_style, d.font_weight) : null;
+      if (font) {
+        setSelectValue(fontSelect, font);
+      } else {
+        fontSelect.node().selectedIndex = -1;
+      }
+      fontStyleSelect.empty();
+      getFontStyleVariants(font).forEach(function(variant) {
+        El('option').attr('value', variant.value).appendTo(fontStyleSelect).text(variant.label);
+      });
+      fontStyleSelect.node().disabled = !font;
+      if (shown) {
+        fontStyleSelect.node().value = shown.value;
+      } else {
+        fontStyleSelect.node().selectedIndex = -1;
+      }
+    }
+
+    // Keeps the current face, or the nearest one the new font has
+    function applyFont(fontName) {
+      var d = getScalebarRecord();
+      var changes = {font_family: fontName};
+      var variant = getNearestFontStyleVariant(fontName, d.font_style, d.font_weight);
+      if (variant) Object.assign(changes, getFontStyleValues(variant));
+      update(changes);
+    }
+
+    // A face belongs to a font, so a scalebar given one names the font it is
+    // drawn in
+    function applyFontStyle(value) {
+      var parts = value.split('|');
+      var changes = getFontStyleValues({style: parts[0], weight: parts[1]});
+      var d = getScalebarRecord();
+      if (!d.font_family && getDefaultFontName()) {
+        changes.font_family = getDefaultFontName();
+      }
+      update(changes);
+    }
+
+    // Regular is stored as no face at all
+    function getFontStyleValues(variant) {
+      if (variantIsRegular(variant)) {
+        return {font_style: '', font_weight: ''};
+      }
+      return {font_style: variant.style, font_weight: variant.weight};
+    }
+
+    // Applies edits to the current settings and replaces the scalebar. The
+    // units menu always applies, so it is written even when it shows the default.
+    function update(changes) {
+      var d = Object.assign({}, getScalebarRecord(), changes);
+      if (changes.style == 'a') d.dual_units = false;
+      if (changes.dual_units) d.style = 'b';
+      if (!d.units) d.units = unitsSelect.node().value;
+      runCommand(getScalebarCommand(d), 'Update scale bar', updateControls);
+    }
+
+    function makeNumberInput(cell, field, className) {
+      var input = makeInput(cell, className).attr('placeholder', 'auto');
+      input.on('change', function() {
+        var str = input.node().value.trim();
+        var o = {};
+        if (str !== '' && !(Number(str) >= 0)) {
+          updateControls();
+          return;
+        }
+        o[field] = str === '' ? '' : Number(str);
+        update(o);
+      });
+      return input;
+    }
+
+    function getFrameProblem() {
+      var frame = internal.getActiveFrame(gui.model);
+      var crs, data;
+      if (!frame) return 'there is no map frame';
+      crs = frame.layer.gui && frame.layer.gui.dynamic_crs ||
+        internal.getDatasetCRS(frame.dataset);
+      data = internal.getFrameLayerData(frame.layer, frame.dataset.arcs, crs);
+      return internal.getFurnitureFrameProblem(data);
+    }
+
+    function getScalebarRecord() {
+      var frame = internal.getActiveFrame(gui.model);
+      var lyr = frame && internal.findFrameFurnitureLayer(frame.dataset, 'scalebar');
+      return lyr ? lyr.data.getReadOnlyRecordAt(0) : null;
+    }
+
+    function runCommand(cmd, title, done) {
+      runGuiEditCommand(gui, cmd, {
+        title: title,
+        onSuccess: done,
+        onError: updateControls
+      });
+    }
+  }
+
+  function makeRow(parent, className) {
+    return El('div').addClass('label-style-row scalebar-row')
+      .addClass(className || 'scalebar-two-col').appendTo(parent);
+  }
+
+  function makeCell(row, label) {
+    var cell = El('label').addClass('frame-input-cell').appendTo(row);
+    El('span').appendTo(cell).text(label);
+    return cell;
+  }
+
+  function makeInput(parent, className) {
+    return El('input').attr('type', 'text').addClass(className).appendTo(parent);
+  }
+
+  function makeSelect(parent, className, options) {
+    var select = El('select').addClass(className).appendTo(parent);
+    options.forEach(function(o) {
+      El('option').attr('value', o[0]).appendTo(select).text(o[1]);
+    });
+    return select;
+  }
+
+  function makeCheckbox(parent, label, className) {
+    var box = El('input').attr('type', 'checkbox').addClass(className);
+    var wrapper = El('label').addClass('scalebar-checkbox').appendTo(parent);
+    box.appendTo(wrapper);
+    El('span').appendTo(wrapper).text(label);
+    return box;
+  }
+
+  // Shows a value that came from the command line even if the menu lacks it
+  function setSelectValue(select, value) {
+    var node = select.node();
+    var found = Array.prototype.some.call(node.options, function(o) {
+      return o.value == value;
+    });
+    if (!found) {
+      El('option').attr('value', value).appendTo(select).text(value);
+    }
+    node.value = value;
+  }
+
+  // The number of a single-distance label, e.g. "100" from "100 km", so the
+  // units menu can apply to it
+  function getBareDistance(label) {
+    var match = /^([\d\s.,/]*\d)\s*[^\d\s.,/]+$/.exec(String(label || '').trim());
+    return match ? match[1].trim() : '';
+  }
+
+  function getUnitsMenuValue(units) {
+    var parsed = internal.parseLabelUnits(units);
+    return parsed == 'mile' || !parsed ? 'miles' :
+      parsed == 'm' ? 'meters' :
+      parsed == 'ft' ? 'feet' : 'km';
+  }
+
+  function formatValue(val) {
+    return val === undefined || val === null ? '' : String(val);
+  }
+
   // This is a new way to handle compatibility problems between
   // interactive editing modes and other interface modes
   // (by default, interactive modes stay on when, e.g., the user clicks
@@ -34951,6 +35819,7 @@
     new PreviewMode(gui);
     new FrameResizeTool(gui);
     new FrameProperties(gui);
+    new ScalebarProperties(gui);
     gui.editToolbar = new EditToolbar(gui);
     gui.labelTool = new LabelTool(gui);
     gui.layerStyleTool = new LayerStyleTool(gui);
@@ -35151,7 +36020,8 @@
     }
 
     function clampSidebarPanelsSeparatorPosition(pageY) {
-      var pct = 100 * (pageY - 29) / (window.innerHeight - 29);
+      var rect = gui.container.findChild('.sidebar-panels').node().getBoundingClientRect();
+      var pct = 100 * (pageY - rect.top) / rect.height;
       return Math.max(15, Math.min(85, pct));
     }
   }
@@ -35582,6 +36452,7 @@
     new ImportControl(gui, importOpts);
     new ExportControl(gui);
     new LayerControl(gui);
+    new SidebarTabs(gui);
     new AddLayerLinks(gui);
     HeaderMenu();
     gui.console = new Console(gui);
@@ -35644,6 +36515,24 @@
       El('body').addClass('map-view');
       gui.console.runInitialCommands(getInitialConsoleCommands());
     });
+
+    // The layer list, opened beside the first data so that the user sees what
+    // was imported and where to go next -- once, and only for data: dismissing
+    // the splash popup without importing anything leaves the sidebar closed.
+    // Waits for any menu mode (the import dialog, while files are still loading)
+    // to close, since opening a panel would close it.
+    var layersShownForData = false;
+    gui.model.on('update', showLayersForFirstData);
+    gui.on('mode', showLayersForFirstData);
+    function showLayersForFirstData() {
+      var panels;
+      if (layersShownForData || gui.model.isEmpty() || gui.getMode()) return;
+      layersShownForData = true;
+      panels = gui.getSidebarPanels();
+      if (!panels.includes('layers')) {
+        gui.setSidebarPanels(panels.concat('layers').sort());
+      }
+    }
   };
 
 })();