mirror of https://gitee.com/antv-l7/antv-l7
chore(map): pan event
This commit is contained in:
thinkinggis
parent
5ed9b8b5f6
commit
d41a8e7161
|
|
@ -5,6 +5,7 @@ import { IPaddingOptions } from './geo/edge_insets';
|
|||
import LngLat, { LngLatLike } from './geo/lng_lat';
|
||||
import LngLatBounds, { LngLatBoundsLike } from './geo/lng_lat_bounds';
|
||||
import Transform from './geo/transform';
|
||||
import { Event } from './handler/events/event';
|
||||
import { IMapOptions } from './interface';
|
||||
import {
|
||||
cancel,
|
||||
|
|
@ -36,7 +37,9 @@ export interface IAnimationOptions {
|
|||
}
|
||||
|
||||
export default class Camera extends EventEmitter {
|
||||
protected transform: Transform;
|
||||
public transform: Transform;
|
||||
// public requestRenderFrame: (_: any) => number;
|
||||
// public cancelRenderFrame: (_: number) => void;
|
||||
protected options: IMapOptions;
|
||||
private moving: boolean;
|
||||
private zooming: boolean;
|
||||
|
|
@ -55,8 +58,6 @@ export default class Camera extends EventEmitter {
|
|||
private onEaseFrame: (_: number) => void;
|
||||
private onEaseEnd: (easeId?: string) => void;
|
||||
private easeFrameId: number;
|
||||
private requestRenderFrame: (_: any) => number = raf;
|
||||
private cancelRenderFrame: (_: number) => void = cancel;
|
||||
|
||||
constructor(options: IMapOptions) {
|
||||
super();
|
||||
|
|
@ -73,6 +74,12 @@ export default class Camera extends EventEmitter {
|
|||
renderWorldCopies,
|
||||
);
|
||||
}
|
||||
public requestRenderFrame(_: any): number {
|
||||
return 0;
|
||||
}
|
||||
public cancelRenderFrame(_: number) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
public getCenter() {
|
||||
const { lng, lat } = this.transform.center;
|
||||
|
|
@ -415,7 +422,6 @@ export default class Camera extends EventEmitter {
|
|||
},
|
||||
options,
|
||||
);
|
||||
|
||||
const tr = this.transform;
|
||||
const startZoom = this.getZoom();
|
||||
const startBearing = this.getBearing();
|
||||
|
|
@ -604,7 +610,7 @@ export default class Camera extends EventEmitter {
|
|||
}
|
||||
public stop(allowGestures?: boolean, easeId?: string) {
|
||||
if (this.easeFrameId) {
|
||||
window.cancelAnimationFrame(this.easeFrameId);
|
||||
this.cancelRenderFrame(this.easeFrameId);
|
||||
delete this.easeFrameId;
|
||||
delete this.onEaseFrame;
|
||||
}
|
||||
|
|
@ -627,7 +633,8 @@ export default class Camera extends EventEmitter {
|
|||
const t = Math.min((now() - this.easeStart) / this.easeOptions.duration, 1);
|
||||
this.onEaseFrame(this.easeOptions.easing(t));
|
||||
if (t < 1) {
|
||||
this.easeFrameId = window.requestAnimationFrame(this.renderFrameCallback);
|
||||
// this.easeFrameId = window.requestAnimationFrame(this.renderFrameCallback);
|
||||
this.easeFrameId = this.requestRenderFrame(this.renderFrameCallback);
|
||||
} else {
|
||||
this.stop();
|
||||
}
|
||||
|
|
@ -733,7 +740,7 @@ export default class Camera extends EventEmitter {
|
|||
this.easeOptions = options;
|
||||
this.onEaseFrame = frame;
|
||||
this.onEaseEnd = finish;
|
||||
this.easeFrameId = window.requestAnimationFrame(this.renderFrameCallback);
|
||||
this.easeFrameId = this.requestRenderFrame(this.renderFrameCallback);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
// @flow
|
||||
|
||||
import LngLat, { earthRadius, LngLatLike } from '../geo/lng_lat';
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -185,7 +185,7 @@ export default class Transform {
|
|||
}
|
||||
|
||||
get point(): Point {
|
||||
return this.project(this._center);
|
||||
return this.project(this.center);
|
||||
}
|
||||
public tileSize: number;
|
||||
public tileZoom: number;
|
||||
|
|
@ -388,7 +388,7 @@ export default class Transform {
|
|||
// z = options.maxzoom;
|
||||
// }
|
||||
|
||||
// const centerCoord = MercatorCoordinate.fromLngLat(this._center);
|
||||
// const centerCoord = MercatorCoordinate.fromLngLat(this.center);
|
||||
// const numTiles = Math.pow(2, z);
|
||||
// const centerPoint = [numTiles * centerCoord.x, numTiles * centerCoord.y, 0];
|
||||
// const cameraFrustum = Frustum.fromInvProjectionMatrix(
|
||||
|
|
@ -551,9 +551,9 @@ export default class Transform {
|
|||
loc.x - (a.x - b.x),
|
||||
loc.y - (a.y - b.y),
|
||||
);
|
||||
this._center = this.coordinateLocation(newCenter);
|
||||
this.center = this.coordinateLocation(newCenter);
|
||||
if (this._renderWorldCopies) {
|
||||
this._center = this._center.wrap();
|
||||
this.center = this.center.wrap();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -803,7 +803,7 @@ export default class Transform {
|
|||
// }
|
||||
|
||||
private constrain() {
|
||||
if (!this._center || !this.width || !this.height || this.constraining) {
|
||||
if (!this.center || !this.width || !this.height || this.constraining) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -840,7 +840,7 @@ export default class Transform {
|
|||
const s = Math.max(sx || 0, sy || 0);
|
||||
|
||||
if (s) {
|
||||
this._center = this.unproject(
|
||||
this.center = this.unproject(
|
||||
new Point(
|
||||
sx ? (maxX + minX) / 2 : point.x,
|
||||
sy ? (maxY + minY) / 2 : point.y,
|
||||
|
|
@ -878,7 +878,7 @@ export default class Transform {
|
|||
|
||||
// pan the map if the screen goes off the range
|
||||
if (x2 !== undefined || y2 !== undefined) {
|
||||
this._center = this.unproject(
|
||||
this.center = this.unproject(
|
||||
new Point(
|
||||
x2 !== undefined ? x2 : point.x,
|
||||
y2 !== undefined ? y2 : point.y,
|
||||
|
|
@ -960,7 +960,7 @@ export default class Transform {
|
|||
vec3.fromValues(
|
||||
1,
|
||||
1,
|
||||
mercatorZfromAltitude(1, this._center.lat) * this.worldSize,
|
||||
mercatorZfromAltitude(1, this.center.lat) * this.worldSize,
|
||||
),
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
import { Map } from '../map';
|
||||
export interface IHandlerResult {
|
||||
panDelta?: Point;
|
||||
zoomDelta?: number;
|
||||
bearingDelta?: number;
|
||||
pitchDelta?: number;
|
||||
around?: Point | null;
|
||||
pinchAround?: Point | null;
|
||||
cameraAnimation?: (map: Map) => any;
|
||||
originalEvent?: any;
|
||||
// Makes the manager trigger a frame; allowing the handler to return multiple results over time (see scrollzoom).
|
||||
needsRenderFrame?: boolean;
|
||||
noInertia?: boolean;
|
||||
}
|
||||
|
||||
export interface IHandler {
|
||||
// Handlers can optionally implement these methods.
|
||||
// They are called with dom events whenever those dom evens are received.
|
||||
touchstart?: (
|
||||
e: TouchEvent,
|
||||
points: Point[],
|
||||
mapTouches: Touch[],
|
||||
) => IHandlerResult | void;
|
||||
touchmove?: (
|
||||
e: TouchEvent,
|
||||
points: Point[],
|
||||
mapTouches: Touch[],
|
||||
) => IHandlerResult | void;
|
||||
touchend?: (
|
||||
e: TouchEvent,
|
||||
points: Point[],
|
||||
mapTouches: Touch[],
|
||||
) => IHandlerResult | void;
|
||||
touchcancel?: (
|
||||
e: TouchEvent,
|
||||
points: Point[],
|
||||
mapTouches: Touch[],
|
||||
) => IHandlerResult | void;
|
||||
mousedown?: (e: MouseEvent, point: Point) => IHandlerResult | void;
|
||||
mousemove?: (e: MouseEvent, point: Point) => IHandlerResult | void;
|
||||
mouseup?: (e: MouseEvent, point: Point) => IHandlerResult | void;
|
||||
dblclick?: (e: MouseEvent, point: Point) => IHandlerResult | void;
|
||||
wheel?: (e: WheelEvent, point: Point) => IHandlerResult | void;
|
||||
keydown?: (e: KeyboardEvent) => IHandlerResult | void;
|
||||
keyup?: (e: KeyboardEvent) => IHandlerResult | void;
|
||||
|
||||
// `renderFrame` is the only non-dom event. It is called during render
|
||||
// frames and can be used to smooth camera changes (see scroll handler).
|
||||
renderFrame?: () => IHandlerResult | void;
|
||||
enable(options?: any): void;
|
||||
disable(): void;
|
||||
isEnabled(): boolean;
|
||||
isActive(): boolean;
|
||||
|
||||
// `reset` can be called by the manager at any time and must reset everything to it's original state
|
||||
reset(): void;
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
import { Map } from '../map';
|
||||
import { MapMouseEvent, MapTouchEvent, MapWheelEvent } from './events';
|
||||
export class BlockableMapEventHandler {
|
||||
export default class BlockableMapEventHandler {
|
||||
private map: Map;
|
||||
private delayContextMenu: boolean;
|
||||
private contextMenuEvent: MouseEvent;
|
||||
|
|
@ -40,7 +40,7 @@ export class BlockableMapEventHandler {
|
|||
this.contextMenuEvent = e;
|
||||
} else {
|
||||
// Windows: contextmenu fired on mouseup, so fire event now
|
||||
this.map.emit(new MapMouseEvent(e.type, this.map, e));
|
||||
this.map.emit(e.type, new MapMouseEvent(e.type, this.map, e));
|
||||
}
|
||||
|
||||
// prevent browser context menu when necessary
|
||||
|
|
|
|||
|
|
@ -0,0 +1,190 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
import { Map } from '../map';
|
||||
import DOM from '../utils/dom';
|
||||
|
||||
/**
|
||||
* The `BoxZoomHandler` allows the user to zoom the map to fit within a bounding box.
|
||||
* The bounding box is defined by clicking and holding `shift` while dragging the cursor.
|
||||
*/
|
||||
class BoxZoomHandler {
|
||||
private map: Map;
|
||||
private el: HTMLElement;
|
||||
private container: HTMLElement;
|
||||
private enabled: boolean;
|
||||
private active: boolean;
|
||||
private startPos: Point;
|
||||
private lastPos: Point;
|
||||
private box: HTMLElement | null;
|
||||
private clickTolerance: number;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
constructor(
|
||||
map: Map,
|
||||
options: {
|
||||
clickTolerance: number;
|
||||
},
|
||||
) {
|
||||
this.map = map;
|
||||
this.el = map.getCanvasContainer();
|
||||
this.container = map.getContainer();
|
||||
this.clickTolerance = options.clickTolerance || 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a Boolean indicating whether the "box zoom" interaction is enabled.
|
||||
*
|
||||
* @returns {boolean} `true` if the "box zoom" interaction is enabled.
|
||||
*/
|
||||
public isEnabled() {
|
||||
return !!this.enabled;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a Boolean indicating whether the "box zoom" interaction is active, i.e. currently being used.
|
||||
*
|
||||
* @returns {boolean} `true` if the "box zoom" interaction is active.
|
||||
*/
|
||||
public isActive() {
|
||||
return !!this.active;
|
||||
}
|
||||
|
||||
/**
|
||||
* Enables the "box zoom" interaction.
|
||||
*
|
||||
* @example
|
||||
* map.boxZoom.enable();
|
||||
*/
|
||||
public enable() {
|
||||
if (this.isEnabled()) {
|
||||
return;
|
||||
}
|
||||
this.enabled = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Disables the "box zoom" interaction.
|
||||
*
|
||||
* @example
|
||||
* map.boxZoom.disable();
|
||||
*/
|
||||
public disable() {
|
||||
if (!this.isEnabled()) {
|
||||
return;
|
||||
}
|
||||
this.enabled = false;
|
||||
}
|
||||
|
||||
public mousedown(e: MouseEvent, point: Point) {
|
||||
if (!this.isEnabled()) {
|
||||
return;
|
||||
}
|
||||
if (!(e.shiftKey && e.button === 0)) {
|
||||
return;
|
||||
}
|
||||
|
||||
DOM.disableDrag();
|
||||
this.startPos = this.lastPos = point;
|
||||
this.active = true;
|
||||
}
|
||||
|
||||
public mousemoveWindow(e: MouseEvent, point: Point) {
|
||||
if (!this.active) {
|
||||
return;
|
||||
}
|
||||
|
||||
const pos = point;
|
||||
|
||||
if (
|
||||
this.lastPos.equals(pos) ||
|
||||
(!this.box && pos.dist(this.startPos) < this.clickTolerance)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const p0 = this.startPos;
|
||||
this.lastPos = pos;
|
||||
|
||||
if (!this.box) {
|
||||
this.box = DOM.create('div', 'l7-boxzoom', this.container);
|
||||
this.container.classList.add('l7-crosshair');
|
||||
this.fireEvent('boxzoomstart', e);
|
||||
}
|
||||
|
||||
const minX = Math.min(p0.x, pos.x);
|
||||
const maxX = Math.max(p0.x, pos.x);
|
||||
const minY = Math.min(p0.y, pos.y);
|
||||
const maxY = Math.max(p0.y, pos.y);
|
||||
|
||||
DOM.setTransform(this.box, `translate(${minX}px,${minY}px)`);
|
||||
|
||||
this.box.style.width = `${maxX - minX}px`;
|
||||
this.box.style.height = `${maxY - minY}px`;
|
||||
}
|
||||
|
||||
public mouseupWindow(e: MouseEvent, point: Point) {
|
||||
if (!this.active) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.button !== 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const p0 = this.startPos;
|
||||
const p1 = point;
|
||||
|
||||
this.reset();
|
||||
|
||||
DOM.suppressClick();
|
||||
|
||||
if (p0.x === p1.x && p0.y === p1.y) {
|
||||
this.fireEvent('boxzoomcancel', e);
|
||||
} else {
|
||||
this.map.emit(
|
||||
'boxzoomend',
|
||||
new Event('boxzoomend', { originalEvent: e }),
|
||||
);
|
||||
return {
|
||||
cameraAnimation: (map) =>
|
||||
map.fitScreenCoordinates(p0, p1, this.map.getBearing(), {
|
||||
linear: true,
|
||||
}),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
public keydown(e: KeyboardEvent) {
|
||||
if (!this.active) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.keyCode === 27) {
|
||||
this.reset();
|
||||
this.fireEvent('boxzoomcancel', e);
|
||||
}
|
||||
}
|
||||
|
||||
public reset() {
|
||||
this.active = false;
|
||||
|
||||
this.container.classList.remove('l7-crosshair');
|
||||
|
||||
if (this.box) {
|
||||
DOM.remove(this.box);
|
||||
this.box = null;
|
||||
}
|
||||
|
||||
DOM.enableDrag();
|
||||
|
||||
delete this.startPos;
|
||||
delete this.lastPos;
|
||||
}
|
||||
|
||||
public fireEvent(type: string, e: any) {
|
||||
return this.map.emit(type, new Event(type, { originalEvent: e }));
|
||||
}
|
||||
}
|
||||
|
||||
export default BoxZoomHandler;
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
import { Map } from '../map';
|
||||
|
||||
export default class ClickZoomHandler {
|
||||
private enabled: boolean;
|
||||
private active: boolean;
|
||||
|
||||
constructor() {
|
||||
this.reset();
|
||||
}
|
||||
|
||||
public reset() {
|
||||
this.active = false;
|
||||
}
|
||||
|
||||
public dblclick(e: MouseEvent, point: Point) {
|
||||
e.preventDefault();
|
||||
return {
|
||||
cameraAnimation: (map: Map) => {
|
||||
map.easeTo(
|
||||
{
|
||||
duration: 300,
|
||||
zoom: map.getZoom() + (e.shiftKey ? -1 : 1),
|
||||
around: map.unproject(point),
|
||||
},
|
||||
{ originalEvent: e },
|
||||
);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public enable() {
|
||||
this.enabled = true;
|
||||
}
|
||||
public disable() {
|
||||
this.enabled = false;
|
||||
this.reset();
|
||||
}
|
||||
|
||||
public isEnabled() {
|
||||
return this.enabled;
|
||||
}
|
||||
|
||||
public isActive() {
|
||||
return this.active;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
// tslint:disable-next-line:no-submodule-imports
|
||||
import merge from 'lodash/merge';
|
||||
export class Event {
|
||||
public type: string;
|
||||
constructor(type: string, data: any = {}) {
|
||||
merge(this, data);
|
||||
this.type = type;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import MapMouseEvent from './map_mouse_event';
|
||||
import MapTouchEvent from './map_touch_event';
|
||||
import MapWheelEvent, { MapBoxZoomEvent } from './map_wheel_event';
|
||||
|
||||
export { MapMouseEvent, MapTouchEvent, MapWheelEvent, MapBoxZoomEvent };
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
// tslint:disable-next-line:no-submodule-imports
|
||||
import merge from 'lodash/merge';
|
||||
import LngLat from '../../geo/lng_lat';
|
||||
import { Map } from '../../map';
|
||||
import DOM from '../../utils/dom';
|
||||
import { Event } from './event';
|
||||
export default class MapMouseEvent extends Event {
|
||||
/**
|
||||
* `true` if `preventDefault` has been called.
|
||||
* @private
|
||||
*/
|
||||
|
||||
public type:
|
||||
| 'mousedown'
|
||||
| 'mouseup'
|
||||
| 'click'
|
||||
| 'dblclick'
|
||||
| 'mousemove'
|
||||
| 'mouseover'
|
||||
| 'mouseenter'
|
||||
| 'mouseleave'
|
||||
| 'mouseout'
|
||||
| 'contextmenu';
|
||||
|
||||
/**
|
||||
* The `Map` object that fired the event.
|
||||
*/
|
||||
public target: Map;
|
||||
|
||||
/**
|
||||
* The DOM event which caused the map event.
|
||||
*/
|
||||
public originalEvent: MouseEvent;
|
||||
|
||||
/**
|
||||
* The pixel coordinates of the mouse cursor, relative to the map and measured from the top left corner.
|
||||
*/
|
||||
public point: Point;
|
||||
|
||||
/**
|
||||
* The geographic location on the map of the mouse cursor.
|
||||
*/
|
||||
public lngLat: LngLat;
|
||||
|
||||
public defaultPrevented: boolean;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
constructor(
|
||||
type: string,
|
||||
map: Map,
|
||||
originalEvent: MouseEvent,
|
||||
data: any = {},
|
||||
) {
|
||||
const point = DOM.mousePos(map.getCanvasContainer(), originalEvent);
|
||||
const lngLat = map.unproject(point);
|
||||
super(type, merge({ point, lngLat, originalEvent }, data));
|
||||
this.defaultPrevented = false;
|
||||
this.target = map;
|
||||
}
|
||||
public preventDefault() {
|
||||
this.defaultPrevented = true;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
import LngLat from '../../geo/lng_lat';
|
||||
import { Map } from '../../map';
|
||||
import DOM from '../../utils/dom';
|
||||
import { Event } from './event';
|
||||
export default class MapTouchEvent extends Event {
|
||||
/**
|
||||
* The event type.
|
||||
*/
|
||||
public type: 'touchstart' | 'touchend' | 'touchcancel';
|
||||
|
||||
/**
|
||||
* The `Map` object that fired the event.
|
||||
*/
|
||||
public target: Map;
|
||||
|
||||
/**
|
||||
* The DOM event which caused the map event.
|
||||
*/
|
||||
public originalEvent: TouchEvent;
|
||||
|
||||
/**
|
||||
* The geographic location on the map of the center of the touch event points.
|
||||
*/
|
||||
public lngLat: LngLat;
|
||||
|
||||
/**
|
||||
* The pixel coordinates of the center of the touch event points, relative to the map and measured from the top left
|
||||
* corner.
|
||||
*/
|
||||
public point: Point;
|
||||
|
||||
/**
|
||||
* The array of pixel coordinates corresponding to a
|
||||
* [touch event's `touches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches) property.
|
||||
*/
|
||||
public points: Point[];
|
||||
|
||||
/**
|
||||
* The geographical locations on the map corresponding to a
|
||||
* [touch event's `touches`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches) property.
|
||||
*/
|
||||
public lngLats: LngLat[];
|
||||
|
||||
/**
|
||||
* `true` if `preventDefault` has been called.
|
||||
* @private
|
||||
*/
|
||||
|
||||
public defaultPrevented: boolean;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
constructor(type: string, map: Map, originalEvent: TouchEvent) {
|
||||
const touches =
|
||||
type === 'touchend'
|
||||
? originalEvent.changedTouches
|
||||
: originalEvent.touches;
|
||||
const points = DOM.touchPos(map.getCanvasContainer(), touches);
|
||||
const lngLats = points.map((t) => map.unproject(t));
|
||||
const point = points.reduce((prev, curr, i, arr) => {
|
||||
return prev.add(curr.div(arr.length));
|
||||
}, new Point(0, 0));
|
||||
const lngLat = map.unproject(point);
|
||||
super(type, { points, point, lngLats, lngLat, originalEvent });
|
||||
this.defaultPrevented = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevents subsequent default processing of the event by the map.
|
||||
*
|
||||
* Calling this method will prevent the following default map behaviors:
|
||||
*
|
||||
* * On `touchstart` events, the behavior of {@link DragPanHandler}
|
||||
* * On `touchstart` events, the behavior of {@link TouchZoomRotateHandler}
|
||||
*
|
||||
*/
|
||||
private preventDefault() {
|
||||
this.defaultPrevented = true;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
import { Map } from '../../map';
|
||||
import { Event } from './event';
|
||||
|
||||
export interface IMapBoxZoomEvent {
|
||||
type: 'boxzoomstart' | 'boxzoomend' | 'boxzoomcancel';
|
||||
target: Map;
|
||||
originalEvent: MouseEvent;
|
||||
}
|
||||
export default class MapWheelEvent extends Event {
|
||||
/**
|
||||
* The event type.
|
||||
*/
|
||||
public type: 'wheel';
|
||||
|
||||
/**
|
||||
* The DOM event which caused the map event.
|
||||
*/
|
||||
public originalEvent: WheelEvent;
|
||||
|
||||
public defaultPrevented: boolean;
|
||||
|
||||
/**
|
||||
* The `Map` object that fired the event.
|
||||
*/
|
||||
public target: Map;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
constructor(type: string, map: Map, originalEvent: WheelEvent) {
|
||||
super(type, { originalEvent });
|
||||
this.defaultPrevented = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevents subsequent default processing of the event by the map.
|
||||
*
|
||||
* Calling this method will prevent the the behavior of {@link ScrollZoomHandler}.
|
||||
*/
|
||||
private preventDefault() {
|
||||
this.defaultPrevented = true;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import { Event } from './event';
|
||||
export default class RenderFrameEvent extends Event {
|
||||
public type: 'renderFrame';
|
||||
public timeStamp: number;
|
||||
}
|
||||
|
|
@ -0,0 +1,200 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
|
||||
// tslint:disable-next-line:no-submodule-imports
|
||||
import merge from 'lodash/merge';
|
||||
import { Map } from '../map';
|
||||
import { bezier, clamp, now } from '../util';
|
||||
import { IDragPanOptions } from './shim/drag_pan';
|
||||
|
||||
const defaultInertiaOptions = {
|
||||
linearity: 0.3,
|
||||
easing: bezier(0, 0, 0.3, 1),
|
||||
};
|
||||
|
||||
const defaultPanInertiaOptions = merge(
|
||||
{
|
||||
deceleration: 2500,
|
||||
maxSpeed: 1400,
|
||||
},
|
||||
defaultInertiaOptions,
|
||||
);
|
||||
|
||||
const defaultZoomInertiaOptions = merge(
|
||||
{
|
||||
deceleration: 20,
|
||||
maxSpeed: 1400,
|
||||
},
|
||||
defaultInertiaOptions,
|
||||
);
|
||||
|
||||
const defaultBearingInertiaOptions = merge(
|
||||
{
|
||||
deceleration: 1000,
|
||||
maxSpeed: 360,
|
||||
},
|
||||
defaultInertiaOptions,
|
||||
);
|
||||
|
||||
const defaultPitchInertiaOptions = merge(
|
||||
{
|
||||
deceleration: 1000,
|
||||
maxSpeed: 90,
|
||||
},
|
||||
defaultInertiaOptions,
|
||||
);
|
||||
|
||||
export interface IInertiaOptions {
|
||||
linearity: number;
|
||||
easing: (t: number) => number;
|
||||
deceleration: number;
|
||||
maxSpeed: number;
|
||||
}
|
||||
|
||||
export type InputEvent = MouseEvent | TouchEvent | KeyboardEvent | WheelEvent;
|
||||
|
||||
export default class HandlerInertia {
|
||||
private map: Map;
|
||||
private inertiaBuffer: Array<{
|
||||
time: number;
|
||||
settings: { [key: string]: any };
|
||||
}>;
|
||||
|
||||
constructor(map: Map) {
|
||||
this.map = map;
|
||||
this.clear();
|
||||
}
|
||||
|
||||
public clear() {
|
||||
this.inertiaBuffer = [];
|
||||
}
|
||||
|
||||
public record(settings: any) {
|
||||
this.drainInertiaBuffer();
|
||||
this.inertiaBuffer.push({ time: now(), settings });
|
||||
}
|
||||
|
||||
public drainInertiaBuffer() {
|
||||
const inertia = this.inertiaBuffer;
|
||||
const nowTime = now();
|
||||
const cutoff = 160; // msec
|
||||
|
||||
while (inertia.length > 0 && nowTime - inertia[0].time > cutoff) {
|
||||
inertia.shift();
|
||||
}
|
||||
}
|
||||
|
||||
public onMoveEnd(panInertiaOptions?: IDragPanOptions) {
|
||||
this.drainInertiaBuffer();
|
||||
if (this.inertiaBuffer.length < 2) {
|
||||
return;
|
||||
}
|
||||
|
||||
const deltas = {
|
||||
zoom: 0,
|
||||
bearing: 0,
|
||||
pitch: 0,
|
||||
pan: new Point(0, 0),
|
||||
pinchAround: undefined,
|
||||
around: undefined,
|
||||
};
|
||||
|
||||
for (const { settings } of this.inertiaBuffer) {
|
||||
deltas.zoom += settings.zoomDelta || 0;
|
||||
deltas.bearing += settings.bearingDelta || 0;
|
||||
deltas.pitch += settings.pitchDelta || 0;
|
||||
if (settings.panDelta) {
|
||||
deltas.pan._add(settings.panDelta);
|
||||
}
|
||||
if (settings.around) {
|
||||
deltas.around = settings.around;
|
||||
}
|
||||
if (settings.pinchAround) {
|
||||
deltas.pinchAround = settings.pinchAround;
|
||||
}
|
||||
}
|
||||
|
||||
const lastEntry = this.inertiaBuffer[this.inertiaBuffer.length - 1];
|
||||
const duration = lastEntry.time - this.inertiaBuffer[0].time;
|
||||
|
||||
const easeOptions: { [key: string]: any } = {};
|
||||
|
||||
if (deltas.pan.mag()) {
|
||||
const result = calculateEasing(
|
||||
deltas.pan.mag(),
|
||||
duration,
|
||||
merge({}, defaultPanInertiaOptions, panInertiaOptions || {}),
|
||||
);
|
||||
easeOptions.offset = deltas.pan.mult(result.amount / deltas.pan.mag());
|
||||
easeOptions.center = this.map.transform.center;
|
||||
extendDuration(easeOptions, result);
|
||||
}
|
||||
|
||||
if (deltas.zoom) {
|
||||
const result = calculateEasing(
|
||||
deltas.zoom,
|
||||
duration,
|
||||
defaultZoomInertiaOptions,
|
||||
);
|
||||
easeOptions.zoom = this.map.transform.zoom + result.amount;
|
||||
extendDuration(easeOptions, result);
|
||||
}
|
||||
|
||||
if (deltas.bearing) {
|
||||
const result = calculateEasing(
|
||||
deltas.bearing,
|
||||
duration,
|
||||
defaultBearingInertiaOptions,
|
||||
);
|
||||
easeOptions.bearing =
|
||||
this.map.transform.bearing + clamp(result.amount, -179, 179);
|
||||
extendDuration(easeOptions, result);
|
||||
}
|
||||
|
||||
if (deltas.pitch) {
|
||||
const result = calculateEasing(
|
||||
deltas.pitch,
|
||||
duration,
|
||||
defaultPitchInertiaOptions,
|
||||
);
|
||||
easeOptions.pitch = this.map.transform.pitch + result.amount;
|
||||
extendDuration(easeOptions, result);
|
||||
}
|
||||
|
||||
if (easeOptions.zoom || easeOptions.bearing) {
|
||||
const last =
|
||||
deltas.pinchAround === undefined ? deltas.around : deltas.pinchAround;
|
||||
easeOptions.around = last
|
||||
? this.map.unproject(last)
|
||||
: this.map.getCenter();
|
||||
}
|
||||
|
||||
this.clear();
|
||||
return merge(easeOptions, {
|
||||
noMoveStart: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Unfortunately zoom, bearing, etc can't have different durations and easings so
|
||||
// we need to choose one. We use the longest duration and it's corresponding easing.
|
||||
function extendDuration(easeOptions, result) {
|
||||
if (!easeOptions.duration || easeOptions.duration < result.duration) {
|
||||
easeOptions.duration = result.duration;
|
||||
easeOptions.easing = result.easing;
|
||||
}
|
||||
}
|
||||
|
||||
function calculateEasing(amount, inertiaDuration: number, inertiaOptions) {
|
||||
const { maxSpeed, linearity, deceleration } = inertiaOptions;
|
||||
const speed = clamp(
|
||||
(amount * linearity) / (inertiaDuration / 1000),
|
||||
-maxSpeed,
|
||||
maxSpeed,
|
||||
);
|
||||
const duration = Math.abs(speed) / (deceleration * linearity);
|
||||
return {
|
||||
easing: inertiaOptions.easing,
|
||||
duration: duration * 1000,
|
||||
amount: speed * (duration / 2),
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,631 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
|
||||
// tslint:disable-next-line: no-submodule-imports
|
||||
import merge from 'lodash/merge';
|
||||
import { Map } from '../map';
|
||||
import DOM from '../utils/dom';
|
||||
import BlockableMapEventHandler from './blockable_map_event';
|
||||
import BoxZoomHandler from './box_zoom';
|
||||
import ClickZoomHandler from './click_zoom';
|
||||
import { Event } from './events/event';
|
||||
import RenderFrameEvent from './events/render_event';
|
||||
import HandlerInertia from './handler_inertia';
|
||||
import { IHandler, IHandlerResult } from './IHandler';
|
||||
import KeyboardHandler from './keyboard';
|
||||
import MapEventHandler from './map_event';
|
||||
import {
|
||||
MousePanHandler,
|
||||
MousePitchHandler,
|
||||
MouseRotateHandler,
|
||||
} from './mouse';
|
||||
import ScrollZoomHandler from './scroll_zoom';
|
||||
import DoubleClickZoomHandler from './shim/dblclick_zoom';
|
||||
import DragPanHandler from './shim/drag_pan';
|
||||
import DragRotateHandler from './shim/drag_rotate';
|
||||
import TouchZoomRotateHandler from './shim/touch_zoom_rotate';
|
||||
import TapDragZoomHandler from './tap/tap_drag_zoom';
|
||||
import TapZoomHandler from './tap/tap_zoom';
|
||||
import {
|
||||
TouchPanHandler,
|
||||
TouchPitchHandler,
|
||||
TouchRotateHandler,
|
||||
TouchZoomHandler,
|
||||
} from './touch';
|
||||
|
||||
export type InputEvent = MouseEvent | TouchEvent | KeyboardEvent | WheelEvent;
|
||||
|
||||
const isMoving = (p) => p.zoom || p.drag || p.pitch || p.rotate;
|
||||
|
||||
function hasChange(result: IHandlerResult) {
|
||||
return (
|
||||
(result.panDelta && result.panDelta.mag()) ||
|
||||
result.zoomDelta ||
|
||||
result.bearingDelta ||
|
||||
result.pitchDelta
|
||||
);
|
||||
}
|
||||
|
||||
export interface IHandlerOptions {
|
||||
interactive: boolean;
|
||||
boxZoom: boolean;
|
||||
dragRotate: boolean;
|
||||
dragPan: boolean;
|
||||
keyboard: boolean;
|
||||
doubleClickZoom: boolean;
|
||||
touchZoomRotate: boolean;
|
||||
touchPitch: boolean;
|
||||
trackResize: boolean;
|
||||
renderWorldCopies: boolean;
|
||||
bearingSnap: number;
|
||||
clickTolerance: number;
|
||||
pitchWithRotate: boolean;
|
||||
}
|
||||
|
||||
class HandlerManager {
|
||||
private map: Map;
|
||||
private el: HTMLElement;
|
||||
private handlers: Array<{
|
||||
handlerName: string;
|
||||
handler: IHandler;
|
||||
allowed: any;
|
||||
}>;
|
||||
private eventsInProgress: any;
|
||||
private frameId: number;
|
||||
private inertia: HandlerInertia;
|
||||
private bearingSnap: number;
|
||||
private handlersById: { [key: string]: IHandler };
|
||||
private updatingCamera: boolean;
|
||||
private changes: Array<[IHandlerResult, any, any]>;
|
||||
private previousActiveHandlers: { [key: string]: IHandler };
|
||||
private bearingChanged: boolean;
|
||||
private listeners: Array<
|
||||
[HTMLElement, string, void | { passive?: boolean; capture?: boolean }]
|
||||
>;
|
||||
|
||||
constructor(map: Map, options: IHandlerOptions) {
|
||||
this.map = map;
|
||||
this.el = this.map.getCanvasContainer();
|
||||
this.handlers = [];
|
||||
this.handlersById = {};
|
||||
this.changes = [];
|
||||
|
||||
this.inertia = new HandlerInertia(map);
|
||||
this.bearingSnap = options.bearingSnap;
|
||||
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 = [
|
||||
// Bind touchstart and touchmove with passive: false because, even though
|
||||
// they only fire a map events and therefore could theoretically be
|
||||
// passive, binding with passive: true causes iOS not to respect
|
||||
// e.preventDefault() in _other_ handlers, even if they are non-passive
|
||||
// (see https://bugs.webkit.org/show_bug.cgi?id=184251)
|
||||
[el, 'touchstart', { passive: false }],
|
||||
[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.
|
||||
// @ts-ignore
|
||||
[window.document, 'mousemove', { capture: true }],
|
||||
// @ts-ignore
|
||||
[window.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],
|
||||
// @ts-ignore
|
||||
[window, 'blur', undefined],
|
||||
];
|
||||
|
||||
for (const [target, type, listenerOptions] of this.listeners) {
|
||||
// @ts-ignore
|
||||
DOM.addEventListener(
|
||||
target,
|
||||
type,
|
||||
// @ts-ignore
|
||||
target === window.document ? this.handleWindowEvent : this.handleEvent,
|
||||
listenerOptions,
|
||||
);
|
||||
}
|
||||
}
|
||||
public destroy() {
|
||||
for (const [target, type, listenerOptions] of this.listeners) {
|
||||
// @ts-ignore
|
||||
DOM.removeEventListener(
|
||||
target,
|
||||
type,
|
||||
target === window.document ? this.handleWindowEvent : this.handleEvent,
|
||||
listenerOptions,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
public stop() {
|
||||
// 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({}, {});
|
||||
this.changes = [];
|
||||
}
|
||||
|
||||
public isActive() {
|
||||
for (const { handler } of this.handlers) {
|
||||
if (handler.isActive()) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
public isZooming() {
|
||||
return !!this.eventsInProgress.zoom || this.map.scrollZoom.isZooming();
|
||||
}
|
||||
public isRotating() {
|
||||
return !!this.eventsInProgress.rotate;
|
||||
}
|
||||
|
||||
public isMoving() {
|
||||
return Boolean(isMoving(this.eventsInProgress)) || this.isZooming();
|
||||
}
|
||||
|
||||
public handleWindowEvent = (e: InputEvent) => {
|
||||
this.handleEvent(e, `${e.type}Window`);
|
||||
};
|
||||
|
||||
public handleEvent = (
|
||||
e: InputEvent | RenderFrameEvent,
|
||||
eventName?: string,
|
||||
) => {
|
||||
if (e.type === 'blur') {
|
||||
this.stop();
|
||||
return;
|
||||
}
|
||||
this.updatingCamera = true;
|
||||
const inputEvent = e.type === 'renderFrame' ? undefined : (e as InputEvent);
|
||||
|
||||
/*
|
||||
* We don't call e.preventDefault() for any events by default.
|
||||
* Handlers are responsible for calling it where necessary.
|
||||
*/
|
||||
|
||||
const mergedIHandlerResult: IHandlerResult = { needsRenderFrame: false };
|
||||
const eventsInProgress: { [key: string]: any } = {};
|
||||
const activeHandlers: { [key: string]: any } = {};
|
||||
// @ts-ignore
|
||||
const mapTouches = e.touches
|
||||
? this.getMapTouches((e as TouchEvent).touches)
|
||||
: undefined;
|
||||
const points = mapTouches
|
||||
? DOM.touchPos(this.el, mapTouches)
|
||||
: DOM.mousePos(this.el, e as MouseEvent);
|
||||
|
||||
for (const { handlerName, handler, allowed } of this.handlers) {
|
||||
if (!handler.isEnabled()) {
|
||||
continue;
|
||||
}
|
||||
let data: IHandlerResult;
|
||||
if (this.blockedByActive(activeHandlers, allowed, handlerName)) {
|
||||
handler.reset();
|
||||
} else {
|
||||
const handerName = eventName || e.type;
|
||||
// @ts-ignore
|
||||
if (handler && handler[handerName]) {
|
||||
// @ts-ignore
|
||||
data = handler[handerName](e, points, mapTouches);
|
||||
this.mergeIHandlerResult(
|
||||
mergedIHandlerResult,
|
||||
eventsInProgress,
|
||||
data,
|
||||
handlerName,
|
||||
inputEvent,
|
||||
);
|
||||
if (data && data.needsRenderFrame) {
|
||||
this.triggerRenderFrame();
|
||||
}
|
||||
}
|
||||
}
|
||||
// @ts-ignore
|
||||
if (data || handler.isActive()) {
|
||||
activeHandlers[handlerName] = handler;
|
||||
}
|
||||
}
|
||||
|
||||
const deactivatedHandlers: { [key: string]: any } = {};
|
||||
for (const name in this.previousActiveHandlers) {
|
||||
if (!activeHandlers[name]) {
|
||||
deactivatedHandlers[name] = inputEvent;
|
||||
}
|
||||
}
|
||||
this.previousActiveHandlers = activeHandlers;
|
||||
if (
|
||||
Object.keys(deactivatedHandlers).length ||
|
||||
hasChange(mergedIHandlerResult)
|
||||
) {
|
||||
this.changes.push([
|
||||
mergedIHandlerResult,
|
||||
eventsInProgress,
|
||||
deactivatedHandlers,
|
||||
]);
|
||||
this.triggerRenderFrame();
|
||||
}
|
||||
|
||||
if (Object.keys(activeHandlers).length || hasChange(mergedIHandlerResult)) {
|
||||
this.map.stop(true);
|
||||
}
|
||||
|
||||
this.updatingCamera = false;
|
||||
|
||||
const { cameraAnimation } = mergedIHandlerResult;
|
||||
if (cameraAnimation) {
|
||||
this.inertia.clear();
|
||||
this.fireEvents({}, {});
|
||||
this.changes = [];
|
||||
cameraAnimation(this.map);
|
||||
}
|
||||
};
|
||||
|
||||
public mergeIHandlerResult(
|
||||
mergedIHandlerResult: IHandlerResult,
|
||||
eventsInProgress: { [key: string]: any },
|
||||
HandlerResult: IHandlerResult,
|
||||
name: string,
|
||||
e?: InputEvent,
|
||||
) {
|
||||
if (!HandlerResult) {
|
||||
return;
|
||||
}
|
||||
|
||||
merge(mergedIHandlerResult, 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;
|
||||
}
|
||||
}
|
||||
|
||||
public triggerRenderFrame() {
|
||||
if (this.frameId === undefined) {
|
||||
this.frameId = this.map.requestRenderFrame((timeStamp: any) => {
|
||||
delete this.frameId;
|
||||
this.handleEvent(new RenderFrameEvent('renderFrame', { timeStamp }));
|
||||
this.applyChanges();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private addDefaultHandlers(options: IHandlerOptions) {
|
||||
const map = this.map;
|
||||
const el = map.getCanvasContainer();
|
||||
this.add('mapEvent', new MapEventHandler(map, options));
|
||||
|
||||
const boxZoom = (map.boxZoom = new BoxZoomHandler(map, options));
|
||||
this.add('boxZoom', boxZoom);
|
||||
|
||||
const tapZoom = new TapZoomHandler();
|
||||
const clickZoom = new ClickZoomHandler();
|
||||
map.doubleClickZoom = new DoubleClickZoomHandler(clickZoom, tapZoom);
|
||||
this.add('tapZoom', tapZoom);
|
||||
this.add('clickZoom', clickZoom);
|
||||
|
||||
const tapDragZoom = new TapDragZoomHandler();
|
||||
this.add('tapDragZoom', tapDragZoom);
|
||||
|
||||
const touchPitch = (map.touchPitch = new TouchPitchHandler());
|
||||
this.add('touchPitch', touchPitch);
|
||||
|
||||
const mouseRotate = new MouseRotateHandler(options);
|
||||
const mousePitch = new MousePitchHandler(options);
|
||||
map.dragRotate = new DragRotateHandler(options, mouseRotate, mousePitch);
|
||||
this.add('mouseRotate', mouseRotate, ['mousePitch']);
|
||||
this.add('mousePitch', mousePitch, ['mouseRotate']);
|
||||
|
||||
const mousePan = new MousePanHandler(options);
|
||||
const touchPan = new TouchPanHandler(options);
|
||||
map.dragPan = new DragPanHandler(el, mousePan, touchPan);
|
||||
this.add('mousePan', mousePan);
|
||||
this.add('touchPan', touchPan, ['touchZoom', 'touchRotate']);
|
||||
|
||||
const touchRotate = new TouchRotateHandler();
|
||||
const touchZoom = new TouchZoomHandler();
|
||||
map.touchZoomRotate = new TouchZoomRotateHandler(
|
||||
el,
|
||||
touchZoom,
|
||||
touchRotate,
|
||||
tapDragZoom,
|
||||
);
|
||||
this.add('touchRotate', touchRotate, ['touchPan', 'touchZoom']);
|
||||
this.add('touchZoom', touchZoom, ['touchPan', 'touchRotate']);
|
||||
|
||||
const scrollZoom = (map.scrollZoom = new ScrollZoomHandler(map, this));
|
||||
this.add('scrollZoom', scrollZoom, ['mousePan']);
|
||||
|
||||
const keyboard = (map.keyboard = new KeyboardHandler());
|
||||
this.add('keyboard', keyboard);
|
||||
|
||||
this.add('blockableMapEvent', new BlockableMapEventHandler(map));
|
||||
|
||||
for (const name of [
|
||||
'boxZoom',
|
||||
'doubleClickZoom',
|
||||
'tapDragZoom',
|
||||
'touchPitch',
|
||||
'dragRotate',
|
||||
'dragPan',
|
||||
'touchZoomRotate',
|
||||
'scrollZoom',
|
||||
'keyboard',
|
||||
]) {
|
||||
if (options.interactive && options[name]) {
|
||||
map[name].enable(options[name]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private add(handlerName: string, handler: IHandler, allowed?: string[]) {
|
||||
this.handlers.push({ handlerName, handler, allowed });
|
||||
this.handlersById[handlerName] = handler;
|
||||
}
|
||||
|
||||
private blockedByActive(
|
||||
activeHandlers: { [key: string]: IHandler },
|
||||
allowed: string[],
|
||||
myName: string,
|
||||
) {
|
||||
for (const name in activeHandlers) {
|
||||
if (name === myName) {
|
||||
continue;
|
||||
}
|
||||
if (!allowed || allowed.indexOf(name) < 0) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
private getMapTouches(touches: TouchList): TouchList {
|
||||
const mapTouches = [];
|
||||
for (const t of touches) {
|
||||
const target = t.target as Node;
|
||||
if (this.el.contains(target)) {
|
||||
mapTouches.push(t);
|
||||
}
|
||||
}
|
||||
return mapTouches as TouchList;
|
||||
}
|
||||
|
||||
private applyChanges() {
|
||||
const combined: { [key: string]: any } = {};
|
||||
const combinedEventsInProgress = {};
|
||||
const combinedDeactivatedHandlers = {};
|
||||
|
||||
for (const [change, eventsInProgress, deactivatedHandlers] of this
|
||||
.changes) {
|
||||
if (change.panDelta) {
|
||||
combined.panDelta = (combined.panDelta || new Point(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;
|
||||
}
|
||||
|
||||
merge(combinedEventsInProgress, eventsInProgress);
|
||||
merge(combinedDeactivatedHandlers, deactivatedHandlers);
|
||||
}
|
||||
|
||||
this.updateMapTransform(
|
||||
combined,
|
||||
combinedEventsInProgress,
|
||||
combinedDeactivatedHandlers,
|
||||
);
|
||||
this.changes = [];
|
||||
}
|
||||
|
||||
private updateMapTransform(
|
||||
combinedResult: any,
|
||||
combinedEventsInProgress: any,
|
||||
deactivatedHandlers: any,
|
||||
) {
|
||||
const map = this.map;
|
||||
const tr = map.transform;
|
||||
|
||||
if (!hasChange(combinedResult)) {
|
||||
return this.fireEvents(combinedEventsInProgress, deactivatedHandlers);
|
||||
}
|
||||
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);
|
||||
|
||||
this.map.update();
|
||||
if (!combinedResult.noInertia) {
|
||||
this.inertia.record(combinedResult);
|
||||
}
|
||||
this.fireEvents(combinedEventsInProgress, deactivatedHandlers);
|
||||
}
|
||||
|
||||
private fireEvents(
|
||||
newEventsInProgress: { [key: string]: any },
|
||||
deactivatedHandlers: { [key: string]: any },
|
||||
) {
|
||||
const wasMoving = isMoving(this.eventsInProgress);
|
||||
const nowMoving = isMoving(newEventsInProgress);
|
||||
|
||||
const startEvents: { [key: string]: any } = {};
|
||||
|
||||
for (const eventName in newEventsInProgress) {
|
||||
if (newEventsInProgress[eventName]) {
|
||||
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) {
|
||||
if (startEvents[name]) {
|
||||
this.fireEvent(name, startEvents[name]);
|
||||
}
|
||||
}
|
||||
|
||||
if (newEventsInProgress.rotate) {
|
||||
this.bearingChanged = true;
|
||||
}
|
||||
|
||||
if (nowMoving) {
|
||||
this.fireEvent('move', nowMoving.originalEvent);
|
||||
}
|
||||
|
||||
for (const eventName in newEventsInProgress) {
|
||||
if (newEventsInProgress[eventName]) {
|
||||
const { originalEvent } = newEventsInProgress[eventName];
|
||||
this.fireEvent(eventName, originalEvent);
|
||||
}
|
||||
}
|
||||
|
||||
const endEvents: { [key: string]: any } = {};
|
||||
|
||||
let originalEndEvent;
|
||||
for (const eventName in this.eventsInProgress) {
|
||||
if (this.eventsInProgress[eventName]) {
|
||||
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) {
|
||||
if (endEvents[name]) {
|
||||
this.fireEvent(name, endEvents[name]);
|
||||
}
|
||||
}
|
||||
|
||||
const stillMoving = isMoving(this.eventsInProgress);
|
||||
if ((wasMoving || nowMoving) && !stillMoving) {
|
||||
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) {
|
||||
if (shouldSnapToNorth(inertialEase.bearing || this.map.getBearing())) {
|
||||
inertialEase.bearing = 0;
|
||||
}
|
||||
this.map.easeTo(inertialEase, { originalEvent: originalEndEvent });
|
||||
} else {
|
||||
this.map.emit(
|
||||
'moveend',
|
||||
new Event('moveend', { originalEvent: originalEndEvent }),
|
||||
);
|
||||
if (shouldSnapToNorth(this.map.getBearing())) {
|
||||
this.map.resetNorth();
|
||||
}
|
||||
}
|
||||
this.bearingChanged = false;
|
||||
this.updatingCamera = false;
|
||||
}
|
||||
}
|
||||
|
||||
private fireEvent(type: string, e: any) {
|
||||
this.map.emit(type, new Event(type, e ? { originalEvent: e } : {}));
|
||||
}
|
||||
}
|
||||
|
||||
export default HandlerManager;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
|
||||
export function indexTouches(touches: Touch[], points: Point[]) {
|
||||
const obj = {};
|
||||
for (let i = 0; i < touches.length; i++) {
|
||||
obj[touches[i].identifier] = points[i];
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
import { Map } from '../map';
|
||||
|
||||
const defaultOptions = {
|
||||
panStep: 100,
|
||||
bearingStep: 15,
|
||||
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.
|
||||
*/
|
||||
class KeyboardHandler {
|
||||
private enabled: boolean;
|
||||
private active: boolean;
|
||||
private panStep: number;
|
||||
private bearingStep: number;
|
||||
private pitchStep: number;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
constructor() {
|
||||
const stepOptions = defaultOptions;
|
||||
this.panStep = stepOptions.panStep;
|
||||
this.bearingStep = stepOptions.bearingStep;
|
||||
this.pitchStep = stepOptions.pitchStep;
|
||||
}
|
||||
|
||||
public reset() {
|
||||
this.active = false;
|
||||
}
|
||||
|
||||
public keydown(e: KeyboardEvent) {
|
||||
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 {
|
||||
e.preventDefault();
|
||||
yDir = 1;
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
return;
|
||||
}
|
||||
|
||||
return {
|
||||
cameraAnimation: (map: Map) => {
|
||||
const zoom = map.getZoom();
|
||||
map.easeTo(
|
||||
{
|
||||
duration: 300,
|
||||
easeId: 'keyboardHandler',
|
||||
easing: easeOut,
|
||||
|
||||
zoom: zoomDir
|
||||
? Math.round(zoom) + zoomDir * (e.shiftKey ? 2 : 1)
|
||||
: zoom,
|
||||
bearing: map.getBearing() + bearingDir * this.bearingStep,
|
||||
pitch: map.getPitch() + pitchDir * this.pitchStep,
|
||||
offset: [-xDir * this.panStep, -yDir * this.panStep],
|
||||
center: map.getCenter(),
|
||||
},
|
||||
{ originalEvent: e },
|
||||
);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public enable() {
|
||||
this.enabled = true;
|
||||
}
|
||||
|
||||
public disable() {
|
||||
this.enabled = false;
|
||||
this.reset();
|
||||
}
|
||||
|
||||
public isEnabled() {
|
||||
return this.enabled;
|
||||
}
|
||||
|
||||
public isActive() {
|
||||
return this.active;
|
||||
}
|
||||
}
|
||||
|
||||
function easeOut(t: number) {
|
||||
return t * (2 - t);
|
||||
}
|
||||
|
||||
export default KeyboardHandler;
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
import { Map } from '../map';
|
||||
import { MapMouseEvent, MapTouchEvent, MapWheelEvent } from './events';
|
||||
|
||||
export default class MapEventHandler {
|
||||
private mousedownPos: Point;
|
||||
private clickTolerance: number;
|
||||
private map: Map;
|
||||
|
||||
constructor(map: Map, options: { clickTolerance: number }) {
|
||||
this.map = map;
|
||||
this.clickTolerance = options.clickTolerance;
|
||||
}
|
||||
|
||||
public reset() {
|
||||
delete this.mousedownPos;
|
||||
}
|
||||
|
||||
public wheel(e: WheelEvent) {
|
||||
// If mapEvent.preventDefault() is called by the user, prevent handlers such as:
|
||||
// - ScrollZoom
|
||||
return this.firePreventable(new MapWheelEvent(e.type, this.map, e));
|
||||
}
|
||||
|
||||
public mousedown(e: MouseEvent, point: Point) {
|
||||
this.mousedownPos = point;
|
||||
// If mapEvent.preventDefault() is called by the user, prevent handlers such as:
|
||||
// - MousePan
|
||||
// - MouseRotate
|
||||
// - MousePitch
|
||||
// - DblclickHandler
|
||||
return this.firePreventable(new MapMouseEvent(e.type, this.map, e));
|
||||
}
|
||||
|
||||
public mouseup(e: MouseEvent) {
|
||||
this.map.emit(e.type, new MapMouseEvent(e.type, this.map, e));
|
||||
}
|
||||
|
||||
public click(e: MouseEvent, point: Point) {
|
||||
if (
|
||||
this.mousedownPos &&
|
||||
this.mousedownPos.dist(point) >= this.clickTolerance
|
||||
) {
|
||||
return;
|
||||
}
|
||||
this.map.emit(e.type, new MapMouseEvent(e.type, this.map, e));
|
||||
}
|
||||
|
||||
public dblclick(e: MouseEvent) {
|
||||
// If mapEvent.preventDefault() is called by the user, prevent handlers such as:
|
||||
// - DblClickZoom
|
||||
return this.firePreventable(new MapMouseEvent(e.type, this.map, e));
|
||||
}
|
||||
|
||||
public mouseover(e: MouseEvent) {
|
||||
this.map.emit(e.type, new MapMouseEvent(e.type, this.map, e));
|
||||
}
|
||||
|
||||
public mouseout(e: MouseEvent) {
|
||||
this.map.emit(e.type, new MapMouseEvent(e.type, this.map, e));
|
||||
}
|
||||
|
||||
public touchstart(e: TouchEvent) {
|
||||
// If mapEvent.preventDefault() is called by the user, prevent handlers such as:
|
||||
// - TouchPan
|
||||
// - TouchZoom
|
||||
// - TouchRotate
|
||||
// - TouchPitch
|
||||
// - TapZoom
|
||||
// - SwipeZoom
|
||||
return this.firePreventable(new MapTouchEvent(e.type, this.map, e));
|
||||
}
|
||||
|
||||
public touchmove(e: TouchEvent) {
|
||||
this.map.emit(e.type, new MapTouchEvent(e.type, this.map, e));
|
||||
}
|
||||
|
||||
public touchend(e: TouchEvent) {
|
||||
this.map.emit(e.type, new MapTouchEvent(e.type, this.map, e));
|
||||
}
|
||||
|
||||
public touchcancel(e: TouchEvent) {
|
||||
this.map.emit(e.type, new MapTouchEvent(e.type, this.map, e));
|
||||
}
|
||||
|
||||
public firePreventable(
|
||||
mapEvent: MapMouseEvent | MapTouchEvent | MapWheelEvent,
|
||||
) {
|
||||
this.map.emit(mapEvent.type, mapEvent);
|
||||
if (mapEvent.defaultPrevented) {
|
||||
// returning an object marks the handler as active and resets other handlers
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
public isEnabled() {
|
||||
return true;
|
||||
}
|
||||
|
||||
public isActive() {
|
||||
return false;
|
||||
}
|
||||
public enable() {
|
||||
return false;
|
||||
}
|
||||
public disable() {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,183 +0,0 @@
|
|||
// @flow
|
||||
|
||||
import Point from '@mapbox/point-geometry';
|
||||
import DOM from '../utils/dom';
|
||||
|
||||
const LEFT_BUTTON = 0;
|
||||
const RIGHT_BUTTON = 2;
|
||||
|
||||
// the values for each button in MouseEvent.buttons
|
||||
const BUTTONS_FLAGS = {
|
||||
[LEFT_BUTTON]: 1,
|
||||
[RIGHT_BUTTON]: 2,
|
||||
};
|
||||
|
||||
function buttonStillPressed(e: MouseEvent, button: number) {
|
||||
const flag = BUTTONS_FLAGS[button];
|
||||
return e.buttons === undefined || (e.buttons & flag) !== flag;
|
||||
}
|
||||
|
||||
class MouseHandler {
|
||||
private enabled: boolean;
|
||||
private active: boolean;
|
||||
private lastPoint: Point;
|
||||
private eventButton: number;
|
||||
private moved: boolean;
|
||||
private clickTolerance: number;
|
||||
|
||||
constructor(options: { clickTolerance: number }) {
|
||||
this.reset();
|
||||
this.clickTolerance = options.clickTolerance || 1;
|
||||
}
|
||||
|
||||
public reset() {
|
||||
this.active = false;
|
||||
this.moved = false;
|
||||
delete this.lastPoint;
|
||||
delete this.eventButton;
|
||||
}
|
||||
|
||||
public mousedown(e: MouseEvent, point: Point) {
|
||||
if (this.lastPoint) {
|
||||
return;
|
||||
}
|
||||
|
||||
const eventButton = DOM.mouseButton(e);
|
||||
if (!this.correctButton(e, eventButton)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.lastPoint = point;
|
||||
this.eventButton = eventButton;
|
||||
}
|
||||
|
||||
public mousemoveWindow(e: MouseEvent, point: Point) {
|
||||
const lastPoint = this.lastPoint;
|
||||
if (!lastPoint) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
|
||||
if (buttonStillPressed(e, this.eventButton)) {
|
||||
// Some browsers don't fire a `mouseup` when the mouseup occurs outside
|
||||
// the window or iframe:
|
||||
// https://github.com/mapbox/mapbox-gl-js/issues/4622
|
||||
//
|
||||
// If the button is no longer pressed during this `mousemove` it may have
|
||||
// been released outside of the window or iframe.
|
||||
this.reset();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.moved && point.dist(lastPoint) < this.clickTolerance) {
|
||||
return;
|
||||
}
|
||||
this.moved = true;
|
||||
this.lastPoint = point;
|
||||
|
||||
// implemented by child class
|
||||
return this.move(lastPoint, point);
|
||||
}
|
||||
|
||||
public mouseupWindow(e: MouseEvent) {
|
||||
if (!this.lastPoint) {
|
||||
return;
|
||||
}
|
||||
const eventButton = DOM.mouseButton(e);
|
||||
if (eventButton !== this.eventButton) {
|
||||
return;
|
||||
}
|
||||
if (this.moved) {
|
||||
DOM.suppressClick();
|
||||
}
|
||||
this.reset();
|
||||
}
|
||||
|
||||
public enable() {
|
||||
this.enabled = true;
|
||||
}
|
||||
|
||||
public disable() {
|
||||
this.enabled = false;
|
||||
this.reset();
|
||||
}
|
||||
|
||||
public isEnabled() {
|
||||
return this.enabled;
|
||||
}
|
||||
|
||||
public isActive() {
|
||||
return this.active;
|
||||
}
|
||||
|
||||
private correctButton(e: MouseEvent, button: number) {
|
||||
// eslint-disable-line
|
||||
return false; // implemented by child
|
||||
}
|
||||
|
||||
private move(lastPoint: Point, point: Point) {
|
||||
// eslint-disable-line
|
||||
return {}; // implemented by child
|
||||
}
|
||||
}
|
||||
|
||||
export class MousePanHandler extends MouseHandler {
|
||||
public mousedown(e: MouseEvent, point: Point) {
|
||||
super.mousedown(e, point);
|
||||
if (this.lastPoint) {
|
||||
this.active = true;
|
||||
}
|
||||
}
|
||||
public _correctButton(e: MouseEvent, button: number) {
|
||||
return button === LEFT_BUTTON && !e.ctrlKey;
|
||||
}
|
||||
|
||||
public _move(lastPoint: Point, point: Point) {
|
||||
return {
|
||||
around: point,
|
||||
panDelta: point.sub(lastPoint),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class MouseRotateHandler extends MouseHandler {
|
||||
public _correctButton(e: MouseEvent, button: number) {
|
||||
return (button === LEFT_BUTTON && e.ctrlKey) || button === RIGHT_BUTTON;
|
||||
}
|
||||
|
||||
public _move(lastPoint: Point, point: Point) {
|
||||
const degreesPerPixelMoved = 0.8;
|
||||
const bearingDelta = (point.x - lastPoint.x) * degreesPerPixelMoved;
|
||||
if (bearingDelta) {
|
||||
this.active = true;
|
||||
return { bearingDelta };
|
||||
}
|
||||
}
|
||||
|
||||
public contextmenu(e: MouseEvent) {
|
||||
// prevent browser context menu when necessary; we don't allow it with rotation
|
||||
// because we can't discern rotation gesture start from contextmenu on Mac
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
export class MousePitchHandler extends MouseHandler {
|
||||
public _correctButton(e: MouseEvent, button: number) {
|
||||
return (button === LEFT_BUTTON && e.ctrlKey) || button === RIGHT_BUTTON;
|
||||
}
|
||||
|
||||
public _move(lastPoint: Point, point: Point) {
|
||||
const degreesPerPixelMoved = -0.5;
|
||||
const pitchDelta = (point.y - lastPoint.y) * degreesPerPixelMoved;
|
||||
if (pitchDelta) {
|
||||
this.active = true;
|
||||
return { pitchDelta };
|
||||
}
|
||||
}
|
||||
|
||||
public contextmenu(e: MouseEvent) {
|
||||
// prevent browser context menu when necessary; we don't allow it with rotation
|
||||
// because we can't discern rotation gesture start from contextmenu on Mac
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import MousePanHandler from './mousepan_handler';
|
||||
import MouseRotateHandler from './mousepitch_hander';
|
||||
import MousePitchHandler from './mouserotate_hander';
|
||||
|
||||
export { MousePanHandler, MouseRotateHandler, MousePitchHandler };
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
import { DOM } from '@antv/l7-utils';
|
||||
import Point from '@mapbox/point-geometry';
|
||||
import DOM from '../../utils/dom';
|
||||
import { buttonStillPressed } from './util';
|
||||
class MouseHandler {
|
||||
private enabled: boolean;
|
||||
private active: boolean;
|
||||
private lastPoint: Point;
|
||||
private eventButton: number;
|
||||
private moved: boolean;
|
||||
private clickTolerance: number;
|
||||
export default class MouseHandler {
|
||||
protected enabled: boolean;
|
||||
protected active: boolean;
|
||||
protected lastPoint: Point;
|
||||
protected eventButton: number;
|
||||
protected moved: boolean;
|
||||
protected clickTolerance: number;
|
||||
|
||||
constructor(options: { clickTolerance: number }) {
|
||||
this.reset();
|
||||
|
|
@ -94,12 +94,12 @@ class MouseHandler {
|
|||
return this.active;
|
||||
}
|
||||
|
||||
private correctButton(e: MouseEvent, button: number) {
|
||||
protected correctButton(e: MouseEvent, button: number) {
|
||||
// eslint-disable-line
|
||||
return false; // implemented by child
|
||||
}
|
||||
|
||||
private move(lastPoint: Point, point: Point) {
|
||||
protected move(lastPoint: Point, point: Point) {
|
||||
// eslint-disable-line
|
||||
return {}; // implemented by child
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
import DOM from '../../utils/dom';
|
||||
import MouseHandler from './mouse_handler';
|
||||
import { buttonStillPressed, LEFT_BUTTON } from './util';
|
||||
export default class MousePanHandler extends MouseHandler {
|
||||
public mousedown(e: MouseEvent, point: Point) {
|
||||
super.mousedown(e, point);
|
||||
if (this.lastPoint) {
|
||||
this.active = true;
|
||||
}
|
||||
}
|
||||
|
||||
public move(lastPoint: Point, point: Point) {
|
||||
return {
|
||||
around: point,
|
||||
panDelta: point.sub(lastPoint),
|
||||
};
|
||||
}
|
||||
protected correctButton(e: MouseEvent, button: number) {
|
||||
return button === LEFT_BUTTON && !e.ctrlKey;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
import MouseHandler from './mouse_handler';
|
||||
import { LEFT_BUTTON, RIGHT_BUTTON } from './util';
|
||||
export default class MouseRotateHandler extends MouseHandler {
|
||||
public contextmenu(e: MouseEvent) {
|
||||
// prevent browser context menu when necessary; we don't allow it with rotation
|
||||
// because we can't discern rotation gesture start from contextmenu on Mac
|
||||
e.preventDefault();
|
||||
}
|
||||
protected correctButton(e: MouseEvent, button: number) {
|
||||
return (button === LEFT_BUTTON && e.ctrlKey) || button === RIGHT_BUTTON;
|
||||
}
|
||||
|
||||
protected move(lastPoint: Point, point: Point) {
|
||||
const degreesPerPixelMoved = 0.8;
|
||||
const bearingDelta = (point.x - lastPoint.x) * degreesPerPixelMoved;
|
||||
if (bearingDelta) {
|
||||
this.active = true;
|
||||
return { bearingDelta };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
import MouseHandler from './mouse_handler';
|
||||
import { LEFT_BUTTON, RIGHT_BUTTON } from './util';
|
||||
export default class MousePitchHandler extends MouseHandler {
|
||||
public _correctButton(e: MouseEvent, button: number) {
|
||||
return (button === LEFT_BUTTON && e.ctrlKey) || button === RIGHT_BUTTON;
|
||||
}
|
||||
|
||||
public _move(lastPoint: Point, point: Point) {
|
||||
const degreesPerPixelMoved = -0.5;
|
||||
const pitchDelta = (point.y - lastPoint.y) * degreesPerPixelMoved;
|
||||
if (pitchDelta) {
|
||||
this.active = true;
|
||||
return { pitchDelta };
|
||||
}
|
||||
}
|
||||
|
||||
public contextmenu(e: MouseEvent) {
|
||||
// prevent browser context menu when necessary; we don't allow it with rotation
|
||||
// because we can't discern rotation gesture start from contextmenu on Mac
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,366 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
import LngLat from '../geo/lng_lat';
|
||||
import { Map } from '../map';
|
||||
import { bezier, ease, interpolate, now } from '../util';
|
||||
import DOM from '../utils/dom';
|
||||
import HandlerManager from './handler_manager';
|
||||
|
||||
// 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;
|
||||
|
||||
/**
|
||||
* The `ScrollZoomHandler` allows the user to zoom the map by scrolling.
|
||||
*/
|
||||
class ScrollZoomHandler {
|
||||
private map: Map;
|
||||
private el: HTMLElement;
|
||||
private enabled: boolean;
|
||||
private active: boolean;
|
||||
private zooming: boolean;
|
||||
private aroundCenter: boolean;
|
||||
private around: Point;
|
||||
private aroundPoint: Point;
|
||||
private type: 'wheel' | 'trackpad' | null;
|
||||
private lastValue: number;
|
||||
private timeout: number; // used for delayed-handling of a single wheel movement
|
||||
private finishTimeout: number; // used to delay final '{move,zoom}end' events
|
||||
|
||||
private lastWheelEvent: any;
|
||||
private lastWheelEventTime: number;
|
||||
|
||||
private startZoom: number;
|
||||
private targetZoom: number;
|
||||
private delta: number;
|
||||
private easing: (time: number) => number;
|
||||
private prevEase: {
|
||||
start: number;
|
||||
duration: number;
|
||||
easing: (_: number) => number;
|
||||
};
|
||||
|
||||
private frameId: boolean;
|
||||
private handler: HandlerManager;
|
||||
|
||||
private defaultZoomRate: number;
|
||||
private wheelZoomRate: number;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
constructor(map: Map, handler: HandlerManager) {
|
||||
this.map = map;
|
||||
this.el = map.getCanvasContainer();
|
||||
this.handler = handler;
|
||||
|
||||
this.delta = 0;
|
||||
|
||||
this.defaultZoomRate = defaultZoomRate;
|
||||
this.wheelZoomRate = wheelZoomRate;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the zoom rate of a trackpad
|
||||
* @param {number} [zoomRate=1/100] The rate used to scale trackpad movement to a zoom value.
|
||||
* @example
|
||||
* // Speed up trackpad zoom
|
||||
* map.scrollZoom.setZoomRate(1/25);
|
||||
*/
|
||||
public setZoomRate(zoomRate: number) {
|
||||
this.defaultZoomRate = zoomRate;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the zoom rate of a mouse wheel
|
||||
* @param {number} [wheelZoomRate=1/450] The rate used to scale mouse wheel movement to a zoom value.
|
||||
* @example
|
||||
* // Slow down zoom of mouse wheel
|
||||
* map.scrollZoom.setWheelZoomRate(1/600);
|
||||
*/
|
||||
public setWheelZoomRate(zoomRate: number) {
|
||||
this.wheelZoomRate = zoomRate;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a Boolean indicating whether the "scroll to zoom" interaction is enabled.
|
||||
*
|
||||
* @returns {boolean} `true` if the "scroll to zoom" interaction is enabled.
|
||||
*/
|
||||
public isEnabled() {
|
||||
return !!this.enabled;
|
||||
}
|
||||
|
||||
/*
|
||||
* Active state is turned on and off with every scroll wheel event and is set back to false before the map
|
||||
* render is called, so _active is not a good candidate for determining if a scroll zoom animation is in
|
||||
* progress.
|
||||
*/
|
||||
public isActive() {
|
||||
return !!this.active || this.finishTimeout !== undefined;
|
||||
}
|
||||
|
||||
public isZooming() {
|
||||
return !!this.zooming;
|
||||
}
|
||||
|
||||
/**
|
||||
* Enables the "scroll to zoom" interaction.
|
||||
*
|
||||
* @param {Object} [options] Options object.
|
||||
* @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' })
|
||||
*/
|
||||
public enable(options: any) {
|
||||
if (this.isEnabled()) {
|
||||
return;
|
||||
}
|
||||
this.enabled = true;
|
||||
this.aroundCenter = options && options.around === 'center';
|
||||
}
|
||||
|
||||
/**
|
||||
* Disables the "scroll to zoom" interaction.
|
||||
*
|
||||
* @example
|
||||
* map.scrollZoom.disable();
|
||||
*/
|
||||
public disable() {
|
||||
if (!this.isEnabled()) {
|
||||
return;
|
||||
}
|
||||
this.enabled = false;
|
||||
}
|
||||
|
||||
public wheel(e: WheelEvent) {
|
||||
if (!this.isEnabled()) {
|
||||
return;
|
||||
}
|
||||
// Remove `any` cast when https://github.com/facebook/flow/issues/4879 is fixed.
|
||||
let value =
|
||||
e.deltaMode === window.WheelEvent.DOM_DELTA_LINE
|
||||
? e.deltaY * 40
|
||||
: e.deltaY;
|
||||
const nowTime = now();
|
||||
const timeDelta = nowTime - (this.lastWheelEventTime || 0);
|
||||
|
||||
this.lastWheelEventTime = nowTime;
|
||||
|
||||
if (value !== 0 && value % wheelZoomDelta === 0) {
|
||||
// This one is definitely a mouse wheel event.
|
||||
this.type = 'wheel';
|
||||
} else if (value !== 0 && Math.abs(value) < 4) {
|
||||
// This one is definitely a trackpad event because it is so small.
|
||||
this.type = 'trackpad';
|
||||
} else if (timeDelta > 400) {
|
||||
// This is likely a new scroll action.
|
||||
this.type = null;
|
||||
this.lastValue = value;
|
||||
|
||||
// Start a timeout in case this was a singular event, and dely it by up to 40ms.
|
||||
this.timeout = setTimeout(this.onTimeout, 40, e);
|
||||
} else if (!this.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.
|
||||
this.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 (this.timeout) {
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = null;
|
||||
value += this.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 (this.type) {
|
||||
this.lastWheelEvent = e;
|
||||
this.delta -= value;
|
||||
if (!this.active) {
|
||||
this.start(e);
|
||||
}
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
public renderFrame() {
|
||||
return this.onScrollFrame();
|
||||
}
|
||||
|
||||
public reset() {
|
||||
this.active = false;
|
||||
}
|
||||
|
||||
private onScrollFrame() {
|
||||
if (!this.frameId) {
|
||||
return;
|
||||
}
|
||||
this.frameId = null;
|
||||
|
||||
if (!this.isActive()) {
|
||||
return;
|
||||
}
|
||||
const tr = this.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 (this.delta !== 0) {
|
||||
// For trackpad events and single mouse wheel ticks, use the default zoom rate
|
||||
const zoomRate =
|
||||
this.type === 'wheel' && Math.abs(this.delta) > wheelZoomDelta
|
||||
? this.wheelZoomRate
|
||||
: this.defaultZoomRate;
|
||||
// Scale by sigmoid of scroll wheel delta.
|
||||
let scale =
|
||||
maxScalePerFrame / (1 + Math.exp(-Math.abs(this.delta * zoomRate)));
|
||||
|
||||
if (this.delta < 0 && scale !== 0) {
|
||||
scale = 1 / scale;
|
||||
}
|
||||
|
||||
const fromScale =
|
||||
typeof this.targetZoom === 'number'
|
||||
? tr.zoomScale(this.targetZoom)
|
||||
: tr.scale;
|
||||
this.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 (this.type === 'wheel') {
|
||||
this.startZoom = tr.zoom;
|
||||
this.easing = this.smoothOutEasing(200);
|
||||
}
|
||||
|
||||
this.delta = 0;
|
||||
}
|
||||
|
||||
const targetZoom =
|
||||
typeof this.targetZoom === 'number' ? this.targetZoom : tr.zoom;
|
||||
const startZoom = this.startZoom;
|
||||
const easing = this.easing;
|
||||
|
||||
let finished = false;
|
||||
let zoom;
|
||||
if (this.type === 'wheel' && startZoom && easing) {
|
||||
const t = Math.min((now() - this.lastWheelEventTime) / 200, 1);
|
||||
const k = easing(t);
|
||||
zoom = interpolate(startZoom, targetZoom, k);
|
||||
if (t < 1) {
|
||||
if (!this.frameId) {
|
||||
this.frameId = true;
|
||||
}
|
||||
} else {
|
||||
finished = true;
|
||||
}
|
||||
} else {
|
||||
zoom = targetZoom;
|
||||
finished = true;
|
||||
}
|
||||
|
||||
this.active = true;
|
||||
|
||||
if (finished) {
|
||||
this.active = false;
|
||||
this.finishTimeout = setTimeout(() => {
|
||||
this.zooming = false;
|
||||
this.handler.triggerRenderFrame();
|
||||
delete this.targetZoom;
|
||||
delete this.finishTimeout;
|
||||
}, 200);
|
||||
}
|
||||
|
||||
return {
|
||||
noInertia: true,
|
||||
needsRenderFrame: !finished,
|
||||
zoomDelta: zoom - tr.zoom,
|
||||
around: this.aroundPoint,
|
||||
originalEvent: this.lastWheelEvent,
|
||||
};
|
||||
}
|
||||
|
||||
private onTimeout(initialEvent: any) {
|
||||
this.type = 'wheel';
|
||||
this.delta -= this.lastValue;
|
||||
if (!this.active) {
|
||||
this.start(initialEvent);
|
||||
}
|
||||
}
|
||||
|
||||
private start(e: any) {
|
||||
if (!this.delta) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.frameId) {
|
||||
this.frameId = null;
|
||||
}
|
||||
|
||||
this.active = true;
|
||||
if (!this.isZooming()) {
|
||||
this.zooming = true;
|
||||
}
|
||||
|
||||
if (this.finishTimeout) {
|
||||
clearTimeout(this.finishTimeout);
|
||||
delete this.finishTimeout;
|
||||
}
|
||||
|
||||
const pos = DOM.mousePos(this.el, e);
|
||||
|
||||
this.around = LngLat.convert(
|
||||
this.aroundCenter ? this.map.getCenter() : this.map.unproject(pos),
|
||||
);
|
||||
this.aroundPoint = this.map.transform.locationPoint(this.around);
|
||||
if (!this.frameId) {
|
||||
this.frameId = true;
|
||||
this.handler.triggerRenderFrame();
|
||||
}
|
||||
}
|
||||
|
||||
private smoothOutEasing(duration: number) {
|
||||
let easing = ease;
|
||||
|
||||
if (this.prevEase) {
|
||||
const preEase = this.prevEase;
|
||||
const t = (now() - preEase.start) / preEase.duration;
|
||||
const speed = preEase.easing(t + 0.01) - preEase.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);
|
||||
}
|
||||
|
||||
this.prevEase = {
|
||||
start: now(),
|
||||
duration,
|
||||
easing,
|
||||
};
|
||||
|
||||
return easing;
|
||||
}
|
||||
}
|
||||
|
||||
export default ScrollZoomHandler;
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
import ClickZoomHandler from '../click_zoom';
|
||||
import TapZoomHandler from '../tap/tap_zoom';
|
||||
|
||||
/**
|
||||
* The `DoubleClickZoomHandler` allows the user to zoom the map at a point by
|
||||
* double clicking or double tapping.
|
||||
*/
|
||||
export default class DoubleClickZoomHandler {
|
||||
private clickZoom: ClickZoomHandler;
|
||||
private tapZoom: TapZoomHandler;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
constructor(clickZoom: ClickZoomHandler, TapZoom: TapZoomHandler) {
|
||||
this.clickZoom = clickZoom;
|
||||
this.tapZoom = TapZoom;
|
||||
}
|
||||
|
||||
/**
|
||||
* Enables the "double click to zoom" interaction.
|
||||
*
|
||||
* @example
|
||||
* map.doubleClickZoom.enable();
|
||||
*/
|
||||
public enable() {
|
||||
this.clickZoom.enable();
|
||||
this.tapZoom.enable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Disables the "double click to zoom" interaction.
|
||||
*
|
||||
* @example
|
||||
* map.doubleClickZoom.disable();
|
||||
*/
|
||||
public disable() {
|
||||
this.clickZoom.disable();
|
||||
this.tapZoom.disable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a Boolean indicating whether the "double click to zoom" interaction is enabled.
|
||||
*
|
||||
* @returns {boolean} `true` if the "double click to zoom" interaction is enabled.
|
||||
*/
|
||||
public isEnabled() {
|
||||
return this.clickZoom.isEnabled() && this.tapZoom.isEnabled();
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a Boolean indicating whether the "double click to zoom" interaction is active, i.e. currently being used.
|
||||
*
|
||||
* @returns {boolean} `true` if the "double click to zoom" interaction is active.
|
||||
*/
|
||||
public isActive() {
|
||||
return this.clickZoom.isActive() || this.tapZoom.isActive();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
import { MousePanHandler } from '../mouse/';
|
||||
import { TouchPanHandler } from '../touch/';
|
||||
|
||||
export interface IDragPanOptions {
|
||||
linearity?: number;
|
||||
easing?: (t: number) => number;
|
||||
deceleration?: number;
|
||||
maxSpeed?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* The `DragPanHandler` allows the user to pan the map by clicking and dragging
|
||||
* the cursor.
|
||||
*/
|
||||
export default class DragPanHandler {
|
||||
private el: HTMLElement;
|
||||
private mousePan: MousePanHandler;
|
||||
private touchPan: TouchPanHandler;
|
||||
private inertiaOptions: IDragPanOptions;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
constructor(
|
||||
el: HTMLElement,
|
||||
mousePan: MousePanHandler,
|
||||
touchPan: TouchPanHandler,
|
||||
) {
|
||||
this.el = el;
|
||||
this.mousePan = mousePan;
|
||||
this.touchPan = touchPan;
|
||||
}
|
||||
|
||||
/**
|
||||
* Enables the "drag to pan" interaction.
|
||||
*
|
||||
* @param {Object} [options] Options object
|
||||
* @param {number} [options.linearity=0] factor used to scale the drag velocity
|
||||
* @param {Function} [options.easing=bezier(0, 0, 0.3, 1)] easing function applled to `map.panTo` when applying the drag.
|
||||
* @param {number} [options.maxSpeed=1400] the maximum value of the drag velocity.
|
||||
* @param {number} [options.deceleration=2500] the rate at which the speed reduces after the pan ends.
|
||||
*
|
||||
* @example
|
||||
* map.dragPan.enable();
|
||||
* @example
|
||||
* map.dragPan.enable({
|
||||
* linearity: 0.3,
|
||||
* easing: bezier(0, 0, 0.3, 1),
|
||||
* maxSpeed: 1400,
|
||||
* deceleration: 2500,
|
||||
* });
|
||||
*/
|
||||
public enable(options?: IDragPanOptions) {
|
||||
this.inertiaOptions = options || {};
|
||||
this.mousePan.enable();
|
||||
this.touchPan.enable();
|
||||
this.el.classList.add('l7-touch-drag-pan');
|
||||
}
|
||||
|
||||
/**
|
||||
* Disables the "drag to pan" interaction.
|
||||
*
|
||||
* @example
|
||||
* map.dragPan.disable();
|
||||
*/
|
||||
public disable() {
|
||||
this.mousePan.disable();
|
||||
this.touchPan.disable();
|
||||
this.el.classList.remove('l7-touch-drag-pan');
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a Boolean indicating whether the "drag to pan" interaction is enabled.
|
||||
*
|
||||
* @returns {boolean} `true` if the "drag to pan" interaction is enabled.
|
||||
*/
|
||||
public isEnabled() {
|
||||
return this.mousePan.isEnabled() && this.touchPan.isEnabled();
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
public isActive() {
|
||||
return this.mousePan.isActive() || this.touchPan.isActive();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
import { MousePitchHandler, MouseRotateHandler } from '../mouse';
|
||||
|
||||
/**
|
||||
* The `DragRotateHandler` allows the user to rotate the map by clicking and
|
||||
* dragging the cursor while holding the right mouse button or `ctrl` key.
|
||||
*/
|
||||
export default class DragRotateHandler {
|
||||
private mouseRotate: MouseRotateHandler;
|
||||
private mousePitch: MousePitchHandler;
|
||||
private pitchWithRotate: boolean;
|
||||
|
||||
/**
|
||||
* @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
|
||||
* @private
|
||||
*/
|
||||
constructor(
|
||||
options: { pitchWithRotate: boolean },
|
||||
mouseRotate: MouseRotateHandler,
|
||||
mousePitch: MousePitchHandler,
|
||||
) {
|
||||
this.pitchWithRotate = options.pitchWithRotate;
|
||||
this.mouseRotate = mouseRotate;
|
||||
this.mousePitch = mousePitch;
|
||||
}
|
||||
|
||||
/**
|
||||
* Enables the "drag to rotate" interaction.
|
||||
*
|
||||
* @example
|
||||
* map.dragRotate.enable();
|
||||
*/
|
||||
public enable() {
|
||||
this.mouseRotate.enable();
|
||||
if (this.pitchWithRotate) {
|
||||
this.mousePitch.enable();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Disables the "drag to rotate" interaction.
|
||||
*
|
||||
* @example
|
||||
* map.dragRotate.disable();
|
||||
*/
|
||||
public disable() {
|
||||
this.mouseRotate.disable();
|
||||
this.mousePitch.disable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a Boolean indicating whether the "drag to rotate" interaction is enabled.
|
||||
*
|
||||
* @returns {boolean} `true` if the "drag to rotate" interaction is enabled.
|
||||
*/
|
||||
public isEnabled() {
|
||||
return (
|
||||
this.mouseRotate.isEnabled() &&
|
||||
(!this.pitchWithRotate || this.mousePitch.isEnabled())
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
public isActive() {
|
||||
return this.mouseRotate.isActive() || this.mousePitch.isActive();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
import TapDragZoomHandler from '../tap/tap_drag_zoom';
|
||||
import { TouchRotateHandler, TouchZoomHandler } from '../touch';
|
||||
|
||||
/**
|
||||
* The `TouchZoomRotateHandler` allows the user to zoom and rotate the map by
|
||||
* pinching on a touchscreen.
|
||||
*
|
||||
* They can zoom with one finger by double tapping and dragging. On the second tap,
|
||||
* hold the finger down and drag up or down to zoom in or out.
|
||||
*/
|
||||
export default class TouchZoomRotateHandler {
|
||||
private el: HTMLElement;
|
||||
private touchZoom: TouchZoomHandler;
|
||||
private touchRotate: TouchRotateHandler;
|
||||
private tapDragZoom: TapDragZoomHandler;
|
||||
private rotationDisabled: boolean;
|
||||
private enabled: boolean;
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
constructor(
|
||||
el: HTMLElement,
|
||||
touchZoom: TouchZoomHandler,
|
||||
touchRotate: TouchRotateHandler,
|
||||
tapDragZoom: TapDragZoomHandler,
|
||||
) {
|
||||
this.el = el;
|
||||
this.touchZoom = touchZoom;
|
||||
this.touchRotate = touchRotate;
|
||||
this.tapDragZoom = tapDragZoom;
|
||||
this.rotationDisabled = false;
|
||||
this.enabled = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Enables the "pinch to rotate and zoom" interaction.
|
||||
*
|
||||
* @param {Object} [options] Options object.
|
||||
* @param {string} [options.around] If "center" is passed, map will zoom around the center
|
||||
*
|
||||
* @example
|
||||
* map.touchZoomRotate.enable();
|
||||
* @example
|
||||
* map.touchZoomRotate.enable({ around: 'center' });
|
||||
*/
|
||||
public enable(options: { around?: 'center' }) {
|
||||
this.touchZoom.enable(options);
|
||||
if (!this.rotationDisabled) {
|
||||
this.touchRotate.enable(options);
|
||||
}
|
||||
this.tapDragZoom.enable();
|
||||
this.el.classList.add('l7-touch-zoom-rotate');
|
||||
}
|
||||
|
||||
/**
|
||||
* Disables the "pinch to rotate and zoom" interaction.
|
||||
*
|
||||
* @example
|
||||
* map.touchZoomRotate.disable();
|
||||
*/
|
||||
public disable() {
|
||||
this.touchZoom.disable();
|
||||
this.touchRotate.disable();
|
||||
this.tapDragZoom.disable();
|
||||
this.el.classList.remove('l7-touch-zoom-rotate');
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
public isEnabled() {
|
||||
return (
|
||||
this.touchZoom.isEnabled() &&
|
||||
(this.rotationDisabled || this.touchRotate.isEnabled()) &&
|
||||
this.tapDragZoom.isEnabled()
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if the handler is enabled and has detected the start of a zoom/rotate gesture.
|
||||
*
|
||||
* @returns {boolean} //eslint-disable-line
|
||||
*/
|
||||
public isActive() {
|
||||
return (
|
||||
this.touchZoom.isActive() ||
|
||||
this.touchRotate.isActive() ||
|
||||
this.tapDragZoom.isActive()
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Disables the "pinch to rotate" interaction, leaving the "pinch to zoom"
|
||||
* interaction enabled.
|
||||
*
|
||||
* @example
|
||||
* map.touchZoomRotate.disableRotation();
|
||||
*/
|
||||
public disableRotation() {
|
||||
this.rotationDisabled = true;
|
||||
this.touchRotate.disable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Enables the "pinch to rotate" interaction.
|
||||
*
|
||||
* @example
|
||||
* map.touchZoomRotate.enable();
|
||||
* map.touchZoomRotate.enableRotation();
|
||||
*/
|
||||
public enableRotation() {
|
||||
this.rotationDisabled = false;
|
||||
if (this.touchZoom.isEnabled()) {
|
||||
this.touchRotate.enable();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
import { indexTouches } from '../handler_util';
|
||||
|
||||
function getCentroid(points: Point[]) {
|
||||
const sum = new Point(0, 0);
|
||||
for (const point of points) {
|
||||
sum._add(point);
|
||||
}
|
||||
// @ts-ignore
|
||||
return sum.div(points.length);
|
||||
}
|
||||
|
||||
export const MAX_TAP_INTERVAL = 500;
|
||||
export const MAX_TOUCH_TIME = 500;
|
||||
export const MAX_DIST = 30;
|
||||
|
||||
export default class SingleTapRecognizer {
|
||||
public numTouches: number;
|
||||
public centroid: Point;
|
||||
public startTime: number;
|
||||
public aborted: boolean;
|
||||
public touches: { [key: string]: Point };
|
||||
|
||||
constructor(options: { numTouches: number }) {
|
||||
this.reset();
|
||||
this.numTouches = options.numTouches;
|
||||
}
|
||||
|
||||
public reset() {
|
||||
delete this.centroid;
|
||||
delete this.startTime;
|
||||
delete this.touches;
|
||||
this.aborted = false;
|
||||
}
|
||||
|
||||
public touchstart(e: TouchEvent, points: Point[], mapTouches: Touch[]) {
|
||||
if (this.centroid || mapTouches.length > this.numTouches) {
|
||||
this.aborted = true;
|
||||
}
|
||||
if (this.aborted) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.startTime === undefined) {
|
||||
this.startTime = e.timeStamp;
|
||||
}
|
||||
|
||||
if (mapTouches.length === this.numTouches) {
|
||||
this.centroid = getCentroid(points);
|
||||
this.touches = indexTouches(mapTouches, points);
|
||||
}
|
||||
}
|
||||
|
||||
public touchmove(e: TouchEvent, points: Point[], mapTouches: Touch[]) {
|
||||
if (this.aborted || !this.centroid) {
|
||||
return;
|
||||
}
|
||||
|
||||
const newTouches = indexTouches(mapTouches, points);
|
||||
for (const id in this.touches) {
|
||||
if (this.touches[id]) {
|
||||
const prevPos = this.touches[id];
|
||||
const pos = newTouches[id];
|
||||
if (!pos || pos.dist(prevPos) > MAX_DIST) {
|
||||
this.aborted = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public touchend(e: TouchEvent, points: Point[], mapTouches: Touch[]) {
|
||||
if (!this.centroid || e.timeStamp - this.startTime > MAX_TOUCH_TIME) {
|
||||
this.aborted = true;
|
||||
}
|
||||
|
||||
if (mapTouches.length === 0) {
|
||||
const centroid = !this.aborted && this.centroid;
|
||||
this.reset();
|
||||
if (centroid) {
|
||||
return centroid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
import { MAX_TAP_INTERVAL } from './single_tap_recognizer';
|
||||
import TapRecognizer from './tap_recognizer';
|
||||
|
||||
export default class TapDragZoomHandler {
|
||||
public enabled: boolean;
|
||||
public active: boolean;
|
||||
public swipePoint: Point;
|
||||
public swipeTouch: number;
|
||||
public tapTime: number;
|
||||
public tap: TapRecognizer;
|
||||
|
||||
constructor() {
|
||||
this.tap = new TapRecognizer({
|
||||
numTouches: 1,
|
||||
numTaps: 1,
|
||||
});
|
||||
|
||||
this.reset();
|
||||
}
|
||||
|
||||
public reset() {
|
||||
this.active = false;
|
||||
delete this.swipePoint;
|
||||
delete this.swipeTouch;
|
||||
delete this.tapTime;
|
||||
this.tap.reset();
|
||||
}
|
||||
|
||||
public touchstart(e: TouchEvent, points: Point[], mapTouches: Touch[]) {
|
||||
if (this.swipePoint) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.tapTime && e.timeStamp - this.tapTime > MAX_TAP_INTERVAL) {
|
||||
this.reset();
|
||||
}
|
||||
|
||||
if (!this.tapTime) {
|
||||
this.tap.touchstart(e, points, mapTouches);
|
||||
} else if (mapTouches.length > 0) {
|
||||
this.swipePoint = points[0];
|
||||
this.swipeTouch = mapTouches[0].identifier;
|
||||
}
|
||||
}
|
||||
|
||||
public touchmove(e: TouchEvent, points: Point[], mapTouches: Touch[]) {
|
||||
if (!this.tapTime) {
|
||||
this.tap.touchmove(e, points, mapTouches);
|
||||
} else if (this.swipePoint) {
|
||||
if (mapTouches[0].identifier !== this.swipeTouch) {
|
||||
return;
|
||||
}
|
||||
|
||||
const newSwipePoint = points[0];
|
||||
const dist = newSwipePoint.y - this.swipePoint.y;
|
||||
this.swipePoint = newSwipePoint;
|
||||
|
||||
e.preventDefault();
|
||||
this.active = true;
|
||||
|
||||
return {
|
||||
zoomDelta: dist / 128,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
public touchend(e: TouchEvent, points: Point[], mapTouches: Touch[]) {
|
||||
if (!this.tapTime) {
|
||||
const point = this.tap.touchend(e, points, mapTouches);
|
||||
if (point) {
|
||||
this.tapTime = e.timeStamp;
|
||||
}
|
||||
} else if (this.swipePoint) {
|
||||
if (mapTouches.length === 0) {
|
||||
this.reset();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public touchcancel() {
|
||||
this.reset();
|
||||
}
|
||||
|
||||
public enable() {
|
||||
this.enabled = true;
|
||||
}
|
||||
|
||||
public disable() {
|
||||
this.enabled = false;
|
||||
this.reset();
|
||||
}
|
||||
|
||||
public isEnabled() {
|
||||
return this.enabled;
|
||||
}
|
||||
|
||||
public isActive() {
|
||||
return this.active;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
import SingleTapRecognizer, {
|
||||
MAX_DIST,
|
||||
MAX_TAP_INTERVAL,
|
||||
} from './single_tap_recognizer';
|
||||
|
||||
export default class TapRecognizer {
|
||||
public singleTap: SingleTapRecognizer;
|
||||
public numTaps: number;
|
||||
public lastTime: number;
|
||||
public lastTap: Point;
|
||||
public count: number;
|
||||
|
||||
constructor(options: { numTaps: number; numTouches: number }) {
|
||||
this.singleTap = new SingleTapRecognizer(options);
|
||||
this.numTaps = options.numTaps;
|
||||
this.reset();
|
||||
}
|
||||
|
||||
public reset() {
|
||||
this.lastTime = Infinity;
|
||||
delete this.lastTap;
|
||||
this.count = 0;
|
||||
this.singleTap.reset();
|
||||
}
|
||||
|
||||
public touchstart(e: TouchEvent, points: Point[], mapTouches: Touch[]) {
|
||||
this.singleTap.touchstart(e, points, mapTouches);
|
||||
}
|
||||
|
||||
public touchmove(e: TouchEvent, points: Point[], mapTouches: Touch[]) {
|
||||
this.singleTap.touchmove(e, points, mapTouches);
|
||||
}
|
||||
|
||||
public touchend(e: TouchEvent, points: Point[], mapTouches: Touch[]) {
|
||||
const tap = this.singleTap.touchend(e, points, mapTouches);
|
||||
if (tap) {
|
||||
const soonEnough = e.timeStamp - this.lastTime < MAX_TAP_INTERVAL;
|
||||
const closeEnough = !this.lastTap || this.lastTap.dist(tap) < MAX_DIST;
|
||||
|
||||
if (!soonEnough || !closeEnough) {
|
||||
this.reset();
|
||||
}
|
||||
|
||||
this.count++;
|
||||
this.lastTime = e.timeStamp;
|
||||
this.lastTap = tap;
|
||||
|
||||
if (this.count === this.numTaps) {
|
||||
this.reset();
|
||||
return tap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
import { Map } from '../../map';
|
||||
import TapRecognizer from './tap_recognizer';
|
||||
|
||||
export default class TapZoomHandler {
|
||||
public enabled: boolean;
|
||||
public active: boolean;
|
||||
public zoomIn: TapRecognizer;
|
||||
public zoomOut: TapRecognizer;
|
||||
|
||||
constructor() {
|
||||
this.zoomIn = new TapRecognizer({
|
||||
numTouches: 1,
|
||||
numTaps: 2,
|
||||
});
|
||||
|
||||
this.zoomOut = new TapRecognizer({
|
||||
numTouches: 2,
|
||||
numTaps: 1,
|
||||
});
|
||||
|
||||
this.reset();
|
||||
}
|
||||
|
||||
public reset() {
|
||||
this.active = false;
|
||||
this.zoomIn.reset();
|
||||
this.zoomOut.reset();
|
||||
}
|
||||
|
||||
public touchstart(e: TouchEvent, points: Point[], mapTouches: Touch[]) {
|
||||
this.zoomIn.touchstart(e, points, mapTouches);
|
||||
this.zoomOut.touchstart(e, points, mapTouches);
|
||||
}
|
||||
|
||||
public touchmove(e: TouchEvent, points: Point[], mapTouches: Touch[]) {
|
||||
this.zoomIn.touchmove(e, points, mapTouches);
|
||||
this.zoomOut.touchmove(e, points, mapTouches);
|
||||
}
|
||||
|
||||
public touchend(e: TouchEvent, points: Point[], mapTouches: Touch[]) {
|
||||
const zoomInPoint = this.zoomIn.touchend(e, points, mapTouches);
|
||||
const zoomOutPoint = this.zoomOut.touchend(e, points, mapTouches);
|
||||
|
||||
if (zoomInPoint) {
|
||||
this.active = true;
|
||||
e.preventDefault();
|
||||
setTimeout(() => this.reset(), 0);
|
||||
return {
|
||||
cameraAnimation: (map: Map) =>
|
||||
map.easeTo(
|
||||
{
|
||||
duration: 300,
|
||||
zoom: map.getZoom() + 1,
|
||||
around: map.unproject(zoomInPoint),
|
||||
},
|
||||
{ originalEvent: e },
|
||||
),
|
||||
};
|
||||
} else if (zoomOutPoint) {
|
||||
this.active = true;
|
||||
e.preventDefault();
|
||||
setTimeout(() => this.reset(), 0);
|
||||
return {
|
||||
cameraAnimation: (map: Map) =>
|
||||
map.easeTo(
|
||||
{
|
||||
duration: 300,
|
||||
zoom: map.getZoom() - 1,
|
||||
around: map.unproject(zoomOutPoint),
|
||||
},
|
||||
{ originalEvent: e },
|
||||
),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
public touchcancel() {
|
||||
this.reset();
|
||||
}
|
||||
|
||||
public enable() {
|
||||
this.enabled = true;
|
||||
}
|
||||
|
||||
public disable() {
|
||||
this.enabled = false;
|
||||
this.reset();
|
||||
}
|
||||
|
||||
public isEnabled() {
|
||||
return this.enabled;
|
||||
}
|
||||
|
||||
public isActive() {
|
||||
return this.active;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import TouchPanHandler from './touch_pan';
|
||||
import TouchPitchHandler from './touch_pitch';
|
||||
import TouchRotateHandler from './touch_rotate';
|
||||
import TouchZoomHandler from './touch_zoom';
|
||||
|
||||
export {
|
||||
TouchPanHandler,
|
||||
TouchPitchHandler,
|
||||
TouchRotateHandler,
|
||||
TouchZoomHandler,
|
||||
};
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
import { indexTouches } from '../handler_util';
|
||||
|
||||
export default class TouchPanHandler {
|
||||
public enabled: boolean;
|
||||
public active: boolean;
|
||||
public touches: { [key: string]: Point };
|
||||
public minTouches: number;
|
||||
public clickTolerance: number;
|
||||
public sum: Point;
|
||||
|
||||
constructor(options: { clickTolerance: number }) {
|
||||
this.minTouches = 1;
|
||||
this.clickTolerance = options.clickTolerance || 1;
|
||||
this.reset();
|
||||
}
|
||||
|
||||
public reset() {
|
||||
this.active = false;
|
||||
this.touches = {};
|
||||
this.sum = new Point(0, 0);
|
||||
}
|
||||
|
||||
public touchstart(e: TouchEvent, points: Point[], mapTouches: Touch[]) {
|
||||
return this.calculateTransform(e, points, mapTouches);
|
||||
}
|
||||
|
||||
public touchmove(e: TouchEvent, points: Point[], mapTouches: Touch[]) {
|
||||
if (!this.active) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
return this.calculateTransform(e, points, mapTouches);
|
||||
}
|
||||
|
||||
public touchend(e: TouchEvent, points: Point[], mapTouches: Touch[]) {
|
||||
this.calculateTransform(e, points, mapTouches);
|
||||
|
||||
if (this.active && mapTouches.length < this.minTouches) {
|
||||
this.reset();
|
||||
}
|
||||
}
|
||||
|
||||
public touchcancel() {
|
||||
this.reset();
|
||||
}
|
||||
public enable() {
|
||||
this.enabled = true;
|
||||
}
|
||||
|
||||
public disable() {
|
||||
this.enabled = false;
|
||||
this.reset();
|
||||
}
|
||||
|
||||
public isEnabled() {
|
||||
return this.enabled;
|
||||
}
|
||||
|
||||
public isActive() {
|
||||
return this.active;
|
||||
}
|
||||
|
||||
private calculateTransform(
|
||||
e: TouchEvent,
|
||||
points: Point[],
|
||||
mapTouches: Touch[],
|
||||
) {
|
||||
if (mapTouches.length > 0) {
|
||||
this.active = true;
|
||||
}
|
||||
|
||||
const touches = indexTouches(mapTouches, points);
|
||||
|
||||
const touchPointSum = new Point(0, 0);
|
||||
const touchDeltaSum = new Point(0, 0);
|
||||
let touchDeltaCount = 0;
|
||||
|
||||
for (const identifier in touches) {
|
||||
if (touches[identifier]) {
|
||||
const point = touches[identifier];
|
||||
const prevPoint = this.touches[identifier];
|
||||
if (prevPoint) {
|
||||
touchPointSum._add(point);
|
||||
touchDeltaSum._add(point.sub(prevPoint));
|
||||
touchDeltaCount++;
|
||||
touches[identifier] = point;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.touches = touches;
|
||||
|
||||
if (touchDeltaCount < this.minTouches || !touchDeltaSum.mag()) {
|
||||
return;
|
||||
}
|
||||
// @ts-ignore
|
||||
const panDelta = touchDeltaSum.div(touchDeltaCount);
|
||||
this.sum._add(panDelta);
|
||||
if (this.sum.mag() < this.clickTolerance) {
|
||||
return;
|
||||
}
|
||||
// @ts-ignore
|
||||
const around = touchPointSum.div(touchDeltaCount);
|
||||
|
||||
return {
|
||||
around,
|
||||
panDelta,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
import TwoTouchHandler from './two_touch';
|
||||
|
||||
function isVertical(vector) {
|
||||
return Math.abs(vector.y) > Math.abs(vector.x);
|
||||
}
|
||||
|
||||
const ALLOWED_SINGLE_TOUCH_TIME = 100;
|
||||
|
||||
export default class TouchPitchHandler extends TwoTouchHandler {
|
||||
public valid: boolean | void;
|
||||
public firstMove: number;
|
||||
public lastPoints: [Point, Point];
|
||||
|
||||
public reset() {
|
||||
super.reset();
|
||||
this.valid = undefined;
|
||||
delete this.firstMove;
|
||||
delete this.lastPoints;
|
||||
}
|
||||
|
||||
public start(points: [Point, Point]) {
|
||||
this.lastPoints = points;
|
||||
if (isVertical(points[0].sub(points[1]))) {
|
||||
// fingers are more horizontal than vertical
|
||||
this.valid = false;
|
||||
}
|
||||
}
|
||||
|
||||
public move(points: [Point, Point], center: Point, e: TouchEvent) {
|
||||
const vectorA = points[0].sub(this.lastPoints[0]);
|
||||
const vectorB = points[1].sub(this.lastPoints[1]);
|
||||
|
||||
this.valid = this.gestureBeginsVertically(vectorA, vectorB, e.timeStamp);
|
||||
if (!this.valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.lastPoints = points;
|
||||
this.active = true;
|
||||
const yDeltaAverage = (vectorA.y + vectorB.y) / 2;
|
||||
const degreesPerPixelMoved = -0.5;
|
||||
return {
|
||||
pitchDelta: yDeltaAverage * degreesPerPixelMoved,
|
||||
};
|
||||
}
|
||||
|
||||
public gestureBeginsVertically(
|
||||
vectorA: Point,
|
||||
vectorB: Point,
|
||||
timeStamp: number,
|
||||
) {
|
||||
if (this.valid !== undefined) {
|
||||
return this.valid;
|
||||
}
|
||||
|
||||
const threshold = 2;
|
||||
const movedA = vectorA.mag() >= threshold;
|
||||
const movedB = vectorB.mag() >= threshold;
|
||||
|
||||
// neither finger has moved a meaningful amount, wait
|
||||
if (!movedA && !movedB) {
|
||||
return;
|
||||
}
|
||||
|
||||
// One finger has moved and the other has not.
|
||||
// If enough time has passed, decide it is not a pitch.
|
||||
if (!movedA || !movedB) {
|
||||
if (this.firstMove === undefined) {
|
||||
this.firstMove = timeStamp;
|
||||
}
|
||||
|
||||
if (timeStamp - this.firstMove < ALLOWED_SINGLE_TOUCH_TIME) {
|
||||
// still waiting for a movement from the second finger
|
||||
return undefined;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
const isSameDirection = vectorA.y > 0 === vectorB.y > 0;
|
||||
return isVertical(vectorA) && isVertical(vectorB) && isSameDirection;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
import DOM from '../../utils/dom';
|
||||
import TwoTouchHandler from './two_touch';
|
||||
|
||||
const ROTATION_THRESHOLD = 25; // pixels along circumference of touch circle
|
||||
|
||||
function getBearingDelta(a: Point, b: Point) {
|
||||
return (a.angleWith(b) * 180) / Math.PI;
|
||||
}
|
||||
|
||||
export default class TouchRotateHandler extends TwoTouchHandler {
|
||||
private minDiameter: number;
|
||||
|
||||
public reset() {
|
||||
super.reset();
|
||||
delete this.minDiameter;
|
||||
delete this.startVector;
|
||||
delete this.vector;
|
||||
}
|
||||
|
||||
public start(points: [Point, Point]) {
|
||||
this.startVector = this.vector = points[0].sub(points[1]);
|
||||
this.minDiameter = points[0].dist(points[1]);
|
||||
}
|
||||
|
||||
public move(points: [Point, Point], pinchAround: Point) {
|
||||
const lastVector = this.vector;
|
||||
this.vector = points[0].sub(points[1]);
|
||||
|
||||
if (!this.active && this.isBelowThreshold(this.vector)) {
|
||||
return;
|
||||
}
|
||||
this.active = true;
|
||||
|
||||
return {
|
||||
bearingDelta: getBearingDelta(this.vector, lastVector),
|
||||
pinchAround,
|
||||
};
|
||||
}
|
||||
|
||||
private isBelowThreshold(vector: Point) {
|
||||
/*
|
||||
* The threshold before a rotation actually happens is configured in
|
||||
* pixels alongth circumference of the circle formed by the two fingers.
|
||||
* This makes the threshold in degrees larger when the fingers are close
|
||||
* together and smaller when the fingers are far apart.
|
||||
*
|
||||
* Use the smallest diameter from the whole gesture to reduce sensitivity
|
||||
* when pinching in and out.
|
||||
*/
|
||||
|
||||
this.minDiameter = Math.min(this.minDiameter, vector.mag());
|
||||
const circumference = Math.PI * this.minDiameter;
|
||||
const threshold = (ROTATION_THRESHOLD / circumference) * 360;
|
||||
|
||||
const bearingDeltaSinceStart = getBearingDelta(vector, this.startVector);
|
||||
return Math.abs(bearingDeltaSinceStart) < threshold;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
import DOM from '../../utils/dom';
|
||||
import TwoTouchHandler from './two_touch';
|
||||
|
||||
const ZOOM_THRESHOLD = 0.1;
|
||||
function getZoomDelta(distance: number, lastDistance: number) {
|
||||
return Math.log(distance / lastDistance) / Math.LN2;
|
||||
}
|
||||
export default class TouchZoomHandler extends TwoTouchHandler {
|
||||
private distance: number;
|
||||
private startDistance: number;
|
||||
|
||||
public reset() {
|
||||
super.reset();
|
||||
delete this.distance;
|
||||
delete this.startDistance;
|
||||
}
|
||||
|
||||
public start(points: [Point, Point]) {
|
||||
this.startDistance = this.distance = points[0].dist(points[1]);
|
||||
}
|
||||
|
||||
public move(points: [Point, Point], pinchAround: Point) {
|
||||
const lastDistance = this.distance;
|
||||
this.distance = points[0].dist(points[1]);
|
||||
if (
|
||||
!this.active &&
|
||||
Math.abs(getZoomDelta(this.distance, this.startDistance)) < ZOOM_THRESHOLD
|
||||
) {
|
||||
return;
|
||||
}
|
||||
this.active = true;
|
||||
return {
|
||||
zoomDelta: getZoomDelta(this.distance, lastDistance),
|
||||
pinchAround,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
import DOM from '../../utils/dom';
|
||||
|
||||
export default class TwoTouchHandler {
|
||||
protected enabled: boolean;
|
||||
protected active: boolean;
|
||||
protected firstTwoTouches: [number, number];
|
||||
protected vector: Point;
|
||||
protected startVector: Point;
|
||||
protected aroundCenter: boolean;
|
||||
|
||||
constructor() {
|
||||
this.reset();
|
||||
}
|
||||
|
||||
public reset() {
|
||||
this.active = false;
|
||||
delete this.firstTwoTouches;
|
||||
}
|
||||
public start(points: [Point, Point]) {
|
||||
return;
|
||||
} // eslint-disable-line
|
||||
public move(points: [Point, Point], pinchAround: Point, e: TouchEvent) {
|
||||
return {};
|
||||
} // eslint-disable-line
|
||||
|
||||
public touchstart(e: TouchEvent, points: Point[], mapTouches: Touch[]) {
|
||||
// console.log(e.target, e.targetTouches.length ? e.targetTouches[0].target : null);
|
||||
// log('touchstart', points, e.target.innerHTML, e.targetTouches.length ? e.targetTouches[0].target.innerHTML: undefined);
|
||||
if (this.firstTwoTouches || mapTouches.length < 2) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.firstTwoTouches = [mapTouches[0].identifier, mapTouches[1].identifier];
|
||||
|
||||
// implemented by child classes
|
||||
this.start([points[0], points[1]]);
|
||||
}
|
||||
|
||||
public touchmove(e: TouchEvent, points: Point[], mapTouches: Touch[]) {
|
||||
if (!this.firstTwoTouches) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
const [idA, idB] = this.firstTwoTouches;
|
||||
const a = getTouchById(mapTouches, points, idA);
|
||||
const b = getTouchById(mapTouches, points, idB);
|
||||
if (!a || !b) {
|
||||
return;
|
||||
}
|
||||
const pinchAround = this.aroundCenter ? null : a.add(b).div(2);
|
||||
|
||||
// implemented by child classes
|
||||
return this.move([a, b], pinchAround, e);
|
||||
}
|
||||
|
||||
public touchend(e: TouchEvent, points: Point[], mapTouches: Touch[]) {
|
||||
if (!this.firstTwoTouches) {
|
||||
return;
|
||||
}
|
||||
|
||||
const [idA, idB] = this.firstTwoTouches;
|
||||
const a = getTouchById(mapTouches, points, idA);
|
||||
const b = getTouchById(mapTouches, points, idB);
|
||||
if (a && b) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.active) {
|
||||
DOM.suppressClick();
|
||||
}
|
||||
|
||||
this.reset();
|
||||
}
|
||||
|
||||
public touchcancel() {
|
||||
this.reset();
|
||||
}
|
||||
|
||||
public enable(options?: { around?: 'center' }) {
|
||||
this.enabled = true;
|
||||
this.aroundCenter = !!options && options.around === 'center';
|
||||
}
|
||||
|
||||
public disable() {
|
||||
this.enabled = false;
|
||||
this.reset();
|
||||
}
|
||||
|
||||
public isEnabled() {
|
||||
return this.enabled;
|
||||
}
|
||||
|
||||
public isActive() {
|
||||
return this.active;
|
||||
}
|
||||
}
|
||||
|
||||
function getTouchById(
|
||||
mapTouches: Touch[],
|
||||
points: Point[],
|
||||
identifier: number,
|
||||
) {
|
||||
for (let i = 0; i < mapTouches.length; i++) {
|
||||
if (mapTouches[i].identifier === identifier) {
|
||||
return points[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5,7 +5,30 @@ import Camera from './camera';
|
|||
import './css/l7.css';
|
||||
import LngLat, { LngLatLike } from './geo/lng_lat';
|
||||
import LngLatBounds, { LngLatBoundsLike } from './geo/lng_lat_bounds';
|
||||
import BlockableMapEventHandler from './handler/blockable_map_event';
|
||||
import BoxZoomHandler from './handler/box_zoom';
|
||||
import ClickZoomHandler from './handler/click_zoom';
|
||||
import HandlerManager from './handler/handler_manager';
|
||||
import KeyboardHandler from './handler/keyboard';
|
||||
import MapEventHandler from './handler/map_event';
|
||||
import {
|
||||
MousePanHandler,
|
||||
MousePitchHandler,
|
||||
MouseRotateHandler,
|
||||
} from './handler/mouse';
|
||||
import ScrollZoomHandler from './handler/scroll_zoom';
|
||||
import DoubleClickZoomHandler from './handler/shim/dblclick_zoom';
|
||||
import DragPanHandler from './handler/shim/drag_pan';
|
||||
import DragRotateHandler from './handler/shim/drag_rotate';
|
||||
import TouchZoomRotateHandler from './handler/shim/touch_zoom_rotate';
|
||||
import TapDragZoomHandler from './handler/tap/tap_drag_zoom';
|
||||
import TapZoomHandler from './handler/tap/tap_zoom';
|
||||
import { TouchPitchHandler } from './handler/touch';
|
||||
import { IMapOptions } from './interface';
|
||||
import { renderframe } from './util';
|
||||
import { PerformanceUtils } from './utils/performance';
|
||||
import TaskQueue, { TaskID } from './utils/task_queue';
|
||||
|
||||
const defaultMinZoom = -2;
|
||||
const defaultMaxZoom = 22;
|
||||
|
||||
|
|
@ -38,13 +61,29 @@ const DefaultOptions: IMapOptions = {
|
|||
renderWorldCopies: true,
|
||||
};
|
||||
export class Map extends Camera {
|
||||
public doubleClickZoom: DoubleClickZoomHandler;
|
||||
public dragRotate: DragRotateHandler;
|
||||
public dragPan: DragPanHandler;
|
||||
public touchZoomRotate: TouchZoomRotateHandler;
|
||||
public scrollZoom: ScrollZoomHandler;
|
||||
public keyboard: KeyboardHandler;
|
||||
public touchPitch: TouchPitchHandler;
|
||||
public boxZoom: BoxZoomHandler;
|
||||
public handlers: HandlerManager;
|
||||
|
||||
private container: HTMLElement;
|
||||
private canvas: HTMLCanvasElement;
|
||||
private canvasContainer: HTMLElement;
|
||||
private renderTaskQueue: TaskQueue = new TaskQueue();
|
||||
private frame: { cancel: () => void } | null;
|
||||
constructor(options: Partial<IMapOptions>) {
|
||||
super(merge({}, DefaultOptions, options));
|
||||
this.initContainer();
|
||||
this.resize();
|
||||
this.handlers = new HandlerManager(this, this.options);
|
||||
// this.on('move', () => this.update());
|
||||
// this.on('moveend', () => this.update());
|
||||
// this.on('zoom', () => this.update());
|
||||
this.flyTo({
|
||||
center: options.center,
|
||||
zoom: options.zoom,
|
||||
|
|
@ -57,6 +96,7 @@ export class Map extends Camera {
|
|||
const dimensions = this.containerDimensions();
|
||||
const width = dimensions[0];
|
||||
const height = dimensions[1];
|
||||
|
||||
this.resizeCanvas(width, height);
|
||||
this.transform.resize(width, height);
|
||||
}
|
||||
|
|
@ -196,7 +236,40 @@ export class Map extends Camera {
|
|||
}
|
||||
|
||||
public remove() {
|
||||
throw new Error('空');
|
||||
if (this.frame) {
|
||||
this.frame.cancel();
|
||||
this.frame = null;
|
||||
}
|
||||
this.renderTaskQueue.clear();
|
||||
}
|
||||
|
||||
public requestRenderFrame(callback: () => void): TaskID {
|
||||
this.update();
|
||||
return this.renderTaskQueue.add(callback);
|
||||
}
|
||||
|
||||
public cancelRenderFrame(id: TaskID) {
|
||||
this.renderTaskQueue.remove(id);
|
||||
}
|
||||
|
||||
public triggerRepaint() {
|
||||
if (!this.frame) {
|
||||
this.frame = renderframe((paintStartTimeStamp: number) => {
|
||||
PerformanceUtils.frame(paintStartTimeStamp);
|
||||
this.frame = null;
|
||||
this.update(paintStartTimeStamp);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
public update(time?: number) {
|
||||
if (!this.frame) {
|
||||
this.frame = renderframe((paintStartTimeStamp: number) => {
|
||||
PerformanceUtils.frame(paintStartTimeStamp);
|
||||
this.frame = null;
|
||||
this.renderTaskQueue.run(time);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private initContainer() {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
import UnitBezier from '@mapbox/unitbezier';
|
||||
let reducedMotionQuery: MediaQueryList;
|
||||
export interface ICancelable {
|
||||
cancel: () => void;
|
||||
}
|
||||
export function wrap(n: number, min: number, max: number): number {
|
||||
const d = max - min;
|
||||
const w = ((((n - min) % d) + d) % d) + min;
|
||||
|
|
@ -71,3 +74,10 @@ export const cancel =
|
|||
window.webkitCancelAnimationFrame ||
|
||||
// @ts-ignore
|
||||
window.msCancelAnimationFrame;
|
||||
|
||||
export function renderframe(
|
||||
fn: (paintStartTimestamp: number) => void,
|
||||
): ICancelable {
|
||||
const frame = raf(fn);
|
||||
return { cancel: () => cancel(frame) };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,167 @@
|
|||
import Point from '@mapbox/point-geometry';
|
||||
|
||||
const DOM: {
|
||||
[key: string]: (...arg: any[]) => any;
|
||||
} = {};
|
||||
export default DOM;
|
||||
|
||||
DOM.create = (tagName: string, className?: string, container?: HTMLElement) => {
|
||||
const el = window.document.createElement(tagName);
|
||||
if (className !== undefined) {
|
||||
el.className = className;
|
||||
}
|
||||
if (container) {
|
||||
container.appendChild(el);
|
||||
}
|
||||
return el;
|
||||
};
|
||||
|
||||
DOM.createNS = (namespaceURI: string, tagName: string) => {
|
||||
const el = window.document.createElementNS(namespaceURI, tagName);
|
||||
return el;
|
||||
};
|
||||
|
||||
const docStyle = window.document && window.document.documentElement.style;
|
||||
|
||||
function testProp(props) {
|
||||
if (!docStyle) {
|
||||
return props[0];
|
||||
}
|
||||
for (const i of props) {
|
||||
if (i in docStyle) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return props[0];
|
||||
}
|
||||
|
||||
const selectProp = testProp([
|
||||
'userSelect',
|
||||
'MozUserSelect',
|
||||
'WebkitUserSelect',
|
||||
'msUserSelect',
|
||||
]);
|
||||
let userSelect;
|
||||
|
||||
DOM.disableDrag = () => {
|
||||
if (docStyle && selectProp) {
|
||||
userSelect = docStyle[selectProp];
|
||||
docStyle[selectProp] = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
DOM.enableDrag = () => {
|
||||
if (docStyle && selectProp) {
|
||||
docStyle[selectProp] = userSelect;
|
||||
}
|
||||
};
|
||||
|
||||
const transformProp = testProp(['transform', 'WebkitTransform']);
|
||||
|
||||
DOM.setTransform = (el: HTMLElement, value: string) => {
|
||||
// https://github.com/facebook/flow/issues/7754
|
||||
// $FlowFixMe
|
||||
el.style[transformProp] = value;
|
||||
};
|
||||
|
||||
// Feature detection for {passive: false} support in add/removeEventListener.
|
||||
let passiveSupported = false;
|
||||
|
||||
try {
|
||||
// https://github.com/facebook/flow/issues/285
|
||||
// $FlowFixMe
|
||||
const options = Object.defineProperty({}, 'passive', {
|
||||
get() {
|
||||
// eslint-disable-line
|
||||
passiveSupported = true;
|
||||
},
|
||||
});
|
||||
window.addEventListener('test', options, options);
|
||||
window.removeEventListener('test', options, options);
|
||||
} catch (err) {
|
||||
passiveSupported = false;
|
||||
}
|
||||
|
||||
DOM.addEventListener = (
|
||||
target: any,
|
||||
type: any,
|
||||
callback: any,
|
||||
options: { passive?: boolean; capture?: boolean } = {},
|
||||
) => {
|
||||
if ('passive' in options && passiveSupported) {
|
||||
target.addEventListener(type, callback, options);
|
||||
} else {
|
||||
target.addEventListener(type, callback, options.capture);
|
||||
}
|
||||
};
|
||||
|
||||
DOM.removeEventListener = (
|
||||
target: any,
|
||||
type: any,
|
||||
callback: any,
|
||||
options: { passive?: boolean; capture?: boolean } = {},
|
||||
) => {
|
||||
if ('passive' in options && passiveSupported) {
|
||||
target.removeEventListener(type, callback, options);
|
||||
} else {
|
||||
target.removeEventListener(type, callback, options.capture);
|
||||
}
|
||||
};
|
||||
|
||||
// Suppress the next click, but only if it's immediate.
|
||||
const suppressClick = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
window.removeEventListener('click', suppressClick, true);
|
||||
};
|
||||
|
||||
DOM.suppressClick = () => {
|
||||
window.addEventListener('click', suppressClick, true);
|
||||
window.setTimeout(() => {
|
||||
window.removeEventListener('click', suppressClick, true);
|
||||
}, 0);
|
||||
};
|
||||
|
||||
DOM.mousePos = (el: HTMLElement, e: MouseEvent | Touch) => {
|
||||
const rect = el.getBoundingClientRect();
|
||||
return new Point(
|
||||
e.clientX - rect.left - el.clientLeft,
|
||||
e.clientY - rect.top - el.clientTop,
|
||||
);
|
||||
};
|
||||
|
||||
DOM.touchPos = (el: HTMLElement, touches: TouchList) => {
|
||||
const rect = el.getBoundingClientRect();
|
||||
const points = [];
|
||||
for (const touche of touches) {
|
||||
points.push(
|
||||
new Point(
|
||||
touche.clientX - rect.left - el.clientLeft,
|
||||
touche.clientY - rect.top - el.clientTop,
|
||||
),
|
||||
);
|
||||
}
|
||||
return points;
|
||||
};
|
||||
|
||||
DOM.mouseButton = (e: MouseEvent) => {
|
||||
// @ts-ignore
|
||||
if (
|
||||
typeof window.InstallTrigger !== 'undefined' &&
|
||||
e.button === 2 &&
|
||||
e.ctrlKey &&
|
||||
window.navigator.platform.toUpperCase().indexOf('MAC') >= 0
|
||||
) {
|
||||
// Fix for https://github.com/mapbox/mapbox-gl-js/issues/3131:
|
||||
// Firefox (detected by InstallTrigger) on Mac determines e.button = 2 when
|
||||
// using Control + left click
|
||||
return 0;
|
||||
}
|
||||
return e.button;
|
||||
};
|
||||
|
||||
DOM.remove = (node: HTMLElement) => {
|
||||
if (node.parentNode) {
|
||||
node.parentNode.removeChild(node);
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
let lastFrameTime: number | null = null;
|
||||
let frameTimes: number[] = [];
|
||||
|
||||
const minFramerateTarget = 30;
|
||||
const frameTimeTarget = 1000 / minFramerateTarget;
|
||||
const performance = window.performance;
|
||||
|
||||
export interface IPerformanceMetrics {
|
||||
loadTime: number;
|
||||
fullLoadTime: number;
|
||||
fps: number;
|
||||
percentDroppedFrames: number;
|
||||
}
|
||||
|
||||
export const PerformanceMarkers = {
|
||||
create: 'create',
|
||||
load: 'load',
|
||||
fullLoad: 'fullLoad',
|
||||
};
|
||||
|
||||
export const PerformanceUtils = {
|
||||
mark(marker: string) {
|
||||
performance.mark(marker);
|
||||
},
|
||||
frame(timestamp: number) {
|
||||
const currTimestamp = timestamp;
|
||||
if (lastFrameTime != null) {
|
||||
const frameTime = currTimestamp - lastFrameTime;
|
||||
frameTimes.push(frameTime);
|
||||
}
|
||||
lastFrameTime = currTimestamp;
|
||||
},
|
||||
clearMetrics() {
|
||||
lastFrameTime = null;
|
||||
frameTimes = [];
|
||||
performance.clearMeasures('loadTime');
|
||||
performance.clearMeasures('fullLoadTime');
|
||||
// @ts-ignore
|
||||
// tslint:disable-next-line:forin
|
||||
for (const marker in PerformanceMarkers) {
|
||||
// @ts-ignore
|
||||
performance.clearMarks(PerformanceMarkers[marker]);
|
||||
}
|
||||
},
|
||||
getPerformanceMetrics(): IPerformanceMetrics {
|
||||
const loadTime = performance.measure(
|
||||
'loadTime',
|
||||
PerformanceMarkers.create,
|
||||
PerformanceMarkers.load,
|
||||
).duration;
|
||||
const fullLoadTime = performance.measure(
|
||||
'fullLoadTime',
|
||||
PerformanceMarkers.create,
|
||||
PerformanceMarkers.fullLoad,
|
||||
).duration;
|
||||
const totalFrames = frameTimes.length;
|
||||
|
||||
const avgFrameTime =
|
||||
frameTimes.reduce((prev, curr) => prev + curr, 0) / totalFrames / 1000;
|
||||
const fps = 1 / avgFrameTime;
|
||||
|
||||
// count frames that missed our framerate target
|
||||
const droppedFrames = frameTimes
|
||||
.filter((frameTime) => frameTime > frameTimeTarget)
|
||||
.reduce((acc, curr) => {
|
||||
return acc + (curr - frameTimeTarget) / frameTimeTarget;
|
||||
}, 0);
|
||||
const percentDroppedFrames =
|
||||
(droppedFrames / (totalFrames + droppedFrames)) * 100;
|
||||
|
||||
return {
|
||||
loadTime,
|
||||
fullLoadTime,
|
||||
fps,
|
||||
percentDroppedFrames,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
export type TaskID = number; // can't mark opaque due to https://github.com/flowtype/flow-remove-types/pull/61
|
||||
interface ITask {
|
||||
callback: (timeStamp: number) => void;
|
||||
id: TaskID;
|
||||
cancelled: boolean;
|
||||
}
|
||||
|
||||
class TaskQueue {
|
||||
private queue: ITask[];
|
||||
private id: TaskID;
|
||||
private cleared: boolean;
|
||||
private currentlyRunning: ITask[] | false;
|
||||
|
||||
constructor() {
|
||||
this.queue = [];
|
||||
this.id = 0;
|
||||
this.cleared = false;
|
||||
this.currentlyRunning = false;
|
||||
}
|
||||
|
||||
public add(callback: (timeStamp: number) => void): TaskID {
|
||||
const id = ++this.id;
|
||||
const queue = this.queue;
|
||||
queue.push({ callback, id, cancelled: false });
|
||||
return id;
|
||||
}
|
||||
|
||||
public remove(id: TaskID) {
|
||||
const running = this.currentlyRunning;
|
||||
const queue = running ? this.queue.concat(running) : this.queue;
|
||||
for (const task of queue) {
|
||||
if (task.id === id) {
|
||||
task.cancelled = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public run(timeStamp: number = 0) {
|
||||
const queue = (this.currentlyRunning = this.queue);
|
||||
|
||||
// Tasks queued by callbacks in the current queue should be executed
|
||||
// on the next run, not the current run.
|
||||
this.queue = [];
|
||||
|
||||
for (const task of queue) {
|
||||
if (task.cancelled) {
|
||||
continue;
|
||||
}
|
||||
task.callback(timeStamp);
|
||||
if (this.cleared) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
this.cleared = false;
|
||||
this.currentlyRunning = false;
|
||||
}
|
||||
|
||||
public clear() {
|
||||
if (this.currentlyRunning) {
|
||||
this.cleared = true;
|
||||
}
|
||||
this.queue = [];
|
||||
}
|
||||
}
|
||||
|
||||
export default TaskQueue;
|
||||
|
|
@ -13,7 +13,7 @@ describe('template', () => {
|
|||
map: new Map({
|
||||
center: [110.19382669582967, 30.258134],
|
||||
pitch: 0,
|
||||
zoom: 9,
|
||||
zoom: 2,
|
||||
}),
|
||||
});
|
||||
fetch(
|
||||
|
|
|
|||
|
|
@ -13187,7 +13187,7 @@ github-slugger@^1.2.1, github-slugger@^1.3.0:
|
|||
dependencies:
|
||||
emoji-regex ">=6.0.0 <=6.1.1"
|
||||
|
||||
gl-matrix@^3.0.0, gl-matrix@^3.1.0, gl-matrix@^3.2.1, gl-matrix@^3.3.0:
|
||||
gl-matrix@^3.0.0, gl-matrix@^3.1.0, gl-matrix@^3.2.1:
|
||||
version "3.3.0"
|
||||
resolved "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.3.0.tgz#232eef60b1c8b30a28cbbe75b2caf6c48fd6358b"
|
||||
integrity sha512-COb7LDz+SXaHtl/h4LeaFcNdJdAQSDeVqjiIihSXNrkWObZLhDI4hIkZC11Aeqp7bcE72clzB0BnDXr2SmslRA==
|
||||
|
|
|
|||
Loading…
Reference in New Issue