Changeset 5301

Timestamp:

11/30/07 12:09:23 (1 year ago)

Author:

tschaub

Message:

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).

Files:

• trunk/openlayers/examples/modify-feature.html (modified) (3 diffs)
• trunk/openlayers/lib/OpenLayers/Control/ModifyFeature.js (modified) (7 diffs)
• trunk/openlayers/lib/OpenLayers/Layer/Vector.js (modified) (1 diff)
• trunk/openlayers/tests/Control/test_ModifyFeature.html (modified) (6 diffs)
• trunk/openlayers/tests/Layer/test_Vector.html (modified) (2 diffs)

trunk/openlayers/examples/modify-feature.html

@@ -54 +54 @@
-                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)
@@ -66 +69 @@
-        }
-        
+        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) {
@@ -103 +119 @@
-            </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>

trunk/openlayers/lib/OpenLayers/Control/ModifyFeature.js

@@ -87 +87 @@
-     */
-    virtualStyle: null,
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-    /**
-     * APIProperty: onModificationStart 
@@ -251 +281 @@
-    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();
@@ -275 +313 @@
-    dragStart: function(feature, pixel) {
-        // only change behavior if the feature is not in the vertices array
-
-
-
+
+
-            if(this.feature) {
-                // unselect the currently selected feature
@@ -316 +353 @@
-     */
-    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 {
-
+
+
-                vertex.geometry.parent.addComponent(vertex.geometry,
-                                                    vertex._index);
-                delete vertex._index;
-                OpenLayers.Util.removeItem(this.virtualVertices, vertex);
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-        // 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
@@ -361 +418 @@
-            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") {
-
-
-
+
+
+
+
+
+
+
+
-        }
-    },
@@ -386 +456 @@
-            if(vertex &&
-               OpenLayers.Util.indexOf(this.vertices, vertex) != -1 &&
-
+
+
-                // remove the vertex
-                vertex.geometry.parent.removeComponent(vertex.geometry);
@@ -443 +514 @@
-                }
-            }
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-    },
-

trunk/openlayers/lib/OpenLayers/Layer/Vector.js

@@ -308 +308 @@
-    /**
-     * APIMethod: destroyFeatures
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-        }
-    },

trunk/openlayers/tests/Control/test_ModifyFeature.html

@@ -191 +191 @@
-        control.onModificationEnd = function (feature) { t.eq(feature.id, fakeFeature.id, "onModificationEnd got feature.") }
-        layer.removeFeatures = function(verts) {
-
+
+
+
+
-        }
-        control.unselectFeature(fakeFeature);
@@ -215 +218 @@
-        
-        control.collectVertices = function() { 
+          t.ok(true, "collectVertices called"); 
-          this.vertices = 'a';
-          this.virtualVertices = 'd';
-
+
+
-        }
-        
@@ -243 +248 @@
-
-    function test_ModifyFeature_resetVertices(t) {
-9
+15
-        var layer = new OpenLayers.Layer.Vector();
-        var control = new OpenLayers.Control.ModifyFeature(layer);
@@ -254 +259 @@
-        t.eq(control.vertices.length, 0, "Correct vertices length");
-        t.eq(control.virtualVertices.length, 0, "Correct virtual vertices length.");
-
+
-        var multiPoint = new OpenLayers.Geometry.MultiPoint([point, point2]);
-        control.feature = new OpenLayers.Feature.Vector(multiPoint);
@@ -274 +279 @@
-        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)");
-    }    
-        
@@ -290 +309 @@
-         'id': 'fakeFeature'
-        };
-
-
+
+
+
+
+
+
+
+
+
+
+
-            this.vertices = 'normal';
-            this.virtualVertices = 'virtual';
-
-
-
-
-
-
-
-
-
+
+
-        }
-        control.feature = fakeFeature;

trunk/openlayers/tests/Layer/test_Vector.html

@@ -131 +131 @@
-
-    function test_Layer_Vector_destroyFeatures (t) {
-3
+5
-        layer = new OpenLayers.Layer.Vector(name);
-        var map = new OpenLayers.Map('map');
@@ -146 +146 @@
-        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");
-    }
-