@carto/api-client 0.5.32-alpha.48cef4f.127 → 0.5.32-alpha.723d642.132

package/build/api-client.cjs

@@ -10741,8 +10741,76 @@ var checker_small_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAA
 // src/fetch-map/patterns/solid.png
 var solid_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABHNCSVQICAgIfAhkiAAAAAFzUkdCAK7OHOkAAACWSURBVHic7dBBEcAwAMOwrPw5dzD0qIXA52/b3cOODtAaoAO0BugArQE6QGuADtAaoAO0BugArQE6QGuADtAaoAO0BugArQE6QGuADtAaoAO0BugArQE6QGuADtAaoAO0BugArQE6QGuADtAaoAO0BugArQE6QGuADtAaoAO0BugArQE6QGuADtAaoAO0BugArQE6QPsBULQBfwAqZPkAAAAASUVORK5CYII=";
 
+// src/fetch-map/patterns/hlines-large.svg
+var hlines_large_default2 = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><pattern id="p" width="64" height="16" patternUnits="userSpaceOnUse"><rect width="64" height="2"/></pattern></defs><rect width="64" height="64" fill="url(%23p)"/></svg>%0A';
+
+// src/fetch-map/patterns/hlines-medium.svg
+var hlines_medium_default2 = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><pattern id="p" width="64" height="8" patternUnits="userSpaceOnUse"><rect width="64" height="2"/></pattern></defs><rect width="64" height="64" fill="url(%23p)"/></svg>%0A';
+
+// src/fetch-map/patterns/hlines-small.svg
+var hlines_small_default2 = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><pattern id="p" width="64" height="4" patternUnits="userSpaceOnUse"><rect width="64" height="2"/></pattern></defs><rect width="64" height="64" fill="url(%23p)"/></svg>%0A';
+
+// src/fetch-map/patterns/vlines-large.svg
+var vlines_large_default2 = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><pattern id="p" width="16" height="64" patternUnits="userSpaceOnUse"><rect width="2" height="64"/></pattern></defs><rect width="64" height="64" fill="url(%23p)"/></svg>%0A';
+
+// src/fetch-map/patterns/vlines-medium.svg
+var vlines_medium_default2 = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><pattern id="p" width="8" height="64" patternUnits="userSpaceOnUse"><rect width="2" height="64"/></pattern></defs><rect width="64" height="64" fill="url(%23p)"/></svg>%0A';
+
+// src/fetch-map/patterns/vlines-small.svg
+var vlines_small_default2 = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><pattern id="p" width="4" height="64" patternUnits="userSpaceOnUse"><rect width="2" height="64"/></pattern></defs><rect width="64" height="64" fill="url(%23p)"/></svg>%0A';
+
+// src/fetch-map/patterns/diag-left-large.svg
+var diag_left_large_default2 = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><pattern id="p" width="45.2548" height="64" patternUnits="userSpaceOnUse" patternTransform="rotate(-45)"><rect width="1.4142" height="64"/></pattern></defs><rect width="64" height="64" fill="url(%23p)"/></svg>%0A';
+
+// src/fetch-map/patterns/diag-left-medium.svg
+var diag_left_medium_default2 = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><pattern id="p" width="22.6274" height="64" patternUnits="userSpaceOnUse" patternTransform="rotate(-45)"><rect width="1.4142" height="64"/></pattern></defs><rect width="64" height="64" fill="url(%23p)"/></svg>%0A';
+
+// src/fetch-map/patterns/diag-left-small.svg
+var diag_left_small_default2 = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><pattern id="p" width="11.3137" height="64" patternUnits="userSpaceOnUse" patternTransform="rotate(-45)"><rect width="1.4142" height="64"/></pattern></defs><rect width="64" height="64" fill="url(%23p)"/></svg>%0A';
+
+// src/fetch-map/patterns/diag-right-large.svg
+var diag_right_large_default2 = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><pattern id="p" width="45.2548" height="64" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="1.4142" height="64"/></pattern></defs><rect width="64" height="64" fill="url(%23p)"/></svg>%0A';
+
+// src/fetch-map/patterns/diag-right-medium.svg
+var diag_right_medium_default2 = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><pattern id="p" width="22.6274" height="64" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="1.4142" height="64"/></pattern></defs><rect width="64" height="64" fill="url(%23p)"/></svg>%0A';
+
+// src/fetch-map/patterns/diag-right-small.svg
+var diag_right_small_default2 = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><pattern id="p" width="11.3137" height="64" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="1.4142" height="64"/></pattern></defs><rect width="64" height="64" fill="url(%23p)"/></svg>%0A';
+
+// src/fetch-map/patterns/cross-hatch-large.svg
+var cross_hatch_large_default2 = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><pattern id="a" width="45.2548" height="64" patternUnits="userSpaceOnUse" patternTransform="rotate(-45)"><rect width="1.4142" height="64"/></pattern><pattern id="b" width="45.2548" height="64" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="1.4142" height="64"/></pattern></defs><rect width="64" height="64" fill="url(%23a)"/><rect width="64" height="64" fill="url(%23b)"/></svg>%0A';
+
+// src/fetch-map/patterns/cross-hatch-medium.svg
+var cross_hatch_medium_default2 = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><pattern id="a" width="22.6274" height="64" patternUnits="userSpaceOnUse" patternTransform="rotate(-45)"><rect width="1.4142" height="64"/></pattern><pattern id="b" width="22.6274" height="64" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="1.4142" height="64"/></pattern></defs><rect width="64" height="64" fill="url(%23a)"/><rect width="64" height="64" fill="url(%23b)"/></svg>%0A';
+
+// src/fetch-map/patterns/cross-hatch-small.svg
+var cross_hatch_small_default2 = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><pattern id="a" width="11.3137" height="64" patternUnits="userSpaceOnUse" patternTransform="rotate(-45)"><rect width="1.4142" height="64"/></pattern><pattern id="b" width="11.3137" height="64" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="1.4142" height="64"/></pattern></defs><rect width="64" height="64" fill="url(%23a)"/><rect width="64" height="64" fill="url(%23b)"/></svg>%0A';
+
+// src/fetch-map/patterns/dots-large.svg
+var dots_large_default2 = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><pattern id="p" width="16" height="16" patternUnits="userSpaceOnUse"><rect width="2" height="2"/></pattern></defs><rect width="64" height="64" fill="url(%23p)"/></svg>%0A';
+
+// src/fetch-map/patterns/dots-medium.svg
+var dots_medium_default2 = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><pattern id="p" width="8" height="8" patternUnits="userSpaceOnUse"><rect width="2" height="2"/></pattern></defs><rect width="64" height="64" fill="url(%23p)"/></svg>%0A';
+
+// src/fetch-map/patterns/dots-small.svg
+var dots_small_default2 = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><pattern id="p" width="4" height="4" patternUnits="userSpaceOnUse"><rect width="2" height="2"/></pattern></defs><rect width="64" height="64" fill="url(%23p)"/></svg>%0A';
+
+// src/fetch-map/patterns/checker-large.svg
+var checker_large_default2 = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><pattern id="p" width="16" height="16" patternUnits="userSpaceOnUse"><rect width="8" height="8"/><rect x="8" y="8" width="8" height="8"/></pattern></defs><rect width="64" height="64" fill="url(%23p)"/></svg>%0A';
+
+// src/fetch-map/patterns/checker-medium.svg
+var checker_medium_default2 = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><pattern id="p" width="8" height="8" patternUnits="userSpaceOnUse"><rect width="4" height="4"/><rect x="4" y="4" width="4" height="4"/></pattern></defs><rect width="64" height="64" fill="url(%23p)"/></svg>%0A';
+
+// src/fetch-map/patterns/checker-small.svg
+var checker_small_default2 = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs><pattern id="p" width="4" height="4" patternUnits="userSpaceOnUse"><rect width="2" height="2"/><rect x="2" y="2" width="2" height="2"/></pattern></defs><rect width="64" height="64" fill="url(%23p)"/></svg>%0A';
+
+// src/fetch-map/patterns/solid.svg
+var solid_default2 = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><defs></defs><rect width="64" height="64"/></svg>%0A';
+
 // src/fetch-map/pattern-atlas.ts
 var DEFAULT_CELL_SIZE = 128;
+var SOURCE_TILE_SIZE = 64;
+var VECTOR_RENDER_SIZE = 128;
 var PATTERN_ROWS = [
   "hlines",
   "vlines",
@@ -10777,6 +10845,30 @@ var CELL_URLS = {
   "checker-small": checker_small_default,
   solid: solid_default
 };
+var CELL_SVG_URLS = {
+  "hlines-large": hlines_large_default2,
+  "hlines-medium": hlines_medium_default2,
+  "hlines-small": hlines_small_default2,
+  "vlines-large": vlines_large_default2,
+  "vlines-medium": vlines_medium_default2,
+  "vlines-small": vlines_small_default2,
+  "diag-left-large": diag_left_large_default2,
+  "diag-left-medium": diag_left_medium_default2,
+  "diag-left-small": diag_left_small_default2,
+  "diag-right-large": diag_right_large_default2,
+  "diag-right-medium": diag_right_medium_default2,
+  "diag-right-small": diag_right_small_default2,
+  "cross-hatch-large": cross_hatch_large_default2,
+  "cross-hatch-medium": cross_hatch_medium_default2,
+  "cross-hatch-small": cross_hatch_small_default2,
+  "dots-large": dots_large_default2,
+  "dots-medium": dots_medium_default2,
+  "dots-small": dots_small_default2,
+  "checker-large": checker_large_default2,
+  "checker-medium": checker_medium_default2,
+  "checker-small": checker_small_default2,
+  solid: solid_default2
+};
 function debugGlobals() {
   return globalThis;
 }
@@ -10784,15 +10876,31 @@ function getPatternCellSize() {
   const cell = debugGlobals().__CARTO_PATTERN_CELL_SIZE__;
   return typeof cell === "number" && cell > 0 ? cell : DEFAULT_CELL_SIZE;
 }
+function getPatternAssetSource() {
+  const source = debugGlobals().__CARTO_PATTERN_ASSET_SOURCE__;
+  return source === "svg" || source === "procedural" ? source : "png";
+}
 function getPatternTextureParameters() {
   const params = debugGlobals().__CARTO_PATTERN_TEXTURE_PARAMS__;
   return params && typeof params === "object" ? params : void 0;
 }
+function getPatternRepeats(cell, source = getPatternAssetSource()) {
+  const repeatSize = source === "png" ? SOURCE_TILE_SIZE : VECTOR_RENDER_SIZE;
+  return Math.max(1, Math.floor(cell / repeatSize));
+}
+function getPatternScaleAdjustment(cell = getPatternCellSize()) {
+  return SOURCE_TILE_SIZE * getPatternRepeats(cell) / cell;
+}
+function getPatternCellPadding(cell) {
+  return Math.max(2, Math.round(cell / 16));
+}
 function getPatternAtlasMapping(cell = getPatternCellSize()) {
+  const pad = getPatternCellPadding(cell);
+  const pitch = cell + 2 * pad;
   const mapping = {};
   const frame = (col, row) => ({
-    x: col * cell,
-    y: row * cell,
+    x: pad + col * pitch,
+    y: pad + row * pitch,
     width: cell,
     height: cell,
     mask: true
@@ -10830,39 +10938,148 @@ async function loadImage(dataUrl) {
     img.src = dataUrl;
   });
 }
-var atlasPromises = /* @__PURE__ */ new Map();
-function getPatternAtlas(cell = getPatternCellSize()) {
-  let promise = atlasPromises.get(cell);
-  if (!promise) {
-    promise = build(cell);
-    promise.catch(() => {
-    });
-    atlasPromises.set(cell, promise);
+function loadSvgImage(dataUrl) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = dataUrl;
+  });
+}
+var DENSITY_STEP = { small: 1, medium: 2, large: 4 };
+function paintDesignTile(ctx, key) {
+  const [, name, density] = key.match(/^(.*?)(?:-(small|medium|large))?$/) ?? [];
+  const step = DENSITY_STEP[density ?? ""] ?? 1;
+  const linePeriod = 4 * step;
+  const diagPeriod = 16 * step;
+  const square = 2 * step;
+  ctx.fillStyle = "#000";
+  ctx.strokeStyle = "#000";
+  const diag = (dir) => {
+    ctx.lineWidth = Math.SQRT2;
+    ctx.beginPath();
+    for (let k = -Math.ceil(64 / diagPeriod); k <= 2 * Math.ceil(64 / diagPeriod); k++) {
+      ctx.moveTo(k * diagPeriod - 8 * dir, -8);
+      ctx.lineTo(k * diagPeriod + 72 * dir, 72);
+    }
+    ctx.stroke();
+  };
+  switch (name) {
+    case "solid":
+      ctx.fillRect(0, 0, 64, 64);
+      break;
+    case "hlines":
+      for (let y = 0; y < 64; y += linePeriod) ctx.fillRect(0, y, 64, 2);
+      break;
+    case "vlines":
+      for (let x = 0; x < 64; x += linePeriod) ctx.fillRect(x, 0, 2, 64);
+      break;
+    case "dots":
+      for (let y = 0; y < 64; y += linePeriod)
+        for (let x = 0; x < 64; x += linePeriod) ctx.fillRect(x, y, 2, 2);
+      break;
+    case "checker":
+      for (let j = 0; j * square < 64; j++)
+        for (let i = 0; i * square < 64; i++)
+          if ((i + j) % 2 === 0)
+            ctx.fillRect(i * square, j * square, square, square);
+      break;
+    case "diag-left":
+      diag(1);
+      break;
+    case "diag-right":
+      diag(-1);
+      break;
+    case "cross-hatch":
+      diag(1);
+      diag(-1);
+      break;
   }
-  return promise;
 }
-async function build(cell) {
+function paintTileCanvas(key, size) {
+  const canvas = createCanvas(size, size);
+  const ctx = canvas.getContext("2d");
+  if (!ctx)
+    throw new Error(
+      "carto-api-client: 2D context unavailable for pattern tile"
+    );
+  ctx.scale(size / 64, size / 64);
+  paintDesignTile(ctx, key);
+  return canvas;
+}
+async function composeAtlas(cell, reps, images) {
   const mapping = getPatternAtlasMapping(cell);
-  const canvas = createCanvas(cell * 3, cell * (PATTERN_ROWS.length + 1));
+  const pad = getPatternCellPadding(cell);
+  const pitch = cell + 2 * pad;
+  const step = cell / reps;
+  const canvas = createCanvas(pitch * 3, pitch * (PATTERN_ROWS.length + 1));
   const ctx = canvas.getContext("2d");
   if (!ctx)
     throw new Error(
       "carto-api-client: 2D context unavailable for pattern atlas"
     );
+  for (const [key, frame] of Object.entries(mapping)) {
+    const img = images[key];
+    if (!img) continue;
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(frame.x - pad, frame.y - pad, cell + 2 * pad, cell + 2 * pad);
+    ctx.clip();
+    for (let i = -1; i <= reps; i++) {
+      for (let j = -1; j <= reps; j++) {
+        ctx.drawImage(img, frame.x + i * step, frame.y + j * step, step, step);
+      }
+    }
+    ctx.restore();
+  }
+  if (typeof createImageBitmap !== "undefined")
+    return createImageBitmap(canvas);
+  return canvas;
+}
+async function buildPngAtlas(cell) {
   const images = {};
   await Promise.all(
     Object.entries(CELL_URLS).map(async ([key, url]) => {
       images[key] = await loadImage(url);
     })
   );
-  ctx.imageSmoothingEnabled = false;
-  for (const [key, frame] of Object.entries(mapping)) {
-    const img = images[key];
-    if (img) ctx.drawImage(img, frame.x, frame.y, cell, cell);
+  return composeAtlas(cell, getPatternRepeats(cell, "png"), images);
+}
+async function buildSvgAtlas(cell) {
+  const images = {};
+  await Promise.all(
+    Object.entries(CELL_SVG_URLS).map(async ([key, url]) => {
+      images[key] = await loadSvgImage(url);
+    })
+  );
+  return composeAtlas(cell, getPatternRepeats(cell, "svg"), images);
+}
+async function buildProceduralAtlas(cell) {
+  const reps = getPatternRepeats(cell, "procedural");
+  const step = cell / reps;
+  const images = {};
+  for (const key of Object.keys(CELL_URLS)) {
+    images[key] = paintTileCanvas(key, step);
   }
-  if (typeof createImageBitmap !== "undefined")
-    return createImageBitmap(canvas);
-  return canvas;
+  return composeAtlas(cell, reps, images);
+}
+var ATLAS_BUILDERS = {
+  png: buildPngAtlas,
+  svg: buildSvgAtlas,
+  procedural: buildProceduralAtlas
+};
+var atlasPromises = /* @__PURE__ */ new Map();
+function getPatternAtlas(cell = getPatternCellSize()) {
+  const source = getPatternAssetSource();
+  const memoKey = `${source}:${cell}`;
+  let promise = atlasPromises.get(memoKey);
+  if (!promise) {
+    promise = ATLAS_BUILDERS[source](cell);
+    promise.catch(() => {
+    });
+    atlasPromises.set(memoKey, promise);
+  }
+  return promise;
 }
 
 // src/fetch-map/parse-map.ts
@@ -11299,7 +11516,7 @@ function createChannelProps(id, layerType, config2, visualChannels, data, datase
       if (textureParameters) {
         result.textureParameters = textureParameters;
       }
-      result.getFillPatternScale = visConfig.fillPatternSize ?? 1;
+      result.getFillPatternScale = (visConfig.fillPatternSize ?? 1) * getPatternScaleAdjustment();
       result.fillPattern = visConfig.fillPattern;
       const { fillPatternField, fillPatternScale } = visualChannels;
       const { fillPatternRange, fillPatternDensity } = visConfig;