@antv/l7-map 2.21.11-beta.4 → 2.21.11-beta.6

package/lib/map/handler_manager.js

@@ -0,0 +1,474 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HandlerManager = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _pointGeometry = _interopRequireDefault(require("@mapbox/point-geometry"));
+var _box_zoom = require("./handler/box_zoom");
+var _click_zoom = require("./handler/click_zoom");
+var _cooperative_gestures = require("./handler/cooperative_gestures");
+var _keyboard = require("./handler/keyboard");
+var _map_event = require("./handler/map_event");
+var _mouse = require("./handler/mouse");
+var _scroll_zoom = require("./handler/scroll_zoom");
+var _dblclick_zoom = require("./handler/shim/dblclick_zoom");
+var _drag_pan = require("./handler/shim/drag_pan");
+var _drag_rotate = require("./handler/shim/drag_rotate");
+var _two_fingers_touch = require("./handler/shim/two_fingers_touch");
+var _tap_drag_zoom = require("./handler/tap_drag_zoom");
+var _tap_zoom = require("./handler/tap_zoom");
+var _touch_pan = require("./handler/touch_pan");
+var _two_fingers_touch2 = require("./handler/two_fingers_touch");
+var _handler_inertia = require("./handler_inertia");
+var _browser = require("./util/browser");
+var _dom = require("./util/dom");
+var _evented = require("./util/evented");
+var _util = require("./util/util");
+const isMoving = p => p.zoom || p.drag || p.pitch || p.rotate;
+class RenderFrameEvent extends _evented.Event {
+  constructor(type, timeStamp) {
+    super(type);
+    (0, _defineProperty2.default)(this, "type", 'renderFrame');
+    (0, _defineProperty2.default)(this, "timeStamp", void 0);
+    this.timeStamp = timeStamp;
+  }
+}
+
+/**
+ * Handlers interpret dom events and return camera changes that should be
+ * applied to the map (`HandlerResult`s). The camera changes are all deltas.
+ * The handler itself should have no knowledge of the map's current state.
+ * This makes it easier to merge multiple results and keeps handlers simpler.
+ * For example, if there is a mousedown and mousemove, the mousePan handler
+ * would return a `panDelta` on the mousemove.
+ */
+
+/**
+ * All handler methods that are called with events can optionally return a `HandlerResult`.
+ */
+
+function hasChange(result) {
+  return result.panDelta && result.panDelta.mag() || result.zoomDelta || result.bearingDelta || result.pitchDelta;
+}
+class HandlerManager {
+  constructor(map, options) {
+    (0, _defineProperty2.default)(this, "_map", void 0);
+    (0, _defineProperty2.default)(this, "_el", void 0);
+    (0, _defineProperty2.default)(this, "_handlers", void 0);
+    (0, _defineProperty2.default)(this, "_eventsInProgress", void 0);
+    (0, _defineProperty2.default)(this, "_frameId", void 0);
+    (0, _defineProperty2.default)(this, "_inertia", void 0);
+    (0, _defineProperty2.default)(this, "_bearingSnap", void 0);
+    (0, _defineProperty2.default)(this, "_handlersById", void 0);
+    (0, _defineProperty2.default)(this, "_updatingCamera", void 0);
+    (0, _defineProperty2.default)(this, "_changes", void 0);
+    (0, _defineProperty2.default)(this, "_zoom", void 0);
+    (0, _defineProperty2.default)(this, "_previousActiveHandlers", void 0);
+    (0, _defineProperty2.default)(this, "_listeners", void 0);
+    (0, _defineProperty2.default)(this, "handleWindowEvent", e => {
+      this.handleEvent(e, `${e.type}Window`);
+    });
+    (0, _defineProperty2.default)(this, "handleEvent", (e, eventName) => {
+      if (e.type === 'blur') {
+        this.stop(true);
+        return;
+      }
+      this._updatingCamera = true;
+      const inputEvent = e.type === 'renderFrame' ? undefined : e;
+
+      /*
+       * We don't call e.preventDefault() for any events by default.
+       * Handlers are responsible for calling it where necessary.
+       */
+
+      const mergedHandlerResult = {
+        needsRenderFrame: false
+      };
+      const eventsInProgress = {};
+      const activeHandlers = {};
+      const eventTouches = e.touches;
+      const mapTouches = eventTouches ? this._getMapTouches(eventTouches) : undefined;
+      const points = mapTouches ? _dom.DOM.touchPos(this._map.getCanvasContainer(), mapTouches) : _dom.DOM.mousePos(this._map.getCanvasContainer(), e);
+      for (const {
+        handlerName,
+        handler,
+        allowed
+      } of this._handlers) {
+        if (!handler.isEnabled()) continue;
+        let data;
+        if (this._blockedByActive(activeHandlers, allowed, handlerName)) {
+          handler.reset();
+        } else {
+          if (handler[eventName || e.type]) {
+            data = handler[eventName || e.type](e, points, mapTouches);
+            this.mergeHandlerResult(mergedHandlerResult, eventsInProgress, data, handlerName, inputEvent);
+            if (data && data.needsRenderFrame) {
+              this._triggerRenderFrame();
+            }
+          }
+        }
+        if (data || handler.isActive()) {
+          activeHandlers[handlerName] = handler;
+        }
+      }
+      const deactivatedHandlers = {};
+      for (const name in this._previousActiveHandlers) {
+        if (!activeHandlers[name]) {
+          deactivatedHandlers[name] = inputEvent;
+        }
+      }
+      this._previousActiveHandlers = activeHandlers;
+      if (Object.keys(deactivatedHandlers).length || hasChange(mergedHandlerResult)) {
+        this._changes.push([mergedHandlerResult, eventsInProgress, deactivatedHandlers]);
+        this._triggerRenderFrame();
+      }
+      if (Object.keys(activeHandlers).length || hasChange(mergedHandlerResult)) {
+        this._map._stop(true);
+      }
+      this._updatingCamera = false;
+      const {
+        cameraAnimation
+      } = mergedHandlerResult;
+      if (cameraAnimation) {
+        this._inertia.clear();
+        this._fireEvents({}, {}, true);
+        this._changes = [];
+        cameraAnimation(this._map);
+      }
+    });
+    this._map = map;
+    this._el = this._map.getCanvasContainer();
+    this._handlers = [];
+    this._handlersById = {};
+    this._changes = [];
+    this._inertia = new _handler_inertia.HandlerInertia(map);
+    this._bearingSnap = options.bearingSnap || 7;
+    this._previousActiveHandlers = {};
+
+    // Track whether map is currently moving, to compute start/move/end events
+    this._eventsInProgress = {};
+    this._addDefaultHandlers(options);
+    const el = this._el;
+    this._listeners = [
+    // This needs to be `passive: true` so that a double tap fires two
+    // pairs of touchstart/end events in iOS Safari 13. If this is set to
+    // `passive: false` then the second pair of events is only fired if
+    // preventDefault() is called on the first touchstart. Calling preventDefault()
+    // undesirably prevents click events.
+    [el, 'touchstart', {
+      passive: true
+    }],
+    // This needs to be `passive: false` so that scrolls and pinches can be
+    // prevented in browsers that don't support `touch-actions: none`, for example iOS Safari 12.
+    [el, 'touchmove', {
+      passive: false
+    }], [el, 'touchend', undefined], [el, 'touchcancel', undefined], [el, 'mousedown', undefined], [el, 'mousemove', undefined], [el, 'mouseup', undefined],
+    // Bind window-level event listeners for move and up/end events. In the absence of
+    // the pointer capture API, which is not supported by all necessary platforms,
+    // window-level event listeners give us the best shot at capturing events that
+    // fall outside the map canvas element. Use `{capture: true}` for the move event
+    // to prevent map move events from being fired during a drag.
+    [document, 'mousemove', {
+      capture: true
+    }], [document, 'mouseup', undefined], [el, 'mouseover', undefined], [el, 'mouseout', undefined], [el, 'dblclick', undefined], [el, 'click', undefined], [el, 'keydown', {
+      capture: false
+    }], [el, 'keyup', undefined], [el, 'wheel', {
+      passive: false
+    }], [el, 'contextmenu', undefined], [window, 'blur', undefined]];
+    for (const [target, type, listenerOptions] of this._listeners) {
+      _dom.DOM.addEventListener(target, type, target === document ? this.handleWindowEvent : this.handleEvent, listenerOptions);
+    }
+  }
+  destroy() {
+    for (const [target, type, listenerOptions] of this._listeners) {
+      _dom.DOM.removeEventListener(target, type, target === document ? this.handleWindowEvent : this.handleEvent, listenerOptions);
+    }
+  }
+  _addDefaultHandlers(options) {
+    const map = this._map;
+    const el = map.getCanvasContainer();
+    this._add('mapEvent', new _map_event.MapEventHandler(map, options));
+    const boxZoom = map.boxZoom = new _box_zoom.BoxZoomHandler(map, options);
+    this._add('boxZoom', boxZoom);
+    if (options.interactive && options.boxZoom) {
+      boxZoom.enable();
+    }
+    const cooperativeGestures = map.cooperativeGestures = new _cooperative_gestures.CooperativeGesturesHandler(map, options.cooperativeGestures);
+    this._add('cooperativeGestures', cooperativeGestures);
+    if (options.cooperativeGestures) {
+      cooperativeGestures.enable();
+    }
+    const tapZoom = new _tap_zoom.TapZoomHandler(map);
+    const clickZoom = new _click_zoom.ClickZoomHandler(map);
+    map.doubleClickZoom = new _dblclick_zoom.DoubleClickZoomHandler(clickZoom, tapZoom);
+    this._add('tapZoom', tapZoom);
+    this._add('clickZoom', clickZoom);
+    if (options.interactive && options.doubleClickZoom) {
+      map.doubleClickZoom.enable();
+    }
+    const tapDragZoom = new _tap_drag_zoom.TapDragZoomHandler();
+    this._add('tapDragZoom', tapDragZoom);
+    const touchPitch = map.touchPitch = new _two_fingers_touch2.TwoFingersTouchPitchHandler(map);
+    this._add('touchPitch', touchPitch);
+    if (options.interactive && options.touchPitch) {
+      map.touchPitch.enable(options.touchPitch);
+    }
+    const mouseRotate = (0, _mouse.generateMouseRotationHandler)(options);
+    const mousePitch = (0, _mouse.generateMousePitchHandler)(options);
+    map.dragRotate = new _drag_rotate.DragRotateHandler(options, mouseRotate, mousePitch);
+    this._add('mouseRotate', mouseRotate, ['mousePitch']);
+    this._add('mousePitch', mousePitch, ['mouseRotate']);
+    if (options.interactive && options.dragRotate) {
+      map.dragRotate.enable();
+    }
+    const mousePan = (0, _mouse.generateMousePanHandler)(options);
+    const touchPan = new _touch_pan.TouchPanHandler(options, map);
+    map.dragPan = new _drag_pan.DragPanHandler(el, mousePan, touchPan);
+    this._add('mousePan', mousePan);
+    this._add('touchPan', touchPan, ['touchZoom', 'touchRotate']);
+    if (options.interactive && options.dragPan) {
+      map.dragPan.enable(options.dragPan);
+    }
+    const touchRotate = new _two_fingers_touch2.TwoFingersTouchRotateHandler();
+    const touchZoom = new _two_fingers_touch2.TwoFingersTouchZoomHandler();
+    map.touchZoomRotate = new _two_fingers_touch.TwoFingersTouchZoomRotateHandler(el, touchZoom, touchRotate, tapDragZoom);
+    this._add('touchRotate', touchRotate, ['touchPan', 'touchZoom']);
+    this._add('touchZoom', touchZoom, ['touchPan', 'touchRotate']);
+    if (options.interactive && options.touchZoomRotate) {
+      map.touchZoomRotate.enable(options.touchZoomRotate);
+    }
+    const scrollZoom = map.scrollZoom = new _scroll_zoom.ScrollZoomHandler(map, () => this._triggerRenderFrame());
+    this._add('scrollZoom', scrollZoom, ['mousePan']);
+    if (options.interactive && options.scrollZoom) {
+      map.scrollZoom.enable(options.scrollZoom);
+    }
+    const keyboard = map.keyboard = new _keyboard.KeyboardHandler(map);
+    this._add('keyboard', keyboard);
+    if (options.interactive && options.keyboard) {
+      map.keyboard.enable();
+    }
+    this._add('blockableMapEvent', new _map_event.BlockableMapEventHandler(map));
+  }
+  _add(handlerName, handler, allowed) {
+    this._handlers.push({
+      handlerName,
+      handler,
+      allowed
+    });
+    this._handlersById[handlerName] = handler;
+  }
+  stop(allowEndAnimation) {
+    // do nothing if this method was triggered by a gesture update
+    if (this._updatingCamera) return;
+    for (const {
+      handler
+    } of this._handlers) {
+      handler.reset();
+    }
+    this._inertia.clear();
+    this._fireEvents({}, {}, allowEndAnimation);
+    this._changes = [];
+  }
+  isActive() {
+    for (const {
+      handler
+    } of this._handlers) {
+      if (handler.isActive()) return true;
+    }
+    return false;
+  }
+  isZooming() {
+    return !!this._eventsInProgress.zoom || this._map.scrollZoom.isZooming();
+  }
+  isRotating() {
+    return !!this._eventsInProgress.rotate;
+  }
+  isMoving() {
+    return Boolean(isMoving(this._eventsInProgress)) || this.isZooming();
+  }
+  _blockedByActive(activeHandlers, allowed, myName) {
+    for (const name in activeHandlers) {
+      if (name === myName) continue;
+      if (!allowed || allowed.indexOf(name) < 0) {
+        return true;
+      }
+    }
+    return false;
+  }
+  _getMapTouches(touches) {
+    const mapTouches = [];
+    for (const t of touches) {
+      const target = t.target;
+      if (this._el.contains(target)) {
+        mapTouches.push(t);
+      }
+    }
+    return mapTouches;
+  }
+  mergeHandlerResult(mergedHandlerResult, eventsInProgress, handlerResult, name, e) {
+    if (!handlerResult) return;
+    (0, _util.extend)(mergedHandlerResult, handlerResult);
+    const eventData = {
+      handlerName: name,
+      originalEvent: handlerResult.originalEvent || e
+    };
+
+    // track which handler changed which camera property
+    if (handlerResult.zoomDelta !== undefined) {
+      eventsInProgress.zoom = eventData;
+    }
+    if (handlerResult.panDelta !== undefined) {
+      eventsInProgress.drag = eventData;
+    }
+    if (handlerResult.pitchDelta !== undefined) {
+      eventsInProgress.pitch = eventData;
+    }
+    if (handlerResult.bearingDelta !== undefined) {
+      eventsInProgress.rotate = eventData;
+    }
+  }
+  _applyChanges() {
+    const combined = {};
+    const combinedEventsInProgress = {};
+    const combinedDeactivatedHandlers = {};
+    for (const [change, eventsInProgress, deactivatedHandlers] of this._changes) {
+      if (change.panDelta) combined.panDelta = (combined.panDelta || new _pointGeometry.default(0, 0))._add(change.panDelta);
+      if (change.zoomDelta) combined.zoomDelta = (combined.zoomDelta || 0) + change.zoomDelta;
+      if (change.bearingDelta) combined.bearingDelta = (combined.bearingDelta || 0) + change.bearingDelta;
+      if (change.pitchDelta) combined.pitchDelta = (combined.pitchDelta || 0) + change.pitchDelta;
+      if (change.around !== undefined) combined.around = change.around;
+      if (change.pinchAround !== undefined) combined.pinchAround = change.pinchAround;
+      if (change.noInertia) combined.noInertia = change.noInertia;
+      (0, _util.extend)(combinedEventsInProgress, eventsInProgress);
+      (0, _util.extend)(combinedDeactivatedHandlers, deactivatedHandlers);
+    }
+    this._updateMapTransform(combined, combinedEventsInProgress, combinedDeactivatedHandlers);
+    this._changes = [];
+  }
+  _updateMapTransform(combinedResult, combinedEventsInProgress, deactivatedHandlers) {
+    const map = this._map;
+    const tr = map._getTransformForUpdate();
+    if (!hasChange(combinedResult)) {
+      return this._fireEvents(combinedEventsInProgress, deactivatedHandlers, true);
+    }
+    const {
+      panDelta,
+      zoomDelta,
+      bearingDelta,
+      pitchDelta,
+      pinchAround
+    } = combinedResult;
+    let {
+      around
+    } = combinedResult;
+    if (pinchAround !== undefined) {
+      around = pinchAround;
+    }
+
+    // stop any ongoing camera animations (easeTo, flyTo)
+    map._stop(true);
+    around = around || map.transform.centerPoint;
+    const loc = tr.pointLocation(panDelta ? around.sub(panDelta) : around);
+    if (bearingDelta) tr.bearing += bearingDelta;
+    if (pitchDelta) tr.pitch += pitchDelta;
+    if (zoomDelta) tr.zoom += zoomDelta;
+    tr.setLocationAtPoint(loc, around);
+    map._applyUpdatedTransform(tr);
+    this._map._update();
+    if (!combinedResult.noInertia) this._inertia.record(combinedResult);
+    this._fireEvents(combinedEventsInProgress, deactivatedHandlers, true);
+  }
+  _fireEvents(newEventsInProgress, deactivatedHandlers, allowEndAnimation) {
+    const wasMoving = isMoving(this._eventsInProgress);
+    const nowMoving = isMoving(newEventsInProgress);
+    const startEvents = {};
+    for (const eventName in newEventsInProgress) {
+      const {
+        originalEvent
+      } = newEventsInProgress[eventName];
+      if (!this._eventsInProgress[eventName]) {
+        startEvents[`${eventName}start`] = originalEvent;
+      }
+      this._eventsInProgress[eventName] = newEventsInProgress[eventName];
+    }
+
+    // fire start events only after this._eventsInProgress has been updated
+    if (!wasMoving && nowMoving) {
+      this._fireEvent('movestart', nowMoving.originalEvent);
+    }
+    for (const name in startEvents) {
+      this._fireEvent(name, startEvents[name]);
+    }
+    if (nowMoving) {
+      this._fireEvent('move', nowMoving.originalEvent);
+    }
+    for (const eventName in newEventsInProgress) {
+      const {
+        originalEvent
+      } = newEventsInProgress[eventName];
+      this._fireEvent(eventName, originalEvent);
+    }
+    const endEvents = {};
+    let originalEndEvent;
+    for (const eventName in this._eventsInProgress) {
+      const {
+        handlerName,
+        originalEvent
+      } = this._eventsInProgress[eventName];
+      if (!this._handlersById[handlerName].isActive()) {
+        delete this._eventsInProgress[eventName];
+        originalEndEvent = deactivatedHandlers[handlerName] || originalEvent;
+        endEvents[`${eventName}end`] = originalEndEvent;
+      }
+    }
+    for (const name in endEvents) {
+      this._fireEvent(name, endEvents[name]);
+    }
+    const stillMoving = isMoving(this._eventsInProgress);
+    const finishedMoving = (wasMoving || nowMoving) && !stillMoving;
+    if (allowEndAnimation && finishedMoving) {
+      this._updatingCamera = true;
+      const inertialEase = this._inertia._onMoveEnd(this._map.dragPan._inertiaOptions);
+      const shouldSnapToNorth = bearing => bearing !== 0 && -this._bearingSnap < bearing && bearing < this._bearingSnap;
+      if (inertialEase && (inertialEase.essential || !_browser.browser.prefersReducedMotion)) {
+        if (shouldSnapToNorth(inertialEase.bearing || this._map.getBearing())) {
+          inertialEase.bearing = 0;
+        }
+        inertialEase.freezeElevation = true;
+        this._map.easeTo(inertialEase, {
+          originalEvent: originalEndEvent
+        });
+      } else {
+        this._map.fire(new _evented.Event('moveend', {
+          originalEvent: originalEndEvent
+        }));
+        if (shouldSnapToNorth(this._map.getBearing())) {
+          this._map.resetNorth();
+        }
+      }
+      this._updatingCamera = false;
+    }
+  }
+  _fireEvent(type, e) {
+    this._map.fire(new _evented.Event(type, e ? {
+      originalEvent: e
+    } : {}));
+  }
+  _requestFrame() {
+    this._map.triggerRepaint();
+    return this._map._renderTaskQueue.add(timeStamp => {
+      delete this._frameId;
+      this.handleEvent(new RenderFrameEvent('renderFrame', timeStamp));
+      this._applyChanges();
+    });
+  }
+  _triggerRenderFrame() {
+    if (this._frameId === undefined) {
+      this._frameId = this._requestFrame();
+    }
+  }
+}
+exports.HandlerManager = HandlerManager;