Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support disable() mid drag or rotate gesture #6232

Merged
merged 3 commits into from
Feb 26, 2018
Merged

Support disable() mid drag or rotate gesture #6232

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cb8fd3b
Move cross-handler coordination to bindHandlers
jfirebaugh Feb 24, 2018
ccf32ee
Avoid `any` casts
jfirebaugh Feb 24, 2018
9e775f4
Support disable() mid drag or rotate gesture
jfirebaugh Feb 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions src/ui/bind_handlers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,14 @@ module.exports = function bindHandlers(map: Map, options: {}) {
}

map.boxZoom.onMouseDown(e);
map.dragRotate.onDown(e);
map.dragPan.onDown(e);

if (!map.boxZoom.isActive() && !map.dragPan.isActive()) {
map.dragRotate.onMouseDown(e);
}

if (!map.boxZoom.isActive() && !map.dragRotate.isActive()) {
map.dragPan.onMouseDown(e);
}
}

function onMouseUp(e: MouseEvent) {
Expand Down Expand Up @@ -105,7 +111,10 @@ module.exports = function bindHandlers(map: Map, options: {}) {

map.stop();

map.dragPan.onDown(e);
if (!map.boxZoom.isActive() && !map.dragRotate.isActive()) {
map.dragPan.onTouchStart(e);
}

map.touchZoomRotate.onStart(e);
map.doubleClickZoom.onTouchStart(mapEvent);
}
Expand Down
168 changes: 121 additions & 47 deletions src/ui/handler/drag_pan.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const util = require('../../util/util');
const window = require('../../util/window');
const browser = require('../../util/browser');
const {Event} = require('../../util/evented');
const assert = require('assert');

import type Map from '../map';
import type Point from '@mapbox/point-geometry';
Expand All @@ -22,8 +23,7 @@ const inertiaLinearity = 0.3,
class DragPanHandler {
_map: Map;
_el: HTMLElement;
_enabled: boolean;
_active: boolean;
_state: 'disabled' | 'enabled' | 'pending' | 'active';
_pos: Point;
_previousPos: Point;
_inertia: Array<[number, Point]>;
Expand All @@ -35,10 +35,13 @@ class DragPanHandler {
constructor(map: Map) {
this._map = map;
this._el = map.getCanvasContainer();
this._state = 'disabled';

util.bindAll([
'_onMove',
'_onUp',
'_onMouseUp',
'_onTouchEnd',
'_onBlur',
'_onDragFrame'
], this);
}
Expand All @@ -49,7 +52,7 @@ class DragPanHandler {
* @returns {boolean} `true` if the "drag to pan" interaction is enabled.
*/
isEnabled() {
return !!this._enabled;
return this._state !== 'disabled';
}

/**
Expand All @@ -58,7 +61,7 @@ class DragPanHandler {
* @returns {boolean} `true` if the "drag to pan" interaction is active.
*/
isActive() {
return !!this._active;
return this._state === 'active';
}

/**
Expand All @@ -70,7 +73,7 @@ class DragPanHandler {
enable() {
if (this.isEnabled()) return;
this._el.classList.add('mapboxgl-touch-drag-pan');
this._enabled = true;
this._state = 'enabled';
}

/**
Expand All @@ -82,35 +85,60 @@ class DragPanHandler {
disable() {
if (!this.isEnabled()) return;
this._el.classList.remove('mapboxgl-touch-drag-pan');
this._enabled = false;
switch (this._state) {
case 'active':
this._state = 'disabled';
this._unbind();
this._deactivate();
this._fireEvent('dragend');
this._fireEvent('moveend');
break;
case 'pending':
this._state = 'disabled';
this._unbind();
break;
default:
this._state = 'disabled';
break;
}
}

onDown(e: MouseEvent | TouchEvent) {
if (!this.isEnabled()) return;
if (this._map.boxZoom.isActive()) return;
if (this._map.dragRotate.isActive()) return;
if (this.isActive()) return;
onMouseDown(e: MouseEvent) {
if (this._state !== 'enabled') return;
if (e.ctrlKey || DOM.mouseButton(e) !== 0) return;

// Bind window-level event listeners for move and up/end events. In the absence of
// Bind window-level event listeners for mousemove/up events. In the absence of
// the pointer capture API, which is not supported by all necessary platforms,
// window-level event listeners give us the best shot at capturing events that
// fall outside the map canvas element. Use `{capture: true}` for the move event
// to prevent map move events from being fired during a drag.
if (e.touches) {
if ((e.touches: any).length > 1) return;
window.document.addEventListener('touchmove', this._onMove, {capture: true});
window.document.addEventListener('touchend', this._onUp);
} else {
if (e.ctrlKey || DOM.mouseButton((e: any)) !== 0) return;
window.document.addEventListener('mousemove', this._onMove, {capture: true});
window.document.addEventListener('mouseup', this._onUp);
}
window.document.addEventListener('mousemove', this._onMove, {capture: true});
window.document.addEventListener('mouseup', this._onMouseUp);

this._start(e);
}

onTouchStart(e: TouchEvent) {
if (this._state !== 'enabled') return;
if (e.touches.length > 1) return;

// Bind window-level event listeners for touchmove/end events. In the absence of
// the pointer capture API, which is not supported by all necessary platforms,
// window-level event listeners give us the best shot at capturing events that
// fall outside the map canvas element. Use `{capture: true}` for the move event
// to prevent map move events from being fired during a drag.
window.document.addEventListener('touchmove', this._onMove, {capture: true});
window.document.addEventListener('touchend', this._onTouchEnd);

this._start(e);
}

_start(e: MouseEvent | TouchEvent) {
// Deactivate when the window loses focus. Otherwise if a mouseup occurs when the window
// isn't in focus, dragging will continue even though the mouse is no longer pressed.
window.addEventListener('blur', this._onUp);
window.addEventListener('blur', this._onBlur);

this._active = false;
this._state = 'pending';
this._previousPos = DOM.mousePos(this._el, e);
this._inertia = [[browser.now(), this._previousPos]];
}
Expand All @@ -123,10 +151,10 @@ class DragPanHandler {
this._drainInertiaBuffer();
this._inertia.push([browser.now(), this._pos]);

if (!this.isActive()) {
if (this._state === 'pending') {
// we treat the first move event (rather than the mousedown event)
// as the start of the drag
this._active = true;
this._state = 'active';
this._fireEvent('dragstart', e);
this._fireEvent('movestart', e);
}
Expand All @@ -150,38 +178,84 @@ class DragPanHandler {
delete this._lastMoveEvent;
}

/**
* Called when dragging stops.
* @private
*/
_onUp(e: MouseEvent | TouchEvent | FocusEvent) {
if (e.type === 'mouseup' && DOM.mouseButton((e: any)) !== 0) return;
_onMouseUp(e: MouseEvent) {
if (DOM.mouseButton(e) !== 0) return;
switch (this._state) {
case 'active':
this._state = 'enabled';
DOM.suppressClick();
this._unbind();
this._deactivate();
this._inertialPan(e);
break;
case 'pending':
this._state = 'enabled';
this._unbind();
break;
default:
assert(false);
break;
}
}

_onTouchEnd(e: TouchEvent) {
switch (this._state) {
case 'active':
this._state = 'enabled';
this._unbind();
this._deactivate();
this._inertialPan(e);
break;
case 'pending':
this._state = 'enabled';
this._unbind();
break;
default:
assert(false);
break;
}
}

_onBlur(e: FocusEvent) {
switch (this._state) {
case 'active':
this._state = 'enabled';
this._unbind();
this._deactivate();
this._fireEvent('dragend', e);
this._fireEvent('moveend', e);
break;
case 'pending':
this._state = 'enabled';
this._unbind();
break;
default:
assert(false);
break;
}
}

_unbind() {
window.document.removeEventListener('touchmove', this._onMove, {capture: true});
window.document.removeEventListener('touchend', this._onUp);
window.document.removeEventListener('touchend', this._onTouchEnd);
window.document.removeEventListener('mousemove', this._onMove, {capture: true});
window.document.removeEventListener('mouseup', this._onUp);
window.removeEventListener('blur', this._onUp);

if (!this.isActive()) return;
window.document.removeEventListener('mouseup', this._onMouseUp);
window.removeEventListener('blur', this._onBlur);
}

this._active = false;
_deactivate() {
delete this._lastMoveEvent;
delete this._previousPos;
delete this._pos;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just noting: because there's a state called 'active', I (briefly) found it confusing to have a method called _deactivate that doesn't affect this.state... but I can't think of any better names.


DOM.suppressClick();

_inertialPan(e: MouseEvent | TouchEvent) {
this._fireEvent('dragend', e);
this._drainInertiaBuffer();

const finish = () => {
this._fireEvent('moveend', e);
};

this._drainInertiaBuffer();
const inertia = this._inertia;
if (inertia.length < 2) {
finish();
this._fireEvent('moveend', e);
return;
}

Expand All @@ -191,7 +265,7 @@ class DragPanHandler {
flingDuration = (last[0] - first[0]) / 1000;

if (flingDuration === 0 || last[1].equals(first[1])) {
finish();
this._fireEvent('moveend', e);
return;
}

Expand Down
Loading