@fieldnotes/core 0.1.0 → 0.1.2

package/dist/index.d.cts

@@ -114,6 +114,7 @@ declare class Background {
     private readonly lineWidth;
     constructor(options?: BackgroundOptions);
     render(ctx: CanvasRenderingContext2D, camera: Camera): void;
+    private adaptSpacing;
     private renderDots;
     private renderGrid;
 }
@@ -577,6 +578,6 @@ declare class ImageTool implements Tool {
     onPointerUp(state: PointerState, ctx: ToolContext): void;
 }
 
-declare const VERSION = "0.1.0";
+declare const VERSION = "0.1.2";
 
 export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, HandTool, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, RemoveElementCommand, SelectTool, type Size, type StrokeElement, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, VERSION, Viewport, type ViewportOptions, createArrow, createHtmlElement, createId, createImage, createNote, createStroke, exportState, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, isNearBezier, parseState };

package/dist/index.d.ts

@@ -114,6 +114,7 @@ declare class Background {
     private readonly lineWidth;
     constructor(options?: BackgroundOptions);
     render(ctx: CanvasRenderingContext2D, camera: Camera): void;
+    private adaptSpacing;
     private renderDots;
     private renderGrid;
 }
@@ -577,6 +578,6 @@ declare class ImageTool implements Tool {
     onPointerUp(state: PointerState, ctx: ToolContext): void;
 }
 
-declare const VERSION = "0.1.0";
+declare const VERSION = "0.1.2";
 
 export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, HandTool, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, RemoveElementCommand, SelectTool, type Size, type StrokeElement, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, VERSION, Viewport, type ViewportOptions, createArrow, createHtmlElement, createId, createImage, createNote, createStroke, exportState, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, isNearBezier, parseState };

package/dist/index.js

@@ -158,6 +158,7 @@ var Camera = class {
 };
 
 // src/canvas/background.ts
+var MIN_PATTERN_SPACING = 16;
 var DEFAULTS = {
   pattern: "dots",
   spacing: 24,
@@ -193,8 +194,15 @@ var Background = class {
     }
     ctx.restore();
   }
+  adaptSpacing(baseSpacing, zoom) {
+    let spacing = baseSpacing * zoom;
+    while (spacing < MIN_PATTERN_SPACING) {
+      spacing *= 2;
+    }
+    return spacing;
+  }
   renderDots(ctx, camera, width, height) {
-    const spacing = this.spacing * camera.zoom;
+    const spacing = this.adaptSpacing(this.spacing, camera.zoom);
     const offsetX = camera.position.x % spacing;
     const offsetY = camera.position.y % spacing;
     const radius = this.dotRadius * Math.min(camera.zoom, 2);
@@ -209,7 +217,7 @@ var Background = class {
     ctx.fill();
   }
   renderGrid(ctx, camera, width, height) {
-    const spacing = this.spacing * camera.zoom;
+    const spacing = this.adaptSpacing(this.spacing, camera.zoom);
     const offsetX = camera.position.x % spacing;
     const offsetY = camera.position.y % spacing;
     const lineW = this.lineWidth * Math.min(camera.zoom, 2);
@@ -269,9 +277,13 @@ var InputHandler = class {
   }
   onWheel = (e) => {
     e.preventDefault();
+    const rect = this.element.getBoundingClientRect();
     const zoomFactor = 1 - e.deltaY * ZOOM_SENSITIVITY;
     const newZoom = this.camera.zoom * zoomFactor;
-    this.camera.zoomAt(newZoom, { x: e.clientX, y: e.clientY });
+    this.camera.zoomAt(newZoom, {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    });
   };
   isInteractiveHtmlContent(e) {
     const target = e.target;
@@ -398,7 +410,12 @@ var InputHandler = class {
     return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
   }
   toPointerState(e) {
-    return { x: e.clientX, y: e.clientY, pressure: e.pressure };
+    const rect = this.element.getBoundingClientRect();
+    return {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+      pressure: e.pressure
+    };
   }
   dispatchToolDown(e) {
     if (!this.toolManager || !this.toolContext) return;
@@ -2141,7 +2158,7 @@ var ImageTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.1.0";
+var VERSION = "0.1.2";
 export {
   AddElementCommand,
   ArrowTool,