@fieldnotes/core 0.4.0 → 0.5.0

package/dist/index.d.cts

@@ -43,6 +43,7 @@ interface NoteElement extends BaseElement {
     size: Size;
     text: string;
     backgroundColor: string;
+    textColor: string;
 }
 interface Binding {
     elementId: string;
@@ -100,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;
@@ -202,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;
@@ -352,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;
@@ -455,6 +464,7 @@ interface NoteInput extends BaseDefaults {
     size?: Size;
     text?: string;
     backgroundColor?: string;
+    textColor?: string;
 }
 interface ArrowInput extends BaseDefaults {
     from: Point;
@@ -610,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;
@@ -654,11 +665,13 @@ declare class ArrowTool implements Tool {
 
 interface NoteToolOptions {
     backgroundColor?: string;
+    textColor?: string;
     size?: Size;
 }
 declare class NoteTool implements Tool {
     readonly name = "note";
     private backgroundColor;
+    private textColor;
     private size;
     constructor(options?: NoteToolOptions);
     setOptions(options: NoteToolOptions): void;
@@ -725,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.0";
+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

@@ -43,6 +43,7 @@ interface NoteElement extends BaseElement {
     size: Size;
     text: string;
     backgroundColor: string;
+    textColor: string;
 }
 interface Binding {
     elementId: string;
@@ -100,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;
@@ -202,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;
@@ -352,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;
@@ -455,6 +464,7 @@ interface NoteInput extends BaseDefaults {
     size?: Size;
     text?: string;
     backgroundColor?: string;
+    textColor?: string;
 }
 interface ArrowInput extends BaseDefaults {
     from: Point;
@@ -610,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;
@@ -654,11 +665,13 @@ declare class ArrowTool implements Tool {
 
 interface NoteToolOptions {
     backgroundColor?: string;
+    textColor?: string;
     size?: Size;
 }
 declare class NoteTool implements Tool {
     readonly name = "note";
     private backgroundColor;
+    private textColor;
     private size;
     constructor(options?: NoteToolOptions);
     setOptions(options: NoteToolOptions): void;
@@ -725,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.0";
+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

@@ -114,6 +114,17 @@ function migrateElement(obj) {
   if (obj["type"] === "shape" && typeof obj["shape"] !== "string") {
     obj["shape"] = "rectangle";
   }
+  if (obj["type"] === "note" && typeof obj["textColor"] !== "string") {
+    obj["textColor"] = "#000000";
+  }
+}
+
+// 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
@@ -1421,7 +1432,8 @@ function createNote(input) {
     locked: input.locked ?? false,
     size: input.size ?? { w: 200, h: 100 },
     text: input.text ?? "",
-    backgroundColor: input.backgroundColor ?? "#ffeb3b"
+    backgroundColor: input.backgroundColor ?? "#ffeb3b",
+    textColor: input.textColor ?? "#000000"
   };
 }
 function createArrow(input) {
@@ -1497,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();
@@ -1519,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,
@@ -1564,6 +1579,8 @@ var Viewport = class {
   toolContext;
   resizeObserver = null;
   animFrameId = 0;
+  _snapToGrid = false;
+  _gridSize;
   needsRender = true;
   domNodes = /* @__PURE__ */ new Map();
   htmlContent = /* @__PURE__ */ new Map();
@@ -1571,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;
   }
@@ -1820,6 +1844,7 @@ var Viewport = class {
         node.dataset["initialized"] = "true";
         Object.assign(node.style, {
           backgroundColor: element.backgroundColor,
+          color: element.textColor,
           padding: "8px",
           borderRadius: "4px",
           boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
@@ -1841,6 +1866,7 @@ var Viewport = class {
           node.textContent = element.text || "";
         }
         node.style.backgroundColor = element.backgroundColor;
+        node.style.color = element.textColor;
       }
     }
     if (element.type === "image") {
@@ -2317,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) {
@@ -2373,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;
@@ -2724,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;
     }
@@ -2741,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();
@@ -2819,13 +2849,16 @@ var ArrowTool = class {
 var NoteTool = class {
   name = "note";
   backgroundColor;
+  textColor;
   size;
   constructor(options = {}) {
     this.backgroundColor = options.backgroundColor ?? "#ffeb3b";
+    this.textColor = options.textColor ?? "#000000";
     this.size = options.size ?? { w: 200, h: 100 };
   }
   setOptions(options) {
     if (options.backgroundColor !== void 0) this.backgroundColor = options.backgroundColor;
+    if (options.textColor !== void 0) this.textColor = options.textColor;
     if (options.size !== void 0) this.size = options.size;
   }
   onPointerDown(_state, _ctx) {
@@ -2833,11 +2866,15 @@ 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 },
-      backgroundColor: this.backgroundColor
+      backgroundColor: this.backgroundColor,
+      textColor: this.textColor
     });
     ctx.store.add(note);
     ctx.requestRender();
@@ -2873,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,
@@ -2955,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) {
@@ -3024,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;
   };
@@ -3033,7 +3076,7 @@ var ShapeTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.4.0";
+var VERSION = "0.5.0";
 export {
   AddElementCommand,
   ArrowTool,
@@ -3084,6 +3127,7 @@ export {
   isBindable,
   isNearBezier,
   parseState,
+  snapPoint,
   unbindArrow,
   updateBoundArrow
 };