#638 let features be dragged
git-svn-id: http://svn.openlayers.org/trunk/openlayers@3958 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
97
examples/drag-feature.html
Normal file
97
examples/drag-feature.html
Normal file
@@ -0,0 +1,97 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Drag Feature</title>
|
||||
<style type="text/css">
|
||||
#map {
|
||||
width: 512px;
|
||||
height: 350px;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
#controls {
|
||||
width: 512px;
|
||||
}
|
||||
#controlToggle {
|
||||
padding-left: 1em;
|
||||
}
|
||||
#controlToggle li {
|
||||
list-style: none;
|
||||
}
|
||||
</style>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
<!--
|
||||
var map, vectors, controls;
|
||||
function init(){
|
||||
map = new OpenLayers.Map('map');
|
||||
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
|
||||
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
|
||||
|
||||
vectors = new OpenLayers.Layer.Vector("Vector Layer");
|
||||
|
||||
map.addLayers([wms, vectors]);
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
map.addControl(new OpenLayers.Control.MousePosition());
|
||||
|
||||
controls = {
|
||||
point: new OpenLayers.Control.DrawFeature(vectors,
|
||||
OpenLayers.Handler.Point),
|
||||
line: new OpenLayers.Control.DrawFeature(vectors,
|
||||
OpenLayers.Handler.Path),
|
||||
polygon: new OpenLayers.Control.DrawFeature(vectors,
|
||||
OpenLayers.Handler.Polygon),
|
||||
drag: new OpenLayers.Control.DragFeature(vectors)
|
||||
};
|
||||
|
||||
for(var key in controls) {
|
||||
map.addControl(controls[key]);
|
||||
}
|
||||
|
||||
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
|
||||
document.getElementById('noneToggle').checked = true;
|
||||
}
|
||||
|
||||
function toggleControl(element) {
|
||||
for(key in controls) {
|
||||
var control = controls[key];
|
||||
if(element.value == key && element.checked) {
|
||||
control.activate();
|
||||
} else {
|
||||
control.deactivate();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -->
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1>OpenLayers Drag Feature Example</h1>
|
||||
<div id="map"></div>
|
||||
<div id="controls">
|
||||
<ul id="controlToggle">
|
||||
<li>
|
||||
<input type="radio" name="type" value="none" id="noneToggle"
|
||||
onclick="toggleControl(this);" checked="checked" />
|
||||
<label for="noneToggle">navigate</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
|
||||
<label for="pointToggle">draw point</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
|
||||
<label for="lineToggle">draw line</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
|
||||
<label for="polygonToggle">draw polygon</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="type" value="drag" id="dragToggle"
|
||||
onclick="toggleControl(this);" />
|
||||
<label for="dragToggle">drag feature</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -138,6 +138,7 @@
|
||||
"OpenLayers/Control/Scale.js",
|
||||
"OpenLayers/Control/LayerSwitcher.js",
|
||||
"OpenLayers/Control/DrawFeature.js",
|
||||
"OpenLayers/Control/DragFeature.js",
|
||||
"OpenLayers/Control/Panel.js",
|
||||
"OpenLayers/Control/SelectFeature.js",
|
||||
"OpenLayers/Geometry.js",
|
||||
|
||||
285
lib/OpenLayers/Control/DragFeature.js
Normal file
285
lib/OpenLayers/Control/DragFeature.js
Normal file
@@ -0,0 +1,285 @@
|
||||
/* Copyright (c) 2006 MetaCarta, Inc., published under a modified BSD license.
|
||||
* See http://svn.openlayers.org/trunk/openlayers/repository-license.txt
|
||||
* for the full text of the license. */
|
||||
|
||||
|
||||
/**
|
||||
* @requires OpenLayers/Control.js
|
||||
* @requires OpenLayers/Handler/Drag.js
|
||||
* @requires OpenLayers/Handler/Feature.js
|
||||
*
|
||||
* Class: OpenLayers.Control.DragFeature
|
||||
* Move a feature with a drag. Create a new control with the
|
||||
* <OpenLayers.Control.DragFeature> constructor.
|
||||
*
|
||||
* Inherits From:
|
||||
* - <OpenLayers.Control>
|
||||
*/
|
||||
OpenLayers.Control.DragFeature = OpenLayers.Class(OpenLayers.Control, {
|
||||
|
||||
/**
|
||||
* APIProperty: geometryTypes
|
||||
* {Array(String)} To restrict dragging to a limited set of geometry types,
|
||||
* send a list of strings corresponding to the geometry class names.
|
||||
*/
|
||||
geometryTypes: null,
|
||||
|
||||
/**
|
||||
* APIProperty: onDrag
|
||||
* {Function} Define this function if you want to know about each move of a
|
||||
* feature. The function should expect to receive two arguments: the
|
||||
* feature that is being dragged and the pixel location of the mouse.
|
||||
*
|
||||
* Parameters:
|
||||
* feature - {OpenLayers.Feature.Vector} The feature that was dragged.
|
||||
* pixel - {OpenLayers.Pixel} The pixel location of the mouse.
|
||||
*/
|
||||
onDrag: function(feature, pixel) {},
|
||||
|
||||
/**
|
||||
* APIProperty: onComplete
|
||||
* {Function} Define this function if you want to know when a feature is
|
||||
* done dragging. The function should expect to receive two arguments:
|
||||
* the feature that is being dragged and the pixel location of the
|
||||
* mouse.
|
||||
*
|
||||
* Parameters:
|
||||
* feature - {OpenLayers.Feature.Vector} The feature that was dragged.
|
||||
* pixel - {OpenLayers.Pixel} The pixel location of the mouse.
|
||||
*/
|
||||
onComplete: function(feature, pixel) {},
|
||||
|
||||
/**
|
||||
* Property: layer
|
||||
* {OpenLayers.Layer.Vector}
|
||||
*/
|
||||
layer: null,
|
||||
|
||||
/**
|
||||
* Property: feature
|
||||
* {OpenLayers.Feature.Vector}
|
||||
*/
|
||||
feature: null,
|
||||
|
||||
/**
|
||||
* Property: dragHandler
|
||||
* {OpenLayers.Handler.Drag}
|
||||
*/
|
||||
dragHandler: null,
|
||||
|
||||
/**
|
||||
* Property: dragCallbacks
|
||||
* {Object} The functions that are sent to the drag handler for callback.
|
||||
*/
|
||||
dragCallbacks: {},
|
||||
|
||||
/**
|
||||
* Property: featureHandler
|
||||
* {OpenLayers.Handler.Feature}
|
||||
*/
|
||||
featureHandler: null,
|
||||
|
||||
/**
|
||||
* Property: featureCallbacks
|
||||
* {Object} The functions that are sent to the feature handler for callback.
|
||||
*/
|
||||
featureCallbacks: {},
|
||||
|
||||
/**
|
||||
* Property: lastPixel
|
||||
* {OpenLayers.Pixel}
|
||||
*/
|
||||
lastPixel: null,
|
||||
|
||||
/**
|
||||
* Constructor: OpenLayers.Control.DragFeature
|
||||
* Create a new control to drag features.
|
||||
*
|
||||
* Parameters:
|
||||
* layer - {OpenLayers.Layer.Vector} The layer containing features to be
|
||||
* dragged.
|
||||
* options - {Object} Optional object whose properties will be set on the
|
||||
* control.
|
||||
*/
|
||||
initialize: function(layer, options) {
|
||||
OpenLayers.Control.prototype.initialize.apply(this, [options]);
|
||||
this.layer = layer;
|
||||
this.dragCallbacks = OpenLayers.Util.extend({down: this.downFeature,
|
||||
move: this.moveFeature,
|
||||
up: this.upFeature,
|
||||
out: this.cancel,
|
||||
done: this.doneDragging
|
||||
}, this.dragCallbacks);
|
||||
this.dragHandler = new OpenLayers.Handler.Drag(this, this.dragCallbacks);
|
||||
this.featureCallbacks = OpenLayers.Util.extend({over: this.overFeature,
|
||||
out: this.outFeature
|
||||
}, this.featureCallbacks);
|
||||
var handlerOptions = {geometryTypes: this.geometryTypes};
|
||||
this.featureHandler = new OpenLayers.Handler.Feature(this, this.layer,
|
||||
this.featureCallbacks,
|
||||
handlerOptions);
|
||||
},
|
||||
|
||||
/**
|
||||
* APIMethod: destroy
|
||||
* Take care of things that are not handled in superclass
|
||||
*/
|
||||
destroy: function() {
|
||||
this.layer = null;
|
||||
this.dragHandler.destroy();
|
||||
this.featureHandler.destroy();
|
||||
OpenLayers.Control.prototype.destroy.apply(this, []);
|
||||
},
|
||||
|
||||
/**
|
||||
* APIMethod: activate
|
||||
* Activate the control and the feature handler.
|
||||
*
|
||||
* Returns:
|
||||
* {Boolean} Successfully activated the control and feature handler.
|
||||
*/
|
||||
activate: function() {
|
||||
return (this.featureHandler.activate() &&
|
||||
OpenLayers.Control.prototype.activate.apply(this, arguments));
|
||||
},
|
||||
|
||||
/**
|
||||
* APIMethod: deactivate
|
||||
* Deactivate the control and all handlers.
|
||||
*
|
||||
* Returns:
|
||||
* {Boolean} Successfully deactivated the control.
|
||||
*/
|
||||
deactivate: function() {
|
||||
// the return from the handlers is unimportant in this case
|
||||
this.dragHandler.deactivate();
|
||||
this.featureHandler.deactivate();
|
||||
return OpenLayers.Control.prototype.deactivate.apply(this, arguments);
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: overFeature
|
||||
* Called when the feature handler detects a mouse-over on a feature.
|
||||
* This activates the drag handler.
|
||||
*
|
||||
* Parameters:
|
||||
* feature - {OpenLayers.Feature.Vector} The selected feature.
|
||||
*/
|
||||
overFeature: function(feature) {
|
||||
if(!this.dragHandler.dragging) {
|
||||
this.feature = feature;
|
||||
this.dragHandler.activate();
|
||||
this.over = true;
|
||||
// TBD replace with CSS classes
|
||||
this.map.div.style.cursor = "move";
|
||||
} else {
|
||||
if(this.feature.id == feature.id) {
|
||||
this.over = true;
|
||||
} else {
|
||||
this.over = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: downFeature
|
||||
* Called when the drag handler detects a mouse-down.
|
||||
*
|
||||
* Parameters:
|
||||
* pixel - {OpenLayers.Pixel} Location of the mouse event.
|
||||
*/
|
||||
downFeature: function(pixel) {
|
||||
this.dragHandler.dragging = true;
|
||||
this.lastPixel = pixel;
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: moveFeature
|
||||
* Called when the drag handler detects a mouse-move. Also calls the
|
||||
* optional onDrag method.
|
||||
*
|
||||
* Parameters:
|
||||
* pixel - {OpenLayers.Pixel} Location of the mouse event.
|
||||
*/
|
||||
moveFeature: function(pixel) {
|
||||
var res = this.map.getResolution();
|
||||
this.feature.geometry.move(res * (pixel.x - this.lastPixel.x),
|
||||
res * (this.lastPixel.y - pixel.y));
|
||||
this.layer.drawFeature(this.feature);
|
||||
this.lastPixel = pixel;
|
||||
this.onDrag(this.feature, pixel);
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: upFeature
|
||||
* Called when the drag handler detects a mouse-up. Also calls the
|
||||
* optional onComplete method.
|
||||
*
|
||||
* Parameters:
|
||||
* pixel - {OpenLayers.Pixel} Location of the mouse event.
|
||||
*/
|
||||
upFeature: function(pixel) {
|
||||
if(!this.over) {
|
||||
this.dragHandler.deactivate();
|
||||
this.feature = null;
|
||||
// TBD replace with CSS classes
|
||||
this.map.div.style.cursor = "default";
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: doneDragging
|
||||
* Called when the drag handler is done dragging.
|
||||
*
|
||||
* Parameters:
|
||||
* pixel - {OpenLayers.Pixel} The last event pixel location. If this event
|
||||
* came from a mouseout, this may not be in the map viewport.
|
||||
*/
|
||||
doneDragging: function(pixel) {
|
||||
this.onComplete(this.feature, pixel);
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: outFeature
|
||||
* Called when the feature handler detects a mouse-out on a feature.
|
||||
*
|
||||
* Parameters:
|
||||
* feature - {OpenLayers.Feature.Vector} The feature that the mouse left.
|
||||
*/
|
||||
outFeature: function(feature) {
|
||||
if(!this.dragHandler.dragging) {
|
||||
this.over = false;
|
||||
this.dragHandler.deactivate();
|
||||
// TBD replace with CSS classes
|
||||
this.map.div.style.cursor = "default";
|
||||
} else {
|
||||
if(this.feature.id == feature.id) {
|
||||
this.over = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: cancel
|
||||
* Called when the drag handler detects a mouse-out (from the map viewport).
|
||||
*/
|
||||
cancel: function() {
|
||||
this.dragHandler.deactivate();
|
||||
this.over = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Method: setMap
|
||||
* Set the map property for the control and all handlers.
|
||||
*
|
||||
* Parameters:
|
||||
* map - {OpenLayers.Map} The control's map.
|
||||
*/
|
||||
setMap: function(map) {
|
||||
this.dragHandler.setMap(map);
|
||||
this.featureHandler.setMap(map);
|
||||
OpenLayers.Control.prototype.setMap.apply(this, arguments);
|
||||
},
|
||||
|
||||
CLASS_NAME: "OpenLayers.Control.DragFeature"
|
||||
});
|
||||
173
tests/Control/test_DragFeature.html
Normal file
173
tests/Control/test_DragFeature.html
Normal file
@@ -0,0 +1,173 @@
|
||||
<html>
|
||||
<head>
|
||||
<script src="../../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
function test_Control_DragFeature_constructor(t) {
|
||||
t.plan(3);
|
||||
|
||||
var options = {
|
||||
geometryTypes: "foo"
|
||||
};
|
||||
var layer = "bar";
|
||||
var control = new OpenLayers.Control.DragFeature(layer, options);
|
||||
t.ok(control instanceof OpenLayers.Control.DragFeature,
|
||||
"new OpenLayers.Control.DragFeature returns an instance");
|
||||
t.eq(control.layer, "bar",
|
||||
"constructor sets layer correctly");
|
||||
t.eq(control.featureHandler.geometryTypes, "foo",
|
||||
"constructor sets options correctly on feature handler");
|
||||
}
|
||||
|
||||
function test_Control_DragFeature_destroy(t) {
|
||||
t.plan(2);
|
||||
var map = new OpenLayers.Map("map");
|
||||
var layer = new OpenLayers.Layer.Vector();
|
||||
map.addLayer(layer);
|
||||
var control = new OpenLayers.Control.DragFeature(layer);
|
||||
control.dragHandler.destroy = function() {
|
||||
t.ok(true,
|
||||
"control.destroy calls destroy on drag handler");
|
||||
}
|
||||
control.featureHandler.destroy = function() {
|
||||
t.ok(true,
|
||||
"control.destroy calls destroy on feature handler");
|
||||
}
|
||||
control.destroy();
|
||||
|
||||
}
|
||||
|
||||
function test_Control_DragFeature_activate(t) {
|
||||
t.plan(2);
|
||||
var map = new OpenLayers.Map("map");
|
||||
var layer = new OpenLayers.Layer.Vector();
|
||||
map.addLayer(layer);
|
||||
var control = new OpenLayers.Control.DragFeature(layer);
|
||||
map.addControl(control);
|
||||
t.ok(!control.featureHandler.active,
|
||||
"feature handler is not active prior to activating control");
|
||||
control.activate();
|
||||
t.ok(control.featureHandler.active,
|
||||
"feature handler is active after activating control");
|
||||
}
|
||||
|
||||
function test_Control_DragFeature_deactivate(t) {
|
||||
t.plan(2);
|
||||
var map = new OpenLayers.Map("map");
|
||||
var layer = new OpenLayers.Layer.Vector();
|
||||
map.addLayer(layer);
|
||||
var control = new OpenLayers.Control.DragFeature(layer);
|
||||
map.addControl(control);
|
||||
|
||||
control.dragHandler.deactivate = function() {
|
||||
t.ok(true,
|
||||
"control.deactivate calls deactivate on drag handler");
|
||||
}
|
||||
control.featureHandler.deactivate = function() {
|
||||
t.ok(true,
|
||||
"control.deactivate calls deactivate on feature handler");
|
||||
}
|
||||
control.deactivate();
|
||||
}
|
||||
|
||||
function test_Control_DragFeature_over(t) {
|
||||
t.plan(3);
|
||||
var map = new OpenLayers.Map("map");
|
||||
var layer = new OpenLayers.Layer.Vector();
|
||||
map.addLayer(layer);
|
||||
var control = new OpenLayers.Control.DragFeature(layer);
|
||||
map.addControl(control);
|
||||
|
||||
control.activate();
|
||||
t.ok(!control.dragHandler.active,
|
||||
"drag handler is not active before over a feature");
|
||||
|
||||
// simulate a mouseover on a feature
|
||||
layer.getFeatureFromEvent = function(evt) {
|
||||
return "foo";
|
||||
}
|
||||
map.events.triggerEvent("mousemove");
|
||||
|
||||
t.eq(control.feature, "foo",
|
||||
"control gets the proper feature from the feature handler");
|
||||
t.ok(control.dragHandler.active,
|
||||
"drag handler activated when over a feature");
|
||||
}
|
||||
|
||||
function test_Control_DragFeature_down(t) {
|
||||
t.plan(3);
|
||||
var map = new OpenLayers.Map("map");
|
||||
var layer = new OpenLayers.Layer.Vector();
|
||||
map.addLayer(layer);
|
||||
var control = new OpenLayers.Control.DragFeature(layer);
|
||||
map.addControl(control);
|
||||
|
||||
control.activate();
|
||||
|
||||
// simulate a mouseover on a feature
|
||||
layer.getFeatureFromEvent = function(evt) {
|
||||
return "foo";
|
||||
}
|
||||
map.events.triggerEvent("mousemove");
|
||||
|
||||
t.ok(!control.dragHandler.dragging,
|
||||
"control is not dragging before the mousedown");
|
||||
|
||||
// simulate a mousedown on a feature
|
||||
map.events.triggerEvent("mousedown", {xy: "bar", which: 1});
|
||||
|
||||
t.ok(control.dragHandler.dragging,
|
||||
"drag is dragging after the mousedown");
|
||||
t.eq(control.lastPixel, "bar",
|
||||
"mousedown sets the lastPixel correctly");
|
||||
}
|
||||
|
||||
function test_Control_DragFeature_move(t) {
|
||||
t.plan(3);
|
||||
var map = new OpenLayers.Map("map");
|
||||
var layer = new OpenLayers.Layer.Vector();
|
||||
map.addLayer(layer);
|
||||
var control = new OpenLayers.Control.DragFeature(layer);
|
||||
map.addControl(control);
|
||||
map.getResolution = function() {
|
||||
return 2;
|
||||
}
|
||||
|
||||
control.activate();
|
||||
|
||||
// mock up a feature - for the sole purpose of testing mousemove
|
||||
var uid = Math.random();
|
||||
layer.getFeatureFromEvent = function() {
|
||||
var geom = new OpenLayers.Geometry.Point(Math.random(),
|
||||
Math.random());
|
||||
geom.move = function(x, y) {
|
||||
t.eq(x, 2, "move called with dx * res");
|
||||
t.eq(y, -4, "move called with -dy * res");
|
||||
};
|
||||
var feature = new OpenLayers.Feature.Vector(geom);
|
||||
feature.uid = uid;
|
||||
return feature;
|
||||
};
|
||||
layer.drawFeature = function(feature) {
|
||||
t.eq(feature.uid, uid,
|
||||
"layer.drawFeature called with correct feature");
|
||||
};
|
||||
|
||||
// simulate a mouseover on a feature
|
||||
map.events.triggerEvent("mousemove");
|
||||
|
||||
// simulate a mousedown on a feature
|
||||
var down = new OpenLayers.Pixel(0, 0);
|
||||
map.events.triggerEvent("mousedown", {xy: down, which: 1});
|
||||
|
||||
// simulate a mousemove on a feature
|
||||
var move = new OpenLayers.Pixel(1, 2);
|
||||
map.events.triggerEvent("mousemove", {xy: move, which: 1});
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map" style="width: 400px; height: 250px;"/>
|
||||
</body>
|
||||
</html>
|
||||
@@ -58,6 +58,7 @@
|
||||
<li>test_Tile.html</li>
|
||||
<li>Tile/test_Image.html</li>
|
||||
<li>test_Control.html</li>
|
||||
<li>Control/test_DragFeature.html</li>
|
||||
<li>Control/test_DragPan.html</li>
|
||||
<li>Control/test_OverviewMap.html</li>
|
||||
<li>Control/test_NavToolbar.html</li>
|
||||
|
||||
Reference in New Issue
Block a user