Problem with "graphic-move" event

6422
9
04-04-2016 12:57 PM
JasonLevine
Occasional Contributor II

It appears that the "graphic-move" handler doesn't seem to be working the way I expected it to.  I created a fiddle to demonstrate the problem:

"graphic-move" handler not working - JSFiddle

When you click on a graphic and begin moving it, I expect the coordinates to be updating at the same frequency as the move counter, but they seem to update only once (just like the "graphic-first-move" handler).  Am I missing something?  I'm trying to do this with a polyline (not with points like in the example) and would like to access the geometry of the line as I'm moving it.

Thanks for the help,

Jason

0 Kudos
9 Replies
JasonLevine
Occasional Contributor II

I think what I should be asking is: is there a way to get the geometry of the graphic as it is moving?

0 Kudos
SteveCole
Frequent Contributor

How about the mouse-drag event for the GraphicsLayer?..

TyroneBiggums
Occasional Contributor III

I tried messing with it for a little bit. The event geometry stays the same. I looked at the transform object of graphic-move, too. It looks like transform dx and dy may show the x/y difference from the previous starting point but there was some lacking of consistency. Sometimes there was a dx and no dy, sometimes there was neither. It's probably easier to just have a mouse-move inside of the graphic-move like the other person was saying.

PatricioCruz
Esri Contributor

As was referenced in other comments, it seems like the graphic won't be getting updated until the end of the graphic move.  I've forked your original JSFiddle (below) with the mentioned approach of enabling the Map's 'mouse-move' event once the 'graphic-move-start' event is fired (then disabling it when the 'graphic-move-end' event is fired):

"graphic-move" handler not working - JSFiddle

This should hopefully get you the coordinates as the mouse is dragging the point.

TyroneBiggums
Occasional Contributor III

Well done.

0 Kudos
KenBuja
MVP Esteemed Contributor

One issue I see with that solution is the coordinates of the mouse isn't the same as the coordinates of the point. If you zoom out, the graphic covers a larger area and the mouse can "grab" the graphic a far distance from the origin. The new origin of the moved graphic will not have the same coordinates as the mouse position at the end of the move. Using this fiddle, zoom out to a global scale to see the problem.

0 Kudos
JasonLevine
Occasional Contributor II

Thanks Pat.

I took a similar approach with the mouse-move event, but used a dojo moveable instead of using the edit toolbar.  The event object contains the properties movementX and movementY which are the screen units the cursor travels between the current and last mouse-move event.  If I add those up each time I begin a drag, I can get the total change in screen units over the entire move;  these values can then be used to shift each vertex in the graphic (with some help from screenUtils) as I move it.

I created an example using a polyline here: Updating the coordinates of a moving graphic. - JSFiddle

Thank you all for your help,

Jason

0 Kudos

Thanks Tyrone Biggums for good idea about x/y difference.


I know solution how to get new new coordinates by moving.
"graphic-move" handler give important paramerts such as graphic and trasform. From graphic we need to take geometry coordinates, convert to screen coordinates via map.toScreen(), add to this coordinates differences from transform parametr (to x - transform.dx e.t.), convert result to map coordinates (via map.toMap()), convert to latitude/longitude using webMercatorUtils.xyToLngLat() and receive result in array (like [x, y]).


Live example: https://jsfiddle.net/catcherholms/9e563hju/

deleted-user-0NXDqYAmJ8kX
New Contributor II

I had to make the change below for the coordinate map.toScreen to work properly.

Instead of passing Point x,y I had to pass the original point event.graphic.geometry as it retain SR.

let start = this.map.toScreen(evt.graphic.geometry);
 
Thanks,
0 Kudos