ts-maps 0.3.6 → 0.3.7

package/dist/core-map/map/Map.d.ts

@@ -35,6 +35,9 @@ export declare interface MapOptions {
   theme?: 'light' | 'dark' | 'auto'
   style?: any
   zoomDelta?: number
+  wheelPxPerZoomLevel?: number
+  wheelSmoothing?: number
+  wheelDebounceTime?: number
   trackResize?: boolean
   [key: string]: any
 }

package/dist/core-map/map/handler/ScrollWheelZoomHandler.d.ts

@@ -1,12 +1,52 @@
 import { Handler } from '../../core/Handler';
+import type { LatLng } from '../../geo/LatLng';
 import type { Point } from '../../geometry/Point';
+/**
+ * Continuous scroll-wheel zoom.
+ *
+ * The previous implementation was Leaflet's: accumulate wheel delta, wait
+ * 40ms for the gesture to stop, then animate one discrete `setZoom` step. That
+ * is three separate problems stacked on each other — the map does not move
+ * while you are actually scrolling, it then moves in a jump you did not ask
+ * for, and a trackpad's continuous stream of small deltas is chopped into a
+ * sequence of those jumps. Next to Google Maps or Apple Maps it reads as
+ * broken rather than as slow.
+ *
+ * What every other slippy map does instead, and what this does:
+ *
+ *   - Wheel events push a TARGET zoom. They never animate anything themselves,
+ *     so a fast scroll and a slow one differ in how far they go, not in how
+ *     many animations they queue.
+ *   - A single rAF loop eases the live zoom toward that target and stops when
+ *     it arrives. Scrolling again just moves the target; the loop is already
+ *     running and simply keeps going. There is nothing to cancel and nothing
+ *     to queue.
+ *   - The point under the cursor stays under the cursor, recomputed every
+ *     frame from the anchor the gesture started at.
+ *
+ * ## Trackpads
+ *
+ * A pinch on a macOS trackpad arrives as a `wheel` event with `ctrlKey` set —
+ * the browser's way of reporting a zoom gesture, and nothing to do with the
+ * Control key. Those deltas are much finer than a mouse notch, so applying the
+ * mouse's px-per-level to them makes a pinch cover half the zoom range. They
+ * get their own scale, and no easing: a pinch is a direct manipulation, and
+ * anything that lags behind the fingers feels broken.
+ */
 export declare class ScrollWheelZoomHandler extends Handler {
-  _delta: number;
-  _startTime: number | null;
-  _timer?: ReturnType<typeof setTimeout>;
-  _lastMousePos?: Point;
+  _targetZoom: number | null;
+  _anchor?: Point;
+  _anchorLatLng?: LatLng;
+  _frame?: number;
+  _lastFrameTime: number;
+  _active: boolean;
   addHooks(): void;
   removeHooks(): void;
-  _onWheelScroll(e: any): void;
-  _performZoom(): void;
+  _onWheelScroll(e: WheelEvent): void;
+  _applyZoom(zoom: number): void;
+  _startFrames(): void;
+  _stopFrames(): void;
+  _tick(timestamp: number): void;
+  _scheduleSettle(): void;
+  _settle(): void;
 }

package/dist/index.js

@@ -23590,50 +23590,113 @@ init_DomEvent();
 init_Map();
 TsMap.mergeOptions({
   scrollWheelZoom: true,
-  wheelDebounceTime: 40,
-  wheelPxPerZoomLevel: 60
+  wheelPxPerZoomLevel: 60,
+  wheelSmoothing: 0.13,
+  wheelDebounceTime: 40
 });
 
 class ScrollWheelZoomHandler extends Handler {
-  _delta = 0;
-  _startTime = null;
   addHooks() {
     on(this._map._container, "wheel", this._onWheelScroll, this);
-    this._delta = 0;
+    this._targetZoom = null;
+    this._active = false;
+    this._lastFrameTime = 0;
   }
   removeHooks() {
     off(this._map._container, "wheel", this._onWheelScroll, this);
-    clearTimeout(this._timer);
+    this._stopFrames();
+    this._targetZoom = null;
+    this._active = false;
   }
   _onWheelScroll(e) {
+    const map = this._map;
     const delta = getWheelDelta(e);
-    const debounce = this._map.options.wheelDebounceTime;
-    this._delta += delta;
-    this._lastMousePos = this._map.pointerEventToContainerPoint(e);
-    if (!this._startTime)
-      this._startTime = Date.now();
-    const left = Math.max(debounce - (Date.now() - this._startTime), 0);
-    clearTimeout(this._timer);
-    this._timer = setTimeout(this._performZoom.bind(this), left);
     stop(e);
+    if (!delta)
+      return;
+    const pinch = e.ctrlKey === true;
+    const pxPerLevel = map.options.wheelPxPerZoomLevel;
+    const step = delta / (pinch ? pxPerLevel * 2 : pxPerLevel);
+    if (!this._active) {
+      this._anchor = map.pointerEventToContainerPoint(e);
+      this._anchorLatLng = map.containerPointToLatLng(this._anchor);
+      this._targetZoom = map.getZoom();
+      this._active = true;
+      map._stop();
+      map._moveStart(true, false);
+    }
+    this._targetZoom = map._limitZoom(this._targetZoom + step);
+    if (pinch) {
+      this._applyZoom(this._targetZoom);
+      this._scheduleSettle();
+      return;
+    }
+    if (this._frame === undefined)
+      this._startFrames();
   }
-  _performZoom() {
+  _applyZoom(zoom) {
     const map = this._map;
-    const zoom = map.getZoom();
-    const snap = map.options.zoomSnap ?? 0;
-    map._stop();
-    const d2 = this._delta / (map.options.wheelPxPerZoomLevel * 4);
-    const d3 = 4 * Math.log(2 / (1 + Math.exp(-Math.abs(d2)))) / Math.LN2;
-    const d4 = snap ? Math.ceil(d3 / snap) * snap : d3;
-    const delta = map._limitZoom(zoom + (this._delta > 0 ? d4 : -d4)) - zoom;
-    this._delta = 0;
-    this._startTime = null;
-    if (!delta)
+    const anchor = this._anchor;
+    const anchorLatLng = this._anchorLatLng;
+    if (!anchor || !anchorLatLng) {
+      map._move(map.getCenter(), zoom);
       return;
-    if (map.options.scrollWheelZoom === "center")
-      map.setZoom(zoom + delta);
-    else
-      map.setZoomAround(this._lastMousePos, zoom + delta);
+    }
+    const viewHalf = map.getSize().divideBy(2);
+    const offset = anchor.subtract(viewHalf);
+    const center = map.unproject(map.project(anchorLatLng, zoom).subtract(offset), zoom);
+    map._move(center, zoom, { round: false });
+  }
+  _startFrames() {
+    this._lastFrameTime = 0;
+    this._frame = requestAnimationFrame((ts) => this._tick(ts));
+  }
+  _stopFrames() {
+    if (this._frame !== undefined) {
+      cancelAnimationFrame(this._frame);
+      this._frame = undefined;
+    }
+  }
+  _tick(timestamp) {
+    const map = this._map;
+    const target = this._targetZoom;
+    if (target === null) {
+      this._frame = undefined;
+      return;
+    }
+    const dt = this._lastFrameTime ? Math.min((timestamp - this._lastFrameTime) / 1000, 0.1) : 1 / 60;
+    this._lastFrameTime = timestamp;
+    const smoothing = Math.max(0.01, map.options.wheelSmoothing);
+    const t = 1 - Math.exp(-dt / smoothing);
+    const current = map.getZoom();
+    const remaining = target - current;
+    if (Math.abs(remaining) < 0.001) {
+      this._applyZoom(target);
+      this._frame = undefined;
+      this._settle();
+      return;
+    }
+    this._applyZoom(current + remaining * t);
+    this._frame = requestAnimationFrame((ts) => this._tick(ts));
+  }
+  _scheduleSettle() {
+    this._stopFrames();
+    this._frame = requestAnimationFrame(() => {
+      this._frame = undefined;
+      setTimeout(() => {
+        if (this._frame === undefined && this._active)
+          this._settle();
+      }, 120);
+    });
+  }
+  _settle() {
+    if (!this._active)
+      return;
+    this._active = false;
+    this._targetZoom = null;
+    this._anchor = undefined;
+    this._anchorLatLng = undefined;
+    this._map._moveEnd(true);
   }
 }
 TsMap.addInitHook("addHandler", "scrollWheelZoom", ScrollWheelZoomHandler);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ts-maps",
   "type": "module",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "A modern vector map library.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",