@fieldnotes/core 0.41.0 → 0.43.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 };
@@ -4266,6 +4360,135 @@ var ContextMenu = class {
   }
 };
 
+// src/canvas/minimap-transform.ts
+function unionBounds(a, b) {
+  const minX = Math.min(a.x, b.x);
+  const minY = Math.min(a.y, b.y);
+  const maxX = Math.max(a.x + a.w, b.x + b.w);
+  const maxY = Math.max(a.y + a.h, b.y + b.h);
+  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+}
+function computeMinimapTransform(mapping, miniW, miniH, padding) {
+  const availW = Math.max(1, miniW - 2 * padding);
+  const availH = Math.max(1, miniH - 2 * padding);
+  const w = Math.max(mapping.w, 1);
+  const h = Math.max(mapping.h, 1);
+  const scale = Math.min(availW / w, availH / h);
+  const offsetX = (miniW - mapping.w * scale) / 2 - mapping.x * scale;
+  const offsetY = (miniH - mapping.h * scale) / 2 - mapping.y * scale;
+  return { scale, offsetX, offsetY };
+}
+function worldToMini(t, p) {
+  return { x: p.x * t.scale + t.offsetX, y: p.y * t.scale + t.offsetY };
+}
+function miniToWorld(t, p) {
+  return { x: (p.x - t.offsetX) / t.scale, y: (p.y - t.offsetY) / t.scale };
+}
+
+// src/canvas/minimap.ts
+var WIDTH = 200;
+var HEIGHT = 140;
+var MARGIN = 16;
+var PADDING = 8;
+var NEUTRAL = "rgba(100,116,139,0.6)";
+var VIEWPORT_STROKE = "#3b82f6";
+function elementColor(el) {
+  return "color" in el && typeof el.color === "string" ? el.color : NEUTRAL;
+}
+var Minimap = class {
+  constructor(deps) {
+    this.deps = deps;
+    const canvas = document.createElement("canvas");
+    canvas.width = WIDTH;
+    canvas.height = HEIGHT;
+    Object.assign(canvas.style, {
+      position: "absolute",
+      right: `${MARGIN}px`,
+      bottom: `${MARGIN}px`,
+      width: `${WIDTH}px`,
+      height: `${HEIGHT}px`,
+      background: "rgba(255,255,255,0.85)",
+      border: "1px solid rgba(0,0,0,0.15)",
+      borderRadius: "4px",
+      touchAction: "none",
+      cursor: "pointer",
+      zIndex: "10"
+    });
+    canvas.addEventListener("pointerdown", this.onPointerDown);
+    canvas.addEventListener("pointermove", this.onPointerMove);
+    canvas.addEventListener("pointerup", this.onPointerUp);
+    this.deps.container.appendChild(canvas);
+    this.canvas = canvas;
+  }
+  canvas;
+  rafId = null;
+  dragging = false;
+  scheduleDraw() {
+    if (this.rafId !== null) return;
+    this.rafId = this.deps.requestFrame(this.draw);
+  }
+  destroy() {
+    if (this.rafId !== null) {
+      this.deps.cancelFrame(this.rafId);
+      this.rafId = null;
+    }
+    this.canvas.removeEventListener("pointerdown", this.onPointerDown);
+    this.canvas.removeEventListener("pointermove", this.onPointerMove);
+    this.canvas.removeEventListener("pointerup", this.onPointerUp);
+    this.canvas.remove();
+  }
+  currentTransform() {
+    const viewport = this.deps.getViewportRect();
+    const content = this.deps.getContentBounds();
+    const mapping = content ? unionBounds(content, viewport) : viewport;
+    return computeMinimapTransform(mapping, WIDTH, HEIGHT, PADDING);
+  }
+  draw = () => {
+    this.rafId = null;
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) return;
+    const t = this.currentTransform();
+    const viewport = this.deps.getViewportRect();
+    ctx.clearRect(0, 0, WIDTH, HEIGHT);
+    for (const el of this.deps.getElements()) {
+      const b = getElementBounds(el);
+      if (!b) continue;
+      const tl = worldToMini(t, { x: b.x, y: b.y });
+      ctx.fillStyle = elementColor(el);
+      ctx.fillRect(tl.x, tl.y, Math.max(1, b.w * t.scale), Math.max(1, b.h * t.scale));
+    }
+    const vtl = worldToMini(t, { x: viewport.x, y: viewport.y });
+    ctx.strokeStyle = VIEWPORT_STROKE;
+    ctx.lineWidth = 1.5;
+    ctx.strokeRect(vtl.x, vtl.y, viewport.w * t.scale, viewport.h * t.scale);
+  };
+  navigateFromEvent(e) {
+    const rect = this.canvas.getBoundingClientRect();
+    const point = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    const world = miniToWorld(this.currentTransform(), point);
+    this.deps.navigateTo(world);
+  }
+  onPointerDown = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    this.dragging = true;
+    this.canvas.setPointerCapture?.(e.pointerId);
+    this.navigateFromEvent(e);
+  };
+  onPointerMove = (e) => {
+    if (!this.dragging) return;
+    e.stopPropagation();
+    this.navigateFromEvent(e);
+  };
+  onPointerUp = (e) => {
+    this.dragging = false;
+    try {
+      this.canvas.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+  };
+};
+
 // src/canvas/viewport-dom.ts
 function createWrapper() {
   const el = document.createElement("div");
@@ -6391,7 +6614,7 @@ function getElementStyle(element) {
 }
 
 // src/canvas/selection-ops.ts
-function unionBounds(list) {
+function unionBounds2(list) {
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   for (const b of list) {
     minX = Math.min(minX, b.x);
@@ -6486,7 +6709,7 @@ var SelectionOps = class {
   align(edge) {
     const bounded = this.boundedSelection();
     if (bounded.length < 2) return;
-    const B = unionBounds(bounded.map((e) => e.bounds));
+    const B = unionBounds2(bounded.map((e) => e.bounds));
     this.deps.recorder.begin();
     const moved = [];
     for (const { id, el, bounds: b } of bounded) {
@@ -6883,7 +7106,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({
@@ -6892,6 +7116,27 @@ var Viewport = class {
       });
     }
     this.unsubToolChange = this.toolManager.onChange(() => this.contextMenu?.close());
+    if (options.minimap) {
+      const visibleEls = () => this.store.getAll().filter((el) => this.layerManager.isLayerVisible(el.layerId));
+      this.minimap = new Minimap({
+        container: this.wrapper,
+        getElements: visibleEls,
+        getContentBounds: () => getElementsBoundingBox(visibleEls()),
+        getViewportRect: () => this.camera.getVisibleRect(this.canvasEl.clientWidth, this.canvasEl.clientHeight),
+        navigateTo: (w) => {
+          const z = this.camera.zoom;
+          this.camera.moveTo(
+            this.canvasEl.clientWidth / 2 - w.x * z,
+            this.canvasEl.clientHeight / 2 - w.y * z
+          );
+        },
+        requestFrame: (cb) => typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame(cb) : 0,
+        cancelFrame: (id) => {
+          if (typeof cancelAnimationFrame !== "undefined") cancelAnimationFrame(id);
+        }
+      });
+      this.minimap.scheduleDraw();
+    }
     this.domNodeManager = new DomNodeManager({
       domLayer: this.domLayer,
       onEditRequest: (id) => this.interactions.startEditingElement(id),
@@ -6924,6 +7169,7 @@ var Viewport = class {
       this.applyCameraTransform();
       this.noteEditor.updateToolbarPosition();
       this.contextMenu?.close();
+      this.minimap?.scheduleDraw();
       this.requestRender();
     });
     this.gridController = new GridController({
@@ -6938,6 +7184,7 @@ var Viewport = class {
       this.store.on("add", (el) => {
         if (el.type === "grid") this.gridController.syncContext();
         this.renderLoop.markLayerDirty(el.layerId);
+        this.minimap?.scheduleDraw();
         this.requestRender();
       }),
       this.store.on("remove", (el) => {
@@ -6945,6 +7192,7 @@ var Viewport = class {
         this.unbindArrowsFrom(el);
         this.domNodeManager.removeDomNode(el.id);
         this.renderLoop.markLayerDirty(el.layerId);
+        this.minimap?.scheduleDraw();
         this.requestRender();
       }),
       this.store.on("update", ({ previous, current }) => {
@@ -6953,17 +7201,20 @@ var Viewport = class {
         if (previous.layerId !== current.layerId) {
           this.renderLoop.markLayerDirty(previous.layerId);
         }
+        this.minimap?.scheduleDraw();
         this.requestRender();
       }),
       this.store.on("clear", () => {
         this.domNodeManager.clearDomNodes();
         this.renderLoop.markAllLayersDirty();
         this.gridController.syncContext();
+        this.minimap?.scheduleDraw();
         this.requestRender();
       })
     ];
     this.layerManager.on("change", () => {
       this.toolContext.activeLayerId = this.layerManager.activeLayerId;
+      this.minimap?.scheduleDraw();
       this.requestRender();
     });
     this.interactions = new ViewportInteractions({
@@ -7023,6 +7274,7 @@ var Viewport = class {
   gridController;
   interactions;
   contextMenu = null;
+  minimap = null;
   htmlRenderers = /* @__PURE__ */ new Map();
   get ctx() {
     return this.canvasEl.getContext("2d");
@@ -7296,6 +7548,7 @@ var Viewport = class {
     this.arrowLabelEditor.cancel();
     this.historyRecorder.destroy();
     this.contextMenu?.dispose();
+    this.minimap?.destroy();
     this.wrapper.removeEventListener("pointerdown", this.interactions.onTapDown);
     this.wrapper.removeEventListener("pointerup", this.interactions.onDoubleTap);
     this.wrapper.removeEventListener("dragover", this.interactions.onDragOver);
@@ -9798,7 +10051,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.41.0";
+var VERSION = "0.43.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,