@fieldnotes/core 0.41.0 → 0.42.0

package/dist/index.cjs

@@ -1554,6 +1554,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;
@@ -1579,6 +1654,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,
@@ -1628,6 +1713,8 @@ var InputHandler = class {
   keyboard;
   scope;
   openContextMenu;
+  panInertia;
+  panInertiaEnabled;
   setToolManager(toolManager, toolContext) {
     this.toolManager = toolManager;
     this.toolContext = toolContext;
@@ -1639,6 +1726,7 @@ var InputHandler = class {
     return this.keyboard.shortcuts;
   }
   destroy() {
+    this.panInertia.cancel();
     this.actions.dispose();
     this.abortController.abort();
     this.inputFilter.reset();
@@ -1662,6 +1750,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;
@@ -1671,6 +1760,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);
@@ -1711,6 +1801,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)) {
@@ -1741,6 +1832,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) {
@@ -1761,6 +1853,7 @@ var InputHandler = class {
     return this.actions.hasClipboard();
   }
   startPinch() {
+    this.panInertia.cancel();
     this.cancelLongPress();
     this.inputFilter.reset();
     this.deferredDown = null;
@@ -1782,6 +1875,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 };
@@ -6883,7 +6977,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({
@@ -9798,7 +9893,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.41.0";
+var VERSION = "0.42.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,