@fieldnotes/core 0.7.0 → 0.8.0

package/dist/index.d.cts

@@ -67,6 +67,7 @@ interface ImageElement extends BaseElement {
 interface HtmlElement extends BaseElement {
     type: 'html';
     size: Size;
+    domId?: string;
 }
 interface TextElement extends BaseElement {
     type: 'text';
@@ -392,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;
@@ -429,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;
@@ -477,6 +487,7 @@ declare class Viewport {
     private hideDomNode;
     private removeDomNode;
     private clearDomNodes;
+    private reattachHtmlContent;
     private createWrapper;
     private createCanvas;
     private createDomLayer;
@@ -564,6 +575,7 @@ interface ImageInput extends BaseDefaults {
 interface HtmlInput extends BaseDefaults {
     position: Point;
     size: Size;
+    domId?: string;
 }
 interface TextInput extends BaseDefaults {
     position: Point;
@@ -858,6 +870,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.6.1";
+declare const VERSION = "0.8.0";
 
-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

@@ -67,6 +67,7 @@ interface ImageElement extends BaseElement {
 interface HtmlElement extends BaseElement {
     type: 'html';
     size: Size;
+    domId?: string;
 }
 interface TextElement extends BaseElement {
     type: 'text';
@@ -392,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;
@@ -429,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;
@@ -477,6 +487,7 @@ declare class Viewport {
     private hideDomNode;
     private removeDomNode;
     private clearDomNodes;
+    private reattachHtmlContent;
     private createWrapper;
     private createCanvas;
     private createDomLayer;
@@ -564,6 +575,7 @@ interface ImageInput extends BaseDefaults {
 interface HtmlInput extends BaseDefaults {
     position: Point;
     size: Size;
+    domId?: string;
 }
 interface TextInput extends BaseDefaults {
     position: Point;
@@ -858,6 +870,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.6.1";
+declare const VERSION = "0.8.0";
 
-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

@@ -1687,7 +1687,7 @@ function createImage(input) {
   };
 }
 function createHtmlElement(input) {
-  return {
+  const el = {
     id: createId("html"),
     type: "html",
     position: input.position,
@@ -1696,6 +1696,8 @@ function createHtmlElement(input) {
     layerId: input.layerId ?? "",
     size: input.size
   };
+  if (input.domId) el.domId = input.domId;
+  return el;
 }
 function createShape(input) {
   return {
@@ -1744,6 +1746,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) {
@@ -2005,6 +2257,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);
@@ -2013,6 +2268,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);
@@ -2044,7 +2300,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);
@@ -2413,6 +2675,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, {
@@ -2671,10 +2943,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, {
@@ -2693,7 +2966,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, {
@@ -2722,7 +2995,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);
 }
@@ -3182,8 +3456,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;
@@ -3567,7 +3843,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.6.1";
+var VERSION = "0.8.0";
 export {
   AddElementCommand,
   ArrowTool,
@@ -3609,6 +3885,7 @@ export {
   createShape,
   createStroke,
   createText,
+  exportImage,
   exportState,
   findBindTarget,
   findBoundArrows,