Drawing geometrical shapes with dimensions using ArcGIS API for JavaScript?

Question

I have to draw the geometrical shapes with their dimensions and show it with that shape.

As in below images,

1. I want to show the length and width of the rectangle, the radius of the circle and the area of the shape at centre.

2. If the user selects and edits the geometrical shapes then the dimensions should be updated accordingly.

I have read the below examples, but I couldn't able to find the proper one.

1. Add graphics to a map | ArcGIS API for JavaScript 3.25

2. Drawing tools | ArcGIS API for JavaScript 3.25

3. Measurement Widget | ArcGIS API for JavaScript 3.25

4. Reshape polygons | ArcGIS API for JavaScript 3.25

Answer 1

The company I work for created a customized solution to this exact issue, I cannot copy the code but I can give you a guideline:
- Create a variable that indicates 'inDrawing' state
- Create a variable for 'currentPoints'
- Create a graphicLayer for measurements - Create a listener on "mouse-move"/"mouse-drag" event on the map
- If "inDrawing":
- send the mouse position (x,y)
- Add the new point to the array
var movingPoint = new Point(x, y, spatialReference); currentPoints.push(movingPoint);
- If the shape is a polygon add the first point to the end of the points array [please note you should clear the array before the action/splice the last point etc.]
- Iterate on the currentPoint array and:
-- calculate distance between points pair
-- calculate the angle of the line
-- create a graphic text symbol with the distance and the angle
-- add the new graphic to the measurements graphicsLayer
- If the shape is a line and there are more than 3 vertices - add a graphic with total length
- If the shape is a polygon - add a graphic with the shape area

I've skipped some details like clearing layers and variables, I hope the guideline can be helpful nevertheless.