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

Added documentDrag option to the DragPan control and Drag handler.

Browse Source 
When set to true, this allow pan-dragging while outside the map. 
Thanks vmx for the initial patches. r=vmx, bartvde (closes #39)


git-svn-id: http://svn.openlayers.org/trunk/openlayers@9791 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
2009-11-10 11:14:28 +00:00
parent 01debb1c53
commit c9df8f4d43
4 changed files with 153 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
examples/document-drag.html Normal file
View File

@@ -0,0 +1,39 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Document Drag 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(
{dragPanOptions: {documentDrag: true}}
),
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 Document Drag Example</h1>
<div id="tags"></div>
<div id="shortdesc">Keep on dragging even when the mouse cursor moves outside of the map</div>
<div id="map" class="smallmap"></div>
<div id="docs">
This example shows how to make a map draggable outside of the map itself.
</div>
</body>
</html>

12
lib/OpenLayers/Control/DragPan.js
View File

@@ -34,7 +34,14 @@ OpenLayers.Control.DragPan = OpenLayers.Class(OpenLayers.Control, {
* panning the map again. Set this to increase dragging performance. * panning the map again. Set this to increase dragging performance.
* Defaults to 25 milliseconds. * Defaults to 25 milliseconds.
*/ */
interval: 25, interval: 25,
/**
* APIProperty: documentDrag
* {Boolean} If set to true, mouse dragging will continue even if the
* mouse cursor leaves the map viewport. Default is false.
*/
documentDrag: false,
/** /**
* Method: draw * Method: draw
@@ -46,7 +53,8 @@ OpenLayers.Control.DragPan = OpenLayers.Class(OpenLayers.Control, {
"move": this.panMap, "move": this.panMap,
"done": this.panMapDone "done": this.panMapDone
}, { }, {
interval: this.interval interval: this.interval,
documentDrag: this.documentDrag
} }
); );
}, },

95
lib/OpenLayers/Handler/Drag.js
View File

@@ -83,6 +83,20 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
* This is "private", and should be left alone. * This is "private", and should be left alone.
*/ */
timeoutId: null, timeoutId: null,
/**
* APIProperty: documentDrag
* {Boolean} If set to true, the handler will also handle mouse moves when
* the cursor has moved out of the map viewport. Default is false.
*/
documentDrag: false,
/**
* Property: documentEvents
* {<OpenLayers.Events>} Event instance for observing document events. Will
* be set on mouseout if documentDrag is set to true.
*/
documentEvents: null,
/** /**
* Constructor: OpenLayers.Handler.Drag * Constructor: OpenLayers.Handler.Drag
@@ -210,6 +224,16 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
*/ */
mousemove: function (evt) { mousemove: function (evt) {
if (this.started && !this.timeoutId && (evt.xy.x != this.last.x || evt.xy.y != this.last.y)) { if (this.started && !this.timeoutId && (evt.xy.x != this.last.x || evt.xy.y != this.last.y)) {
if(this.documentDrag === true && this.documentEvents) {
if(evt.element === document) {
this.adjustXY(evt);
// do setEvent manually because the documentEvents are not
// registered with the map
this.setEvent(evt);
} else {
this.destroyDocumentEvents();
}
}
if (this.interval > 0) { if (this.interval > 0) {
this.timeoutId = setTimeout(OpenLayers.Function.bind(this.removeTimeout, this), this.interval); this.timeoutId = setTimeout(OpenLayers.Function.bind(this.removeTimeout, this), this.interval);
} }
@@ -245,6 +269,10 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
*/ */
mouseup: function (evt) { mouseup: function (evt) {
if (this.started) { if (this.started) {
if(this.documentDrag === true && this.documentEvents) {
this.adjustXY(evt);
this.destroyDocumentEvents();
}
var dragged = (this.start != this.last); var dragged = (this.start != this.last);
this.started = false; this.started = false;
this.dragging = false; this.dragging = false;
@@ -273,19 +301,31 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
*/ */
mouseout: function (evt) { mouseout: function (evt) {
if (this.started && OpenLayers.Util.mouseLeft(evt, this.map.div)) { if (this.started && OpenLayers.Util.mouseLeft(evt, this.map.div)) {
var dragged = (this.start != this.last); if(this.documentDrag === true) {
this.started = false; this.documentEvents = new OpenLayers.Events(this, document,
this.dragging = false; null, null, {includeXY: true});
OpenLayers.Element.removeClass( this.documentEvents.on({
this.map.viewPortDiv, "olDragDown" mousemove: this.mousemove,
); mouseup: this.mouseup
this.out(evt); });
this.callback("out", []); OpenLayers.Element.addClass(
if(dragged) { document.body, "olDragDown"
this.callback("done", [evt.xy]); );
} } else {
if(document.onselectstart) { var dragged = (this.start != this.last);
document.onselectstart = this.oldOnselectstart; this.started = false;
this.dragging = false;
OpenLayers.Element.removeClass(
this.map.viewPortDiv, "olDragDown"
);
this.out(evt);
this.callback("out", []);
if(dragged) {
this.callback("done", [evt.xy]);
}
if(document.onselectstart) {
document.onselectstart = this.oldOnselectstart;
}
} }
} }
return true; return true;
@@ -345,6 +385,35 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
} }
return deactivated; return deactivated;
}, },
/**
* Method: adjustXY
* Converts event coordinates that are relative to the document body to
* ones that are relative to the map viewport. The latter is the default in
* OpenLayers.
*
* Parameters:
* evt - {Object}
*/
adjustXY: function(evt) {
var pos = OpenLayers.Util.pagePosition(this.map.div);
evt.xy.x -= pos[0];
evt.xy.y -= pos[1];
},
/**
* Method: destroyDocumentEvents
* Destroys the events instance that gets added to the document body when
* documentDrag is true and the mouse cursor leaves the map viewport while
* dragging.
*/
destroyDocumentEvents: function() {
OpenLayers.Element.removeClass(
document.body, "olDragDown"
);
this.documentEvents.destroy();
this.documentEvents = null;
},
CLASS_NAME: "OpenLayers.Handler.Drag" CLASS_NAME: "OpenLayers.Handler.Drag"
}); });

22
tests/Control/DragPan.html
View File

@@ -36,6 +36,28 @@
t.eq(map.getCenter().lat, res * 5, "Lat is " + (res * 5) + " after drag"); t.eq(map.getCenter().lat, res * 5, "Lat is " + (res * 5) + " after drag");
t.eq(map.getCenter().lon, res * -5, "Lon is " + (res * -5) + " after drag"); t.eq(map.getCenter().lon, res * -5, "Lon is " + (res * -5) + " after drag");
} }
function test_Control_DragPan_drag_documentDrag (t) {
t.plan(4);
control = new OpenLayers.Control.DragPan({documentDrag: true});
map = new OpenLayers.Map("map", {controls:[control]});
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'} );
map.addLayer(layer);
map.zoomToMaxExtent();
map.zoomIn();
control.activate();
res = map.baseLayer.resolutions[map.getZoom()];
t.eq(map.center.lat, 0, "Lat is 0 before drag");
t.eq(map.center.lon, 0, "Lon is 0 before drag");
map.events.triggerEvent('mousedown', {'type':'mousedown', 'xy':new OpenLayers.Pixel(0,0), 'which':1});
map.events.triggerEvent('mousemove', {'type':'mousemove', 'xy':new OpenLayers.Pixel(5,5), 'which':1});
map.events.triggerEvent('mouseup', {'type':'mouseup', 'xy':new OpenLayers.Pixel(5,5), 'which':1});
t.eq(map.getCenter().lat, res * 5, "Lat is " + (res * 5) + " after drag");
t.eq(map.getCenter().lon, res * -5, "Lon is " + (res * -5) + " after drag");
}
function test_Control_DragPan_click(t) { function test_Control_DragPan_click(t) {
t.plan(1); t.plan(1);
var control = new OpenLayers.Control.DragPan(); var control = new OpenLayers.Control.DragPan();