@react-x11/components 0.9.0 → 0.11.0

package/src/internal/sdf.ts

@@ -0,0 +1,227 @@
+// A label's raster as a signed distance field: what lets one raster serve a
+// name at every size a zoom passes through, and a halo of any width. Under
+// the GL labels of both `<Map>` (`src/maps/gl/text.ts`) and `<Flow>`
+// (`src/flow/gl/text.ts`), which is why it is here rather than in either.
+//
+// The text engine sets a string as coverage — alpha, antialiased — at one
+// base size. Each texel here becomes its distance to the glyphs' edge,
+// encoded in a byte so that `SDF_EDGE` is the edge itself, more is inside
+// and less is outside:
+//
+//   byte = 255 · (1 − d / radius − SDF_CUTOFF),   d > 0 outside
+//
+// so a field reaches `radius · (1 − SDF_CUTOFF)` texels past the glyphs
+// before it saturates at 0 — the room a halo has to grow into — and
+// `radius · SDF_CUTOFF` into them.
+//
+// The distance is the exact Euclidean one, started at the edge by what the
+// coverage says: an antialiased texel half covered sits on the edge, one a
+// quarter covered a quarter of a texel outside it. That sub-texel start is
+// what keeps a field set at 16 pixels from drawing a lumpy stroke at 40.
+//
+// **Only where it can change a byte.** A field is set the first time its
+// string is drawn, so its cost is how late a label appears. Outside the
+// glyphs the distance is Felzenszwalb and Huttenlocher's linear-time
+// transform — but only over the window a field reaches round the ink, the
+// rows that hold ink first and then the window's columns, since past the
+// reach every byte is 0 and every source is inside it. Inside, a field
+// saturates `radius · SDF_CUTOFF` texels in (1.5 at Flow's margin, 2.25 at
+// a map's), so the nearest texel less than half covered is found by
+// searching the few rings round each texel inside, not by a second
+// transform over the whole raster. Byte for byte what the two whole
+// transforms gave, at half the cost: measured over DirectWrite's coverage
+// of 520 labels, 262 → 140 µs a field at Flow's margin and 626 → 311 at a
+// map's.
+
+/** The fraction of the byte range spent inside the glyphs. */
+export const SDF_CUTOFF = 0.25;
+
+/** The byte value of the glyphs' edge, as a fraction: `1 − SDF_CUTOFF`. */
+export const SDF_EDGE = 1 - SDF_CUTOFF;
+
+/**
+ * Device pixels outside a field's outline that its ink's edge is drawn. A
+ * text engine darkens stems at small sizes; a field thresholded at half
+ * coverage gives that back, and a string drawn from one looks a weight
+ * lighter than the same string set. Both GL label shaders draw it.
+ */
+export const SDF_INK_BIAS_PX = 0.15;
+
+/** "No edge in reach": far past any raster's squared diagonal, and small
+ *  enough that `FAR + q²` is still exact in a double, so two of them cross
+ *  where two parabolas of one height do. */
+const FAR = 1e10;
+
+/**
+ * Each coverage byte's squared distance to the edge *inside* its own
+ * texel: (a − ½)² where more than half covered, 0 where not — a texel less
+ * than half covered is outside, where an inside distance ends — and FAR
+ * where whole.
+ */
+const INSIDE = new Float64Array(256);
+for (let a8 = 1; a8 < 255; a8++) {
+  const d = 0.5 - a8 / 255;
+  INSIDE[a8] = d < 0 ? d * d : 0;
+}
+INSIDE[255] = FAR;
+
+/** Scratch, grown to the largest raster seen and reused. */
+let outer = new Float64Array(0);
+let f = new Float64Array(0);
+let g = new Float64Array(0);
+let z = new Float64Array(0);
+let v = new Int32Array(0);
+
+function grow(texels: number, line: number): void {
+  if (outer.length < texels) outer = new Float64Array(texels);
+  if (f.length < line) {
+    f = new Float64Array(line);
+    g = new Float64Array(line);
+    z = new Float64Array(line + 1);
+    v = new Int32Array(line);
+  }
+}
+
+/**
+ * The squared distance transform of `length` values of `grid` from
+ * `offset`, `stride` apart, in place: each becomes the least
+ * `grid[r] + (q − r)²` — the lower envelope of parabolas rooted at every
+ * texel. `g` holds each parabola's `grid[r] + r²`, so where two cross is
+ * one division.
+ */
+function transform1d(
+  grid: Float64Array,
+  offset: number,
+  stride: number,
+  length: number,
+): void {
+  let k = 0;
+  v[0] = 0;
+  z[0] = -Infinity;
+  z[1] = Infinity;
+  f[0] = grid[offset];
+  g[0] = f[0];
+  for (let q = 1, at = offset + stride; q < length; q++, at += stride) {
+    const fq = grid[at];
+    f[q] = fq;
+    const gq = fq + q * q;
+    g[q] = gq;
+    let s: number;
+    for (;;) {
+      const r = v[k];
+      s = (gq - g[r]) / (2 * (q - r));
+      if (s > z[k] || k === 0) break;
+      k--;
+    }
+    k++;
+    v[k] = q;
+    z[k] = s;
+    z[k + 1] = Infinity;
+  }
+  k = 0;
+  for (let q = 0, at = offset; q < length; q++, at += stride) {
+    while (z[k + 1] < q) k++;
+    const r = v[k];
+    const d = q - r;
+    grid[at] = f[r] + d * d;
+  }
+}
+
+/**
+ * The field of a `width` × `height` raster whose coverage is `alpha`
+ * (0-255), read every `step` bytes from `start` — so an RGBA readback is
+ * read in place, `step` 4 and `start` 3, and an engine's own coverage with
+ * `step` 1 and `start` 0. One byte a texel, see the top of this file for
+ * the encoding.
+ */
+export function distanceField(
+  alpha: Uint8Array,
+  width: number,
+  height: number,
+  radius: number,
+  step = 4,
+  start = 3,
+): Uint8Array {
+  const texels = width * height;
+  grow(texels, Math.max(width, height));
+  // Zeroed: a byte nothing below writes is as far outside as a field sees.
+  const out = new Uint8Array(texels);
+  let minX = width;
+  let maxX = -1;
+  let minY = height;
+  let maxY = -1;
+  for (let y = 0, i = 0, a = start; y < height; y++) {
+    for (let x = 0; x < width; x++, i++, a += step) {
+      const a8 = alpha[a];
+      if (a8 === 0) {
+        outer[i] = FAR;
+        continue;
+      }
+      if (x < minX) minX = x;
+      if (x > maxX) maxX = x;
+      if (y < minY) minY = y;
+      if (y > maxY) maxY = y;
+      if (a8 === 255) {
+        outer[i] = 0;
+        continue;
+      }
+      // Partly covered: on the edge, off it by how far from half covered.
+      const d = 0.5 - a8 / 255;
+      outer[i] = d > 0 ? d * d : 0;
+    }
+  }
+  if (maxX < 0) return out;
+
+  // Outside: the window the field reaches round the ink. Every source is
+  // in it, so what the transform computes there is exact, and past it every
+  // byte is 0. The rows with ink first — every source is on one — then
+  // every column of the window.
+  const reach = Math.ceil(radius * (1 - SDF_CUTOFF)) + 1;
+  const x0 = Math.max(0, minX - reach);
+  const x1 = Math.min(width - 1, maxX + reach);
+  const y0 = Math.max(0, minY - reach);
+  const y1 = Math.min(height - 1, maxY + reach);
+  for (let y = minY; y <= maxY; y++) {
+    transform1d(outer, y * width + x0, 1, x1 - x0 + 1);
+  }
+  for (let x = x0; x <= x1; x++) {
+    transform1d(outer, y0 * width + x, width, y1 - y0 + 1);
+  }
+
+  // Inside, the field saturates this many rings in.
+  const deep = Math.ceil(radius * SDF_CUTOFF);
+  for (let y = y0; y <= y1; y++) {
+    for (let x = x0, i = y * width + x0; x <= x1; x++, i++) {
+      // Outside the ink, or in it: never both.
+      const o = outer[i];
+      let d: number;
+      if (o > 0) {
+        d = Math.sqrt(o);
+      } else {
+        // The least (a − ½)² + distance² over the texels round it, ring by
+        // ring, until no ring further out could be nearer — or the field
+        // has saturated, where the exact answer and this one are both 255.
+        let best = INSIDE[alpha[start + i * step]];
+        for (let k = 1; k <= deep && best > k * k; k++) {
+          for (let yy = y - k; yy <= y + k; yy++) {
+            if (yy < 0 || yy >= height) continue;
+            const dy2 = (yy - y) * (yy - y);
+            // a ring's top and bottom rows whole, its sides two texels
+            const across = yy === y - k || yy === y + k ? 1 : 2 * k;
+            for (let xx = x - k; xx <= x + k; xx += across) {
+              if (xx < 0 || xx >= width) continue;
+              const dx = xx - x;
+              const m =
+                INSIDE[alpha[start + (yy * width + xx) * step]] + dx * dx + dy2;
+              if (m < best) best = m;
+            }
+          }
+        }
+        d = -Math.sqrt(best);
+      }
+      const value = Math.round(255 - 255 * (d / radius + SDF_CUTOFF));
+      out[i] = value < 0 ? 0 : value > 255 ? 255 : value;
+    }
+  }
+  return out;
+}

package/src/internal/splice.ts

@@ -0,0 +1,25 @@
+/**
+ * `target.splice(from, removed, ...items)`, for any number of items.
+ *
+ * A spread argument list lives on the stack, and somewhere past a hundred
+ * thousand items it throws `RangeError: Maximum call stack size exceeded` —
+ * a pasted log, or a file replaced whole, is that many lines. Past a few
+ * thousand the array is rebuilt in place instead: whoever holds `target`
+ * keeps holding it, which is the whole reason it is spliced rather than
+ * replaced.
+ */
+export function spliceAll<T>(
+  target: T[],
+  from: number,
+  removed: number,
+  items: readonly T[],
+): void {
+  if (items.length <= 4096) {
+    target.splice(from, removed, ...items);
+    return;
+  }
+  const tail = target.slice(from + removed);
+  target.length = from;
+  for (let i = 0; i < items.length; i++) target.push(items[i]);
+  for (let i = 0; i < tail.length; i++) target.push(tail[i]);
+}

package/src/internal/window.ts

@@ -30,7 +30,8 @@
 //     forces them out, trailing side first — a direction reversal lands on
 //     rows still mounted instead of rebuilding them. The budget caps what a
 //     render can be asked to carry: the on-screen slice plus `prefetch` rows
-//     each side.
+//     each side — at any speed, which is why a row is measured on its way
+//     out when nothing has measured it yet.
 //   - **Skeletons.** A scroll that outruns everything — a thumb dragged
 //     across the list, a flick past the band — floods the window with rows
 //     no single render can build in time. Those render as *skeletons*: the
@@ -164,6 +165,18 @@ export interface VirtualWindowInputs {
    *  settled. `BURST_BUDGET` / `SETTLE_BUDGET` are the defaults. */
   burstBudget: number;
   settleBudget: number;
+  /**
+   * Record the height the drawn row `id`, at `index`, is laid out at in the
+   * index, now; answer whether the index has a real height for it after.
+   * The trim asks before it drops a row the measure tick has not reached
+   * (see the budget below), during render — so no nudge and no re-render:
+   * the row is still laid out at exactly that height, and nothing on screen
+   * moves until the spacer takes its place. `false` for a row with no
+   * honest measurement to give, which keeps it mounted. `viewport` is the
+   * event-fresh one (`viewRef`), for a component whose rows are laid out
+   * against it.
+   */
+  measure?: (id: RowKey, index: number, viewport: VirtualViewport) => boolean;
 }
 
 export interface VirtualWindow {
@@ -370,6 +383,7 @@ export function useVirtualWindow(inputs: VirtualWindowInputs): VirtualWindow {
     threshold,
     burstBudget,
     settleBudget,
+    measure,
   } = inputs;
   const count = rows.length;
 
@@ -448,15 +462,32 @@ export function useVirtualWindow(inputs: VirtualWindowInputs): VirtualWindow {
       // row laid out taller than the index believes contributes its real
       // height while mounted and its guessed one once dropped, so cutting
       // it silently shrinks the content above the viewport and the view
-      // yanks up by the difference with no debt left to put it right. Held
-      // a render or two longer, it gets measured, and the next trim takes
-      // it cleanly.
+      // yanks up by the difference with no debt left to put it right.
+      //
+      // So a row the index has no number for is measured *here*, where it
+      // is still laid out (`measure`): once the index holds the height it
+      // is drawn at, the spacer that replaces it is exactly as tall, and it
+      // goes like any other. Waiting for the measure tick instead is only
+      // safe while the tick runs — and a flick defers every measurement to
+      // the settle, so a long one downward trimmed nothing at all and the
+      // window grew by every row it passed: 1,250 rows mounted four seconds
+      // into a trackpad fling, each frame laying all of them out. A row the
+      // last render did not build in full needs nothing: a skeleton is
+      // drawn at the index's height, and a row never drawn is not in the
+      // layout at all. What cannot be measured — a row not laid out yet, or
+      // laid out against a grid it is about to leave — is held a render or
+      // two longer, as before.
       const budget = coreLast - coreFirst + 2 * prefetch;
       let excess = last - first - budget;
       if (excess > 0) {
+        const known = (i: number): boolean =>
+          exact ||
+          heights.isMeasured(i) ||
+          !real.current.has(rows[i].id) ||
+          measure?.(rows[i].id, i, viewRef.current) === true;
         const cutAbove = (want: number): number => {
           let k = 0;
-          while (k < want && (exact || heights.isMeasured(first + k))) k++;
+          while (k < want && known(first + k)) k++;
           return k;
         };
         const aboveExtra = coreFirst - first;

package/src/maps/anchors.ts

@@ -36,8 +36,10 @@
 // Everything leaves as one Float32Array and a string table, so a worker can
 // hand it over with the buckets (see `./gl/store.ts`).
 import { GeomType, GeometryBuffer } from './mvt.js';
-import type { FeatureCursor, VectorTile } from './mvt.js';
+import type { FeatureCursor, VectorTile, VectorTileLayer } from './mvt.js';
 import type { PreparedStyle } from './paint.js';
+import { latFromMercatorY } from './proj.js';
+import type { TileId } from './proj.js';
 import type { SymbolLayer } from './style.js';
 
 // --- the fit rules both renderers place by ------------------------------------
@@ -241,6 +243,10 @@ export function buildTileLabels(
   tile: VectorTile,
   prepared: PreparedStyle,
   extent: number,
+  /** Which tile: what turns a `snapInto` distance in metres into tile
+   *  units. Without it no distance can be known, and only a point already
+   *  inside a polygon moves. */
+  id?: TileId,
 ): GlLabelData {
   const started = now();
   const texts: string[] = [];
@@ -259,6 +265,11 @@ export function buildTileLabels(
     const groups = new Map<number, LineGroup>();
     // Which name first touched each vertex, or -1 once a second did.
     const touched = new Map<number, number>();
+    // A layer that snaps into polygons collects its points first — x, y,
+    // text, priority — since which point a polygon belongs to depends on
+    // every other point that could claim it.
+    const snap = symbol.snapInto;
+    const snaps: number[] | null = snap ? [] : null;
 
     for (let f = 0; f < source.length; f++) {
       source.seek(f, cursor);
@@ -309,10 +320,23 @@ export function buildTileLabels(
       if (!anchor) continue;
       const x = anchor.x * k;
       const y = anchor.y * k;
+      if (snaps && cursor.type === GeomType.Point) {
+        // The buffer's points too, and judged before the tile's square:
+        // a polygon near the edge is claimed by points on either side of
+        // it, and both tiles that hold it must see the same claims.
+        snaps.push(x, y, t, priority);
+        continue;
+      }
       if (x < 0 || y < 0 || x >= extent || y >= extent) continue;
       out.point(x, y, t, i, priority);
     }
 
+    if (snap && snaps) {
+      const polygons = tile.layers.get(snap.sourceLayer);
+      const within = (snap.within ?? SNAP_WITHIN) / metresPerUnit(id, extent);
+      snapPoints(polygons, within, snaps, extent, i, out, buffer);
+    }
+
     for (const group of groups.values()) {
       for (const chain of mergeParts(group.parts)) {
         anchorChain(chain, touched, extent, group, i, out);
@@ -323,6 +347,288 @@ export function buildTileLabels(
   return { texts, anchors: out.take(), count: out.count, ms: now() - started };
 }
 
+/** How far a point is taken to belong to a polygon it is outside, metres,
+ *  where the layer does not say. An address point in the lot sits a few
+ *  metres off its house; much past this, the nearest building is as often
+ *  a neighbour's — the house the number is for not being mapped at all. */
+const SNAP_WITHIN = 15;
+/** The earth's circumference at the equator, metres (Web Mercator's). */
+const EQUATOR = 40075016.686;
+
+/** Metres on the ground per tile unit, at the tile's middle row. */
+function metresPerUnit(id: TileId | undefined, extent: number): number {
+  const n = 2 ** (id?.z ?? 0);
+  const lat = id ? latFromMercatorY((id.y + 0.5) / n) : 0;
+  return (EQUATOR * Math.cos((lat * Math.PI) / 180)) / (n * extent);
+}
+
+/** One polygon's outer ring, in tile units: its points, its box, and the
+ *  point inside it a label moved into it is set on. */
+interface SnapRing {
+  points: number[];
+  x0: number;
+  y0: number;
+  x1: number;
+  y1: number;
+  cx: number;
+  cy: number;
+}
+
+/** The grid rings are found by, in tile units: a z14 tile is 16 cells a
+ *  side, a few dozen buildings each. */
+const SNAP_CELL = 256;
+const snapCell = (gx: number, gy: number): number =>
+  (gx + 1024) * 4096 + (gy + 1024);
+
+/**
+ * Point labels moved into the polygon each one belongs to — a house number
+ * into its house.
+ *
+ * A point inside a polygon belongs to it; one outside, to the nearest
+ * polygon whose outline is within `within` tile units. It moves only if it
+ * is the **one** point its polygon is claimed by: a duplex's two numbers, or
+ * a garage nearer the street than the house, would otherwise pile several
+ * numbers onto one roof — and collision would then keep one of them, on a
+ * building that is not only its own. Every point that does not move stays
+ * exactly where the data put it.
+ *
+ * `points` are the whole tile's, buffer included, so a polygon near the edge
+ * is claimed alike in both tiles that hold it; each point is then anchored
+ * only in the tile its own position is in, as every other point is. One
+ * whose polygon's middle is in the next tile over stays put rather than
+ * move out of the tile that offers it.
+ */
+function snapPoints(
+  polygons: VectorTileLayer | undefined,
+  within: number,
+  points: readonly number[],
+  extent: number,
+  layer: number,
+  out: AnchorWriter,
+  buffer: GeometryBuffer,
+): void {
+  const count = points.length / 4;
+  const target = new Int32Array(count).fill(-1);
+  const rings = polygons ? snapRings(polygons, extent, buffer) : [];
+  if (rings.length > 0) {
+    const grid = new Map<number, number[]>();
+    rings.forEach((ring, r) => {
+      for (let gx = cellOf(ring.x0); gx <= cellOf(ring.x1); gx++) {
+        for (let gy = cellOf(ring.y0); gy <= cellOf(ring.y1); gy++) {
+          const key = snapCell(gx, gy);
+          const list = grid.get(key);
+          if (list) list.push(r);
+          else grid.set(key, [r]);
+        }
+      }
+    });
+    const claims = new Int32Array(rings.length);
+    // Which query last looked at each ring: a ring spanning several cells
+    // is one candidate, not several.
+    const seen = new Int32Array(rings.length).fill(-1);
+    for (let p = 0; p < count; p++) {
+      const r = ownerOf(
+        rings,
+        grid,
+        seen,
+        p,
+        points[p * 4],
+        points[p * 4 + 1],
+        within,
+      );
+      if (r >= 0) {
+        target[p] = r;
+        claims[r]++;
+      }
+    }
+    for (let p = 0; p < count; p++) {
+      if (target[p] >= 0 && claims[target[p]] !== 1) target[p] = -1;
+    }
+  }
+  for (let p = 0; p < count; p++) {
+    let x = points[p * 4];
+    let y = points[p * 4 + 1];
+    if (x < 0 || y < 0 || x >= extent || y >= extent) continue;
+    const r = target[p];
+    if (r >= 0) {
+      const ring = rings[r];
+      if (
+        ring.cx >= 0 &&
+        ring.cy >= 0 &&
+        ring.cx < extent &&
+        ring.cy < extent
+      ) {
+        x = ring.cx;
+        y = ring.cy;
+      }
+    }
+    out.point(x, y, points[p * 4 + 2], layer, points[p * 4 + 3]);
+  }
+}
+
+const cellOf = (v: number): number => Math.floor(v / SNAP_CELL);
+
+/** Every polygon's outer rings, in tile units. Holes are not a building's
+ *  own ground, and a courtyard is not where a number goes. */
+function snapRings(
+  source: VectorTileLayer,
+  extent: number,
+  buffer: GeometryBuffer,
+): SnapRing[] {
+  const k = extent / source.extent;
+  const cursor = source.feature(0);
+  const rings: SnapRing[] = [];
+  for (let f = 0; f < source.length; f++) {
+    source.seek(f, cursor);
+    if (cursor.type !== GeomType.Polygon) continue;
+    cursor.readGeometry(buffer);
+    for (let part = 0; part < buffer.parts; part++) {
+      if (buffer.areas[part] <= 0) continue;
+      const from = buffer.starts[part];
+      const to = buffer.starts[part + 1];
+      if (to - from < 3) continue;
+      const points: number[] = [];
+      let x0 = Infinity;
+      let y0 = Infinity;
+      let x1 = -Infinity;
+      let y1 = -Infinity;
+      for (let p = from; p < to; p++) {
+        const x = buffer.coords[p * 2] * k;
+        const y = buffer.coords[p * 2 + 1] * k;
+        points.push(x, y);
+        if (x < x0) x0 = x;
+        if (x > x1) x1 = x;
+        if (y < y0) y0 = y;
+        if (y > y1) y1 = y;
+      }
+      const [cx, cy] = interiorPoint(points, x0, y0, x1, y1);
+      rings.push({ points, x0, y0, x1, y1, cx, cy });
+    }
+  }
+  return rings;
+}
+
+/**
+ * A point inside a ring to set a label on: its centroid, which is inside
+ * for all but the most contorted outline — 99.8% of the building rings in
+ * the tiles this was measured on — and where it is not, the middle of the
+ * widest span of the ring along the centroid's row.
+ */
+function interiorPoint(
+  points: readonly number[],
+  x0: number,
+  y0: number,
+  x1: number,
+  y1: number,
+): [number, number] {
+  let area = 0;
+  let sx = 0;
+  let sy = 0;
+  const n = points.length;
+  for (let i = 0, j = n - 2; i < n; j = i, i += 2) {
+    const cross = points[j] * points[i + 1] - points[i] * points[j + 1];
+    area += cross;
+    sx += (points[j] + points[i]) * cross;
+    sy += (points[j + 1] + points[i + 1]) * cross;
+  }
+  if (area === 0) return [(x0 + x1) / 2, (y0 + y1) / 2];
+  const cx = sx / (3 * area);
+  const cy = sy / (3 * area);
+  if (insideRing(points, cx, cy)) return [cx, cy];
+  const crossings: number[] = [];
+  for (let i = 0, j = n - 2; i < n; j = i, i += 2) {
+    const ay = points[j + 1];
+    const by = points[i + 1];
+    if (ay > cy !== by > cy) {
+      crossings.push(
+        points[j] + ((cy - ay) / (by - ay)) * (points[i] - points[j]),
+      );
+    }
+  }
+  crossings.sort((a, b) => a - b);
+  let best = -1;
+  let mid = (x0 + x1) / 2;
+  for (let c = 0; c + 1 < crossings.length; c += 2) {
+    const span = crossings[c + 1] - crossings[c];
+    if (span > best) {
+      best = span;
+      mid = (crossings[c] + crossings[c + 1]) / 2;
+    }
+  }
+  return [mid, cy];
+}
+
+/** Even-odd: whether `x, y` is inside the ring. */
+function insideRing(points: readonly number[], x: number, y: number): boolean {
+  let inside = false;
+  const n = points.length;
+  for (let i = 0, j = n - 2; i < n; j = i, i += 2) {
+    const xi = points[i];
+    const yi = points[i + 1];
+    const xj = points[j];
+    const yj = points[j + 1];
+    if (yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi) {
+      inside = !inside;
+    }
+  }
+  return inside;
+}
+
+/** How far `x, y` is from the ring's outline. */
+function distanceToRing(points: readonly number[], x: number, y: number) {
+  let best = Infinity;
+  const n = points.length;
+  for (let i = 0, j = n - 2; i < n; j = i, i += 2) {
+    const ax = points[j];
+    const ay = points[j + 1];
+    const dx = points[i] - ax;
+    const dy = points[i + 1] - ay;
+    const length = dx * dx + dy * dy;
+    const t =
+      length > 0
+        ? Math.max(0, Math.min(1, ((x - ax) * dx + (y - ay) * dy) / length))
+        : 0;
+    const d = Math.hypot(x - ax - t * dx, y - ay - t * dy);
+    if (d < best) best = d;
+  }
+  return best;
+}
+
+/** The ring a point belongs to — the one it is inside, else the nearest
+ *  within `within` — or -1. */
+function ownerOf(
+  rings: readonly SnapRing[],
+  grid: Map<number, number[]>,
+  seen: Int32Array,
+  query: number,
+  x: number,
+  y: number,
+  within: number,
+): number {
+  let best = -1;
+  let bestDistance = within;
+  for (let gx = cellOf(x - within); gx <= cellOf(x + within); gx++) {
+    for (let gy = cellOf(y - within); gy <= cellOf(y + within); gy++) {
+      for (const r of grid.get(snapCell(gx, gy)) ?? []) {
+        if (seen[r] === query) continue;
+        seen[r] = query;
+        const ring = rings[r];
+        // Past the box by more than the distance allowed: not a candidate.
+        const bx = Math.max(ring.x0 - x, 0, x - ring.x1);
+        const by = Math.max(ring.y0 - y, 0, y - ring.y1);
+        if (bx > bestDistance || by > bestDistance) continue;
+        if (bx === 0 && by === 0 && insideRing(ring.points, x, y)) return r;
+        const d = distanceToRing(ring.points, x, y);
+        if (d <= bestDistance) {
+          best = r;
+          bestDistance = d;
+        }
+      }
+    }
+  }
+  return best;
+}
+
 /**
  * Where a point-like feature's label goes: the point, or for a polygon the
  * middle of its largest ring's box — a cheap stand-in for the pole of