@fieldnotes/core 0.40.4 → 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 };
@@ -2753,6 +2847,16 @@ function updateBoundArrow(arrow, store) {
 var ARROWHEAD_LENGTH = 12;
 var ARROWHEAD_ANGLE = Math.PI / 6;
 var ARROW_LABEL_FONT_SIZE = 14;
+function getArrowDashPattern(strokeStyle) {
+  switch (strokeStyle) {
+    case "dashed":
+      return [8, 4];
+    case "dotted":
+      return [2, 4];
+    default:
+      return [];
+  }
+}
 function renderArrow(ctx, arrow, store, labelEditingId) {
   const geometry = getArrowRenderGeometry(arrow);
   const { visualFrom, visualTo } = getVisualEndpoints(arrow, geometry, store);
@@ -2760,9 +2864,8 @@ function renderArrow(ctx, arrow, store, labelEditingId) {
   ctx.strokeStyle = arrow.color;
   ctx.lineWidth = arrow.width;
   ctx.lineCap = "round";
-  if (arrow.fromBinding || arrow.toBinding) {
-    ctx.setLineDash([8, 4]);
-  }
+  const dash = getArrowDashPattern(arrow.strokeStyle);
+  if (dash.length > 0) ctx.setLineDash(dash);
   ctx.beginPath();
   ctx.moveTo(visualFrom.x, visualFrom.y);
   if (arrow.bend !== 0) {
@@ -3682,6 +3785,7 @@ function createArrow(input) {
   if (input.fromBinding) result.fromBinding = input.fromBinding;
   if (input.toBinding) result.toBinding = input.toBinding;
   if (input.label !== void 0) result.label = input.label;
+  if (input.strokeStyle !== void 0) result.strokeStyle = input.strokeStyle;
   return result;
 }
 function createImage(input) {
@@ -5085,7 +5189,8 @@ function emitArrow(arrow, store) {
   } else {
     d = `M${n(from.x)} ${n(from.y)} L${n(to.x)} ${n(to.y)}`;
   }
-  const dash = arrow.fromBinding || arrow.toBinding ? ' stroke-dasharray="8 4"' : "";
+  const pattern = getArrowDashPattern(arrow.strokeStyle);
+  const dash = pattern.length > 0 ? ` stroke-dasharray="${pattern.join(" ")}"` : "";
   let out = `<path d="${d}" fill="none" stroke="${esc(arrow.color)}" stroke-width="${n(arrow.width)}" stroke-linecap="round"${dash} />`;
   const angle = geometry.tangentEnd;
   const p1x = to.x - ARROWHEAD_LENGTH2 * Math.cos(angle - ARROWHEAD_ANGLE2);
@@ -6289,7 +6394,7 @@ function translateElementPatch(el, dx, dy) {
 
 // src/elements/element-style.ts
 function styleToPatch(element, style) {
-  const { color, fillColor, strokeWidth, opacity, fontSize } = style;
+  const { color, fillColor, strokeWidth, opacity, fontSize, strokeStyle } = style;
   switch (element.type) {
     case "stroke":
       return {
@@ -6300,7 +6405,8 @@ function styleToPatch(element, style) {
     case "arrow":
       return {
         ...color !== void 0 ? { color } : {},
-        ...strokeWidth !== void 0 ? { width: strokeWidth } : {}
+        ...strokeWidth !== void 0 ? { width: strokeWidth } : {},
+        ...strokeStyle !== void 0 ? { strokeStyle } : {}
       };
     case "shape":
       return {
@@ -6341,7 +6447,11 @@ function getElementStyle(element) {
     case "stroke":
       return { color: element.color, strokeWidth: element.width, opacity: element.opacity };
     case "arrow":
-      return { color: element.color, strokeWidth: element.width };
+      return {
+        color: element.color,
+        strokeWidth: element.width,
+        ...element.strokeStyle !== void 0 ? { strokeStyle: element.strokeStyle } : {}
+      };
     case "shape":
       return {
         color: element.strokeColor,
@@ -6415,6 +6525,8 @@ var SelectionOps = class {
     if (opacity !== void 0) result.opacity = opacity;
     const fontSize = sharedValue(styles.map((s) => s.fontSize));
     if (fontSize !== void 0) result.fontSize = fontSize;
+    const strokeStyle = sharedValue(styles.map((s) => s.strokeStyle));
+    if (strokeStyle !== void 0) result.strokeStyle = strokeStyle;
     return result;
   }
   applyStyle(style) {
@@ -6865,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({
@@ -8832,6 +8945,7 @@ var ArrowTool = class {
   end = { x: 0, y: 0 };
   color;
   width;
+  strokeStyle;
   fromBinding;
   fromTarget = null;
   toTarget = null;
@@ -8839,9 +8953,10 @@ var ArrowTool = class {
   constructor(options = {}) {
     this.color = options.color ?? "#000000";
     this.width = options.width ?? 2;
+    this.strokeStyle = options.strokeStyle ?? "solid";
   }
   getOptions() {
-    return { color: this.color, width: this.width };
+    return { color: this.color, width: this.width, strokeStyle: this.strokeStyle };
   }
   onOptionsChange(listener) {
     this.optionListeners.add(listener);
@@ -8850,6 +8965,7 @@ var ArrowTool = class {
   setOptions(options) {
     if (options.color !== void 0) this.color = options.color;
     if (options.width !== void 0) this.width = options.width;
+    if (options.strokeStyle !== void 0) this.strokeStyle = options.strokeStyle;
     this.notifyOptionsChange();
   }
   notifyOptionsChange() {
@@ -8909,6 +9025,7 @@ var ArrowTool = class {
       position: this.start,
       color: this.color,
       width: this.width,
+      strokeStyle: this.strokeStyle,
       fromBinding: this.fromBinding,
       toBinding: this.toTarget ? { elementId: this.toTarget.id } : void 0,
       layerId: ctx.activeLayerId ?? ""
@@ -9776,7 +9893,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.40.4";
+var VERSION = "0.42.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,