Draw geometrical shapes with dimensions and display it

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 added on-click button function,

//To draw the circle,

                dojo.connect(dojo.byId('gr_circle_polygon'), 'onclick', function (startIndex, endIndex) {
                isClicked = true;
                if (($("#gr_fh_polygon").hasClass('active')) || ($("#gr_rect_polygon").hasClass('active')) || ($("#gr_circle_polygon").hasClass('active'))) {
                    clearDrawingTools();
                } else {
                    dojo.connect(toolbar, "onDrawEnd", findPointsInExtent);
                    toolbar.activate(Draw['CIRCLE']);
                    $("#gr_circle_polygon").addClass('active')
                }
            });

//To draw the Rectangle,

                dojo.connect(dojo.byId('gr_rect_polygon'), 'onclick', function (startIndex, endIndex) {
                isClicked = true;
                if (($("#gr_fh_polygon").hasClass('active')) || ($("#gr_rect_polygon").hasClass('active')) || ($("#gr_circle_polygon").hasClass('active'))) {
                    clearDrawingTools();
                } else {
                    dojo.connect(toolbar, "onDrawEnd", findPointsInExtent);
                    toolbar.activate(Draw['RECTANGLE']);
                    $("#gr_rect_polygon").addClass('active')
                }
            });

//To draw the FreeHand Polygon

                dojo.connect(dojo.byId('gr_fh_polygon'), 'onclick', function (startIndex, endIndex) {
                isClicked = true;
                if (($("#gr_fh_polygon").hasClass('active')) || ($("#gr_rect_polygon").hasClass('active')) || ($("#gr_circle_polygon").hasClass('active'))) {
                    clearDrawingTools();
                } else {
                    dojo.connect(toolbar, "onDrawEnd", findPointsInExtent);
                    //    dojo.connect(toolbar, "onclick", showAllActions);
                    toolbar.activate(Draw['FREEHAND_POLYGON']);
                    $("#gr_fh_polygon").addClass('active')
                }
            });

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

1. https://developers.arcgis.com/javascript/3/jssamples/graphics_add.html
2. https://developers.arcgis.com/javascript/3/jssamples/toolbar_draw.html
3. https://developers.arcgis.com/javascript/3/jssamples/widget_measurement.html
4. https://developers.arcgis.com/javascript/3/jssamples/util_reshape.html

Answer 1

Hay, Check this out:

const update = (elem) => {
  const target = $($(elem).parent()[0]);
  const h = target.children('.h').val();
  const w = target.children('.w').val();
  const r = target.children('.r').val();
  const text = target.children('.text');
  if (r) {
    const d = r * 2;
    target.css({
      width: d,
      height: d,
    });
    text.text(`Area: ${3.1416 * r * r}, Radius: ${r}`)
  }
  if (h && w) {
    target.css({
      width: w,
      height: h,
    });
    text.text(`Area: ${w * h}, Width: ${w}, Height: ${h}`)
  }
};

.flex{
  min-width: 100vw;
  display: flex;
  justify-content: space-around;
}
.rect, .circ{
  width: 200px;
  height: 200px;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.circ{ border-radius: 50%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='flex'>
  <div class='rect'>
    <p class='text'></p>
    <input class='h' type='number' placeholder='height'/>
    <input class='w' type='number' placeholder='width'/>
    <input class='s' type='submit' value='submit' onclick='update(this)'>
  </div>
  <div class='circ'>
    <p class='text'></p>
    <input class='r' type='number' placeholder='radius'/>
    <input class='s' type='submit' value='submit' onclick='update(this)'>
  </div>
</div>