From 717e13fb44afb2d0f5e95487cfa2ae7b37c5b540 Mon Sep 17 00:00:00 2001 From: fredj Date: Thu, 26 Jan 2012 15:58:17 +0100 Subject: [PATCH 1/3] transformFeature() already call drawHandles --- lib/OpenLayers/Control/TransformFeature.js | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/OpenLayers/Control/TransformFeature.js b/lib/OpenLayers/Control/TransformFeature.js index 09cc76a8a9..66b441846e 100644 --- a/lib/OpenLayers/Control/TransformFeature.js +++ b/lib/OpenLayers/Control/TransformFeature.js @@ -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 From 4e73df011534d4f499b31c020bffa178a932e066 Mon Sep 17 00:00:00 2001 From: fredj Date: Fri, 27 Jan 2012 11:41:45 +0100 Subject: [PATCH 2/3] Set Control.TransformFeature handle role (rotate) into attributes. --- lib/OpenLayers/Control/TransformFeature.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/lib/OpenLayers/Control/TransformFeature.js b/lib/OpenLayers/Control/TransformFeature.js index 66b441846e..2b719a4450 100644 --- a/lib/OpenLayers/Control/TransformFeature.js +++ b/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; From becb7af745f47e32fbe02bde893560774eb689d9 Mon Sep 17 00:00:00 2001 From: fredj Date: Fri, 27 Jan 2012 12:31:18 +0100 Subject: [PATCH 3/3] Update the transform-feature example to show how the 'role' attribute can be used --- examples/transform-feature.html | 55 +++++++++++++++++++++++---------- 1 file changed, 39 insertions(+), 16 deletions(-) diff --git a/examples/transform-feature.html b/examples/transform-feature.html index cfb1407b62..a0c5645de2 100644 --- a/examples/transform-feature.html +++ b/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 @@

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.

-

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

+

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.

+ Dragging a feature or the box edges will move it around. +