nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Find more posts tagged with

Accepted answers

All comments

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.

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

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

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.

JianHuang

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

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

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

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.

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.