Source: styles/symbolExample.js

let json2dom = require('json2dom');

/**
 * Класс, предназначенный для генерации образцов легенды слоя - dom/json/reactJson описаний
 * @class SymbolExample
 */
class SymbolExample {
   /**
    * Конструктор экземлпяров класса
    * @param params {object} - опции для задания свойств
    * @param params.geometryType {string} - тип геометрии
    */
   constructor(params) {
      this.params = params;
      let geometryType = this.params.geometryType;
      let dict = {
         "Point": this.markerTemplate,
         "MultiPoint": this.markerTemplate,
         "LineString": this.lineTemplate,
         "MultiLineString": this.lineTemplate,
         "Polygon": this.polygonTemplate,
         "MultiPolygon": this.polygonTemplate,
         "anyGeometryType": this.markerTemplate,
         undefined: this.markerTemplate
      };

      this.json = dict[geometryType](params);
      this.jsonReact = dict[geometryType](params);
   }

   /**
    * Метод, возвращающий json описание примера
    * @return {*}
    */
   getJson() {
      return this.json;
   }

   /**
    * Метод, возвращающий jsonReact описание примера
    * @return {*}
    */
   getJsonReact() {
      let json = Object.assign({}, this.jsonReact);
      this.replaceProps(json);
      return json;
   }

   /**
    * Метод, подменяющий свойства "-" на стиль camelCase (stroke-width -> strokeWidth)
    * @param item
    * @return {*}
    */
   replaceProps(item) {
      let self = this;
      for (let attr in item.attributes) {
         let upperKey = self.upperProps(attr);
         if (attr !== upperKey) {
            item.attributes[upperKey] = item.attributes[attr];
            delete item.attributes[attr];
         }
      }
      if (item.children) {
         for (let i = 0; i < item.children.length; i++) {
            item.children[i] = self.replaceProps(item.children[i]);
         }
      }
      return item;
   }

   upperProps(hyphensKey) {
      let prop = hyphensKey.replace(/-([a-z])/g, function (m, w) {
         return w.toUpperCase();
      });
      return prop;
   }

   /**
    * Получение DOM строки из json описания объекта
    * @return {str}
    */
   getDom() {
      let json = this.getJson();
      return json2dom(json);
   }

   /**
    * Шаблон для точечных объектов
    * @param params
    * @return {object} - объект, описывающий точечный объект
    */
   markerTemplate(params) {
      let viewWidth = params.width || 48;
      let viewHeight = params.height || 48;
      let cx = viewHeight / 2;
      let cy = viewWidth / 2;
      let r = params.r || 12;
      let image = params.style.image || {color: "#F0F", radius: 3};

      let json = {
         tagname: "svg",
         attributes: {
            width: viewWidth,
            height: viewHeight
         },
         children: [
            {
               tagname: "circle",
               attributes: {
                  cx: cx,
                  cy: cy,
                  r: image.radius || r,
                  stroke: image.color || "#0AF"
               }
            }
         ]
      };
      return json;
   }

   /**
    * Шаблон для линейных объектов
    * @param params
    * @return {object} - объект, описывающий линейный объект
    */
   lineTemplate(params) {
      let viewWidth = params.width || 48;
      let viewHeight = params.height || 48;
      let dy = viewHeight / 2;
      let dx = viewWidth;
      let stroke = params.style.stroke || {color: "#0AF", width: 1};

      let json = {
         tagname: "svg",
         attributes: {
            width: viewWidth,
            height: viewHeight
         },
         children: [
            {
               tagname: "line",
               attributes: {
                  x1: 0,
                  x2: dx,
                  y1: dy,
                  y2: dy,
                  stroke: stroke.color,
                  "stroke-width": stroke.width
               }
            }
         ]
      };
      return json;
   }

   /**
    * Шаблон для полигональных объектов
    * @param params
    * @return {object} - объект, описывающий полигональный объект
    */
   polygonTemplate(params) {
      let viewWidth = params.width || 48;
      let viewHeight = params.height || 48;
      let dx = viewWidth / 8;
      let dy = viewHeight / 8;
      let points = [[dx, dy], [dx, viewHeight - dy], [viewWidth - dx, viewHeight - dy], [viewHeight - dx, dy]]
         .map((item) => {
            return item.join(",");
         })
         .join(" ");

      let fill = params.style.fill || {color: "#FFF"};
      let stroke = params.style.stroke || {color: "#0AF", width: 1};

      let json = {
         tagname: "svg",
         attributes: {
            width: viewHeight,
            height: viewHeight
         },
         children: [
            {
               tagname: "polygon",
               attributes: {
                  points: points,
                  stroke: stroke.color || "#4f99ff",
                  "stroke-width": stroke.width || 1,
                  fill: fill.color
               }
            }
         ]
      };
      return json;
   }
}

module.exports = SymbolExample;