@fieldnotes/core 0.41.0 → 0.42.0

package/dist/index.d.cts

@@ -469,6 +469,8 @@ interface ViewportOptions {
     panBufferMargin?: number;
     /** Enable the built-in context menu. Default `true`. */
     contextMenu?: boolean;
+    /** Coast (inertial glide) after a pan flick. Default `true`. */
+    panInertia?: boolean;
 }
 declare class Viewport {
     private readonly container;
@@ -1055,6 +1057,6 @@ declare class LaserTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.41.0";
+declare const VERSION = "0.42.0";
 
 export { type ActiveFormats, type AlignEdge, type ArrowElement, type ArrowStrokeStyle, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, type DistributeAxis, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, LaserTool, type LaserToolOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, exportSvg, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };

package/dist/index.d.ts

@@ -469,6 +469,8 @@ interface ViewportOptions {
     panBufferMargin?: number;
     /** Enable the built-in context menu. Default `true`. */
     contextMenu?: boolean;
+    /** Coast (inertial glide) after a pan flick. Default `true`. */
+    panInertia?: boolean;
 }
 declare class Viewport {
     private readonly container;
@@ -1055,6 +1057,6 @@ declare class LaserTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.41.0";
+declare const VERSION = "0.42.0";
 
 export { type ActiveFormats, type AlignEdge, type ArrowElement, type ArrowStrokeStyle, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, type DistributeAxis, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, LaserTool, type LaserToolOptions, type Layer, LayerManager, MeasureTool, type MeasureToolOptions, type Measurement, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, exportSvg, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };

package/dist/index.js

@@ -1471,6 +1471,81 @@ var KeyboardHandler = class {
   }
 };
 
+// src/canvas/pan-inertia.ts
+var VELOCITY_WINDOW_MS = 60;
+var FRICTION = 0.92;
+var MIN_START_SPEED = 2;
+var MIN_STOP_SPEED = 0.3;
+var PanInertia = class {
+  constructor(deps) {
+    this.deps = deps;
+  }
+  samples = [];
+  vx = 0;
+  vy = 0;
+  rafId = null;
+  sample(dx, dy) {
+    const t = this.deps.now();
+    this.samples.push({ dx, dy, t });
+    this.prune(t);
+  }
+  release() {
+    if (!this.deps.enabled()) {
+      this.reset();
+      return;
+    }
+    const t = this.deps.now();
+    this.prune(t);
+    const recent = this.samples;
+    if (recent.length === 0) {
+      this.reset();
+      return;
+    }
+    let sx = 0;
+    let sy = 0;
+    for (const s of recent) {
+      sx += s.dx;
+      sy += s.dy;
+    }
+    this.vx = sx / recent.length;
+    this.vy = sy / recent.length;
+    this.samples = [];
+    if (Math.hypot(this.vx, this.vy) < MIN_START_SPEED) {
+      this.vx = 0;
+      this.vy = 0;
+      return;
+    }
+    this.rafId = this.deps.requestFrame(this.step);
+  }
+  cancel() {
+    this.reset();
+  }
+  step = () => {
+    if (this.rafId === null) return;
+    this.deps.pan(this.vx, this.vy);
+    this.vx *= FRICTION;
+    this.vy *= FRICTION;
+    if (Math.hypot(this.vx, this.vy) >= MIN_STOP_SPEED) {
+      this.rafId = this.deps.requestFrame(this.step);
+    } else {
+      this.reset();
+    }
+  };
+  prune(now) {
+    const cutoff = now - VELOCITY_WINDOW_MS;
+    this.samples = this.samples.filter((s) => s.t >= cutoff);
+  }
+  reset() {
+    if (this.rafId !== null) {
+      this.deps.cancelFrame(this.rafId);
+      this.rafId = null;
+    }
+    this.samples = [];
+    this.vx = 0;
+    this.vy = 0;
+  }
+};
+
 // src/canvas/input-handler.ts
 var ZOOM_SENSITIVITY = 1e-3;
 var MIDDLE_BUTTON = 1;
@@ -1496,6 +1571,16 @@ var InputHandler = class {
       getLastPointerWorld: () => this.lastPointerWorld()
     });
     this.openContextMenu = options.openContextMenu;
+    this.panInertiaEnabled = options.panInertia ?? true;
+    this.panInertia = new PanInertia({
+      pan: (dx, dy) => this.camera.pan(dx, dy),
+      now: () => typeof performance !== "undefined" ? performance.now() : Date.now(),
+      requestFrame: (cb) => typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame(cb) : 0,
+      cancelFrame: (id) => {
+        if (typeof cancelAnimationFrame !== "undefined") cancelAnimationFrame(id);
+      },
+      enabled: () => this.panInertiaEnabled
+    });
     this.scope = options.shortcuts?.scope ?? "focus";
     this.keyboard = new KeyboardHandler({
       element: this.element,
@@ -1545,6 +1630,8 @@ var InputHandler = class {
   keyboard;
   scope;
   openContextMenu;
+  panInertia;
+  panInertiaEnabled;
   setToolManager(toolManager, toolContext) {
     this.toolManager = toolManager;
     this.toolContext = toolContext;
@@ -1556,6 +1643,7 @@ var InputHandler = class {
     return this.keyboard.shortcuts;
   }
   destroy() {
+    this.panInertia.cancel();
     this.actions.dispose();
     this.abortController.abort();
     this.inputFilter.reset();
@@ -1579,6 +1667,7 @@ var InputHandler = class {
   }
   onWheel = (e) => {
     e.preventDefault();
+    this.panInertia.cancel();
     const rect = this.element.getBoundingClientRect();
     const zoomFactor = 1 - e.deltaY * ZOOM_SENSITIVITY;
     const newZoom = this.camera.zoom * zoomFactor;
@@ -1588,6 +1677,7 @@ var InputHandler = class {
     });
   };
   onPointerDown = (e) => {
+    this.panInertia.cancel();
     this.focusSelf();
     this.activePointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
     this.element.setPointerCapture?.(e.pointerId);
@@ -1628,6 +1718,7 @@ var InputHandler = class {
       const dy = e.clientY - this.lastPointer.y;
       this.lastPointer = { x: e.clientX, y: e.clientY };
       this.camera.pan(dx, dy);
+      this.panInertia.sample(dx, dy);
       return;
     }
     if (e.pointerType === "pen" && !this.activePointers.has(e.pointerId)) {
@@ -1658,6 +1749,7 @@ var InputHandler = class {
     }
     if (this.isPanning && this.activePointers.size === 0) {
       this.isPanning = false;
+      this.panInertia.release();
     }
     const upResult = this.inputFilter.filterUp(e);
     if (this.isToolActive) {
@@ -1678,6 +1770,7 @@ var InputHandler = class {
     return this.actions.hasClipboard();
   }
   startPinch() {
+    this.panInertia.cancel();
     this.cancelLongPress();
     this.inputFilter.reset();
     this.deferredDown = null;
@@ -1699,6 +1792,7 @@ var InputHandler = class {
     const dx = center2.x - this.lastPointer.x;
     const dy = center2.y - this.lastPointer.y;
     this.camera.pan(dx, dy);
+    this.panInertia.sample(dx, dy);
     this.lastPinchDistance = dist;
     this.lastPinchCenter = center2;
     this.lastPointer = { ...center2 };
@@ -6800,7 +6894,8 @@ var Viewport = class {
       shortcuts: options.shortcuts,
       addImage: (src, world) => this.addImage(src, world),
       getCenteredWorld: () => this.centeredPosition({ w: 300, h: 200 }),
-      onPaste: options.onPaste
+      onPaste: options.onPaste,
+      panInertia: options.panInertia
     });
     if (options.contextMenu !== false) {
       this.contextMenu = new ContextMenu({
@@ -9715,7 +9810,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.41.0";
+var VERSION = "0.42.0";
 export {
   ArrowTool,
   AutoSave,