@fieldnotes/core 0.4.1 → 0.5.0

package/dist/index.d.cts

@@ -101,6 +101,8 @@ declare function exportState(elements: CanvasElement[], camera: {
 }): CanvasState;
 declare function parseState(json: string): CanvasState;
 
+declare function snapPoint(point: Point, gridSize: number): Point;
+
 interface ElementUpdateEvent {
     previous: CanvasElement;
     current: CanvasElement;
@@ -203,6 +205,8 @@ interface ToolContext {
     switchTool?: (name: string) => void;
     editElement?: (id: string) => void;
     setCursor?: (cursor: string) => void;
+    snapToGrid?: boolean;
+    gridSize?: number;
 }
 interface PointerState {
     x: number;
@@ -353,12 +357,16 @@ declare class Viewport {
     readonly toolContext: ToolContext;
     private resizeObserver;
     private animFrameId;
+    private _snapToGrid;
+    private readonly _gridSize;
     private needsRender;
     private domNodes;
     private htmlContent;
     private interactingElementId;
     constructor(container: HTMLElement, options?: ViewportOptions);
     get ctx(): CanvasRenderingContext2D | null;
+    get snapToGrid(): boolean;
+    setSnapToGrid(enabled: boolean): void;
     requestRender(): void;
     exportState(): CanvasState;
     exportJSON(): string;
@@ -612,6 +620,7 @@ declare class SelectTool implements Tool {
     get isMarqueeActive(): boolean;
     onActivate(ctx: ToolContext): void;
     onDeactivate(ctx: ToolContext): void;
+    private snap;
     onPointerDown(state: PointerState, ctx: ToolContext): void;
     onPointerMove(state: PointerState, ctx: ToolContext): void;
     onPointerUp(_state: PointerState, ctx: ToolContext): void;
@@ -729,10 +738,11 @@ declare class ShapeTool implements Tool {
     onPointerUp(_state: PointerState, ctx: ToolContext): void;
     renderOverlay(ctx: CanvasRenderingContext2D): void;
     private computeRect;
+    private snap;
     private onKeyDown;
     private onKeyUp;
 }
 
-declare const VERSION = "0.4.1";
+declare const VERSION = "0.5.0";
 
-export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, 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 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, VERSION, Viewport, type ViewportOptions, clearStaleBindings, createArrow, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, unbindArrow, updateBoundArrow };
+export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, 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 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, VERSION, Viewport, type ViewportOptions, clearStaleBindings, createArrow, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, snapPoint, unbindArrow, updateBoundArrow };

package/dist/index.d.ts

@@ -101,6 +101,8 @@ declare function exportState(elements: CanvasElement[], camera: {
 }): CanvasState;
 declare function parseState(json: string): CanvasState;
 
+declare function snapPoint(point: Point, gridSize: number): Point;
+
 interface ElementUpdateEvent {
     previous: CanvasElement;
     current: CanvasElement;
@@ -203,6 +205,8 @@ interface ToolContext {
     switchTool?: (name: string) => void;
     editElement?: (id: string) => void;
     setCursor?: (cursor: string) => void;
+    snapToGrid?: boolean;
+    gridSize?: number;
 }
 interface PointerState {
     x: number;
@@ -353,12 +357,16 @@ declare class Viewport {
     readonly toolContext: ToolContext;
     private resizeObserver;
     private animFrameId;
+    private _snapToGrid;
+    private readonly _gridSize;
     private needsRender;
     private domNodes;
     private htmlContent;
     private interactingElementId;
     constructor(container: HTMLElement, options?: ViewportOptions);
     get ctx(): CanvasRenderingContext2D | null;
+    get snapToGrid(): boolean;
+    setSnapToGrid(enabled: boolean): void;
     requestRender(): void;
     exportState(): CanvasState;
     exportJSON(): string;
@@ -612,6 +620,7 @@ declare class SelectTool implements Tool {
     get isMarqueeActive(): boolean;
     onActivate(ctx: ToolContext): void;
     onDeactivate(ctx: ToolContext): void;
+    private snap;
     onPointerDown(state: PointerState, ctx: ToolContext): void;
     onPointerMove(state: PointerState, ctx: ToolContext): void;
     onPointerUp(_state: PointerState, ctx: ToolContext): void;
@@ -729,10 +738,11 @@ declare class ShapeTool implements Tool {
     onPointerUp(_state: PointerState, ctx: ToolContext): void;
     renderOverlay(ctx: CanvasRenderingContext2D): void;
     private computeRect;
+    private snap;
     private onKeyDown;
     private onKeyUp;
 }
 
-declare const VERSION = "0.4.1";
+declare const VERSION = "0.5.0";
 
-export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, 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 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, VERSION, Viewport, type ViewportOptions, clearStaleBindings, createArrow, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, unbindArrow, updateBoundArrow };
+export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, 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 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, VERSION, Viewport, type ViewportOptions, clearStaleBindings, createArrow, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, snapPoint, unbindArrow, updateBoundArrow };

package/dist/index.js

@@ -119,6 +119,14 @@ function migrateElement(obj) {
   }
 }
 
+// src/core/snap.ts
+function snapPoint(point, gridSize) {
+  return {
+    x: Math.round(point.x / gridSize) * gridSize || 0,
+    y: Math.round(point.y / gridSize) * gridSize || 0
+  };
+}
+
 // src/core/auto-save.ts
 var DEFAULT_KEY = "fieldnotes-autosave";
 var DEFAULT_DEBOUNCE_MS = 1e3;
@@ -1501,6 +1509,7 @@ var Viewport = class {
     this.container = container;
     this.camera = new Camera(options.camera);
     this.background = new Background(options.background);
+    this._gridSize = options.background?.spacing ?? 24;
     this.store = new ElementStore();
     this.toolManager = new ToolManager();
     this.renderer = new ElementRenderer();
@@ -1523,7 +1532,9 @@ var Viewport = class {
       editElement: (id) => this.startEditingElement(id),
       setCursor: (cursor) => {
         this.wrapper.style.cursor = cursor;
-      }
+      },
+      snapToGrid: false,
+      gridSize: this._gridSize
     };
     this.inputHandler = new InputHandler(this.wrapper, this.camera, {
       toolManager: this.toolManager,
@@ -1568,6 +1579,8 @@ var Viewport = class {
   toolContext;
   resizeObserver = null;
   animFrameId = 0;
+  _snapToGrid = false;
+  _gridSize;
   needsRender = true;
   domNodes = /* @__PURE__ */ new Map();
   htmlContent = /* @__PURE__ */ new Map();
@@ -1575,6 +1588,13 @@ var Viewport = class {
   get ctx() {
     return this.canvasEl.getContext("2d");
   }
+  get snapToGrid() {
+    return this._snapToGrid;
+  }
+  setSnapToGrid(enabled) {
+    this._snapToGrid = enabled;
+    this.toolContext.snapToGrid = enabled;
+  }
   requestRender() {
     this.needsRender = true;
   }
@@ -2323,10 +2343,13 @@ var SelectTool = class {
     this.mode = { type: "idle" };
     ctx.setCursor?.("default");
   }
+  snap(point, ctx) {
+    return ctx.snapToGrid && ctx.gridSize ? snapPoint(point, ctx.gridSize) : point;
+  }
   onPointerDown(state, ctx) {
     this.ctx = ctx;
     const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
-    this.lastWorld = world;
+    this.lastWorld = this.snap(world, ctx);
     this.currentWorld = world;
     const arrowHit = hitTestArrowHandles(world, this._selectedIds, ctx);
     if (arrowHit) {
@@ -2379,9 +2402,10 @@ var SelectTool = class {
     }
     if (this.mode.type === "dragging" && this._selectedIds.length > 0) {
       ctx.setCursor?.("move");
-      const dx = world.x - this.lastWorld.x;
-      const dy = world.y - this.lastWorld.y;
-      this.lastWorld = world;
+      const snapped = this.snap(world, ctx);
+      const dx = snapped.x - this.lastWorld.x;
+      const dy = snapped.y - this.lastWorld.y;
+      this.lastWorld = snapped;
       for (const id of this._selectedIds) {
         const el = ctx.store.getById(id);
         if (!el || el.locked) continue;
@@ -2730,7 +2754,7 @@ var ArrowTool = class {
       this.fromBinding = { elementId: target.id };
       this.fromTarget = target;
     } else {
-      this.start = world;
+      this.start = ctx.snapToGrid && ctx.gridSize ? snapPoint(world, ctx.gridSize) : world;
       this.fromBinding = void 0;
       this.fromTarget = null;
     }
@@ -2747,7 +2771,7 @@ var ArrowTool = class {
       this.end = getElementCenter(target);
       this.toTarget = target;
     } else {
-      this.end = world;
+      this.end = ctx.snapToGrid && ctx.gridSize ? snapPoint(world, ctx.gridSize) : world;
       this.toTarget = null;
     }
     ctx.requestRender();
@@ -2842,7 +2866,10 @@ var NoteTool = class {
   onPointerMove(_state, _ctx) {
   }
   onPointerUp(state, ctx) {
-    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    let world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    if (ctx.snapToGrid && ctx.gridSize) {
+      world = snapPoint(world, ctx.gridSize);
+    }
     const note = createNote({
       position: world,
       size: { ...this.size },
@@ -2883,7 +2910,10 @@ var TextTool = class {
   onPointerMove(_state, _ctx) {
   }
   onPointerUp(state, ctx) {
-    const world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    let world = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    if (ctx.snapToGrid && ctx.gridSize) {
+      world = snapPoint(world, ctx.gridSize);
+    }
     const textEl = createText({
       position: world,
       fontSize: this.fontSize,
@@ -2965,12 +2995,12 @@ var ShapeTool = class {
   }
   onPointerDown(state, ctx) {
     this.drawing = true;
-    this.start = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    this.start = this.snap(ctx.camera.screenToWorld({ x: state.x, y: state.y }), ctx);
     this.end = { ...this.start };
   }
   onPointerMove(state, ctx) {
     if (!this.drawing) return;
-    this.end = ctx.camera.screenToWorld({ x: state.x, y: state.y });
+    this.end = this.snap(ctx.camera.screenToWorld({ x: state.x, y: state.y }), ctx);
     ctx.requestRender();
   }
   onPointerUp(_state, ctx) {
@@ -3034,6 +3064,9 @@ var ShapeTool = class {
     }
     return { position: { x, y }, size: { w, h } };
   }
+  snap(point, ctx) {
+    return ctx.snapToGrid && ctx.gridSize ? snapPoint(point, ctx.gridSize) : point;
+  }
   onKeyDown = (e) => {
     if (e.key === "Shift") this.shiftHeld = true;
   };
@@ -3043,7 +3076,7 @@ var ShapeTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.4.1";
+var VERSION = "0.5.0";
 export {
   AddElementCommand,
   ArrowTool,
@@ -3094,6 +3127,7 @@ export {
   isBindable,
   isNearBezier,
   parseState,
+  snapPoint,
   unbindArrow,
   updateBoundArrow
 };