How to interactively draw a circle on yandex maps?

Question

Yandex maps

The map has a circular area that you can drag and change the radius of the circle. There are no problems with drawing and dragging, it remains only to click - drag, so that the circle fulfills the movement of the mouse or finger (the center is where it was clicked, the edge is where it was released). So far I've done two clicks: the first sets the center, the second radius, counting from the center. Update after second click:

map.events
      .add('click', function (e) {
        if (prev_position == undefined) {
          prev_position = e.get('coords');
        }
        else {
          var d =	ymaps.coordSystem.geo.getDistance(prev_position, e.get('coords'));
          circle.geometry.setRadius(d);
          circle.geometry.setCoordinates(prev_position);
          prev_position = undefined;
        }
      });

Only in the interactive version can there be problems with moving around the map (and it is necessary and done just with a click-and-pull movement), then it would be possible to set the circle with the right mouse button, but tablets are also needed, so I didn’t figure out how best to do it)). Can you suggest the best way to implement this? There is one thought: to block the button on the map: "Set a circle." You press it and then the user is in edit mode.
If the mousemove event is involved here, then how to determine whether the key is pressed?

Answer 1

map = new ymaps.Map(map_id, {
        center: position,
        zoom: 10,
        controls: ['zoomControl', 'fullscreenControl']
      });
        circle = new ymaps.Circle([
          [position[0].toFixed(5),position[1].toFixed(5)],
          radius
        ], {}, 
        {
          draggable: false,
          fillColor: color1+"33",
          strokeColor: color1,
          strokeOpacity: 0.9,
          strokeWidth: 3
        })
        

        var resize_circle = function(e) {
          if (prev_position != undefined) {
            var d =	Math.round(ymaps.coordSystem.geo.getDistance(prev_position, e.get('coords')));
            if (d > 100000) { d = 100000}
            circle.geometry.setRadius(d);
          } 
        }

        var start_draw_circle = function(e){
          if (circle_mode_button.state.get('selected')) {
            prev_position = e.get('coords');
            circle.geometry.setCoordinates(prev_position);
          }
        }


        circle.events
        .add('mousedown', start_draw_circle)
        .add('mouseup', function (e) {
            prev_position = undefined;
        })
        .add('mousemove', resize_circle);
  

        map.events.
          add('mousedown', start_draw_circle)
          .add('mouseup', function (e) {
            prev_position = undefined;
          })
          .add('mousemove', resize_circle);

        circle_mode_button = new ymaps.control.Button("Рисовать область");
        circle_mode_button.state.set('selected', false);
        circle_mode_button.events.add('select', function(){
          map.behaviors.disable('drag');

        }).add('deselect', function(){
          map.behaviors.enable('drag');
        });
        map.controls.add(circle_mode_button, {float: 'right', maxWidth: 200});
        map.geoObjects.add(circle);