@fieldnotes/core 0.50.8 → 0.52.0

package/dist/index.cjs

@@ -5442,7 +5442,71 @@ function renderTextOnCanvas(ctx, text) {
   ctx.restore();
 }
 
+// src/canvas/html-export.ts
+var DEFAULT_HTML_TIMEOUT_MS = 1e4;
+var TIMEOUT = /* @__PURE__ */ Symbol("html-export-timeout");
+function validateHtmlExportOptions(options) {
+  const timeoutMs = options.htmlTimeoutMs ?? DEFAULT_HTML_TIMEOUT_MS;
+  if (!Number.isFinite(timeoutMs) || timeoutMs <= 0) {
+    throw new RangeError("htmlTimeoutMs must be a finite number greater than 0");
+  }
+  return timeoutMs;
+}
+async function renderHtmlElements(elements, options) {
+  const timeoutMs = validateHtmlExportOptions(options);
+  const sources = /* @__PURE__ */ new Map();
+  await Promise.all(
+    elements.map(async (element) => {
+      if (!options.renderHtml) {
+        options.onHtmlError?.({
+          elementId: element.id,
+          htmlType: element.htmlType,
+          reason: "unsupported"
+        });
+        return;
+      }
+      let timer;
+      try {
+        const timeout = new Promise((resolve) => {
+          timer = setTimeout(() => resolve(TIMEOUT), timeoutMs);
+        });
+        const result = await Promise.race([Promise.resolve(options.renderHtml(element)), timeout]);
+        if (result === TIMEOUT) {
+          options.onHtmlError?.({
+            elementId: element.id,
+            htmlType: element.htmlType,
+            reason: "timeout"
+          });
+          return;
+        }
+        if (!result) {
+          options.onHtmlError?.({
+            elementId: element.id,
+            htmlType: element.htmlType,
+            reason: "render"
+          });
+          return;
+        }
+        sources.set(element.id, result);
+      } catch (cause) {
+        options.onHtmlError?.({
+          elementId: element.id,
+          htmlType: element.htmlType,
+          reason: "render",
+          cause
+        });
+      } finally {
+        if (timer !== void 0) clearTimeout(timer);
+      }
+    })
+  );
+  return sources;
+}
+
 // src/canvas/export-image.ts
+var DEFAULT_IMAGE_TIMEOUT_MS = 1e4;
+var DEFAULT_MAX_DIMENSION = 16384;
+var DEFAULT_MAX_PIXELS = 67108864;
 var center = (b) => ({ x: b.x + b.w / 2, y: b.y + b.h / 2 });
 function getStrokeBounds(el) {
   if (el.type !== "stroke") return null;
@@ -5552,12 +5616,53 @@ function renderGridForBounds(ctx, grid, bounds) {
     );
   }
 }
-function loadImages(elements) {
+function positiveOption(value, fallback, name) {
+  const resolved = value ?? fallback;
+  if (!Number.isFinite(resolved) || resolved <= 0) {
+    throw new RangeError(`${name} must be a finite number greater than 0`);
+  }
+  return resolved;
+}
+function nonNegativeOption(value, fallback, name) {
+  const resolved = value ?? fallback;
+  if (!Number.isFinite(resolved) || resolved < 0) {
+    throw new RangeError(`${name} must be a finite number greater than or equal to 0`);
+  }
+  return resolved;
+}
+function assertExportSize(width, height, options) {
+  const maxDimension = positiveOption(options.maxDimension, DEFAULT_MAX_DIMENSION, "maxDimension");
+  const maxPixels = positiveOption(options.maxPixels, DEFAULT_MAX_PIXELS, "maxPixels");
+  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+    throw new RangeError("Export dimensions must be finite numbers greater than 0");
+  }
+  if (width > maxDimension || height > maxDimension) {
+    throw new RangeError(
+      `Export dimensions ${width}x${height} exceed the maximum dimension of ${maxDimension}`
+    );
+  }
+  if (width * height > maxPixels) {
+    throw new RangeError(
+      `Export size ${width}x${height} exceeds the maximum of ${maxPixels} pixels`
+    );
+  }
+}
+function validateExportResourceOptions(options) {
+  positiveOption(options.imageTimeoutMs, DEFAULT_IMAGE_TIMEOUT_MS, "imageTimeoutMs");
+  positiveOption(options.maxDimension, DEFAULT_MAX_DIMENSION, "maxDimension");
+  positiveOption(options.maxPixels, DEFAULT_MAX_PIXELS, "maxPixels");
+}
+function loadImages(elements, options = {}) {
   const imageElements = elements.filter(
     (el) => el.type === "image" && "src" in el
   );
   const cache3 = /* @__PURE__ */ new Map();
   if (imageElements.length === 0) return Promise.resolve(cache3);
+  const timeoutMs = positiveOption(
+    options.imageTimeoutMs,
+    DEFAULT_IMAGE_TIMEOUT_MS,
+    "imageTimeoutMs"
+  );
   return new Promise((resolve) => {
     let remaining = imageElements.length;
     const done = () => {
@@ -5567,19 +5672,42 @@ function loadImages(elements) {
     for (const el of imageElements) {
       const img = new Image();
       img.crossOrigin = "anonymous";
+      let settled = false;
+      const timer = setTimeout(() => {
+        if (settled) return;
+        settled = true;
+        img.onload = null;
+        img.onerror = null;
+        options.onAssetError?.({ elementId: el.id, src: el.src, reason: "timeout" });
+        done();
+      }, timeoutMs);
+      const settle = () => {
+        if (settled) return false;
+        settled = true;
+        clearTimeout(timer);
+        img.onload = null;
+        img.onerror = null;
+        return true;
+      };
       img.onload = () => {
+        if (!settle()) return;
         cache3.set(el.id, img);
         done();
       };
-      img.onerror = done;
-      const sep = el.src.includes("?") ? "&" : "?";
-      img.src = `${el.src}${sep}_cors=1`;
+      img.onerror = (cause) => {
+        if (!settle()) return;
+        options.onAssetError?.({ elementId: el.id, src: el.src, reason: "load", cause });
+        done();
+      };
+      img.src = el.src;
     }
   });
 }
 async function exportImage(store, options = {}, layerManager) {
-  const scale = options.scale ?? 2;
-  const padding = options.padding ?? 0;
+  const scale = positiveOption(options.scale, 2, "scale");
+  const padding = nonNegativeOption(options.padding, 0, "padding");
+  validateExportResourceOptions(options);
+  validateHtmlExportOptions(options);
   const background = options.background ?? "#ffffff";
   const filter = options.filter;
   const allElements = store.getAll();
@@ -5589,10 +5717,15 @@ async function exportImage(store, options = {}, layerManager) {
   }
   const bounds = computeBounds(visibleElements, padding);
   if (!bounds) return null;
-  const imageCache = await loadImages(visibleElements);
+  const width = Math.ceil(bounds.w * scale);
+  const height = Math.ceil(bounds.h * scale);
+  assertExportSize(width, height, options);
+  const imageCache = await loadImages(visibleElements, options);
+  const htmlElements = visibleElements.filter((el) => el.type === "html");
+  const htmlSources = await renderHtmlElements(htmlElements, options);
   const canvas = document.createElement("canvas");
-  canvas.width = Math.ceil(bounds.w * scale);
-  canvas.height = Math.ceil(bounds.h * scale);
+  canvas.width = width;
+  canvas.height = height;
   const ctx = canvas.getContext("2d");
   if (!ctx) return null;
   ctx.scale(scale, scale);
@@ -5614,6 +5747,24 @@ async function exportImage(store, options = {}, layerManager) {
       return;
     }
     if (el.type === "html") {
+      const source = htmlSources.get(el.id);
+      if (!source) return;
+      const b = getElementBounds(el);
+      try {
+        withRotation(
+          target,
+          el,
+          b ? center(b) : el.position,
+          () => target.drawImage(source, el.position.x, el.position.y, el.size.w, el.size.h)
+        );
+      } catch (cause) {
+        options.onHtmlError?.({
+          elementId: el.id,
+          htmlType: el.htmlType,
+          reason: "render",
+          cause
+        });
+      }
       return;
     }
     if (el.type === "image") {
@@ -5769,20 +5920,23 @@ function emitArrow(arrow, store) {
   return out;
 }
 function emitImage(image, dataUri) {
-  const href = dataUri ?? image.src;
+  const href = dataUri ?? ("src" in image ? image.src : "");
   if (!href) return "";
   const { x, y } = image.position;
   const { w, h } = image.size;
   return `<image href="${esc(href)}" x="${n(x)}" y="${n(y)}" width="${n(w)}" height="${n(h)}" />`;
 }
-function emitText(text, rasterScale) {
+function emitText(text, rasterScale, resourceOptions) {
   if (!text.text) return "";
   const { x, y } = text.position;
   const { w, h } = text.size;
   if (typeof document === "undefined") return "";
+  const width = Math.max(1, Math.ceil(w * rasterScale));
+  const height = Math.max(1, Math.ceil(h * rasterScale));
+  assertExportSize(width, height, resourceOptions);
   const canvas = document.createElement("canvas");
-  canvas.width = Math.max(1, Math.ceil(w * rasterScale));
-  canvas.height = Math.max(1, Math.ceil(h * rasterScale));
+  canvas.width = width;
+  canvas.height = height;
   const ctx = canvas.getContext("2d");
   if (!ctx) return "";
   ctx.scale(rasterScale, rasterScale);
@@ -5797,13 +5951,16 @@ function emitText(text, rasterScale) {
   if (!dataUri || !dataUri.startsWith("data:")) return "";
   return `<image href="${esc(dataUri)}" x="${n(x)}" y="${n(y)}" width="${n(w)}" height="${n(h)}" />`;
 }
-function emitNote(note, rasterScale) {
+function emitNote(note, rasterScale, resourceOptions) {
   const { x, y } = note.position;
   const { w, h } = note.size;
   if (typeof document === "undefined") return emitNotePlaceholder(note);
+  const width = Math.max(1, Math.ceil(w * rasterScale));
+  const height = Math.max(1, Math.ceil(h * rasterScale));
+  assertExportSize(width, height, resourceOptions);
   const canvas = document.createElement("canvas");
-  canvas.width = Math.max(1, Math.ceil(w * rasterScale));
-  canvas.height = Math.max(1, Math.ceil(h * rasterScale));
+  canvas.width = width;
+  canvas.height = height;
   const ctx = canvas.getContext("2d");
   if (!ctx) return emitNotePlaceholder(note);
   ctx.scale(rasterScale, rasterScale);
@@ -5964,8 +6121,10 @@ function emitHexTemplate(t, grid) {
   return `<path d="${d}" fill="${esc(t.fillColor)}" stroke="${esc(t.strokeColor)}" stroke-width="${n(t.strokeWidth)}" opacity="${n(t.opacity)}" />`;
 }
 async function exportSvg(store, options = {}, layerManager) {
-  const padding = options.padding ?? 0;
-  const rasterScale = options.rasterScale ?? 2;
+  const padding = nonNegativeOption(options.padding, 0, "padding");
+  const rasterScale = positiveOption(options.rasterScale, 2, "rasterScale");
+  validateExportResourceOptions(options);
+  validateHtmlExportOptions(options);
   const filter = options.filter;
   const allElements = store.getAll();
   let visibleElements = layerManager ? allElements.filter((el) => layerManager.isLayerVisible(el.layerId)) : allElements;
@@ -5974,11 +6133,15 @@ async function exportSvg(store, options = {}, layerManager) {
   if (!bounds) {
     return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
   }
+  assertExportSize(Math.ceil(bounds.w), Math.ceil(bounds.h), options);
   const remoteImages = visibleElements.filter(
     (el) => el.type === "image" && !el.src.startsWith("data:")
   );
-  const imageCache = await loadImages(remoteImages);
-  const imageDataUris = encodeImages(visibleElements, imageCache, rasterScale);
+  const imageCache = await loadImages(remoteImages, options);
+  const imageDataUris = encodeImages(visibleElements, imageCache, rasterScale, options);
+  const htmlElements = visibleElements.filter((el) => el.type === "html");
+  const htmlSources = await renderHtmlElements(htmlElements, options);
+  const htmlDataUris = encodeHtmlElements(htmlElements, htmlSources, rasterScale, options);
   const grids = visibleElements.filter((el) => el.type === "grid");
   const firstGrid = grids[0];
   let body = "";
@@ -5987,7 +6150,15 @@ async function exportSvg(store, options = {}, layerManager) {
   }
   const layerBodies = /* @__PURE__ */ new Map();
   for (const el of visibleElements) {
-    const emitted = emitElement(el, imageDataUris, rasterScale, firstGrid, store);
+    const emitted = emitElement(
+      el,
+      imageDataUris,
+      htmlDataUris,
+      rasterScale,
+      firstGrid,
+      store,
+      options
+    );
     layerBodies.set(el.layerId, (layerBodies.get(el.layerId) ?? "") + emitted);
   }
   for (const [layerId, emitted] of layerBodies) {
@@ -6001,7 +6172,7 @@ async function exportSvg(store, options = {}, layerManager) {
   }
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${n(bounds.w)}" height="${n(bounds.h)}" viewBox="${n(bounds.x)} ${n(bounds.y)} ${n(bounds.w)} ${n(bounds.h)}">${body}</svg>`;
 }
-function emitElement(el, imageDataUris, rasterScale, firstGrid, store) {
+function emitElement(el, imageDataUris, htmlDataUris, rasterScale, firstGrid, store, resourceOptions) {
   switch (el.type) {
     case "stroke":
       return withRotationSvg(el, emitStroke(el));
@@ -6012,20 +6183,71 @@ function emitElement(el, imageDataUris, rasterScale, firstGrid, store) {
     case "image":
       return withRotationSvg(el, emitImage(el, imageDataUris.get(el.id)));
     case "text":
-      return withRotationSvg(el, emitText(el, rasterScale));
+      return withRotationSvg(el, emitText(el, rasterScale, resourceOptions));
     case "note":
-      return withRotationSvg(el, emitNote(el, rasterScale));
+      return withRotationSvg(el, emitNote(el, rasterScale, resourceOptions));
     case "template":
       return emitTemplate(el, firstGrid);
     case "grid":
       return "";
     case "html":
-      return "";
+      return withRotationSvg(el, emitImage(el, htmlDataUris.get(el.id)));
     default:
       return "";
   }
 }
-function encodeImages(elements, imageCache, rasterScale) {
+function encodeHtmlElements(elements, sources, rasterScale, options) {
+  const encoded = /* @__PURE__ */ new Map();
+  for (const element of elements) {
+    const source = sources.get(element.id);
+    if (!source) continue;
+    const width = Math.max(1, Math.ceil(element.size.w * rasterScale));
+    const height = Math.max(1, Math.ceil(element.size.h * rasterScale));
+    assertExportSize(width, height, options);
+    if (typeof document === "undefined") {
+      options.onHtmlError?.({
+        elementId: element.id,
+        htmlType: element.htmlType,
+        reason: "encode"
+      });
+      continue;
+    }
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      options.onHtmlError?.({
+        elementId: element.id,
+        htmlType: element.htmlType,
+        reason: "encode"
+      });
+      continue;
+    }
+    try {
+      ctx.drawImage(source, 0, 0, width, height);
+      const dataUri = canvas.toDataURL();
+      if (dataUri.startsWith("data:")) {
+        encoded.set(element.id, dataUri);
+      } else {
+        options.onHtmlError?.({
+          elementId: element.id,
+          htmlType: element.htmlType,
+          reason: "encode"
+        });
+      }
+    } catch (cause) {
+      options.onHtmlError?.({
+        elementId: element.id,
+        htmlType: element.htmlType,
+        reason: "encode",
+        cause
+      });
+    }
+  }
+  return encoded;
+}
+function encodeImages(elements, imageCache, rasterScale, resourceOptions) {
   const out = /* @__PURE__ */ new Map();
   for (const el of elements) {
     if (el.type !== "image") continue;
@@ -6035,16 +6257,24 @@ function encodeImages(elements, imageCache, rasterScale) {
     }
     const img = imageCache.get(el.id);
     if (!img || typeof document === "undefined") continue;
+    const width = Math.max(1, Math.ceil(el.size.w * rasterScale));
+    const height = Math.max(1, Math.ceil(el.size.h * rasterScale));
+    assertExportSize(width, height, resourceOptions);
     const canvas = document.createElement("canvas");
-    canvas.width = Math.max(1, Math.ceil(el.size.w * rasterScale));
-    canvas.height = Math.max(1, Math.ceil(el.size.h * rasterScale));
+    canvas.width = width;
+    canvas.height = height;
     const ctx = canvas.getContext("2d");
-    if (!ctx) continue;
+    if (!ctx) {
+      resourceOptions.onAssetError?.({ elementId: el.id, src: el.src, reason: "encode" });
+      continue;
+    }
     try {
       ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
       const uri = canvas.toDataURL();
       if (uri.startsWith("data:")) out.set(el.id, uri);
-    } catch {
+      else resourceOptions.onAssetError?.({ elementId: el.id, src: el.src, reason: "encode" });
+    } catch (cause) {
+      resourceOptions.onAssetError?.({ elementId: el.id, src: el.src, reason: "encode", cause });
     }
   }
   return out;
@@ -6593,7 +6823,7 @@ var RenderLoop = class {
   layerGroups = /* @__PURE__ */ new Map();
   gridCacheCanvas = null;
   gridCacheCtx = null;
-  lastGridRef = null;
+  lastGridRefs = [];
   constructor(deps) {
     this.canvasEl = deps.canvasEl;
     this.camera = deps.camera;
@@ -6793,8 +7023,8 @@ var RenderLoop = class {
     }
     if (gridElements.length > 0) {
       const gridT0 = performance.now();
-      const gridRef = gridElements[0];
-      const gridDirty = this.gridCacheDirty || gridRef !== this.lastGridRef;
+      const gridsChanged = gridElements.length !== this.lastGridRefs.length || gridElements.some((grid, index) => grid !== this.lastGridRefs[index]);
+      const gridDirty = this.gridCacheDirty || gridsChanged;
       if (gridDirty) {
         this.ensureGridCache();
         if (this.gridCacheCtx && this.gridCacheCanvas) {
@@ -6822,7 +7052,7 @@ var RenderLoop = class {
           }
         }
         this.gridCacheDirty = false;
-        this.lastGridRef = gridRef;
+        this.lastGridRefs = [...gridElements];
       }
       if (this.gridCacheCanvas) {
         const offset = this.marginViewport.compositeOffset(
@@ -6842,6 +7072,8 @@ var RenderLoop = class {
         }
       }
       gridMs = performance.now() - gridT0;
+    } else {
+      this.lastGridRefs = [];
     }
     const overlayT0 = performance.now();
     const activeTool = this.toolManager.activeTool;
@@ -10815,7 +11047,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.50.8";
+var VERSION = "0.52.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,