@fieldnotes/core 0.10.0 → 0.11.1

package/dist/index.cjs

@@ -398,7 +398,13 @@ function exportState(elements, camera, layers = []) {
       position: { ...camera.position },
       zoom: camera.zoom
     },
-    elements: elements.map((el) => structuredClone(el)),
+    elements: elements.map((el) => {
+      const clone = structuredClone(el);
+      if (clone.type === "arrow") {
+        delete clone.cachedControlPoint;
+      }
+      return clone;
+    }),
     layers: layers.map((l) => ({ ...l }))
   };
 }
@@ -861,6 +867,7 @@ var InputHandler = class {
   historyRecorder;
   historyStack;
   isToolActive = false;
+  lastPointerEvent = null;
   abortController = new AbortController();
   setToolManager(toolManager, toolContext) {
     this.toolManager = toolManager;
@@ -868,6 +875,7 @@ var InputHandler = class {
   }
   destroy() {
     this.abortController.abort();
+    this.lastPointerEvent = null;
   }
   bind() {
     const opts = { signal: this.abortController.signal };
@@ -903,11 +911,12 @@ var InputHandler = class {
       this.lastPointer = { x: e.clientX, y: e.clientY };
       return;
     }
-    if (this.activePointers.size === 1 && e.button === 0) {
+    if (this.activePointers.size === 1 && (e.button === 0 || e.pointerType === "touch" || e.pointerType === "pen")) {
       this.dispatchToolDown(e);
     }
   };
   onPointerMove = (e) => {
+    this.lastPointerEvent = e;
     if (this.activePointers.has(e.pointerId)) {
       this.activePointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
     }
@@ -929,6 +938,10 @@ var InputHandler = class {
     }
   };
   onPointerUp = (e) => {
+    try {
+      this.element.releasePointerCapture(e.pointerId);
+    } catch {
+    }
     this.activePointers.delete(e.pointerId);
     if (this.activePointers.size < 2) {
       this.lastPinchDistance = 0;
@@ -961,6 +974,13 @@ var InputHandler = class {
   onKeyUp = (e) => {
     if (e.key === " ") {
       this.spaceHeld = false;
+      if (this.activePointers.size === 0) {
+        if (this.lastPointerEvent) {
+          this.dispatchToolHover(this.lastPointerEvent);
+        } else {
+          this.toolContext?.setCursor?.("default");
+        }
+      }
     }
   };
   startPinch() {
@@ -4288,6 +4308,7 @@ var Viewport = class {
   renderLoop;
   domNodeManager;
   interactMode;
+  gridChangeListeners = /* @__PURE__ */ new Set();
   get ctx() {
     return this.canvasEl.getContext("2d");
   }
@@ -4392,6 +4413,22 @@ var Viewport = class {
     this.historyRecorder.commit();
     this.requestRender();
   }
+  getGridInfo() {
+    const grid = this.store.getElementsByType("grid")[0];
+    if (!grid) return null;
+    return {
+      gridType: grid.gridType,
+      hexOrientation: grid.hexOrientation,
+      cellSize: grid.cellSize,
+      cellRadius: grid.gridType === "hex" ? grid.cellSize : grid.cellSize / 2
+    };
+  }
+  onGridChange(listener) {
+    this.gridChangeListeners.add(listener);
+    return () => {
+      this.gridChangeListeners.delete(listener);
+    };
+  }
   getRenderStats() {
     return this.renderLoop.getStats();
   }
@@ -4544,7 +4581,10 @@ var Viewport = class {
       position: "relative",
       width: "100%",
       height: "100%",
-      overflow: "hidden"
+      overflow: "hidden",
+      overscrollBehavior: "none",
+      userSelect: "none",
+      webkitUserSelect: "none"
     });
     return el;
   }
@@ -4592,6 +4632,13 @@ var Viewport = class {
       this.toolContext.gridType = void 0;
       this.toolContext.hexOrientation = void 0;
     }
+    this.notifyGridChangeListeners();
+  }
+  notifyGridChangeListeners() {
+    const info = this.getGridInfo();
+    for (const listener of this.gridChangeListeners) {
+      listener(info);
+    }
   }
   observeResize() {
     if (typeof ResizeObserver === "undefined") return;
@@ -6283,7 +6330,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.10.0";
+var VERSION = "0.11.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddElementCommand,

package/dist/index.d.cts

@@ -423,6 +423,7 @@ declare class InputHandler {
     private historyRecorder;
     private historyStack;
     private isToolActive;
+    private lastPointerEvent;
     private readonly abortController;
     constructor(element: HTMLElement, camera: Camera, options?: InputHandlerOptions);
     setToolManager(toolManager: ToolManager, toolContext: ToolContext): void;
@@ -489,6 +490,12 @@ interface RenderStatsSnapshot {
     frameCount: number;
 }
 
+interface GridInfo {
+    gridType: 'square' | 'hex';
+    hexOrientation: 'pointy' | 'flat';
+    cellSize: number;
+    cellRadius: number;
+}
 interface ViewportOptions {
     camera?: CameraOptions;
     background?: BackgroundOptions;
@@ -519,6 +526,7 @@ declare class Viewport {
     private readonly renderLoop;
     private readonly domNodeManager;
     private readonly interactMode;
+    private readonly gridChangeListeners;
     constructor(container: HTMLElement, options?: ViewportOptions);
     get ctx(): CanvasRenderingContext2D | null;
     get snapToGrid(): boolean;
@@ -555,6 +563,8 @@ declare class Viewport {
     }): string;
     updateGrid(updates: Partial<Pick<GridElement, 'gridType' | 'hexOrientation' | 'cellSize' | 'strokeColor' | 'strokeWidth' | 'opacity'>>): void;
     removeGrid(): void;
+    getGridInfo(): GridInfo | null;
+    onGridChange(listener: (info: GridInfo | null) => void): () => void;
     getRenderStats(): RenderStatsSnapshot;
     logPerformance(intervalMs?: number): () => void;
     destroy(): void;
@@ -572,6 +582,7 @@ declare class Viewport {
     private applyCameraTransform;
     private syncCanvasSize;
     private syncGridContext;
+    private notifyGridChangeListeners;
     private observeResize;
 }
 
@@ -1109,6 +1120,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.10.0";
+declare const VERSION = "0.11.0";
 
-export { type ActiveFormats, 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, DEFAULT_FONT_SIZE_PRESETS, DEFAULT_NOTE_FONT_SIZE, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type FontSizePreset, type GridElement, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, NoteEditor, type NoteEditorOptions, type NoteElement, NoteTool, type NoteToolOptions, NoteToolbar, 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 StyledRun, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, 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, createTemplate, createText, drawHexPath, exportImage, exportState, findBindTarget, findBoundArrows, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isBindable, isNearBezier, parseState, sanitizeNoteHtml, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, unbindArrow, updateBoundArrow };
+export { type ActiveFormats, 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, DEFAULT_FONT_SIZE_PRESETS, DEFAULT_NOTE_FONT_SIZE, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, NoteEditor, type NoteEditorOptions, type NoteElement, NoteTool, type NoteToolOptions, NoteToolbar, 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 StyledRun, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, 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, createTemplate, createText, drawHexPath, exportImage, exportState, findBindTarget, findBoundArrows, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isBindable, isNearBezier, parseState, sanitizeNoteHtml, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, unbindArrow, updateBoundArrow };

package/dist/index.d.ts

@@ -423,6 +423,7 @@ declare class InputHandler {
     private historyRecorder;
     private historyStack;
     private isToolActive;
+    private lastPointerEvent;
     private readonly abortController;
     constructor(element: HTMLElement, camera: Camera, options?: InputHandlerOptions);
     setToolManager(toolManager: ToolManager, toolContext: ToolContext): void;
@@ -489,6 +490,12 @@ interface RenderStatsSnapshot {
     frameCount: number;
 }
 
+interface GridInfo {
+    gridType: 'square' | 'hex';
+    hexOrientation: 'pointy' | 'flat';
+    cellSize: number;
+    cellRadius: number;
+}
 interface ViewportOptions {
     camera?: CameraOptions;
     background?: BackgroundOptions;
@@ -519,6 +526,7 @@ declare class Viewport {
     private readonly renderLoop;
     private readonly domNodeManager;
     private readonly interactMode;
+    private readonly gridChangeListeners;
     constructor(container: HTMLElement, options?: ViewportOptions);
     get ctx(): CanvasRenderingContext2D | null;
     get snapToGrid(): boolean;
@@ -555,6 +563,8 @@ declare class Viewport {
     }): string;
     updateGrid(updates: Partial<Pick<GridElement, 'gridType' | 'hexOrientation' | 'cellSize' | 'strokeColor' | 'strokeWidth' | 'opacity'>>): void;
     removeGrid(): void;
+    getGridInfo(): GridInfo | null;
+    onGridChange(listener: (info: GridInfo | null) => void): () => void;
     getRenderStats(): RenderStatsSnapshot;
     logPerformance(intervalMs?: number): () => void;
     destroy(): void;
@@ -572,6 +582,7 @@ declare class Viewport {
     private applyCameraTransform;
     private syncCanvasSize;
     private syncGridContext;
+    private notifyGridChangeListeners;
     private observeResize;
 }
 
@@ -1109,6 +1120,6 @@ declare class UpdateLayerCommand implements Command {
     undo(_store: ElementStore): void;
 }
 
-declare const VERSION = "0.10.0";
+declare const VERSION = "0.11.0";
 
-export { type ActiveFormats, 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, DEFAULT_FONT_SIZE_PRESETS, DEFAULT_NOTE_FONT_SIZE, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type FontSizePreset, type GridElement, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, NoteEditor, type NoteEditorOptions, type NoteElement, NoteTool, type NoteToolOptions, NoteToolbar, 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 StyledRun, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, 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, createTemplate, createText, drawHexPath, exportImage, exportState, findBindTarget, findBoundArrows, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isBindable, isNearBezier, parseState, sanitizeNoteHtml, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, unbindArrow, updateBoundArrow };
+export { type ActiveFormats, 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, DEFAULT_FONT_SIZE_PRESETS, DEFAULT_NOTE_FONT_SIZE, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, NoteEditor, type NoteEditorOptions, type NoteElement, NoteTool, type NoteToolOptions, NoteToolbar, 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 StyledRun, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, 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, createTemplate, createText, drawHexPath, exportImage, exportState, findBindTarget, findBoundArrows, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isBindable, isNearBezier, parseState, sanitizeNoteHtml, setFontSize, smartSnap, snapPoint, snapToHexCenter, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, unbindArrow, updateBoundArrow };

package/dist/index.js

@@ -292,7 +292,13 @@ function exportState(elements, camera, layers = []) {
       position: { ...camera.position },
       zoom: camera.zoom
     },
-    elements: elements.map((el) => structuredClone(el)),
+    elements: elements.map((el) => {
+      const clone = structuredClone(el);
+      if (clone.type === "arrow") {
+        delete clone.cachedControlPoint;
+      }
+      return clone;
+    }),
     layers: layers.map((l) => ({ ...l }))
   };
 }
@@ -755,6 +761,7 @@ var InputHandler = class {
   historyRecorder;
   historyStack;
   isToolActive = false;
+  lastPointerEvent = null;
   abortController = new AbortController();
   setToolManager(toolManager, toolContext) {
     this.toolManager = toolManager;
@@ -762,6 +769,7 @@ var InputHandler = class {
   }
   destroy() {
     this.abortController.abort();
+    this.lastPointerEvent = null;
   }
   bind() {
     const opts = { signal: this.abortController.signal };
@@ -797,11 +805,12 @@ var InputHandler = class {
       this.lastPointer = { x: e.clientX, y: e.clientY };
       return;
     }
-    if (this.activePointers.size === 1 && e.button === 0) {
+    if (this.activePointers.size === 1 && (e.button === 0 || e.pointerType === "touch" || e.pointerType === "pen")) {
       this.dispatchToolDown(e);
     }
   };
   onPointerMove = (e) => {
+    this.lastPointerEvent = e;
     if (this.activePointers.has(e.pointerId)) {
       this.activePointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
     }
@@ -823,6 +832,10 @@ var InputHandler = class {
     }
   };
   onPointerUp = (e) => {
+    try {
+      this.element.releasePointerCapture(e.pointerId);
+    } catch {
+    }
     this.activePointers.delete(e.pointerId);
     if (this.activePointers.size < 2) {
       this.lastPinchDistance = 0;
@@ -855,6 +868,13 @@ var InputHandler = class {
   onKeyUp = (e) => {
     if (e.key === " ") {
       this.spaceHeld = false;
+      if (this.activePointers.size === 0) {
+        if (this.lastPointerEvent) {
+          this.dispatchToolHover(this.lastPointerEvent);
+        } else {
+          this.toolContext?.setCursor?.("default");
+        }
+      }
     }
   };
   startPinch() {
@@ -4182,6 +4202,7 @@ var Viewport = class {
   renderLoop;
   domNodeManager;
   interactMode;
+  gridChangeListeners = /* @__PURE__ */ new Set();
   get ctx() {
     return this.canvasEl.getContext("2d");
   }
@@ -4286,6 +4307,22 @@ var Viewport = class {
     this.historyRecorder.commit();
     this.requestRender();
   }
+  getGridInfo() {
+    const grid = this.store.getElementsByType("grid")[0];
+    if (!grid) return null;
+    return {
+      gridType: grid.gridType,
+      hexOrientation: grid.hexOrientation,
+      cellSize: grid.cellSize,
+      cellRadius: grid.gridType === "hex" ? grid.cellSize : grid.cellSize / 2
+    };
+  }
+  onGridChange(listener) {
+    this.gridChangeListeners.add(listener);
+    return () => {
+      this.gridChangeListeners.delete(listener);
+    };
+  }
   getRenderStats() {
     return this.renderLoop.getStats();
   }
@@ -4438,7 +4475,10 @@ var Viewport = class {
       position: "relative",
       width: "100%",
       height: "100%",
-      overflow: "hidden"
+      overflow: "hidden",
+      overscrollBehavior: "none",
+      userSelect: "none",
+      webkitUserSelect: "none"
     });
     return el;
   }
@@ -4486,6 +4526,13 @@ var Viewport = class {
       this.toolContext.gridType = void 0;
       this.toolContext.hexOrientation = void 0;
     }
+    this.notifyGridChangeListeners();
+  }
+  notifyGridChangeListeners() {
+    const info = this.getGridInfo();
+    for (const listener of this.gridChangeListeners) {
+      listener(info);
+    }
   }
   observeResize() {
     if (typeof ResizeObserver === "undefined") return;
@@ -6177,7 +6224,7 @@ var UpdateLayerCommand = class {
 };
 
 // src/index.ts
-var VERSION = "0.10.0";
+var VERSION = "0.11.0";
 export {
   AddElementCommand,
   ArrowTool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fieldnotes/core",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "description": "Vanilla TypeScript infinite canvas engine",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -40,6 +40,7 @@
     "sdk"
   ],
   "devDependencies": {
+    "@playwright/test": "^1.60.0",
     "@vitest/coverage-v8": "^4.1.0",
     "jsdom": "^29.0.0",
     "tsup": "^8.5.1",
@@ -48,6 +49,10 @@
   "scripts": {
     "build": "tsup",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:all": "vitest run --coverage",
+    "e2e": "playwright test --config e2e/playwright.config.ts",
+    "e2e:update": "playwright test --config e2e/playwright.config.ts --update-snapshots"
   }
 }