Merge pull request #183 from fredj/transform-control

Transform control. r=ahocevar

examples/transform-feature.html

@@ -14,15 +14,6 @@
         function init(){
             map = new OpenLayers.Map('map', {allOverlays: true});
 
-            // a nice style for the transformation box
-            var style = new OpenLayers.Style({
-                cursor: "${role}",
-                pointRadius: 5,
-                fillColor: "white",
-                fillOpacity: 1,
-                strokeColor: "black"
-            });
-
             // allow testing of specific renderers via "?renderer=Canvas", etc
             var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
             renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
@@ -30,7 +21,36 @@
             // the layer that we want to transform features on
             var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
                 styleMap: new OpenLayers.StyleMap({
-                    "transform": style
+                    // a nice style for the transformation box
+                    "transform": new OpenLayers.Style({
+                        display: "${getDisplay}",
+                        cursor: "${role}",
+                        pointRadius: 5,
+                        fillColor: "white",
+                        fillOpacity: 1,
+                        strokeColor: "black"
+                    }, {
+                        context: {
+                            getDisplay: function(feature) {
+                                // hide the resize handle at the south-east corner
+                                return feature.attributes.role === "se-resize" ? "none" : "";
+                            }
+                        }
+                    }),
+                    "rotate": new OpenLayers.Style({
+                        display: "${getDisplay}",
+                        pointRadius: 10,
+                        fillColor: "#ddd",
+                        fillOpacity: 1,
+                        strokeColor: "black"
+                    }, {
+                        context: {
+                            getDisplay: function(feature) {
+                                // only display the rotate handle at the south-east corner
+                                return feature.attributes.role === "se-rotate" ? "" : "none";
+                            }
+                        }
+                    })
                 }),
                 renderers: renderer
             });
@@ -38,7 +58,8 @@
             // create the TransformFeature control, using the renderIntent
             // from above
             control = new OpenLayers.Control.TransformFeature(vectorLayer, {
-                renderIntent: "transform"
+                renderIntent: "transform",
+                rotationHandleSymbolizer: "rotate"
             });
             map.addControl(control);
 
@@ -86,13 +107,15 @@
 <div id="docs">
     <p>This example shows transformation of vector features with a
        tranformation box. Grab one of the handles to resize the feature.
-       Holding the SHIFT key will preserve the aspect ratio. Position the
-       mouse right outside one of the corner handles to rotate the feature,
-       and hold the SHIFT key to only rotate in 45° increments.</p>
-       <p>In this example, the transformation box has been set on the left
+       Holding the SHIFT key will preserve the aspect ratio. Use the gray 
+       handle to rotate the feature and hold the SHIFT key to only rotate 
+       in 45° increments.
+    </p>
+    <p>In this example, the transformation box has been set on the left
        feature, with a rotation preset of 45°. Clicking on the right feature
        will set it for transformation, starting with an unrotated box.
-       Dragging a feature or the box edges will move it around.</p>
+       Dragging a feature or the box edges will move it around.
+    </p>
 </div>
 
   </body>

lib/OpenLayers/Control/TransformFeature.js

@@ -465,17 +465,17 @@ OpenLayers.Control.TransformFeature = OpenLayers.Class(OpenLayers.Control, {
         var handles = new Array(8);
         var rotationHandles = new Array(4);
         var geom, handle, rotationHandle;
-        var resize = ["sw-resize", "s-resize", "se-resize", "e-resize",
-                      "ne-resize", "n-resize", "nw-resize", "w-resize"];
+        var positions = ["sw", "s", "se", "e", "ne", "n", "nw", "w"];
         for(var i=0; i<8; ++i) {
             geom = this.box.geometry.components[i];
             handle = new OpenLayers.Feature.Vector(geom.clone(), {
-                role: resize[i]
+                role: positions[i] + "-resize"
             }, typeof this.renderIntent == "string" ? null :
                 this.renderIntent);
             if(i % 2 == 0) {
-                rotationHandle = new OpenLayers.Feature.Vector(geom.clone(),
-                    null, typeof this.rotationHandleSymbolizer == "string" ?
+                rotationHandle = new OpenLayers.Feature.Vector(geom.clone(), {
+                    role: positions[i] + "-rotate"
+                }, typeof this.rotationHandleSymbolizer == "string" ?
                     null : this.rotationHandleSymbolizer);
                 rotationHandle.geometry.move = rotationHandleMoveFn;
                 geom._rotationHandle = rotationHandle;
@@ -513,7 +513,6 @@ OpenLayers.Control.TransformFeature = OpenLayers.Class(OpenLayers.Control, {
             onDrag: function(feature, pixel) {
                 if(feature === control.box) {
                     control.transformFeature({center: control.center});
-                    control.drawHandles();
                 }
             },
             // set a new feature