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

Jump to bottom

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 1 commit
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
109 changes: 82 additions & 27 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,6 +35,7 @@ class DragPanHandler {
constructor(map: Map) {
this._map = map;
this._el = map.getCanvasContainer();
this._state = 'disabled';

util.bindAll([
'_onMove',
Expand All @@ -51,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 @@ -60,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 @@ -72,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 @@ -84,11 +85,26 @@ 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;
}
}

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

// Bind window-level event listeners for mousemove/up events. In the absence of
Expand All @@ -103,7 +119,7 @@ class DragPanHandler {
}

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

// Bind window-level event listeners for touchmove/end events. In the absence of
Expand All @@ -122,7 +138,7 @@ class DragPanHandler {
// isn't in focus, dragging will continue even though the mouse is no longer pressed.
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 @@ -135,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 @@ -164,43 +180,82 @@ class DragPanHandler {

_onMouseUp(e: MouseEvent) {
if (DOM.mouseButton(e) !== 0) return;
this._finish(e);
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) {
this._finish(e);
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) {
this._finish(e);
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;
}
}

_finish(e: MouseEvent | TouchEvent | FocusEvent) {
_unbind() {
window.document.removeEventListener('touchmove', this._onMove, {capture: true});
window.document.removeEventListener('touchend', this._onTouchEnd);
window.document.removeEventListener('mousemove', this._onMove, {capture: true});
window.document.removeEventListener('mouseup', this._onMouseUp);
window.removeEventListener('blur', this._onBlur);
}

if (!this.isActive()) return;

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 @@ -210,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
88 changes: 69 additions & 19 deletions src/ui/handler/drag_rotate.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.25,
class DragRotateHandler {
_map: Map;
_el: HTMLElement;
_enabled: boolean;
_active: boolean;
_state: 'disabled' | 'enabled' | 'pending' | 'active';
_button: 'right' | 'left';
_eventButton: number;
_bearingSnap: number;
Expand Down Expand Up @@ -51,6 +51,7 @@ class DragRotateHandler {
}) {
this._map = map;
this._el = options.element || map.getCanvasContainer();
this._state = 'disabled';
this._button = options.button || 'right';
this._bearingSnap = options.bearingSnap || 0;
this._pitchWithRotate = options.pitchWithRotate !== false;
Expand All @@ -69,7 +70,7 @@ class DragRotateHandler {
* @returns {boolean} `true` if the "drag to rotate" interaction is enabled.
*/
isEnabled() {
return !!this._enabled;
return this._state !== 'disabled';
}

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

/**
Expand All @@ -89,7 +90,7 @@ class DragRotateHandler {
*/
enable() {
if (this.isEnabled()) return;
this._enabled = true;
this._state = 'enabled';
}

/**
Expand All @@ -100,11 +101,29 @@ class DragRotateHandler {
*/
disable() {
if (!this.isEnabled()) return;
this._enabled = false;
switch (this._state) {
case 'active':
this._state = 'disabled';
this._unbind();
this._deactivate();
this._fireEvent('rotateend');
if (this._pitchWithRotate) {
this._fireEvent('pitchend');
}
this._fireEvent('moveend');
break;
case 'pending':
this._state = 'disabled';
this._unbind();
break;
default:
this._state = 'disabled';
break;
}
}

onMouseDown(e: MouseEvent) {
if (!this.isEnabled() || this.isActive()) return;
if (this._state !== 'enabled') return;

if (this._button === 'right') {
this._eventButton = DOM.mouseButton(e);
Expand All @@ -128,7 +147,7 @@ class DragRotateHandler {
// isn't in focus, dragging will continue even though the mouse is no longer pressed.
window.addEventListener('blur', this._onBlur);

this._active = false;
this._state = 'pending';
this._inertia = [[browser.now(), this._map.getBearing()]];
this._previousPos = DOM.mousePos(this._el, e);
this._center = this._map.transform.centerPoint; // Center of rotation
Expand All @@ -140,8 +159,8 @@ class DragRotateHandler {
this._lastMoveEvent = e;
this._pos = DOM.mousePos(this._el, e);

if (!this.isActive()) {
this._active = true;
if (this._state === 'pending') {
this._state = 'active';
this._fireEvent('rotatestart', e);
this._fireEvent('movestart', e);
if (this._pitchWithRotate) {
Expand Down Expand Up @@ -183,28 +202,59 @@ class DragRotateHandler {

_onMouseUp(e: MouseEvent) {
if (DOM.mouseButton(e) !== this._eventButton) return;
this._finish(e);
switch (this._state) {
case 'active':
this._state = 'enabled';
DOM.suppressClick();
this._unbind();
this._deactivate();
this._inertialRotate(e);
break;
case 'pending':
this._state = 'enabled';
this._unbind();
break;
default:
assert(false);
break;
}
}

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

_finish(e: MouseEvent | FocusEvent) {
_unbind() {
window.document.removeEventListener('mousemove', this._onMouseMove, {capture: true});
window.document.removeEventListener('mouseup', this._onMouseUp);
window.removeEventListener('blur', this._onBlur);

DOM.enableDrag();
}

if (!this.isActive()) return;

this._active = false;
_deactivate() {
delete this._lastMoveEvent;
delete this._previousPos;
}

DOM.suppressClick();

_inertialRotate(e: MouseEvent) {
this._fireEvent('rotateend', e);
this._drainInertiaBuffer();

Expand Down
Loading