graphics, context menu, edit - can I rotate TEXT

[AdrianMarsden]

Hi

I have a drawing toolbar that allows my users to add graphics.  Using this sample I have added context menu to edit the shapes they have drawn.  My users can add textsymbols (which have a point geometry) this part of the code

ctxMenuForGraphics.addChild(new dijit.MenuItem({
        label: "Rotate/Scale",
        onClick: function() {
            if (selected.geometry.type !== "point") {
                editToolbar.activate(esri.toolbars.Edit.ROTATE | esri.toolbars.Edit.SCALE, selected);
            } else {
                alert("Not implemented");
            }
        }
    }));

Prevents the rotate option being enabled for the textsymbol.

However my users want to be able to rotate textsymbols.  If I remove the check for POINTS in the code above I don't get the "Not implemented" warning, but I also don't get any rotate handles.

The TextSymbol does have a rotation property, so I could get that set when it is generated, but the user wil have to be good with angles.

Any thoughts?

ACM

[BenFousek]

Points only have move.  To rotate point symbols and text you have to use the symbol's angle property.

The angles can be confusing to users as you mentioned.  I've used a slider in a tooltip dialog, but I'm thinking about going towards menu options "Rotate 90° Clockwise", "Rotate 90° Counterclockwise", and "Rotate 180°".

[AdrianMarsden]

OK - reviving thread after 3.8 says this can be done.  I am trying now to merge the functionality into the context menu sample

https://developers.arcgis.com/javascript/jssamples/graphics_contextmenu.html


My code is Non-AMD so not sure if I can get this working.

Cheers

ACM

PS this is as far as I have got

    ctxMenuForGraphics.addChild(new dijit.MenuItem({
        label: "Rotate/Scale",
        onClick: function () {
            if (selected.geometry.type !== "Point") {                
                if (selected.symbol.declaredClass === "esri.symbol.TextSymbol") {                    
                    editToolbar.activate(esri.toolbars.Edit.EDIT_TEXT, selected);                   
                }
                else {
                    editToolbar.activate(esri.toolbars.Edit.ROTATE | esri.toolbars.Edit.SCALE, selected);
                }
            } else {
                    alert("Not implemented");
            }
        }
    }));

But it fails with Uncaught Error: [esri.toolbars.Edit::activate] Unable to activate the tool. Check if the tool is valid for the given geometry type.

[JianHuang]

non-AMD style should work.
You still need to specifically tell the edit toolbar to enable rotate.

function activateToolbar(graphic) {
        var tool = 0;        
        tool = tool | esri.toolbars.Edit.MOVE;      
        tool = tool | esri.toolbars.Edit.SCALE;         
        tool = tool | esri.toolbars.Edit.ROTATE;
 tool = tool | esri.toolbars.Edit.EDIT_TEXT;   
        
        //specify toolbar options        
        var options = {
          //uniformScaling: false
        };
        editToolbar.activate(tool, graphic, options);
      }

[AdrianMarsden]

Mmm nearly there I think

I tweaked your code into mine, to give

                if (selected.symbol.declaredClass === "esri.symbol.TextSymbol") {                                       
                        var tool = 0;
                        tool = tool | esri.toolbars.Edit.MOVE;
                        tool = tool | esri.toolbars.Edit.SCALE;
                        tool = tool | esri.toolbars.Edit.ROTATE;
                        tool = tool | esri.toolbars.Edit.EDIT_TEXT;


                        //specify toolbar options        
                        var options = {
                            //uniformScaling: false
                        };
                    
                        editToolbar.activate(tool, selected, options);
                   
                }

This doesn't produce any errors, but it doesn't give any resized or rotate handles - it doesm however allow a drag of the textsymbol.

Cheers

Adrian

[JianHuang]

Can you create a simple case and put it on jsfiddle?

[AdrianMarsden]

Odd - I created my own version(I have never got to frips with jsfiddle) and it worked OK -copied to jsfiddle  http://jsfiddle.net/EqVX6/2/  - right click the text and selct rotate on the text.

So, I guess there is something about how I add the text in my production site - I'll look at that next week.

[AdrianMarsden]

Hi -  I sent the Selected object to console in the working and non-working version - all I can see different is the projection

Working object

_extent: Object
_graphicsLayer: Object
_offsets: Array[1]
_shape: Object
attributes: undefined
geometry: Object

spatialReference: Object

wkid: 4326
__proto__: Object
type: "point"
x: -40
y: 35
__proto__: Object
infoTemplate: undefined
symbol: Object

_fill: null
_stroke: null
align: "middle"
color: b.Color
font: Object
horizontalAlignment: "center"
kerning: true
rotated: false
text: "Editable Text"
type: "textsymbol"
x: 0
xoffset: 0
y: 0
yoffset: 0

Failing object

_extent: Object
_graphicsLayer: Object
_offsets: Array[1]
_shape: Object
attributes: Object
geometry: Object

spatialReference: Object

wkid: 27700
__proto__: Object
type: "point"
x: 315910.97257876315
y: 85021.0373395566
__proto__: Object
infoTemplate: undefined
symbol: Object

_inherited: Object
align: "middle"
angle: 0
color: b.Color
font: Object
horizontalAlignment: "center"
kerning: true
rotated: false
text: "FAILING"
type: "textsymbol"
x: 0
xoffset: 0
y: 0
yoffset: 0

End of day here.  So off home 🙂

ACM

[JianHuang]

Just a little bit off topic. In my opinion, the context menu is very 'desktop' design, which may not be suitable for modern web application, especially for mobile devices.

[AdrianMarsden]

True - but for my internal application it is just right - I know exactly what my users use (currently XP, IE8 with Google Chrome Frame, monitors, keyboards and mice) - I'm not sure I'd ever want anyone doing this sort of stuff on a mobile device - I'd use Collector or the green app for that.

One difference between my test (on fiddle) and prod system, is the text isn't in the default map.graphics, but in a new graphics layer.