Event handler / interaction cleanup #1598

bhousel · 2015-10-07T04:39:13Z

jfirebaugh · 2015-10-07T18:29:27Z

@bhousel Want to think about / prototype something for #1550? (You can say no.)

mourner · 2015-10-07T18:31:36Z

js/util/browser/dom.js

+    return _setOffset(el);
+};
+exports.mousePos = function (el, e) {
+    var offset = _cachedOffset || _setOffset(el);


You can call exports.setOffset directly instead of defining an additional function.

mourner · 2015-10-07T18:33:23Z

Aside from these two minor remarks, the offset caching code looks good to me.

bhousel · 2015-10-07T18:37:56Z

Want to think about / prototype something for #1550? (You can say no.)

Yeah I think it makes sense to roll event testing (#1550) into this if I can get something working in a few days. Selenium looks promising..

mourner · 2015-10-07T18:47:13Z

@bhousel proper event testing can be a big lift so I'd prefer having it as a separate PR.

bhousel · 2015-10-07T18:51:09Z

proper event testing can be a big lift so I'd prefer having it as a separate PR.

ok, sounds good

* now support `rotatestart`, `rotateend` events * document all events * inertial rotation! * don't rely on contextmenu event

bhousel · 2015-11-18T16:57:16Z

I'm pretty happy with this now. There are some more things I could add to it, but want to avoid any additional scope creep on this PR.

@jfirebaugh @mourner want to take a look?

lucaswoj · 2015-11-18T18:23:33Z

This looks great! One minor thing: I see some console warnings when I rotate the map. These warnings are not present on master. Worth looking into (:no_entry_sign: log spew), but not a blocker if there's no easy fix.

(the message traces to util.js:184)

bhousel · 2015-11-18T19:09:58Z

I see some console warnings when I rotate the map.

@lucaswoj Yeah I did notice those too - it's from 73a15d8 where I'm making a copy of the MouseEvent from the compass button and redispatching it with the right button pressed so the DragRotate handler will handle it instead. The original event has those deprecated properties, so the copy does too. I can do a smarter copy so we don't get console warnings.

jfirebaugh · 2015-11-18T20:18:36Z

js/util/browser/dom.js

@@ -51,10 +51,19 @@ exports.suppressClick = function() {
    }, 0);
 };

-exports.mousePos = function (el, e) {
+var cachedOffset;


This is effectively a global variable, and it makes me nervous about bugs on pages with multiple maps. Are you sure setOffset always gets called when necessary?

We call setOffset on mouseenter of the canvas container:

https://github.com/mapbox/mapbox-gl-js/pull/1598/files#diff-274e90d38623e2e16a5e7d34414f33c7R649

So it should be ok for mouse, but might be a problem for touch?

jfirebaugh · 2015-11-18T20:29:21Z

Rotating with control + drag is not working on this branch.

bhousel · 2015-11-18T21:14:15Z

Rotating with control + drag is not working on this branch.

Oh interesting - I did not try that.

This worked before because control-click is a Mac operating system shortcut for right click, and the rotation handler was relying on contextmenu event. I moved away from relying on contextmenu because that event can fire differently on Windows. Anyway I'll fix this, thanks!

mourner · 2015-11-18T21:18:16Z

I moved away from relying on contextmenu because that event can fire differently on Windows.

Can you clarify? It always worked in Leaflet at least.

bhousel · 2015-11-18T21:26:01Z

Can you clarify? It always worked in Leaflet at least.

Sometimes it fires coincident with mousedown (which would be fine for a rotation handler) and other times it fires with mouseup (which would be a problem).

But I was using this page for guidance, which is admittedly kind of old, so by now browsers might have standardized on a mousedown contextmenu.

bhousel · 2015-11-18T21:30:29Z

By the way, this gist is what I use when I'm testing the event handlers. Might be helpful for others:

['mousedown', 'mouseup', 'click', 'dblclick', 'contextmenu', 
 'dragstart', 'dragend',
 'movestart', 'moveend',
 'rotatestart', 'rotateend',
 'boxzoomstart', 'boxzoomend', 'boxzoomcancel'
].forEach(function (s) {
  map.off(s).on(s, function(data) { 
    var e = data && data.originalEvent;
    console.log(s + (e ? ' buttons = ' + e.buttons + ', button = ' + e.button : '')); 
  });
});

bhousel · 2015-11-19T05:34:15Z

Can you clarify? It always worked in Leaflet at least.

Sometimes it fires coincident with mousedown (which would be fine for a rotation handler) and other times it fires with mouseup (which would be a problem).

Just tested this with IE11 and Edge, and indeed on Windows the contextmenu event fires on mouseup. It's really more of an OS design decision than a browser one.

A mouseup contextmenu means that on Windows, you don't get into rotation mode until after you release your right click, and then you are stuck in rotation mode until another mouseup happens. You can see this behavior on the master branch, or any of the maps on our examples page.

So that's one other thing that this PR fixes: rotation now works like right-click + drag on Windows too.

mourner · 2015-11-19T14:04:05Z

js/ui/handler/drag_pan.js

+        if (map.boxZoom && map.boxZoom.active) return;
+        if (map.dragRotate && map.dragRotate.active) return;
+        if (e.touches && e.touches.length > 1) return;
+        if (!e.touches && e.button !== 0) return;


this is repeated two times so maybe worth separating into a method that returns boolean

Yeah I agree, good idea..

mourner · 2015-11-19T14:07:44Z

Thanks for explanations about contextmenu — let's try to fix ctrl-drag (will probably require relying on both contextmenu and e.button). The changes generally look good, added some minor comments.

prevents div/0

(eliminates "webkitMovement" warnings)

bhousel · 2015-11-20T03:42:42Z

From @jfirebaugh:

This is effectively a global variable, and it makes me nervous about bugs on pages with multiple maps. Are you sure setOffset always gets called when necessary?

You are right that caching the getBoundingClientRect dimensions causes issues when there are multiple maps, so I'm going to revert 32eb42b and consider #854 as wontfix.

Here is what it looks like when you move from one map to another and mouseenter switches the cached offset:

* Split out methods to 1. drain inertia buffer 2. ignore events

see #1598 (comment)

bhousel · 2015-11-20T06:35:49Z

I think I addressed all the issues raised - @mourner @jfirebaugh @lucaswoj want to take another look?

jfirebaugh · 2015-11-20T16:52:01Z

👍

lucaswoj · 2015-11-20T19:15:38Z

🚢

Event handler / interaction cleanup

mourner added the in progress label Oct 7, 2015

bhousel force-pushed the event-stuff branch from c5fc748 to 925baa2 Compare October 7, 2015 12:15

mourner reviewed Oct 7, 2015
View reviewed changes

bhousel force-pushed the event-stuff branch from 4e19ca2 to 5d3c41d Compare October 7, 2015 20:45

bhousel added 2 commits November 13, 2015 14:28

Fire mousedown and mouseup (closes #1411)

1fa2958

Cache container offsets to avoid el.getBoundingClientRect (closes #854)

32eb42b

bhousel force-pushed the event-stuff branch from 5d3c41d to 32eb42b Compare November 13, 2015 19:29

bhousel added 13 commits November 13, 2015 15:43

Fire movestart/moveend on map panning (closes #1658)

4afa5e8

Emit dragstart, drag, dragend (closes #1442)

8ee3026

For DragPan and DragRotate events, include originalEvent

1cb286c

Properly drain panning inertial buffer on mouseup

dbc123d

Move event documentation after code (closes #1719)

78824f8

More selective mouse button checking for box zoom, add documentation

eef48df

More selective mouse button checking for drag_pan

0fc9378

Drag events no longer fire for rotation. Remove default false param.

9501a92

rotateTo should honor the noMoveStart option

f8956db

Stop moving map on any mousedown, better handling of contextmenu

b375f33

DragRotate improvements..

c6da72b

* now support `rotatestart`, `rotateend` events * document all events * inertial rotation! * don't rely on contextmenu event

Redispatch compass mouse events to canvasContainer (closes #1104)

73a15d8

Better handling of touches and multiple buttons

9b1ee73

jfirebaugh reviewed Nov 18, 2015
View reviewed changes

mourner reviewed Nov 19, 2015
View reviewed changes

bhousel added 2 commits November 19, 2015 10:48

Skip inertial calculataions if time or position diff = 0

b26b166

prevents div/0

Copy only the necessary properties of the mouse event

b286076

(eliminates "webkitMovement" warnings)

Refactoring and restore control+click dragging

7e6b692

* Split out methods to 1. drain inertia buffer 2. ignore events

bhousel force-pushed the event-stuff branch from ab04b04 to 7e6b692 Compare November 20, 2015 06:18

bhousel added 2 commits November 20, 2015 01:21

Add multiple maps debug page

7edb256

Do not cache container offsets (reverts 32eb42b)

c5832b3

see #1598 (comment)

bhousel mentioned this pull request Nov 20, 2015

Interaction calls getBoundingClientRect on mousemove events #854

Closed

bhousel added a commit that referenced this pull request Nov 20, 2015

Merge pull request #1598 from mapbox/event-stuff

684a170

Event handler / interaction cleanup

bhousel merged commit 684a170 into master Nov 20, 2015

mourner removed the in progress label Nov 20, 2015

bhousel deleted the event-stuff branch November 20, 2015 19:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Event handler / interaction cleanup #1598

Event handler / interaction cleanup #1598

bhousel commented Oct 7, 2015

jfirebaugh commented Oct 7, 2015

mourner Oct 7, 2015

mourner commented Oct 7, 2015

bhousel commented Oct 7, 2015

mourner commented Oct 7, 2015

bhousel commented Oct 7, 2015

bhousel commented Nov 18, 2015

lucaswoj commented Nov 18, 2015

bhousel commented Nov 18, 2015

jfirebaugh Nov 18, 2015

bhousel Nov 18, 2015

jfirebaugh commented Nov 18, 2015

bhousel commented Nov 18, 2015

mourner commented Nov 18, 2015

bhousel commented Nov 18, 2015

bhousel commented Nov 18, 2015

bhousel commented Nov 19, 2015

mourner Nov 19, 2015

bhousel Nov 19, 2015

mourner commented Nov 19, 2015

bhousel commented Nov 20, 2015

bhousel commented Nov 20, 2015

jfirebaugh commented Nov 20, 2015

lucaswoj commented Nov 20, 2015

Event handler / interaction cleanup #1598

Event handler / interaction cleanup #1598

Conversation

bhousel commented Oct 7, 2015

jfirebaugh commented Oct 7, 2015

mourner Oct 7, 2015

Choose a reason for hiding this comment

mourner commented Oct 7, 2015

bhousel commented Oct 7, 2015

mourner commented Oct 7, 2015

bhousel commented Oct 7, 2015

bhousel commented Nov 18, 2015

lucaswoj commented Nov 18, 2015

bhousel commented Nov 18, 2015

jfirebaugh Nov 18, 2015

Choose a reason for hiding this comment

bhousel Nov 18, 2015

Choose a reason for hiding this comment

jfirebaugh commented Nov 18, 2015

bhousel commented Nov 18, 2015

mourner commented Nov 18, 2015

bhousel commented Nov 18, 2015

bhousel commented Nov 18, 2015

bhousel commented Nov 19, 2015

mourner Nov 19, 2015

Choose a reason for hiding this comment

bhousel Nov 19, 2015

Choose a reason for hiding this comment

mourner commented Nov 19, 2015

bhousel commented Nov 20, 2015

bhousel commented Nov 20, 2015

jfirebaugh commented Nov 20, 2015

lucaswoj commented Nov 20, 2015