Move a graphic using a delta in screen units

[YohanBienvenue]

Hi,

When using the draw toolbar to add polygons and lines to a GraphicsLayer, I have some code that adds a measurements graphic (using a TextSymbol) on top of it.

My issue is that when using the edit toolbar to move those polygons around, obviously the measurement graphic I added does not follow. I want it to follow.

When using the edit toolbar to move a graphic, the graphic-move event handlers returns the linear transformation (dy/dy) in screen units.

I was thinking of using this delta to move the measurement graphic by the same amount. However the graphics point is in map units, so I can't offset it using this delta.

Is there any way I could convert this screen units delta to map units delta to move this other graphic by the same amount ?

Many thanks.

Yohan

[YohanBienvenue · Accepted solution]

I found the esri/geometry/screenUtils and used the functions to implement this. Not sure if it's the most efficient way but it works.

            // Moving a drawing also moves the associated measures           
            this.editToolbar.on('graphic-move-stop', lang.hitch(this, function(event){
                if (event.graphic.annotation && event.transform){
                    var measurementScreenPoint = screenUtils.toScreenGeometry(this.map.extent, this.map.width, this.map.height, event.graphic.annotation.geometry);
                    measurementScreenPoint.setX(measurementScreenPoint.x + event.transform.dx);
                    measurementScreenPoint.setY(measurementScreenPoint.y + event.transform.dy);
                    event.graphic.annotation.geometry = screenUtils.toMapGeometry(this.map.extent, this.map.width, this.map.height, measurementScreenPoint);
                    this.drawGraphicsLayer.redraw();
                }
            }));

Note that the event.graphic.annotation is a Graphic reference I added myself and represents the measurement Graphic I created.

Better ideas are welcome.

[TomSellsted]

Yohan,

There is also a method in the geometry engine to do offsets.  Here is a link to reference in the API:

esri/geometry/geometryEngine | API Reference | ArcGIS API for JavaScript

Regards,

Tom

[Haider_Ali]

offset method takes distance in number how can i apply this method in move event(dx,dy)?

Regards,

Haider

[thejuskambi]

Moving the Point type is fairly easy, its more complicated if it is Polyline or Polygon. Below is how you could move a point.

var graphicPoint = graphic.geometry;
var screenPoint = map.toScreen(graphicPoint);
screenPoint = screenPoint.offset(dx, dy);
var movedPoint = map.toMap(screenPoint);
graphic.setGeometry(movedPoint);

That should move you measurement graphic.

[Haider_Ali]

I have applied your answer to a polyline but its scaling the line instead of moving below is the fiddle of what i am doing

MoveGeomEsri - JSFiddle

[Haider_Ali]

Thanks its working now updated the code in  above  fiddle

just change screenPoint.offset(transform.dx || 0,transform.dy || 0) to screenPoint = screenPoint.offset(transform.dx || 0,transform.dy || 0); (My mistake sorry)

     Rotation,Move done and now handling scaling events is left any idea how to handle scaling?

[thejuskambi]

Glad I could help. Please mark the question as answered.

[Haider_Ali]

I didn't asked the question  so cant accept it. Any idea about scaling , how can i move my graphic according to scaled graphic?

[thejuskambi]

Sorry, I am not aware, how to do it. If you are strong in dojox.gfx, you could probably do it, by getting the dojoShape and manipulating it and updating the shape back to geometry, like earlier. But I cannot confirm it.

If the users does not need it, I would suggest you to disable the scaling. It would be easier if you were using EditToolbar instead of Editor Widget. The way to do it here.

     aspect.before(myEditor.editToolbar, "activate", function(options, selected){
          if((options & Edit.SCALE) === Edit.SCALE)
               options = options ^ Edit.SCALE;
          return [options, selected];
     });