@fieldnotes/core 0.7.1 → 0.8.1

package/dist/index.d.cts

@@ -393,6 +393,14 @@ declare class InputHandler {
     private cancelToolIfActive;
 }
 
+interface ExportImageOptions {
+    scale?: number;
+    padding?: number;
+    background?: string;
+    filter?: (element: CanvasElement) => boolean;
+}
+declare function exportImage(store: ElementStore, options?: ExportImageOptions, layerManager?: LayerManager): Promise<Blob | null>;
+
 interface ViewportOptions {
     camera?: CameraOptions;
     background?: BackgroundOptions;
@@ -430,6 +438,7 @@ declare class Viewport {
     requestRender(): void;
     exportState(): CanvasState;
     exportJSON(): string;
+    exportImage(options?: ExportImageOptions): Promise<Blob | null>;
     loadState(state: CanvasState): void;
     loadJSON(json: string): void;
     undo(): boolean;
@@ -861,6 +870,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.7.0";
+declare const VERSION = "0.8.1";
 
-export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, CreateLayerCommand, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type GridElement, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, type Layer, LayerManager, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, RemoveElementCommand, RemoveLayerCommand, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type Size, type StrokeElement, type StrokePoint, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, UpdateLayerCommand, VERSION, Viewport, type ViewportOptions, clearStaleBindings, createArrow, createGrid, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, snapPoint, unbindArrow, updateBoundArrow };
+export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, CreateLayerCommand, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type GridElement, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, type Layer, LayerManager, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, RemoveElementCommand, RemoveLayerCommand, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type Size, type StrokeElement, type StrokePoint, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, UpdateLayerCommand, VERSION, Viewport, type ViewportOptions, clearStaleBindings, createArrow, createGrid, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportImage, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, snapPoint, unbindArrow, updateBoundArrow };

package/dist/index.d.ts

@@ -393,6 +393,14 @@ declare class InputHandler {
     private cancelToolIfActive;
 }
 
+interface ExportImageOptions {
+    scale?: number;
+    padding?: number;
+    background?: string;
+    filter?: (element: CanvasElement) => boolean;
+}
+declare function exportImage(store: ElementStore, options?: ExportImageOptions, layerManager?: LayerManager): Promise<Blob | null>;
+
 interface ViewportOptions {
     camera?: CameraOptions;
     background?: BackgroundOptions;
@@ -430,6 +438,7 @@ declare class Viewport {
     requestRender(): void;
     exportState(): CanvasState;
     exportJSON(): string;
+    exportImage(options?: ExportImageOptions): Promise<Blob | null>;
     loadState(state: CanvasState): void;
     loadJSON(json: string): void;
     undo(): boolean;
@@ -861,6 +870,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.7.0";
+declare const VERSION = "0.8.1";
 
-export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, CreateLayerCommand, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type GridElement, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, type Layer, LayerManager, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, RemoveElementCommand, RemoveLayerCommand, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type Size, type StrokeElement, type StrokePoint, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, UpdateLayerCommand, VERSION, Viewport, type ViewportOptions, clearStaleBindings, createArrow, createGrid, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, snapPoint, unbindArrow, updateBoundArrow };
+export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, CreateLayerCommand, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type GridElement, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, type Layer, LayerManager, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, RemoveElementCommand, RemoveLayerCommand, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type Size, type StrokeElement, type StrokePoint, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, UpdateLayerCommand, VERSION, Viewport, type ViewportOptions, clearStaleBindings, createArrow, createGrid, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportImage, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, snapPoint, unbindArrow, updateBoundArrow };

package/dist/index.js

@@ -1746,6 +1746,257 @@ 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.crossOrigin = "anonymous";
+      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) {
@@ -2007,6 +2258,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);
@@ -2048,7 +2302,12 @@ var Viewport = class {
   }
   addHtmlElement(dom, position, size = { w: 200, h: 150 }) {
     const domId = dom.id || void 0;
-    const el = createHtmlElement({ position, size, domId, layerId: this.layerManager.activeLayerId });
+    const el = createHtmlElement({
+      position,
+      size,
+      domId,
+      layerId: this.layerManager.activeLayerId
+    });
     this.htmlContent.set(el.id, dom);
     this.historyRecorder.begin();
     this.store.add(el);
@@ -3585,7 +3844,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.7.0";
+var VERSION = "0.8.1";
 export {
   AddElementCommand,
   ArrowTool,
@@ -3627,6 +3886,7 @@ export {
   createShape,
   createStroke,
   createText,
+  exportImage,
   exportState,
   findBindTarget,
   findBoundArrows,