@react-x11/components 0.8.0 → 0.10.0

package/src/maps/gl/cover.ts

@@ -0,0 +1,205 @@
+// Which tiles a GL frame draws, and where.
+//
+// The same cover the retained renderer uses (`../proj.ts`'s `tileCover`),
+// resolved against what is loaded. The difference is what a stand-in costs:
+// the retained renderer scales an ancestor's *bitmap* over a hole, so a
+// stand-in is blurry until the real tile lands; here an ancestor is the same
+// geometry drawn at a larger scale, so a stand-in is exactly as sharp as its
+// data. Overzoom is the same move with no hole in it — a z14 tile at zoom 20
+// is the z14 tile, drawn 64 times bigger, with no sub-tiling and nothing
+// rasterized — which is why this file has no overzoom code at all. A raster
+// tile past its source's depth is the same move again: its data tile, drawn
+// whole and stretched over its own square.
+//
+// **The grid is laid out on the projection's world**, `512 · 2^zoom`, and
+// not on the source's tile size. That is react-x11-components#65 again, and
+// the proof of concept had it back: a 256-pixel raster source laid out on a
+// 256-pixel world lands at half the size of everything placed with the
+// projection — markers, overlays, labels, `project()`. `tileCover` reads a
+// smaller tile one level deeper instead, which puts every image at its own
+// natural size on the one world everything shares.
+import {
+  BELOW,
+  DEFAULT_TILE_SIZE,
+  FILL_DEPTH,
+  fillFromBelow,
+  tileCover,
+  transformFor,
+} from '../proj.js';
+import type { MapCamera, TileId, TilePyramid } from '../proj.js';
+import type { GlTileData } from './buckets.js';
+import type { RenderTile } from './renderer.js';
+
+/** What the cover asks of a tile store: the tile's data, `null` when the
+ *  source has no data there, `undefined` while it is still to come. */
+export interface TileLookup {
+  get(tile: TileId): GlTileData | null | undefined;
+  /**
+   * What the store has answered for at or under a tile: `'here'` for the
+   * tile itself, `'below'` for only tiles under it — within `FILL_DEPTH`
+   * levels — and `undefined` for neither.
+   *
+   * What lets a hole's search for pieces skip the parts of the pyramid that
+   * hold nothing. Without it the search asks `get` for every tile down to
+   * that depth — which costs lookups, and stamps a tile still loading as
+   * used, so a load the view has left is not cancelled.
+   */
+  holds?(tile: TileId): 'here' | 'below' | undefined;
+}
+
+export interface CoverResult {
+  tiles: RenderTile[];
+  /** Tiles the view wants and the store has not answered for yet — the
+   *  padded ring around the view included, so a pan finds its tiles. */
+  missing: TileId[];
+  /** The pyramid level the view is drawn from. */
+  level: number;
+  /** Tiles of the view drawn from their own data, from an ancestor's, and
+   *  from their children's — the retained renderer's `ready`,
+   *  `fromAncestor` and `fromDescendant`. */
+  own: number;
+  ancestors: number;
+  descendants: number;
+  /** Tiles of the view, stand-ins or not: its cover, less the padded ring. */
+  inView: TileId[];
+}
+
+/** How far up the pyramid a hole looks for a stand-in. */
+const MAX_ANCESTOR = 8;
+
+/**
+ * The frame's tiles, centre-out, each with its screen square and its clip.
+ *
+ * A hole — a tile still loading, or one the source has no data for — is
+ * covered from whichever side has geometry. Zooming out, that is the tiles
+ * under it: each quarter from the nearest level that has it, down to
+ * `FILL_DEPTH`. Whatever they leave, and the whole of a hole with nothing
+ * under it, is the nearest ancestor's, drawn at its own larger size and
+ * clipped to each gap. `AGENTS.md`'s rule for the retained cache holds here
+ * too: a pyramid has two neighbours.
+ *
+ * The first cut tried the ancestor first, and the children only when all
+ * four of them were in hand. A zoom out leaves the level it came from in
+ * the middle of the view, covering only part of the tiles at the edges, and
+ * a quick one leaves it two or three levels down: both were the background,
+ * with the sharper tiles in hand.
+ */
+export function renderCover(
+  camera: MapCamera,
+  pane: { width: number; height: number },
+  scale: number,
+  pyramid: TilePyramid,
+  lookup: TileLookup,
+  options: {
+    /**
+     * Draw the view from this pyramid level rather than the one its zoom
+     * picks — the level being faded out, or a coarser one while adaptive
+     * quality is saving work. Holes still borrow from the whole pyramid.
+     */
+    level?: number;
+    /**
+     * Logical pixels of tiles to ask for around the view, which are wanted
+     * — so they load, and a load in flight for one is not given up — and
+     * not drawn. The retained renderer keeps the same ring warm.
+     */
+    padding?: number;
+  } = {},
+): CoverResult {
+  const transform = transformFor(camera, pane, DEFAULT_TILE_SIZE);
+  const forced = options.level;
+  const entries = tileCover(
+    transform,
+    forced === undefined
+      ? pyramid
+      : { ...pyramid, minZoom: forced, maxZoom: forced },
+    options.padding ?? 0,
+  );
+  const tiles: RenderTile[] = [];
+  const missing: TileId[] = [];
+  const inView: TileId[] = [];
+  const level = entries.length > 0 ? entries[0].tile.z : 0;
+  let own = 0;
+  let ancestors = 0;
+  let descendants = 0;
+
+  for (const entry of entries) {
+    const clip = {
+      x: entry.x * scale,
+      y: entry.y * scale,
+      width: entry.size * scale,
+      height: entry.size * scale,
+    };
+    const data = lookup.get(entry.tile);
+    if (data === undefined) missing.push(entry.tile);
+    const visible =
+      entry.x < pane.width &&
+      entry.y < pane.height &&
+      entry.x + entry.size > 0 &&
+      entry.y + entry.size > 0;
+    // The padded ring is wanted, and that is all.
+    if (!visible) continue;
+    inView.push(entry.tile);
+    if (data) {
+      tiles.push({ data, x: clip.x, y: clip.y, size: clip.width, clip });
+      own++;
+      continue;
+    }
+    // Under it: a tile with no data has nothing under it either, and past
+    // the pyramid's depth there is nothing to find.
+    const { z, x, y } = entry.tile;
+    const below = fillFromBelow(
+      entry.tile,
+      data === null ? 0 : Math.min(FILL_DEPTH, pyramid.maxZoom - z),
+      (under) => {
+        const held = lookup.holds ? lookup.holds(under) : 'here';
+        if (held === undefined) return undefined;
+        if (held === 'below') return BELOW;
+        const got = lookup.get(under);
+        return got === undefined ? BELOW : got;
+      },
+    );
+    for (const piece of below.pieces) {
+      const size = clip.width / piece.span;
+      const px = clip.x + piece.x * size;
+      const py = clip.y + piece.y * size;
+      tiles.push({
+        data: piece.value,
+        x: px,
+        y: py,
+        size,
+        clip: { x: px, y: py, width: size, height: size },
+      });
+    }
+    if (below.covered) descendants++;
+    if (below.gaps.length === 0) continue;
+    // Over it: an ancestor, the same ground `2^k` times the size, from
+    // `sub` cells above and to the left of this entry's square — drawn once
+    // for each gap, clipped to it.
+    for (let k = 1; k <= MAX_ANCESTOR && z - k >= pyramid.minZoom; k++) {
+      const ancestor = { z: z - k, x: x >> k, y: y >> k };
+      const stand = lookup.get(ancestor);
+      if (!stand) continue;
+      const size = clip.width * (1 << k);
+      const sx = clip.x - (x - (ancestor.x << k)) * clip.width;
+      const sy = clip.y - (y - (ancestor.y << k)) * clip.width;
+      for (const gap of below.gaps) {
+        const edge = clip.width / gap.span;
+        tiles.push({
+          data: stand,
+          x: sx,
+          y: sy,
+          size,
+          clip: {
+            x: clip.x + gap.x * edge,
+            y: clip.y + gap.y * edge,
+            width: edge,
+            height: edge,
+          },
+        });
+      }
+      ancestors++;
+      break;
+    }
+  }
+  return { tiles, missing, level, own, ancestors, descendants, inView };
+}

package/src/maps/gl/index.ts

@@ -0,0 +1,23 @@
+// The GL renderer's entry: what `<Map>` loads, by dynamic import, when it
+// chooses to draw a map through GL — and only then.
+//
+// **Registration happens when this module is evaluated**, which is the design
+// here as it is in `../index.ts`: the pane element (`./pane.ts`) is
+// registered by the module that is loaded when GL is chosen, so an
+// application that never draws a map through GL registers nothing and
+// bundles none of this. The vt terminal's `src/terminal/vt/index.ts` is the
+// same shape, for the same reason.
+import { registerElement, registeredElements } from 'react-x11/host';
+
+import { GL_PANE, GlPaneNode } from './pane.js';
+
+if (!registeredElements().includes(GL_PANE)) {
+  registerElement(GL_PANE, {
+    create: (props, app) => new GlPaneNode(props, app),
+    // The `<glarea>` the map is drawn in.
+    childrenAllowed: true,
+  });
+}
+
+export { GlMapPane } from './view.js';
+export type { GlMapPaneProps } from './view.js';

package/src/maps/gl/markers.ts

@@ -0,0 +1,83 @@
+// The markers, as the GL renderer draws them: a quad each, in one instanced
+// draw, shaded by its distance to the marker's outline (`MARKER_FRAGMENT`) —
+// a disc, or a pin's teardrop, and the ring around it. Which markers, in
+// what order, where and in what colours is `../overlay.ts`'s, which the
+// retained renderer draws from too; what is here is only the packing.
+import {
+  MARKER_SIZE,
+  PIN_HEIGHT,
+  markerPaint,
+  markersInView,
+} from '../overlay.js';
+import type { MapMarker, OverlayPalette } from '../overlay.js';
+import type { Transform } from '../proj.js';
+import { parseColor, premultiplied } from './color.js';
+import type { Rgba } from './color.js';
+
+/**
+ * Floats per marker: the point it marks, in device pixels — a pin's tip, a
+ * disc's centre — its head's radius, and how far above the point the head's
+ * centre is (0 for a disc); the fill; the ring; the ring's width, and one
+ * float unused.
+ */
+export const MARKER_INSTANCE = 14;
+
+/** A frame's markers, bottom first. */
+export interface MarkerBatch {
+  instances: Float32Array;
+  count: number;
+}
+
+const CLEAR: Rgba = [0, 0, 0, 0];
+
+export class MarkerBatcher {
+  private _instances = new Float32Array(MARKER_INSTANCE * 16);
+  private readonly _colors = new Map<string, Rgba>();
+
+  /**
+   * The markers in view, bottom first. `transform` is the map's at this
+   * frame and `pane` its size, in logical pixels.
+   */
+  batch(
+    markers: readonly MapMarker[],
+    transform: Transform,
+    pane: { width: number; height: number },
+    scale: number,
+    palette: OverlayPalette,
+  ): MarkerBatch {
+    const shown = markersInView(markers, transform, pane);
+    if (this._instances.length < shown.length * MARKER_INSTANCE) {
+      this._instances = new Float32Array(shown.length * MARKER_INSTANCE * 2);
+    }
+    const d = this._instances;
+    shown.forEach(({ marker, rect }, i) => {
+      const at = i * MARKER_INSTANCE;
+      const size = marker.size ?? MARKER_SIZE;
+      const r = (size / 2) * scale;
+      const paint = markerPaint(marker, palette, scale);
+      d[at] = rect.tipX * scale;
+      d[at + 1] = rect.tipY * scale;
+      d[at + 2] = r;
+      d[at + 3] =
+        (marker.shape ?? 'pin') === 'circle'
+          ? 0
+          : size * PIN_HEIGHT * scale - r;
+      d.set(this._color(paint.fill), at + 4);
+      d.set(this._color(paint.ring), at + 8);
+      d[at + 12] = paint.ringWidth;
+      d[at + 13] = 0;
+    });
+    return { instances: d, count: shown.length };
+  }
+
+  private _color(value: string): Rgba {
+    let color = this._colors.get(value);
+    if (!color) {
+      const parsed = parseColor(value);
+      color = parsed ? premultiplied(parsed) : CLEAR;
+      if (this._colors.size > 256) this._colors.clear();
+      this._colors.set(value, color);
+    }
+    return color;
+  }
+}

package/src/maps/gl/overlays.ts

@@ -0,0 +1,379 @@
+// The overlays, as the GL renderer draws them: one bucket — the record
+// streams a tile's are (`./buckets.ts`), drawn by the same programs — built
+// from every overlay on the map, in the order `drawOverlays` draws them.
+//
+// **An overlay's coordinates are not a tile's.** A tile's are small numbers
+// from its own corner, which is why int16 is enough for them at any zoom. An
+// overlay is geography with no corner: a route across a city seen at zoom 22
+// is a few thousand pixels of line in a world four billion pixels wide, and
+// a float32 resolves a position that large to the nearest 512 pixels. So the
+// bucket is given a corner — a **region**, a square of the world around the
+// view — and its records are int16 from the region's centre, worked out in
+// float64 on this thread. Where the region's centre lands is worked out each
+// frame, in float64 too and relative to the camera, and reaches the GPU as a
+// uniform that is small because the region is near the camera. Nothing large
+// is ever a float32, so a vertex holds still under a camera moving by a
+// fraction of a pixel at any zoom.
+//
+// A region holds while the view is inside it and the zoom within a level of
+// the one it was built at; past either, the bucket is built again around the
+// view. Geometry is clipped to the region, which is what keeps it inside
+// int16 — the retained renderer clips to its pane for the same kind of
+// reason, XRender's 16.16.
+import { clipRing, clipSegment } from '../clip.js';
+import type { ClipRect } from '../clip.js';
+import { circleSegments, overlayOrder } from '../overlay.js';
+import type { MapOverlay, OverlayPalette } from '../overlay.js';
+import {
+  DEFAULT_TILE_SIZE,
+  mercatorXFromLon,
+  mercatorYFromLat,
+  project,
+  worldSize,
+} from '../proj.js';
+import type { LngLat, MapCamera } from '../proj.js';
+import { Stream, pushBreak, pushFillBreak } from './buckets.js';
+import type { GlTileData, LayerDraw } from './buckets.js';
+
+/** Units from a region's centre to its edge: int16, clear of the sentinel. */
+const REACH = 32000;
+/** Logical pixels the view keeps from a region's edge — more than a stroke
+ *  is wide, so a clipped end, or an outline along the edge, is never seen. */
+const EDGE = 128;
+
+/** A square of the world an overlay bucket is built around. */
+export interface OverlayRegion {
+  /** Its centre, in mercator. */
+  x: number;
+  y: number;
+  /** Units per mercator unit. */
+  k: number;
+  /** The zoom it was built at. */
+  zoom: number;
+  /** The display scale it was built for — what a circle's segments are
+   *  counted in. */
+  scale: number;
+}
+
+/** One draw from the bucket: an overlay's fill, or one of its strokes. */
+export interface OverlayPass {
+  /** The geometry: an index into the bucket's `draws`. */
+  index: number;
+  kind: 'fill' | 'stroke';
+  /** A stroke of the fill stream — a polygon's or a circle's outline —
+   *  rather than of the line stream. */
+  outline?: boolean;
+  color: string;
+  opacity: number;
+  /** A stroke's width, in logical pixels. */
+  width: number;
+  dash?: readonly number[];
+}
+
+export interface OverlayBucket {
+  data: GlTileData;
+  passes: OverlayPass[];
+  region: OverlayRegion;
+}
+
+const globals = globalThis as { performance?: { now(): number } };
+const now = (): number => globals.performance?.now() ?? Date.now();
+
+/**
+ * A region around the view: centred on the camera, with room for the pane's
+ * diagonal either side — so a view zoomed a level out is still inside it,
+ * and a pan has most of a pane to go before the bucket is built again.
+ */
+export function overlayRegion(
+  camera: MapCamera,
+  pane: { width: number; height: number },
+  scale: number,
+): OverlayRegion {
+  const centre = project(camera.center);
+  const world = worldSize(camera.zoom, DEFAULT_TILE_SIZE);
+  const reach = Math.max(1024, Math.hypot(pane.width, pane.height) + 2 * EDGE);
+  return {
+    x: centre.x,
+    y: centre.y,
+    k: (REACH * world) / reach,
+    zoom: camera.zoom,
+    scale,
+  };
+}
+
+/** Whether a region still serves a view: the zoom within a level of its
+ *  own, the scale its own, and the view inside it with room to spare. */
+export function regionHolds(
+  region: OverlayRegion,
+  camera: MapCamera,
+  pane: { width: number; height: number },
+  scale: number,
+): boolean {
+  if (scale !== region.scale) return false;
+  if (Math.abs(camera.zoom - region.zoom) > 1) return false;
+  const centre = project(camera.center);
+  let dx = centre.x - region.x;
+  dx -= Math.round(dx);
+  const perPixel = region.k / worldSize(camera.zoom, DEFAULT_TILE_SIZE);
+  const x = Math.abs(dx * region.k) + (pane.width / 2 + EDGE) * perPixel;
+  const y =
+    Math.abs((centre.y - region.y) * region.k) +
+    (pane.height / 2 + EDGE) * perPixel;
+  return x <= REACH && y <= REACH;
+}
+
+/**
+ * Where a region lands this frame: device pixels per unit, and its centre
+ * in device pixels — in float64, from the camera, which is what keeps both
+ * small enough for the float32s they become.
+ */
+export function regionPlacement(
+  region: OverlayRegion,
+  camera: MapCamera,
+  width: number,
+  height: number,
+  scale: number,
+): { unit: number; x: number; y: number } {
+  const centre = project(camera.center);
+  const world = worldSize(camera.zoom, DEFAULT_TILE_SIZE) * scale;
+  let dx = region.x - centre.x;
+  dx -= Math.round(dx);
+  return {
+    unit: world / region.k,
+    x: dx * world + width / 2,
+    y: (region.y - centre.y) * world + height / 2,
+  };
+}
+
+/**
+ * The bucket for a map's overlays, around a region: each overlay's geometry
+ * once, in `drawOverlays`' order, and the passes that draw it — a line's
+ * casing and then the line; a polygon's or a circle's fill and then its
+ * outline. Colours an overlay does not name are the palette's.
+ */
+export function buildOverlayBucket(
+  overlays: readonly MapOverlay[],
+  region: OverlayRegion,
+  palette: OverlayPalette,
+): OverlayBucket {
+  const started = now();
+  const line = new Stream(256);
+  const fill = new Stream(256);
+  const draws: LayerDraw[] = [];
+  const passes: OverlayPass[] = [];
+  const clip: ClipRect = {
+    minX: -REACH,
+    minY: -REACH,
+    maxX: REACH,
+    maxY: REACH,
+  };
+  // Region units, from its centre — on the copy of the world nearest it, as
+  // `projectLngLat` takes the copy nearest the camera.
+  const units = (path: readonly LngLat[]): number[] => {
+    const out: number[] = [];
+    for (const position of path) {
+      let x = mercatorXFromLon(position.lon) - region.x;
+      x -= Math.round(x);
+      const y = mercatorYFromLat(position.lat) - region.y;
+      out.push(x * region.k, y * region.k);
+    }
+    return out;
+  };
+  for (const overlay of overlayOrder(overlays)) {
+    const opacity = overlay.opacity ?? 1;
+    if (opacity <= 0) continue;
+    const index = draws.length;
+    if (overlay.kind === 'line') {
+      const first = line.count;
+      emitPath(line, units(overlay.path), clip);
+      if (line.count === first) continue;
+      draws.push({
+        layer: index,
+        kind: 'line',
+        ranges: [first, line.count - first],
+      });
+      const width = overlay.width ?? 3;
+      if (overlay.casing !== undefined) {
+        passes.push({
+          index,
+          kind: 'stroke',
+          color: overlay.casing,
+          opacity,
+          width: Math.max(width + 2, overlay.casingWidth ?? 0),
+        });
+      }
+      passes.push({
+        index,
+        kind: 'stroke',
+        color: overlay.color ?? palette.accent,
+        opacity,
+        width,
+        dash: overlay.dash,
+      });
+      continue;
+    }
+    const rings =
+      overlay.kind === 'polygon'
+        ? overlay.rings.map(units)
+        : circleRing(overlay, region);
+    const first = fill.count;
+    for (const ring of rings) emitRing(fill, clipRing(ring, clip));
+    if (fill.count === first) continue;
+    draws.push({
+      layer: index,
+      kind: 'fill',
+      ranges: [first, fill.count - first],
+    });
+    passes.push({
+      index,
+      kind: 'fill',
+      color: overlay.fill ?? palette.accent,
+      opacity,
+      width: 0,
+    });
+    if (overlay.outline !== undefined) {
+      passes.push({
+        index,
+        kind: 'stroke',
+        outline: true,
+        color: overlay.outline,
+        opacity,
+        width: overlay.outlineWidth ?? 1,
+      });
+    }
+  }
+  return {
+    data: {
+      line: line.take(),
+      lineRecords: line.count,
+      fill: fill.take(),
+      fillRecords: fill.count,
+      draws,
+      stats: {
+        features: overlays.length,
+        lineRecords: line.count,
+        fillRecords: fill.count,
+        groups: 0,
+        ms: now() - started,
+      },
+    },
+    passes,
+    region,
+  };
+}
+
+/**
+ * A circle as a ring, in region units: `drawOverlays`' radius — from the
+ * projection a hundredth of a degree north of the centre — and as many
+ * segments as the largest it is drawn at while the region holds, a level
+ * in, needs to keep its sagitta under half a pixel.
+ */
+function circleRing(
+  overlay: Extract<MapOverlay, { kind: 'circle' }>,
+  region: OverlayRegion,
+): number[][] {
+  const lat = overlay.center.lat;
+  const cy = mercatorYFromLat(lat);
+  const north = mercatorYFromLat(Math.min(85, lat + 0.01));
+  const radius =
+    (overlay.radiusMetres * Math.abs(cy - north)) / (0.01 * 111_319.9);
+  const pixels =
+    radius * worldSize(region.zoom + 1, DEFAULT_TILE_SIZE) * region.scale;
+  if (!(pixels > 0.5)) return [];
+  const segments = circleSegments(pixels);
+  let x = mercatorXFromLon(overlay.center.lon) - region.x;
+  x -= Math.round(x);
+  const y = cy - region.y;
+  const ring: number[] = [];
+  for (let i = 0; i < segments; i++) {
+    const angle = (i / segments) * Math.PI * 2;
+    ring.push(
+      (x + Math.cos(angle) * radius) * region.k,
+      (y + Math.sin(angle) * radius) * region.k,
+    );
+  }
+  return [ring];
+}
+
+const int16 = (v: number): number => {
+  const s = Math.round(v);
+  return s < -32767 ? -32767 : s > 32767 ? 32767 : s;
+};
+
+function record(line: Stream, x: number, y: number, dist: number): void {
+  line.reserve(1);
+  const at = line.count;
+  line.i16[at * 4] = int16(x);
+  line.i16[at * 4 + 1] = int16(y);
+  line.f32[at * 2 + 1] = dist;
+  line.count++;
+}
+
+function endLine(line: Stream): void {
+  line.reserve(1);
+  pushBreak(line);
+}
+
+/**
+ * A path's pieces inside the clip, as polylines each ended by a sentinel.
+ * `dist` is measured along the whole path, clipped or not, so a dash
+ * pattern stays where it is on the ground when the region moves.
+ */
+function emitPath(
+  line: Stream,
+  points: readonly number[],
+  clip: ClipRect,
+): void {
+  let along = 0;
+  let open = false;
+  for (let i = 0; i + 3 < points.length; i += 2) {
+    const x0 = points[i];
+    const y0 = points[i + 1];
+    const x1 = points[i + 2];
+    const y1 = points[i + 3];
+    const piece = clipSegment(x0, y0, x1, y1, clip);
+    if (piece) {
+      const [a, b, c, d] = piece;
+      if (!open) {
+        record(line, a, b, along + Math.hypot(a - x0, b - y0));
+        open = true;
+      }
+      record(line, c, d, along + Math.hypot(c - x0, d - y0));
+      // Cut short at its far end: the next piece is a new polyline.
+      if (c !== x1 || d !== y1) {
+        endLine(line);
+        open = false;
+      }
+    } else if (open) {
+      endLine(line);
+      open = false;
+    }
+    along += Math.hypot(x1 - x0, y1 - y0);
+  }
+  if (open) endLine(line);
+}
+
+/** A ring as a fan, as `./buckets.ts` writes one: its points, closed, each
+ *  carrying the first as the fan's apex, then a sentinel. */
+function emitRing(fill: Stream, ring: readonly number[]): void {
+  const n = ring.length >> 1;
+  if (n < 3) return;
+  fill.reserve(n + 2);
+  const i16 = fill.i16;
+  const ax = int16(ring[0]);
+  const ay = int16(ring[1]);
+  let at = fill.count * 4;
+  for (let i = 0; i < n; i++) {
+    i16[at] = int16(ring[i * 2]);
+    i16[at + 1] = int16(ring[i * 2 + 1]);
+    i16[at + 2] = ax;
+    i16[at + 3] = ay;
+    at += 4;
+  }
+  i16[at] = ax;
+  i16[at + 1] = ay;
+  i16[at + 2] = ax;
+  i16[at + 3] = ay;
+  fill.count += n + 1;
+  pushFillBreak(fill);
+}