@fieldnotes/core 0.7.0 → 0.8.0

package/dist/index.cjs

@@ -60,6 +60,7 @@ __export(index_exports, {
   createShape: () => createShape,
   createStroke: () => createStroke,
   createText: () => createText,
+  exportImage: () => exportImage,
   exportState: () => exportState,
   findBindTarget: () => findBindTarget,
   findBoundArrows: () => findBoundArrows,
@@ -1769,7 +1770,7 @@ function createImage(input) {
   };
 }
 function createHtmlElement(input) {
-  return {
+  const el = {
     id: createId("html"),
     type: "html",
     position: input.position,
@@ -1778,6 +1779,8 @@ function createHtmlElement(input) {
     layerId: input.layerId ?? "",
     size: input.size
   };
+  if (input.domId) el.domId = input.domId;
+  return el;
 }
 function createShape(input) {
   return {
@@ -1826,6 +1829,256 @@ function createText(input) {
   };
 }
 
+// src/canvas/export-image.ts
+function getStrokeBounds(el) {
+  if (el.type !== "stroke") return null;
+  if (el.points.length === 0) return null;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const p of el.points) {
+    const px = el.position.x + p.x;
+    const py = el.position.y + p.y;
+    minX = Math.min(minX, px);
+    minY = Math.min(minY, py);
+    maxX = Math.max(maxX, px);
+    maxY = Math.max(maxY, py);
+  }
+  const pad = el.width / 2;
+  return {
+    x: minX - pad,
+    y: minY - pad,
+    w: maxX - minX + el.width,
+    h: maxY - minY + el.width
+  };
+}
+function getElementRect(el) {
+  switch (el.type) {
+    case "stroke":
+      return getStrokeBounds(el);
+    case "arrow": {
+      const b = getArrowBounds(el.from, el.to, el.bend);
+      const pad = el.width / 2 + 14;
+      return { x: b.x - pad, y: b.y - pad, w: b.w + pad * 2, h: b.h + pad * 2 };
+    }
+    case "grid":
+      return null;
+    case "note":
+    case "image":
+    case "html":
+    case "text":
+    case "shape":
+      if ("size" in el) {
+        return { x: el.position.x, y: el.position.y, w: el.size.w, h: el.size.h };
+      }
+      return null;
+    default:
+      return null;
+  }
+}
+function computeBounds(elements, padding) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  let found = false;
+  for (const el of elements) {
+    const rect = getElementRect(el);
+    if (!rect) continue;
+    found = true;
+    minX = Math.min(minX, rect.x);
+    minY = Math.min(minY, rect.y);
+    maxX = Math.max(maxX, rect.x + rect.w);
+    maxY = Math.max(maxY, rect.y + rect.h);
+  }
+  if (!found) return null;
+  return {
+    x: minX - padding,
+    y: minY - padding,
+    w: maxX - minX + padding * 2,
+    h: maxY - minY + padding * 2
+  };
+}
+function renderNoteOnCanvas(ctx, note) {
+  const { x, y } = note.position;
+  const { w, h } = note.size;
+  const r = 4;
+  const pad = 8;
+  ctx.save();
+  ctx.fillStyle = note.backgroundColor;
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.lineTo(x + w - r, y);
+  ctx.arcTo(x + w, y, x + w, y + r, r);
+  ctx.lineTo(x + w, y + h - r);
+  ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
+  ctx.lineTo(x + r, y + h);
+  ctx.arcTo(x, y + h, x, y + h - r, r);
+  ctx.lineTo(x, y + r);
+  ctx.arcTo(x, y, x + r, y, r);
+  ctx.closePath();
+  ctx.fill();
+  if (note.text) {
+    ctx.fillStyle = note.textColor;
+    ctx.font = "14px system-ui, sans-serif";
+    ctx.textBaseline = "top";
+    wrapText(ctx, note.text, x + pad, y + pad, w - pad * 2, 18);
+  }
+  ctx.restore();
+}
+function renderTextOnCanvas(ctx, text) {
+  if (!text.text) return;
+  ctx.save();
+  ctx.fillStyle = text.color;
+  ctx.font = `${text.fontSize}px system-ui, sans-serif`;
+  ctx.textBaseline = "top";
+  ctx.textAlign = text.textAlign;
+  const pad = 2;
+  let textX = text.position.x + pad;
+  if (text.textAlign === "center") {
+    textX = text.position.x + text.size.w / 2;
+  } else if (text.textAlign === "right") {
+    textX = text.position.x + text.size.w - pad;
+  }
+  const lineHeight = text.fontSize * 1.4;
+  const lines = text.text.split("\n");
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (line !== void 0) {
+      ctx.fillText(line, textX, text.position.y + pad + i * lineHeight);
+    }
+  }
+  ctx.restore();
+}
+function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
+  const words = text.split(" ");
+  let line = "";
+  let offsetY = 0;
+  for (const word of words) {
+    const testLine = line ? `${line} ${word}` : word;
+    const metrics = ctx.measureText(testLine);
+    if (metrics.width > maxWidth && line) {
+      ctx.fillText(line, x, y + offsetY);
+      line = word;
+      offsetY += lineHeight;
+    } else {
+      line = testLine;
+    }
+  }
+  if (line) {
+    ctx.fillText(line, x, y + offsetY);
+  }
+}
+function renderGridForBounds(ctx, grid, bounds) {
+  const visibleBounds = {
+    minX: bounds.x,
+    minY: bounds.y,
+    maxX: bounds.x + bounds.w,
+    maxY: bounds.y + bounds.h
+  };
+  if (grid.gridType === "hex") {
+    renderHexGrid(
+      ctx,
+      visibleBounds,
+      grid.cellSize,
+      grid.hexOrientation,
+      grid.strokeColor,
+      grid.strokeWidth,
+      grid.opacity
+    );
+  } else {
+    renderSquareGrid(
+      ctx,
+      visibleBounds,
+      grid.cellSize,
+      grid.strokeColor,
+      grid.strokeWidth,
+      grid.opacity
+    );
+  }
+}
+function loadImages(elements) {
+  const imageElements = elements.filter(
+    (el) => el.type === "image" && "src" in el
+  );
+  const cache = /* @__PURE__ */ new Map();
+  if (imageElements.length === 0) return Promise.resolve(cache);
+  return new Promise((resolve) => {
+    let remaining = imageElements.length;
+    const done = () => {
+      remaining--;
+      if (remaining <= 0) resolve(cache);
+    };
+    for (const el of imageElements) {
+      const img = new Image();
+      img.onload = () => {
+        cache.set(el.id, img);
+        done();
+      };
+      img.onerror = done;
+      img.src = el.src;
+    }
+  });
+}
+async function exportImage(store, options = {}, layerManager) {
+  const scale = options.scale ?? 2;
+  const padding = options.padding ?? 0;
+  const background = options.background ?? "#ffffff";
+  const filter = options.filter;
+  const allElements = store.getAll();
+  let visibleElements = layerManager ? allElements.filter((el) => layerManager.isLayerVisible(el.layerId)) : allElements;
+  if (filter) {
+    visibleElements = visibleElements.filter(filter);
+  }
+  const bounds = computeBounds(visibleElements, padding);
+  if (!bounds) return null;
+  const imageCache = await loadImages(visibleElements);
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.ceil(bounds.w * scale);
+  canvas.height = Math.ceil(bounds.h * scale);
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  ctx.scale(scale, scale);
+  ctx.translate(-bounds.x, -bounds.y);
+  ctx.fillStyle = background;
+  ctx.fillRect(bounds.x, bounds.y, bounds.w, bounds.h);
+  const renderer = new ElementRenderer();
+  renderer.setStore(store);
+  const grids = [];
+  for (const el of visibleElements) {
+    if (el.type === "grid") {
+      grids.push(el);
+      continue;
+    }
+    if (el.type === "note") {
+      renderNoteOnCanvas(ctx, el);
+      continue;
+    }
+    if (el.type === "text") {
+      renderTextOnCanvas(ctx, el);
+      continue;
+    }
+    if (el.type === "html") {
+      continue;
+    }
+    if (el.type === "image") {
+      const img = imageCache.get(el.id);
+      if (img) {
+        ctx.drawImage(img, el.position.x, el.position.y, el.size.w, el.size.h);
+      }
+      continue;
+    }
+    renderer.renderCanvasElement(ctx, el);
+  }
+  for (const grid of grids) {
+    renderGridForBounds(ctx, grid, bounds);
+  }
+  return new Promise((resolve) => {
+    canvas.toBlob((blob) => resolve(blob), "image/png");
+  });
+}
+
 // src/layers/layer-manager.ts
 var LayerManager = class {
   constructor(store) {
@@ -2087,6 +2340,9 @@ var Viewport = class {
   exportJSON() {
     return JSON.stringify(this.exportState());
   }
+  async exportImage(options) {
+    return exportImage(this.store, options, this.layerManager);
+  }
   loadState(state) {
     this.historyRecorder.pause();
     this.noteEditor.destroy(this.store);
@@ -2095,6 +2351,7 @@ var Viewport = class {
     if (state.layers && state.layers.length > 0) {
       this.layerManager.loadSnapshot(state.layers);
     }
+    this.reattachHtmlContent();
     this.history.clear();
     this.historyRecorder.resume();
     this.camera.moveTo(state.camera.position.x, state.camera.position.y);
@@ -2126,7 +2383,13 @@ var Viewport = class {
     return image.id;
   }
   addHtmlElement(dom, position, size = { w: 200, h: 150 }) {
-    const el = createHtmlElement({ position, size, layerId: this.layerManager.activeLayerId });
+    const domId = dom.id || void 0;
+    const el = createHtmlElement({
+      position,
+      size,
+      domId,
+      layerId: this.layerManager.activeLayerId
+    });
     this.htmlContent.set(el.id, dom);
     this.historyRecorder.begin();
     this.store.add(el);
@@ -2495,6 +2758,16 @@ var Viewport = class {
     this.htmlContent.clear();
     this.requestRender();
   }
+  reattachHtmlContent() {
+    for (const el of this.store.getElementsByType("html")) {
+      if (el.domId) {
+        const dom = document.getElementById(el.domId);
+        if (dom) {
+          this.htmlContent.set(el.id, dom);
+        }
+      }
+    }
+  }
   createWrapper() {
     const el = document.createElement("div");
     Object.assign(el.style, {
@@ -2753,10 +3026,11 @@ function applyArrowHandleDrag(handle, elementId, world, ctx) {
   const el = ctx.store.getById(elementId);
   if (!el || el.type !== "arrow") return;
   const threshold = BIND_THRESHOLD / ctx.camera.zoom;
+  const layerFilter = (candidate) => candidate.layerId === el.layerId;
   switch (handle) {
     case "start": {
       const excludeId = el.toBinding?.elementId;
-      const target = findBindTarget(world, ctx.store, threshold, excludeId);
+      const target = findBindTarget(world, ctx.store, threshold, excludeId, layerFilter);
       if (target) {
         const center = getElementCenter(target);
         ctx.store.update(elementId, {
@@ -2775,7 +3049,7 @@ function applyArrowHandleDrag(handle, elementId, world, ctx) {
     }
     case "end": {
       const excludeId = el.fromBinding?.elementId;
-      const target = findBindTarget(world, ctx.store, threshold, excludeId);
+      const target = findBindTarget(world, ctx.store, threshold, excludeId, layerFilter);
       if (target) {
         const center = getElementCenter(target);
         ctx.store.update(elementId, {
@@ -2804,7 +3078,8 @@ function getArrowHandleDragTarget(handle, elementId, world, ctx) {
   if (!el || el.type !== "arrow") return null;
   const threshold = BIND_THRESHOLD / ctx.camera.zoom;
   const excludeId = handle === "start" ? el.toBinding?.elementId : el.fromBinding?.elementId;
-  const target = findBindTarget(world, ctx.store, threshold, excludeId);
+  const layerFilter = (candidate) => candidate.layerId === el.layerId;
+  const target = findBindTarget(world, ctx.store, threshold, excludeId, layerFilter);
   if (!target) return null;
   return getElementBounds(target);
 }
@@ -3264,8 +3539,10 @@ var ArrowTool = class {
     if (options.width !== void 0) this.width = options.width;
   }
   layerFilter(ctx) {
-    if (!ctx.isLayerVisible && !ctx.isLayerLocked) return void 0;
+    const activeLayerId = ctx.activeLayerId;
+    if (!activeLayerId && !ctx.isLayerVisible && !ctx.isLayerLocked) return void 0;
     return (el) => {
+      if (activeLayerId && el.layerId !== activeLayerId) return false;
       if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) return false;
       if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) return false;
       return true;
@@ -3649,7 +3926,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.6.1";
+var VERSION = "0.8.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,
@@ -3692,6 +3969,7 @@ var VERSION = "0.6.1";
   createShape,
   createStroke,
   createText,
+  exportImage,
   exportState,
   findBindTarget,
   findBoundArrows,