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

replacing the select handler with a feature handler - with support for up, down, over, out, and move callbacks associated with mouse events on a feature - the select-feature.html example shows the use of a control that activates the feature handler - see #544

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@2843 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
2007-03-21 23:30:20 +00:00
parent 5bb0a3087e
commit 0c8dcabce8
4 changed files with 138 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
examples/select-feature.html
View File

@@ -19,22 +19,18 @@
var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
var pointLayer = new OpenLayers.Layer.Vector("Point Layer");
var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
map.addLayers([wmsLayer, pointLayer, lineLayer, polygonLayer]);
map.addLayers([wmsLayer, polygonLayer]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
drawControls = {
point: new OpenLayers.Control.DrawFeature(pointLayer,
OpenLayers.Handler.Point),
line: new OpenLayers.Control.DrawFeature(lineLayer,
OpenLayers.Handler.Path),
polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
OpenLayers.Handler.Polygon),
select: new OpenLayers.Control.SelectFeature(polygonLayer)
select: new OpenLayers.Control.SelectFeature(polygonLayer),
hover: new OpenLayers.Control.SelectFeature(polygonLayer,
{hover: true})
};
for(var key in drawControls) {
@@ -67,20 +63,19 @@
<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);" />
<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="select" id="selectToggle" onclick="toggleControl(this);" />
<label for="selectToggle">select polygon</label>
<input type="radio" name="type" value="select" id="selectToggle"
onclick="toggleControl(this);" />
<label for="selectToggle">select polygon on click</label>
</li>
<li>
<input type="radio" name="type" value="hover" id="hoverToggle"
onclick="toggleControl(this);" />
<label for="hoverToggle">select polygon on hover</label>
</li>
</ul>
</body>

2
lib/OpenLayers.js
View File

@@ -96,7 +96,7 @@ if (typeof(_OPENLAYERS_SFL_) == "undefined") {
"OpenLayers/Handler/Point.js",
"OpenLayers/Handler/Path.js",
"OpenLayers/Handler/Polygon.js",
"OpenLayers/Handler/Select.js",
"OpenLayers/Handler/Feature.js",
"OpenLayers/Handler/Drag.js",
"OpenLayers/Handler/Box.js",
"OpenLayers/Handler/MouseWheel.js",

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

@@ -14,16 +14,22 @@ OpenLayers.Control.SelectFeature = OpenLayers.Class.create();
OpenLayers.Control.SelectFeature.prototype =
OpenLayers.Class.inherit(OpenLayers.Control, {
/**
* @type {Boolean} Allow selection of multiple geometries
*/
multiple: false,
/**
* @type {Boolean} Select on mouse over and deselect on mouse out. If
* true, this ignores clicks and only listens to mouse moves.
*/
hover: false,
/**
* @type {OpenLayers.Layer.Vector}
*/
layer: null,
/**
* @type {OpenLayers.Handler.Select}
*/
handler: null,
/**
* @type {Object} The functions that are sent to the handler for callback
*/
@@ -35,15 +41,10 @@ OpenLayers.Control.SelectFeature.prototype =
selectStyle: OpenLayers.Feature.Vector.style['select'],
/**
* @type {Object} Hash of styles
* @type {OpenLayers.Handler.Feature}
* @private
*/
originalStyle: null,
/**
* @type {Boolean} Allow selection of multiple geometries
*/
multiple: false,
handler: null,
/**
* @param {OpenLayers.Layer.Vector} layer
@@ -52,16 +53,26 @@ OpenLayers.Control.SelectFeature.prototype =
*/
initialize: function(layer, options) {
OpenLayers.Control.prototype.initialize.apply(this, [options]);
this.callbacks = OpenLayers.Util.extend({down: this.downFeature},
this.callbacks);
this.callbacks = OpenLayers.Util.extend({
down: this.downFeature,
over: this.overFeature,
out: this.outFeature
}, this.callbacks);
this.layer = layer;
this.handler = new OpenLayers.Handler.Select(this, layer, this.callbacks);
this.handler = new OpenLayers.Handler.Feature(this, layer, this.callbacks);
},
/**
*
* Called when the feature handler detects a mouse-down on a feature
* @param {OpenLayers.Geometry}
*/
downFeature: function(geometry) {
if(this.hover) {
return;
}
if(geometry.parent) {
geometry = geometry.parent;
}
// Store feature style for restoration later
if(geometry.feature.originalStyle == null) {
geometry.feature.originalStyle = geometry.feature.style;
@@ -69,20 +80,26 @@ OpenLayers.Control.SelectFeature.prototype =
if (this.multiple) {
if(OpenLayers.Util.indexOf(this.layer.selectedFeatures, geometry.feature) > -1) {
this.layer.renderer.drawGeometry(geometry, geometry.feature.originalStyle);
OpenLayers.Util.removeItem(this.layer.selectedFeatures, geometry.feature);
this.layer.renderer.drawGeometry(geometry,
geometry.feature.originalStyle);
OpenLayers.Util.removeItem(this.layer.selectedFeatures,
geometry.feature);
} else {
this.layer.selectedFeatures.push(geometry.feature);
this.layer.renderer.drawGeometry(geometry, this.selectStyle);
}
} else {
if(OpenLayers.Util.indexOf(this.layer.selectedFeatures, geometry.feature) > -1) {
this.layer.renderer.drawGeometry(geometry, geometry.feature.originalStyle);
OpenLayers.Util.removeItem(this.layer.selectedFeatures, geometry.feature);
this.layer.renderer.drawGeometry(geometry,
geometry.feature.originalStyle);
OpenLayers.Util.removeItem(this.layer.selectedFeatures,
geometry.feature);
} else {
if (this.layer.selectedFeatures) {
for (var i = 0; i < this.layer.selectedFeatures.length; i++) {
this.layer.renderer.drawGeometry(this.layer.selectedFeatures[i].geometry, this.layer.selectedFeatures[i].originalStyle);
this.layer.renderer.drawGeometry(
this.layer.selectedFeatures[i].geometry,
this.layer.selectedFeatures[i].originalStyle);
}
OpenLayers.Util.clearArray(this.layer.selectedFeatures);
}
@@ -92,6 +109,45 @@ OpenLayers.Control.SelectFeature.prototype =
}
},
/**
* Called when the feature handler detects a mouse-over on a feature.
* Only responds if this.hover is true.
* @param {OpenLayers.Geometry}
*/
overFeature: function(geometry) {
if(!this.hover) {
return;
}
if(geometry.parent) {
geometry = geometry.parent;
}
// Store feature style for restoration later
if(geometry.feature.originalStyle == null) {
geometry.feature.originalStyle = geometry.feature.style;
}
if(!(OpenLayers.Util.indexOf(this.layer.selectedFeatures, geometry.feature) > -1)) {
this.layer.selectedFeatures.push(geometry.feature);
this.layer.renderer.drawGeometry(geometry, this.selectStyle);
}
},
/**
* Called when the feature handler detects a mouse-out on a feature.
* Only responds if this.hover is true.
* @param {OpenLayers.Geometry}
*/
outFeature: function(geometry) {
if(!this.hover) {
return;
}
if(geometry.parent) {
geometry = geometry.parent;
}
this.layer.renderer.drawGeometry(geometry, geometry.feature.originalStyle);
OpenLayers.Util.removeItem(this.layer.selectedFeatures, geometry.feature);
},
/** Set the map property for the control.
*
* @param {OpenLayers.Map} map

61
lib/OpenLayers/Handler/Select.js → lib/OpenLayers/Handler/Feature.js
View File

@@ -4,14 +4,15 @@
/**
* Handler to draw a path on the map. Polygon is displayed on mouse down,
* moves on mouse move, and is finished on mouse up.
* Handler to respond to mouse events related to a drawn feature.
* Callbacks will be called for over, move, out, up, and down (corresponding
* to the equivalent mouse events).
*
* @class
* @requires OpenLayers/Handler.js
*/
OpenLayers.Handler.Select = OpenLayers.Class.create();
OpenLayers.Handler.Select.prototype =
OpenLayers.Handler.Feature = OpenLayers.Class.create();
OpenLayers.Handler.Feature.prototype =
OpenLayers.Class.inherit(OpenLayers.Handler, {
/**
@@ -19,6 +20,11 @@ OpenLayers.Handler.Select.prototype =
*/
layerIndex: null,
/**
* @type {OpenLayers.Geometry}
*/
geometry: null,
/**
* @constructor
*
@@ -36,16 +42,19 @@ OpenLayers.Handler.Select.prototype =
},
/**
* Handle mouse down. Call the "up" callback if down on a feature.
* Handle mouse down. Call the "down" callback if down on a feature.
*
* @param {Event} evt
*/
mousedown: function(evt) {
return this.select('down', evt);
var selected = this.select('down', evt);
return !selected; // stop event propagation if selected
},
/**
* Handle mouse moves. Call the "over" callback if over a feature.
* Handle mouse moves. Call the "move" callback if moving over a feature.
* Call the "over" callback if moving over a feature for the first time.
* Call the "out" callback if moving off of a feature.
*
* @param {Event} evt
*/
@@ -55,37 +64,57 @@ OpenLayers.Handler.Select.prototype =
},
/**
* Handle mouse moves. Call the "down" callback if up on a feature.
* Handle mouse moves. Call the "up" callback if up on a feature.
*
* @param {Event} evt
*/
mouseup: function(evt) {
return this.select('up', evt);
var selected = this.select('up', evt);
return !selected; // stop event propagation if selected
},
/**
* Capture double-clicks.
* Capture double-clicks. Let the event continue propagating if the
* double-click doesn't hit a geometry. Otherwise call the dblclick
* callback.
*
* @param {Event} evt
*/
dblclick: function(evt) {
return false;
var selected = this.select('dblclick', evt);
return !selected; // stop event propagation if selected
},
/**
* Trigger the appropriate callback if a feature is under the mouse.
*
* @param {String} type Callback key
* @type {Boolean} A feature was selected
*/
select: function(type, evt) {
var geometry = this.layer.renderer.getGeometryFromEvent(evt);
if(geometry) {
if (geometry.parent) {
geometry = geometry.parent;
// three cases:
// over a new, out of the last and over a new, or still on the last
if(!this.geometry) {
// over a new geometry
this.callback('over', [geometry]);
} else if(this.geometry != geometry) {
// out of the last and over a new
this.callback('out', [this.geometry]);
this.callback('over', [geometry]);
}
this.geometry = geometry;
this.callback(type, [geometry]);
return false; // stop event propagation
return true;
} else {
if(this.geometry) {
// out of the last
this.callback('out', [this.geometry]);
this.geometry = null;
}
return false;
}
return true;
},
/**
@@ -118,5 +147,5 @@ OpenLayers.Handler.Select.prototype =
},
/** @final @type String */
CLASS_NAME: "OpenLayers.Handler.Select"
CLASS_NAME: "OpenLayers.Handler.Feature"
});