ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added option to the MouseWheel handler to trigger up/down events only

Browse Source 
when wheel is released. r=elemoine (closes #2345)


git-svn-id: http://svn.openlayers.org/trunk/openlayers@9799 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
2009-11-16 10:38:26 +00:00
parent 33e39a205a
commit ebc5d7c021
4 changed files with 125 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
examples/mousewheel-interval.html Normal file
View File

@@ -0,0 +1,43 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Mousewheel Interval Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer;
function init(){
map = new OpenLayers.Map( 'map', {controls: [
new OpenLayers.Control.Navigation(
{mouseWheelOptions: {interval: 100}}
),
new OpenLayers.Control.PanZoom(),
new OpenLayers.Control.ArgParser(),
new OpenLayers.Control.Attribution()
]} );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'} );
map.addLayer(layer);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers Mousewheel Interval Example</h1>
<div id="tags"></div>
<div id="shortdesc">Let OpenLayers send less tile requests to the server when wheel-zooming.</div>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>This example shows how to configure the Navigation control to use
the mousewheel in a less server resource consuming way: as long as you
spin the mousewheel, no request will be sent to the server. Instead,
the zoomlevel delta will be recorded. After a delay (in this example
100ms), a zoom action with the cumulated delta will be performed.</p>
</div>
</body>
</html>

25
lib/OpenLayers/Control/Navigation.js
View File

@@ -48,6 +48,13 @@ OpenLayers.Control.Navigation = OpenLayers.Class(OpenLayers.Control, {
*/ */
zoomWheelEnabled: true, zoomWheelEnabled: true,
/**
* Property: mouseWheelOptions
* {Object} Options passed to the MouseWheel control (only useful if
* <zoomWheelEnabled> is set to true)
*/
mouseWheelOptions: null,
/** /**
* APIProperty: handleRightClicks * APIProperty: handleRightClicks
* {Boolean} Whether or not to handle right clicks. Default is false. * {Boolean} Whether or not to handle right clicks. Default is false.
@@ -159,7 +166,8 @@ OpenLayers.Control.Navigation = OpenLayers.Class(OpenLayers.Control, {
this.zoomBox.draw(); this.zoomBox.draw();
this.handlers.wheel = new OpenLayers.Handler.MouseWheel( this.handlers.wheel = new OpenLayers.Handler.MouseWheel(
this, {"up" : this.wheelUp, this, {"up" : this.wheelUp,
"down": this.wheelDown} ); "down": this.wheelDown},
this.mouseWheelOptions );
}, },
/** /**
@@ -192,8 +200,11 @@ OpenLayers.Control.Navigation = OpenLayers.Class(OpenLayers.Control, {
* deltaZ - {Integer} * deltaZ - {Integer}
*/ */
wheelChange: function(evt, deltaZ) { wheelChange: function(evt, deltaZ) {
var currentZoom = this.map.getZoom();
var newZoom = this.map.getZoom() + deltaZ; var newZoom = this.map.getZoom() + deltaZ;
if (!this.map.isValidZoomLevel(newZoom)) { newZoom = Math.max(newZoom, 0);
newZoom = Math.min(newZoom, this.map.getNumZoomLevels());
if (newZoom === currentZoom) {
return; return;
} }
var size = this.map.getSize(); var size = this.map.getSize();
@@ -213,9 +224,10 @@ OpenLayers.Control.Navigation = OpenLayers.Class(OpenLayers.Control, {
* *
* Parameters: * Parameters:
* evt - {Event} * evt - {Event}
* delta - {Integer}
*/ */
wheelUp: function(evt) { wheelUp: function(evt, delta) {
this.wheelChange(evt, 1); this.wheelChange(evt, delta || 1);
}, },
/** /**
@@ -224,9 +236,10 @@ OpenLayers.Control.Navigation = OpenLayers.Class(OpenLayers.Control, {
* *
* Parameters: * Parameters:
* evt - {Event} * evt - {Event}
* delta - {Integer}
*/ */
wheelDown: function(evt) { wheelDown: function(evt, delta) {
this.wheelChange(evt, -1); this.wheelChange(evt, delta || -1);
}, },
/** /**

57
lib/OpenLayers/Handler/MouseWheel.js
View File

@@ -28,6 +28,23 @@ OpenLayers.Handler.MouseWheel = OpenLayers.Class(OpenLayers.Handler, {
*/ */
mousePosition: null, mousePosition: null,
/**
* Property: interval
* {Integer} In order to increase server performance, an interval (in
* milliseconds) can be set to reduce the number of up/down events
* called. If set, a new up/down event will not be set until the
* interval has passed.
* Defaults to 0, meaning no interval.
*/
interval: 0,
/**
* Property: delta
* {Integer} When interval is set, delta collects the mousewheel z-deltas
* of the events that occur within the interval.
*/
delta: 0,
/** /**
* Constructor: OpenLayers.Handler.MouseWheel * Constructor: OpenLayers.Handler.MouseWheel
* *
@@ -138,7 +155,31 @@ OpenLayers.Handler.MouseWheel = OpenLayers.Class(OpenLayers.Handler, {
// //
if (!overScrollableDiv && overMapDiv) { if (!overScrollableDiv && overMapDiv) {
if (overLayerDiv) { if (overLayerDiv) {
this.wheelZoom(e); var delta = 0;
if (!e) {
e = window.event;
}
if (e.wheelDelta) {
delta = e.wheelDelta/120;
if (window.opera && window.opera.version() < 9.2) {
delta = -delta;
}
} else if (e.detail) {
delta = -e.detail / 3;
}
this.delta = this.delta + delta;
if(this.interval) {
window.clearTimeout(this._timeoutId);
this._timeoutId = window.setTimeout(
OpenLayers.Function.bind(function(){
this.wheelZoom(e);
}, this),
this.interval
);
} else {
this.wheelZoom(e);
}
} }
OpenLayers.Event.stop(e); OpenLayers.Event.stop(e);
} }
@@ -153,19 +194,9 @@ OpenLayers.Handler.MouseWheel = OpenLayers.Class(OpenLayers.Handler, {
* e - {Event} * e - {Event}
*/ */
wheelZoom: function(e) { wheelZoom: function(e) {
var delta = this.delta;
this.delta = 0;
var delta = 0;
if (!e) {
e = window.event;
}
if (e.wheelDelta) {
delta = e.wheelDelta/120;
if (window.opera && window.opera.version() < 9.2) {
delta = -delta;
}
} else if (e.detail) {
delta = -e.detail / 3;
}
if (delta) { if (delta) {
// add the mouse position to the event because mozilla has // add the mouse position to the event because mozilla has
// a bug with clientX and clientY (see // a bug with clientX and clientY (see

20
tests/Handler/MouseWheel.html
View File

@@ -62,12 +62,19 @@
} }
function test_Handler_MouseWheel_events(t) { function test_Handler_MouseWheel_events(t) {
t.plan(5); t.plan(6);
var map = new OpenLayers.Map('map'); var map = new OpenLayers.Map('map');
map.addLayer(new OpenLayers.Layer.WMS("","",{}));
map.zoomToMaxExtent();
var control = new OpenLayers.Control(); var control = new OpenLayers.Control();
map.addControl(control); map.addControl(control);
var handler = new OpenLayers.Handler.MouseWheel(control); var deltaZ;
var handler = new OpenLayers.Handler.MouseWheel(control, {
'up': function(evt, delta){
deltaZ = delta;
}
}, {interval: 200});
// list below events that should be handled (events) and those // list below events that should be handled (events) and those
// that should not be handled (nonevents) by the handler // that should not be handled (nonevents) by the handler
@@ -100,6 +107,15 @@
var activated = handler.activate(); var activated = handler.activate();
var delta = 120;
if (window.opera && window.opera.version() < 9.2) delta = -delta;
handler.onWheelEvent({'target':map.layers[0].div, wheelDelta: delta});
handler.onWheelEvent({'target':map.layers[0].div, wheelDelta: delta});
t.delay_call(1, function() {
t.eq(deltaZ, 2, "Multiple scroll actions triggered one event when interval is set");
});
} }
function test_Handler_MouseWheel_deactivate(t) { function test_Handler_MouseWheel_deactivate(t) {