(function(){
//разметка модуля
// создаем контейнер для модуля data-draw_circle_panel="container"
//все используемые в js поля и кнопки обозначены именами (для удобства)
// name="draw_circle_btn", name="draw_sircle_radius", name="draw_sircle_color"
  var html = `
  <div data-draw_circle_panel="container"  class="form-group" name="draw_circle_panel">
  <label for="exampleFormControlInput1" style="font-size: 15px;">
                       Рисовать окружность
        </label>
  <div class="form-row">
    <div class="form-group col-md-4">
                     <button type="button" name="draw_circle_btn" class="btn btn-success btn-sm">
                            Рисовать
                      </button>
    </div>
    <div class="form-group col-md-4">
       <input name="draw_sircle_radius" type="text" class="form-control form-control-sm">
    </div>
    <div class="form-group col-md-4">
         <input name="draw_sircle_color" type="text" class="form-control form-control-sm">
    </div>
  </div>
</div>
`  ;
//динамическое добавление разметки модуля в общую разметку приложения.
  var div = document.createElement("div");
  div.innerHTML = html;
  div = div.querySelector("div");
  var parent = document.querySelector("[data-main_form]");
  var insert_before = document.querySelector("[name='common_btns_class']")
  var insertedElement = parent.insertBefore(div, insert_before);
//js код модуля
  var draw_circle_panel = {
    container: "draw_circle_panel", //контейнер модуля
    props: [
               ///свойства модуля
    ["draw_circle_btn", "click", "[name='draw_circle_btn']"],
    ["draw_sircle_radius", "inputvalue", "[name='draw_sircle_radius']"],
    ["draw_sircle_color", "inputvalue", "[name='draw_sircle_color']"],
///два свойства-события основного core приложения: клики по канвас и событие смены операции
    ["canvas_click", "emiter-mousedown-canvas", ""],
    ["operation_with", "emiter-operation-with", ""],
    ],
    methods: {
//отключает слушателей canvas событий ( mousedown) если модуль находится в пассивном состоянии
      operation_with: function(){
        if(this.emiter.prop != "draw-circle"){
          this.parent.props.canvas_click.disableEvent();
        }else{
          this.parent.props.canvas_click.enableEvent();
        }
      },
//при нажатии на кнопку рисовать - вызывает событие "emiter-operation-with" и устанавливает свойство prop = "draw-circle" чтобы другие модули отключили прослушивание событий и скрыли ненужные кнопки.
      draw_circle_btn: function(){
          this.$$("emiter-operation-with").set("draw-circle");
      }  ,
//слушает событие приложения  "emiter-mousedown-canvas" и в активном состоянии рисует круги при кликах мышью.
    canvas_click: function(){
      if(this.$$("emiter-operation-with").prop == "draw-circle"){
//данные из свойств модуля
        var props = this.parent.props;
        var radius = props.draw_sircle_radius.getProp();
        var color = props.draw_sircle_color.getProp();
        var point = this.emiter.prop;//данные из события основного (core) приложения с координатами точки на канвас
             saveStep(saveImg, this.$props().commonProps.area_1);  //обычная функции из глобальной области для сохранения шагов, редактирования
        ctx.save();
              ctx.putImageData(saveImg, 0, 0);
        ctx.beginPath();
        ctx.arc(point[0], point[1], radius, 0, 2*Math.PI, false);
        ctx.fillStyle =  color;
        ctx.fill();
        ctx.lineWidth = 1;
        ctx.strokeStyle =  color;
        ctx.stroke();
                               //переменная из глобальной области для сохранения картинки после рисования
        saveImg = ctx.getImageData(0,0, srcWidth, srcHeight);
        ctx.restore();
      }
    }
    }
  }
//добавляем описание модуля в общее описание приложения
  HM.description.draw_circle_panel  = draw_circle_panel;
//создаем контейнер модуля
  HM.containerInit(div , HM.description, "draw_circle_panel");
  HM.eventProps["emiter-operation-with"].emit(); //вызываем чтобы отключить слушателей canvas событий при старте модуля
})()