@chrtco/sdk 0.10.43 → 0.10.45

package/CHANGELOG.md

@@ -14,6 +14,18 @@ All notable changes to `@chrtco/sdk` will be documented in this file.
   source themselves, such as the tile-worker's TileJSON.
 
 ### Fixed
+- **A palette switch held the map's tile answers behind its own SVG decodes.**
+  `rethemeSymbolImages` decoded every symbol as its own SVG `<img>`, and each
+  is a whole browser document whose many small main-thread tasks queued ahead
+  of MapLibre's worker messages. A tile reload started by the switch's
+  data-driven paint (two-shade soundings, light circles) landed only after
+  them, and until it did those kept their previous palette's colours. Symbols
+  are now decoded up to 32 to a document, and each is
+  drawn from its sheet shifted onto a canvas its own size. The pixels are
+  byte-identical to the per-symbol path for every family and palette. A
+  symbol that cannot safely share a document (a prolog, styles, a reference
+  to an id it does not define) still gets its own, as does every symbol of a
+  sheet that fails to decode. `loadSymbolImageSpecs` is unchanged.
 - **`offline.download()` left a second copy of every pack in a browser's HTTP
   cache.** In a browser, an Electron renderer or Electron `net.fetch`, the
   bundle GET was stored in the profile's disk cache as well as written through

package/dist/atlas/browser.cjs

@@ -1176,17 +1176,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;
@@ -1221,45 +1314,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();