Adding the ability to change the aspect ratio of features while resizing with the modify feature control. Thanks for the patch rdewit! r=me (closes #1975)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@9150 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

examples/modify-feature.html

@@ -70,14 +70,16 @@
             var resize = document.getElementById("resize").checked;
             if(resize) {
                 controls.modify.mode |= OpenLayers.Control.ModifyFeature.RESIZE;
+                var keepAspectRatio = document.getElementById("keepAspectRatio").checked;
+                if (keepAspectRatio) {
+                    controls.modify.mode &= ~OpenLayers.Control.ModifyFeature.RESHAPE;
+                }
             }
             var drag = document.getElementById("drag").checked;
             if(drag) {
                 controls.modify.mode |= OpenLayers.Control.ModifyFeature.DRAG;
             }
-            // disable reshape mode if at least one of modes rotate, resize,
+            if (rotate || drag) {
-            // drag is enabled
-            if (rotate || resize || drag) {
                 controls.modify.mode &= ~OpenLayers.Control.ModifyFeature.RESHAPE;
             }
             var sides = parseInt(document.getElementById("sides").value);
@@ -151,6 +153,9 @@
                         <input id="resize" type="checkbox"
                                name="resize" onchange="update()" />
                         <label for="resize">allow resizing</label>
+                        (<input id="keepAspectRatio" type="checkbox"
+                               name="keepAspectRatio" onchange="update()" checked="checked" />
+                        <label for="keepAspectRatio">keep aspect ratio</label>)
                     </li>
                     <li>
                         <input id="drag" type="checkbox"

lib/OpenLayers/Control/ModifyFeature.js

@@ -526,8 +526,11 @@ OpenLayers.Control.ModifyFeature = OpenLayers.Class(OpenLayers.Control, {
                              OpenLayers.Control.ModifyFeature.RESIZE))) {
                 this.collectRadiusHandle();
             }
-            if((this.mode & OpenLayers.Control.ModifyFeature.RESHAPE)) {
+            if(this.mode & OpenLayers.Control.ModifyFeature.RESHAPE){
-                this.collectVertices();
+                // Don't collect vertices when we're resizing
+                if (!(this.mode & OpenLayers.Control.ModifyFeature.RESIZE)){
+                    this.collectVertices();
+                }
             }
         }
     },
@@ -661,7 +664,9 @@ OpenLayers.Control.ModifyFeature = OpenLayers.Class(OpenLayers.Control, {
         );
         var radius = new OpenLayers.Feature.Vector(radiusGeometry);
         var resize = (this.mode & OpenLayers.Control.ModifyFeature.RESIZE);
+        var reshape = (this.mode & OpenLayers.Control.ModifyFeature.RESHAPE);
         var rotate = (this.mode & OpenLayers.Control.ModifyFeature.ROTATE);
+
         radiusGeometry.move = function(x, y) {
             OpenLayers.Geometry.Point.prototype.move.call(this, x, y);
             var dx1 = this.x - originGeometry.x;
@@ -676,9 +681,18 @@ OpenLayers.Control.ModifyFeature = OpenLayers.Class(OpenLayers.Control, {
                 geometry.rotate(angle, originGeometry);
             }
             if(resize) {
-                var l0 = Math.sqrt((dx0 * dx0) + (dy0 * dy0));
+                var scale, ratio;
-                var l1 = Math.sqrt((dx1 * dx1) + (dy1 * dy1));
+                // 'resize' together with 'reshape' implies that the aspect 
-                geometry.resize(l1 / l0, originGeometry);
+                // ratio of the geometry will not be preserved whilst resizing 
+                if (reshape) {
+                    scale = dy1 / dy0;
+                    ratio = (dx1 / dx0) / scale;
+                } else {
+                    var l0 = Math.sqrt((dx0 * dx0) + (dy0 * dy0));
+                    var l1 = Math.sqrt((dx1 * dx1) + (dy1 * dy1));
+                    scale = l1 / l0;
+                }
+                geometry.resize(scale, originGeometry, ratio);
             }
         };
         radius._sketch = true;

tests/Control/ModifyFeature.html

@@ -272,7 +272,7 @@
     }  
 
     function test_resetVertices(t) {
-        t.plan(18);
+        t.plan(21);
         var layer = new OpenLayers.Layer.Vector();
         var control = new OpenLayers.Control.ModifyFeature(layer);
         var point = new OpenLayers.Geometry.Point(5,6);
@@ -317,11 +317,17 @@
         t.ok(control.radiusHandle != null, "Radius handle is set");
         t.eq(control.vertices.length, 0, "Correct vertices length with polygon (RESIZE)");
 
-        control.mode = OpenLayers.Control.ModifyFeature.RESHAPE | OpenLayers.Control.ModifyFeature.RESIZE;
+        control.mode = OpenLayers.Control.ModifyFeature.RESHAPE;
         control.resetVertices();
-        t.ok(control.radiusHandle != null, "Radius handle is set");
+        t.ok(control.radiusHandle == null, "Radius handle is not set (RESHAPE)");
-        t.eq(control.vertices.length, 3, "Correct vertices length with polygon (RESHAPE | RESIZE)");
+        t.eq(control.vertices.length, 3, "Correct vertices length with polygon (RESHAPE)");
-        t.eq(control.virtualVertices.length, 3, "Correct virtual vertices length (RESHAPE | RESIZE)");
+        t.eq(control.virtualVertices.length, 3, "Correct virtual vertices length (RESHAPE)");
+        
+        control.mode = OpenLayers.Control.ModifyFeature.RESIZE | OpenLayers.Control.ModifyFeature.RESHAPE;
+        control.resetVertices();
+        t.ok(control.radiusHandle != null, "Radius handle is set (RESIZE|RESHAPE)");
+        t.eq(control.vertices.length, 0, "No vertices when both resizing and reshaping (RESIZE|RESHAPE)");
+        t.eq(control.virtualVertices.length, 0, "No virtual vertices when both resizing and reshaping (RESIZE|RESHAPE)");
         
         control.dragControl.feature = new OpenLayers.Feature.Vector(polygon);
         control.dragControl.map = {};