@fieldnotes/core 0.6.1 → 0.7.1

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';
@@ -85,7 +86,17 @@ interface ShapeElement extends BaseElement {
     strokeWidth: number;
     fillColor: string;
 }
-type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement | ShapeElement;
+type HexOrientation = 'pointy' | 'flat';
+interface GridElement extends BaseElement {
+    type: 'grid';
+    gridType: 'square' | 'hex';
+    hexOrientation: HexOrientation;
+    cellSize: number;
+    strokeColor: string;
+    strokeWidth: number;
+    opacity: number;
+}
+type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement | ShapeElement | GridElement;
 type ElementType = CanvasElement['type'];
 
 interface Layer {
@@ -437,6 +448,16 @@ declare class Viewport {
         w: number;
         h: number;
     }): string;
+    addGrid(input: {
+        gridType?: 'square' | 'hex';
+        hexOrientation?: 'pointy' | 'flat';
+        cellSize?: number;
+        strokeColor?: string;
+        strokeWidth?: number;
+        opacity?: number;
+    }): string;
+    updateGrid(updates: Partial<Pick<GridElement, 'gridType' | 'hexOrientation' | 'cellSize' | 'strokeColor' | 'strokeWidth' | 'opacity'>>): void;
+    removeGrid(): void;
     destroy(): void;
     private startRenderLoop;
     private render;
@@ -457,6 +478,7 @@ declare class Viewport {
     private hideDomNode;
     private removeDomNode;
     private clearDomNodes;
+    private reattachHtmlContent;
     private createWrapper;
     private createCanvas;
     private createDomLayer;
@@ -469,8 +491,12 @@ declare class ElementRenderer {
     private store;
     private imageCache;
     private onImageLoad;
+    private camera;
+    private canvasSize;
     setStore(store: ElementStore): void;
     setOnImageLoad(callback: () => void): void;
+    setCamera(camera: Camera): void;
+    setCanvasSize(w: number, h: number): void;
     isDomElement(element: CanvasElement): boolean;
     renderCanvasElement(ctx: CanvasRenderingContext2D, element: CanvasElement): void;
     private renderStroke;
@@ -480,6 +506,7 @@ declare class ElementRenderer {
     private renderShape;
     private fillShapePath;
     private strokeShapePath;
+    private renderGrid;
     private renderImage;
     private getImage;
 }
@@ -539,6 +566,7 @@ interface ImageInput extends BaseDefaults {
 interface HtmlInput extends BaseDefaults {
     position: Point;
     size: Size;
+    domId?: string;
 }
 interface TextInput extends BaseDefaults {
     position: Point;
@@ -562,6 +590,15 @@ interface ShapeInput extends BaseDefaults {
     fillColor?: string;
 }
 declare function createShape(input: ShapeInput): ShapeElement;
+interface GridInput extends BaseDefaults {
+    gridType?: 'square' | 'hex';
+    hexOrientation?: HexOrientation;
+    cellSize?: number;
+    strokeColor?: string;
+    strokeWidth?: number;
+    opacity?: number;
+}
+declare function createGrid(input: GridInput): GridElement;
 declare function createText(input: TextInput): TextElement;
 
 interface Rect {
@@ -824,6 +861,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.6.1";
+declare const VERSION = "0.7.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, HandTool, 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, 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 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 };

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';
@@ -85,7 +86,17 @@ interface ShapeElement extends BaseElement {
     strokeWidth: number;
     fillColor: string;
 }
-type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement | ShapeElement;
+type HexOrientation = 'pointy' | 'flat';
+interface GridElement extends BaseElement {
+    type: 'grid';
+    gridType: 'square' | 'hex';
+    hexOrientation: HexOrientation;
+    cellSize: number;
+    strokeColor: string;
+    strokeWidth: number;
+    opacity: number;
+}
+type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement | ShapeElement | GridElement;
 type ElementType = CanvasElement['type'];
 
 interface Layer {
@@ -437,6 +448,16 @@ declare class Viewport {
         w: number;
         h: number;
     }): string;
+    addGrid(input: {
+        gridType?: 'square' | 'hex';
+        hexOrientation?: 'pointy' | 'flat';
+        cellSize?: number;
+        strokeColor?: string;
+        strokeWidth?: number;
+        opacity?: number;
+    }): string;
+    updateGrid(updates: Partial<Pick<GridElement, 'gridType' | 'hexOrientation' | 'cellSize' | 'strokeColor' | 'strokeWidth' | 'opacity'>>): void;
+    removeGrid(): void;
     destroy(): void;
     private startRenderLoop;
     private render;
@@ -457,6 +478,7 @@ declare class Viewport {
     private hideDomNode;
     private removeDomNode;
     private clearDomNodes;
+    private reattachHtmlContent;
     private createWrapper;
     private createCanvas;
     private createDomLayer;
@@ -469,8 +491,12 @@ declare class ElementRenderer {
     private store;
     private imageCache;
     private onImageLoad;
+    private camera;
+    private canvasSize;
     setStore(store: ElementStore): void;
     setOnImageLoad(callback: () => void): void;
+    setCamera(camera: Camera): void;
+    setCanvasSize(w: number, h: number): void;
     isDomElement(element: CanvasElement): boolean;
     renderCanvasElement(ctx: CanvasRenderingContext2D, element: CanvasElement): void;
     private renderStroke;
@@ -480,6 +506,7 @@ declare class ElementRenderer {
     private renderShape;
     private fillShapePath;
     private strokeShapePath;
+    private renderGrid;
     private renderImage;
     private getImage;
 }
@@ -539,6 +566,7 @@ interface ImageInput extends BaseDefaults {
 interface HtmlInput extends BaseDefaults {
     position: Point;
     size: Size;
+    domId?: string;
 }
 interface TextInput extends BaseDefaults {
     position: Point;
@@ -562,6 +590,15 @@ interface ShapeInput extends BaseDefaults {
     fillColor?: string;
 }
 declare function createShape(input: ShapeInput): ShapeElement;
+interface GridInput extends BaseDefaults {
+    gridType?: 'square' | 'hex';
+    hexOrientation?: HexOrientation;
+    cellSize?: number;
+    strokeColor?: string;
+    strokeWidth?: number;
+    opacity?: number;
+}
+declare function createGrid(input: GridInput): GridElement;
 declare function createText(input: TextInput): TextElement;
 
 interface Rect {
@@ -824,6 +861,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.6.1";
+declare const VERSION = "0.7.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, HandTool, 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, 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 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 };

package/dist/index.js

@@ -84,7 +84,7 @@ function validateState(data) {
     ];
   }
 }
-var VALID_TYPES = /* @__PURE__ */ new Set(["stroke", "note", "arrow", "image", "html", "text", "shape"]);
+var VALID_TYPES = /* @__PURE__ */ new Set(["stroke", "note", "arrow", "image", "html", "text", "shape", "grid"]);
 function validateElement(el) {
   if (!el || typeof el !== "object") {
     throw new Error("Invalid element: expected an object");
@@ -945,6 +945,118 @@ function smoothToSegments(points) {
   return segments;
 }
 
+// src/elements/grid-renderer.ts
+function getSquareGridLines(bounds, cellSize) {
+  if (cellSize <= 0) return { verticals: [], horizontals: [] };
+  const verticals = [];
+  const startX = Math.floor(bounds.minX / cellSize) * cellSize;
+  const endX = Math.ceil(bounds.maxX / cellSize) * cellSize;
+  for (let x = startX; x <= endX; x += cellSize) {
+    verticals.push(x);
+  }
+  const horizontals = [];
+  const startY = Math.floor(bounds.minY / cellSize) * cellSize;
+  const endY = Math.ceil(bounds.maxY / cellSize) * cellSize;
+  for (let y = startY; y <= endY; y += cellSize) {
+    horizontals.push(y);
+  }
+  return { verticals, horizontals };
+}
+function getHexVertices(cx, cy, circumradius, orientation) {
+  const vertices = [];
+  const angleOffset = orientation === "pointy" ? -Math.PI / 2 : 0;
+  for (let i = 0; i < 6; i++) {
+    const angle = Math.PI / 3 * i + angleOffset;
+    vertices.push({
+      x: cx + circumradius * Math.cos(angle),
+      y: cy + circumradius * Math.sin(angle)
+    });
+  }
+  return vertices;
+}
+function getHexCenters(bounds, circumradius, orientation) {
+  if (circumradius <= 0) return [];
+  const centers = [];
+  if (orientation === "pointy") {
+    const hexW = Math.sqrt(3) * circumradius;
+    const hexH = 2 * circumradius;
+    const rowH = hexH * 0.75;
+    const startRow = Math.floor((bounds.minY - circumradius) / rowH);
+    const endRow = Math.ceil((bounds.maxY + circumradius) / rowH);
+    const startCol = Math.floor((bounds.minX - hexW) / hexW);
+    const endCol = Math.ceil((bounds.maxX + hexW) / hexW);
+    for (let row = startRow; row <= endRow; row++) {
+      const offsetX = row % 2 !== 0 ? hexW / 2 : 0;
+      for (let col = startCol; col <= endCol; col++) {
+        centers.push({
+          x: col * hexW + offsetX,
+          y: row * rowH
+        });
+      }
+    }
+  } else {
+    const hexW = 2 * circumradius;
+    const hexH = Math.sqrt(3) * circumradius;
+    const colW = hexW * 0.75;
+    const startCol = Math.floor((bounds.minX - circumradius) / colW);
+    const endCol = Math.ceil((bounds.maxX + circumradius) / colW);
+    const startRow = Math.floor((bounds.minY - hexH) / hexH);
+    const endRow = Math.ceil((bounds.maxY + hexH) / hexH);
+    for (let col = startCol; col <= endCol; col++) {
+      const offsetY = col % 2 !== 0 ? hexH / 2 : 0;
+      for (let row = startRow; row <= endRow; row++) {
+        centers.push({
+          x: col * colW,
+          y: row * hexH + offsetY
+        });
+      }
+    }
+  }
+  return centers;
+}
+function renderSquareGrid(ctx, bounds, cellSize, strokeColor, strokeWidth, opacity) {
+  if (cellSize <= 0) return;
+  const { verticals, horizontals } = getSquareGridLines(bounds, cellSize);
+  ctx.save();
+  ctx.strokeStyle = strokeColor;
+  ctx.lineWidth = strokeWidth;
+  ctx.globalAlpha = opacity;
+  ctx.beginPath();
+  for (const x of verticals) {
+    ctx.moveTo(x, bounds.minY);
+    ctx.lineTo(x, bounds.maxY);
+  }
+  for (const y of horizontals) {
+    ctx.moveTo(bounds.minX, y);
+    ctx.lineTo(bounds.maxX, y);
+  }
+  ctx.stroke();
+  ctx.restore();
+}
+function renderHexGrid(ctx, bounds, cellSize, orientation, strokeColor, strokeWidth, opacity) {
+  if (cellSize <= 0) return;
+  const centers = getHexCenters(bounds, cellSize, orientation);
+  ctx.save();
+  ctx.strokeStyle = strokeColor;
+  ctx.lineWidth = strokeWidth;
+  ctx.globalAlpha = opacity;
+  ctx.beginPath();
+  for (const center of centers) {
+    const verts = getHexVertices(center.x, center.y, cellSize, orientation);
+    const first = verts[0];
+    if (!first) continue;
+    ctx.moveTo(first.x, first.y);
+    for (let i = 1; i < verts.length; i++) {
+      const v = verts[i];
+      if (!v) continue;
+      ctx.lineTo(v.x, v.y);
+    }
+    ctx.closePath();
+  }
+  ctx.stroke();
+  ctx.restore();
+}
+
 // src/elements/element-renderer.ts
 var DOM_ELEMENT_TYPES = /* @__PURE__ */ new Set(["note", "html", "text"]);
 var ARROWHEAD_LENGTH = 12;
@@ -953,12 +1065,20 @@ var ElementRenderer = class {
   store = null;
   imageCache = /* @__PURE__ */ new Map();
   onImageLoad = null;
+  camera = null;
+  canvasSize = null;
   setStore(store) {
     this.store = store;
   }
   setOnImageLoad(callback) {
     this.onImageLoad = callback;
   }
+  setCamera(camera) {
+    this.camera = camera;
+  }
+  setCanvasSize(w, h) {
+    this.canvasSize = { w, h };
+  }
   isDomElement(element) {
     return DOM_ELEMENT_TYPES.has(element.type);
   }
@@ -976,6 +1096,9 @@ var ElementRenderer = class {
       case "image":
         this.renderImage(ctx, element);
         break;
+      case "grid":
+        this.renderGrid(ctx, element);
+        break;
     }
   }
   renderStroke(ctx, stroke) {
@@ -1111,6 +1234,42 @@ var ElementRenderer = class {
       }
     }
   }
+  renderGrid(ctx, grid) {
+    if (!this.canvasSize) return;
+    const cam = this.camera;
+    if (!cam) return;
+    const topLeft = cam.screenToWorld({ x: 0, y: 0 });
+    const bottomRight = cam.screenToWorld({
+      x: this.canvasSize.w,
+      y: this.canvasSize.h
+    });
+    const bounds = {
+      minX: topLeft.x,
+      minY: topLeft.y,
+      maxX: bottomRight.x,
+      maxY: bottomRight.y
+    };
+    if (grid.gridType === "hex") {
+      renderHexGrid(
+        ctx,
+        bounds,
+        grid.cellSize,
+        grid.hexOrientation,
+        grid.strokeColor,
+        grid.strokeWidth,
+        grid.opacity
+      );
+    } else {
+      renderSquareGrid(
+        ctx,
+        bounds,
+        grid.cellSize,
+        grid.strokeColor,
+        grid.strokeWidth,
+        grid.opacity
+      );
+    }
+  }
   renderImage(ctx, image) {
     const img = this.getImage(image.src);
     if (!img) return;
@@ -1528,7 +1687,7 @@ function createImage(input) {
   };
 }
 function createHtmlElement(input) {
-  return {
+  const el = {
     id: createId("html"),
     type: "html",
     position: input.position,
@@ -1537,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 {
@@ -1553,6 +1714,22 @@ function createShape(input) {
     fillColor: input.fillColor ?? "none"
   };
 }
+function createGrid(input) {
+  return {
+    id: createId("grid"),
+    type: "grid",
+    position: input.position ?? { x: 0, y: 0 },
+    zIndex: input.zIndex ?? 0,
+    locked: input.locked ?? false,
+    layerId: input.layerId ?? "",
+    gridType: input.gridType ?? "square",
+    hexOrientation: input.hexOrientation ?? "pointy",
+    cellSize: input.cellSize ?? 40,
+    strokeColor: input.strokeColor ?? "#000000",
+    strokeWidth: input.strokeWidth ?? 1,
+    opacity: input.opacity ?? 1
+  };
+}
 function createText(input) {
   return {
     id: createId("text"),
@@ -1730,6 +1907,7 @@ var Viewport = class {
     this.toolManager = new ToolManager();
     this.renderer = new ElementRenderer();
     this.renderer.setStore(this.store);
+    this.renderer.setCamera(this.camera);
     this.renderer.setOnImageLoad(() => this.requestRender());
     this.noteEditor = new NoteEditor();
     this.noteEditor.setOnStop((id) => this.onTextEditStop(id));
@@ -1837,6 +2015,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);
@@ -1868,7 +2047,8 @@ 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);
@@ -1876,6 +2056,34 @@ var Viewport = class {
     this.requestRender();
     return el.id;
   }
+  addGrid(input) {
+    const existing = this.store.getElementsByType("grid")[0];
+    this.historyRecorder.begin();
+    if (existing) {
+      this.store.remove(existing.id);
+    }
+    const grid = createGrid({ ...input, layerId: this.layerManager.activeLayerId });
+    this.store.add(grid);
+    this.historyRecorder.commit();
+    this.requestRender();
+    return grid.id;
+  }
+  updateGrid(updates) {
+    const grid = this.store.getElementsByType("grid")[0];
+    if (!grid) return;
+    this.historyRecorder.begin();
+    this.store.update(grid.id, updates);
+    this.historyRecorder.commit();
+    this.requestRender();
+  }
+  removeGrid() {
+    const grid = this.store.getElementsByType("grid")[0];
+    if (!grid) return;
+    this.historyRecorder.begin();
+    this.store.remove(grid.id);
+    this.historyRecorder.commit();
+    this.requestRender();
+  }
   destroy() {
     cancelAnimationFrame(this.animFrameId);
     this.stopInteracting();
@@ -1907,6 +2115,7 @@ var Viewport = class {
     const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
     ctx.save();
     ctx.scale(dpr, dpr);
+    this.renderer.setCanvasSize(this.canvasEl.clientWidth, this.canvasEl.clientHeight);
     this.background.render(ctx, this.camera);
     ctx.save();
     ctx.translate(this.camera.position.x, this.camera.position.y);
@@ -2208,6 +2417,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, {
@@ -2466,10 +2685,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, {
@@ -2488,7 +2708,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, {
@@ -2517,7 +2737,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);
 }
@@ -2893,6 +3114,7 @@ var SelectTool = class {
     for (const el of ctx.store.getAll()) {
       if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
       if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
+      if (el.type === "grid") continue;
       const bounds = this.getElementBounds(el);
       if (bounds && this.rectsOverlap(marquee, bounds)) {
         ids.push(el.id);
@@ -2929,11 +3151,13 @@ var SelectTool = class {
     for (const el of elements) {
       if (ctx.isLayerVisible && !ctx.isLayerVisible(el.layerId)) continue;
       if (ctx.isLayerLocked && ctx.isLayerLocked(el.layerId)) continue;
+      if (el.type === "grid") continue;
       if (this.isInsideBounds(world, el)) return el;
     }
     return null;
   }
   isInsideBounds(point, el) {
+    if (el.type === "grid") return false;
     if ("size" in el) {
       const s = el.size;
       return point.x >= el.position.x && point.x <= el.position.x + s.w && point.y >= el.position.y && point.y <= el.position.y + s.h;
@@ -2974,8 +3198,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;
@@ -3359,7 +3585,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.6.1";
+var VERSION = "0.7.0";
 export {
   AddElementCommand,
   ArrowTool,
@@ -3393,6 +3619,7 @@ export {
   Viewport,
   clearStaleBindings,
   createArrow,
+  createGrid,
   createHtmlElement,
   createId,
   createImage,