@chrtco/sdk 0.10.43 → 0.10.45

package/dist/atlas/browser.d.cts

@@ -279,6 +279,32 @@ declare function reloadChrtRasterSymbolImages(map: maplibregl.Map, colorTable: C
  * The rasterising itself (SVG → canvas → pixels) is main-thread work, so it
  * runs in slices with a yield between them and reports progress; the chart
  * keeps drawing while the icons come over.
+ *
+ * ===========================================================================
+ * ⚠ ONE SVG DOCUMENT PER SYMBOL STARVES THE MAP. A SWITCH DRAWS FROM SHEETS.
+ * ===========================================================================
+ *
+ * An `<img>` with an SVG data URL is a whole Blink document — its own page,
+ * parser, font set, idleness timers, memory registration and mojo pipes — and
+ * each one queues a dozen-odd small main-thread tasks, some long after
+ * `decode()` resolves. 569 of them queued 6,452 tasks at once (Chrome trace,
+ * palette harness, 2026-10-03), and MapLibre's worker messages waited behind
+ * them: the paint diff's tile reload, answered by the workers in ~30 ms, was
+ * picked up by the main thread 21 s and then 27 s later at 4x CPU throttle.
+ * Until it lands, data-driven paint — soundings, light circles — keeps its
+ * DAY colours. One decode in flight at a time did not help; fewer DOCUMENTS
+ * did. `rethemeSymbolImages` therefore draws up to `SHEET_MAX_SYMBOLS`
+ * symbols from ONE document — a column of nested `<svg>`s at whole-pixel
+ * rows — and rasterises each symbol by drawing that sheet shifted up by the
+ * symbol's row onto a canvas the symbol's size.
+ *
+ * ⚠ SHIFT THE SHEET; DO NOT CUT ROWS OUT OF ONE DRAW. Drawn once and cut,
+ * ~15% of symbols moved an anti-aliased edge pixel (up to 64/255): a symbol
+ * at row y is painted at y + s·p, which rounds differently in float from the
+ * s·p it gets alone. Shifted by −y, the canvas and sheet translations cancel
+ * in the matrix (−y + y = 0, exactly) before any point is mapped, and every
+ * symbol of every family and palette comes out byte-identical to its own
+ * document (`scripts/perf/palette-switch/verify-run.mjs`).
  */
 
 interface SymbolImageProgress {

package/dist/atlas/browser.d.ts

@@ -279,6 +279,32 @@ declare function reloadChrtRasterSymbolImages(map: maplibregl.Map, colorTable: C
  * The rasterising itself (SVG → canvas → pixels) is main-thread work, so it
  * runs in slices with a yield between them and reports progress; the chart
  * keeps drawing while the icons come over.
+ *
+ * ===========================================================================
+ * ⚠ ONE SVG DOCUMENT PER SYMBOL STARVES THE MAP. A SWITCH DRAWS FROM SHEETS.
+ * ===========================================================================
+ *
+ * An `<img>` with an SVG data URL is a whole Blink document — its own page,
+ * parser, font set, idleness timers, memory registration and mojo pipes — and
+ * each one queues a dozen-odd small main-thread tasks, some long after
+ * `decode()` resolves. 569 of them queued 6,452 tasks at once (Chrome trace,
+ * palette harness, 2026-10-03), and MapLibre's worker messages waited behind
+ * them: the paint diff's tile reload, answered by the workers in ~30 ms, was
+ * picked up by the main thread 21 s and then 27 s later at 4x CPU throttle.
+ * Until it lands, data-driven paint — soundings, light circles — keeps its
+ * DAY colours. One decode in flight at a time did not help; fewer DOCUMENTS
+ * did. `rethemeSymbolImages` therefore draws up to `SHEET_MAX_SYMBOLS`
+ * symbols from ONE document — a column of nested `<svg>`s at whole-pixel
+ * rows — and rasterises each symbol by drawing that sheet shifted up by the
+ * symbol's row onto a canvas the symbol's size.
+ *
+ * ⚠ SHIFT THE SHEET; DO NOT CUT ROWS OUT OF ONE DRAW. Drawn once and cut,
+ * ~15% of symbols moved an anti-aliased edge pixel (up to 64/255): a symbol
+ * at row y is painted at y + s·p, which rounds differently in float from the
+ * s·p it gets alone. Shifted by −y, the canvas and sheet translations cancel
+ * in the matrix (−y + y = 0, exactly) before any point is mapped, and every
+ * symbol of every family and palette comes out byte-identical to its own
+ * document (`scripts/perf/palette-switch/verify-run.mjs`).
  */
 
 interface SymbolImageProgress {

package/dist/atlas/browser.js

@@ -1127,17 +1127,110 @@ async function decode(spec) {
   }
 }
 var scratch = null;
-function rasterise(img, spec) {
+function scratchContext() {
   if (!scratch) {
-    const canvas2 = document.createElement("canvas");
-    scratch = canvas2.getContext("2d", { willReadFrequently: true });
+    const canvas = document.createElement("canvas");
+    scratch = canvas.getContext("2d", { willReadFrequently: true });
     if (!scratch) throw new Error("symbol-images: no 2d canvas context");
   }
-  const canvas = scratch.canvas;
+  return scratch;
+}
+function rasterise(src, spec) {
+  const ctx = scratchContext();
+  const canvas = ctx.canvas;
   canvas.width = spec.width;
   canvas.height = spec.height;
-  scratch.drawImage(img, 0, 0, spec.width, spec.height);
-  return scratch.getImageData(0, 0, spec.width, spec.height);
+  ctx.drawImage(src.img, 0, -src.y, src.width, src.height);
+  return ctx.getImageData(0, 0, spec.width, spec.height);
+}
+var SHEET_MAX_SYMBOLS = 32;
+var SHEET_MAX_HEIGHT = 4096;
+var ROOT = /^\s*<svg\b([^>]*)>[\s\S]*<\/svg>\s*$/;
+var NOT_SHAREABLE = /<\?xml|<!DOCTYPE|<style\b|<script\b|<foreignObject\b|<svg\b[\s\S]*<svg\b/i;
+function rootSize(attrs) {
+  const w = /\swidth="(\d+(?:\.\d+)?)"/.exec(attrs);
+  const h = /\sheight="(\d+(?:\.\d+)?)"/.exec(attrs);
+  return w && h ? { w: Number(w[1]), h: Number(h[1]) } : null;
+}
+function shareable(spec) {
+  if (!(spec.width > 0 && spec.height > 0) || spec.height > SHEET_MAX_HEIGHT) return null;
+  const root = ROOT.exec(spec.svg);
+  const own = root ? rootSize(root[1]) : null;
+  if (!own || NOT_SHAREABLE.test(spec.svg)) return null;
+  const ids = /* @__PURE__ */ new Set();
+  for (const m of spec.svg.matchAll(/\sid="([^"]*)"/g)) {
+    if (ids.has(m[1])) return null;
+    ids.add(m[1]);
+  }
+  for (const m of spec.svg.matchAll(/url\(\s*['"]?#([^'")\s]*)|href="#([^"]*)"/g)) {
+    if (!ids.has(m[1] ?? m[2])) return null;
+  }
+  return { spec, own, ids };
+}
+function sheetOf(run) {
+  let y = 0;
+  let width = 0;
+  const parts = [];
+  const slots = [];
+  for (const { spec, own } of run) {
+    parts.push(
+      `<svg x="0" y="${y}" width="${spec.width}" height="${spec.height}" viewBox="0 0 ${own.w} ${own.h}" preserveAspectRatio="none">${spec.svg}</svg>`
+    );
+    slots.push({ spec, y });
+    y += spec.height;
+    width = Math.max(width, spec.width);
+  }
+  return {
+    svg: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${y}">${parts.join("")}</svg>`,
+    width,
+    height: y,
+    slots
+  };
+}
+function planRasterUnits(specs) {
+  const units = [];
+  let run = [];
+  let runIds = /* @__PURE__ */ new Set();
+  let runHeight = 0;
+  const flush = () => {
+    if (run.length === 1) units.push({ one: run[0].spec });
+    else if (run.length > 1) units.push({ sheet: sheetOf(run) });
+    run = [];
+    runIds = /* @__PURE__ */ new Set();
+    runHeight = 0;
+  };
+  for (const spec of specs) {
+    const s = shareable(spec);
+    if (!s) {
+      flush();
+      units.push({ one: spec });
+      continue;
+    }
+    if (run.length >= SHEET_MAX_SYMBOLS || runHeight + spec.height > SHEET_MAX_HEIGHT || [...s.ids].some((id) => runIds.has(id))) {
+      flush();
+    }
+    run.push(s);
+    runHeight += spec.height;
+    for (const id of s.ids) runIds.add(id);
+  }
+  flush();
+  return units;
+}
+async function sourcesFor(unit, decoded) {
+  const img = await decoded;
+  if ("one" in unit) {
+    return [img ? { img, y: 0, width: unit.one.width, height: unit.one.height } : null];
+  }
+  const { sheet } = unit;
+  if (img) return sheet.slots.map(({ y }) => ({ img, y, width: sheet.width, height: sheet.height }));
+  const singles = sheet.slots.map(({ spec }) => decode(spec));
+  const out = [];
+  for (let i = 0; i < singles.length; i++) {
+    const one = await singles[i];
+    const { spec } = sheet.slots[i];
+    out.push(one ? { img: one, y: 0, width: spec.width, height: spec.height } : null);
+  }
+  return out;
 }
 function yieldToBrowser() {
   const scheduler = globalThis.scheduler;
@@ -1172,45 +1265,51 @@ async function rethemeSymbolImages(map, specs, opts = {}) {
   const total = specs.length;
   const result = { updated: 0, added: 0, failed: 0, aborted: false };
   let done = 0;
-  const decoded = specs.map((spec) => decode(spec));
+  const units = planRasterUnits(specs);
+  const decoded = units.map((unit) => decode("one" in unit ? unit.one : unit.sheet));
   let sliceStart = performance.now();
   let lastRepaint = sliceStart;
-  for (let i = 0; i < total; i++) {
+  outer: for (let u = 0; u < units.length; u++) {
+    const unit = units[u];
+    const unitSpecs = "one" in unit ? [unit.one] : unit.sheet.slots.map((slot) => slot.spec);
     if (opts.signal?.aborted) {
       result.aborted = true;
       break;
     }
-    const spec = specs[i];
-    const img = await decoded[i];
-    if (opts.signal?.aborted) {
-      result.aborted = true;
-      break;
-    }
-    if (!img) {
-      result.failed++;
-    } else {
-      const pixels = rasterise(img, spec);
-      const have = existingSize(map, spec.id);
-      if (have && have.w === spec.width && have.h === spec.height) {
-        map.updateImage(spec.id, pixels);
-        result.updated++;
+    const sources = await sourcesFor(unit, decoded[u]);
+    for (let i = 0; i < unitSpecs.length; i++) {
+      if (opts.signal?.aborted) {
+        result.aborted = true;
+        break outer;
+      }
+      const spec = unitSpecs[i];
+      const src = sources[i];
+      if (!src) {
+        result.failed++;
       } else {
-        if (map.hasImage(spec.id)) map.removeImage(spec.id);
-        map.addImage(spec.id, pixels, { sdf: spec.sdf, pixelRatio: spec.pixelRatio });
-        result.added++;
+        const px = rasterise(src, spec);
+        const have = existingSize(map, spec.id);
+        if (have && have.w === spec.width && have.h === spec.height) {
+          map.updateImage(spec.id, px);
+          result.updated++;
+        } else {
+          if (map.hasImage(spec.id)) map.removeImage(spec.id);
+          map.addImage(spec.id, px, { sdf: spec.sdf, pixelRatio: spec.pixelRatio });
+          result.added++;
+        }
+        opts.onApplied?.(spec.id);
       }
-      opts.onApplied?.(spec.id);
-    }
-    done++;
-    const now = performance.now();
-    if (now - sliceStart >= sliceMs) {
-      if (now - lastRepaint >= repaintEveryMs) {
-        map.triggerRepaint();
-        opts.onProgress?.({ done, total });
-        lastRepaint = now;
+      done++;
+      const now = performance.now();
+      if (now - sliceStart >= sliceMs) {
+        if (now - lastRepaint >= repaintEveryMs) {
+          map.triggerRepaint();
+          opts.onProgress?.({ done, total });
+          lastRepaint = now;
+        }
+        await yieldToBrowser();
+        sliceStart = performance.now();
       }
-      await yieldToBrowser();
-      sliceStart = performance.now();
     }
   }
   map.triggerRepaint();