mapshaper 0.7.69 → 0.7.71

package/www/mapshaper-gui.js

@@ -3053,12 +3053,12 @@
     return decimals >= 0 ? num.toFixed(decimals) : String(num);
   }
 
-  function formatNumber$3(val) {
+  function formatNumber$4(val) {
     return val + '';
   }
 
   function formatIntlNumber(val) {
-    var str = formatNumber$3(val);
+    var str = formatNumber$4(val);
     return '"' + str.replace('.', ',') + '"'; // need to quote if comma-delimited
   }
 
@@ -3607,7 +3607,7 @@
     endsWith, every, expandoBuffer, extend, extendBuffer,
     find, findMedian, findQuantile, findRankByValue, findStringPrefix,
     findValueByPct, findValueByRank, forEach, forEachProperty, format,
-    formatDateISO, formatIntlNumber, formatNumber: formatNumber$3, formatNumberForDisplay,
+    formatDateISO, formatIntlNumber, formatNumber: formatNumber$4, formatNumberForDisplay,
     formatVersionedName, formatter,
     genericSort, getArrayBounds, getGenericComparator, getKeyComparator,
     getSortedIds, getUniqueName, groupBy,
@@ -8860,30 +8860,6 @@
     }
   }
 
-  // Test if adding point p to a sequence of points (in pixel coords)
-  // would result in a polyline that deviates from a straight line by
-  // more than a given number of pixels
-  //
-  function pointExceedsTolerance(p, points, tolerance) {
-    if (points.length < 2) return false;
-    var p1 = points[0], p2, dist, angle;
-    for (var i=1; i<points.length; i++) {
-      p2 = points[i];
-      dist = Math.sqrt(geom.pointSegDistSq(p2[0], p2[1], p1[0], p1[1], p[0], p[1]));
-      if (dist > tolerance) return true;
-    }
-    return false;
-  }
-
-  function getAvgPoint(points) {
-    var x=0, y=0;
-    for (var i=0; i<points.length; i++) {
-      x += points[i][0];
-      y += points[i][1];
-    }
-    return [x/points.length, y/points.length];
-  }
-
   function setZ(lyr, z) {
     lyr.gui.source.dataset.arcs.setRetainedInterval(z);
     if (isProjectedLayer(lyr)) {
@@ -11518,9 +11494,12 @@
         }
 
         if (e.deleteVertex || e.deletePoint || copyable || e.deleteFeature ||
-            e.flipLabel) {
+            e.flipLabel || e.boldText) {
 
           addMenuLabel('actions');
+          if (e.boldText) {
+            addMenuItem(e.boldText.label, e.boldText.run);
+          }
           if (e.deleteVertex) {
             addMenuItem('delete vertex', e.deleteVertex);
           }
@@ -12904,6 +12883,11 @@
     if (cmd.name == 'style' || cmd.name == 'svg-style') {
       return getStyleCullInfo(opts, isStyleProperty);
     }
+    // Adding a label or a labeled copy of a layer is not a style edit, and can
+    // not be superseded by one.
+    if (cmd.name == 'labels' && !('coordinates' in opts) && !opts.no_replace) {
+      return getStyleCullInfo(getLabelStyleOpts(opts), isStyleProperty);
+    }
     if (cmd.name == 'classify') {
       return getClassifyCullInfo(opts);
     }
@@ -12923,6 +12907,16 @@
     };
   }
 
+  // -labels text= writes the label-text property.
+  function getLabelStyleOpts(opts) {
+    var o = Object.assign({}, opts);
+    if ('text' in o) {
+      o['label-text'] = o.text;
+      delete o.text;
+    }
+    return o;
+  }
+
   function getStyleFields$2(opts, isStyleProperty) {
     var fields = [];
     Object.keys(opts).forEach(function(name) {
@@ -13448,10 +13442,10 @@
 
     gui.on('path_extend', function(e) {
       var redo = function() {
-        gui.dispatchEvent('redo_path_extend', {p: e.p, shapes: e.shapes2});
+        gui.dispatchEvent('redo_path_extend', {points: e.points, shapes: e.shapes2});
       };
       var undo = function() {
-        gui.dispatchEvent('undo_path_extend', {shapes: e.shapes1});
+        gui.dispatchEvent('undo_path_extend', {points: e.points, shapes: e.shapes1});
       };
       addHistoryState(undo, redo);
     });
@@ -13921,6 +13915,11 @@
   var SOFT_BREAK = '<wbr>';
   var SOFT_BREAK_RXP = /<wbr>/gi;
 
+  // A bold stretch, which is the other markup label text carries. See
+  // svg-label-markup.mjs.
+  var BOLD_OPEN = '<b>';
+  var BOLD_CLOSE = '</b>';
+
   // How a label lays out its line breaks, which is not the same for the two kinds.
   // An anchored label stacks its lines with <tspan>. A path label joins them with
   // a space, because a <tspan> inside a <textPath> advances along the curve
@@ -13956,6 +13955,66 @@
     return {text: text, breaks: breaks};
   }
 
+  // Data value -> {text, breaks, bold}: the string the user edits, the offsets
+  // in it where the stored value has a soft break, and its bold stretches as
+  // [start, end) offsets into it (see gui-label-bold.mjs).
+  //
+  // The two kinds of markup are independent -- a bold stretch can cross a soft
+  // break, and a soft break can sit at either end of one -- so the bold is read
+  // first and its offsets are moved as the soft breaks come out.
+  function readLabelValue(val) {
+    var str = val === null || val === undefined ? '' : String(val).replace(ANY_NEWLINE, '\n');
+    var o = internal.svg.parseBoldMarkup(str);
+    var starts = [], m;
+    SOFT_BREAK_RXP.lastIndex = 0;
+    while ((m = SOFT_BREAK_RXP.exec(o.text))) starts.push(m.index);
+    return {
+      text: o.text.replace(SOFT_BREAK_RXP, ''),
+      breaks: starts.map(function(start, i) {
+        return start - i * SOFT_BREAK.length;
+      }),
+      bold: internal.svg.normalizeBoldRanges(o.bold.map(function(r) {
+        return [removeSoftBreakOffset(r[0], starts), removeSoftBreakOffset(r[1], starts)];
+      }))
+    };
+  }
+
+  // An offset into text with soft breaks in it -> the same place once they are
+  // removed. One that falls inside a marker goes to its start.
+  function removeSoftBreakOffset(x, starts) {
+    var shift = 0;
+    for (var i = 0; i < starts.length && starts[i] < x; i++) {
+      if (x < starts[i] + SOFT_BREAK.length) return starts[i] - shift;
+      shift += SOFT_BREAK.length;
+    }
+    return x - shift;
+  }
+
+  // The string the user edits, its soft breaks and its bold ranges -> the value
+  // to store, with both kinds of markup written in. Where they meet, a bold
+  // stretch closes before a soft break and opens after one, so that the break
+  // is never inside a pair of tags it is not part of.
+  function writeLabelValue(text, breaks, bold) {
+    var marks = [];
+    (bold || []).forEach(function(r) {
+      marks.push({pos: r[0], order: 2, str: BOLD_OPEN});
+      marks.push({pos: r[1], order: 0, str: BOLD_CLOSE});
+    });
+    (breaks || []).forEach(function(pos) {
+      marks.push({pos: pos, order: 1, str: SOFT_BREAK});
+    });
+    if (marks.length === 0) return text;
+    marks.sort(function(a, b) {
+      return a.pos - b.pos || a.order - b.order;
+    });
+    var out = '', prev = 0;
+    marks.forEach(function(mark) {
+      out += text.substring(prev, mark.pos) + mark.str;
+      prev = mark.pos;
+    });
+    return out + text.substring(prev);
+  }
+
   // The string the user edits, plus soft breaks at @breaks (ascending offsets
   // into it) -> the same string with the markers written in.
   function insertSoftBreaks(text, breaks) {
@@ -14136,6 +14195,29 @@
     return Math.min(renderedIndex, length);
   }
 
+  // The word a double-click at edited index @i selects, as [start, end), or an
+  // empty range at @i for a click between words. A click on the right half of a
+  // word's last letter lands on the index after it, which is still that word.
+  //
+  // Hyphens and apostrophes count as part of a word, so that "cease-fire" and
+  // "Israel's" are one word each, as they are one name on the map.
+  function getWordRange(text, i) {
+    var at = isWordChar(text.charAt(i)) ? i : isWordChar(text.charAt(i - 1)) ? i - 1 : -1;
+    var a, b;
+    if (at < 0) return [i, i];
+    a = at;
+    b = at + 1;
+    while (a > 0 && isWordChar(text.charAt(a - 1))) a--;
+    while (b < text.length && isWordChar(text.charAt(b))) b++;
+    return [a, b];
+  }
+
+  var WORD_CHAR_RXP = /[\p{L}\p{N}\p{M}'\u2019-]/u;
+
+  function isWordChar(c) {
+    return !!c && WORD_CHAR_RXP.test(c);
+  }
+
   // Strips the placeholder back out, so that a value read off a rendered node is
   // not mistaken for text the user typed.
   function stripPlaceholder(str) {
@@ -14200,7 +14282,7 @@
   function getAddLabelCommand(coords, opts) {
     var o = opts || {};
     var target = o.target || {mode: 'new', newLayerName: DEFAULT_LABEL_LAYER_NAME};
-    var parts = ['-add-label', 'coordinates=' + formatCoords(coords)];
+    var parts = ['-labels', 'coordinates=' + formatCoords(coords)];
     if (o.text) {
       // A real newline would break the command parser, so encodeLabelText()
       // writes the two-character escape the label renderer also accepts.
@@ -14267,7 +14349,7 @@
   //   id:     feature id of the label
   //   target: layer name, or null to use the current target
   function getLabelPlacementCommand(opts) {
-    var parts = ['-style', 'label-start-offset=' + opts.offset];
+    var parts = ['-labels', 'label-start-offset=' + opts.offset];
     if (opts.anchor) {
       parts.push('text-anchor=' + opts.anchor);
     }
@@ -14287,7 +14369,7 @@
   // with and the position goes -- "stop taking a position, carry these offsets
   // instead", which is one command because it is one edit.
   //
-  // label-pos= is always written, even by a label that has none. -style reads an
+  // label-pos= is always written, even by a label that has none. -labels reads an
   // empty value as "remove this", and removing a property no record carries adds
   // nothing to the layer, so there is nothing to be gained by asking first.
   //
@@ -14297,7 +14379,7 @@
   //   target: layer name, or null to use the current target
   //   via:    (optional) the callout-via the text carried with it
   function getLabelOffsetCommand(opts) {
-    var parts = ['-style', 'dx=' + opts.dx, 'dy=' + opts.dy,
+    var parts = ['-labels', 'dx=' + opts.dx, 'dy=' + opts.dy,
       'text-anchor=' + opts.anchor, 'label-pos='];
     if (opts.via) parts.push('callout-via=' + quoteCommandValue(opts.via));
     parts.push('ids=' + opts.id);
@@ -14308,16 +14390,16 @@
   // The command a drag on one of a label's handles writes, run once on release.
   //
   //   values: {field: value}, where '' removes the field -- which is what
-  //     -style reads an empty value as, and how a handle goes back to automatic
+  //     -labels reads an empty value as, and how a handle goes back to automatic
   //   id:     feature id of the label
   //   opts:
   //     target: layer name, or null to use the current target
   //     text:   (optional) rewrapped label-text, with real newlines and soft
-  //       breaks. A second -style in the same string, so that a new width and
+  //       breaks. A second -labels in the same string, so that a new width and
   //       the lines it breaks into are one undo step.
   function getLabelStyleCommand(values, id, opts) {
     var o = opts || {};
-    var parts = ['-style'];
+    var parts = ['-labels'];
     Object.keys(values).forEach(function(name) {
       var val = values[name];
       parts.push(name + '=' + (val === '' ? '' : quoteCommandValue(String(val))));
@@ -14339,7 +14421,7 @@
   function getLabelTextCommand(text, id, target) {
     // A real newline would break the command parser, so encodeLabelText() writes
     // the two-character escape that the label renderer also accepts.
-    var parts = ['-style', 'label-text=' + quoteCommandValue(encodeLabelText(text))];
+    var parts = ['-labels', 'text=' + quoteCommandValue(encodeLabelText(text))];
     parts.push('ids=' + id);
     if (target) parts.push('target=' + quoteCommandValue(target));
     return parts.join(' ');
@@ -15454,6 +15536,19 @@
     return cachedFontStyles[fontName];
   }
 
+  // Whether words in @fontName can be set in bold: a bold the browser
+  // synthesizes is not one the Node measurer can match, so wrapping and the
+  // path-fit check would disagree with what is drawn. A font that cannot be
+  // identified is given the benefit of the doubt -- the browser finds whatever
+  // bold it has, and there is nothing to check against.
+  function fontHasBoldFace(fontName) {
+    var variants = fontName ? getFontStyleVariants(fontName) : null;
+    if (!variants || variants.length === 0) return true;
+    return variants.some(function(variant) {
+      return Number(variant.weight) >= 600;
+    });
+  }
+
   // The installed font the browser draws unfonted text in, or '' if it cannot
   // be worked out.
   //
@@ -15511,6 +15606,11 @@
     return drawnFont || '';
   }
 
+  // Whether @fontName is one of the fonts above and installed here.
+  function isInstalledFont(fontName) {
+    return getInstalledFontNames().indexOf(fontName) > -1;
+  }
+
   function getInstalledFontNames() {
     var names = [];
     getInstalledFonts().forEach(function(group) {
@@ -15879,7 +15979,7 @@
           var tile = El('div')
             .addClass('label-color-preset')
             .attr('role', 'button')
-            .attr('title', color)
+            .attr('aria-label', color)
             .appendTo(rowEl)
             .css('background-color', color);
           if (row.length == 16 && i == 8) tile.addClass('label-color-preset-group-start');
@@ -16356,7 +16456,7 @@
         // in a menu that is only on screen while it is being used, and a
         // destructive action is better for waiting until intent is shown.
         El('div').addClass('label-saved-style-delete').attr('role', 'button')
-          .attr('title', 'Delete this ' + opts.styleLabel)
+          .attr('aria-label', 'Delete this ' + opts.styleLabel)
           .appendTo(itemEl).html('&times;')
           .on('click', function() {
             deleteStyle(item);
@@ -16429,7 +16529,7 @@
   //                 Escape. Whether that means giving up the keyboard is the
   //                 caller's question: the field cannot know what else wants it.
   //   decimals      how finely a typed size is kept (default 1)
-  //   title         tooltip for the field
+  //   title         the field's accessible name (not a tooltip)
   function SizeField(parent, opts) {
     var o = Object.assign({min: 1, max: 999, step: 1, bigStep: 10}, opts || {});
     var box = El('div').addClass('size-field').appendTo(parent);
@@ -16442,7 +16542,7 @@
     var dirty = false; // holds typing that has not been committed
     var disabled = false;
 
-    if (o.title) input.attr('title', o.title);
+    if (o.title) input.attr('aria-label', o.title);
 
     // While the caret is in this field the keyboard belongs to it. Without this
     // the GUI's own handlers see the keystrokes: Escape would disarm the tool,
@@ -16616,6 +16716,15 @@
       !/^(button|checkbox|radio|submit)$/.test(node.type);
   }
 
+  // Whether clicking this node puts a native menu on screen, which must then be
+  // left holding the focus: a menu opens on mousedown, so a panel that lets go of
+  // focus on the click that follows closes it again -- it flashes open and shut.
+  // OPTION counts because a browser that reports the chosen option as the click
+  // target is reporting a menu interaction either way.
+  function opensAMenu(node) {
+    return !!node && /^(SELECT|OPTION)$/.test(node.nodeName);
+  }
+
   // While the caret is in one of @panel's fields, the keyboard belongs to that
   // field. Without this the GUI's own handlers see the keystrokes: a Backspace
   // typed into a field takes back the last knot of a curve being drawn, and an
@@ -16723,6 +16832,53 @@
     return section;
   }
 
+  // A switch: a track with a knob that sits left when off and right when on,
+  // which is the direction users expect and the only thing that says which
+  // state is which without a label for each. A third state says that the
+  // features it is asking about disagree -- the knob sits over the join of a
+  // half-and-half track, which is the only control that has to show "some of
+  // them" rather than a value. A section's switch goes in its heading row, and
+  // the section shows only its heading while it is off (the .collapsed class).
+  //
+  // role=checkbox rather than switch, which is what it looks like: 'mixed' is a
+  // legal aria-checked value for a checkbox and not for a switch, and a switch
+  // reporting a mixed selection as unchecked would be telling a screen reader
+  // the one thing the third state exists to avoid saying.
+  //
+  // opts.onChange(on)  the switch was clicked
+  // opts.title          the switch's accessible name (not a tooltip)
+  // opts.className
+  function makePanelToggle(parent, opts) {
+    var track = El('div').addClass('label-toggle').attr('role', 'checkbox').appendTo(parent);
+    var state = 'off';
+    if (opts.className) track.addClass(opts.className);
+    var disabled = false;
+    El('div').addClass('label-toggle-knob').appendTo(track);
+    if (opts.title) track.attr('aria-label', opts.title);
+    // A click on a mixed switch turns everything on. It is the convention, and
+    // it is the reading that reaches a state the switch can describe: the next
+    // click then turns everything off, so both are one click away.
+    track.on('click', function() {
+      if (disabled) return;
+      opts.onChange(state != 'on');
+    });
+    return {
+      // val: 'on', 'off' or 'mixed'; anything else reads as off
+      setState: function(val) {
+        state = val == 'on' || val == 'mixed' ? val : 'off';
+        track.classed('on', state == 'on')
+          .classed('mixed', state == 'mixed')
+          .attr('aria-checked', state == 'mixed' ? 'mixed' :
+            state == 'on' ? 'true' : 'false');
+      },
+      setDisabled: function(off) {
+        disabled = !!off;
+        track.classed('disabled', disabled)
+          .attr('aria-disabled', disabled ? 'true' : 'false');
+      }
+    };
+  }
+
   // Deliberately not focusable: the GUI is pointer-only, so a tab stop here
   // would lead into a control the keyboard cannot then operate. See the focus
   // note in page.css.
@@ -16783,7 +16939,7 @@
   // 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.
+  // percent sign says what it is.
   //
   // Returns the field's box; the opacity input is made by makeOpacityInput().
   function makeColorOpacityField(parent, chit, input, opacityOpts) {
@@ -16799,6 +16955,8 @@
   // 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
+  // opts.noOpacity        a colour with no opacity of its own, like a pattern's,
+  //                       which fill-opacity fades along with its background
   //
   // control.aside is the row's narrow column, empty, for a field that belongs
   // beside the colour -- a stroke's width, say.
@@ -16830,16 +16988,20 @@
         control.picker.toggle();
       });
     control.input = El('input').attr('type', 'text')
-      .attr('title', opts.label + ' color')
+      .attr('aria-label', opts.label + ' color')
       .on('change', function() {
         var color = control.input.node().value.trim();
         if (isHexColor(color)) control.picker.setColor(color);
         opts.onColor(color);
       });
-    control.opacity = makeColorOpacityField(colorCell, control.chit, control.input, {
-      onSet: opts.onOpacity,
-      revert: opts.revert
-    }).opacity;
+    if (opts.noOpacity) {
+      makeColorField(colorCell, control.chit, control.input);
+    } else {
+      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
@@ -16862,7 +17024,7 @@
   // opts.revert()        it was not, so put back what the field was showing
   function makeOpacityInput(parent, opts) {
     var input = El('input').attr('type', 'text').addClass('label-opacity-input')
-      .attr('title', 'Opacity, 0-100%')
+      .attr('aria-label', 'Opacity, 0-100%')
       .appendTo(parent)
       .on('change', function() {
         var val = parseOpacityValue(input.node().value);
@@ -16879,13 +17041,13 @@
   //
   // The style panel is worth having open before there is anything to point it at:
   // pick a font, then place labels in it. Values set with nothing selected are
-  // held here rather than written to a layer, and -add-label writes them when a
+  // held here rather than written to a layer, and -labels coordinates= writes them when a
   // label finally exists -- so this is a tool default, not data, and it never
   // needs its own undo step.
   //
   // See docs/development/label-tool-design.md.
 
-  // The style properties -add-label accepts. A panel control whose property is
+  // The style properties -labels accepts. A panel control whose property is
   // missing from this list would appear to do nothing when set with no selection,
   // so the list is checked rather than assumed.
   var NEW_LABEL_STYLE_FIELDS = [
@@ -16907,7 +17069,7 @@
   //
   // A blank or zero value removes the field instead of setting it: that is how
   // the panel says "no icon" (icon='', icon-size=0) and "no inline css", and
-  // carrying those through to -add-label would write properties that mean
+  // carrying those through to -labels would write properties that mean
   // nothing.
   function mergeStyleValues(style, values) {
     var out = Object.assign({}, style);
@@ -16933,7 +17095,7 @@
   // somewhere and typing looks like it should do, and it is the position an icon
   // is drawn to sit behind.
   //
-  // Only the tool defaults this. -add-label with no position still creates a
+  // Only the tool defaults this. -labels coordinates= with no position still creates a
   // label without one, so the default is a choice this tool makes and passes on
   // explicitly, not a meaning the command gives to its absence.
   var DEFAULT_NEW_LABEL_STYLE = {'label-pos': 'c'};
@@ -17247,13 +17409,17 @@
 
   // Offsets into @text (real newlines, no soft breaks) where a line starts
   // because it was wrapped, in ascending order.
-  function getSoftBreaks(text, rec) {
+  //
+  // @bold: the text's bold stretches, as [start, end) offsets into it. A bold
+  // word is wider, so it moves the breaks.
+  function getSoftBreaks(text, rec, bold) {
     var width = getLabelWrapWidth(rec);
     var key, breaks;
     if (!width || !text) return [];
-    key = getWrapKey(text, rec);
+    bold = bold || [];
+    key = getWrapKey(text, rec, bold);
     if (cache$2.has(key)) return cache$2.get(key);
-    breaks = measureSoftBreaks(text, rec, width);
+    breaks = measureSoftBreaks(text, rec, width, bold);
     if (cache$2.size >= CACHE_LIMIT) cache$2.clear();
     cache$2.set(key, breaks);
     return breaks;
@@ -17263,29 +17429,30 @@
   // unchanged when neither the old value nor the new one has a soft break, so
   // that a label that does not wrap keeps the line breaks it was written with.
   function rewrapLabelValue(value, rec) {
-    var o = readSoftBreaks(value);
-    var breaks = getSoftBreaks(o.text, rec);
+    var o = readLabelValue(value);
+    var breaks = getSoftBreaks(o.text, rec, o.bold);
     if (sameSoftBreaks(o.breaks, breaks)) return value;
-    return encodeLabelText(insertSoftBreaks(o.text, breaks));
+    return encodeLabelText(writeLabelValue(o.text, breaks, o.bold));
   }
 
   function clearWrapCache() {
     cache$2.clear();
   }
 
-  function getWrapKey(text, rec) {
+  function getWrapKey(text, rec, bold) {
     var parts = [text];
     WRAP_FIELDS.forEach(function(name) {
       var val = rec[name];
       parts.push(val === null || val === undefined ? '' : String(val));
     });
     parts.push(rec['class'] || '');
+    parts.push(bold.join(';'));
     return parts.join('\u0000');
   }
 
-  function measureSoftBreaks(text, rec, width) {
+  function measureSoftBreaks(text, rec, width, bold) {
     var w = getWrapper();
-    var style, fontSize, node, range;
+    var style, fontSize, pieces, range;
     if (!w) return [];
     style = getLabelFontStyle(w, rec);
     if (!style) return [];
@@ -17293,15 +17460,15 @@
       w.div.style[name] = style[name] || '';
     });
     w.div.style.width = width + 'px';
-    w.div.textContent = text;
-    node = w.div.firstChild;
+    pieces = writeRuns(w.div, text, bold);
     fontSize = parseFloat(style.fontSize) || 12;
     range = document.createRange();
     var breaks = findSoftBreaks(text, function(i) {
+      var piece = findPiece(pieces, i);
       var end = isHighSurrogate(text.charCodeAt(i)) ? i + 2 : i + 1;
       var r;
-      range.setStart(node, i);
-      range.setEnd(node, Math.min(end, text.length));
+      range.setStart(piece.node, i - piece.start);
+      range.setEnd(piece.node, Math.min(end, piece.end) - piece.start);
       r = range.getBoundingClientRect();
       return r.height > 0 ? r.top : null;
     }, fontSize * LINE_HEIGHT / 2);
@@ -17309,6 +17476,35 @@
     return breaks;
   }
 
+  // Lays @text out in @div a run at a time, the bold ones in bold spans, and
+  // returns each run's text node with the offsets it covers: [{node, start,
+  // end}]. Offsets in the text become offsets in one of these nodes.
+  function writeRuns(div, text, bold) {
+    var pos = 0;
+    div.textContent = '';
+    return internal.svg.getBoldRuns(text, bold, 0, text.length).map(function(run) {
+      var node = document.createTextNode(run.text);
+      var span;
+      if (run.bold) {
+        span = document.createElement('span');
+        span.style.fontWeight = internal.svg.LABEL_BOLD_WEIGHT;
+        span.appendChild(node);
+        div.appendChild(span);
+      } else {
+        div.appendChild(node);
+      }
+      pos += run.text.length;
+      return {node: node, start: pos - run.text.length, end: pos};
+    });
+  }
+
+  function findPiece(pieces, i) {
+    for (var j = 0; j < pieces.length; j++) {
+      if (i < pieces[j].end) return pieces[j];
+    }
+    return pieces[pieces.length - 1];
+  }
+
   function isHighSurrogate(c) {
     return c >= 0xD800 && c <= 0xDBFF;
   }
@@ -17359,6 +17555,80 @@
     return wrapper;
   }
 
+  // Default sizes and colours of the label tool's anchor symbols, which differ by
+  // shape: a star or a ring at the size of a circle reads as smaller, and the NYT
+  // star is a logo, drawn in its own red.
+  var iconDefaults = {
+    circle: {size: 5},
+    square: {size: 5},
+    star: {size: 8},
+    ring: {size: 8},
+    'nyt-star': {size: 14, color: '#cc0000'}
+  };
+  var fallbackSize = 5;
+
+  function getDefaultIconSize(shape) {
+    var o = iconDefaults[shape];
+    return o ? o.size : fallbackSize;
+  }
+
+  // '' for a shape drawn in whatever colour the label gives it.
+  function getDefaultIconColor(shape) {
+    var o = iconDefaults[shape];
+    return o && o.color || '';
+  }
+
+  // The icon-size and icon-color to write when labels whose symbol is @prevShape
+  // ('' for none, or for a selection of mixed shapes) are given @shape, from the
+  // @size and @color they share. A missing size is '' or 0, and a colour of ''
+  // is none; null is a colour the labels do not agree on, which is left alone.
+  //
+  // A value that is the old shape's default follows the shape to its own
+  // default, and a value the user chose is kept -- so switching shapes resizes a
+  // symbol nobody sized, and never undoes a size somebody set. The colour is
+  // returned only if it changes, as '' to remove it.
+  function getIconShapeChange(shape, prevShape, size, color) {
+    var out = {};
+    var sizeVal = Number(size);
+    var prevColor = getDefaultIconColor(prevShape);
+    var nextColor = getDefaultIconColor(shape);
+    if (!(sizeVal > 0) || prevShape && sizeVal == getDefaultIconSize(prevShape)) {
+      out.size = getDefaultIconSize(shape);
+    } else {
+      out.size = sizeVal;
+    }
+    if (color !== null && sameColor$1(color, prevColor) && !sameColor$1(color, nextColor)) {
+      out.color = nextColor;
+    }
+    return out;
+  }
+
+  function sameColor$1(a, b) {
+    return String(a || '').toLowerCase() == String(b || '').toLowerCase();
+  }
+
+  // Features offered only to people at The New York Times, who are the ones with
+  // its NYTFranklin typeface installed. This is a convenience, not access
+  // control: anything gated here must still render for everyone, because a map
+  // made with it can be opened anywhere.
+  //
+  // ?nyt=on or ?nyt=off in the page URL overrides the check, so that the gated
+  // features can be tested (and hidden) on any machine.
+  var NYT_FONT = 'NYTFranklin';
+  var cached;
+
+  function isNytUser() {
+    if (cached === undefined) cached = detectNytUser();
+    return cached;
+  }
+
+  function detectNytUser() {
+    var flag = GUI.getUrlVars().nyt;
+    if (flag == 'on' || flag === true) return true;
+    if (flag == 'off' || flag === false) return false;
+    return isInstalledFont(NYT_FONT);
+  }
+
   var fontField = 'font-family';
   var fontSizeField = 'font-size';
   var fontStyleField = 'font-style';
@@ -17391,7 +17661,6 @@
   var defaultFontWeight = '400';
   var defaultLabelColor = '#000000';
   var defaultIconColor = '#000000';
-  var defaultIconSize = 5;
   // The width a halo is switched on at: past the edge of the glyphs, so a
   // stroke of twice this.
   var defaultHaloWidth = 2;
@@ -17464,6 +17733,10 @@
     name: 'star'
   }, {
     name: 'ring'
+  }, {
+    name: 'nyt-star',
+    title: 'NYT star',
+    nytOnly: true
   }];
   var defaultIconShape = 'circle';
   // Alignment writes label-align rather than text-anchor, because text-anchor
@@ -17529,14 +17802,15 @@
     elbow: '<path d="M3.5 12.5L8 4.5H13"></path>',
     curve: '<path d="M3.5 12.5Q4.5 4.5 12.5 4"></path>',
     none: '<path d="M3 8H13"></path>',
-    arrow: '<path d="M6.7 8H13"></path><path class="fill" d="M2.5 8L8.53 5.57V10.43Z"></path>',
+    arrow: '<path d="M6.84 8H13"></path><path class="fill" d="M2.5 8L8.7 6.05V9.95Z"></path>',
     'open-arrow': '<path d="M3.2 8H13"></path><path d="M7.38 5.07L3.2 8L7.38 10.93"></path>'
   };
   var iconButtonSymbols = {
     circle: '<circle cx="8" cy="8" r="4.25"></circle>',
     square: '<rect x="4" y="4" width="8" height="8"></rect>',
     ring: '<circle cx="8" cy="8" r="3.8"></circle>',
-    star: '<path d="M8 3.2l1.18 2.92 3.14.22-2.42 2 .76 3.06L8 9.75 5.34 11.4l.76-3.06-2.42-2 3.14-.22L8 3.2z"></path>'
+    star: '<path d="M8 3.2l1.18 2.92 3.14.22-2.42 2 .76 3.06L8 9.75 5.34 11.4l.76-3.06-2.42-2 3.14-.22L8 3.2z"></path>',
+    'nyt-star': '<polygon transform="scale(0.4)" points="19.98 5.72 23.15 11.76 29.45 9.15 27.99 15.82 34.5 17.86 29.1 22.03 32.76 27.78 25.95 27.5 25.06 34.27 20.01 29.67 14.98 34.28 14.08 27.52 7.26 27.82 10.92 22.06 5.5 17.9 12 15.84 10.53 9.18 16.84 11.77"></polygon>'
   };
 
   function LabelTool(gui) {
@@ -17551,6 +17825,7 @@
     // The shape the toggle turns back on, so that switching a symbol off and on
     // again does not silently change a star into a circle.
     var lastIconShape = defaultIconShape;
+    var shownIconTypes = null;
     // Likewise the halo's width, which is what switching one off removes.
     var lastHaloWidth = defaultHaloWidth;
     // And the callout's shape.
@@ -17684,7 +17959,7 @@
       // 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() {
+      fontSelect = El('select').attr('aria-label', 'Font').appendTo(fontRow).on('change', function() {
         if (fontSelect.node().value) {
           applyFont(fontSelect.node().value);
         }
@@ -17692,7 +17967,7 @@
 
       var styleSizeRow = El('div').addClass('label-style-row label-split-row').appendTo(textSection);
       var fontStyleRow = El('div').addClass('label-split-cell label-font-style-row').appendTo(styleSizeRow);
-      fontStyleSelect = El('select').attr('title', 'Font style').appendTo(fontStyleRow).on('change', function() {
+      fontStyleSelect = El('select').attr('aria-label', 'Font style').appendTo(fontStyleRow).on('change', function() {
         if (fontStyleSelect.node().value) {
           applyFontStyleVariant(fontStyleSelect.node().value);
         }
@@ -17718,7 +17993,7 @@
       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');
+      colorInput = El('input').attr('type', 'text').attr('aria-label', 'Text color');
       var textColorField = addColorOpacityField(textColorCell, colorChit, colorInput, applyLabelOpacity);
       colorFieldBox = textColorField.box;
       opacityInput = textColorField.opacity;
@@ -17751,7 +18026,7 @@
             applyLabelAlign(item.name);
           })
           .attr('data-align', item.name)
-          .attr('title', item.title);
+          .attr('aria-label', item.title);
         alignBtns[item.name] = btn;
         appendAlignButtonSymbol(btn, item.name);
       });
@@ -17780,7 +18055,7 @@
       // spacing sits above.
       haloSection = addSection('Halo');
       var haloTitle = haloSection.findChild('.label-style-section-title');
-      haloToggle = makeToggle(haloTitle, {
+      haloToggle = makePanelToggle(haloTitle, {
         title: 'Draw a halo around the text',
         className: 'label-halo-toggle',
         onChange: setHaloOn
@@ -17790,7 +18065,7 @@
       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');
+      haloColorInput = El('input').attr('type', 'text').attr('aria-label', 'Halo color');
       var haloColorField = addColorOpacityField(haloColorCell, haloColorChit, haloColorInput, applyHaloOpacity);
       haloColorFieldBox = haloColorField.box;
       haloOpacityInput = haloColorField.opacity;
@@ -17831,7 +18106,7 @@
       // a label with no icon: nothing to apply it to.
       iconSection = addSection('Icon');
       var iconTitle = iconSection.findChild('.label-style-section-title');
-      iconToggle = makeToggle(iconTitle, {
+      iconToggle = makePanelToggle(iconTitle, {
         title: 'Draw a symbol at the label anchor',
         className: 'label-icon-toggle',
         onChange: setIconOn
@@ -17841,12 +18116,12 @@
       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) {
+      getShownIconTypes().forEach(function(icon) {
         var btn = makePanelButton(iconGroup, '', function() {
             applyIcon(icon.name);
           })
           .attr('data-icon', icon.name)
-          .attr('title', icon.name);
+          .attr('aria-label', icon.title || icon.name);
         iconBtns[icon.name] = btn;
         appendIconButtonSymbol(btn, icon.name);
       });
@@ -17855,7 +18130,7 @@
       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');
+      iconColorInput = El('input').attr('type', 'text').attr('aria-label', 'Symbol color');
       var iconColorField = addColorOpacityField(iconColorCell, iconColorChit, iconColorInput, applyIconOpacity);
       iconColorFieldBox = iconColorField.box;
       iconOpacityInput = iconColorField.opacity;
@@ -17903,7 +18178,7 @@
             applyLabelPosition(pos);
           })
           .attr('data-position', pos)
-          .attr('title', pos);
+          .attr('aria-label', pos);
       });
 
 
@@ -17913,7 +18188,7 @@
             setLabelPositionMode(gui, item.name, getPositionModeKind());
           })
           .attr('data-drag-mode', item.name)
-          .attr('title', item.title);
+          .attr('aria-label', item.title);
       });
 
       presetControl = new StylePresetControl(panel, {
@@ -17938,7 +18213,7 @@
     // the map rather than typed here. See docs/development/text-annotation-design.md.
     function initCalloutSection() {
       calloutSection = addSection('Callout');
-      calloutToggle = makeToggle(calloutSection.findChild('.label-style-section-title'), {
+      calloutToggle = makePanelToggle(calloutSection.findChild('.label-style-section-title'), {
         title: 'Draw a line from the label anchor to its text',
         className: 'label-callout-toggle',
         onChange: setCalloutOn
@@ -17998,7 +18273,7 @@
       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');
+      calloutColorInput = El('input').attr('type', 'text').attr('aria-label', 'Callout color');
       var calloutColorField = addColorOpacityField(colorCell, calloutColorChit, calloutColorInput, applyCalloutOpacity);
       calloutColorFieldBox = calloutColorField.box;
       calloutOpacityInput = calloutColorField.opacity;
@@ -18022,7 +18297,7 @@
       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')
+        .attr('aria-label', 'Space between the callout and the anchor, in px')
         .attr('placeholder', 'auto')
         .attr('data-placeholder', 'auto')
         .appendTo(gapCell)
@@ -18034,7 +18309,7 @@
     function makeCalloutButton(parent, item, action) {
       var btn = makePanelButton(parent, '', action)
         .attr('data-callout', item.name)
-        .attr('title', item.title);
+        .attr('aria-label', item.title);
       El('<svg class="label-callout-symbol" viewBox="0 0 16 16" aria-hidden="true">' +
         calloutButtonSymbols[item.name] + '</svg>').appendTo(btn);
       return btn;
@@ -18059,48 +18334,6 @@
       return makePanelSection(panel, title, opts);
     }
 
-    // A switch: a track with a knob that sits left when off and right when on,
-    // which is the direction users expect and the only thing that says which
-    // state is which without a label for each. A third state says that the
-    // labels it is asking about disagree -- the knob sits over the join of a
-    // half-and-half track, which is the panel's only control that has to show
-    // "some of them" rather than a value.
-    //
-    // role=checkbox rather than switch, which is what it looks like: 'mixed' is a
-    // legal aria-checked value for a checkbox and not for a switch, and a switch
-    // reporting a mixed selection as unchecked would be telling a screen reader
-    // the one thing the third state exists to avoid saying.
-    function makeToggle(parent, opts) {
-      var track = El('div').addClass('label-toggle').attr('role', 'checkbox').appendTo(parent);
-      var state = 'off';
-      if (opts.className) track.addClass(opts.className);
-      var disabled = false;
-      El('div').addClass('label-toggle-knob').appendTo(track);
-      if (opts.title) track.attr('title', opts.title);
-      // A click on a mixed switch turns everything on. It is the convention, and
-      // it is the reading that reaches a state the switch can describe: the next
-      // click then turns everything off, so both are one click away.
-      track.on('click', function() {
-        if (disabled) return;
-        opts.onChange(state != 'on');
-      });
-      return {
-        // val: 'on', 'off' or 'mixed'; anything else reads as off
-        setState: function(val) {
-          state = val == 'on' || val == 'mixed' ? val : 'off';
-          track.classed('on', state == 'on')
-            .classed('mixed', state == 'mixed')
-            .attr('aria-checked', state == 'mixed' ? 'mixed' :
-              state == 'on' ? 'true' : 'false');
-        },
-        setDisabled: function(off) {
-          disabled = !!off;
-          track.classed('disabled', disabled)
-            .attr('aria-disabled', disabled ? 'true' : 'false');
-        }
-      };
-    }
-
     function addColorOpacityField(parent, chit, input, onOpacity) {
       return makeColorOpacityField(parent, chit, input, {
         onSet: onOpacity,
@@ -18303,8 +18536,10 @@
       // rest of the selection has nothing to compare.
       var iconIds = getIconValueIds();
       var iconVal = getCommonValue(iconIds, iconField);
-      var iconSize = getShownValue(iconIds, iconSizeField, {useDefault: true, defaultValue: defaultIconSize});
-      var iconColor = getShownValue(iconIds, iconColorField, {useDefault: true, defaultValue: defaultIconColor});
+      var iconShape = iconVal || lastIconShape;
+      var iconSize = getShownValue(iconIds, iconSizeField, {useDefault: true, defaultValue: getDefaultIconSize(iconShape)});
+      var iconColor = getShownValue(iconIds, iconColorField, {useDefault: true,
+        defaultValue: getDefaultIconColor(iconShape) || defaultIconColor});
       var iconOpacity = getShownValue(iconIds, iconOpacityField, {useDefault: true, defaultValue: 1});
       var haloIds = getHaloValueIds();
       var haloWidth = getShownValue(haloIds, haloWidthField, {useDefault: true, defaultValue: lastHaloWidth});
@@ -18649,7 +18884,7 @@
       // border the buttons share fades with them -- a live border around dead
       // buttons is the one part of a disabled control that still looks usable.
       iconGroupEl.classed('disabled', off);
-      iconTypes.forEach(function(icon) {
+      getShownIconTypes().forEach(function(icon) {
         iconBtns[icon.name].classed('selected', !off && icon.name == iconVal);
         setPanelButtonDisabled(iconBtns[icon.name], off);
       });
@@ -19248,12 +19483,23 @@
 
     function getSelectedIcon() {
       var out = '';
-      iconTypes.forEach(function(icon) {
+      getShownIconTypes().forEach(function(icon) {
         if (iconBtns[icon.name].hasClass('selected')) out = icon.name;
       });
       return out;
     }
 
+    // A label that already has an NYT star keeps it without the button: it is
+    // drawn for everyone, and only choosing one is gated.
+    function getShownIconTypes() {
+      if (!shownIconTypes) {
+        shownIconTypes = iconTypes.filter(function(icon) {
+          return !icon.nytOnly || isNytUser();
+        });
+      }
+      return shownIconTypes;
+    }
+
     function applyStyleObject(style) {
       var styles = [];
       savedStyleFields.forEach(function(field) {
@@ -19284,8 +19530,9 @@
         // The size the symbols in the selection already share, where they share
         // one: a shape applied to a mixed selection gives the labels that had no
         // symbol the size of the ones that did, rather than resetting them all to
-        // the default.
-        styles.push([iconSizeField, getNumericSize(getIconValueIds(), iconSizeField, defaultIconSize)]);
+        // the default. A size or colour that was the old shape's default becomes
+        // the new one's (see getIconShapeChange()).
+        addIconShapeDefaults(styles, iconName, getIconValueIds());
         // The symbol's own opacity goes on with it, because the label's opacity
         // is applied to both elements: without this, text set to 50% would give
         // a half-faded symbol while the Icon section showed it at 100%.
@@ -19297,6 +19544,14 @@
       applyStyleValues(styles);
     }
 
+    function addIconShapeDefaults(styles, iconName, ids) {
+      var color = getCommonValueInfo(ids, iconColorField);
+      var change = getIconShapeChange(iconName, getCommonValue(ids, iconField) || '',
+        getCommonValue(ids, iconSizeField), color.mixed ? null : color.value || '');
+      styles.push([iconSizeField, change.size]);
+      if ('color' in change) styles.push([iconColorField, change.color]);
+    }
+
     // Switching a symbol on moves a label sitting at the centre out from under
     // it, in the same command, so that the pair is one undo step and the text
     // is never briefly drawn over the symbol it just asked for.
@@ -19337,7 +19592,9 @@
     }
 
     function nudgeIconSize(delta) {
-      var size = getNumericSize(getIconTargetIds(), iconSizeField, defaultIconSize);
+      var ids = getIconTargetIds();
+      var size = getNumericSize(ids, iconSizeField,
+        getDefaultIconSize(getCommonValue(ids, iconField)));
       if (!controlsEnabled()) return;
       size = Math.max(1, size + delta);
       applyIconSize(size);
@@ -19428,14 +19685,6 @@
       return !!node && /^(INPUT|SELECT|TEXTAREA|BUTTON|OPTION)$/.test(node.nodeName);
     }
 
-    // Whether clicking this node puts a native menu on screen, which must then be
-    // left holding the focus. OPTION counts because a browser that reports the
-    // chosen option as the click target is reporting a menu interaction either
-    // way, and a choice restores the caret through its change handler.
-    function opensAMenu(node) {
-      return !!node && /^(SELECT|OPTION)$/.test(node.nodeName);
-    }
-
     // Hands the keyboard back after a control has done its job: to the label
     // being typed into if there is one, and to nothing at all otherwise.
     function releaseFocus() {
@@ -19454,7 +19703,7 @@
       if (styles.length === 0) return;
       releaseFocus();
       // What the panel is set to is always what the next label gets, whether or
-      // not these values also went to a label that already exists. -add-label
+      // not these values also went to a label that already exists. -labels
       // writes them when that label is created, which is why this needs no
       // command and no undo step of its own.
       if (labelModeIsOn()) {
@@ -19478,7 +19727,7 @@
 
     function applyStyleCommand(styles, ids) {
       var lyr = getActiveLayer();
-      var parts = ['-style'];
+      var parts = ['-labels'];
       if (!gui.console || !lyr) return;
       styles.forEach(function(style) {
         parts.push(style[0] + '=' + quoteCommandValue(style[1]));
@@ -19500,7 +19749,7 @@
     // A text block's breaks are only right for the width and font they were
     // found with, so a change to either rewraps it in the same command: one undo
     // step, and no moment at which the block is drawn with its old lines in its
-    // new font. One -style per label, since each has text of its own.
+    // new font. One -labels per label, since each has text of its own.
     function getRewrapCommands(styles, ids, lyr) {
       var table = lyr.data;
       var changes = {};
@@ -19634,14 +19883,513 @@
     return measureSvg;
   }
 
+  // The pattern fill controls of the polygon panel, and the fill-pattern codes
+  // they stand for.
+  //
+  // The panel covers the patterns that are one colour over a background: hatch
+  // lines, dots and squares. The background is the feature's own fill, so a
+  // pattern is described by five settings -- {type, color, size, gap, angle} --
+  // and the fill. A hatch has no background in the code: it is a run of stripes,
+  // and the panel's hatch is two of them, the gap in the fill colour and the line
+  // in the pattern colour. Anything else (dashes, several colours, a background
+  // that is not the fill) is a custom pattern, which the panel shows as its code.
+  //
+  // Written into every code rather than read from the fill when drawn, because
+  // the code is what -style stores and what the SVG exporter turns into a
+  // <pattern>: a pattern with no colour of its own would need both to change.
+
+  var patternTypes = ['hatches', 'dots', 'squares'];
+
+  var patternDefaults = {
+    hatches: {size: 1, gap: 3, angle: 45},
+    dots: {size: 2, gap: 3, angle: 0},
+    squares: {size: 2, gap: 2, angle: 0}
+  };
+
+  var defaultPatternColor = '#000000';
+
+  // The settings a newly chosen pattern type starts from. The colour carries
+  // over from the pattern being replaced; the sizes do not, because a hatch
+  // line's width and a dot's diameter look nothing alike at the same number.
+  function getDefaultPatternControls(type, color) {
+    var d = patternDefaults[type];
+    return {type: type, color: color || defaultPatternColor,
+      size: d.size, gap: d.gap, angle: d.angle};
+  }
+
+  // The background a pattern is given over a feature with @fill. A feature with
+  // no fill gets a clear one, so that the pattern is drawn over whatever is
+  // underneath.
+  function getPatternBackground(fill) {
+    return isBlank$1(fill) ? 'none' : String(fill).trim();
+  }
+
+  // Whether the settings describe a pattern the renderer will draw. A hatch with
+  // no gap would be a solid fill, and the parser refuses a stripe of no width.
+  function isValidPatternControls(o) {
+    if (!o || patternTypes.indexOf(o.type) == -1 || isBlank$1(o.color)) return false;
+    if (!(o.size > 0) || !isFinite(o.angle)) return false;
+    return o.type == 'hatches' ? o.gap > 0 : o.gap >= 0;
+  }
+
+  // The fill-pattern code for the settings @o over @background. The angle is left
+  // out where it is the parser's own default, which keeps the common codes as
+  // short as the ones in the documentation.
+  function formatFillPattern(o, background) {
+    var bg = background || 'none';
+    if (o.type == 'hatches') {
+      return 'hatches ' + formatAngle(o.angle, 45) +
+        formatPx(o.gap) + ' ' + bg + ' ' + formatPx(o.size) + ' ' + o.color;
+    }
+    return o.type + ' ' + formatAngle(o.angle, 0) +
+      formatPx(o.size) + ' ' + o.color + ' ' + formatPx(o.gap) + ' ' + bg;
+  }
+
+  // The settings a parsed fill-pattern code (from parsePattern()) was made from,
+  // given the fill of the feature it is on -- or null if the panel's settings
+  // cannot describe it, which makes it a custom pattern.
+  function getPatternControls(parsed, fill) {
+    var bg = getPatternBackground(fill);
+    var line;
+    if (!parsed) return null;
+    if (parsed.type == 'hatches') {
+      if (parsed.widths.length != 2) return null;
+      line = sameColor(parsed.colors[0], bg) ? 1 : sameColor(parsed.colors[1], bg) ? 0 : -1;
+      if (line == -1) return null;
+      return {type: 'hatches', color: parsed.colors[line], size: parsed.widths[line],
+        gap: parsed.widths[1 - line], angle: parsed.rotation};
+    }
+    if (parsed.type == 'dots' || parsed.type == 'squares') {
+      if (parsed.colors.length != 1 || !sameColor(parsed.background, bg)) return null;
+      return {type: parsed.type, color: parsed.colors[0], size: parsed.size,
+        gap: parsed.spacing, angle: parsed.rotation};
+    }
+    return null;
+  }
+
+  // The same pattern over a different fill, or null for a custom pattern, which
+  // is left as it is.
+  function refillPattern(parsed, oldFill, newFill) {
+    var o = getPatternControls(parsed, oldFill);
+    return o ? formatFillPattern(o, getPatternBackground(newFill)) : null;
+  }
+
+  // A -style expression giving each feature the pattern @o over its own fill.
+  // For a change that sets fills the panel cannot know in advance, like
+  // -classify's random colours.
+  function formatFillPatternExpression(o) {
+    var sentinel = '\u0000';
+    var parts = formatFillPattern(o, sentinel).split(sentinel);
+    return JSON.stringify(parts[0]) + ' + (fill || "none") + ' + JSON.stringify(parts[1]);
+  }
+
+  // Collects per-feature edits into as few -style commands as they allow.
+  // @edits: [{id, styles: [[name, value], ...]}]
+  // Returns [{styles, ids}], in the order each set of styles first appears.
+  function groupStyleEdits(edits) {
+    var groups = [];
+    var index = {};
+    edits.forEach(function(edit) {
+      var key = JSON.stringify(edit.styles);
+      if (!(key in index)) {
+        index[key] = groups.length;
+        groups.push({styles: edit.styles, ids: []});
+      }
+      groups[index[key]].ids.push(edit.id);
+    });
+    return groups;
+  }
+
+  function formatAngle(angle, defaultAngle) {
+    return angle == defaultAngle ? '' : formatNumber$3(angle) + 'deg ';
+  }
+
+  function formatPx(val) {
+    return formatNumber$3(val) + 'px';
+  }
+
+  function formatNumber$3(val) {
+    return String(Math.round(Number(val) * 100) / 100);
+  }
+
+  function sameColor(a, b) {
+    return normalizeColor(a) == normalizeColor(b);
+  }
+
+  function normalizeColor(color) {
+    var str = String(color || '').trim().toLowerCase();
+    return str == 'transparent' ? 'none' : str;
+  }
+
+  function isBlank$1(val) {
+    return val === undefined || val === null || String(val).trim() === '';
+  }
+
+  // The polygon panel's "Pattern" section. See gui-fill-pattern.mjs for how its
+  // settings map to fill-pattern codes.
+  //
+  // Switched like the label panel's Halo and Icon sections: a pattern is a
+  // yes/no that the rest of the section then qualifies, and the section shows
+  // only its heading while it is off.
+  //
+  // opts.getRecords()        the target layer's records
+  // opts.getTargetIds()      the features being styled
+  // opts.applyEdits(edits, title)   run per-feature edits: [{id, styles}]
+  // opts.revert()            put the panel back as the data has it
+  // opts.releaseFocus()
+  function PatternFillControl(parent, opts) {
+    var section = makePanelSection(parent, 'Pattern');
+    var shown = {type: 'none'};
+    // What switching the pattern on applies when the features have none: the
+    // last pattern the section showed, so that off and on again is a round trip.
+    var lastPattern = null;
+    // Custom was chosen from the menu, and the code field is waiting for a code.
+    // Until one is applied the data still says what it said before, so the
+    // choice has to be remembered or the next refresh would undo it.
+    var customPending = false;
+    var toggle, typeSelect, mixedOption, colorControl, angleField, sizeRow, sizeCaption,
+        sizeField, gapField, customRow, codeInput;
+
+    initRows();
+
+    this.section = section;
+
+    this.update = update;
+
+    this.reset = function() {
+      customPending = false;
+    };
+
+    this.hidePicker = function() {
+      colorControl.picker.hide();
+    };
+
+    // What a saved style records for the pattern, over the fill it records.
+    this.getCode = function(fill) {
+      if (isSimple(shown)) return formatFillPattern(shown, getPatternBackground(fill));
+      if (shown.type == 'custom') return shown.code || '';
+      return '';
+    };
+
+    // Per-feature edits applying @styles to the targets. A new fill is also
+    // written into the background of each feature's pattern, since that is where
+    // the pattern's background colour is kept; custom patterns are left alone.
+    this.getStyleEdits = function(styles) {
+      var records = opts.getRecords();
+      var fill = findStyle(styles, 'fill');
+      var refill = fill !== undefined && findStyle(styles, 'fill-pattern') === undefined;
+      return opts.getTargetIds().map(function(id) {
+        var rec = records[id];
+        var code = rec && rec['fill-pattern'];
+        var edit = {id: id, styles: styles};
+        var refilled;
+        if (refill && !isBlank(code)) {
+          refilled = refillPattern(internal.parsePattern(code), rec.fill, fill);
+          if (refilled) edit.styles = styles.concat([['fill-pattern', refilled]]);
+        }
+        return edit;
+      });
+    };
+
+    // Edits that keep each feature's pattern over its fill after a command that
+    // sets fills the panel cannot know beforehand. A -style expression reads
+    // the new fill when it runs.
+    this.getRefillExpressionEdits = function(ids) {
+      var records = opts.getRecords();
+      var edits = [];
+      ids.forEach(function(id) {
+        var rec = records[id];
+        var code = rec && rec['fill-pattern'];
+        var o = isBlank(code) ? null : getPatternControls(internal.parsePattern(code), rec.fill);
+        if (o) edits.push({id: id, styles: [['fill-pattern', formatFillPatternExpression(o)]]});
+      });
+      return edits;
+    };
+
+    function initRows() {
+      toggle = makePanelToggle(section.findChild('.label-style-section-title'), {
+        title: 'Fill with a pattern',
+        className: 'layer-pattern-toggle',
+        onChange: setPatternOn
+      });
+      var typeRow = El('div').addClass('label-style-row layer-pattern-type-row').appendTo(section);
+      typeSelect = El('select').attr('aria-label', 'Pattern type').appendTo(typeRow)
+        .on('change', function() {
+          selectType(typeSelect.node().value);
+        });
+      [['hatches', 'Hatches'], ['dots', 'Dots'], ['squares', 'Squares'],
+        ['custom', 'Custom']].forEach(function(o) {
+        El('option').attr('value', o[0]).appendTo(typeSelect).text(o[1]);
+      });
+      // Shown only while the features being styled have different patterns,
+      // which is not a choice the menu offers.
+      mixedOption = El('option').attr('value', 'mixed').appendTo(typeSelect).text('Mixed');
+      mixedOption.node().disabled = true;
+
+      colorControl = makeColorRow(section, {
+        label: 'Color',
+        noOpacity: true,
+        onColor: function(color) {
+          if (color) applyChange({color: color});
+        },
+        revert: opts.revert
+      });
+      colorControl.row.addClass('layer-pattern-color-row');
+      El('span').appendTo(colorControl.aside).text('Angle');
+      angleField = new SizeField(colorControl.aside, {
+        min: -180, max: 180, step: 15, bigStep: 45,
+        title: 'Pattern angle in degrees',
+        onSet: function(value) {
+          applyChange({angle: value});
+        },
+        onStep: function(delta) {
+          applyChange({angle: Math.max(-180, Math.min(180, shown.angle + delta))});
+        },
+        onDone: opts.releaseFocus
+      });
+
+      sizeRow = El('div').addClass('label-style-row layer-pattern-size-row').appendTo(section);
+      var sizeCell = El('div').addClass('label-split-cell').appendTo(sizeRow);
+      var gapCell = El('div').addClass('label-split-cell').appendTo(sizeRow);
+      sizeCaption = El('span').appendTo(sizeCell).text('Size');
+      sizeField = new SizeField(sizeCell, {
+        min: 0.25, step: 0.5, bigStep: 2, decimals: 2,
+        title: 'Size in px',
+        onSet: function(value) {
+          applyChange({size: value});
+        },
+        onStep: function(delta) {
+          applyChange({size: Math.max(0.25, shown.size + delta)});
+        },
+        onDone: opts.releaseFocus
+      });
+      El('span').appendTo(gapCell).text('Gap');
+      gapField = new SizeField(gapCell, {
+        min: 0, step: 0.5, bigStep: 2, decimals: 2,
+        title: 'Gap in px',
+        onSet: function(value) {
+          applyChange({gap: value});
+        },
+        onStep: function(delta) {
+          applyChange({gap: Math.max(0, shown.gap + delta)});
+        },
+        onDone: opts.releaseFocus
+      });
+
+      customRow = El('div').addClass('label-style-row layer-pattern-code-row').appendTo(section);
+      var caption = El('div').addClass('label-style-row-label').appendTo(customRow).text('Code');
+      makeFieldTip(caption,
+        'The fill-pattern syntax of the -style command.\n' +
+        'See the command reference for details.');
+      codeInput = El('input').attr('type', 'text').attr('aria-label', 'Pattern code').appendTo(customRow)
+        .on('change', function() {
+          applyCode(codeInput.node().value.trim());
+        });
+    }
+
+    function update() {
+      var ids = opts.getTargetIds();
+      var toggleState = getToggleState(ids);
+      var state = getCommonPatternState(ids);
+      if (customPending && state.type != 'custom') {
+        state = {type: 'custom', code: shown.type == 'custom' ? shown.code : getPendingCode(state)};
+      }
+      shown = state;
+      if (isSimple(state) || state.type == 'custom' && state.code) lastPattern = state;
+      toggle.setState(toggleState);
+      section.classed('collapsed', toggleState == 'off');
+      mixedOption.classed('hidden', state.type != 'mixed');
+      typeSelect.node().value = state.type;
+      colorControl.row.classed('hidden', !isSimple(state));
+      sizeRow.classed('hidden', !isSimple(state));
+      customRow.classed('hidden', state.type != 'custom');
+      if (isSimple(state)) {
+        colorControl.showColor(state.color);
+        angleField.setValue(state.angle);
+        sizeCaption.text(state.type == 'hatches' ? 'Width' : 'Size');
+        sizeField.setValue(state.size);
+        gapField.setValue(state.gap);
+      } else {
+        colorControl.picker.hide();
+      }
+      if (state.type == 'custom' && document.activeElement !== codeInput.node()) {
+        codeInput.node().value = state.code || '';
+      }
+    }
+
+    function selectType(type) {
+      if (type == 'custom') {
+        customPending = true;
+        update();
+        codeInput.node().focus();
+        return;
+      }
+      customPending = false;
+      if (patternTypes.indexOf(type) > -1) {
+        applyControls(getDefaultPatternControls(type, isSimple(shown) ? shown.color : null));
+      }
+    }
+
+    // On gives every feature being styled a pattern: the one the features that
+    // have a pattern agree on, if they do, or else the last one shown, or else a
+    // default hatch. Off takes the pattern off all of them.
+    function setPatternOn(on) {
+      var ids = opts.getTargetIds();
+      var common, pattern;
+      customPending = false;
+      if (!on) {
+        applyToTargets(function() { return ''; }, 'Remove pattern fill');
+        return;
+      }
+      common = getCommonPatternState(ids.filter(hasPattern));
+      pattern = isSimple(common) || common.type == 'custom' ? common :
+        lastPattern || getDefaultPatternControls('hatches');
+      if (pattern.type == 'custom') {
+        applyToTargets(function() { return pattern.code; }, 'Pattern fill');
+      } else {
+        applyControls(pattern);
+      }
+    }
+
+    function getToggleState(ids) {
+      var n = ids.filter(hasPattern).length;
+      return n === 0 ? 'off' : n < ids.length ? 'mixed' : 'on';
+    }
+
+    function hasPattern(id) {
+      var rec = opts.getRecords()[id];
+      return !isBlank(rec && rec['fill-pattern']);
+    }
+
+    function applyChange(change) {
+      if (!isSimple(shown)) return;
+      var o = Object.assign({}, shown, change);
+      if (!isValidPatternControls(o)) {
+        opts.revert();
+        return;
+      }
+      applyControls(o);
+    }
+
+    function applyControls(o) {
+      applyToTargets(function(rec) {
+        return formatFillPattern(o, getPatternBackground(rec && rec.fill));
+      }, 'Pattern fill');
+    }
+
+    function applyCode(code) {
+      if (code && !internal.parsePattern(code)) {
+        codeInput.node().value = shown.code || '';
+        opts.revert();
+        return;
+      }
+      if (!code) customPending = false;
+      applyToTargets(function() { return code; }, code ? 'Pattern fill' : 'Remove pattern fill');
+    }
+
+    function applyToTargets(getCode, title) {
+      var records = opts.getRecords();
+      opts.applyEdits(opts.getTargetIds().map(function(id) {
+        return {id: id, styles: [['fill-pattern', getCode(records[id])]]};
+      }), title);
+    }
+
+    // The pattern the features being styled have in common, as panel settings,
+    // {type: 'custom', code}, {type: 'none'} -- or {type: 'mixed'} if they differ.
+    // Features with the same pattern over different fills agree: each pattern's
+    // background is its own feature's fill.
+    function getCommonPatternState(ids) {
+      var records = opts.getRecords();
+      var cache = {};
+      var firstKey = null, first = null;
+      var rec, cacheKey, state, key;
+      for (var i=0; i<ids.length; i++) {
+        rec = records[ids[i]];
+        cacheKey = (rec && rec['fill-pattern']) + '\t' + (rec && rec.fill);
+        state = cache[cacheKey] || (cache[cacheKey] = readPatternState(rec));
+        key = JSON.stringify(state);
+        if (firstKey === null) {
+          firstKey = key;
+          first = state;
+        } else if (key != firstKey) {
+          return {type: 'mixed'};
+        }
+      }
+      return first || {type: 'none'};
+    }
+
+    // The code the Custom field starts from: the pattern being replaced, so that
+    // choosing Custom is a way to see the code for the settings shown.
+    function getPendingCode(state) {
+      var records = opts.getRecords();
+      var ids = opts.getTargetIds();
+      var rec = ids.length > 0 ? records[ids[0]] : null;
+      return isSimple(state) ? formatFillPattern(state, getPatternBackground(rec && rec.fill)) : '';
+    }
+  }
+
+  function readPatternState(rec) {
+    var code = rec && rec['fill-pattern'];
+    if (isBlank(code)) return {type: 'none'};
+    return getPatternControls(internal.parsePattern(code), rec.fill) ||
+      {type: 'custom', code: String(code)};
+  }
+
+  function isSimple(state) {
+    return patternTypes.indexOf(state.type) > -1;
+  }
+
+  function findStyle(styles, name) {
+    for (var i=0; i<styles.length; i++) {
+      if (styles[i][0] == name) return styles[i][1];
+    }
+    return undefined;
+  }
+
+  function isBlank(val) {
+    return val === undefined || val === null || String(val).trim() === '';
+  }
+
   var savedStylesKey = 'layer_style_presets';
-  var styleFields = ['stroke', 'stroke-width', 'stroke-opacity', 'stroke-dasharray', 'fill', 'fill-opacity'];
+  var styleFields = ['stroke', 'stroke-width', 'stroke-opacity', 'stroke-dasharray', 'line-start', 'line-end', 'line-end-size', 'fill', 'fill-opacity', 'fill-pattern'];
+  var arrowShapes = [{
+    name: 'arrow',
+    title: 'solid arrowheads'
+  }, {
+    name: 'open-arrow',
+    title: 'open arrowheads'
+  }, {
+    name: 'dot',
+    title: 'dots'
+  }];
+  // The arrows are the label callout's, which point left, the way a line's
+  // start head does; the dot's left edge is where their tips are.
+  var arrowButtonSymbols = {
+    arrow: calloutButtonSymbols.arrow,
+    'open-arrow': calloutButtonSymbols['open-arrow'],
+    dot: '<path d="M5 8H13"></path><circle class="fill" cx="5" cy="8" r="2.6"></circle>'
+  };
+  var arrowPositions = [{
+    name: 'start',
+    label: 'Start',
+    title: 'arrowhead at the start of the line'
+  }, {
+    name: 'end',
+    label: 'End',
+    title: 'arrowhead at the end of the line'
+  }, {
+    name: 'both',
+    label: 'Both',
+    title: 'arrowheads at both ends of the line'
+  }];
 
   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, dashControl, randomFillBtn, presetControl, hit;
+    var title, editingStatus, clearLink, strokeControl, fillControl, strokeWidthField, dashControl, arrowControl, randomFillBtn, presetControl, patternControl, hit;
     var targetLayer = null;
+    // What the arrowhead switch turns on, for lines that have no heads
+    var lastArrow = {shape: 'arrow', position: 'end'};
 
     initPanel();
     hit = gui.map.getHitControl && gui.map.getHitControl();
@@ -19685,6 +20433,7 @@
 
     function turnOn() {
       targetLayer = getActiveLayer();
+      patternControl.reset();
       applyDefaultLineStyle();
       panel.show();
       updateControls();
@@ -19694,6 +20443,8 @@
       panel.hide();
       strokeControl.picker.hide();
       fillControl.picker.hide();
+      patternControl.hidePicker();
+      patternControl.reset();
       targetLayer = null;
     }
 
@@ -19710,8 +20461,8 @@
       // picker's Close button, and the panel's own buttons in the browsers that
       // focus a button on click. Left alone while the user is typing into a
       // field, which a click elsewhere in the panel ends on its own.
-      panel.node().addEventListener('click', function() {
-        if (isTextInput(document.activeElement)) return;
+      panel.node().addEventListener('click', function(e) {
+        if (isTextInput(document.activeElement) || opensAMenu(e.target)) return;
         releaseFocus();
       });
 
@@ -19727,11 +20478,22 @@
       strokeControl = addColorControl(panel, 'Stroke', 'stroke', '#000000');
       strokeWidthField = addStrokeWidthControl(strokeControl.aside);
       dashControl = addDashArrayControl(panel);
+      arrowControl = addArrowControl(panel);
 
       var buttonRow = El('div').addClass('label-style-row label-panel-button-row').appendTo(panel);
       randomFillBtn = makePanelActionButton(buttonRow, 'Random fills', applyRandomFillColors);
       makePanelActionButton(buttonRow, 'Clear style', clearLayerStyle);
 
+      patternControl = new PatternFillControl(panel, {
+        getRecords: function() {
+          return targetLayer && targetLayer.data ? targetLayer.data.getRecords() : [];
+        },
+        getTargetIds: getTargetIds,
+        applyEdits: runStyleEdits,
+        revert: updateControls,
+        releaseFocus: releaseFocus
+      });
+
       presetControl = new StylePresetControl(panel, {
         storageKey: savedStylesKey,
         type: getStyleType,
@@ -19810,6 +20572,197 @@
       return {row: row, input: input};
     }
 
+    // A switch in the heading says whether the lines have arrowheads; the rows
+    // under it are the head's shape with its size beside it, then which ends
+    // get it. A line has one shape for both ends, which is all the panel sets,
+    // though -style can give the two ends different ones.
+    function addArrowControl(parent) {
+      var section = makePanelSection(parent, 'Arrowheads');
+      var toggle = makePanelToggle(section.findChild('.label-style-section-title'), {
+        title: 'Add arrowheads',
+        className: 'layer-arrow-toggle',
+        onChange: setArrowsOn
+      });
+      var shapeRow = El('div').addClass('label-style-row label-split-row').appendTo(section);
+      var shapeCell = El('div').addClass('label-split-cell label-align-row').appendTo(shapeRow);
+      var sizeCell = El('div').addClass('label-split-cell label-spacing-row layer-arrow-size-row').appendTo(shapeRow);
+      var posRow = El('div').addClass('label-style-row label-split-row').appendTo(section);
+      var posCell = El('div').addClass('label-split-cell label-align-row').appendTo(posRow);
+      var control = {section: section, toggle: toggle, shapeBtns: {}, posBtns: {}};
+      El('div').addClass('label-split-cell').appendTo(posRow);
+      El('span').appendTo(shapeCell).text('Shape');
+      var shapeGroup = El('div').addClass('label-btn-group label-callout-buttons layer-arrow-shape-buttons').appendTo(shapeCell);
+      arrowShapes.forEach(function(item) {
+        var btn = makePanelButton(shapeGroup, '', function() {
+          applyArrowShape(item.name);
+        }).attr('data-arrow-shape', item.name).attr('aria-label', item.title);
+        El('<svg class="label-callout-symbol" viewBox="0 0 16 16" aria-hidden="true">' +
+          arrowButtonSymbols[item.name] + '</svg>').appendTo(btn);
+        control.shapeBtns[item.name] = btn;
+      });
+      El('span').appendTo(posCell).text('Ends');
+      var posGroup = El('div').addClass('label-btn-group layer-arrow-position-buttons').appendTo(posCell);
+      arrowPositions.forEach(function(item) {
+        control.posBtns[item.name] = makePanelButton(posGroup, item.label, function() {
+          applyArrowPosition(item.name);
+        }).attr('data-arrow-position', item.name).attr('aria-label', item.title);
+      });
+      El('span').appendTo(sizeCell).text('Size');
+      control.sizeField = new SizeField(sizeCell, {
+        title: 'Arrowhead size in px, the length of its sides or the diameter of a dot',
+        min: 1,
+        max: 60,
+        step: 1,
+        bigStep: 5,
+        onSet: applyArrowSize,
+        onStep: nudgeArrowSize,
+        onDone: releaseFocus
+      });
+      return control;
+    }
+
+    // {shape, position} for one record, 'none' and '' when it has no heads. A
+    // line whose two ends have different shapes reports the start's.
+    function getArrowInfo(rec) {
+      var start = internal.svg.getLineEndType(rec || {}, 'line-start');
+      var end = internal.svg.getLineEndType(rec || {}, 'line-end');
+      var shape = start != 'none' ? start : end;
+      var position = start != 'none' && end != 'none' ? 'both' :
+        start != 'none' ? 'start' : end != 'none' ? 'end' : '';
+      return {shape: shape, position: position};
+    }
+
+    // Switching on gives the lines that have no heads the last shape and ends
+    // the section showed, so that off and on again is a round trip; the lines
+    // that have heads keep theirs. Switching off leaves line-end-size alone,
+    // for the same reason.
+    function setArrowsOn(on) {
+      applyArrowEdits(function(info) {
+        return on ? fillArrowInfo(info) : {shape: 'none', position: ''};
+      });
+    }
+
+    // Each target keeps whichever of shape and position is not being set, so
+    // that changing the shape of a selection whose lines point different ways
+    // leaves them pointing those ways.
+    function applyArrowShape(shape) {
+      applyArrowEdits(function(info) {
+        return {shape: shape, position: fillArrowInfo(info).position};
+      });
+    }
+
+    function applyArrowPosition(position) {
+      applyArrowEdits(function(info) {
+        return {shape: fillArrowInfo(info).shape, position: position};
+      });
+    }
+
+    function fillArrowInfo(info) {
+      return info.shape == 'none' ? {shape: lastArrow.shape, position: lastArrow.position} : info;
+    }
+
+    function applyArrowEdits(getNext) {
+      var records = getTargetRecords();
+      var addStroke = styleFieldIsUnsetForTargets('stroke');
+      var edits = [];
+      getTargetIds().forEach(function(id) {
+        var rec = records[id] || {};
+        var next = getNext(getArrowInfo(rec));
+        var on = next.shape != 'none';
+        var styles = [
+          ['line-start', on && next.position != 'end' ? next.shape : ''],
+          ['line-end', on && next.position != 'start' ? next.shape : '']
+        ].filter(function(style) {
+          // no need to remove what is not there
+          return style[1] || rec[style[0]];
+        });
+        if (on && addStroke) styles.push(['stroke', strokeControl.defaultColor]);
+        if (styles.length > 0) edits.push({id: id, styles: styles});
+      });
+      runStyleEdits(edits);
+    }
+
+    function applyArrowSize(value) {
+      var ids = getArrowTargetIds();
+      if (ids.length === 0) return;
+      runStyleEdits(ids.map(function(id) {
+        return {id: id, styles: [['line-end-size', value]]};
+      }));
+    }
+
+    function nudgeArrowSize(delta) {
+      var shown = getArrowSizeShown(getArrowTargetIds());
+      var size = Number(shown.value);
+      if (!isFinite(size) || shown.value === '') return;
+      applyArrowSize(Math.max(1, Math.round(size + delta)));
+    }
+
+    function getArrowTargetIds() {
+      var records = getTargetRecords();
+      return getTargetIds().filter(function(id) {
+        return getArrowInfo(records[id]).shape != 'none';
+      });
+    }
+
+    // The size a head is drawn at, which is the one its line width gives it
+    // when it has none of its own.
+    function getArrowSizeShown(ids) {
+      var records = getTargetRecords();
+      var value = '', size;
+      for (var i=0; i<ids.length; i++) {
+        size = getArrowSize(records[ids[i]]);
+        if (i > 0 && size !== value) return {value: '', mixed: true};
+        value = size;
+      }
+      return {value: value, mixed: false};
+    }
+
+    function getArrowSize(rec) {
+      var opts = internal.svg.makeLineArrowOpts('arrow', '', rec && rec['line-end-size'],
+        rec && rec['stroke-width'], 1);
+      var size = getArrowInfo(rec).shape == 'dot' ? opts.dotSize : opts.size;
+      return formatNumberValue(Math.round(size * 100) / 100);
+    }
+
+    // The shape and ends shown are those of the lines with heads; lines
+    // without are what the switch's mixed state is for.
+    function updateArrowControl() {
+      var records = getTargetRecords();
+      var ids = getTargetIds();
+      var arrowIds = getArrowTargetIds();
+      var shape, position, info;
+      for (var i=0; i<arrowIds.length; i++) {
+        info = getArrowInfo(records[arrowIds[i]]);
+        if (i === 0) {
+          shape = info.shape;
+          position = info.position;
+        } else {
+          if (info.shape != shape) shape = '';
+          if (info.position != position) position = '';
+        }
+      }
+      if (shape) lastArrow.shape = shape;
+      if (position) lastArrow.position = position;
+      var state = arrowIds.length === 0 ? 'off' :
+        arrowIds.length < ids.length ? 'mixed' : 'on';
+      arrowControl.toggle.setState(state);
+      arrowControl.section.classed('collapsed', state == 'off');
+      arrowShapes.forEach(function(item) {
+        arrowControl.shapeBtns[item.name].classed('selected', item.name == shape);
+      });
+      arrowPositions.forEach(function(item) {
+        arrowControl.posBtns[item.name].classed('selected', item.name == position);
+      });
+      var shown = arrowIds.length > 0 ? getArrowSizeShown(arrowIds) : {value: '', mixed: false};
+      arrowControl.sizeField.setValue(shown.value);
+      arrowControl.sizeField.setPlaceholder(shown.mixed ? 'mixed' : '');
+      arrowControl.sizeField.setDisabled(arrowIds.length === 0);
+    }
+
+    function getTargetRecords() {
+      return targetLayer && targetLayer.data ? targetLayer.data.getRecords() : [];
+    }
+
     function releaseFocus() {
       releasePanelFocus(panel.node());
     }
@@ -19824,11 +20777,15 @@
       strokeControl.row.show();
       fillControl.row.classed('hidden', geom != 'polygon');
       dashControl.row.classed('hidden', geom != 'polyline');
+      arrowControl.section.classed('hidden', geom != 'polyline');
       updateColorControl(strokeControl);
       updateColorControl(fillControl);
       updateStrokeWidthControl();
       updateDashArrayControl();
+      if (geom == 'polyline') updateArrowControl();
       randomFillBtn.classed('hidden', geom != 'polygon');
+      patternControl.section.classed('hidden', geom != 'polygon');
+      if (geom == 'polygon') patternControl.update();
       presetControl.render();
       updateSavedStyleControls();
     }
@@ -19892,7 +20849,11 @@
       if (control.field == 'stroke' && strokeWidthIsUnsetForTargets()) {
         styles.push(['stroke-width', 1]);
       }
-      runStyleCommand(styles);
+      if (control.field == 'fill') {
+        runStyleEdits(patternControl.getStyleEdits(styles));
+      } else {
+        runStyleCommand(styles);
+      }
     }
 
     function applyStrokeWidthStyle(value) {
@@ -19912,11 +20873,30 @@
     }
 
     function runStyleCommand(styles) {
-      var parts = ['-style'];
       releaseFocus();
       syncTargetLayer();
       var ids = getTargetIds();
       if (!gui.console || !targetLayer || ids.length === 0) return;
+      runCommand(formatStyleCommand(styles, ids), 'Style layer');
+    }
+
+    // Per-feature edits ([{id, styles}]), as one -style command for each set of
+    // styles. They are run as one command string, which is one undo step.
+    function runStyleEdits(edits, title) {
+      releaseFocus();
+      syncTargetLayer();
+      if (!gui.console || !targetLayer || edits.length === 0) return;
+      runCommand(formatStyleEditCommands(edits), title || 'Style layer');
+    }
+
+    function formatStyleEditCommands(edits) {
+      return groupStyleEdits(edits).map(function(group) {
+        return formatStyleCommand(group.styles, group.ids);
+      }).join(' ');
+    }
+
+    function formatStyleCommand(styles, ids) {
+      var parts = ['-style'];
       styles.forEach(function(style) {
         parts.push(style[0] + '=' + quoteCommandValue(style[1]));
       });
@@ -19924,7 +20904,7 @@
       if (ids.length < internal.getFeatureCount(targetLayer)) {
         parts.push('ids=' + ids.join(','));
       }
-      runCommand(parts.join(' '), 'Style layer');
+      return parts.join(' ');
     }
 
     function applyDefaultLineStyle() {
@@ -19938,13 +20918,21 @@
       }
     }
 
+    // Patterns keep their backgrounds in step with the fills, and the new fills
+    // are not known until -classify has chosen them, so the patterns are
+    // rewritten by an expression that reads each feature's fill when it runs.
     function applyRandomFillColors() {
       var cmd = '-classify colors=random non-adjacent';
+      var patternEdits;
       syncTargetLayer();
       if (!gui.console || !targetLayer || targetLayer.geometry_type != 'polygon') return;
       if (getActiveLayer() != targetLayer) {
         cmd += ' target=' + internal.formatOptionValue(internal.getLayerTargetId(gui.model, targetLayer));
       }
+      patternEdits = patternControl.getRefillExpressionEdits(getAllFeatureIds(targetLayer));
+      if (patternEdits.length > 0) {
+        cmd += ' ' + formatStyleEditCommands(patternEdits);
+      }
       runCommand(cmd, 'Random fill colors');
     }
 
@@ -19963,7 +20951,7 @@
         }
       });
       if (styles.length > 0) {
-        runStyleCommand(styles);
+        runStyleEdits(patternControl.getStyleEdits(styles));
       }
     }
 
@@ -19974,14 +20962,24 @@
       addStyleValue(style, 'stroke-opacity', parseOpacityValue(strokeControl.opacity.node().value));
       if (targetLayer && targetLayer.geometry_type == 'polyline') {
         addStyleValue(style, 'stroke-dasharray', getControlValue(dashControl.input));
+        addArrowStyleValues(style);
       }
       if (targetLayer && targetLayer.geometry_type == 'polygon') {
         addStyleValue(style, 'fill', getControlValue(fillControl.input));
         addStyleValue(style, 'fill-opacity', parseOpacityValue(fillControl.opacity.node().value));
+        addStyleValue(style, 'fill-pattern', patternControl.getCode(getControlValue(fillControl.input)));
       }
       return style;
     }
 
+    // Only when every target agrees, as with the other controls; a size is
+    // saved only if the lines have their own.
+    function addArrowStyleValues(style) {
+      ['line-start', 'line-end', 'line-end-size'].forEach(function(field) {
+        addStyleValue(style, field, getCommonStyleValue(field));
+      });
+    }
+
     function addStyleValue(style, field, value) {
       if (value || value === 0) {
         style[field] = value;
@@ -20192,8 +21190,8 @@
         revert: updateControls,
         release: releaseFocus
       });
-      panel.node().addEventListener('click', function() {
-        if (isTextInput(document.activeElement)) return;
+      panel.node().addEventListener('click', function(e) {
+        if (isTextInput(document.activeElement) || opensAMenu(e.target)) return;
         releaseFocus();
       });
 
@@ -20447,9 +21445,8 @@
       var expr = createExprInput.node().value.trim();
       var cmd;
       if (!expr || !gui.console) return;
-      cmd = createCopyCheckbox.node().checked ?
-        '-filter true + name=labels -style label-text=' + quoteCommandValue(expr) :
-        '-style label-text=' + quoteCommandValue(expr);
+      cmd = '-labels text=' + quoteCommandValue(expr);
+      if (createCopyCheckbox.node().checked) cmd += ' + name=labels';
       runGuiEditCommand(gui, cmd, {
         title: 'Create labels',
         onSuccess: openLabelStyles
@@ -21434,7 +22431,7 @@
   // hit test, the reposition pass and the selection cue all find labels by those,
   // and a node with no feature behind it must not be found by any of them.
   //
-  // @rec: the label's record, as -add-label will write it
+  // @rec: the label's record, as -labels coordinates= will write it
   // @shp: its knots, in the layer's display coordinates
   // Returns a markup string, or '' if there is nothing to draw.
   function renderPendingSymbol(rec, shp, ext, idPrefix) {
@@ -22254,6 +23251,7 @@
         // data.ids = [drawingId];
         // data.id = drawingId;
         data.ids = utils$1.uniq(data.ids.concat([drawingId]));
+        data.drawing_id = drawingId;
       }
       if (pinnedOn) {
         data.pinned = true;
@@ -24181,12 +25179,7 @@
       styleOpts.interactionMode == 'edit_polygons' ||
       styleOpts.interactionMode == 'snip_lines') {
       // special overlay: shape editing mode
-      lyr = getOverlayLayer(activeLyr, hitData.ids);
-      lyr.gui.style = getLineEditingStyle(hitData);
-      if (activeLyr.geometry_type == 'polygon') {
-        lyr.gui.style.fillColor = hoverFill;
-      }
-      return [lyr];
+      return getShapeEditingLayers(activeLyr, hitData);
     }
     layers = [];
     if (styleOpts.interactionMode == 'label') {
@@ -24321,15 +25314,50 @@
     };
   }
 
+  // The path being drawn is shown without its vertices, which are only of use
+  // for reshaping a completed path. The hover markers go on the last layer, so
+  // they are drawn on top.
+  function getShapeEditingLayers(activeLyr, hitData) {
+    var drawingIds = hitData.drawing_id >= 0 ? [hitData.drawing_id] : [];
+    var otherIds = utils$1.difference(hitData.ids || [], drawingIds);
+    var layers = [], lyr;
+    if (drawingIds.length > 0) {
+      lyr = getShapeEditingLayer(activeLyr, hitData, drawingIds, false);
+      // The end of a path being drawn has closely spaced vertices, and pixel
+      // rounding would show as a staircase.
+      lyr.gui.style.unroundedCoords = true;
+      layers.push(lyr);
+    }
+    if (otherIds.length > 0 || layers.length === 0) {
+      layers.push(getShapeEditingLayer(activeLyr, hitData, otherIds, true));
+    }
+    layers.forEach(function(lyr, i) {
+      if (i < layers.length - 1) {
+        lyr.gui.style.vertex_overlay = null;
+        lyr.gui.style.pending_snip = null;
+      }
+    });
+    return layers;
+  }
+
+  function getShapeEditingLayer(activeLyr, hitData, ids, showVertices) {
+    var lyr = getOverlayLayer(activeLyr, ids);
+    lyr.gui.style = getLineEditingStyle(hitData, ids, showVertices);
+    if (activeLyr.geometry_type == 'polygon') {
+      lyr.gui.style.fillColor = hoverFill;
+    }
+    return lyr;
+  }
+
   // style for vertex edit mode
-  function getLineEditingStyle(o) {
+  function getLineEditingStyle(o, ids, showVertices) {
     var isVertex = o.hit_type == 'vertex' || o.hit_type == 'disabled';
     return {
-      ids: o.ids,
+      ids: ids,
       overlay: true,
       strokeColor: black,
       strokeWidth: 1.2,
-      vertices: true,
+      vertices: showVertices,
       vertex_overlay_color: getVertexOverlayColor(o.hit_type),
       vertex_overlay_scale: isVertex ? 2.5 : 2,
       vertex_overlay: o.hit_coordinates || null,
@@ -24530,6 +25558,11 @@
   // pixel distance threshold for hovering near a vertex or segment midpoint
   var HOVER_THRESHOLD$1 = 10;
 
+  // How far the pointer has to move from where the mouse was pressed before a
+  // drag draws a stroke. This matches the distance under which gui-mouse treats
+  // a press as a click, so a press that stays this close adds only a click vertex.
+  var STROKE_START_DIST = 6;
+
   function initLineEditing(gui, ext, hit) {
     var hoverVertexInfo;
     var prevVertexAddedEvent;
@@ -24539,7 +25572,8 @@
     var drawingId = -1; // feature id of path being drawn
     var sessionCount = 0;
     var alert;
-    var pencilPoints = [];
+    var stroke = null; // freehand stroke in progress (see startStroke())
+    var blockDrag = false; // a drag finished a path; ignore it until the mouse is released
     var _dragging = false;
 
     function active() {
@@ -24559,7 +25593,7 @@
     }
 
     function pencilIsActive() {
-      return active() && (cmdKeyDown() || pathDrawing()) && !vertexDragging() && !!pencilPoints;
+      return active() && (cmdKeyDown() || pathDrawing()) && !vertexDragging();
     }
 
     function polygonMode() {
@@ -24596,19 +25630,32 @@
       fullRedraw();
     });
 
+    // an undo during a stroke takes back the whole stroke
+    gui.on('undo_redo_pre', function() {
+      if (stroke) {
+        finishStroke();
+        blockDrag = true;
+      }
+    });
+
     gui.on('undo_path_add', function(e) {
       deleteLastPath(hit.getHitTarget());
       clearDrawingInfo();
     });
 
+    // e.points: the vertices that the edit added to the path
     gui.on('redo_path_extend', function(e) {
       var target = hit.getHitTarget();
-
-      if (pathDrawing() && prevHoverEvent) {
-        updatePathEndpoint(e.p);
-        appendVertex$1(target, pixToDataCoords(prevHoverEvent.x, prevHoverEvent.y));
+      var points = e.points;
+      var last = points[points.length - 1];
+      if (pathDrawing()) {
+        // the vertex following the pointer becomes the first added vertex
+        setVertexCoords(target, [target.gui.displayArcs.getPointCount() - 1], points[0]);
+        points.slice(1).forEach(function(p) { appendVertex$1(target, p); });
+        appendVertex$1(target, prevHoverEvent ? pixToDataCoords(prevHoverEvent.x, prevHoverEvent.y) : last);
+        hit.triggerChangeEvent();
       } else {
-        appendVertex$1(target, e.p);
+        points.forEach(function(p) { appendVertex$1(target, p); });
       }
       if (e.shapes) {
         replaceDrawnShapes(e.shapes);
@@ -24617,11 +25664,13 @@
 
     gui.on('undo_path_extend', function(e) {
       var target = hit.getHitTarget();
-      if (pathDrawing() && prevHoverEvent) {
+      // while drawing, this also removes the vertex that follows the pointer,
+      // and the path's new last vertex takes its place
+      for (var i=0; i<e.points.length; i++) {
         deleteLastVertex(target);
+      }
+      if (pathDrawing() && prevHoverEvent) {
         updatePathEndpoint(pixToDataCoords(prevHoverEvent.x, prevHoverEvent.y));
-      } else {
-        deleteLastVertex(target);
       }
       if (e.shapes) {
         replaceDrawnShapes(e.shapes);
@@ -24741,60 +25790,170 @@
     });
 
     gui.map.getMouse().on('dragend', function(e) {
-      pencilPoints = []; // re-enable pencil after closing a path
+      finishStroke();
+      blockDrag = false;
     });
 
     gui.map.getMouse().on('drag', function(e) {
+      if (blockDrag) {
+        e.stopPropagation(); // don't pan until the mouse is released
+        return;
+      }
       if (!pencilIsActive()) {
-        if (!pencilPoints) {
-          // null points signals that a path was just completed -- block panning
-          e.stopPropagation();
-        }
         return;
       }
       if (gui.keyboard.spaceIsPressed()) {
         // pan if dragging with spacebar down
-        pencilPoints = []; // don't continue previous line after panning
+        finishStroke();
         return;
       }
       e.stopPropagation(); // prevent panning
-      hoverVertexInfo = findPathStartInfo(e);
-      var xy = [e.x, e.y], xy2;
-      var p = pixToDataCoords(e.x, e.y);
-      var addedToPath = true;
-      if (!pathDrawing()) {
-        pencilPoints = [xy];
-        startNewPath(p);
-      } else if (pencilPoints.length == 0) {
-        // start pencil-drawing when a path is started
-        pencilPoints = [xy];
-        extendCurrentPath(p);
-      } else if (polygonMode() && hoverVertexInfo && pencilPoints.length > 2) {
-        // close path
-        p = hoverVertexInfo.point;
-        appendVertex$1(hit.getHitTarget(), p);
-        extendCurrentPath(p);
-        pencilPoints = null; // stop drawing
-      } else if (pencilPoints.length >= 2 && pointExceedsTolerance(xy, pencilPoints, 1.2)) {
-        xy2 = pencilPoints.pop();
-        p = pixToDataCoords(xy2[0], xy2[1]);
-        extendCurrentPath(p);
-        // kludgy way to get a smoother line (could be better)
-        // not this pencilPoints = [getAvgPoint(pencilPoints), xy2, xy];
-        // not this pencilPoints = pencilPoints.slice(-2).concat([xy2, xy]);
-        pencilPoints = [getAvgPoint(pencilPoints.slice(-3).concat([xy2])), xy2, xy];
+      if (!stroke) {
+        if (geom.distance2D(0, 0, e.dragX, e.dragY) < STROKE_START_DIST) return;
+        startStroke(e);
+        if (!stroke) return;
+      }
+      hoverVertexInfo = polygonMode() ? findPathStartInfo(e) : null;
+      if (hoverVertexInfo && stroke.sampleCount > 1) {
+        // the stroke has returned to the start of the path -- close it
+        finishStroke(hoverVertexInfo);
+        blockDrag = true;
       } else {
-        // skip this point, update the hover line
-        pencilPoints.push(xy);
-        updatePathEndpoint(p);
-        addedToPath = false;
-      }
-      if (addedToPath) {
-        //
-        prevVertexAddedEvent = e;
+        addStrokeSample(e);
       }
     }, null, 3); // higher priority than hit control
 
+    // A stroke is smoothed as it is drawn. Vertices are placed some way behind
+    // the pointer, where later samples no longer change the curve, and they stay
+    // where they are. Between the last of them and the pointer, the path shows
+    // the pointer's own trace (see updateStrokeTail()).
+    //
+    // The first vertex of the stroke (the anchor) is either the start of a new
+    // path or the vertex that was following the pointer when the mouse was
+    // pressed. Vertices are added to the path as they are placed, but the edit
+    // that records them is made when the stroke ends, so that an undo takes back
+    // the whole stroke.
+    function startStroke(e) {
+      var target = hit.getHitTarget();
+      var anchorCommitted = !pathDrawing();
+      var n, anchor;
+      if (anchorCommitted) {
+        // the path_add edit records the anchor
+        hoverVertexInfo = null;
+        startNewPath(pixToDataCoords(e.x - e.dragX, e.y - e.dragY));
+      } else if (polygonMode() && hoverVertexInfo?.type == 'vertex') {
+        // pressing on a vertex closes the polygon, as a click does
+        extendCurrentPath([getLastVertexCoords(target)], true);
+        blockDrag = true;
+        return;
+      } else if (pointerIsOnLastVertex(target)) {
+        // continue from the last vertex rather than doubling it
+        anchorCommitted = true;
+      } else {
+        // leave the vertex under the pointer behind as the anchor, and add a new
+        // one to follow the pointer
+        appendVertex$1(target, getLastVertexCoords(target));
+      }
+      n = target.gui.displayArcs.getPointCount();
+      anchor = target.gui.displayArcs.getVertex2(n - 2);
+      stroke = {
+        anchorCommitted: anchorCommitted,
+        // data coords of the vertices before the pointer that no edit records yet
+        points: anchorCommitted ? [] : [getVertexCoords(target, n - 2)],
+        // fitted in display coords, which survive a zoom mid-stroke
+        fitter: new internal.GaussianStrokeFitter(anchor, {pixelSize: ext.getPixelSize()}),
+        previewCount: 0, // vertices between the placed vertices and the pointer
+        sampleCount: 0,
+        lastEvent: e
+      };
+    }
+
+    // Test if the vertex following the pointer is on the path's last vertex
+    function pointerIsOnLastVertex(target) {
+      var arcs = target.gui.displayArcs;
+      var n = arcs.getPointCount();
+      var a = arcs.getVertex2(n - 1), b = arcs.getVertex2(n - 2);
+      return geom.distance2D(a[0], a[1], b[0], b[1]) / ext.getPixelSize() < 3;
+    }
+
+    function addStrokeSample(e) {
+      var s = stroke;
+      var placed = s.fitter.addSample(ext.pixCoordsToMapCoords(e.x, e.y));
+      s.sampleCount++;
+      s.lastEvent = e;
+      updateStrokeTail(s, placed, s.fitter.getPreview(), pixToDataCoords(e.x, e.y));
+    }
+
+    // Rewrites the end of the path after the stroke's placed vertices: newly
+    // placed vertices, then the preview of the part of the stroke that has not
+    // been placed yet, then the vertex following the pointer. Existing vertices
+    // are overwritten rather than removed and added again, because adding or
+    // removing a vertex copies the coordinates of the whole layer.
+    // placed, preview: display coords
+    // hover: data coords
+    function updateStrokeTail(s, placed, preview, hover) {
+      var target = hit.getHitTarget();
+      var fixed = toDataCoords(target, placed);
+      var tail = fixed.concat(toDataCoords(target, preview), [hover]);
+      var count = s.previewCount + 1; // vertices after the placed vertices
+      var start = target.gui.displayArcs.getPointCount() - count;
+      var i;
+      for (; count > tail.length; count--) {
+        deleteLastVertex(target);
+      }
+      for (i = 0; i < tail.length; i++) {
+        if (i < count) {
+          setVertexCoords(target, [start + i], tail[i]);
+        } else {
+          appendVertex$1(target, tail[i]);
+        }
+      }
+      s.points = s.points.concat(fixed);
+      s.previewCount = tail.length - fixed.length - 1;
+      hit.triggerChangeEvent();
+    }
+
+    function toDataCoords(target, points) {
+      return points.map(function(p) {
+        return translateDisplayPoint(target, p);
+      });
+    }
+
+    // Completes the stroke in progress up to the pointer, and records the
+    // stroke's vertices as a single edit.
+    // end: (optional) hover info of the vertex that the stroke has to end at
+    function finishStroke(end) {
+      var s = stroke;
+      var target, rest, points, count;
+      if (!s) return;
+      stroke = null;
+      target = hit.getHitTarget();
+      rest = end ? s.fitter.addSample(end.displayPoint) : [];
+      rest = toDataCoords(target, rest.concat(s.fitter.finish()));
+      if (end && rest.length > 0) {
+        rest[rest.length - 1] = end.point;
+      }
+      // remove the preview
+      count = s.previewCount + 1;
+      for (; count > 1; count--) {
+        deleteLastVertex(target);
+      }
+      if (rest.length === 0 && s.points.length > 0) {
+        // the last vertex in the path takes the place of the vertex following the pointer
+        deleteLastVertex(target);
+        rest = [s.points.pop()];
+      } else if (rest.length > 0) {
+        setVertexCoords(target, [target.gui.displayArcs.getPointCount() - 1], rest[0]);
+      }
+      points = s.points.concat(rest);
+      if (points.length === 0 || !s.anchorCommitted && points.length == 1) {
+        hit.triggerChangeEvent(); // the stroke never left its anchor
+        return;
+      }
+      prevVertexAddedEvent = s.lastEvent;
+      extendCurrentPath(points, !!end, s.points.length);
+    }
+
     hit.on('drag', function(e) {
       if (!vertexDragging() || pathDrawing()) {
         return;
@@ -24874,7 +26033,8 @@
       if (detectDoubleClick(e)) return; // ignore second click of a dblclick
       var p = pixToDataCoords(e.x, e.y);
       if (pathDrawing()) {
-        extendCurrentPath(hoverVertexInfo?.point || p);
+        // finish the path if a vertex is selected (but not an interpolated point)
+        extendCurrentPath([hoverVertexInfo?.point || p], hoverVertexInfo?.type == 'vertex');
       } else if (hoverVertexInfo?.type == 'interpolated') {
         // don't start new path if hovering along a segment -- this is
         // likely to be an attempt to add a new vertex, not start a new path
@@ -24974,6 +26134,11 @@
 
     function finishCurrentPath() {
       if (!pathDrawing()) return;
+      if (stroke) {
+        // finishing mid-drag (e.g. with the Enter key)
+        finishStroke();
+        blockDrag = true;
+      }
       var target = hit.getHitTarget();
       if (getLastArcLength(target) <= 2) { // includes hover point
         // deleteLastPath(target);
@@ -24997,15 +26162,21 @@
       updateCursor();
     }
 
-    // p: [x, y] source data coordinates of new point on path
-    function extendCurrentPath(p) {
+    // points: [x, y] source data coordinates of vertices to add to the path. The
+    //   vertex that follows the pointer becomes points[placed], so it must
+    //   already be there; the rest are appended after it.
+    // finish: true if the path ends at an existing vertex (which closes a polygon)
+    // placed: (optional) number of points already in the path, before the vertex
+    //   that follows the pointer
+    function extendCurrentPath(points, finish, placed) {
       var target = hit.getHitTarget();
       var shapes1, shapes2;
-      // finish the path if a vertex is selected (but not an interpolated point)
-      var finish = hoverVertexInfo?.type == 'vertex';
       if (getLastArcLength(target) < 2) {
         stop$1('Defective path');
       }
+      for (var i=(placed || 0) + 1; i<points.length; i++) {
+        appendVertex$1(target, points[i]);
+      }
       if (finish && polygonMode()) {
         shapes1 = target.shapes.slice(initialShapeCount);
         try {
@@ -25017,12 +26188,12 @@
       }
       if (shapes2) {
         replaceDrawnShapes(shapes2);
-        gui.dispatchEvent('path_extend', {target, p, shapes1, shapes2});
+        gui.dispatchEvent('path_extend', {target, points, shapes1, shapes2});
         clearDrawingInfo();
         fullRedraw();
       } else {
-        appendVertex$1(target, p);
-        gui.dispatchEvent('path_extend', {target, p});
+        appendVertex$1(target, points[points.length - 1]); // the new vertex following the pointer
+        gui.dispatchEvent('path_extend', {target, points});
         hit.triggerChangeEvent(); // trigger overlay redraw
       }
     }
@@ -25923,6 +27094,112 @@
     return true;
   }
 
+  // The bold stretches of a label being edited, as [start, end) offsets into the
+  // text the user edits, and how they follow the text as it changes.
+  //
+  // The editor keeps these beside the textarea's value rather than as markup in
+  // it, so that the caret and the selection index the text the user sees. The
+  // markup they come from and go back to is read and written by
+  // readLabelValue() and writeLabelValue() in gui-label-text.mjs.
+  //
+  // Every function returns a new, normalized list -- sorted, non-empty, and with
+  // no two ranges touching -- and leaves its argument alone.
+
+  function isBoldAt(ranges, i) {
+    for (var j = 0; j < ranges.length; j++) {
+      if (i >= ranges[j][0] && i < ranges[j][1]) return true;
+    }
+    return false;
+  }
+
+  // Whether every character in [start, end) is bold. False for an empty range.
+  function rangeIsAllBold(ranges, start, end) {
+    var pos = start;
+    if (!(end > start)) return false;
+    for (var j = 0; j < ranges.length && pos < end; j++) {
+      if (ranges[j][1] <= pos) continue;
+      if (ranges[j][0] > pos) return false;
+      pos = ranges[j][1];
+    }
+    return pos >= end;
+  }
+
+  // [start, end) set bold (@on) or not.
+  function setBoldRange(ranges, start, end, on) {
+    var out = [];
+    ranges.forEach(function(r) {
+      if (r[1] <= start || r[0] >= end) {
+        out.push([r[0], r[1]]);
+        return;
+      }
+      if (r[0] < start) out.push([r[0], start]);
+      if (r[1] > end) out.push([end, r[1]]);
+    });
+    if (on && end > start) out.push([start, end]);
+    return normalize(out);
+  }
+
+  // What pressing Bold does to [start, end): unbolds a range that is all bold
+  // and bolds any other, including one that is partly bold -- the convention of
+  // every word processor, and the reading that leaves the range one weight.
+  function toggleBoldRange(ranges, start, end) {
+    return setBoldRange(ranges, start, end, !rangeIsAllBold(ranges, start, end));
+  }
+
+  // The ranges for @newText, given the ranges they were for @oldText.
+  //
+  // The edit is found as the text between the longest common prefix and suffix,
+  // which is exact for everything a textarea does in one step -- typing,
+  // deleting, pasting over a selection, an IME composition -- and still gives a
+  // sensible answer for its own undo, which can replace a larger stretch at once.
+  //
+  // Inserted text takes the weight of the character before it, so typing on at
+  // the end of a bold word stays bold and typing after it does not; at the start
+  // of the text it takes the weight of the first character.
+  function updateBoldForEdit(ranges, oldText, newText) {
+    var edit, inherit, mapped;
+    if (ranges.length === 0 || oldText === newText) return normalize(ranges);
+    edit = findEdit(oldText, newText);
+    inherit = edit.start > 0 ? isBoldAt(ranges, edit.start - 1) :
+      isBoldAt(ranges, edit.start + edit.removed);
+    mapped = ranges.map(function(r) {
+      return [mapOffset(r[0], edit), mapOffset(r[1], edit)];
+    });
+    return setBoldRange(normalize(mapped), edit.start, edit.start + edit.inserted,
+      inherit);
+  }
+
+  function sameBoldRanges(a, b) {
+    if (a.length != b.length) return false;
+    for (var i = 0; i < a.length; i++) {
+      if (a[i][0] !== b[i][0] || a[i][1] !== b[i][1]) return false;
+    }
+    return true;
+  }
+
+  // {start, removed, inserted}: characters [start, start + removed) of the old
+  // text became [start, start + inserted) of the new one.
+  function findEdit(a, b) {
+    var max = Math.min(a.length, b.length);
+    var pre = 0, suf = 0;
+    while (pre < max && a.charCodeAt(pre) === b.charCodeAt(pre)) pre++;
+    while (suf < max - pre &&
+      a.charCodeAt(a.length - 1 - suf) === b.charCodeAt(b.length - 1 - suf)) suf++;
+    return {start: pre, removed: a.length - pre - suf, inserted: b.length - pre - suf};
+  }
+
+  // A boundary inside the removed stretch collapses to its start. One after it
+  // moves by the change in length.
+  function mapOffset(x, edit) {
+    if (x <= edit.start) return x;
+    if (x >= edit.start + edit.removed) return x - edit.removed + edit.inserted;
+    return edit.start;
+  }
+
+  function normalize(ranges) {
+    return internal.svg.normalizeBoldRanges(ranges);
+  }
+
   // Caret and selection geometry, computed from the SVG character position APIs.
   //
   // The APIs behave identically on <text> and on <text><textPath>, so this code
@@ -26242,16 +27519,19 @@
     // so the tool cannot do this at its own call sites.
     self.open = function(target, id, opts) {
       var rec = getRecord(target, id);
+      var value;
       if (!rec) return false;
       self.close();
+      value = readLabelValue(rec['label-text']);
       session = {
         target: target,
         id: id,
         pending: null,
         created: false,
         onClose: opts && opts.onClose || null,
-        startText: decodeLabelText(rec['label-text']),
-        startBreaks: readSoftBreaks(rec['label-text']).breaks,
+        startText: value.text,
+        startBreaks: value.breaks,
+        startBold: value.bold,
         nodes: null
       };
       startSession();
@@ -26297,6 +27577,7 @@
         onClose: opts.onClose || null,
         startText: '',
         startBreaks: [],
+        startBold: [],
         nodes: null
       };
       startSession();
@@ -26305,6 +27586,7 @@
 
     function startSession() {
       session.text = session.startText;
+      session.bold = session.startBold;
       getTextarea().value = session.text;
       setCaret(session.text.length, session.text.length);
       focusTextarea();
@@ -26320,6 +27602,74 @@
       self.refresh();
     }
 
+    // The text a Bold item in the context menu would act on, as {start, end,
+    // bold}, where @bold says whether all of it is bold already; or null. That is
+    // the selection, or with nothing selected, the word under @p -- read when the
+    // menu opens, because by the time an item is chosen the pointer is on the
+    // menu rather than the label.
+    self.getBoldTargetAtPoint = function(p) {
+      var start = getCaretStart(), end = getCaretEnd();
+      var range;
+      if (!session) return null;
+      if (!(end > start)) {
+        start = getEditIndexAtPoint(p);
+        if (start < 0) return null;
+        range = getWordRange(session.text, start);
+        start = range[0];
+        end = range[1];
+      }
+      if (!(end > start)) return null;
+      return {start: start, end: end, bold: rangeIsAllBold(session.bold, start, end)};
+    };
+
+    // Bolds the selected text, or unbolds it if it is all bold already; or the
+    // text from @start to @end, which is selected first. The text stays
+    // selected, so that a second press takes it back.
+    self.toggleBold = function(start, end) {
+      if (!session) return;
+      if (start >= 0 && end > start) {
+        setCaret(start, end);
+      } else {
+        start = getCaretStart();
+        end = getCaretEnd();
+      }
+      if (!(end > start)) return;
+      session.bold = toggleBoldRange(session.bold, start, end);
+      self.refresh();
+    };
+
+    // Selects the text between two points in the label's own coordinate space,
+    // for a drag across it. The selection runs from @p0 towards @p1, so that
+    // shift-arrow then extends it from the end the pointer let go of.
+    self.selectBetweenPoints = function(p0, p1) {
+      var a = getEditIndexAtPoint(p0);
+      var b = getEditIndexAtPoint(p1);
+      if (a < 0 || b < 0) return false;
+      setCaret(Math.min(a, b), Math.max(a, b), b < a ? 'backward' : 'forward');
+      redrawCaret();
+      return true;
+    };
+
+    // Selects the word under @p, for a double-click inside the text.
+    self.selectWordAtPoint = function(p) {
+      var i = getEditIndexAtPoint(p);
+      var range;
+      if (i < 0) return false;
+      range = getWordRange(session.text, i);
+      setCaret(range[0], range[1]);
+      redrawCaret();
+      return true;
+    };
+
+    function getEditIndexAtPoint(p) {
+      var provider, layout, i;
+      if (!session || !session.nodes) return -1;
+      provider = getProvider(session.nodes);
+      layout = getLayout(session);
+      i = getCaretIndexAtPoint(provider, p, getRenderedLength(session.text, layout));
+      return i < 0 ? -1 : getEditIndex(session.text, i, layout);
+    }
+
     self.isOpen = function() {
       return !!session;
     };
@@ -26350,6 +27700,7 @@
       // arriving just after a redraw is holding one of those.
       if (session.pending && node.closest &&
         node.closest('.label-edit-pending')) return true;
+      if (session.nodes && session.nodes.symbol.contains(node)) return true;
       return !!groups && (groups.hit.contains(node) || groups.back.contains(node) ||
         groups.front.contains(node));
     };
@@ -26408,7 +27759,7 @@
       if (i < 0) return false;
       i = getEditIndex(session.text, i, layout);
       setCaret(i, i);
-      drawOverlay(session);
+      redrawCaret();
       return true;
     };
 
@@ -26442,7 +27793,7 @@
       var blank = textHasNoGlyphs(o.text);
       var breaks = getBreaks(o);
       if (o.pending) {
-        if (!blank) o.pending.create(insertSoftBreaks(o.text, breaks));
+        if (!blank) o.pending.create(writeLabelValue(o.text, breaks, o.bold));
         return;
       }
       if (blank) {
@@ -26450,8 +27801,9 @@
         removeLabel(o);
         return;
       }
-      if (o.text === o.startText && sameSoftBreaks(breaks, o.startBreaks)) return;
-      runGuiEditCommand(gui, getLabelTextCommand(insertSoftBreaks(o.text, breaks),
+      if (o.text === o.startText && sameSoftBreaks(breaks, o.startBreaks) &&
+        sameBoldRanges(o.bold, o.startBold)) return;
+      runGuiEditCommand(gui, getLabelTextCommand(writeLabelValue(o.text, breaks, o.bold),
         o.id, o.target.name), {
         title: 'Label text'
       });
@@ -26464,7 +27816,7 @@
       var rec;
       if (!shp || shp.length > 1) return [];
       rec = o.pending ? o.pending.getStyle() : getRecord(o.target, o.id);
-      return getSoftBreaks(o.text, rec);
+      return getSoftBreaks(o.text, rec, o.bold);
     }
 
     // Deletes the label's feature, geometry and all.
@@ -26551,7 +27903,7 @@
       var rec = Object.assign({}, o.pending.getStyle());
       // With its soft breaks, so that what is aligned and what a callout meets
       // is the block as wrapped
-      rec['label-text'] = encodeLabelText(insertSoftBreaks(o.text, getBreaks(o)));
+      rec['label-text'] = encodeLabelText(writeLabelValue(o.text, getBreaks(o), o.bold));
       // No need to expand label-pos here, or to measure its text: the renderer
       // resolves the position and asks for the width it needs, so a pending
       // label is laid out by exactly the same code as a committed one.
@@ -26599,11 +27951,15 @@
     //   - Line breaks. An empty <tspan> lays out nothing, so a line just opened
     //     with Enter had no position for the caret to move to. The placeholder in
     //     getRenderedLines() gives it one.
+    //
+    // Bold stretches are <tspan>s inside the line they fall on. The character
+    // position APIs count the characters of descendant elements in document
+    // order, so the rendered indexes stay the edited ones whatever the runs are.
     function writeText(o) {
       var content = o.nodes.content;
       var breaks = getBreaks(o);
-      var written = o.text + '\u0000' + breaks.join(',');
-      var lines, i, tspan;
+      var written = o.text + '\u0000' + breaks.join(',') + '\u0000' + o.bold.join(';');
+      var lines, full, pos, i, tspan;
       // refresh() runs on every map render, which during a pan is every frame;
       // rebuilding text nodes that already say the right thing is pure waste
       if (o.writtenTo === content && o.writtenText === written) return;
@@ -26617,23 +27973,53 @@
       // or from a label that was multi-line before it was given a path -- and
       // turning them into spaces is what export does too.
       if (getLayout(o) === LINES_JOINED) {
-        content.appendChild(document.createTextNode(getRenderedContent(o.text)));
+        full = getRenderedContent(o.text);
+        appendRuns(content, full, o.bold, 0, full.length);
         return;
       }
       // A soft break keeps the space it broke at at the end of its line, where
       // the rendered label drops it: here every typed character has to be one
       // the caret can sit beside.
+      //
+      // The lines laid end to end are the edited text character for character --
+      // each hard break is the placeholder that opens the line after it -- so a
+      // line's offset in the one is its offset in the other.
       lines = getRenderedLines(o.text, breaks);
-      content.appendChild(document.createTextNode(lines[0]));
+      full = lines.join('');
+      pos = lines[0].length;
+      appendRuns(content, full, o.bold, 0, pos);
       for (i = 1; i < lines.length; i++) {
         tspan = document.createElementNS(SVG_NS$3, 'tspan');
         tspan.setAttribute('x', o.nodes.text.getAttribute('x') || 0);
         tspan.setAttribute('dy', getLineHeight(o));
-        tspan.appendChild(document.createTextNode(lines[i]));
+        appendRuns(tspan, full, o.bold, pos, pos + lines[i].length);
+        pos += lines[i].length;
         content.appendChild(tspan);
       }
     }
 
+    // Characters [start, end) of @str into @parent, the bold ones in bold
+    // <tspan>s and the rest as text. An empty stretch still gets a text node, as
+    // an empty line always did.
+    function appendRuns(parent, str, bold, start, end) {
+      var runs = internal.svg.getBoldRuns(str, bold, start, end);
+      var tspan;
+      if (runs.length === 0) {
+        parent.appendChild(document.createTextNode(''));
+        return;
+      }
+      runs.forEach(function(run) {
+        if (!run.bold) {
+          parent.appendChild(document.createTextNode(run.text));
+          return;
+        }
+        tspan = document.createElementNS(SVG_NS$3, 'tspan');
+        tspan.setAttribute('font-weight', internal.svg.LABEL_BOLD_WEIGHT);
+        tspan.appendChild(document.createTextNode(run.text));
+        parent.appendChild(tspan);
+      });
+    }
+
     // Cached per session: asking costs a record lookup and a geometry test, and
     // the answer cannot change while a session is open.
     function getLayout(o) {
@@ -26759,18 +28145,33 @@
       return el;
     }
 
+    // Updated in place rather than rebuilt. Every caret move redraws the
+    // overlay, and a click is one: a region replaced by the first click of a
+    // double-click takes the node the button went down on out of the document,
+    // and the browser then fires neither the click nor the dblclick.
     function drawHitRegion(o, g, box, caret, pathId) {
-      var el;
-      clear(g);
-      if (box) g.appendChild(rect(box, 'label-edit-hit-area'));
-      if (!pathId) return;
+      var area = g.querySelector('.label-edit-hit-area');
+      var line = g.querySelector('.label-edit-hit-baseline');
+      if (box && area) {
+        setRect(area, box);
+      } else if (box) {
+        g.insertBefore(rect(box, 'label-edit-hit-area'), g.firstChild);
+      } else if (area) {
+        g.removeChild(area);
+      }
+      if (!pathId) {
+        if (line) g.removeChild(line);
+        return;
+      }
       // A thickened, transparent copy of the baseline: about one em wide, so that
       // the region follows the curve rather than boxing it.
-      el = document.createElementNS(SVG_NS$3, 'use');
-      el.setAttribute('href', '#' + pathId);
-      el.setAttribute('class', 'label-edit-hit-baseline');
-      el.setAttribute('stroke-width', caret ? caret.ascent + caret.descent : 12);
-      g.appendChild(el);
+      if (!line) {
+        line = document.createElementNS(SVG_NS$3, 'use');
+        line.setAttribute('class', 'label-edit-hit-baseline');
+        g.appendChild(line);
+      }
+      line.setAttribute('href', '#' + pathId);
+      line.setAttribute('stroke-width', caret ? caret.ascent + caret.descent : 12);
     }
 
     function getLabelPathId(nodes) {
@@ -26863,12 +28264,16 @@
 
     function rect(box, className) {
       var el = document.createElementNS(SVG_NS$3, 'rect');
+      setRect(el, box);
+      el.setAttribute('class', className);
+      return el;
+    }
+
+    function setRect(el, box) {
       el.setAttribute('x', box.x);
       el.setAttribute('y', box.y);
       el.setAttribute('width', box.width);
       el.setAttribute('height', box.height);
-      el.setAttribute('class', className);
-      return el;
     }
 
     function caretLine(caret) {
@@ -26898,6 +28303,7 @@
 
       textarea.addEventListener('input', function() {
         if (!session) return;
+        session.bold = updateBoldForEdit(session.bold, session.text, textarea.value);
         session.text = textarea.value;
         self.refresh();
       });
@@ -26922,6 +28328,13 @@
         return !e.isComposing && e.keyCode != 229;
       }
 
+      // Cmd-B on a Mac, Ctrl-B elsewhere, as in every text editor. A textarea
+      // has no default for it to replace.
+      function isBoldKey(e) {
+        if (!(e.metaKey || e.ctrlKey) || e.shiftKey || e.altKey) return false;
+        return (e.key || '').toLowerCase() == 'b';
+      }
+
       textarea.addEventListener('keydown', function(e) {
         if (!session) return;
         // The GUI's global key handlers are told to keep out of the way by
@@ -26948,6 +28361,10 @@
           e.preventDefault();
           e.stopPropagation();
           self.close();
+        } else if (isBoldKey(e)) {
+          e.preventDefault();
+          e.stopPropagation();
+          self.toggleBold();
         } else {
           e.stopPropagation();
         }
@@ -27001,10 +28418,11 @@
       return textarea ? textarea.selectionEnd : 0;
     }
 
-    function setCaret(start, end) {
+    // @direction: 'forward' (the default) or 'backward', which end of the
+    //   selection shift-arrow moves
+    function setCaret(start, end, direction) {
       if (!textarea) return;
-      textarea.selectionStart = start;
-      textarea.selectionEnd = end;
+      textarea.setSelectionRange(start, end, direction || 'forward');
     }
   }
 
@@ -27697,7 +29115,7 @@
   }
 
   // The label tool: arming a label type, placing an anchor or a curve, turning
-  // the result into an -add-label command, and handing the new label to the
+  // the result into a -labels coordinates= command, and handing the new label to the
   // in-place text editor.
   //
   // Creating a label and editing one are one gesture, not two: a click leaves a
@@ -27761,6 +29179,14 @@
     // The mouseup that ended the last block drag, or null. A short one is
     // followed by a click from the same mouseup, which it has already handled.
     var blockRelease = null;
+    // A drag across the text of the label being typed into, which selects the
+    // characters it passes over: {start}, where start is the pointer's position
+    // at the press, filled in by the first drag event.
+    var selectDrag = null;
+    // The mouseup that ended the last select drag, or null, for the same reason
+    // as blockRelease: the click that follows it would put the caret down and
+    // lose the selection just made.
+    var selectRelease = null;
     var editor = new LabelEditor(gui, ext);
     var selection = new LabelSelection(gui, ext, hit, function() {
       return editor.isOpen() ? editor.getFeatureId() : -1;
@@ -27790,7 +29216,7 @@
     // tools do on entry as well (`addEmptyLayer()` in `gui-edit-points.mjs` and
     // `gui-draw-lines2.mjs`). It is named rather than left unnamed, unlike
     // theirs: it is the layer `getLabelTarget()` would have created for a label
-    // anyway, and naming it is what lets the `-add-label` commands name their
+    // anyway, and naming it is what lets the `-labels` commands name their
     // target and so replay from the session history.
     //
     // Called before entering the tool's own mode, because getInitialTool() reads
@@ -27840,6 +29266,8 @@
       handleDrag = null;
       releasedDrag = null;
       blockRelease = null;
+      selectDrag = null;
+      selectRelease = null;
       shownHandles = null;
       clearBlockDrag();
       hoverHandle = null;
@@ -27966,6 +29394,10 @@
         blockRelease = null;
         return;
       }
+      if (selectRelease && getDomEvent(e) == selectRelease) {
+        selectRelease = null;
+        return;
+      }
       if (armed == 'path' && drawingCurve()) {
         extendCurve(pixToMapCoords(e.x, e.y));
         return;
@@ -28038,9 +29470,34 @@
           e.flipLabel = getFlipAction(target, id);
         }
       }
+      if (target && editor.isOpen() && clickIsOnEditedLabel(e)) {
+        addBoldAction(e, target);
+      }
       gui.contextMenu.open(e, target);
     });
 
+    // Bold for the words being typed: the selection, or with nothing selected,
+    // the word that was right-clicked. The item says what it will do, since a
+    // menu has no pressed state to show that the words are bold already. There
+    // is none in a font with no bold face (see fontHasBoldFace()).
+    function addBoldAction(e, target) {
+      var range = editor.getBoldTargetAtPoint(getLabelSpacePoint(editor.getAnchorCoords(), e));
+      if (!range || !fontHasBoldFace(getEditedFontName(target))) return;
+      e.boldText = {
+        label: range.bold ? 'remove bold' : 'bold text',
+        run: function() { editor.toggleBold(range.start, range.end); }
+      };
+    }
+
+    // The font the label being typed into is drawn in: its own, or for a label
+    // not created yet, the one the panel will give it.
+    function getEditedFontName(target) {
+      var id = editor.getFeatureId();
+      var rec = id > -1 ? getRecord(target, id) : getNewLabelStyle(gui);
+      var font = rec && rec['font-family'];
+      return font || (id > -1 ? getDefaultFontName() : getNewLabelFontName());
+    }
+
     // The label a right-click was aimed at, or -1.
     //
     // A label being typed into is not a hit target -- the editor's own overlay
@@ -28296,7 +29753,16 @@
     // takes a drag -- everything else over a label is left alone so that the map
     // still pans, which is why these handlers stop the event themselves.
     hit.on('dragstart', function(e) {
-      if (!active() || drawingCurve() || editor.isOpen()) return;
+      if (!active() || drawingCurve()) return;
+      // With a label open for typing, a drag across its text selects some of it,
+      // as it would in any text field. Anywhere else the map still pans.
+      if (editor.isOpen()) {
+        if (clickIsOnEditedLabel(e)) {
+          selectDrag = {start: null};
+          consumeDrag(e);
+        }
+        return;
+      }
       // The handle comes from the last hover, not from testing the pointer here.
       // dragstart arrives with the pointer already moved off the handle -- by the
       // first mousemove that made it a drag, which on a quick gesture is further
@@ -28321,6 +29787,22 @@
       consumeDrag(e);
     });
 
+    // The selection runs from where the button went down, which dragstart does
+    // not report -- it arrives after the first move -- but every drag event
+    // carries its distance from the press.
+    function updateSelectDrag(e) {
+      var anchor = editor.getAnchorCoords();
+      if (!editor.isOpen() || !anchor) {
+        selectDrag = null;
+        return;
+      }
+      if (!selectDrag.start) {
+        selectDrag.start = {x: e.x - (e.dragX || 0), y: e.y - (e.dragY || 0)};
+      }
+      editor.selectBetweenPoints(getLabelSpacePoint(anchor, selectDrag.start),
+        getLabelSpacePoint(anchor, e));
+    }
+
     // handle: {id, index, point, pointer} from findHandle(), or the same shape
     //   made up for a drag that grabbed a label somewhere other than its knot
     function beginKnotDrag(handle) {
@@ -28346,6 +29828,11 @@
 
     hit.on('drag', function(e) {
       var shp, p;
+      if (selectDrag) {
+        consumeDrag(e);
+        updateSelectDrag(e);
+        return;
+      }
       if (textDrag) {
         consumeDrag(e);
         updateTextDrag(e);
@@ -28380,6 +29867,12 @@
 
     hit.on('dragend', function(e) {
       var o = drag;
+      if (selectDrag) {
+        selectDrag = null;
+        selectRelease = getDomEvent(e);
+        consumeDrag(e);
+        return;
+      }
       if (textDrag) {
         o = textDrag;
         textDrag = null;
@@ -29020,9 +30513,9 @@
       selection.refresh(true);
     }
 
-    // Turns the previewed offset into one -style.
+    // Turns the previewed offset into one -labels.
     //
-    // Only the label under the pointer moves, even with several selected: -style
+    // Only the label under the pointer moves, even with several selected: -labels
     // writes one value to every id it is given, so a group drag would set them
     // all to the same absolute offset rather than nudging each by its own delta.
     function commitOffsetDrag(o) {
@@ -29166,7 +30659,7 @@
     }
 
     function dragging() {
-      return !!(drag || textDrag || handleDrag || blockDrag);
+      return !!(drag || textDrag || handleDrag || blockDrag || selectDrag);
     }
 
     // The exception is about the pointer being on the glyphs, not about the mode:
@@ -29284,6 +30777,12 @@
         resetHandle(hoverHandle);
         return;
       }
+      // Inside the text being typed, a double-click selects a word -- which is
+      // the quickest way to pick the words to set in bold.
+      if (editor.isOpen() && clickIsOnEditedLabel(e)) {
+        editor.selectWordAtPoint(getLabelSpacePoint(editor.getAnchorCoords(), e));
+        return;
+      }
       // Double-clicking a label reaches straight into its text, which is the
       // gesture most editors use and saves selecting it first. The single-click
       // route got there already if the label was the selection; this covers the
@@ -29576,10 +31075,20 @@
         // array of field names of relevant svg display properties
         fields = getStyleFields(lyr).filter(function(f) {return f in styleIndex;}),
         records = lyr.data.getRecords();
+    // Arrowheads are drawn by the canvas as shapes, not set as attributes, so
+    // they are not among the attribute fields. Assigned on every call, like the
+    // rest, because the style object is reused from one feature to the next.
+    var arrowFields = getLineArrowFields(lyr);
+    var hasStrokeFields = fields.includes('stroke') || fields.includes('stroke-width');
 
     var styler = function(style, i) {
       var rec = records[i];
       var fname, val;
+      if (arrowFields) {
+        style.lineStart = rec && rec['line-start'];
+        style.lineEnd = rec && rec['line-end'];
+        style.lineEndSize = rec && rec['line-end-size'];
+      }
       for (var j=0; j<fields.length; j++) {
         fname = fields[j];
         val = rec && rec[fname];
@@ -29601,6 +31110,12 @@
       }
     };
     var style = {styler: styler, type: 'styled'};
+    // A line layer styled with nothing but arrowheads is drawn the way SVG
+    // export draws it, with the black 1px line the layer's group gives it.
+    if (arrowFields && !hasStrokeFields) {
+      style.strokeColor = 'black';
+      style.strokeWidth = 1;
+    }
     // use squares if radius is missing... (TODO: check behavior with labels, etc)
     if (lyr.geometry_type == 'point' && fields.includes('r') === false) {
       style.dotSize = 1;
@@ -29615,7 +31130,18 @@
       // return fields.indexOf('r') > -1; // require 'r' field for point symbols
       return fields.includes('fill') || fields.includes('r'); // support colored squares
     }
-    return utils$1.difference(fields, ['opacity', 'class']).length > 0;
+    return utils$1.difference(fields, ['opacity', 'class']).length > 0 ||
+      !!getLineArrowFields(lyr);
+  }
+
+  // The arrowhead fields a line layer has, or null
+  function getLineArrowFields(lyr) {
+    var fields;
+    if (lyr.geometry_type != 'polyline' || !lyr.data) return null;
+    fields = lyr.data.getFields().filter(function(f) {
+      return internal.svg.lineArrowFields.includes(f);
+    });
+    return fields.length > 0 ? fields : null;
   }
 
   function getStyleFields(lyr) {
@@ -30411,7 +31937,7 @@
     canv.setAttribute('height', h);
     ctx.scale(w / tw, h / th);
     if (o.background) {
-      ctx.fillStyle = o.background;
+      ctx.fillStyle = getCanvasColor(o.background);
       ctx.fillRect(0, 0, tw, th);
     }
     if (o.type == 'dots' || o.type == 'squares') makeDotFill(o, ctx, 1);
@@ -30475,10 +32001,16 @@
     };
   }
 
+  // SVG's "none" is not a canvas colour, and a canvas ignores a fillStyle it
+  // cannot parse -- keeping the last one set, which on a fresh tile is black.
+  function getCanvasColor(color) {
+    return String(color).trim().toLowerCase() == 'none' ? 'transparent' : color;
+  }
+
   function makeDashFill(o, ctx, res) {
     var x = 0;
     for (var i=0; i<o.colors.length; i++) {
-      ctx.fillStyle = o.colors[i];
+      ctx.fillStyle = getCanvasColor(o.colors[i]);
       ctx.fillRect(x, 0, o.width * res, o.dashes[0] * res);
       x += res * (o.spacing + o.width);
     }
@@ -30493,7 +32025,7 @@
     var x = 0, y = 0;
     for (var i=0; i<dots; i++) {
       if (o.type == 'dots') ctx.beginPath();
-      ctx.fillStyle = o.colors[(i + Math.floor(i / n)) % n];
+      ctx.fillStyle = getCanvasColor(o.colors[(i + Math.floor(i / n)) % n]);
       if (o.type == 'dots') {
         ctx.arc(x + r, y + r, r, 0, Math.PI * 2);
       } else {
@@ -30510,8 +32042,8 @@
     var w;
     for (var i=0, x=0; i<o.widths.length; i++) {
       w = o.widths[i] * res;
-      ctx.fillStyle = o.colors[i];
-      ctx.fillRect(x, 0, x + w, h);
+      ctx.fillStyle = getCanvasColor(o.colors[i]);
+      ctx.fillRect(x, 0, w, h);
       x += w;
     }
   }
@@ -30568,7 +32100,7 @@
       arcs = getArcsForRendering(lyr, ext);
       filter = getShapeFilter(arcs, layer.shapes, ext);
       canv.drawStyledPaths(layer.shapes, arcs, style, filter);
-      if (style.vertices) {
+      if (style.vertices || style.vertex_overlay || style.pending_snip) {
         canv.drawVertices(layer.shapes, arcs, style, filter);
       }
     }
@@ -30715,6 +32247,8 @@
     };
     */
 
+    // Draws a dot at each vertex (if style.vertices is set), and the markers of
+    // style.vertex_overlay and style.pending_snip.
     _self.drawVertices = function(shapes, arcs, style, filter) {
       var iter = new internal.ShapeIter(arcs);
       var t = getScaledTransform(_ext);
@@ -30724,7 +32258,7 @@
       var i, j, p;
       _ctx.beginPath();
       _ctx.fillStyle = color;
-      for (i=0; i<shapes.length; i++) {
+      for (i=0; style.vertices && i<shapes.length; i++) {
         var shp = shapes[i];
         if (!shp || filter && !filter(i)) continue;
         for (j=0; j<shp.length; j++) {
@@ -30762,8 +32296,10 @@
     _self.drawStyledPaths = function(shapes, arcs, style, filter) {
       var styleIndex = {};
       var batchSize = 100;
-      var startPath = getPathStart(_ext, getScaledLineScale(_ext, style));
+      var lineScale = getScaledLineScale(_ext, style);
+      var startPath = getPathStart(_ext, lineScale);
       var draw = getShapePencil(arcs, _ext);
+      var arrowPencil = null;
       var key, item, shp;
       var styler = style.styler || null;
       var drawStyle = styler ? utils$1.defaults({}, style) : style;
@@ -30773,6 +32309,13 @@
         if (styler) {
           styler(drawStyle, i);
         }
+        // A line with arrowheads is drawn on its own, trimmed to meet its heads;
+        // see svg-line-arrows.mjs. Only lines styled with line-start or line-end
+        // get here, so the batch below is untouched for everything else.
+        if (drawStyle.lineStart || drawStyle.lineEnd) {
+          if (!arrowPencil) arrowPencil = getArrowLinePencil(arcs, _ext, lineScale);
+          if (arrowPencil(shp, _ctx, drawStyle, startPath, draw)) continue;
+        }
         if (!drawStyle.batchOverlay && (drawStyle.overlay ||
           drawStyle.opacity < 1 || drawStyle.fillOpacity < 1 ||
           drawStyle.strokeOpacity < 1 || drawStyle.fillEffect)) {
@@ -31127,6 +32670,10 @@
     return x + 0.5 | 0;
   }
 
+  function noRound(x) {
+    return x;
+  }
+
   function roundToHalfPix(x) {
     return (x * 2 | 0) / 2;
   }
@@ -31138,15 +32685,113 @@
       if (style.fillEffect) {
         ctx.fillStyle = getCanvasFillEffect(ctx, shp, arcs, ext, style);
       }
+      // Rounding also drops vertices that land on the same pixel, which keeps
+      // detailed shapes fast to draw, so only a style for a few short paths
+      // should turn it off (see gui-overlay-styler.mjs).
+      var round = style.unroundedCoords ? noRound : roundToPix;
       for (var i=0, n=shp ? shp.length : 0; i<n; i++) {
         iter.init(shp[i]);
         // 0.2 trades visible seams for performance
         // drawPath(protectIterForDrawing(iter, ext), t, ctx, 0.2);
-        drawPath2(protectIterForDrawing(iter, ext), t, ctx, roundToPix);
+        drawPath2(protectIterForDrawing(iter, ext), t, ctx, round);
       }
     };
   }
 
+  // Returns a function that draws one line feature with its arrowheads, and
+  // returns false if the feature has none to draw (a style of 'none', or no
+  // stroke), for the caller to draw it the usual way.
+  //
+  // Heads are sized by the same factor as the line width, so that a preview
+  // matches the exported SVG. Far enough in that paths are clipped to the view
+  // (see protectIterForDrawing()), the line is drawn clipped and untrimmed and
+  // only the heads are added, since a clipped path's ends are not its ends.
+  function getArrowLinePencil(arcs, ext, lineScale) {
+    var t = getScaledTransform(ext);
+    var iter = new internal.ShapeIter(arcs);
+    var strokeScale = getCanvasStrokeScale(GUI.getPixelRatio(), lineScale);
+    var clipped = ext.scale() > 100;
+    return function(shp, ctx, style, startPath, draw) {
+      var opts = internal.svg.makeLineArrowOpts(style.lineStart, style.lineEnd,
+        style.lineEndSize, style.strokeWidth, strokeScale);
+      var heads = [];
+      var i, coords, shape;
+      if (opts.start == 'none' && opts.end == 'none' || !(style.strokeWidth > 0)) {
+        return false;
+      }
+      startPath(ctx, style);
+      for (i=0; i<shp.length; i++) {
+        coords = getPixelCoords(iter, shp[i], t);
+        if (coords.length < 2) continue;
+        shape = internal.svg.getLineArrowShape(coords, opts);
+        heads = heads.concat(shape.heads);
+        if (!clipped) traceCoords(shape.coords, ctx);
+      }
+      if (clipped) draw(shp, ctx, style);
+      endPath(ctx, style);
+      drawArrowHeads(heads, ctx, style, opts.width);
+      return true;
+    };
+  }
+
+  function getPixelCoords(iter, path, t) {
+    var coords = [];
+    var x, y, prev;
+    iter.init(path);
+    while (iter.hasNext()) {
+      x = iter.x * t.mx + t.bx;
+      y = iter.y * t.my + t.by;
+      if (prev && prev[0] == x && prev[1] == y) continue;
+      prev = [x, y];
+      coords.push(prev);
+    }
+    return coords;
+  }
+
+  function traceCoords(coords, ctx) {
+    ctx.moveTo(coords[0][0], coords[0][1]);
+    for (var i=1; i<coords.length; i++) {
+      ctx.lineTo(coords[i][0], coords[i][1]);
+    }
+  }
+
+  // Solid heads and dots are filled with the line's colour; open ones are stroked with
+  // its width, always whole and round-cornered, whatever the line's dashes and
+  // caps.
+  function drawArrowHeads(heads, ctx, style, width) {
+    var alpha = (style.opacity >= 0 ? style.opacity : 1) *
+      (style.strokeOpacity >= 0 ? style.strokeOpacity : 1);
+    var head, p;
+    if (heads.length === 0) return;
+    ctx.globalAlpha = alpha;
+    ctx.fillStyle = style.strokeColor;
+    ctx.strokeStyle = style.strokeColor;
+    ctx.lineWidth = width;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.setLineDash([]);
+    for (var i=0; i<heads.length; i++) {
+      head = heads[i];
+      ctx.beginPath();
+      if (head.type == 'dot') {
+        ctx.arc(head.center[0], head.center[1], head.radius, 0, Math.PI * 2);
+        ctx.fill();
+        continue;
+      }
+      p = head.points;
+      ctx.moveTo(p[0][0], p[0][1]);
+      ctx.lineTo(p[1][0], p[1][1]);
+      ctx.lineTo(p[2][0], p[2][1]);
+      if (head.type == 'arrow') {
+        ctx.closePath();
+        ctx.fill();
+      } else {
+        ctx.stroke();
+      }
+    }
+    ctx.globalAlpha = 1;
+  }
+
   function protectIterForDrawing(iter, ext) {
     var bounds, k;
     if (ext.scale() > 100) {
@@ -34759,13 +36404,13 @@
 
       // Font and face menus, as in the label panel
       row = makeRow(appearance);
-      fontSelect = El('select').attr('title', 'Font').addClass('scalebar-font-select')
+      fontSelect = El('select').attr('aria-label', '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')
+      fontStyleSelect = El('select').attr('aria-label', 'Font style')
         .addClass('scalebar-font-style-select')
         .appendTo(makeCell(row, 'Font style'))
         .on('change', function() {
@@ -34779,7 +36424,7 @@
       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')
+      colorInput = El('input').attr('type', 'text').attr('aria-label', 'Scale bar color')
         .on('change', function() {
           var color = colorInput.node().value.trim();
           if (!color) {
@@ -34805,7 +36450,7 @@
         'scalebar-bar-width');
       marginInput = makeNumberInput(makeCell(row, 'Inset'), 'margin',
         'scalebar-margin')
-        .attr('title', 'Distance from the edges of the frame, in pixels');
+        .attr('aria-label', '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() {
@@ -36106,6 +37751,25 @@
           })
         };
       },
+      // The vertices of each part of each feature in a path layer, in pixels
+      // from the top left of the map, for a test comparing a drawn path with the
+      // pointer positions that drew it.
+      getLayerPathPixels: function(name) {
+        var o = gui.model.getLayers().filter(function(o) {
+          return getLayerName(o.layer) === name;
+        })[0];
+        var ext = gui.map.getExtent();
+        var arcs;
+        if (!o) return null;
+        arcs = o.layer.gui ? o.layer.gui.displayArcs : o.dataset.arcs;
+        return (o.layer.shapes || []).map(function(shp) {
+          return shp ? shp.map(function(ids) {
+            var iter = arcs.getShapeIter(ids), pts = [];
+            while (iter.hasNext()) pts.push(ext.translateCoords(iter.x, iter.y));
+            return pts;
+          }) : null;
+        });
+      },
       selectLayer: function(name) {
         var target = gui.model.getLayers().filter(function(o) {
           return getLayerName(o.layer) === name;
@@ -36123,6 +37787,19 @@
           };
         });
       },
+      // What each overlay layer last drew: the ids of its features, and whether
+      // it marked their vertices. The overlay is drawn to canvas, so there is no
+      // DOM state to assert on.
+      getOverlayInfo: function() {
+        var layers = gui.map && gui.map.getOverlayLayers ?
+          gui.map.getOverlayLayers() : [];
+        return layers.map(function(lyr) {
+          return {
+            ids: lyr.gui.style.ids || null,
+            vertices: !!lyr.gui.style.vertices
+          };
+        });
+      },
       // Knot handle positions, in display coordinates.
       getLabelPathKnotCoords: function() {
         var lyr = getLabelPathGuideLayers(gui).filter(function(lyr) {