Создание модуля на фреймворке Htmlix

В данной статье будет описаны базовые принципы создания модулей на javascript фреймворке htmlix.

Например у вас есть приложение с большим количеством кнопок, событий и т.д. И для удобства, а также для увеличения скорости загрузки, и уменьшения потребления ресурсов вы захотели его разбить на модули. Пример работающего htmlix приложения на основе модулей можно покликать по ссылке — редактор для создания коллажей и спрайтов Collage_n .

Модули в htmlix полностью автономны и не требуют добавления в основной (core) участок кода. Поэтому их можно создать на отдельном js скрипте и подключить когда это потребуется или не подключать вовсе. Информацию об изменении состояния приложения и новые данные они получают на основе пользовательских событий см. Работа с пользовательскими событиями, поэтому их легко добавить или удалить не меняя основной код приложения. Можно также выключить прослушивание данных — событий из самого модуля, а потом снова включить.

Далее будет рассмотрен модуль addDrawCirclePane приложения Collage_n который рисует круги на канвас с помощью кликов мыши. Перед рисованием модуль принимает два параметра — цвет и диаметр круга с помощью свойств с типом inputvalue. Далее после нажатия кнопки рисовать вызывает emiter событие «emiter-operation-with» — со значением «draw-circle» чтобы включить активное состояние модуля, и выключить другие модули приложения.

Модуль создается также как и обычный компонент:

(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 событий при старте модуля  })()  

В примере выше мы подключили контейнер с помощью функции: HM.containerInit(htmlLink, HM.description, «module_name»);
где HM — ссылка на экземпляр приложения.

Для подключения массива нужно использовать функцию HM.arrayInit(htmlLink, HM.description, «module_name»);

В редакторе Collage_n модули подключаются в панели «Загрузить модуль, изменить настройки».

Это был краткий обзор основных принципов создания и подключения htmlix модулей.