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

drag, rotate, resize, and reshape with the ModifyFeature control - thanks pvalsecc and elemoine for the inspiration, tests, and code - good partenering with you guys (closes #1150).

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@5301 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
2007-11-30 17:09:23 +00:00
parent 600435ad21
commit 10cf5bfefc
5 changed files with 255 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
examples/modify-feature.html
View File

@@ -53,6 +53,9 @@
OpenLayers.Handler.Path),
polygon: new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.Polygon),
regular: new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.RegularPolygon,
{handlerOptions: {sides: 5}}),
modify: new OpenLayers.Control.ModifyFeature(vectors,
modifyOptions)
};
@@ -65,6 +68,19 @@
document.getElementById('noneToggle').checked = true;
}
function update() {
var rotate = document.getElementById("rotate").checked;
controls.modify.rotate = rotate;
var resize = document.getElementById("resize").checked;
controls.modify.resize = resize;
var drag = document.getElementById("drag").checked;
controls.modify.drag = drag;
var sides = parseInt(document.getElementById("sides").value);
sides = Math.max(3, isNaN(sides) ? 0 : sides);
controls.regular.handler.sides = sides;
var irregular = document.getElementById("irregular").checked;
controls.regular.handler.irregular = irregular;
}
function toggleControl(element) {
for(key in controls) {
@@ -101,10 +117,41 @@
<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="regular" id="regularToggle" onclick="toggleControl(this);" />
<label for="regularToggle">draw regular polygon</label>
<label for="sides"> - sides</label>
<input id="sides" type="text" size="2" maxlength="2"
name="sides" value="5" onchange="update()" />
<ul>
<li>
<input id="irregular" type="checkbox"
name="irregular" onchange="update()" />
<label for="irregular">irregular</label>
</li>
</ul>
</li>
<li>
<input type="radio" name="type" value="modify" id="modifyToggle"
onclick="toggleControl(this);" />
<label for="modifyToggle">modify feature</label>
<ul>
<li>
<input id="rotate" type="checkbox"
name="rotate" onchange="update()" />
<label for="rotate">allow rotation</label>
</li>
<li>
<input id="resize" type="checkbox"
name="resize" onchange="update()" />
<label for="resize">allow resizing</label>
</li>
<li>
<input id="drag" type="checkbox"
name="drag" onchange="update()" />
<label for="drag">allow dragging</label>
</li>
</ul>
</li>
</ul>
</div>

156
lib/OpenLayers/Control/ModifyFeature.js
View File

@@ -87,6 +87,36 @@ OpenLayers.Control.ModifyFeature = OpenLayers.Class(OpenLayers.Control, {
*/
virtualStyle: null,
/**
* APIProperty: rotate
* {Boolean} Allow rotation of feature instead of vertex modification.
*/
rotate: false,
/**
* APIProperty: resize
* {Boolean} Allow resizing of feature instead of vertex modification.
*/
resize: false,
/**
* Property: radiusHandle
* {<OpenLayers.Feature.Vector>} A handle for rotating/resizing a feature.
*/
radiusHandle: null,
/**
* APIProperty: drag
* {Boolean} Allow dragging of feature with a drag handle.
*/
drag: false,
/**
* Property: dragHandle
* {<OpenLayers.Feature.Vector>} A handle for dragging a feature.
*/
dragHandle: null,
/**
* APIProperty: onModificationStart
* {Function} Optional function to be called when a feature is selected
@@ -250,9 +280,17 @@ OpenLayers.Control.ModifyFeature = OpenLayers.Class(OpenLayers.Control, {
*/
unselectFeature: function(feature) {
this.layer.removeFeatures(this.vertices);
this.layer.removeFeatures(this.virtualVertices);
this.vertices = [];
this.layer.destroyFeatures(this.virtualVertices);
this.virtualVertices = [];
if(this.dragHandle) {
this.layer.destroyFeatures([this.dragHandle]);
delete this.dragHandle;
}
if(this.radiusHandle) {
this.layer.destroyFeatures([this.radiusHandle]);
delete this.radiusHandle;
}
this.feature = null;
this.dragControl.deactivate();
this.onModificationEnd(feature);
@@ -274,9 +312,8 @@ OpenLayers.Control.ModifyFeature = OpenLayers.Class(OpenLayers.Control, {
*/
dragStart: function(feature, pixel) {
// only change behavior if the feature is not in the vertices array
if(feature != this.feature &&
OpenLayers.Util.indexOf(this.vertices, feature) == -1 &&
OpenLayers.Util.indexOf(this.virtualVertices, feature) == -1) {
if(feature != this.feature && !feature.geometry.parent &&
feature != this.dragHandle && feature != this.radiusHandle) {
if(this.feature) {
// unselect the currently selected feature
this.selectControl.clickFeature.apply(this.selectControl,
@@ -315,21 +352,41 @@ OpenLayers.Control.ModifyFeature = OpenLayers.Class(OpenLayers.Control, {
* vertex - {<OpenLayers.Feature.Vector>} The vertex being dragged.
*/
dragVertex: function(vertex) {
/**
* Five cases:
* 1) dragging a simple point
* 2) dragging a virtual vertex
* 3) dragging a drag handle
* 4) dragging a radius handle
* 5) dragging a real vertex
*/
if(this.feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {
// dragging a simple point
if(this.feature != vertex) {
this.feature = vertex;
}
} else {
if(OpenLayers.Util.indexOf(this.virtualVertices, vertex) != -1) {
if(vertex._index) {
// dragging a virtual vertex
vertex.geometry.parent.addComponent(vertex.geometry,
vertex._index);
delete vertex._index;
OpenLayers.Util.removeItem(this.virtualVertices, vertex);
this.layer.removeFeatures(vertex);
} else if(vertex == this.dragHandle) {
// dragging a drag handle
this.layer.removeFeatures(this.vertices);
this.vertices = [];
if(this.radiusHandle) {
this.layer.destroyFeatures([this.radiusHandle]);
this.radiusHandle = null;
}
}
// dragging a radius handle - no special treatment
// dragging a real vertex - no special treatment
this.layer.destroyFeatures(this.virtualVertices);
this.virtualVertices = [];
this.layer.drawFeature(this.feature, this.selectControl.selectStyle);
this.layer.removeFeatures(this.virtualVertices);
}
// keep the vertex on top so it gets the mouseout after dragging
// this should be removed in favor of an option to draw under or
// maintain node z-index
@@ -360,11 +417,24 @@ OpenLayers.Control.ModifyFeature = OpenLayers.Class(OpenLayers.Control, {
this.layer.removeFeatures(this.virtualVertices);
this.virtualVertices = [];
}
if(this.dragHandle) {
this.layer.destroyFeatures([this.dragHandle]);
this.dragHandle = null;
}
if(this.radiusHandle) {
this.layer.destroyFeatures([this.radiusHandle]);
this.radiusHandle = null;
}
if(this.feature &&
this.feature.geometry.CLASS_NAME != "OpenLayers.Geometry.Point") {
this.collectVertices(this.feature.geometry);
this.layer.addFeatures(this.vertices);
this.layer.addFeatures(this.virtualVertices);
if(this.drag) {
this.collectDragHandle();
}
if(this.rotate || this.resize) {
this.collectRadiusHandle();
} else {
this.collectVertices();
}
}
},
@@ -385,7 +455,8 @@ OpenLayers.Control.ModifyFeature = OpenLayers.Class(OpenLayers.Control, {
var vertex = this.dragControl.feature;
if(vertex &&
OpenLayers.Util.indexOf(this.vertices, vertex) != -1 &&
!this.dragControl.dragHandler.dragging) {
!this.dragControl.dragHandler.dragging &&
vertex.geometry.parent) {
// remove the vertex
vertex.geometry.parent.removeComponent(vertex.geometry);
this.layer.drawFeature(this.feature,
@@ -443,7 +514,68 @@ OpenLayers.Control.ModifyFeature = OpenLayers.Class(OpenLayers.Control, {
}
}
}
collectComponentVertices(this.feature.geometry);
collectComponentVertices.call(this, this.feature.geometry);
this.layer.addFeatures(this.vertices);
this.layer.addFeatures(this.virtualVertices);
},
/**
* Method: collectDragHandle
* Collect the drag handle for the selected geometry.
*/
collectDragHandle: function() {
var geometry = this.feature.geometry;
var center = geometry.getBounds().getCenterLonLat();
var originGeometry = new OpenLayers.Geometry.Point(
center.lon, center.lat
);
var origin = new OpenLayers.Feature.Vector(originGeometry);
originGeometry.move = function(x, y) {
OpenLayers.Geometry.Point.prototype.move.call(this, x, y);
geometry.move(x, y);
}
this.dragHandle = origin;
this.layer.addFeatures([this.dragHandle]);
},
/**
* Method: collectRadiusHandle
* Collect the radius handle for the selected geometry.
*/
collectRadiusHandle: function() {
var geometry = this.feature.geometry;
var bounds = geometry.getBounds();
var center = bounds.getCenterLonLat();
var originGeometry = new OpenLayers.Geometry.Point(
center.lon, center.lat
);
var radiusGeometry = new OpenLayers.Geometry.Point(
bounds.right, bounds.bottom
);
var radius = new OpenLayers.Feature.Vector(radiusGeometry);
var resize = this.resize;
var rotate = this.rotate;
radiusGeometry.move = function(x, y) {
OpenLayers.Geometry.Point.prototype.move.call(this, x, y);
var dx1 = this.x - originGeometry.x;
var dy1 = this.y - originGeometry.y;
var dx0 = dx1 - x;
var dy0 = dy1 - y;
if(rotate) {
var a0 = Math.atan2(dy0, dx0);
var a1 = Math.atan2(dy1, dx1);
var angle = a1 - a0;
angle *= 180 / Math.PI;
geometry.rotate(angle, originGeometry);
}
if(resize) {
var l0 = Math.sqrt((dx0 * dx0) + (dy0 * dy0));
var l1 = Math.sqrt((dx1 * dx1) + (dy1 * dy1));
geometry.resize(l1 / l0, originGeometry);
}
}
this.radiusHandle = radius;
this.layer.addFeatures([this.radiusHandle]);
},
/**

23
lib/OpenLayers/Layer/Vector.js
View File

@@ -307,12 +307,27 @@ OpenLayers.Layer.Vector = OpenLayers.Class(OpenLayers.Layer, {
/**
* APIMethod: destroyFeatures
* Destroy all features on the layer and empty the selected features array.
* Erase and estroy features on the layer.
*
* Parameters:
* features - {Array(<OpenLayers.Feature.Vector>)} An optional array of
* features to destroy. If not supplied, all features on the layer
* will be destroyed.
*/
destroyFeatures: function () {
destroyFeatures: function(features) {
var all = (features == undefined);
if(all) {
features = this.features;
this.selectedFeatures = [];
for (var i = this.features.length - 1; i >= 0; i--) {
this.features[i].destroy();
}
this.eraseFeatures(features);
var feature;
for(var i=features.length-1; i>=0; i--) {
feature = features[i];
if(!all) {
OpenLayers.Util.removeItem(this.selectedFeatures, feature);
}
feature.destroy();
}
},

37
tests/Control/test_ModifyFeature.html
View File

@@ -190,7 +190,10 @@
control.dragControl.deactivate = function() { t.ok(true, "Deactivate called on drag control"); }
control.onModificationEnd = function (feature) { t.eq(feature.id, fakeFeature.id, "onModificationEnd got feature.") }
layer.removeFeatures = function(verts) {
t.ok(verts == 'a' || verts == 'b', "Verts removed correctly")
t.ok(verts == 'a', "Normal verts removed correctly");
}
layer.destroyFeatures = function(verts) {
t.ok(verts == 'b', "Virtual verts destroyed correctly");
}
control.unselectFeature(fakeFeature);
t.eq(control.feature, null, "feature is set to null");
@@ -214,9 +217,11 @@
control.selectFeature(fakeFeature);
control.collectVertices = function() {
t.ok(true, "collectVertices called");
this.vertices = 'a';
this.virtualVertices = 'd';
t.ok(true, "collectVertices called");
layer.addFeatures(this.vertices);
layer.addFeatures(this.virtualVertices);
}
layer.addFeatures = function(features) {
@@ -242,7 +247,7 @@
}
function test_ModifyFeature_resetVertices(t) {
t.plan(9);
t.plan(15);
var layer = new OpenLayers.Layer.Vector();
var control = new OpenLayers.Control.ModifyFeature(layer);
var point = new OpenLayers.Geometry.Point(5,6);
@@ -273,6 +278,20 @@
t.eq(control.vertices[0].geometry.id, control.vertices[3].geometry.id, "First and last vertices are the same");
t.eq(control.virtualVertices.length, 3, "Correct virtual vertices length (polygon).");
control.drag = true;
control.resetVertices();
t.ok(control.dragHandle != null, "Drag handle is set");
t.eq(control.vertices.length, 4, "Correct vertices length with polygon (drag)");
control.rotate = true;
control.resetVertices();
t.ok(control.radiusHandle != null, "Radius handle is set");
t.eq(control.vertices.length, 0, "Correct vertices length with polygon (rotate)");
control.rotate = false;
control.resize = true;
t.ok(control.radiusHandle != null, "Radius handle is set");
t.eq(control.vertices.length, 0, "Correct vertices length with polygon (resize)");
}
function test_ModifyFeature_onDrag(t) {
@@ -289,11 +308,6 @@
'geometry': { 'id':'myGeom'},
'id': 'fakeFeature'
};
control.collectVertices = function(geom) {
t.eq(geom.id, 'myGeom', "collect geom called");
this.vertices = 'normal';
this.virtualVertices = 'virtual';
}
layer.addFeatures = function (verts) {
t.ok(verts == 'virtual' || verts == 'normal', verts + " verts correct");
}
@@ -303,6 +317,13 @@
control.onModification = function(feat) {
t.eq(feat.id, fakeFeature.id, "onModification gets correct feat");
}
control.collectVertices = function() {
t.ok(true, "collectVertices called");
this.vertices = 'normal';
this.virtualVertices = 'virtual';
layer.addFeatures(this.vertices);
layer.addFeatures(this.virtualVertices);
}
control.feature = fakeFeature;
control.vertices = 'previous normal';
control.virtualVertices = 'previous virtual';

13
tests/Layer/test_Vector.html
View File

@@ -130,7 +130,7 @@
}
function test_Layer_Vector_destroyFeatures (t) {
t.plan(3);
t.plan(5);
layer = new OpenLayers.Layer.Vector(name);
var map = new OpenLayers.Map('map');
map.addLayer(layer);
@@ -145,6 +145,17 @@
layer.destroyFeatures();
t.eq(layer.features.length, 0, "destroyFeatures triggers removal");
t.eq(layer.selectedFeatures, [], "Destroy features removes selected features");
features = [];
for (var i = 0; i < 5; i++) {
features.push(new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(0,0)));
}
layer.addFeatures(features);
layer.selectedFeatures.push(features[0]);
layer.selectedFeatures.push(features[1]);
layer.destroyFeatures([features[0], features[1]]);
t.eq(layer.features.length, 3, "destroyFeatures removes appropriate features");
t.eq(layer.selectedFeatures, [], "destroyFeatures removes appropriate selected features");
}
function test_99_Layer_Vector_destroy (t) {