@mapwhit/tilerenderer 0.50.0 → 0.51.0

package/src/ui/handler/drag_pan.js

@@ -1,285 +0,0 @@
-const assert = require('assert');
-
-const DOM = require('../../util/dom');
-const { bezier } = require('../../util/util');
-const { Event } = require('../../util/evented');
-const makeFrame = require('./frame');
-const makeInertia = require('./inertia');
-
-const inertiaLinearity = 0.3;
-const inertiaEasing = bezier(0, 0, inertiaLinearity, 1);
-const inertiaMaxSpeed = 1400; // px/s
-const inertiaDeceleration = 2500; // px/s^2
-
-/**
- * The `DragPanHandler` allows the user to pan the map by clicking and dragging
- * the cursor.
- */
-function dragPanHandler(map) {
-  const _el = map.getCanvasContainer();
-  const frame = makeFrame(map, onDragFrame);
-
-  let state = 'disabled';
-  let inertia;
-  let previousPos;
-
-  /**
-   * Returns a Boolean indicating whether the "drag to pan" interaction is enabled.
-   *
-   * @returns {boolean} `true` if the "drag to pan" interaction is enabled.
-   */
-  function isEnabled() {
-    return state !== 'disabled';
-  }
-
-  /**
-   * Returns a Boolean indicating whether the "drag to pan" interaction is active, i.e. currently being used.
-   *
-   * @returns {boolean} `true` if the "drag to pan" interaction is active.
-   */
-  function isActive() {
-    return state === 'active';
-  }
-
-  /**
-   * Enables the "drag to pan" interaction.
-   *
-   * @example
-   * map.dragPan.enable();
-   */
-  function enable() {
-    if (isEnabled()) return;
-    map.getCanvasContainer().classList.add('mapboxgl-touch-drag-pan');
-    state = 'enabled';
-  }
-
-  /**
-   * Disables the "drag to pan" interaction.
-   *
-   * @example
-   * map.dragPan.disable();
-   */
-  function disable() {
-    if (!isEnabled()) return;
-    map.getCanvasContainer().classList.remove('mapboxgl-touch-drag-pan');
-    switch (state) {
-      case 'active':
-        state = 'disabled';
-        unbind();
-        deactivate();
-        fireEvent('dragend');
-        fireEvent('moveend');
-        break;
-      case 'pending':
-        state = 'disabled';
-        unbind();
-        break;
-      default:
-        state = 'disabled';
-        break;
-    }
-  }
-
-  function onMouseDown(e) {
-    if (state !== 'enabled') return;
-    if (e.ctrlKey || DOM.mouseButton(e) !== 0) return;
-
-    // Bind window-level event listeners for mousemove/up 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.
-    window.document.addEventListener('mousemove', onMove, { capture: true });
-    window.document.addEventListener('mouseup', onMouseUp);
-
-    start(e);
-  }
-
-  function onTouchStart(e) {
-    if (state !== 'enabled') return;
-    if (e.touches.length > 1) return;
-
-    // Bind window-level event listeners for touchmove/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.
-    window.document.addEventListener('touchmove', onMove, { capture: true, passive: false });
-    window.document.addEventListener('touchend', onTouchEnd);
-
-    start(e);
-  }
-
-  function start(e) {
-    // Deactivate when the window loses focus. Otherwise if a mouseup occurs when the window
-    // isn't in focus, dragging will continue even though the mouse is no longer pressed.
-    window.addEventListener('blur', onBlur);
-
-    state = 'pending';
-    previousPos = DOM.mousePos(_el, e);
-    inertia = makeInertia(map, calculateInertia);
-    inertia.update(previousPos);
-  }
-
-  function onMove(e) {
-    e.preventDefault();
-
-    const pos = DOM.mousePos(_el, e);
-    inertia.update(pos);
-    frame.request(e, pos);
-
-    if (state === 'pending') {
-      // we treat the first move event (rather than the mousedown event)
-      // as the start of the drag
-      state = 'active';
-      fireEvent('dragstart', e);
-      fireEvent('movestart', e);
-    }
-  }
-
-  /**
-   * Called in each render frame while dragging is happening.
-   * @private
-   */
-  function onDragFrame(e, pos) {
-    const tr = map.transform;
-    tr.setLocationAtPoint(tr.pointLocation(previousPos), pos);
-    fireEvent('drag', e);
-    fireEvent('move', e);
-
-    previousPos = pos;
-  }
-
-  function onMouseUp(e) {
-    if (DOM.mouseButton(e) !== 0) return;
-    switch (state) {
-      case 'active':
-        state = 'enabled';
-        DOM.suppressClick();
-        unbind();
-        deactivate();
-        inertialPan(e);
-        break;
-      case 'pending':
-        state = 'enabled';
-        unbind();
-        break;
-      default:
-        assert(false);
-        break;
-    }
-  }
-
-  function onTouchEnd(e) {
-    switch (state) {
-      case 'active':
-        state = 'enabled';
-        unbind();
-        deactivate();
-        inertialPan(e);
-        break;
-      case 'pending':
-        state = 'enabled';
-        unbind();
-        break;
-      default:
-        assert(false);
-        break;
-    }
-  }
-
-  function onBlur(e) {
-    switch (state) {
-      case 'active':
-        state = 'enabled';
-        unbind();
-        deactivate();
-        fireEvent('dragend', e);
-        fireEvent('moveend', e);
-        break;
-      case 'pending':
-        state = 'enabled';
-        unbind();
-        break;
-      default:
-        assert(false);
-        break;
-    }
-  }
-
-  function unbind() {
-    window.document.removeEventListener('touchmove', onMove, { capture: true, passive: false });
-    window.document.removeEventListener('touchend', onTouchEnd);
-    window.document.removeEventListener('mousemove', onMove, { capture: true });
-    window.document.removeEventListener('mouseup', onMouseUp);
-    window.removeEventListener('blur', onBlur);
-  }
-
-  function deactivate() {
-    frame.cancel();
-    previousPos = undefined;
-  }
-
-  function calculateInertia(first, last) {
-    const flingOffset = last.value.sub(first.value);
-    const flingDuration = (last.time - first.time) / 1000;
-
-    if (flingDuration === 0 || last.value.equals(first.value)) {
-      return { empty: true };
-    }
-
-    // calculate px/s velocity & adjust for increased initial animation speed when easing out
-    const velocity = flingOffset.mult(inertiaLinearity / flingDuration);
-    let speed = velocity.mag(); // px/s
-
-    if (speed > inertiaMaxSpeed) {
-      speed = inertiaMaxSpeed;
-      velocity._unit()._mult(speed);
-    }
-
-    const duration = speed / (inertiaDeceleration * inertiaLinearity);
-    const offset = velocity.mult(-duration / 2);
-
-    return {
-      duration: duration * 1000,
-      offset
-    };
-  }
-
-  function inertialPan(e) {
-    fireEvent('dragend', e);
-
-    const { empty, duration, offset } = inertia.calculate();
-    inertia = undefined;
-
-    if (empty) {
-      fireEvent('moveend', e);
-      return;
-    }
-
-    map.panBy(
-      offset,
-      {
-        duration,
-        easing: inertiaEasing,
-        noMoveStart: true
-      },
-      { originalEvent: e }
-    );
-  }
-
-  function fireEvent(type, e) {
-    return map.fire(new Event(type, e ? { originalEvent: e } : {}));
-  }
-
-  return {
-    isActive,
-    isEnabled,
-    enable,
-    disable,
-    onMouseDown,
-    onTouchStart
-  };
-}
-
-module.exports = dragPanHandler;

package/src/ui/handler/drag_rotate.js

@@ -1,290 +0,0 @@
-const DOM = require('../../util/dom');
-
-const { bezier } = require('../../util/util');
-const { Event } = require('../../util/evented');
-const assert = require('assert');
-const makeFrame = require('./frame');
-const makeInertia = require('./inertia');
-
-const inertiaLinearity = 0.25;
-const inertiaEasing = bezier(0, 0, inertiaLinearity, 1);
-const inertiaMaxSpeed = 180; // deg/s
-const inertiaDeceleration = 720; // deg/s^2
-
-/**
- * The `DragRotateHandler` allows the user to rotate the map by clicking and
- * dragging the cursor while holding the right mouse button or `ctrl` key.
- * @param {Map} map The Mapbox GL JS map to add the handler to.
- * @param {Object} [options]
- * @param {number} [options.bearingSnap] The threshold, measured in degrees, that determines when the map's
- *   bearing will snap to north.
- * @param {bool} [options.pitchWithRotate=true] Control the map pitch in addition to the bearing
- */
-function dragRotateHandler(map, { element, button = 'right', bearingSnap = 0, pitchWithRotate = true } = {}) {
-  const el = element || map.getCanvasContainer();
-
-  const frame = makeFrame(map, onDragFrame);
-
-  let eventButton;
-  let inertia;
-  let state = 'disabled';
-  let previousPos;
-  let previousBearing;
-
-  /**
-   * Returns a Boolean indicating whether the "drag to rotate" interaction is enabled.
-   *
-   * @returns {boolean} `true` if the "drag to rotate" interaction is enabled.
-   */
-  function isEnabled() {
-    return state !== 'disabled';
-  }
-
-  /**
-   * Returns a Boolean indicating whether the "drag to rotate" interaction is active, i.e. currently being used.
-   *
-   * @returns {boolean} `true` if the "drag to rotate" interaction is active.
-   */
-  function isActive() {
-    return state === 'active';
-  }
-
-  /**
-   * Enables the "drag to rotate" interaction.
-   *
-   * @example
-   * map.dragRotate.enable();
-   */
-  function enable() {
-    if (isEnabled()) return;
-    state = 'enabled';
-  }
-
-  /**
-   * Disables the "drag to rotate" interaction.
-   *
-   * @example
-   * map.dragRotate.disable();
-   */
-  function disable() {
-    if (!isEnabled()) return;
-    switch (state) {
-      case 'active':
-        state = 'disabled';
-        unbind();
-        deactivate();
-        fireEvent('rotateend');
-        if (pitchWithRotate) fireEvent('pitchend');
-        fireEvent('moveend');
-        break;
-      case 'pending':
-        state = 'disabled';
-        unbind();
-        break;
-      default:
-        state = 'disabled';
-        break;
-    }
-  }
-
-  function onMouseDown(e) {
-    if (state !== 'enabled') return;
-
-    if (button === 'right') {
-      eventButton = DOM.mouseButton(e);
-      if (eventButton !== (e.ctrlKey ? 0 : 2)) return;
-    } else {
-      if (e.ctrlKey || DOM.mouseButton(e) !== 0) return;
-      eventButton = 0;
-    }
-
-    DOM.disableDrag();
-
-    // 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.
-    window.document.addEventListener('mousemove', onMouseMove, { capture: true });
-    window.document.addEventListener('mouseup', onMouseUp);
-
-    // Deactivate when the window loses focus. Otherwise if a mouseup occurs when the window
-    // isn't in focus, dragging will continue even though the mouse is no longer pressed.
-    window.addEventListener('blur', onBlur);
-
-    state = 'pending';
-
-    previousPos = DOM.mousePos(el, e);
-    previousBearing = map.getBearing();
-
-    inertia = makeInertia(map, calculateInertia);
-    inertia.update(previousBearing);
-
-    e.preventDefault();
-  }
-
-  function onMouseMove(e) {
-    const pos = DOM.mousePos(el, e);
-    frame.request(e, pos);
-
-    if (state === 'pending') {
-      state = 'active';
-      fireEvent('rotatestart', e);
-      fireEvent('movestart', e);
-      if (pitchWithRotate) fireEvent('pitchstart', e);
-    }
-  }
-
-  function onDragFrame(e, pos) {
-    const tr = map.transform;
-
-    const bearingDiff = (pos.x - previousPos.x) * -0.8;
-    const pitchDiff = (pos.y - previousPos.y) * 0.5;
-
-    const bearing = tr.bearing - bearingDiff;
-    const pitch = tr.pitch - pitchDiff;
-
-    const normalizedBearing = map._normalizeBearing(bearing, previousBearing);
-    inertia.update(normalizedBearing);
-
-    tr.bearing = bearing;
-    if (pitchWithRotate) {
-      fireEvent('pitch', e);
-      tr.pitch = pitch;
-    }
-
-    fireEvent('rotate', e);
-    fireEvent('move', e);
-
-    previousBearing = normalizedBearing;
-    previousPos = pos;
-  }
-
-  function onMouseUp(e) {
-    if (DOM.mouseButton(e) !== eventButton) return;
-    switch (state) {
-      case 'active':
-        state = 'enabled';
-        DOM.suppressClick();
-        unbind();
-        deactivate();
-        inertialRotate(e);
-        break;
-      case 'pending':
-        state = 'enabled';
-        unbind();
-        break;
-      default:
-        assert(false);
-        break;
-    }
-  }
-
-  function onBlur(e) {
-    switch (state) {
-      case 'active':
-        state = 'enabled';
-        unbind();
-        deactivate();
-        fireEvent('rotateend', e);
-        if (pitchWithRotate) fireEvent('pitchend', e);
-        fireEvent('moveend', e);
-        break;
-      case 'pending':
-        state = 'enabled';
-        unbind();
-        break;
-      default:
-        assert(false);
-        break;
-    }
-  }
-
-  function unbind() {
-    window.document.removeEventListener('mousemove', onMouseMove, { capture: true });
-    window.document.removeEventListener('mouseup', onMouseUp);
-    window.removeEventListener('blur', onBlur);
-    DOM.enableDrag();
-  }
-
-  function deactivate() {
-    frame.cancel();
-
-    previousPos = undefined;
-    previousBearing = undefined;
-    eventButton = undefined;
-  }
-
-  function calculateInertia(first, last) {
-    const mapBearing = map.getBearing();
-    let bearing = map._normalizeBearing(mapBearing, previousBearing);
-
-    const flingDiff = last.value - first.value;
-    const sign = flingDiff < 0 ? -1 : 1;
-    const flingDuration = (last.time - first.time) / 1000;
-
-    if (flingDiff === 0 || flingDuration === 0) {
-      return { empty: true };
-    }
-
-    let speed = Math.abs(flingDiff * (inertiaLinearity / flingDuration)); // deg/s
-    if (speed > inertiaMaxSpeed) {
-      speed = inertiaMaxSpeed;
-    }
-
-    const duration = speed / (inertiaDeceleration * inertiaLinearity);
-    const offset = sign * speed * (duration / 2);
-
-    bearing += offset;
-
-    if (Math.abs(map._normalizeBearing(bearing, 0)) < bearingSnap) {
-      bearing = map._normalizeBearing(0, bearing);
-    }
-
-    return {
-      duration: duration * 1000,
-      bearing
-    };
-  }
-
-  function inertialRotate(e) {
-    fireEvent('rotateend', e);
-
-    const { empty, bearing, duration } = inertia.calculate();
-    if (empty) {
-      if (Math.abs(map.getBearing()) < bearingSnap) {
-        map.resetNorth({ noMoveStart: true }, { originalEvent: e });
-      } else {
-        fireEvent('moveend', e);
-      }
-      if (pitchWithRotate) fireEvent('pitchend', e);
-      return;
-    }
-
-    map.rotateTo(
-      bearing,
-      {
-        duration,
-        easing: inertiaEasing,
-        noMoveStart: true
-      },
-      { originalEvent: e }
-    );
-  }
-
-  function fireEvent(type, e) {
-    return map.fire(new Event(type, e ? { originalEvent: e } : {}));
-  }
-
-  DOM.initEnableDisableDrag();
-
-  return {
-    isActive,
-    isEnabled,
-    enable,
-    disable,
-    onMouseDown
-  };
-}
-
-module.exports = dragRotateHandler;

package/src/ui/handler/frame.js

@@ -1,28 +0,0 @@
-module.exports = frame;
-
-function frame(map, fn) {
-  let id;
-  let args;
-
-  function callback() {
-    id = undefined;
-    fn(...args);
-  }
-
-  function request(..._args) {
-    args = _args;
-    if (id) return;
-    id = map._requestRenderFrame(callback);
-  }
-
-  function cancel() {
-    if (!id) return;
-    map._cancelRenderFrame(id);
-    id = undefined;
-  }
-
-  return {
-    request,
-    cancel
-  };
-}

package/src/ui/handler/inertia.js

@@ -1,45 +0,0 @@
-const browser = require('../../util/browser');
-
-module.exports = inertia;
-
-const INERTIA_CUTOFF = 160; // msec
-const EMPTY = { empty: true };
-const MAX_LEN = 1000;
-const MIN_REMOVE = Math.floor(MAX_LEN / 2);
-
-function inertia(map, calculateInertia) {
-  const states = [];
-
-  function update(value) {
-    const now = browser.now();
-    const data = { time: now, value };
-    const len = states.push(data);
-    if (len > MAX_LEN) {
-      let first = getFirst(now);
-      if (first < 0) {
-        first = len - 1;
-      } else if (first < MIN_REMOVE) {
-        first = MIN_REMOVE;
-      }
-      states.splice(0, first);
-    }
-  }
-
-  function getFirst(now = browser.now()) {
-    return states.findIndex(item => now - item.time < INERTIA_CUTOFF);
-  }
-
-  function calculate() {
-    const first = getFirst();
-    const last = states.length - 1;
-    if (first < 0 || first >= last) {
-      return EMPTY;
-    }
-    return calculateInertia(states[first], states[last]);
-  }
-
-  return {
-    update,
-    calculate
-  };
-}