topic Re: graphics, context menu, edit - can I rotate TEXT in ArcGIS JavaScript Maps SDK Questions

graphics, context menu, edit - can I rotate TEXT

AdrianMarsden — Tue, 06 Aug 2013 12:55:10 GMT

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

Re: graphics, context menu, edit - can I rotate TEXT

BenFousek — Tue, 06 Aug 2013 14:50:39 GMT

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°".

Re: graphics, context menu, edit - can I rotate TEXT

AdrianMarsden — Fri, 10 Dec 2021 22:57:13 GMT

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.

Re: graphics, context menu, edit - can I rotate TEXT

JianHuang — Fri, 10 Dec 2021 22:57:16 GMT

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);
      }

Re: graphics, context menu, edit - can I rotate TEXT

AdrianMarsden — Fri, 10 Dec 2021 22:57:19 GMT

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

Re: graphics, context menu, edit - can I rotate TEXT

JianHuang — Fri, 31 Jan 2014 16:13:00 GMT

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

Re: graphics, context menu, edit - can I rotate TEXT

AdrianMarsden — Sun, 02 Feb 2014 12:38:33 GMT

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.

Re: graphics, context menu, edit - can I rotate TEXT

AdrianMarsden — Fri, 10 Dec 2021 22:57:22 GMT

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

Re: graphics, context menu, edit - can I rotate TEXT

JianHuang — Tue, 04 Feb 2014 18:06:31 GMT

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.

Re: graphics, context menu, edit - can I rotate TEXT

AdrianMarsden — Wed, 05 Feb 2014 07:12:13 GMT

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.