@mapwhit/tilerenderer 0.50.0 → 0.51.0

package/src/ui/handler/keyboard.js

@@ -1,148 +0,0 @@
-const panStep = 100;
-const bearingStep = 15;
-const pitchStep = 10;
-
-/**
- * The `KeyboardHandler` allows the user to zoom, rotate, and pan the map using
- * the following keyboard shortcuts:
- *
- * - `=` / `+`: Increase the zoom level by 1.
- * - `Shift-=` / `Shift-+`: Increase the zoom level by 2.
- * - `-`: Decrease the zoom level by 1.
- * - `Shift--`: Decrease the zoom level by 2.
- * - Arrow keys: Pan by 100 pixels.
- * - `Shift+⇢`: Increase the rotation by 15 degrees.
- * - `Shift+⇠`: Decrease the rotation by 15 degrees.
- * - `Shift+⇡`: Increase the pitch by 10 degrees.
- * - `Shift+⇣`: Decrease the pitch by 10 degrees.
- */
-function keyboardHandler(map) {
-  const el = map.getCanvasContainer();
-
-  let enabled = false;
-
-  /**
-   * Returns a Boolean indicating whether keyboard interaction is enabled.
-   *
-   * @returns {boolean} `true` if keyboard interaction is enabled.
-   */
-  function isEnabled() {
-    return enabled;
-  }
-
-  /**
-   * Enables keyboard interaction.
-   *
-   * @example
-   * map.keyboard.enable();
-   */
-  function enable() {
-    if (enabled) return;
-    el.addEventListener('keydown', onKeyDown, false);
-    enabled = true;
-  }
-
-  /**
-   * Disables keyboard interaction.
-   *
-   * @example
-   * map.keyboard.disable();
-   */
-  function disable() {
-    if (!enabled) return;
-    el.removeEventListener('keydown', onKeyDown);
-    enabled = false;
-  }
-
-  function onKeyDown(e) {
-    if (e.altKey || e.ctrlKey || e.metaKey) return;
-
-    let zoomDir = 0;
-    let bearingDir = 0;
-    let pitchDir = 0;
-    let xDir = 0;
-    let yDir = 0;
-
-    switch (e.keyCode) {
-      case 61:
-      case 107:
-      case 171:
-      case 187:
-        zoomDir = 1;
-        break;
-
-      case 189:
-      case 109:
-      case 173:
-        zoomDir = -1;
-        break;
-
-      case 37:
-        if (e.shiftKey) {
-          bearingDir = -1;
-        } else {
-          e.preventDefault();
-          xDir = -1;
-        }
-        break;
-
-      case 39:
-        if (e.shiftKey) {
-          bearingDir = 1;
-        } else {
-          e.preventDefault();
-          xDir = 1;
-        }
-        break;
-
-      case 38:
-        if (e.shiftKey) {
-          pitchDir = 1;
-        } else {
-          e.preventDefault();
-          yDir = -1;
-        }
-        break;
-
-      case 40:
-        if (e.shiftKey) {
-          pitchDir = -1;
-        } else {
-          yDir = 1;
-          e.preventDefault();
-        }
-        break;
-
-      default:
-        return;
-    }
-
-    const zoom = map.getZoom();
-
-    const easeOptions = {
-      duration: 300,
-      delayEndEvents: 500,
-      easing: easeOut,
-
-      zoom: zoomDir ? Math.round(zoom) + zoomDir * (e.shiftKey ? 2 : 1) : zoom,
-      bearing: map.getBearing() + bearingDir * bearingStep,
-      pitch: map.getPitch() + pitchDir * pitchStep,
-      offset: [-xDir * panStep, -yDir * panStep],
-      center: map.getCenter()
-    };
-
-    map.easeTo(easeOptions, { originalEvent: e });
-  }
-
-  return {
-    isEnabled,
-    enable,
-    disable
-  };
-}
-
-function easeOut(t) {
-  return t * (2 - t);
-}
-
-module.exports = keyboardHandler;

package/src/ui/handler/scroll_zoom.js

@@ -1,284 +0,0 @@
-const DOM = require('../../util/dom');
-
-const browser = require('../../util/browser');
-const interpolate = require('../../util/interpolate');
-const { Event } = require('../../util/evented');
-const makeFrame = require('./frame');
-
-// deltaY value for mouse scroll wheel identification
-const wheelZoomDelta = 4.000244140625;
-// These magic numbers control the rate of zoom. Trackpad events fire at a greater
-// frequency than mouse scroll wheel, so reduce the zoom rate per wheel tick
-const defaultZoomRate = 1 / 100;
-const wheelZoomRate = 1 / 450;
-
-// upper bound on how much we scale the map in any single render frame; this
-// is used to limit zoom rate in the case of very fast scrolling
-const maxScalePerFrame = 2;
-
-function computeSmoothOutEasing() {
-  const { ease, bezier } = require('../../util/util');
-  let _prevEase;
-
-  function compute(duration) {
-    let easing = ease;
-
-    if (_prevEase) {
-      const t = (browser.now() - _prevEase.start) / _prevEase.duration;
-      const speed = _prevEase.easing(t + 0.01) - _prevEase.easing(t);
-
-      // Quick hack to make new bezier that is continuous with last
-      const x = (0.27 / Math.sqrt(speed * speed + 0.0001)) * 0.01;
-      const y = Math.sqrt(0.27 * 0.27 - x * x);
-
-      easing = bezier(x, y, 0.25, 1);
-    }
-
-    _prevEase = {
-      start: browser.now(),
-      duration,
-      easing
-    };
-
-    return easing;
-  }
-
-  return compute;
-}
-
-/**
- * The `ScrollZoomHandler` allows the user to zoom the map by scrolling.
- */
-function scrollZoomHandler(_map) {
-  // used for delayed-handling of a single wheel movement
-  // used to delay final '{move,zoom}end' events
-
-  let _delta = 0;
-
-  let enabled = false;
-  let active = false;
-  let zooming = false;
-  let aroundCenter;
-
-  let _lastWheelEvent;
-  let _lastWheelEventTime = 0;
-  let _lastValue = 0;
-
-  let _timeout;
-  let _finishTimeout;
-
-  let _type;
-  let _around;
-  let _aroundPoint;
-
-  let _startZoom;
-  let _targetZoom;
-  let _easing;
-
-  const frame = makeFrame(_map, onScrollFrame);
-  const smoothOutEasing = computeSmoothOutEasing();
-
-  /**
-   * Returns a Boolean indicating whether the "scroll to zoom" interaction is enabled.
-   *
-   * @returns {boolean} `true` if the "scroll to zoom" interaction is enabled.
-   */
-  function isEnabled() {
-    return enabled;
-  }
-
-  function isActive() {
-    return active;
-  }
-
-  function isZooming() {
-    return zooming;
-  }
-
-  /**
-   * Enables the "scroll to zoom" interaction.
-   *
-   * @param {Object} [options]
-   * @param {string} [options.around] If "center" is passed, map will zoom around center of map
-   *
-   * @example
-   *   map.scrollZoom.enable();
-   * @example
-   *  map.scrollZoom.enable({ around: 'center' })
-   */
-  function enable(options) {
-    if (enabled) return;
-    enabled = true;
-    aroundCenter = options && options.around === 'center';
-  }
-
-  /**
-   * Disables the "scroll to zoom" interaction.
-   *
-   * @example
-   *   map.scrollZoom.disable();
-   */
-  function disable() {
-    enabled = false;
-  }
-
-  function onWheel(e) {
-    if (!enabled) return;
-
-    let value = e.deltaMode === window.WheelEvent.DOM_DELTA_LINE ? e.deltaY * 40 : e.deltaY;
-    const now = browser.now();
-    const timeDelta = now - _lastWheelEventTime;
-
-    _lastWheelEventTime = now;
-    _lastWheelEvent = e;
-
-    if (value !== 0 && value % wheelZoomDelta === 0) {
-      // This one is definitely a mouse wheel event.
-      _type = 'wheel';
-    } else if (value !== 0 && Math.abs(value) < 4) {
-      // This one is definitely a trackpad event because it is so small.
-      _type = 'trackpad';
-    } else if (timeDelta > 400) {
-      // This is likely a new scroll action.
-      _type = undefined;
-      _lastValue = value;
-
-      // Start a timeout in case this was a singular event, and dely it by up to 40ms.
-      _timeout = setTimeout(onTimeout, 40);
-    } else if (!_type) {
-      // This is a repeating event, but we don't know the type of event just yet.
-      // If the delta per time is small, we assume it's a fast trackpad; otherwise we switch into wheel mode.
-      _type = Math.abs(timeDelta * value) < 200 ? 'trackpad' : 'wheel';
-
-      // Make sure our delayed event isn't fired again, because we accumulate
-      // the previous event (which was less than 40ms ago) into this event.
-      if (_timeout) {
-        clearTimeout(_timeout);
-        _timeout = undefined;
-        value += _lastValue;
-      }
-    }
-
-    // Slow down zoom if shift key is held for more precise zooming
-    if (e.shiftKey && value) value = value / 4;
-
-    // Only fire the callback if we actually know what type of scrolling device the user uses.
-    if (_type) {
-      _delta -= value;
-      if (!active) {
-        start(e);
-      }
-    }
-
-    e.preventDefault();
-  }
-
-  function onTimeout() {
-    _timeout = undefined;
-    _type = 'wheel';
-    _delta -= _lastValue;
-    if (!active) {
-      start();
-    }
-  }
-
-  function start() {
-    if (!_delta) return;
-
-    frame.cancel();
-    active = true;
-
-    if (!zooming) {
-      zooming = true;
-      _map.fire(new Event('movestart', { originalEvent: _lastWheelEvent }));
-      _map.fire(new Event('zoomstart', { originalEvent: _lastWheelEvent }));
-    }
-
-    if (_finishTimeout) {
-      clearTimeout(_finishTimeout);
-    }
-
-    if (aroundCenter) {
-      _around = _map.getCenter();
-      _aroundPoint = _map.transform.locationPoint(_around);
-    } else {
-      _aroundPoint = DOM.mousePos(_map.getCanvasContainer(), _lastWheelEvent);
-      _around = _map.unproject(_aroundPoint);
-    }
-    frame.request();
-  }
-
-  function onScrollFrame() {
-    if (!active) return;
-    const tr = _map.transform;
-
-    // if we've had scroll events since the last render frame, consume the
-    // accumulated delta, and update the target zoom level accordingly
-    if (_delta !== 0) {
-      // For trackpad events and single mouse wheel ticks, use the default zoom rate
-      const zoomRate = _type === 'wheel' && Math.abs(_delta) > wheelZoomDelta ? wheelZoomRate : defaultZoomRate;
-      // Scale by sigmoid of scroll wheel delta.
-      let scale = maxScalePerFrame / (1 + Math.exp(-Math.abs(_delta * zoomRate)));
-
-      if (_delta < 0 && scale !== 0) {
-        scale = 1 / scale;
-      }
-
-      const fromScale = typeof _targetZoom === 'number' ? tr.zoomScale(_targetZoom) : tr.scale;
-      _targetZoom = Math.min(tr.maxZoom, Math.max(tr.minZoom, tr.scaleZoom(fromScale * scale)));
-
-      // if this is a mouse wheel, refresh the starting zoom and easing
-      // function we're using to smooth out the zooming between wheel
-      // events
-      if (_type === 'wheel') {
-        _startZoom = tr.zoom;
-        _easing = smoothOutEasing(200);
-      }
-
-      _delta = 0;
-    }
-
-    const targetZoom = typeof _targetZoom === 'number' ? _targetZoom : tr.zoom;
-    let finished = false;
-    if (_type === 'wheel' && _startZoom && _easing) {
-      const t = Math.min((browser.now() - _lastWheelEventTime) / 200, 1);
-      const k = _easing(t);
-      tr.zoom = interpolate(_startZoom, targetZoom, k);
-      if (t < 1) {
-        frame.request();
-      } else {
-        finished = true;
-      }
-    } else {
-      tr.zoom = targetZoom;
-      finished = true;
-    }
-
-    tr.setLocationAtPoint(_around, _aroundPoint);
-
-    _map.fire(new Event('move', { originalEvent: _lastWheelEvent }));
-    _map.fire(new Event('zoom', { originalEvent: _lastWheelEvent }));
-
-    if (finished) {
-      active = false;
-      _finishTimeout = setTimeout(() => {
-        zooming = false;
-        _finishTimeout = undefined;
-        _map.fire(new Event('zoomend', { originalEvent: _lastWheelEvent }));
-        _map.fire(new Event('moveend', { originalEvent: _lastWheelEvent }));
-        _targetZoom = undefined;
-      }, 200);
-    }
-  }
-
-  return {
-    isActive,
-    isZooming,
-    isEnabled,
-    enable,
-    disable,
-    onWheel
-  };
-}
-
-module.exports = scrollZoomHandler;

package/src/ui/handler/touch_zoom_rotate.js

@@ -1,263 +0,0 @@
-const DOM = require('../../util/dom');
-const { bezier } = require('../../util/util');
-const { Event } = require('../../util/evented');
-const makeFrame = require('./frame');
-const makeInertia = require('./inertia');
-
-const INERTIA_LINEARITY = 0.15;
-const INERTIA_EASING = bezier(0, 0, INERTIA_LINEARITY, 1);
-const INERTIA_DECELERATION = 12; // scale / s^2
-const INERTIA_MAX_SPEED = 2.5; // scale / s;
-
-const SIGNIFICANT_SCALE_THRESHOLD = 0.15;
-const SIGNIFICANT_ROTATE_THRESHOLD = 10;
-
-function makeMovement(map, { rotationDisabled, aroundCenter }, e) {
-  const el = map.getCanvasContainer();
-
-  const frame = makeFrame(map, onFrame);
-
-  const { vector: startVector, center } = getVector(e);
-  const startScale = map.transform.scale;
-  const startBearing = map.transform.bearing;
-  const inertia = makeInertia(map, calculateInertia);
-
-  let gestureIntent;
-  let lastCenter = center;
-  const around = map.transform.pointLocation(center);
-
-  function onMove(e) {
-    const { vector, center } = getVector(e);
-    lastCenter = center;
-
-    const scale = vector.mag() / startVector.mag();
-    inertia.update(scale);
-    frame.request(e, { vector, scale, center });
-
-    if (gestureIntent) return;
-
-    // Determine 'intent' by whichever threshold is surpassed first,
-    // then keep that state for the duration of this gesture.
-    if (!rotationDisabled) {
-      const bearing = (vector.angleWith(startVector) * 180) / Math.PI;
-      if (Math.abs(bearing) > SIGNIFICANT_ROTATE_THRESHOLD) {
-        gestureIntent = 'rotate';
-      }
-    }
-
-    if (!gestureIntent) {
-      if (rotationDisabled && scale !== 1) {
-        // when rotation is disabled, any scale change triggers the zoom gesture to start
-        gestureIntent = 'zoom';
-      } else if (Math.abs(1 - scale) > SIGNIFICANT_SCALE_THRESHOLD) {
-        gestureIntent = 'zoom';
-      }
-    }
-
-    if (gestureIntent) {
-      map.fire(new Event(`${gestureIntent}start`, { originalEvent: e }));
-      map.fire(new Event('movestart', { originalEvent: e }));
-    }
-  }
-
-  function onFrame(e, { vector, scale, center }) {
-    if (!gestureIntent) return;
-
-    if (gestureIntent === 'rotate') {
-      const bearing = (vector.angleWith(startVector) * 180) / Math.PI;
-      map.transform.bearing = startBearing + bearing;
-    }
-
-    map.transform.zoom = map.transform.scaleZoom(startScale * scale);
-    map.transform.setLocationAtPoint(around, center);
-
-    map.fire(new Event(gestureIntent, { originalEvent: e }));
-    map.fire(new Event('move', { originalEvent: e }));
-  }
-
-  function onEnd(e) {
-    frame.cancel();
-
-    if (!gestureIntent) return;
-
-    map.fire(new Event(`${gestureIntent}end`, { originalEvent: e }));
-
-    const { zoom, duration, empty } = inertia.calculate();
-    if (empty) {
-      map.snapToNorth({}, { originalEvent: e });
-    } else {
-      map.easeTo(
-        {
-          zoom,
-          duration,
-          easing: INERTIA_EASING,
-          around: aroundCenter ? map.getCenter() : map.unproject(lastCenter),
-          noMoveStart: true
-        },
-        { originalEvent: e }
-      );
-    }
-  }
-
-  function getVector({ touches: [t0, t1] }) {
-    const p0 = DOM.mousePos(el, t0);
-    const p1 = DOM.mousePos(el, t1);
-
-    return {
-      vector: p0.sub(p1),
-      center: p0.add(p1).div(2)
-    };
-  }
-
-  function calculateInertia(first, last) {
-    const firstZoom = map.transform.scaleZoom(startScale * first.value);
-    const lastZoom = map.transform.scaleZoom(startScale * last.value);
-
-    const scaleDuration = (last.time - first.time) / 1000;
-    if (scaleDuration === 0 || lastZoom === firstZoom) {
-      return { empty: true };
-    }
-
-    // calculate scale/s speed and adjust for increased initial animation speed when easing
-    let speed = ((lastZoom - firstZoom) * INERTIA_LINEARITY) / scaleDuration; // scale/s
-    if (speed > INERTIA_MAX_SPEED) {
-      speed = INERTIA_MAX_SPEED;
-    } else if (speed < -INERTIA_MAX_SPEED) {
-      speed = -INERTIA_MAX_SPEED;
-    }
-
-    const duration = Math.abs(speed / (INERTIA_DECELERATION * INERTIA_LINEARITY)) * 1000;
-    let zoom = lastZoom + (speed * duration) / 2000;
-    if (zoom < 0) {
-      zoom = 0;
-    }
-
-    return { zoom, duration };
-  }
-
-  return {
-    onMove,
-    onFrame,
-    onEnd
-  };
-}
-
-/**
- * The `TouchZoomRotateHandler` allows the user to zoom and rotate the map by
- * pinching on a touchscreen.
- */
-function touchZoomRotateHandler(map) {
-  let enabled = false;
-  let aroundCenter = false;
-  let rotationDisabled = false;
-
-  let movement;
-
-  /**
-   * Returns a Boolean indicating whether the "pinch to rotate and zoom" interaction is enabled.
-   *
-   * @returns {boolean} `true` if the "pinch to rotate and zoom" interaction is enabled.
-   */
-  function isEnabled() {
-    return enabled;
-  }
-
-  /**
-   * Returns a Boolean indicating whether the "pinch to rotate and zoom" interaction is active.
-   *
-   * @returns {boolean} `true` if the "pinch to rotate and zoom" interaction is active.
-   */
-  function isActive() {
-    return !!movement;
-  }
-
-  /**
-   * Enables the "pinch to rotate and zoom" interaction.
-   *
-   * @param {Object} [options]
-   * @param {string} [options.around] If "center" is passed, map will zoom around the center
-   *
-   * @example
-   *   map.touchZoomRotate.enable();
-   * @example
-   *   map.touchZoomRotate.enable({ around: 'center' });
-   */
-  function enable(options) {
-    if (enabled) return;
-    map.getCanvasContainer().classList.add('mapboxgl-touch-zoom-rotate');
-    enabled = true;
-    aroundCenter = options && options.around === 'center';
-  }
-
-  /**
-   * Disables the "pinch to rotate and zoom" interaction.
-   *
-   * @example
-   *   map.touchZoomRotate.disable();
-   */
-  function disable() {
-    if (!enabled) return;
-    map.getCanvasContainer().classList.remove('mapboxgl-touch-zoom-rotate');
-    enabled = false;
-  }
-
-  /**
-   * Disables the "pinch to rotate" interaction, leaving the "pinch to zoom"
-   * interaction enabled.
-   *
-   * @example
-   *   map.touchZoomRotate.disableRotation();
-   */
-  function disableRotation() {
-    rotationDisabled = true;
-  }
-
-  /**
-   * Enables the "pinch to rotate" interaction.
-   *
-   * @example
-   *   map.touchZoomRotate.enable();
-   *   map.touchZoomRotate.enableRotation();
-   */
-  function enableRotation() {
-    rotationDisabled = false;
-  }
-
-  function onStart(e) {
-    if (!enabled) return;
-    if (e.touches.length !== 2) return;
-
-    movement = makeMovement(map, { rotationDisabled, aroundCenter }, e);
-
-    window.document.addEventListener('touchmove', onMove, { passive: false });
-    window.document.addEventListener('touchend', onEnd);
-  }
-
-  function onMove(e) {
-    if (e.touches.length !== 2) return;
-    if (movement) {
-      movement.onMove(e);
-      e.preventDefault();
-    }
-  }
-
-  function onEnd(e) {
-    window.document.removeEventListener('touchmove', onMove, { passive: false });
-    window.document.removeEventListener('touchend', onEnd);
-
-    movement.onEnd(e);
-    movement = undefined;
-  }
-
-  return {
-    isEnabled,
-    isActive,
-    enable,
-    disable,
-    enableRotation,
-    disableRotation,
-    onStart
-  };
-}
-
-module.exports = touchZoomRotateHandler;