@fieldnotes/core 0.1.1 → 0.2.0

package/dist/index.d.cts

@@ -73,6 +73,34 @@ declare function exportState(elements: CanvasElement[], camera: {
 }): CanvasState;
 declare function parseState(json: string): CanvasState;
 
+interface ElementUpdateEvent {
+    previous: CanvasElement;
+    current: CanvasElement;
+}
+interface ElementStoreEvents {
+    add: CanvasElement;
+    remove: CanvasElement;
+    update: ElementUpdateEvent;
+    clear: null;
+}
+declare class ElementStore {
+    private elements;
+    private bus;
+    get count(): number;
+    getAll(): CanvasElement[];
+    getById(id: string): CanvasElement | undefined;
+    getElementsByType<T extends ElementType>(type: T): Extract<CanvasElement, {
+        type: T;
+    }>[];
+    add(element: CanvasElement): void;
+    update(id: string, partial: Partial<CanvasElement>): void;
+    remove(id: string): void;
+    clear(): void;
+    snapshot(): CanvasElement[];
+    loadSnapshot(elements: CanvasElement[]): void;
+    on<K extends keyof ElementStoreEvents>(event: K, listener: (data: ElementStoreEvents[K]) => void): () => void;
+}
+
 interface CameraOptions {
     minZoom?: number;
     maxZoom?: number;
@@ -98,6 +126,27 @@ declare class Camera {
     private notifyChange;
 }
 
+interface AutoSaveOptions {
+    key?: string;
+    debounceMs?: number;
+}
+declare class AutoSave {
+    private readonly store;
+    private readonly camera;
+    private readonly key;
+    private readonly debounceMs;
+    private timerId;
+    private unsubscribers;
+    constructor(store: ElementStore, camera: Camera, options?: AutoSaveOptions);
+    start(): void;
+    stop(): void;
+    load(): CanvasState | null;
+    clear(): void;
+    private scheduleSave;
+    private cancelPending;
+    private save;
+}
+
 type BackgroundPattern = 'dots' | 'grid' | 'none';
 interface BackgroundOptions {
     pattern?: BackgroundPattern;
@@ -114,38 +163,11 @@ declare class Background {
     private readonly lineWidth;
     constructor(options?: BackgroundOptions);
     render(ctx: CanvasRenderingContext2D, camera: Camera): void;
+    private adaptSpacing;
     private renderDots;
     private renderGrid;
 }
 
-interface ElementUpdateEvent {
-    previous: CanvasElement;
-    current: CanvasElement;
-}
-interface ElementStoreEvents {
-    add: CanvasElement;
-    remove: CanvasElement;
-    update: ElementUpdateEvent;
-    clear: null;
-}
-declare class ElementStore {
-    private elements;
-    private bus;
-    get count(): number;
-    getAll(): CanvasElement[];
-    getById(id: string): CanvasElement | undefined;
-    getElementsByType<T extends ElementType>(type: T): Extract<CanvasElement, {
-        type: T;
-    }>[];
-    add(element: CanvasElement): void;
-    update(id: string, partial: Partial<CanvasElement>): void;
-    remove(id: string): void;
-    clear(): void;
-    snapshot(): CanvasElement[];
-    loadSnapshot(elements: CanvasElement[]): void;
-    on<K extends keyof ElementStoreEvents>(event: K, listener: (data: ElementStoreEvents[K]) => void): () => void;
-}
-
 interface ToolContext {
     camera: Camera;
     store: ElementStore;
@@ -577,6 +599,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 };
+export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, 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

@@ -73,6 +73,34 @@ declare function exportState(elements: CanvasElement[], camera: {
 }): CanvasState;
 declare function parseState(json: string): CanvasState;
 
+interface ElementUpdateEvent {
+    previous: CanvasElement;
+    current: CanvasElement;
+}
+interface ElementStoreEvents {
+    add: CanvasElement;
+    remove: CanvasElement;
+    update: ElementUpdateEvent;
+    clear: null;
+}
+declare class ElementStore {
+    private elements;
+    private bus;
+    get count(): number;
+    getAll(): CanvasElement[];
+    getById(id: string): CanvasElement | undefined;
+    getElementsByType<T extends ElementType>(type: T): Extract<CanvasElement, {
+        type: T;
+    }>[];
+    add(element: CanvasElement): void;
+    update(id: string, partial: Partial<CanvasElement>): void;
+    remove(id: string): void;
+    clear(): void;
+    snapshot(): CanvasElement[];
+    loadSnapshot(elements: CanvasElement[]): void;
+    on<K extends keyof ElementStoreEvents>(event: K, listener: (data: ElementStoreEvents[K]) => void): () => void;
+}
+
 interface CameraOptions {
     minZoom?: number;
     maxZoom?: number;
@@ -98,6 +126,27 @@ declare class Camera {
     private notifyChange;
 }
 
+interface AutoSaveOptions {
+    key?: string;
+    debounceMs?: number;
+}
+declare class AutoSave {
+    private readonly store;
+    private readonly camera;
+    private readonly key;
+    private readonly debounceMs;
+    private timerId;
+    private unsubscribers;
+    constructor(store: ElementStore, camera: Camera, options?: AutoSaveOptions);
+    start(): void;
+    stop(): void;
+    load(): CanvasState | null;
+    clear(): void;
+    private scheduleSave;
+    private cancelPending;
+    private save;
+}
+
 type BackgroundPattern = 'dots' | 'grid' | 'none';
 interface BackgroundOptions {
     pattern?: BackgroundPattern;
@@ -114,38 +163,11 @@ declare class Background {
     private readonly lineWidth;
     constructor(options?: BackgroundOptions);
     render(ctx: CanvasRenderingContext2D, camera: Camera): void;
+    private adaptSpacing;
     private renderDots;
     private renderGrid;
 }
 
-interface ElementUpdateEvent {
-    previous: CanvasElement;
-    current: CanvasElement;
-}
-interface ElementStoreEvents {
-    add: CanvasElement;
-    remove: CanvasElement;
-    update: ElementUpdateEvent;
-    clear: null;
-}
-declare class ElementStore {
-    private elements;
-    private bus;
-    get count(): number;
-    getAll(): CanvasElement[];
-    getById(id: string): CanvasElement | undefined;
-    getElementsByType<T extends ElementType>(type: T): Extract<CanvasElement, {
-        type: T;
-    }>[];
-    add(element: CanvasElement): void;
-    update(id: string, partial: Partial<CanvasElement>): void;
-    remove(id: string): void;
-    clear(): void;
-    snapshot(): CanvasElement[];
-    loadSnapshot(elements: CanvasElement[]): void;
-    on<K extends keyof ElementStoreEvents>(event: K, listener: (data: ElementStoreEvents[K]) => void): () => void;
-}
-
 interface ToolContext {
     camera: Camera;
     store: ElementStore;
@@ -577,6 +599,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 };
+export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, 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

@@ -91,6 +91,65 @@ function migrateElement(obj) {
   }
 }
 
+// src/core/auto-save.ts
+var DEFAULT_KEY = "fieldnotes-autosave";
+var DEFAULT_DEBOUNCE_MS = 1e3;
+var AutoSave = class {
+  constructor(store, camera, options = {}) {
+    this.store = store;
+    this.camera = camera;
+    this.key = options.key ?? DEFAULT_KEY;
+    this.debounceMs = options.debounceMs ?? DEFAULT_DEBOUNCE_MS;
+  }
+  key;
+  debounceMs;
+  timerId = null;
+  unsubscribers = [];
+  start() {
+    const schedule = () => this.scheduleSave();
+    this.unsubscribers = [
+      this.store.on("add", schedule),
+      this.store.on("remove", schedule),
+      this.store.on("update", schedule),
+      this.camera.onChange(schedule)
+    ];
+  }
+  stop() {
+    this.cancelPending();
+    this.unsubscribers.forEach((fn) => fn());
+    this.unsubscribers = [];
+  }
+  load() {
+    if (typeof localStorage === "undefined") return null;
+    const json = localStorage.getItem(this.key);
+    if (!json) return null;
+    try {
+      return parseState(json);
+    } catch {
+      return null;
+    }
+  }
+  clear() {
+    if (typeof localStorage === "undefined") return;
+    localStorage.removeItem(this.key);
+  }
+  scheduleSave() {
+    this.cancelPending();
+    this.timerId = setTimeout(() => this.save(), this.debounceMs);
+  }
+  cancelPending() {
+    if (this.timerId !== null) {
+      clearTimeout(this.timerId);
+      this.timerId = null;
+    }
+  }
+  save() {
+    if (typeof localStorage === "undefined") return;
+    const state = exportState(this.store.snapshot(), this.camera);
+    localStorage.setItem(this.key, JSON.stringify(state));
+  }
+};
+
 // src/canvas/camera.ts
 var DEFAULT_MIN_ZOOM = 0.1;
 var DEFAULT_MAX_ZOOM = 10;
@@ -158,6 +217,7 @@ var Camera = class {
 };
 
 // src/canvas/background.ts
+var MIN_PATTERN_SPACING = 16;
 var DEFAULTS = {
   pattern: "dots",
   spacing: 24,
@@ -193,8 +253,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 +276,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);
@@ -2150,10 +2217,11 @@ var ImageTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.1.0";
+var VERSION = "0.1.2";
 export {
   AddElementCommand,
   ArrowTool,
+  AutoSave,
   Background,
   BatchCommand,
   Camera,