@fieldnotes/core 0.8.9 → 0.8.11

package/dist/index.cjs

@@ -1574,22 +1574,17 @@ function createHexGridTile(cellSize, orientation, strokeColor, strokeWidth, opac
   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();
+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
@@ -1800,7 +1795,7 @@ var ElementRenderer = class {
         scale
       );
       if (tile) {
-        renderHexGridTiled(ctx, bounds, grid.cellSize, tile, scale);
+        renderHexGridTiled(ctx, bounds, grid.cellSize, tile);
       } else {
         renderHexGrid(
           ctx,
@@ -3187,7 +3182,7 @@ var RenderLoop = class {
       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.setTransform(1, 0, 0, 1, 0, 0);
         ctx.drawImage(this.gridCacheCanvas, 0, 0);
         ctx.restore();
       } else {
@@ -3204,7 +3199,7 @@ var RenderLoop = class {
           }
           gc.restore();
           ctx.save();
-          ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+          ctx.setTransform(1, 0, 0, 1, 0, 0);
           ctx.drawImage(this.gridCacheCanvas, 0, 0);
           ctx.restore();
         } else {
@@ -3307,7 +3302,10 @@ var Viewport = class {
     this.renderer = new ElementRenderer();
     this.renderer.setStore(this.store);
     this.renderer.setCamera(this.camera);
-    this.renderer.setOnImageLoad(() => this.requestRender());
+    this.renderer.setOnImageLoad(() => {
+      this.renderLoop.markAllLayersDirty();
+      this.requestRender();
+    });
     this.noteEditor = new NoteEditor();
     this.noteEditor.setOnStop((id) => this.onTextEditStop(id));
     this.history = new HistoryStack();
@@ -4923,7 +4921,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.8.8";
+var VERSION = "0.8.11";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,

package/dist/index.d.cts

@@ -930,6 +930,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.8.8";
+declare const VERSION = "0.8.11";
 
 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

@@ -930,6 +930,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.8.8";
+declare const VERSION = "0.8.11";
 
 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

@@ -1489,22 +1489,17 @@ function createHexGridTile(cellSize, orientation, strokeColor, strokeWidth, opac
   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();
+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
@@ -1715,7 +1710,7 @@ var ElementRenderer = class {
         scale
       );
       if (tile) {
-        renderHexGridTiled(ctx, bounds, grid.cellSize, tile, scale);
+        renderHexGridTiled(ctx, bounds, grid.cellSize, tile);
       } else {
         renderHexGrid(
           ctx,
@@ -3102,7 +3097,7 @@ var RenderLoop = class {
       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.setTransform(1, 0, 0, 1, 0, 0);
         ctx.drawImage(this.gridCacheCanvas, 0, 0);
         ctx.restore();
       } else {
@@ -3119,7 +3114,7 @@ var RenderLoop = class {
           }
           gc.restore();
           ctx.save();
-          ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+          ctx.setTransform(1, 0, 0, 1, 0, 0);
           ctx.drawImage(this.gridCacheCanvas, 0, 0);
           ctx.restore();
         } else {
@@ -3222,7 +3217,10 @@ var Viewport = class {
     this.renderer = new ElementRenderer();
     this.renderer.setStore(this.store);
     this.renderer.setCamera(this.camera);
-    this.renderer.setOnImageLoad(() => this.requestRender());
+    this.renderer.setOnImageLoad(() => {
+      this.renderLoop.markAllLayersDirty();
+      this.requestRender();
+    });
     this.noteEditor = new NoteEditor();
     this.noteEditor.setOnStop((id) => this.onTextEditStop(id));
     this.history = new HistoryStack();
@@ -4838,7 +4836,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.8.8";
+var VERSION = "0.8.11";
 export {
   AddElementCommand,
   ArrowTool,

package/package.json

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