Changing width and height attribute with ArcGIS Javascript API?

Question

We've got a client side drawing application working with the Arcgis Javascript API, works pretty well with most of the standard components so far. This is our first Arcgis application and we really like the API. Now I've got a request from our client that he wants to be able to change the width and length of a graphic from an infowindow/attribute.

If already played around and looked at first getting the extend of the graphic and then use getWidth and getHeight, but it seems this gives with the bounding box and not the graphic. Another option I was thinking of is calculating the line lengths of each side and then edit the points, but it feel like this might be an overcomplex solution.

It is fine if this is only possible with a polygon drawn with the rectangle drawing tool, however it should be possible to rotate this element. So what I want to achieve is a bit something like the screenshot underneath.

_{(source: kabelfoon.nl)}

Do you have any opinions what the best way to tackle this with the Arcgis API

Answer 1

Fixed this myself eventually. What I ended up doing:

1. Get the xmin, ymin of the graphic on create and save this in the graphic attributes (got this from the graphic ring). Whenever the object gets moved with the Esri Editor widget I updated the xmin and ymin by hooking into the 'graphic-move-stop' event.
2. Next to that I defined the width,height and rotation of the graphic as attributes. Width and height have default values.
3. The width is xmin + width, the height is ymin +height. When rotation is defined I mutate all the ring points of the graphic with this basic 2d rotation matrix: https://stackoverflow.com/questions/17410809/how-to-calculate-rotation-in-2d-in-javascript. Please make sure you have the original xmin and ymin after rotating.

4. When the object gets rotated with the esri rotate tool I let the Esri implementation do all the rotating and I recalculate the width and height by basic Pythagoras. i.e

   var a = graphic.geometry.rings[0][3][0]-graphic.geometry.rings[0][0][0];
   var b = graphic.geometry.rings[0][3][1]-graphic.geometry.rings[0][0][1];
   var width = Math.round(pyth(a,b));
   

5. Esri based scaling also recalculates the width and height. However I have to get the new xmin and ymin.

If there is interest from the community I can have a look in getting the code out of our project and share it with you.