@react-x11/components 0.8.0 → 0.10.0

package/dist/maps/labels.js

@@ -1,117 +1,204 @@
-import { GeomType, GeometryBuffer } from './mvt.js';
+// Labels: collected from the symbol layers, placed against each other, and
+// drawn into the frame.
+//
+// Not into the tile surfaces, and the three reasons are each a visible bug
+// if it is done the other way. **Collision is global**: two labels in
+// different tiles overlap exactly as readily as two in one, so a per-tile
+// placement produces clutter at every seam. **Text must not be scaled**: a
+// tile surface is composited at up to 2× during a fractional zoom, and text
+// is the one thing on a map nobody accepts blurred. And a tile's labels
+// would be **clipped at its edge**, which is where half of them sit.
+//
+// **Where a label can go is the GL renderer's answer too**: both renderers
+// take their anchors from `./anchors.ts` — a place name at its point, a
+// street's name on a straight stretch of the street, its pieces merged
+// first — so a map switched from one renderer to the other names the same
+// streets in the same places, at the same angles.
+//
+// The placement itself is done in **world pixels** rather than screen
+// pixels, and that is the load-bearing decision in this file. A placement
+// computed against the viewport changes whenever the viewport does, so a
+// pan would have to repaint the whole pane rather than blit it — and a
+// label that was suppressed by a neighbour would pop in as that neighbour
+// scrolled away. Placed in world pixels, whether a label wins depends only
+// on the labels near it and the zoom, so a pan is a translation of a
+// placement that is already correct, and the blit stands.
+import { LABEL_STRIDE, LEVEL_SNAP, LINE_MARGIN, LabelField, STRAIGHT_FRACTION, buildTileLabels, estimateWidth, } from './anchors.js';
+import { DEFAULT_ICON_COLOR, DEFAULT_ICON_GLYPH_COLOR, DEFAULT_ICON_SIZE, ICON_GAP, isMapIcon, traceGlyph, tracePlate, } from './icons.js';
 import { resolveZoomed } from './style.js';
 import { tileCountAt, tileKey } from './proj.js';
 function num(value, zoom, fallback) {
     return value === undefined ? fallback : resolveZoomed(value, zoom);
 }
+/** The tile units anchors are worked out in: the GL buckets', so the two
+ *  renderers' anchors are the same numbers. */
+const EXTENT = 4096;
 /**
- * The label candidates one tile contributes.
- *
- * Point geometry anchors at the point. Line and polygon geometry anchor at
- * the **midpoint of the longest part** — which is not a true label
- * placement (a street name should follow its street, and a country name
- * should sit at the pole of inaccessibility of its border) but is the
- * anchor those two would start from, and is right often enough to be worth
- * having while line placement is unwritten. See `docs/prd-maps.md`.
+ * Anchors, per tile and style. They depend on neither the zoom nor the
+ * camera, and merging a tile's street pieces is the one costly step, so a
+ * zoom that collects a tile's candidates again does not work them out
+ * again.
+ */
+const anchorCache = new WeakMap();
+function anchorsOf(tile, prepared, id) {
+    const hit = anchorCache.get(tile);
+    if (hit && hit.prepared === prepared)
+        return hit.data;
+    const data = buildTileLabels(tile, prepared, EXTENT, id);
+    anchorCache.set(tile, { prepared, data });
+    return data;
+}
+function paintAt(layer, zoom) {
+    if (!layer || layer.type !== 'symbol' || layer.visible === false) {
+        return null;
+    }
+    if (layer.minZoom !== undefined && zoom < layer.minZoom)
+        return null;
+    if (layer.maxZoom !== undefined && zoom >= layer.maxZoom)
+        return null;
+    const symbol = layer;
+    return {
+        id: layer.id,
+        size: num(symbol.textSize, zoom, 12),
+        color: symbol.textColor ? resolveZoomed(symbol.textColor, zoom) : '#000000',
+        halo: symbol.textHaloColor
+            ? resolveZoomed(symbol.textHaloColor, zoom)
+            : undefined,
+        haloWidth: num(symbol.textHaloWidth, zoom, 1),
+        rank: symbol.rank ?? 0,
+        repeat: symbol.repeatDistance ?? 250,
+        icon: isMapIcon(symbol.icon)
+            ? {
+                name: symbol.icon,
+                size: num(symbol.iconSize, zoom, DEFAULT_ICON_SIZE),
+                color: symbol.iconColor
+                    ? resolveZoomed(symbol.iconColor, zoom)
+                    : DEFAULT_ICON_COLOR,
+                glyph: symbol.iconGlyphColor
+                    ? resolveZoomed(symbol.iconGlyphColor, zoom)
+                    : DEFAULT_ICON_GLYPH_COLOR,
+            }
+            : null,
+    };
+}
+/**
+ * The label candidates one tile contributes: its anchors (`./anchors.ts`),
+ * with this zoom's size and colours. A point label anchors at its point,
+ * an area's at the middle of its largest ring, and a street's name at the
+ * middle of a straight stretch of the street — or of a block of it —
+ * turned to lie along it.
  */
-export function collectLabels(tile, id, prepared, zoom, buffer) {
+export function collectLabels(tile, id, prepared, zoom) {
     const out = [];
+    const data = anchorsOf(tile, prepared, id);
     const n = tileCountAt(id.z);
     const key = tileKey(id);
-    for (let i = 0; i < prepared.layers.length; i++) {
-        const { layer, filter } = prepared.layers[i];
-        if (layer.type !== 'symbol' || layer.visible === false)
-            continue;
-        if (layer.minZoom !== undefined && zoom < layer.minZoom)
-            continue;
-        if (layer.maxZoom !== undefined && zoom >= layer.maxZoom)
-            continue;
-        const source = tile.layers.get(layer.sourceLayer);
-        if (!source || source.length === 0)
-            continue;
-        const symbol = layer;
-        const size = num(symbol.textSize, zoom, 12);
-        const color = symbol.textColor
-            ? resolveZoomed(symbol.textColor, zoom)
-            : '#000000';
-        const halo = symbol.textHaloColor
-            ? resolveZoomed(symbol.textHaloColor, zoom)
-            : undefined;
-        const haloWidth = num(symbol.textHaloWidth, zoom, 1);
-        const rank = symbol.rank ?? 0;
-        const repeat = symbol.repeatDistance ?? 250;
-        const extent = source.extent;
-        const cursor = source.feature(0);
-        for (let f = 0; f < source.length; f++) {
-            source.seek(f, cursor);
-            if (!filter(cursor))
-                continue;
-            const raw = cursor.get(symbol.textField);
-            // The schema's fallback: a translated name field is absent for most
-            // features, and the local `name` is what a map without a translation
-            // shows rather than nothing.
-            const text = typeof raw === 'string' && raw.length > 0
-                ? raw
-                : symbol.textField !== 'name'
-                    ? typeof cursor.get('name') === 'string'
-                        ? String(cursor.get('name'))
-                        : ''
-                    : '';
-            if (text.length === 0)
-                continue;
-            cursor.readGeometry(buffer);
-            const anchor = anchorOf(buffer, cursor.type);
-            if (!anchor)
-                continue;
-            out.push({
-                id: `${key}:${layer.id}:${f}`,
-                key: `${layer.id}|${text}`,
-                text,
-                // Tile-local to normalized mercator, the same arithmetic the
-                // rasterizer's transform does and for the same precision reason.
-                mx: (id.x + anchor.x / extent) / n,
-                my: (id.y + anchor.y / extent) / n,
-                rank,
-                size,
-                color,
-                halo,
-                haloWidth,
-                repeat,
-            });
+    // Tile units to normalized mercator.
+    const unit = 1 / (EXTENT * n);
+    const paints = new Map();
+    const a = data.anchors;
+    for (let r = 0; r < data.count; r++) {
+        const at = r * LABEL_STRIDE;
+        const index = a[at + LabelField.layer];
+        let paint = paints.get(index);
+        if (paint === undefined) {
+            paint = paintAt(prepared.layers[index]?.layer, zoom);
+            paints.set(index, paint);
         }
+        if (!paint)
+            continue;
+        const text = data.texts[a[at + LabelField.text]];
+        const point = a[at + LabelField.avail] < 0;
+        out.push({
+            id: `${key}:${paint.id}:${r}`,
+            key: `${paint.id}|${text}`,
+            text,
+            // Tile-local to normalized mercator, the same arithmetic the
+            // rasterizer's transform does and for the same precision reason.
+            mx: (id.x + a[at + LabelField.x] / EXTENT) / n,
+            my: (id.y + a[at + LabelField.y] / EXTENT) / n,
+            angle: point ? 0 : a[at + LabelField.angle],
+            avail: point ? Infinity : a[at + LabelField.avail] * unit,
+            clear: point ? Infinity : a[at + LabelField.clear] * unit,
+            length: a[at + LabelField.length] * unit,
+            dev: a[at + LabelField.dev] * unit,
+            rank: paint.rank,
+            priority: a[at + LabelField.priority],
+            size: paint.size,
+            color: paint.color,
+            halo: paint.halo,
+            haloWidth: paint.haloWidth,
+            repeat: paint.repeat,
+            icon: point ? paint.icon : null,
+        });
     }
     return out;
 }
-function anchorOf(buffer, type) {
-    if (buffer.points === 0)
-        return null;
-    if (type === GeomType.Point) {
-        return { x: buffer.coords[0], y: buffer.coords[1] };
+/**
+ * A cache bounded in **two generations** rather than by clearing: what was
+ * stored since the last turn is the young one, a lookup that finds an entry
+ * in the old one brings it back, and a full young generation becomes the
+ * old one as the old one is dropped. So what is in use survives the turn,
+ * and the bound is twice a generation.
+ */
+class Generations {
+    _size;
+    _young = new Map();
+    _old = new Map();
+    constructor(_size) {
+        this._size = _size;
+    }
+    get(key) {
+        const hit = this._young.get(key);
+        if (hit !== undefined)
+            return hit;
+        const kept = this._old.get(key);
+        if (kept !== undefined)
+            this.set(key, kept);
+        return kept;
     }
-    // The longest part, by its box — a cheap stand-in for arc length that
-    // does not need a second pass over the vertices.
-    let best = 0;
-    let bestSpan = -1;
-    for (let part = 0; part < buffer.parts; part++) {
-        const at = part * 4;
-        const span = buffer.partBounds[at + 2] -
-            buffer.partBounds[at] +
-            (buffer.partBounds[at + 3] - buffer.partBounds[at + 1]);
-        if (span > bestSpan) {
-            bestSpan = span;
-            best = part;
+    set(key, value) {
+        if (this._young.size >= this._size) {
+            this._old = this._young;
+            this._young = new Map();
         }
+        this._young.set(key, value);
+    }
+    clear() {
+        this._young = new Map();
+        this._old = new Map();
     }
-    const from = buffer.starts[best];
-    const to = buffer.starts[best + 1];
-    if (to <= from)
-        return null;
-    const mid = from + ((to - from) >> 1);
-    return { x: buffer.coords[mid * 2], y: buffer.coords[mid * 2 + 1] };
 }
-/** Cache of shaped strings, owned by the element. */
+/** Shaped strings a generation holds. Each is a layout the text engine
+ *  keeps — a native one under CoreText — so this is the bound that
+ *  matters, and it is the one the cache always had. */
+const SHAPED_GENERATION = 2000;
+/** Measurements a generation holds: two numbers each, so many more of
+ *  them, enough for every label of a zoom across the levels. */
+const MEASURED_GENERATION = 8000;
+/**
+ * Cache of shaped strings, owned by the element — and of what they
+ * measure, which is kept apart and far longer.
+ *
+ * Placement asks the size of every candidate on the map, most of which
+ * are never drawn, and it asks again at every step of a zoom; drawing
+ * needs the layouts of the few hundred that won their place. With one
+ * cache for both, bounded by clearing it, a wheel zoom through six levels —
+ * some 8,000 strings, every label of every level at its own size and in
+ * its halo's colour — crossed the bound every few hundred milliseconds and
+ * threw away what the next placement needed: 43,000 strings shaped in four
+ * seconds, the worst frames of the zoom spent on text it had shaped
+ * already. Measurements now outlive the layouts they were read from, and
+ * both caches turn over in generations (`Generations`).
+ */
 export class LabelShaper {
-    _cache = new Map();
+    _shaped = new Generations(SHAPED_GENERATION);
+    _measured = new Generations(MEASURED_GENERATION);
+    /** What each placed label was drawn with, text and halo: kept with the
+     *  placement, so a pan's frames, which draw one placement over and over,
+     *  look nothing up. */
+    _drawn = new WeakMap();
+    _haloed = new WeakMap();
     _fonts;
     _family;
     /** Device pixels per logical pixel. Text is shaped at the device size the
@@ -134,7 +221,44 @@ export class LabelShaper {
         this._fonts = fonts;
         this._family = family;
         this._scale = scale;
-        this._cache.clear();
+        this._shaped.clear();
+        this._measured.clear();
+        this._drawn = new WeakMap();
+        this._haloed = new WeakMap();
+    }
+    /** The layout a placed label's text is drawn with — or, with `halo`, its
+     *  halo's — or null on a backend with no font manager. */
+    drawn(label, halo = false) {
+        const kept = halo ? this._haloed : this._drawn;
+        const hit = kept.get(label);
+        if (hit)
+            return hit;
+        const color = halo ? label.halo : label.color;
+        if (color === undefined)
+            return null;
+        const shaped = this.shape(label.text, label.size, color);
+        if (shaped)
+            kept.set(label, shaped);
+        return shaped;
+    }
+    /** What one label measures, logical pixels, or null on a backend with no
+     *  font manager — shaped only when it has never been measured. A string
+     *  measures the same in any colour, so a name and its halo share it.
+     *
+     *  The layout it was measured from is not kept: most candidates never
+     *  win a place, and theirs would push the layouts of the ones that did
+     *  out of the cache drawing reads from. */
+    measure(text, size, color) {
+        const key = `${this._family}|${size}|${text}`;
+        const hit = this._measured.get(key);
+        if (hit)
+            return hit;
+        const shaped = this._shapeNow(text, size, color);
+        if (!shaped)
+            return null;
+        const metrics = { width: shaped.width, height: shaped.height };
+        this._measured.set(key, metrics);
+        return metrics;
     }
     /** Shape one label, or null on a backend with no font manager. Widths
      *  come back in **logical** pixels, which is what placement is in. */
@@ -143,15 +267,18 @@ export class LabelShaper {
         if (!fonts)
             return null;
         const key = `${this._family}|${size}|${color}|${text}`;
-        const hit = this._cache.get(key);
+        const hit = this._shaped.get(key);
         if (hit)
             return hit;
-        // Bounded, so a map panned across a continent cannot turn the cache
-        // into a leak. Cleared wholesale rather than evicted one at a time: the
-        // labels on screen are re-shaped on the next frame and the cost of that
-        // is a few hundred strings once.
-        if (this._cache.size > 4000)
-            this._cache.clear();
+        const shaped = this._shapeNow(text, size, color);
+        if (shaped)
+            this._shaped.set(key, shaped);
+        return shaped;
+    }
+    _shapeNow(text, size, color) {
+        const fonts = this._fonts;
+        if (!fonts)
+            return null;
         const layout = fonts.layout(text, {
             family: this._family,
             size: size * this._scale,
@@ -159,26 +286,43 @@ export class LabelShaper {
             style: 'normal',
             color,
         });
-        const shaped = {
+        return {
             width: layout.width / this._scale,
             height: layout.height / this._scale,
             layout,
         };
-        this._cache.set(key, shaped);
-        return shaped;
     }
 }
+/** A street name is set level — on whole pixels, which is sharper — when
+ *  its street is this close to level. */
+function levelled(angle) {
+    return Math.abs(angle) < LEVEL_SNAP ? 0 : angle;
+}
 /**
  * Place candidates against each other, in world pixels.
  *
- * Greedy by rank, which is what every map does: sort, and take a label if
- * nothing already taken overlaps it. The order has to be **total and
- * stable** — rank, then the candidate's id — because a tie broken by array
- * order would flicker as tiles arrived in a different order.
+ * Greedy, which is what every map does: sort, and take a label if it fits
+ * where it is and nothing already taken overlaps it. The order is the GL
+ * renderer's, less what depends on the view: rank, then importance within
+ * the layer, then a street name that clears its junctions over one that
+ * would cover a crossing street, then the longer straight run. It has to be
+ * **total and stable** — the candidate's id last — because a tie broken by
+ * array order would flicker as tiles arrived in a different order.
+ *
+ * A street name fits where the GL renderer says one does: on a stretch
+ * straight enough for its size, and long enough for all of it.
  */
 export function placeLabels(candidates, worldSize, shaper, options) {
     const padding = options?.padding ?? 2;
-    const sorted = [...candidates].sort((a, b) => b.rank - a.rank || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0));
+    const clean = (c) => c.clear * worldSize >= estimateWidth(c.text, c.size) / 2 ? 1 : 0;
+    const sorted = [...candidates]
+        .map((c) => ({ c, clean: clean(c) }))
+        .sort((a, b) => b.c.rank - a.c.rank ||
+        b.c.priority - a.c.priority ||
+        b.clean - a.clean ||
+        b.c.length - a.c.length ||
+        (a.c.id < b.c.id ? -1 : a.c.id > b.c.id ? 1 : 0))
+        .map((entry) => entry.c);
     const placed = [];
     // A sparse grid over world pixels. The cell is sized for the labels
     // themselves, so a box touches one or two cells and a collision test is a
@@ -190,15 +334,18 @@ export function placeLabels(candidates, worldSize, shaper, options) {
      *  repeat-distance rule. */
     const byText = new Map();
     for (const candidate of sorted) {
-        const shaped = shaper.shape(candidate.text, candidate.size, candidate.color);
-        if (!shaped)
-            return placed; // no font manager: nothing can be measured
+        // Bent under its size at this zoom: not a stretch to set a name on.
+        if (candidate.dev * worldSize > candidate.size * STRAIGHT_FRACTION) {
+            continue;
+        }
         const wx = candidate.mx * worldSize;
         const wy = candidate.my * worldSize;
-        // The repeat test before the overlap test, because it is the cheaper
-        // one and because it is what rejects most of a street layer: a street
-        // is one feature per segment, so the same name arrives a dozen times
-        // strung out along the road, none of them overlapping any other.
+        // The repeat test first, because it is the cheapest one and because it
+        // is what rejects most of a street layer: a long street offers its name
+        // every block, none of them overlapping. Ahead of the shaping, which it
+        // does not need — a street's every block shaped its name, and a wheel
+        // zoom re-places at every step, so that was thousands of strings a
+        // frame asked of the cache.
         if (candidate.repeat > 0) {
             const already = byText.get(candidate.key);
             if (already) {
@@ -216,9 +363,35 @@ export function placeLabels(candidates, worldSize, shaper, options) {
                     continue;
             }
         }
-        const width = shaped.width + padding * 2;
-        const height = shaped.height + padding * 2;
-        const left = wx - width / 2;
+        const measured = shaper.measure(candidate.text, candidate.size, candidate.color);
+        if (!measured)
+            return placed; // no font manager: nothing can be measured
+        // Longer than the straight stretch it would sit on, with a margin past
+        // each end: it would hang off the street, over whatever the street
+        // turns into.
+        const need = measured.width / 2 + measured.height * LINE_MARGIN;
+        if (candidate.avail * worldSize < need)
+            continue;
+        // The turned text's bounding box: what it covers, as far as another
+        // label can tell. With an icon, the box around the icon on the point
+        // and the text beside it — the two give way as one, or a stop's name
+        // would be set with nothing to say it is a stop.
+        const angle = levelled(candidate.angle);
+        const icon = candidate.icon ?? null;
+        let w = measured.width + padding * 2;
+        let h = measured.height + padding * 2;
+        let ox = 0;
+        if (icon) {
+            const full = icon.size + ICON_GAP + measured.width;
+            ox = (full - icon.size) / 2;
+            w = full + padding * 2;
+            h = Math.max(icon.size, measured.height) + padding * 2;
+        }
+        const cos = Math.abs(Math.cos(angle));
+        const sin = Math.abs(Math.sin(angle));
+        const width = w * cos + h * sin;
+        const height = w * sin + h * cos;
+        const left = wx + ox - width / 2;
         const top = wy - height / 2;
         const x0 = Math.floor(left / CELL);
         const x1 = Math.floor((left + width) / CELL);
@@ -231,10 +404,12 @@ export function placeLabels(candidates, worldSize, shaper, options) {
                 if (!bucket)
                     continue;
                 for (const other of bucket) {
-                    if (left < other.wx - other.width / 2 + other.width &&
-                        left + width > other.wx - other.width / 2 &&
-                        top < other.wy - other.height / 2 + other.height &&
-                        top + height > other.wy - other.height / 2) {
+                    const otherLeft = other.wx + (other.ox ?? 0) - other.width / 2;
+                    const otherTop = other.wy - other.height / 2;
+                    if (left < otherLeft + other.width &&
+                        left + width > otherLeft &&
+                        top < otherTop + other.height &&
+                        top + height > otherTop) {
                         free = false;
                         break;
                     }
@@ -245,11 +420,12 @@ export function placeLabels(candidates, worldSize, shaper, options) {
             continue;
         const entry = {
             ...candidate,
+            angle,
             wx,
             wy,
+            ox,
             width,
             height,
-            shaped,
         };
         placed.push(entry);
         if (candidate.repeat > 0) {
@@ -281,32 +457,67 @@ export function placeLabels(candidates, worldSize, shaper, options) {
  * composites of two shaped runs. That is cheap for the few dozen labels a
  * pane holds and it is the difference between a place name that is
  * readable over a motorway and one that is not.
+ *
+ * A level label is drawn on whole device pixels. A street name along its
+ * street is drawn turned about its centre, where the context can turn —
+ * and level where it cannot, on a context with no transform.
  */
 export function drawLabels(ctx, placed, transform, pane, scale, clip, shaper) {
     let drawn = 0;
     const world = transform.world;
     const originX = pane.x + transform.paneX - transform.centerX * world;
     const originY = pane.y + transform.paneY - transform.centerY * world;
+    const turns = typeof ctx.rotate === 'function' && !!ctx.translate;
     for (const label of placed) {
-        const x = originX + label.wx - label.shaped.width / 2;
-        const y = originY + label.wy - label.shaped.height / 2;
-        if (x + label.shaped.width < pane.x ||
-            y + label.shaped.height < pane.y ||
-            x > pane.x + pane.width ||
-            y > pane.y + pane.height) {
+        const cx = originX + label.wx;
+        const cy = originY + label.wy;
+        // The box's centre, which is right of the point where an icon is on it.
+        const bx = cx + (label.ox ?? 0);
+        const halfW = label.width / 2;
+        const halfH = label.height / 2;
+        if (bx + halfW < pane.x ||
+            cy + halfH < pane.y ||
+            bx - halfW > pane.x + pane.width ||
+            cy - halfH > pane.y + pane.height) {
             continue;
         }
         if (clip &&
-            (x + label.shaped.width < clip.x ||
-                y + label.shaped.height < clip.y ||
-                x > clip.x + clip.width ||
-                y > clip.y + clip.height)) {
+            (bx + halfW < clip.x ||
+                cy + halfH < clip.y ||
+                bx - halfW > clip.x + clip.width ||
+                cy - halfH > clip.y + clip.height)) {
             continue;
         }
-        const dx = Math.round(x * scale);
-        const dy = Math.round(y * scale);
+        // Shaped here, for the labels in the pane: the few hundred a frame
+        // draws, where the placement holds every name on the tiles loaded.
+        const shaped = shaper.drawn(label);
+        if (!shaped)
+            continue;
+        const { width, height } = shaped;
+        const icon = label.icon ?? null;
+        const turned = !icon && label.angle !== 0 && turns;
+        const haloed = label.halo !== undefined && label.haloWidth > 0;
+        let dx;
+        let dy;
+        if (icon) {
+            // The icon on the point, and the name level beside it.
+            drawIcon(ctx, icon, Math.round(cx * scale), Math.round(cy * scale), icon.size * scale, haloed ? label.halo : undefined, Math.max(1, Math.round(label.haloWidth * scale)));
+            dx = Math.round((cx + icon.size / 2 + ICON_GAP) * scale);
+            dy = Math.round((cy - height / 2) * scale);
+        }
+        else if (turned) {
+            ctx.save();
+            ctx.translate(cx * scale, cy * scale);
+            ctx.rotate(label.angle);
+            dx = (-width * scale) / 2;
+            dy = (-height * scale) / 2;
+        }
+        else {
+            dx = Math.round((cx - width / 2) * scale);
+            dy = Math.round((cy - height / 2) * scale);
+        }
         if (label.halo !== undefined && label.haloWidth > 0) {
-            const halo = shaper.shape(label.text, label.size, label.halo);
+            const halo = shaper.drawn(label, true);
             if (halo) {
                 const offset = Math.max(1, Math.round(label.haloWidth * scale));
                 halo.layout.draw(ctx, dx - offset, dy);
@@ -315,9 +526,34 @@ export function drawLabels(ctx, placed, transform, pane, scale, clip, shaper) {
                 halo.layout.draw(ctx, dx, dy + offset);
             }
         }
-        label.shaped.layout.draw(ctx, dx, dy);
+        shaped.layout.draw(ctx, dx, dy);
+        if (turned)
+            ctx.restore();
         drawn++;
     }
     return drawn;
 }
+/**
+ * An icon on its point, in device pixels: the plate, over a plate of the
+ * halo's colour a halo wider where the layer has one — the same ground a
+ * name's halo gives it over a road — and the glyph on the plate.
+ */
+function drawIcon(ctx, icon, x, y, size, halo, reach) {
+    ctx.save();
+    if (halo !== undefined) {
+        ctx.fillStyle = halo;
+        ctx.beginPath();
+        tracePlate(ctx, x, y, size + reach * 2);
+        ctx.fill();
+    }
+    ctx.fillStyle = icon.color;
+    ctx.beginPath();
+    tracePlate(ctx, x, y, size);
+    ctx.fill();
+    ctx.fillStyle = icon.glyph;
+    ctx.beginPath();
+    traceGlyph(ctx, icon.name, x, y, size);
+    ctx.fill();
+    ctx.restore();
+}
 //# sourceMappingURL=labels.js.map