philogb / jit

The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web
http://thejit.org
Other
1.51k stars 297 forks source link

Horizontal Mouse Scrolling Causes Zooming #132

Open jacelys opened 12 years ago

jacelys commented 12 years ago

Both horizontal and vertical scrolling cause zooming, behavior that isn't intuitive to me. For example, see the first force-directed graph demo. I have a few ideas but have only tested them in recent versions of Firefox and Chromium on Ubuntu so far, so they'd need cross-browser testing:

1) We could ignore mouse wheel events that do not have vertical components. For example, in Source/Extras/Extras.js, we have: onMouseWheel: function(e, win, scroll) { if(!this.config.zooming) return; [...] },

The if statement could change to: // e.axis !== e.VERTICAL_AXIS is for Firefox. If both are undefined, this will be false. // e.wheelDeltaY === 0 is for Chromium. If wheelDeltaY is undefined, this will be false. // e.deltaY is supposedly in newer versions of IE and Firefox. If deltaY is undefined, this will be false. if(!this.config.zooming || e.axis !== e.VERTICAL_AXIS || e.wheelDeltaY === 0 || e.deltaY === 0) return;

If all cases are false, the behavior wouldn't change. A disadvantage of this approach is that it wouldn't properly fix the case in which events have simultaneous horizontal and vertical components. I haven't seen this in practice but acknowledge that my tests have been limited.

2) We could compute the delta taking only the vertical distance into account. This would work even if an event has horizontal and vertical components. For example, in Source/Core/Core.js, we have: getWheel: function(e) { return e.wheelDelta? e.wheelDelta / 120 : -(e.detail || 0) / 3; },

If e.wheelDeltaY or e.deltaY are available, we could use those. If not, we could check e.axis to ensure that we're not dealing with horizontal scrolling in Firefox. Finally, we could default to wheelDelta, detail, or 0. I haven't checked things scaling factors yet. This is probably better than approach (1) but takes more knowledge about mouse wheel events.