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

Adding a box property to the SelectFeature control for selecting all features within a box. p=pgiraud, r=me,crschmidt (closes #1071)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@7589 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
2008-07-29 18:20:19 +00:00
parent 6c07bc7ff1
commit a88ad8dc50
4 changed files with 203 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
examples/select-feature.html
View File

@@ -41,7 +41,8 @@
clickout: false, toggle: false,
multiple: false, hover: false,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey" // shift key adds to selection
multipleKey: "shiftKey", // shift key adds to selection
box: true
}
)
};
@@ -69,8 +70,8 @@
drawControls.select.clickout = clickout;
var hover = document.getElementById("hover").checked;
drawControls.select.hover = hover;
if(hover && drawControls.select.active) {
// turn on/off to clear feature property of handler
drawControls.select.box = document.getElementById("box").checked;
if(drawControls.select.active) {
drawControls.select.deactivate();
drawControls.select.activate();
}
@@ -110,6 +111,11 @@
onclick="toggleControl(this);" />
<label for="selectToggle">select feature</label>
<ul>
<li>
<input id="box" type="checkbox" checked="checked"
name="box" onchange="update()" />
<label for="box">select features in a box</label>
</li>
<li>
<input id="clickout" type="checkbox"
name="clickout" onchange="update()" />

121
lib/OpenLayers/Control/SelectFeature.js
View File

@@ -59,6 +59,12 @@ OpenLayers.Control.SelectFeature = OpenLayers.Class(OpenLayers.Control, {
*/
hover: false,
/**
* APIProperty: box
* {Boolean} Allow feature selection by drawing a box.
*/
box: false,
/**
* APIProperty: onSelect
* {Function} Optional function to be called when a feature is selected.
@@ -88,7 +94,7 @@ OpenLayers.Control.SelectFeature = OpenLayers.Class(OpenLayers.Control, {
/**
* APIProperty: callbacks
* {Object} The functions that are sent to the handler for callback
* {Object} The functions that are sent to the handlers.feature for callback
*/
callbacks: null,
@@ -106,10 +112,11 @@ OpenLayers.Control.SelectFeature = OpenLayers.Class(OpenLayers.Control, {
renderIntent: "select",
/**
* Property: handler
* {<OpenLayers.Handler.Feature>}
* Property: handlers
* {Object} Object with references to multiple <OpenLayers.Handler>
* instances.
*/
handler: null,
handlers: null,
/**
* Constructor: <OpenLayers.Control.SelectFeature>
@@ -127,10 +134,56 @@ OpenLayers.Control.SelectFeature = OpenLayers.Class(OpenLayers.Control, {
over: this.overFeature,
out: this.outFeature
}, this.callbacks);
var handlerOptions = { geometryTypes: this.geometryTypes};
this.handler = new OpenLayers.Handler.Feature(this, layer,
this.callbacks,
handlerOptions);
this.handlers = {
feature: new OpenLayers.Handler.Feature(
this, layer, this.callbacks, {geometryTypes: this.geometryTypes}
)
};
if (this.box) {
this.handlers.box = new OpenLayers.Handler.Box(
this, {done: this.selectBox},
{boxDivClassName: "olHandlerBoxSelectFeature"}
);
}
},
/**
* Method: activate
* Activates the control.
*
* Returns:
* {Boolean} The control was effectively activated.
*/
activate: function () {
if (!this.active) {
this.handlers.feature.activate();
if(this.box && this.handlers.box) {
this.handlers.box.activate();
}
}
return OpenLayers.Control.prototype.activate.apply(
this, arguments
);
},
/**
* Method: deactivate
* Deactivates the control.
*
* Returns:
* {Boolean} The control was effectively deactivated.
*/
deactivate: function () {
if (this.active) {
this.handlers.feature.deactivate();
if(this.handlers.box) {
this.handlers.box.deactivate();
}
}
return OpenLayers.Control.prototype.deactivate.apply(
this, arguments
);
},
/**
@@ -188,7 +241,7 @@ OpenLayers.Control.SelectFeature = OpenLayers.Class(OpenLayers.Control, {
* {Boolean} Allow for multiple selected features.
*/
multipleSelect: function() {
return this.multiple || this.handler.evt[this.multipleKey];
return this.multiple || this.handlers.feature.evt[this.multipleKey];
},
/**
@@ -200,7 +253,7 @@ OpenLayers.Control.SelectFeature = OpenLayers.Class(OpenLayers.Control, {
* {Boolean} Toggle the selected state of a feature.
*/
toggleSelect: function() {
return this.toggle || this.handler.evt[this.toggleKey];
return this.toggle || this.handlers.feature.evt[this.toggleKey];
},
/**
@@ -280,6 +333,49 @@ OpenLayers.Control.SelectFeature = OpenLayers.Class(OpenLayers.Control, {
this.onUnselect(feature);
},
/**
* Method: selectBox
* Callback from the handlers.box set up when <box> selection is true
* on.
*
* Parameters:
* position - {<OpenLayers.Bounds> || <OpenLayers.Pixel> }
*/
selectBox: function(position) {
if (position instanceof OpenLayers.Bounds) {
var minXY = this.map.getLonLatFromPixel(
new OpenLayers.Pixel(position.left, position.bottom)
);
var maxXY = this.map.getLonLatFromPixel(
new OpenLayers.Pixel(position.right, position.top)
);
var bounds = new OpenLayers.Bounds(
minXY.lon, minXY.lat, maxXY.lon, maxXY.lat
);
// if multiple is false, first deselect currently selected features
if (!this.multipleSelect()) {
this.unselectAll();
}
// because we're using a box, we consider we want multiple selection
var prevMultiple = this.multiple;
this.multiple = true;
for(var i=0, len = this.layer.features.length; i<len; ++i) {
var feature = this.layer.features[i];
if (this.geometryTypes == null || OpenLayers.Util.indexOf(
this.geometryTypes, feature.geometry.CLASS_NAME) > -1) {
if (bounds.toGeometry().intersects(feature.geometry)) {
if (OpenLayers.Util.indexOf(this.layer.selectedFeatures, feature) == -1) {
this.select(feature);
}
}
}
}
this.multiple = prevMultiple;
}
},
/**
* Method: setMap
* Set the map property for the control.
@@ -288,7 +384,10 @@ OpenLayers.Control.SelectFeature = OpenLayers.Class(OpenLayers.Control, {
* map - {<OpenLayers.Map>}
*/
setMap: function(map) {
this.handler.setMap(map);
this.handlers.feature.setMap(map);
if (this.box) {
this.handlers.box.setMap(map);
}
OpenLayers.Control.prototype.setMap.apply(this, arguments);
},

98
tests/Control/SelectFeature.html
View File

@@ -13,19 +13,23 @@
"new OpenLayers.Control.SelectFeature returns an instance");
t.eq(control.layer, "bar",
"constructor sets layer correctly");
// t.eq(control.featureHandler.geometryTypes, "foo",
// t.eq(control.handlers.feature.geometryTypes, "foo",
// "constructor sets options correctly on feature handler");
}
function test_Control_SelectFeature_destroy(t) {
t.plan(1);
t.plan(2);
var map = new OpenLayers.Map("map");
var layer = new OpenLayers.Layer.Vector();
map.addLayer(layer);
var control = new OpenLayers.Control.SelectFeature(layer);
control.handler.destroy = function() {
var control = new OpenLayers.Control.SelectFeature(layer, {box: true});
control.handlers.feature.deactivate = function() {
t.ok(true,
"control.destroy calls destroy on feature handler");
"control.deactivate calls deactivate on feature handler");
}
control.handlers.box.deactivate = function() {
t.ok(true,
"control.deactivate calls deactivate on box handler");
}
// should nullify the layer property here
control.destroy();
@@ -61,7 +65,7 @@
};
// mock up active control
var control = new OpenLayers.Control.SelectFeature(layer);
control.handler = {
control.handlers.feature = {
evt: {}
};
// mock up features
@@ -108,35 +112,85 @@
control.clickFeature(feature);
}
function test_box(t) {
t.plan(5);
var map = new OpenLayers.Map("map");
var layer = new OpenLayers.Layer.Vector();
map.addLayer(layer);
var control = new OpenLayers.Control.SelectFeature(layer, {'multiple': true, box: true });
var feature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(0,0));
var feature2 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(1,1));
var feature3 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(-2,-2));
var feature4 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([
new OpenLayers.Geometry.Point(0, 0), new OpenLayers.Geometry.Point(1, 1)
]));
layer.addFeatures([feature, feature2, feature3, feature4]);
control.setMap(map);
map.getLonLatFromPixel = function(arg) {
return new OpenLayers.LonLat(arg.x, arg.y);
}
control.selectBox(new OpenLayers.Bounds(-1, -1, 2, 2));
t.eq(layer.selectedFeatures.length, 3, "box around all features selects 3 features");
control.selectBox(new OpenLayers.Bounds(-3, -3, -1, -1));
t.eq(layer.selectedFeatures.length, 4, "box around other features doesn't turn off already selected features.");
control.multipleSelect = function() {
return false;
};
control.selectBox(new OpenLayers.Bounds(-3, -3, -1, -1));
t.eq(layer.selectedFeatures.length, 1, "box around other features correctly turns off already selected features.");
control.geometryTypes = null;
control.selectBox(new OpenLayers.Bounds(-100, -100, 100, 100));
t.eq(layer.selectedFeatures.length, layer.features.length, "all features selected with no geometryTypes filter");
control.geometryTypes = ["OpenLayers.Geometry.Point"];
control.selectBox(new OpenLayers.Bounds(-100, -100, 100, 100));
t.eq(layer.selectedFeatures.length, 3, "3 features selected with geometryTypes filter");
["OpenLayers.Geometry.Point"]
}
function test_Control_SelectFeature_activate(t) {
t.plan(4);
var map = new OpenLayers.Map("map");
var layer = new OpenLayers.Layer.Vector();
map.addLayer(layer);
var control = new OpenLayers.Control.SelectFeature(layer, {box: true});
map.addControl(control);
t.ok(!control.handlers.feature.active,
"feature handler is not active prior to activating control");
t.ok(!control.handlers.box.active,
"box handler is not active prior to activating control");
control.activate();
t.ok(control.handlers.feature.active,
"feature handler is active after activating control");
t.ok(control.handlers.box.active,
"box handler is active after activating control");
}
function test_Control_SelectFeature_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.SelectFeature(layer);
map.addControl(control);
t.ok(!control.handler.active,
"feature handler is not active prior to activating control");
control.activate();
t.ok(control.handler.active,
"feature handler is active after activating control");
}
function test_Control_SelectFeature_deactivate(t) {
t.plan(1);
var map = new OpenLayers.Map("map");
var layer = new OpenLayers.Layer.Vector();
map.addLayer(layer);
var control = new OpenLayers.Control.SelectFeature(layer);
var control = new OpenLayers.Control.SelectFeature(layer, {box: true});
map.addControl(control);
control.activate();
control.handler.deactivate = function() {
control.handlers.feature.deactivate = function() {
t.ok(true,
"control.deactivate calls deactivate on feature handler");
}
control.handlers.box.deactivate = function() {
t.ok(true,
"control.deactivate calls deactivate on box handler");
}
control.deactivate();
}

8
theme/default/style.css
View File

@@ -231,6 +231,14 @@ div.olControlMousePosition {
font-size: 1px;
filter: alpha(opacity=50);
}
.olHandlerBoxSelectFeature {
border: 2px solid blue;
position: absolute;
background-color: white;
opacity: 0.50;
font-size: 1px;
filter: alpha(opacity=50);
}
/*
* Due to current limitations in the OpenLayers code, you can only