@fieldnotes/core 0.8.8 → 0.8.9

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,172 @@ 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, scale) {
+  const pattern = ctx.createPattern(tile.canvas, "repeat");
+  if (!pattern) return;
+  const mat = new DOMMatrix();
+  mat.scaleSelf(1 / scale, 1 / scale);
+  pattern.setTransform(mat);
+  ctx.save();
+  ctx.fillStyle = pattern;
+  const pad = cellSize * 2;
+  ctx.fillRect(
+    bounds.minX - pad,
+    bounds.minY - pad,
+    bounds.maxX - bounds.minX + pad * 2,
+    bounds.maxY - bounds.minY + pad * 2
+  );
+  ctx.restore();
+}
 
 // src/elements/element-renderer.ts
 var DOM_ELEMENT_TYPES = /* @__PURE__ */ new Set(["note", "html", "text"]);
@@ -1509,6 +1602,8 @@ var ElementRenderer = class {
   onImageLoad = null;
   camera = null;
   canvasSize = null;
+  hexTileCache = null;
+  hexTileCacheKey = "";
   setStore(store) {
     this.store = store;
   }
@@ -1694,15 +1789,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, scale);
+      } else {
+        renderHexGrid(
+          ctx,
+          bounds,
+          grid.cellSize,
+          grid.hexOrientation,
+          grid.strokeColor,
+          grid.strokeWidth,
+          grid.opacity
+        );
+      }
     } else {
       renderSquareGrid(
         ctx,
@@ -1725,6 +1834,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 +2946,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 +2969,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 +2997,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 +3068,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 +3153,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 +3181,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(dpr, 0, 0, dpr, 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(dpr, 0, 0, dpr, 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 +3527,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();

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;
 }
 

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;
 }
 

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,172 @@ 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, scale) {
+  const pattern = ctx.createPattern(tile.canvas, "repeat");
+  if (!pattern) return;
+  const mat = new DOMMatrix();
+  mat.scaleSelf(1 / scale, 1 / scale);
+  pattern.setTransform(mat);
+  ctx.save();
+  ctx.fillStyle = pattern;
+  const pad = cellSize * 2;
+  ctx.fillRect(
+    bounds.minX - pad,
+    bounds.minY - pad,
+    bounds.maxX - bounds.minX + pad * 2,
+    bounds.maxY - bounds.minY + pad * 2
+  );
+  ctx.restore();
+}
 
 // src/elements/element-renderer.ts
 var DOM_ELEMENT_TYPES = /* @__PURE__ */ new Set(["note", "html", "text"]);
@@ -1424,6 +1517,8 @@ var ElementRenderer = class {
   onImageLoad = null;
   camera = null;
   canvasSize = null;
+  hexTileCache = null;
+  hexTileCacheKey = "";
   setStore(store) {
     this.store = store;
   }
@@ -1609,15 +1704,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, scale);
+      } else {
+        renderHexGrid(
+          ctx,
+          bounds,
+          grid.cellSize,
+          grid.hexOrientation,
+          grid.strokeColor,
+          grid.strokeWidth,
+          grid.opacity
+        );
+      }
     } else {
       renderSquareGrid(
         ctx,
@@ -1640,6 +1749,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 +2861,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 +2884,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 +2912,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 +2983,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 +3068,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 +3096,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(dpr, 0, 0, dpr, 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(dpr, 0, 0, dpr, 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 +3442,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();

package/package.json

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