@fieldnotes/core 0.8.8 → 0.8.10

package/dist/index.cjs

@@ -1404,58 +1404,6 @@ function getSquareGridLines(bounds, cellSize) {
   }
   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);
@@ -1477,27 +1425,167 @@ function renderSquareGrid(ctx, bounds, cellSize, strokeColor, strokeWidth, opaci
 }
 function renderHexGrid(ctx, bounds, cellSize, orientation, strokeColor, strokeWidth, opacity) {
   if (cellSize <= 0) return;
-  const centers = getHexCenters(bounds, cellSize, orientation);
+  const angleOffset = orientation === "pointy" ? -Math.PI / 2 : 0;
+  const ox0 = cellSize * Math.cos(angleOffset);
+  const oy0 = cellSize * Math.sin(angleOffset);
+  const ox1 = cellSize * Math.cos(Math.PI / 3 + angleOffset);
+  const oy1 = cellSize * Math.sin(Math.PI / 3 + angleOffset);
+  const ox2 = cellSize * Math.cos(2 * Math.PI / 3 + angleOffset);
+  const oy2 = cellSize * Math.sin(2 * Math.PI / 3 + angleOffset);
+  const ox3 = cellSize * Math.cos(Math.PI + angleOffset);
+  const oy3 = cellSize * Math.sin(Math.PI + angleOffset);
+  const ox4 = cellSize * Math.cos(4 * Math.PI / 3 + angleOffset);
+  const oy4 = cellSize * Math.sin(4 * Math.PI / 3 + angleOffset);
+  const ox5 = cellSize * Math.cos(5 * Math.PI / 3 + angleOffset);
+  const oy5 = cellSize * Math.sin(5 * Math.PI / 3 + angleOffset);
   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);
+  if (orientation === "pointy") {
+    const hexW = Math.sqrt(3) * cellSize;
+    const rowH = 1.5 * cellSize;
+    const startRow = Math.floor((bounds.minY - cellSize) / rowH);
+    const endRow = Math.ceil((bounds.maxY + cellSize) / 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 offX = row % 2 !== 0 ? hexW / 2 : 0;
+      for (let col = startCol; col <= endCol; col++) {
+        const cx = col * hexW + offX;
+        const cy = row * rowH;
+        ctx.moveTo(cx + ox0, cy + oy0);
+        ctx.lineTo(cx + ox1, cy + oy1);
+        ctx.lineTo(cx + ox2, cy + oy2);
+        ctx.lineTo(cx + ox3, cy + oy3);
+        ctx.lineTo(cx + ox4, cy + oy4);
+        ctx.lineTo(cx + ox5, cy + oy5);
+        ctx.closePath();
+      }
+    }
+  } else {
+    const hexH = Math.sqrt(3) * cellSize;
+    const colW = 1.5 * cellSize;
+    const startCol = Math.floor((bounds.minX - cellSize) / colW);
+    const endCol = Math.ceil((bounds.maxX + cellSize) / 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 offY = col % 2 !== 0 ? hexH / 2 : 0;
+      for (let row = startRow; row <= endRow; row++) {
+        const cx = col * colW;
+        const cy = row * hexH + offY;
+        ctx.moveTo(cx + ox0, cy + oy0);
+        ctx.lineTo(cx + ox1, cy + oy1);
+        ctx.lineTo(cx + ox2, cy + oy2);
+        ctx.lineTo(cx + ox3, cy + oy3);
+        ctx.lineTo(cx + ox4, cy + oy4);
+        ctx.lineTo(cx + ox5, cy + oy5);
+        ctx.closePath();
+      }
     }
-    ctx.closePath();
   }
   ctx.stroke();
   ctx.restore();
 }
+function createHexGridTile(cellSize, orientation, strokeColor, strokeWidth, opacity, scale) {
+  let tileW;
+  let tileH;
+  if (orientation === "pointy") {
+    tileW = Math.sqrt(3) * cellSize;
+    tileH = 3 * cellSize;
+  } else {
+    tileW = 3 * cellSize;
+    tileH = Math.sqrt(3) * cellSize;
+  }
+  const pxW = Math.ceil(tileW * scale);
+  const pxH = Math.ceil(tileH * scale);
+  if (pxW <= 0 || pxH <= 0) return null;
+  let canvas;
+  if (typeof OffscreenCanvas !== "undefined") {
+    canvas = new OffscreenCanvas(pxW, pxH);
+  } else if (typeof document !== "undefined") {
+    const el = document.createElement("canvas");
+    el.width = pxW;
+    el.height = pxH;
+    canvas = el;
+  } else {
+    return null;
+  }
+  const tc = canvas.getContext("2d");
+  if (!tc) return null;
+  tc.scale(scale, scale);
+  tc.beginPath();
+  tc.rect(0, 0, tileW, tileH);
+  tc.clip();
+  const angleOffset = orientation === "pointy" ? -Math.PI / 2 : 0;
+  const ox0 = cellSize * Math.cos(angleOffset);
+  const oy0 = cellSize * Math.sin(angleOffset);
+  const ox1 = cellSize * Math.cos(Math.PI / 3 + angleOffset);
+  const oy1 = cellSize * Math.sin(Math.PI / 3 + angleOffset);
+  const ox2 = cellSize * Math.cos(2 * Math.PI / 3 + angleOffset);
+  const oy2 = cellSize * Math.sin(2 * Math.PI / 3 + angleOffset);
+  const ox3 = cellSize * Math.cos(Math.PI + angleOffset);
+  const oy3 = cellSize * Math.sin(Math.PI + angleOffset);
+  const ox4 = cellSize * Math.cos(4 * Math.PI / 3 + angleOffset);
+  const oy4 = cellSize * Math.sin(4 * Math.PI / 3 + angleOffset);
+  const ox5 = cellSize * Math.cos(5 * Math.PI / 3 + angleOffset);
+  const oy5 = cellSize * Math.sin(5 * Math.PI / 3 + angleOffset);
+  tc.strokeStyle = strokeColor;
+  tc.lineWidth = strokeWidth;
+  tc.globalAlpha = opacity;
+  tc.beginPath();
+  if (orientation === "pointy") {
+    const hexW = tileW;
+    const rowH = 1.5 * cellSize;
+    for (let row = -1; row <= 3; row++) {
+      const offX = row % 2 !== 0 ? hexW / 2 : 0;
+      for (let col = -1; col <= 1; col++) {
+        const cx = col * hexW + offX;
+        const cy = row * rowH;
+        tc.moveTo(cx + ox0, cy + oy0);
+        tc.lineTo(cx + ox1, cy + oy1);
+        tc.lineTo(cx + ox2, cy + oy2);
+        tc.lineTo(cx + ox3, cy + oy3);
+        tc.lineTo(cx + ox4, cy + oy4);
+        tc.lineTo(cx + ox5, cy + oy5);
+        tc.closePath();
+      }
+    }
+  } else {
+    const hexH = tileH;
+    const colW = 1.5 * cellSize;
+    for (let col = -1; col <= 3; col++) {
+      const offY = col % 2 !== 0 ? hexH / 2 : 0;
+      for (let row = -1; row <= 1; row++) {
+        const cx = col * colW;
+        const cy = row * hexH + offY;
+        tc.moveTo(cx + ox0, cy + oy0);
+        tc.lineTo(cx + ox1, cy + oy1);
+        tc.lineTo(cx + ox2, cy + oy2);
+        tc.lineTo(cx + ox3, cy + oy3);
+        tc.lineTo(cx + ox4, cy + oy4);
+        tc.lineTo(cx + ox5, cy + oy5);
+        tc.closePath();
+      }
+    }
+  }
+  tc.stroke();
+  return { canvas, tileW, tileH };
+}
+function renderHexGridTiled(ctx, bounds, cellSize, tile) {
+  const { tileW, tileH } = tile;
+  const startCol = Math.floor(bounds.minX / tileW) - 1;
+  const endCol = Math.ceil(bounds.maxX / tileW) + 1;
+  const startRow = Math.floor(bounds.minY / tileH) - 1;
+  const endRow = Math.ceil(bounds.maxY / tileH) + 1;
+  for (let row = startRow; row <= endRow; row++) {
+    for (let col = startCol; col <= endCol; col++) {
+      ctx.drawImage(tile.canvas, col * tileW, row * tileH, tileW, tileH);
+    }
+  }
+}
 
 // src/elements/element-renderer.ts
 var DOM_ELEMENT_TYPES = /* @__PURE__ */ new Set(["note", "html", "text"]);
@@ -1509,6 +1597,8 @@ var ElementRenderer = class {
   onImageLoad = null;
   camera = null;
   canvasSize = null;
+  hexTileCache = null;
+  hexTileCacheKey = "";
   setStore(store) {
     this.store = store;
   }
@@ -1694,15 +1784,29 @@ var ElementRenderer = class {
       maxY: bottomRight.y
     };
     if (grid.gridType === "hex") {
-      renderHexGrid(
-        ctx,
-        bounds,
+      const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+      const scale = cam.zoom * dpr;
+      const tile = this.getHexTile(
         grid.cellSize,
         grid.hexOrientation,
         grid.strokeColor,
         grid.strokeWidth,
-        grid.opacity
+        grid.opacity,
+        scale
       );
+      if (tile) {
+        renderHexGridTiled(ctx, bounds, grid.cellSize, tile);
+      } else {
+        renderHexGrid(
+          ctx,
+          bounds,
+          grid.cellSize,
+          grid.hexOrientation,
+          grid.strokeColor,
+          grid.strokeWidth,
+          grid.opacity
+        );
+      }
     } else {
       renderSquareGrid(
         ctx,
@@ -1725,6 +1829,18 @@ var ElementRenderer = class {
       image.size.h
     );
   }
+  getHexTile(cellSize, orientation, strokeColor, strokeWidth, opacity, scale) {
+    const key = `${cellSize}:${orientation}:${strokeColor}:${strokeWidth}:${opacity}:${scale}`;
+    if (this.hexTileCacheKey === key && this.hexTileCache) {
+      return this.hexTileCache;
+    }
+    const tile = createHexGridTile(cellSize, orientation, strokeColor, strokeWidth, opacity, scale);
+    if (tile) {
+      this.hexTileCache = tile;
+      this.hexTileCacheKey = key;
+    }
+    return tile;
+  }
   getImage(src) {
     const cached = this.imageCache.get(src);
     if (cached) {
@@ -2825,17 +2941,19 @@ var SAMPLE_SIZE = 60;
 var RenderStats = class {
   frameTimes = [];
   frameCount = 0;
-  recordFrame(durationMs) {
+  _lastGridMs = 0;
+  recordFrame(durationMs, gridMs) {
     this.frameCount++;
     this.frameTimes.push(durationMs);
     if (this.frameTimes.length > SAMPLE_SIZE) {
       this.frameTimes.shift();
     }
+    if (gridMs !== void 0) this._lastGridMs = gridMs;
   }
   getSnapshot() {
     const times = this.frameTimes;
     if (times.length === 0) {
-      return { fps: 0, avgFrameMs: 0, p95FrameMs: 0, lastFrameMs: 0, frameCount: 0 };
+      return { fps: 0, avgFrameMs: 0, p95FrameMs: 0, lastFrameMs: 0, lastGridMs: 0, frameCount: 0 };
     }
     const avg = times.reduce((a, b) => a + b, 0) / times.length;
     const sorted = [...times].sort((a, b) => a - b);
@@ -2846,6 +2964,7 @@ var RenderStats = class {
       avgFrameMs: Math.round(avg * 100) / 100,
       p95FrameMs: Math.round((sorted[p95Index] ?? 0) * 100) / 100,
       lastFrameMs: Math.round(lastFrame * 100) / 100,
+      lastGridMs: Math.round(this._lastGridMs * 100) / 100,
       frameCount: this.frameCount
     };
   }
@@ -2873,6 +2992,15 @@ var RenderLoop = class {
   lastCamX;
   lastCamY;
   stats = new RenderStats();
+  lastGridMs = 0;
+  gridCacheCanvas = null;
+  gridCacheCtx = null;
+  gridCacheZoom = -1;
+  gridCacheCamX = -Infinity;
+  gridCacheCamY = -Infinity;
+  gridCacheWidth = 0;
+  gridCacheHeight = 0;
+  lastGridRef = null;
   constructor(deps) {
     this.canvasEl = deps.canvasEl;
     this.camera = deps.camera;
@@ -2935,6 +3063,29 @@ var RenderLoop = class {
     ctx.drawImage(cached, 0, 0);
     ctx.restore();
   }
+  ensureGridCache(cssWidth, cssHeight, dpr) {
+    if (this.gridCacheCanvas !== null && this.gridCacheWidth === cssWidth && this.gridCacheHeight === cssHeight) {
+      return;
+    }
+    const physWidth = Math.round(cssWidth * dpr);
+    const physHeight = Math.round(cssHeight * dpr);
+    if (typeof OffscreenCanvas !== "undefined") {
+      this.gridCacheCanvas = new OffscreenCanvas(
+        physWidth,
+        physHeight
+      );
+    } else if (typeof document !== "undefined") {
+      const el = document.createElement("canvas");
+      el.width = physWidth;
+      el.height = physHeight;
+      this.gridCacheCanvas = el;
+    } else {
+      this.gridCacheCanvas = null;
+      this.gridCacheCtx = null;
+      return;
+    }
+    this.gridCacheCtx = this.gridCacheCanvas.getContext("2d");
+  }
   render() {
     const t0 = performance.now();
     const ctx = this.canvasEl.getContext("2d");
@@ -2997,9 +3148,6 @@ var RenderLoop = class {
       }
       group.push(element);
     }
-    for (const grid of gridElements) {
-      this.renderer.renderCanvasElement(ctx, grid);
-    }
     for (const [layerId, elements] of layerElements) {
       const isActiveDrawingLayer = layerId === this.activeDrawingLayerId;
       if (!this.layerCache.isDirty(layerId)) {
@@ -3028,13 +3176,53 @@ var RenderLoop = class {
         this.compositeLayerCache(ctx, layerId, dpr);
       }
     }
+    if (gridElements.length > 0) {
+      const gridT0 = performance.now();
+      const gridRef = gridElements[0];
+      const gridCacheHit = this.gridCacheCanvas !== null && currentZoom === this.gridCacheZoom && currentCamX === this.gridCacheCamX && currentCamY === this.gridCacheCamY && cssWidth === this.gridCacheWidth && cssHeight === this.gridCacheHeight && gridRef === this.lastGridRef;
+      if (gridCacheHit) {
+        ctx.save();
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.drawImage(this.gridCacheCanvas, 0, 0);
+        ctx.restore();
+      } else {
+        this.ensureGridCache(cssWidth, cssHeight, dpr);
+        if (this.gridCacheCtx && this.gridCacheCanvas) {
+          const gc = this.gridCacheCtx;
+          gc.clearRect(0, 0, this.gridCacheCanvas.width, this.gridCacheCanvas.height);
+          gc.save();
+          gc.scale(dpr, dpr);
+          gc.translate(currentCamX, currentCamY);
+          gc.scale(currentZoom, currentZoom);
+          for (const grid of gridElements) {
+            this.renderer.renderCanvasElement(gc, grid);
+          }
+          gc.restore();
+          ctx.save();
+          ctx.setTransform(1, 0, 0, 1, 0, 0);
+          ctx.drawImage(this.gridCacheCanvas, 0, 0);
+          ctx.restore();
+        } else {
+          for (const grid of gridElements) {
+            this.renderer.renderCanvasElement(ctx, grid);
+          }
+        }
+        this.gridCacheZoom = currentZoom;
+        this.gridCacheCamX = currentCamX;
+        this.gridCacheCamY = currentCamY;
+        this.gridCacheWidth = cssWidth;
+        this.gridCacheHeight = cssHeight;
+        this.lastGridRef = gridRef;
+      }
+      this.lastGridMs = performance.now() - gridT0;
+    }
     const activeTool = this.toolManager.activeTool;
     if (activeTool?.renderOverlay) {
       activeTool.renderOverlay(ctx);
     }
     ctx.restore();
     ctx.restore();
-    this.stats.recordFrame(performance.now() - t0);
+    this.stats.recordFrame(performance.now() - t0, this.lastGridMs);
   }
 };
 
@@ -3334,6 +3522,18 @@ var Viewport = class {
     this.historyRecorder.commit();
     this.requestRender();
   }
+  getRenderStats() {
+    return this.renderLoop.getStats();
+  }
+  logPerformance(intervalMs = 2e3) {
+    const id = setInterval(() => {
+      const s = this.getRenderStats();
+      console.log(
+        `[FieldNotes] fps=${s.fps} frame=${s.avgFrameMs}ms p95=${s.p95FrameMs}ms grid=${s.lastGridMs}ms`
+      );
+    }, intervalMs);
+    return () => clearInterval(id);
+  }
   destroy() {
     this.renderLoop.stop();
     this.interactMode.destroy();
@@ -4718,7 +4918,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.8.8";
+var VERSION = "0.8.10";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,

package/dist/index.d.cts

@@ -440,6 +440,15 @@ interface ExportImageOptions {
 }
 declare function exportImage(store: ElementStore, options?: ExportImageOptions, layerManager?: LayerManager): Promise<Blob | null>;
 
+interface RenderStatsSnapshot {
+    fps: number;
+    avgFrameMs: number;
+    p95FrameMs: number;
+    lastFrameMs: number;
+    lastGridMs: number;
+    frameCount: number;
+}
+
 interface ViewportOptions {
     camera?: CameraOptions;
     background?: BackgroundOptions;
@@ -504,6 +513,8 @@ declare class Viewport {
     }): string;
     updateGrid(updates: Partial<Pick<GridElement, 'gridType' | 'hexOrientation' | 'cellSize' | 'strokeColor' | 'strokeWidth' | 'opacity'>>): void;
     removeGrid(): void;
+    getRenderStats(): RenderStatsSnapshot;
+    logPerformance(intervalMs?: number): () => void;
     destroy(): void;
     private startEditingElement;
     private onTextEditStop;
@@ -521,20 +532,14 @@ declare class Viewport {
     private observeResize;
 }
 
-interface RenderStatsSnapshot {
-    fps: number;
-    avgFrameMs: number;
-    p95FrameMs: number;
-    lastFrameMs: number;
-    frameCount: number;
-}
-
 declare class ElementRenderer {
     private store;
     private imageCache;
     private onImageLoad;
     private camera;
     private canvasSize;
+    private hexTileCache;
+    private hexTileCacheKey;
     setStore(store: ElementStore): void;
     setOnImageLoad(callback: () => void): void;
     setCamera(camera: Camera): void;
@@ -550,6 +555,7 @@ declare class ElementRenderer {
     private strokeShapePath;
     private renderGrid;
     private renderImage;
+    private getHexTile;
     private getImage;
 }
 
@@ -924,6 +930,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.8.8";
+declare const VERSION = "0.8.10";
 
 export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraChangeInfo, 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, Quadtree, RemoveElementCommand, RemoveLayerCommand, type RenderStatsSnapshot, 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, boundsIntersect, 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

@@ -440,6 +440,15 @@ interface ExportImageOptions {
 }
 declare function exportImage(store: ElementStore, options?: ExportImageOptions, layerManager?: LayerManager): Promise<Blob | null>;
 
+interface RenderStatsSnapshot {
+    fps: number;
+    avgFrameMs: number;
+    p95FrameMs: number;
+    lastFrameMs: number;
+    lastGridMs: number;
+    frameCount: number;
+}
+
 interface ViewportOptions {
     camera?: CameraOptions;
     background?: BackgroundOptions;
@@ -504,6 +513,8 @@ declare class Viewport {
     }): string;
     updateGrid(updates: Partial<Pick<GridElement, 'gridType' | 'hexOrientation' | 'cellSize' | 'strokeColor' | 'strokeWidth' | 'opacity'>>): void;
     removeGrid(): void;
+    getRenderStats(): RenderStatsSnapshot;
+    logPerformance(intervalMs?: number): () => void;
     destroy(): void;
     private startEditingElement;
     private onTextEditStop;
@@ -521,20 +532,14 @@ declare class Viewport {
     private observeResize;
 }
 
-interface RenderStatsSnapshot {
-    fps: number;
-    avgFrameMs: number;
-    p95FrameMs: number;
-    lastFrameMs: number;
-    frameCount: number;
-}
-
 declare class ElementRenderer {
     private store;
     private imageCache;
     private onImageLoad;
     private camera;
     private canvasSize;
+    private hexTileCache;
+    private hexTileCacheKey;
     setStore(store: ElementStore): void;
     setOnImageLoad(callback: () => void): void;
     setCamera(camera: Camera): void;
@@ -550,6 +555,7 @@ declare class ElementRenderer {
     private strokeShapePath;
     private renderGrid;
     private renderImage;
+    private getHexTile;
     private getImage;
 }
 
@@ -924,6 +930,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.8.8";
+declare const VERSION = "0.8.10";
 
 export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraChangeInfo, 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, Quadtree, RemoveElementCommand, RemoveLayerCommand, type RenderStatsSnapshot, 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, boundsIntersect, 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

@@ -1319,58 +1319,6 @@ function getSquareGridLines(bounds, cellSize) {
   }
   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);
@@ -1392,27 +1340,167 @@ function renderSquareGrid(ctx, bounds, cellSize, strokeColor, strokeWidth, opaci
 }
 function renderHexGrid(ctx, bounds, cellSize, orientation, strokeColor, strokeWidth, opacity) {
   if (cellSize <= 0) return;
-  const centers = getHexCenters(bounds, cellSize, orientation);
+  const angleOffset = orientation === "pointy" ? -Math.PI / 2 : 0;
+  const ox0 = cellSize * Math.cos(angleOffset);
+  const oy0 = cellSize * Math.sin(angleOffset);
+  const ox1 = cellSize * Math.cos(Math.PI / 3 + angleOffset);
+  const oy1 = cellSize * Math.sin(Math.PI / 3 + angleOffset);
+  const ox2 = cellSize * Math.cos(2 * Math.PI / 3 + angleOffset);
+  const oy2 = cellSize * Math.sin(2 * Math.PI / 3 + angleOffset);
+  const ox3 = cellSize * Math.cos(Math.PI + angleOffset);
+  const oy3 = cellSize * Math.sin(Math.PI + angleOffset);
+  const ox4 = cellSize * Math.cos(4 * Math.PI / 3 + angleOffset);
+  const oy4 = cellSize * Math.sin(4 * Math.PI / 3 + angleOffset);
+  const ox5 = cellSize * Math.cos(5 * Math.PI / 3 + angleOffset);
+  const oy5 = cellSize * Math.sin(5 * Math.PI / 3 + angleOffset);
   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);
+  if (orientation === "pointy") {
+    const hexW = Math.sqrt(3) * cellSize;
+    const rowH = 1.5 * cellSize;
+    const startRow = Math.floor((bounds.minY - cellSize) / rowH);
+    const endRow = Math.ceil((bounds.maxY + cellSize) / 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 offX = row % 2 !== 0 ? hexW / 2 : 0;
+      for (let col = startCol; col <= endCol; col++) {
+        const cx = col * hexW + offX;
+        const cy = row * rowH;
+        ctx.moveTo(cx + ox0, cy + oy0);
+        ctx.lineTo(cx + ox1, cy + oy1);
+        ctx.lineTo(cx + ox2, cy + oy2);
+        ctx.lineTo(cx + ox3, cy + oy3);
+        ctx.lineTo(cx + ox4, cy + oy4);
+        ctx.lineTo(cx + ox5, cy + oy5);
+        ctx.closePath();
+      }
+    }
+  } else {
+    const hexH = Math.sqrt(3) * cellSize;
+    const colW = 1.5 * cellSize;
+    const startCol = Math.floor((bounds.minX - cellSize) / colW);
+    const endCol = Math.ceil((bounds.maxX + cellSize) / 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 offY = col % 2 !== 0 ? hexH / 2 : 0;
+      for (let row = startRow; row <= endRow; row++) {
+        const cx = col * colW;
+        const cy = row * hexH + offY;
+        ctx.moveTo(cx + ox0, cy + oy0);
+        ctx.lineTo(cx + ox1, cy + oy1);
+        ctx.lineTo(cx + ox2, cy + oy2);
+        ctx.lineTo(cx + ox3, cy + oy3);
+        ctx.lineTo(cx + ox4, cy + oy4);
+        ctx.lineTo(cx + ox5, cy + oy5);
+        ctx.closePath();
+      }
     }
-    ctx.closePath();
   }
   ctx.stroke();
   ctx.restore();
 }
+function createHexGridTile(cellSize, orientation, strokeColor, strokeWidth, opacity, scale) {
+  let tileW;
+  let tileH;
+  if (orientation === "pointy") {
+    tileW = Math.sqrt(3) * cellSize;
+    tileH = 3 * cellSize;
+  } else {
+    tileW = 3 * cellSize;
+    tileH = Math.sqrt(3) * cellSize;
+  }
+  const pxW = Math.ceil(tileW * scale);
+  const pxH = Math.ceil(tileH * scale);
+  if (pxW <= 0 || pxH <= 0) return null;
+  let canvas;
+  if (typeof OffscreenCanvas !== "undefined") {
+    canvas = new OffscreenCanvas(pxW, pxH);
+  } else if (typeof document !== "undefined") {
+    const el = document.createElement("canvas");
+    el.width = pxW;
+    el.height = pxH;
+    canvas = el;
+  } else {
+    return null;
+  }
+  const tc = canvas.getContext("2d");
+  if (!tc) return null;
+  tc.scale(scale, scale);
+  tc.beginPath();
+  tc.rect(0, 0, tileW, tileH);
+  tc.clip();
+  const angleOffset = orientation === "pointy" ? -Math.PI / 2 : 0;
+  const ox0 = cellSize * Math.cos(angleOffset);
+  const oy0 = cellSize * Math.sin(angleOffset);
+  const ox1 = cellSize * Math.cos(Math.PI / 3 + angleOffset);
+  const oy1 = cellSize * Math.sin(Math.PI / 3 + angleOffset);
+  const ox2 = cellSize * Math.cos(2 * Math.PI / 3 + angleOffset);
+  const oy2 = cellSize * Math.sin(2 * Math.PI / 3 + angleOffset);
+  const ox3 = cellSize * Math.cos(Math.PI + angleOffset);
+  const oy3 = cellSize * Math.sin(Math.PI + angleOffset);
+  const ox4 = cellSize * Math.cos(4 * Math.PI / 3 + angleOffset);
+  const oy4 = cellSize * Math.sin(4 * Math.PI / 3 + angleOffset);
+  const ox5 = cellSize * Math.cos(5 * Math.PI / 3 + angleOffset);
+  const oy5 = cellSize * Math.sin(5 * Math.PI / 3 + angleOffset);
+  tc.strokeStyle = strokeColor;
+  tc.lineWidth = strokeWidth;
+  tc.globalAlpha = opacity;
+  tc.beginPath();
+  if (orientation === "pointy") {
+    const hexW = tileW;
+    const rowH = 1.5 * cellSize;
+    for (let row = -1; row <= 3; row++) {
+      const offX = row % 2 !== 0 ? hexW / 2 : 0;
+      for (let col = -1; col <= 1; col++) {
+        const cx = col * hexW + offX;
+        const cy = row * rowH;
+        tc.moveTo(cx + ox0, cy + oy0);
+        tc.lineTo(cx + ox1, cy + oy1);
+        tc.lineTo(cx + ox2, cy + oy2);
+        tc.lineTo(cx + ox3, cy + oy3);
+        tc.lineTo(cx + ox4, cy + oy4);
+        tc.lineTo(cx + ox5, cy + oy5);
+        tc.closePath();
+      }
+    }
+  } else {
+    const hexH = tileH;
+    const colW = 1.5 * cellSize;
+    for (let col = -1; col <= 3; col++) {
+      const offY = col % 2 !== 0 ? hexH / 2 : 0;
+      for (let row = -1; row <= 1; row++) {
+        const cx = col * colW;
+        const cy = row * hexH + offY;
+        tc.moveTo(cx + ox0, cy + oy0);
+        tc.lineTo(cx + ox1, cy + oy1);
+        tc.lineTo(cx + ox2, cy + oy2);
+        tc.lineTo(cx + ox3, cy + oy3);
+        tc.lineTo(cx + ox4, cy + oy4);
+        tc.lineTo(cx + ox5, cy + oy5);
+        tc.closePath();
+      }
+    }
+  }
+  tc.stroke();
+  return { canvas, tileW, tileH };
+}
+function renderHexGridTiled(ctx, bounds, cellSize, tile) {
+  const { tileW, tileH } = tile;
+  const startCol = Math.floor(bounds.minX / tileW) - 1;
+  const endCol = Math.ceil(bounds.maxX / tileW) + 1;
+  const startRow = Math.floor(bounds.minY / tileH) - 1;
+  const endRow = Math.ceil(bounds.maxY / tileH) + 1;
+  for (let row = startRow; row <= endRow; row++) {
+    for (let col = startCol; col <= endCol; col++) {
+      ctx.drawImage(tile.canvas, col * tileW, row * tileH, tileW, tileH);
+    }
+  }
+}
 
 // src/elements/element-renderer.ts
 var DOM_ELEMENT_TYPES = /* @__PURE__ */ new Set(["note", "html", "text"]);
@@ -1424,6 +1512,8 @@ var ElementRenderer = class {
   onImageLoad = null;
   camera = null;
   canvasSize = null;
+  hexTileCache = null;
+  hexTileCacheKey = "";
   setStore(store) {
     this.store = store;
   }
@@ -1609,15 +1699,29 @@ var ElementRenderer = class {
       maxY: bottomRight.y
     };
     if (grid.gridType === "hex") {
-      renderHexGrid(
-        ctx,
-        bounds,
+      const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+      const scale = cam.zoom * dpr;
+      const tile = this.getHexTile(
         grid.cellSize,
         grid.hexOrientation,
         grid.strokeColor,
         grid.strokeWidth,
-        grid.opacity
+        grid.opacity,
+        scale
       );
+      if (tile) {
+        renderHexGridTiled(ctx, bounds, grid.cellSize, tile);
+      } else {
+        renderHexGrid(
+          ctx,
+          bounds,
+          grid.cellSize,
+          grid.hexOrientation,
+          grid.strokeColor,
+          grid.strokeWidth,
+          grid.opacity
+        );
+      }
     } else {
       renderSquareGrid(
         ctx,
@@ -1640,6 +1744,18 @@ var ElementRenderer = class {
       image.size.h
     );
   }
+  getHexTile(cellSize, orientation, strokeColor, strokeWidth, opacity, scale) {
+    const key = `${cellSize}:${orientation}:${strokeColor}:${strokeWidth}:${opacity}:${scale}`;
+    if (this.hexTileCacheKey === key && this.hexTileCache) {
+      return this.hexTileCache;
+    }
+    const tile = createHexGridTile(cellSize, orientation, strokeColor, strokeWidth, opacity, scale);
+    if (tile) {
+      this.hexTileCache = tile;
+      this.hexTileCacheKey = key;
+    }
+    return tile;
+  }
   getImage(src) {
     const cached = this.imageCache.get(src);
     if (cached) {
@@ -2740,17 +2856,19 @@ var SAMPLE_SIZE = 60;
 var RenderStats = class {
   frameTimes = [];
   frameCount = 0;
-  recordFrame(durationMs) {
+  _lastGridMs = 0;
+  recordFrame(durationMs, gridMs) {
     this.frameCount++;
     this.frameTimes.push(durationMs);
     if (this.frameTimes.length > SAMPLE_SIZE) {
       this.frameTimes.shift();
     }
+    if (gridMs !== void 0) this._lastGridMs = gridMs;
   }
   getSnapshot() {
     const times = this.frameTimes;
     if (times.length === 0) {
-      return { fps: 0, avgFrameMs: 0, p95FrameMs: 0, lastFrameMs: 0, frameCount: 0 };
+      return { fps: 0, avgFrameMs: 0, p95FrameMs: 0, lastFrameMs: 0, lastGridMs: 0, frameCount: 0 };
     }
     const avg = times.reduce((a, b) => a + b, 0) / times.length;
     const sorted = [...times].sort((a, b) => a - b);
@@ -2761,6 +2879,7 @@ var RenderStats = class {
       avgFrameMs: Math.round(avg * 100) / 100,
       p95FrameMs: Math.round((sorted[p95Index] ?? 0) * 100) / 100,
       lastFrameMs: Math.round(lastFrame * 100) / 100,
+      lastGridMs: Math.round(this._lastGridMs * 100) / 100,
       frameCount: this.frameCount
     };
   }
@@ -2788,6 +2907,15 @@ var RenderLoop = class {
   lastCamX;
   lastCamY;
   stats = new RenderStats();
+  lastGridMs = 0;
+  gridCacheCanvas = null;
+  gridCacheCtx = null;
+  gridCacheZoom = -1;
+  gridCacheCamX = -Infinity;
+  gridCacheCamY = -Infinity;
+  gridCacheWidth = 0;
+  gridCacheHeight = 0;
+  lastGridRef = null;
   constructor(deps) {
     this.canvasEl = deps.canvasEl;
     this.camera = deps.camera;
@@ -2850,6 +2978,29 @@ var RenderLoop = class {
     ctx.drawImage(cached, 0, 0);
     ctx.restore();
   }
+  ensureGridCache(cssWidth, cssHeight, dpr) {
+    if (this.gridCacheCanvas !== null && this.gridCacheWidth === cssWidth && this.gridCacheHeight === cssHeight) {
+      return;
+    }
+    const physWidth = Math.round(cssWidth * dpr);
+    const physHeight = Math.round(cssHeight * dpr);
+    if (typeof OffscreenCanvas !== "undefined") {
+      this.gridCacheCanvas = new OffscreenCanvas(
+        physWidth,
+        physHeight
+      );
+    } else if (typeof document !== "undefined") {
+      const el = document.createElement("canvas");
+      el.width = physWidth;
+      el.height = physHeight;
+      this.gridCacheCanvas = el;
+    } else {
+      this.gridCacheCanvas = null;
+      this.gridCacheCtx = null;
+      return;
+    }
+    this.gridCacheCtx = this.gridCacheCanvas.getContext("2d");
+  }
   render() {
     const t0 = performance.now();
     const ctx = this.canvasEl.getContext("2d");
@@ -2912,9 +3063,6 @@ var RenderLoop = class {
       }
       group.push(element);
     }
-    for (const grid of gridElements) {
-      this.renderer.renderCanvasElement(ctx, grid);
-    }
     for (const [layerId, elements] of layerElements) {
       const isActiveDrawingLayer = layerId === this.activeDrawingLayerId;
       if (!this.layerCache.isDirty(layerId)) {
@@ -2943,13 +3091,53 @@ var RenderLoop = class {
         this.compositeLayerCache(ctx, layerId, dpr);
       }
     }
+    if (gridElements.length > 0) {
+      const gridT0 = performance.now();
+      const gridRef = gridElements[0];
+      const gridCacheHit = this.gridCacheCanvas !== null && currentZoom === this.gridCacheZoom && currentCamX === this.gridCacheCamX && currentCamY === this.gridCacheCamY && cssWidth === this.gridCacheWidth && cssHeight === this.gridCacheHeight && gridRef === this.lastGridRef;
+      if (gridCacheHit) {
+        ctx.save();
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.drawImage(this.gridCacheCanvas, 0, 0);
+        ctx.restore();
+      } else {
+        this.ensureGridCache(cssWidth, cssHeight, dpr);
+        if (this.gridCacheCtx && this.gridCacheCanvas) {
+          const gc = this.gridCacheCtx;
+          gc.clearRect(0, 0, this.gridCacheCanvas.width, this.gridCacheCanvas.height);
+          gc.save();
+          gc.scale(dpr, dpr);
+          gc.translate(currentCamX, currentCamY);
+          gc.scale(currentZoom, currentZoom);
+          for (const grid of gridElements) {
+            this.renderer.renderCanvasElement(gc, grid);
+          }
+          gc.restore();
+          ctx.save();
+          ctx.setTransform(1, 0, 0, 1, 0, 0);
+          ctx.drawImage(this.gridCacheCanvas, 0, 0);
+          ctx.restore();
+        } else {
+          for (const grid of gridElements) {
+            this.renderer.renderCanvasElement(ctx, grid);
+          }
+        }
+        this.gridCacheZoom = currentZoom;
+        this.gridCacheCamX = currentCamX;
+        this.gridCacheCamY = currentCamY;
+        this.gridCacheWidth = cssWidth;
+        this.gridCacheHeight = cssHeight;
+        this.lastGridRef = gridRef;
+      }
+      this.lastGridMs = performance.now() - gridT0;
+    }
     const activeTool = this.toolManager.activeTool;
     if (activeTool?.renderOverlay) {
       activeTool.renderOverlay(ctx);
     }
     ctx.restore();
     ctx.restore();
-    this.stats.recordFrame(performance.now() - t0);
+    this.stats.recordFrame(performance.now() - t0, this.lastGridMs);
   }
 };
 
@@ -3249,6 +3437,18 @@ var Viewport = class {
     this.historyRecorder.commit();
     this.requestRender();
   }
+  getRenderStats() {
+    return this.renderLoop.getStats();
+  }
+  logPerformance(intervalMs = 2e3) {
+    const id = setInterval(() => {
+      const s = this.getRenderStats();
+      console.log(
+        `[FieldNotes] fps=${s.fps} frame=${s.avgFrameMs}ms p95=${s.p95FrameMs}ms grid=${s.lastGridMs}ms`
+      );
+    }, intervalMs);
+    return () => clearInterval(id);
+  }
   destroy() {
     this.renderLoop.stop();
     this.interactMode.destroy();
@@ -4633,7 +4833,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.8.8";
+var VERSION = "0.8.10";
 export {
   AddElementCommand,
   ArrowTool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fieldnotes/core",
-  "version": "0.8.8",
+  "version": "0.8.10",
   "description": "Vanilla TypeScript infinite canvas engine",
   "type": "module",
   "main": "./dist/index.cjs",