Skip to content

Panning in mobile devices#2296

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

Merged
dy merged 13 commits into from
Feb 6, 2018
Merged

Panning in mobile devices #2296

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
7221cd0
Prevent event, mute logging
dy Jan 25, 2018
701edca
Introduce has-passive-events
dy Jan 26, 2018
fa1db3b
Fix gl2d camera events
dy Jan 26, 2018
05ded3c
Fix error
dy Jan 26, 2018
f64680a
Cut pauseEvent wrapper
dy Jan 29, 2018
4bc25be
Add cancelable events test
dy Jan 30, 2018
b235c09
Add gl2d test for panning
dy Jan 30, 2018
2a61d92
Bump 3d-view-controls
dy Jan 30, 2018
8343bae
Merge branch 'master' into prevent-mobile-panning
dy Feb 5, 2018
ce9ae8c
Fix syntax
dy Feb 5, 2018
31cfd8d
Merge branch 'master' into prevent-mobile-panning
dy Feb 5, 2018
67b7a8e
Regenerate package/-lock
dy Feb 5, 2018
d14318d
Regenerate deps
dy Feb 5, 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
158 changes: 47 additions & 111 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 4 additions & 3 deletions package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -85,6 +85,7 @@
"gl-surface3d": "^1.3.4",
"glslify": "^6.1.0",
"has-hover": "^1.0.1",
"has-passive-events": "^1.0.0",
"kdgrass": "^1.0.1",
"mapbox-gl": "^0.22.0",
"matrix-camera-controller": "^2.1.3",
Expand DownExpand Up@@ -117,8 +118,8 @@
"browserify-transform-tools": "^1.7.0",
"check-node-version": "^3.2.0",
"deep-equal": "^1.0.1",
"ecstatic": "^3.1.1",
"eslint": "^4.16.0",
"ecstatic": "^3.2.0",
"eslint": "^4.17.0",
"falafel": "^2.0.0",
"fs-extra": "^2.0.0",
"fuse.js": "^3.2.0",
Expand All@@ -137,7 +138,7 @@
"karma-jasmine-spec-tags": "^1.0.1",
"karma-spec-reporter": "0.0.32",
"karma-verbose-reporter": "0.0.6",
"madge": "^3.0.0",
"madge": "^3.0.1",
"minify-stream": "^1.1.0",
"minimist": "^1.2.0",
"node-sass": "^4.7.2",
Expand Down
14 changes: 10 additions & 4 deletions src/components/dragelement/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,7 @@

var mouseOffset = require('mouse-event-offset');
var hasHover = require('has-hover');
var supportsPassive = require('has-passive-events');

var Plotly = require('../../plotly');
var Lib = require('../../lib');
Expand All@@ -27,7 +28,6 @@ var unhover = require('./unhover');
dragElement.unhover = unhover.wrapped;
dragElement.unhoverRaw = unhover.raw;

var supportsPassive = Lib.eventListenerOptionsSupported();

/**
* Abstracts click & drag interactions
Expand DownExpand Up@@ -124,6 +124,8 @@ dragElement.init = function init(options) {
var clampFn = options.clampFn || _clampFn;

function onStart(e) {
e.preventDefault();

// make dragging and dragged into properties of gd
// so that others can look at and modify them
gd._dragged = false;
Expand DownExpand Up@@ -164,10 +166,12 @@ dragElement.init = function init(options) {
document.addEventListener('touchmove', onMove);
document.addEventListener('touchend', onDone);

return Lib.pauseEvent(e);
return;
}

function onMove(e) {
e.preventDefault();

var offset = pointerOffset(e);
var minDrag = options.minDrag || constants.MINDRAG;
var dxdy = clampFn(offset[0] - startX, offset[1] - startY, minDrag);
Expand All@@ -181,7 +185,7 @@ dragElement.init = function init(options) {

if(gd._dragged && options.moveFn && !rightClick) options.moveFn(dx, dy);

return Lib.pauseEvent(e);
return;
}

function onDone(e) {
Expand All@@ -190,6 +194,8 @@ dragElement.init = function init(options) {
document.removeEventListener('touchmove', onMove);
document.removeEventListener('touchend', onDone);

e.preventDefault();

if(hasHover) {
Lib.removeElement(dragCover);
}
Expand DownExpand Up@@ -246,7 +252,7 @@ dragElement.init = function init(options) {

gd._dragged = false;

return Lib.pauseEvent(e);
return;
}
};

Expand Down
36 changes: 0 additions & 36 deletions src/lib/index.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -150,20 +150,6 @@ lib.swapAttrs = function(cont, attrList, part1, part2) {
}
};

/**
* to prevent event bubbling, in particular text selection during drag.
* see http://stackoverflow.com/questions/5429827/
* how-can-i-prevent-text-element-selection-with-cursor-drag
* for maximum effect use:
* return pauseEvent(e);
*/
lib.pauseEvent = function(e) {
if(e.stopPropagation) e.stopPropagation();
if(e.preventDefault) e.preventDefault();
e.cancelBubble = true;
return false;
};

/**
* SVG painter's algo worked around with reinsertion
*/
Expand DownExpand Up@@ -890,25 +876,3 @@ lib.subplotSort = function(a, b) {
}
return numB - numA;
};

/*
* test if event listener options supported
*/
lib.eventListenerOptionsSupported = function() {
var supported = false;

try {
var opts = Object.defineProperty({}, 'passive', {
get: function() {
supported = true;
}
});

window.addEventListener('test', null, opts);
window.removeEventListener('test', null, opts);
} catch(e) {
supported = false;
}

return supported;
};
Loading