@aj-shadow/z-abs-complayer-visualizationlog-client 0.0.0-aj-beta.221

package/project/client/logic/cache.js

@@ -0,0 +1,185 @@
+
+'use strict';
+
+import LogDataAction from 'z-abs-funclayer-engine-cs/clientServer/log/log-data-action';
+import LogType from 'z-abs-funclayer-engine-cs/clientServer/log/log-type';
+
+
+class Cache {
+  constructor() {
+    this.elementStartCache = new Map();
+    this.elementEndCache = new Map();
+    this.elementLogCache = [new Array(LogType.length)];
+    for(let i = 0; i < LogType.length; ++i) {
+      if(LogType.IP === i) {
+        this.elementLogCache[i] = [[new Array(LogDataAction.length)], [new Array(LogDataAction.length)]];
+        for(let j = 0; j < LogDataAction.length; ++j) {
+          this.elementLogCache[i][0][j] = new Map();
+          this.elementLogCache[i][1][j] = new Map();
+        }
+      }
+      else if(LogType.ERROR === i) {
+        this.elementLogCache[i] = [[], []];
+      }
+      else {
+        this.elementLogCache[i] = [];
+      }
+    }
+    this._get = [this.getStart.bind(this), this.getEnd.bind(this), this.getLog.bind(this)];
+    this._set = [this.setStart.bind(this), this.setEnd.bind(this), this.setLog.bind(this)];
+  }
+  
+  getStart(data) {
+    const cache = this.elementStartCache.get(data.testCaseId);
+    if(!cache) {
+      return null;
+    }
+    else {
+      return cache.pop();
+    }
+  }
+  
+  getEnd(data) {
+    const cache = this.elementEndCache.get(data.testCaseId);
+    if(cache) {
+      if(cache[data.resultId]) {
+        return cache[data.resultId].pop();
+      }
+    }
+    return null;
+  }
+  
+  getLog(data) {
+    let cache = null;
+    if(LogType.IP === data.type) {
+      const protocolIndex = data.extraData.protocolIndex;
+      if(protocolIndex) {
+        const hasInners = !data.extraData.innersData?.inners ? 0 : 1;
+        const map = this.elementLogCache[LogType.IP][hasInners][data.dataId];
+        if(LogDataAction.CLOSING === data.dataId || LogDataAction.CLOSED === data.dataId || LogDataAction.STACK === data.dataId) {
+          const id = `${protocolIndex}-${data.extraData.type}`;
+          const cachedElements = map.get(id);
+          if(cachedElements) {
+            const element = cachedElements.pop();
+            return element;
+          }
+        }
+        else {
+          const cachedElements = map.get(protocolIndex);
+          if(cachedElements) {
+            const element = cachedElements.pop();
+            return element;
+          }
+        }
+      }
+      return null;
+   }
+    else if(LogType.ERROR === data.type) {
+      const hasInners = !data.extraData.innersData?.inners ? 0 : 1;
+      cache = this.elementLogCache[LogType.ERROR][hasInners];
+    }
+    else {
+      cache = this.elementLogCache[data.type];
+    }
+    if(cache) {
+      const element = cache.pop();
+      return element;
+    }
+    else {
+      return null;
+    }
+  }
+  
+  setStart(data, element) {
+    const cache = this.elementStartCache.get(data.testCaseId);
+    if(cache) {
+      cache.push(element);
+    }
+    else {
+      this.elementStartCache.set(data.testCaseId, [element]);
+    }
+  }
+  
+  setEnd(data, element) {
+    const cache = this.elementEndCache.get(data.testCaseId);
+    if(cache) {
+      if(cache[data.resultId]) {
+        cache[data.resultId].push(element);
+      }
+      else {
+        cache[data.resultId] = [element];
+      }
+    }
+    else {
+      const results = new Array(11);
+      this.elementEndCache.set(data.testCaseId, results);
+      results[data.resultId] = [element];
+    }
+  }
+  
+  setLog(data, element) {
+    if(LogType.IP === data.type) {
+      const protocolIndex = data.extraData.protocolIndex;
+      if(protocolIndex) {
+        const hasInners = !data.extraData.innersData?.inners ? 0 : 1;
+        const map = this.elementLogCache[LogType.IP][hasInners][data.dataId];
+        if(LogDataAction.CLOSING === data.dataId || LogDataAction.CLOSED === data.dataId || LogDataAction.STACK === data.dataId) {
+          const id = `${protocolIndex}-${data.extraData.type}`;
+          const cachedElements = map.get(id);
+          if(cachedElements) {
+            cachedElements.push(element);
+          }
+          else {
+            map.set(id, [element]);
+          }
+        }
+        else {
+          const cachedElements = map.get(protocolIndex);
+          if(cachedElements) {
+            cachedElements.push(element);
+          }
+          else {
+            map.set(protocolIndex, [element]);
+          }
+        }
+      }
+    }
+    else if(LogType.ERROR === data.type) {
+      const hasInners = !data.extraData.innersData?.inners ? 0 : 1;
+      this.elementLogCache[LogType.ERROR][hasInners].push(element);
+    }
+    else {
+      this.elementLogCache[data.type].push(element);
+    }
+  }
+  
+  set(data, element) {
+    return this._set[data.dataType](data, element);
+  }
+  
+  get(data) {
+    return this._get[data.dataType](data);
+  }
+  
+  clear() {
+    this.elementStartCache.clear();
+    this.elementEndCache.clear();
+    for(let i = 0; i < LogType.length; ++i) {
+      if(LogType.IP === i) {
+        for(let j = 0; j < LogDataAction.length; ++j) {
+          this.elementLogCache[i][0][j].clear();
+          this.elementLogCache[i][1][j].clear();
+        }
+      }
+      else if(LogType.ERROR === i) {
+        this.elementLogCache[i] = [[], []];
+      }
+      else {
+        this.elementLogCache[i] = [];
+      }
+    }
+  }
+}
+
+
+module.exports = Cache;

package/project/client/logic/const.js

@@ -0,0 +1,26 @@
+
+'use strict';
+
+
+class Const {
+  static DATA_LOG_START = 0;
+  static DATA_LOG_END = 1;
+  static DATA_LOG_LOG = 2;
+  
+  static LOCAL_TYPE_IS_CLIENT = 0;
+  static LOCAL_TYPE_IS_SERVER = 1;
+  static LOCAL_TYPE_IS_UNKNOWN = 2;
+  
+  static ICON_X_HALF = 7;
+  static ICON_X = Const.ICON_X_HALF + Const.ICON_X_HALF;
+  static ICON_X_WIDTH = Const.ICON_X + Const.ICON_X;
+  static ICON_Y_HALF = 5;
+  static ICON_Y = Const.ICON_Y_HALF + Const.ICON_Y_HALF;
+  static ICON_Y_HEIGHT = Const.ICON_Y + Const.ICON_Y;
+  
+  static SEND = 0;
+  static RECEIVE = 1;
+}
+
+
+module.exports = Const;

package/project/client/logic/log-filter.js

@@ -0,0 +1,122 @@
+
+'use strict';
+
+import LogType from 'z-abs-funclayer-engine-cs/clientServer/log/log-type';
+
+
+class LogFilter {
+  constructor() {
+    this.type = [false, false, true, true, true, true, true, true, false, true, true];
+  }
+  
+  init(log) {
+    this.type[LogType.ENGINE] = log.filterEngine;
+    this.type[LogType.DEBUG] = log.filterDebug;
+    this.type[LogType.ERROR] = log.filterError;
+    this.type[LogType.WARNING] = log.filterWarning;
+    this.type[LogType.IP] = log.filterIP;
+    this.type[LogType.GUI] = log.filterGUI;
+    this.type[LogType.VERIFY_SUCCESS] = log.filterSuccess;
+    this.type[LogType.VERIFY_FAILURE] = log.filterFailure;
+    this.type[LogType.TEST_DATA] = log.filterTestData;
+    this.type[LogType.BROWSER_LOG] = log.filterBrowserLog;
+    this.type[LogType.BROWSER_ERR] = log.filterBrowserErr;
+  }
+  
+  update(log) {
+    let isUpdated = false;
+    if(this.type[LogType.ENGINE] !== log.filterEngine) {
+      this.setFilterEngine(log.filterEngine);
+      isUpdated = true;
+    }
+    if(this.type[LogType.DEBUG] !== log.filterDebug) {
+      this.setFilterDebug(log.filterDebug);
+      isUpdated = true;
+    }
+    if(this.type[LogType.ERROR] !== log.filterError) {
+      this.setFilterError(log.filterError);
+      isUpdated = true;
+    }
+    if(this.type[LogType.WARNING] !== log.filterWarning) {
+      this.setFilterWarning(log.filterWarning);
+      isUpdated = true;
+    }
+    if(this.type[LogType.IP] !== log.filterIP) {
+      this.setFilterIP(log.filterIP);
+      isUpdated = true;
+    }
+    if(this.type[LogType.GUI] !== log.filterGUI) {
+      this.setFilterGUI(log.filterGUI);
+      isUpdated = true;
+    }
+    if(this.type[LogType.VERIFY_SUCCESS] !== log.filterSuccess) {
+      this.setFilterSuccess(log.filterSuccess);
+      isUpdated = true;
+    }
+    if(this.type[LogType.VERIFY_FAILURE] !== log.filterFailure) {
+      this.setFilterFailure(log.filterFailure);
+      isUpdated = true;
+    }
+    if(this.type[LogType.TEST_DATA] !== log.filterTestData) {
+      this.setFilterTestData(log.filterTestData);
+      isUpdated = true;
+    }
+    if(this.type[LogType.BROWSER_LOG] !== log.filterBrowserLog) {
+      this.setFilterBrowserLog(log.filterBrowserLog);
+      isUpdated = true;
+    }
+    if(this.type[LogType.BROWSER_ERR] !== log.filterBrowserErr) {
+      this.setFilterBrowserErr(log.filterBrowserErr);
+      isUpdated = true;
+    }
+   // console.log('log-filter:', isUpdated);
+    return isUpdated;
+  }
+    
+  setFilterEngine(filterEngine) {
+    this.type[LogType.ENGINE] = filterEngine;
+  }
+  
+  setFilterDebug(filterDebug) {
+    this.type[LogType.DEBUG] = filterDebug;
+  }
+  
+  setFilterError(filterError) {
+    this.type[LogType.ERROR] = filterError;
+  }
+  
+  setFilterWarning(filterWarning) {
+    this.type[LogType.WARNING] = filterWarning;
+  }
+  
+  setFilterIP(filterIP) {
+    this.type[LogType.IP] = filterIP;
+  }
+  
+  setFilterGUI(filterGUI) {
+    this.type[LogType.GUI] = filterGUI;
+  }
+  
+  setFilterSuccess(filterSuccess) {
+    this.type[LogType.VERIFY_SUCCESS] = filterSuccess;
+  }
+  
+  setFilterFailure(filterFailure) {
+    this.type[LogType.VERIFY_FAILURE] = filterFailure;
+  }
+  
+  setFilterTestData(filterTestData) {
+    this.type[LogType.TEST_DATA] = filterTestData;
+  }
+  
+  setFilterBrowserLog(filterBrowserLog) {
+    this.type[LogType.BROWSER_LOG] = filterBrowserLog;
+  }
+  
+  setFilterBrowserErr(filterBrowserErr) {
+    this.type[LogType.BROWSER_ERR] = filterBrowserErr;
+  }
+}
+
+
+module.exports = LogFilter;

package/project/client/react-component/log.jsx

@@ -0,0 +1,296 @@
+
+'use strict';
+
+import Cache from '../logic/cache';
+import Const from '../logic/const';
+import TemplateLogStart from '../templates/template-log-start';
+import TemplateLogEnd from '../templates/template-log-end';
+import TemplateLogLog from '../templates/template-log-log';
+import TemplateInners from 'z-abs-complayer-visualizationinner-client/client/templates/template-inners';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+import TemplateIcon from '../templates/template-icons/template-icon';
+import DataLogDynamicBuffer from 'z-abs-complayer-visualizationinner-client/client/data/data-log-dynamic-buffer';
+import DataScrollListNode from 'z-abs-complayer-visualizationinner-client/client/data/data-scroll-list-node';
+import ScrollList from 'z-abs-complayer-bootstrap-client/client/scroll-list/scroll-list';
+import ScrollListNode from 'z-abs-complayer-bootstrap-client/client/scroll-list/scroll-list-node';
+import ScrollListTemplateData from 'z-abs-complayer-bootstrap-client/client/scroll-list/scroll-list-template-data';
+import PooledBuffers from 'z-abs-corelayer-client/client/communication/core-protocol/pooled-buffers';
+import ReactComponentRealtimeRenderer from 'z-abs-corelayer-client/client/react-component/react-component-realtime-renderer';
+import AppProtocolConst from 'z-abs-funclayer-engine-cs/clientServer/communication/app-protocol/app-protocol-const';
+import ActorResultConst from 'z-abs-funclayer-engine-cs/clientServer/execution/actor-result-const';
+import LogType from 'z-abs-funclayer-engine-cs/clientServer/log/log-type';
+import React from 'react';
+
+
+export default class Log extends ReactComponentRealtimeRenderer {
+  constructor(props) {
+    super(props, [props.store]);
+    this.isActive = false;
+    this.logId = 0;
+    this.name = '';
+    this.logClient = false;
+    this.logConsole = false;
+    this.logClientSettingLog = false;
+    this.logClientSettingTc = false;
+    this.logClientSettingTs = false;
+    this.logClientSettingSum = false;
+    this.logClientSettingErr = false;
+    this.logConsoleSettingLog = false;
+    this.logConsoleSettingTc = false;
+    this.logConsoleSettingTs = false;
+    this.logConsoleSettingSum = false;
+    this.logConsoleSettingErr = false;
+    this.refDivHeading = React.createRef();
+    this.refDivLog = React.createRef();
+    this.logStartTemplate = new TemplateLogStart();
+    this.logEndTemplate = new TemplateLogEnd();
+    this.logLogTemplate = new TemplateLogLog();
+    this.cache = new Cache();
+    this.pooledBuffers = new PooledBuffers('log');
+    this.templateInners = new TemplateInners('log', TemplateLogLog.createInners, this.calculateInnersSize.bind(this));
+    this.templates = [
+      new TemplateLogStart(),
+      new TemplateLogEnd(),
+      new TemplateLogLog(this.templateInners)      
+    ];
+    this.scrollList = new ScrollList(props.name, new ScrollListTemplateData(this.templates, new DataScrollListNode(this.pooledBuffers)), (autoScroll) => {
+      if(props.onAutoScroll) {
+        props.onAutoScroll(autoScroll);
+      }
+    }, (data, cb, ...params) => {
+      this._renderActiveRealtime(data, cb, ...params);
+    }, (left) => {
+      this.refDivHeading.current.setAttribute('style', `left:${-left}px;`);
+    }, this.cache);
+    this.cbIsRealtime = () => {
+      return true;
+    };
+  }
+  
+  didMount() {
+    const storeState = this.state[this.props.storeName];
+    this.props.filter.update(storeState.buttons.log);
+    if(0 !== this.props.stackStyles.size) {
+      this.prepairComponents(this.props, true);
+    }
+    this.scrollList.init(this.refDivLog.current, storeState.buttons.log.scroll, storeState.buttons.log.zoom);
+  }
+  
+  willUnmount() {
+    //ContentCache.clear();
+    this.cache.clear();
+    this.pooledBuffers.clear();
+    PooledBuffers.clear();
+    ddgc.gc();
+    this.prepairComponents(this.props, false);
+    this.scrollList.exit();
+  }
+  
+  realtimeUpdate(nextProps, nextState) {
+    const storeState = this.state[this.props.storeName];
+    const nextStoreState = nextState[nextProps.storeName];
+    if(this.props.buttonsLoaded !== nextProps.buttonsLoaded || !this.shallowCompare(this.props.stackStyles, nextProps.stackStyles)) {
+      this.prepairComponents(nextProps, true);
+    }
+    if(nextStoreState.buttons.log !== storeState.buttons.log) {
+      const filterChangedSize = nextProps.filter.update(nextStoreState.buttons.log);
+      this.scrollList.update(nextStoreState.buttons.log.scroll, nextStoreState.buttons.log.zoom, filterChangedSize);
+    }
+  }
+  
+  active(active) {
+    const prevActive = this.isActive;
+    this.isActive = active;
+    this.scrollList.active(active);
+    if(!prevActive && active) {
+      this._renderActiveRealtime([false, false]);
+    }
+  }
+  
+  onRenderRealtimeFrame(timestamp, clear, force) {
+    this.scrollList.renderRealtimeFrame(timestamp, clear, force);
+  }
+  
+  _template(index, ...params) {
+    const template = this.templates[index];
+    if(template) {
+      const bufferData = template.store(...params);
+      const node = new ScrollListNode(bufferData);
+      this.scrollList.add(node, index);
+      this._renderActiveRealtime([false, false]);
+    }
+  }
+  
+  onRealtimeMessage(msg) {
+    if(AppProtocolConst.LOG === msg.msgId) {
+      if(this.logClientSettingLog) {
+        this._template(Const.DATA_LOG_LOG, msg, ++this.logId);
+      }
+      if(this.logConsoleSettingLog) {
+        ddb.logs[msg.type](msg.date, msg.fileName, msg.lineNumber, msg.log.padEnd(80, ' '));
+      }
+    }
+    else if(AppProtocolConst.TEST_CASE_STARTED === msg.msgId) {
+      if(this.logClientSettingTc) {
+        this.name = msg.name;
+        this._template(Const.DATA_LOG_START, msg, 1, 1);
+      }
+    }
+    else if(AppProtocolConst.TEST_CASE_STOPPED === msg.msgId) {
+      if(this.logClientSettingTc) {
+        this._template(Const.DATA_LOG_END, msg);
+      }
+      if(this.logConsoleSettingTc) {
+        ddb.print(ActorResultConst.RESULTS_CONSOLE[msg.resultId], this.name);
+      }
+    }
+    else if(AppProtocolConst.TEST_SUITE_STOPPED === msg.msgId) {
+      if(this.logConsoleSettingTs) {
+        
+      }
+    }
+    else if(AppProtocolConst.TEST_CASE_CLEAR === msg.msgId && 'TestCase' === this.props.clearMsgPrefix) {
+      if('log' === msg.tab) {
+        this._renderActiveRealtime([true, false], () => {
+          //ContentCache.clear();
+          this.cache.clear();
+          this.pooledBuffers.clear();
+          ddgc.gc();
+        });
+      }
+    }
+    else if(AppProtocolConst.TEST_SUITE_CLEAR === msg.msgId && 'TestSuite' === this.props.clearMsgPrefix) {
+      if('log' === msg.tab) {
+        this._renderActiveRealtime([true, false], () => {
+          //ContentCache.clear();
+          this.cache.clear();
+          this.pooledBuffers.clear();
+          ddgc.gc();
+        });
+      }
+    }
+    else if(AppProtocolConst.EXECUTION_STARTED === msg.msgId) {
+      this.logClient = !!(1 & msg.chosen);
+      this.logConsole = !!(2 & msg.chosen);
+      this.logClientSettingLog = this.logClient && !!(1 & msg.clientLogSettings);
+      this.logClientSettingTc = this.logClient && !!(2 & msg.clientLogSettings);
+      this.logClientSettingTs = this.logClient && !!(4 & msg.clientLogSettings);
+      this.logClientSettingSum = this.logClient && !!(8 & msg.clientLogSettings);
+      this.logClientSettingErr = this.logClient && !!(16 & msg.clientLogSettings);
+      this.logConsoleSettingLog = this.logConsole && !!(1 & msg.clientConsoleLogSettings);
+      this.logConsoleSettingTc = this.logConsole && !!(2 & msg.clientConsoleLogSettings);
+      this.logConsoleSettingTs = this.logConsole && !!(4 & msg.clientConsoleLogSettings);
+      this.logConsoleSettingSum = this.logConsole && !!(8 & msg.clientConsoleLogSettings);
+      this.logConsoleSettingErr = this.logConsole && !!(16 & msg.clientConsoleLogSettings);
+    }
+  }
+  
+  _updateScrollList() {
+    const storeState = this.state[this.props.storeName];
+    this.scrollList.update(storeState.buttons.log.scroll, storeState.buttons.log.zoom, true);
+  }
+  
+  _prepairComponent(func, initOrexit, object, ...params) {
+    func(() => {
+      if(initOrexit) {
+        if(params) {
+          object.init(...params);
+        }
+        else {
+          object.init();
+        }
+      }
+      else {
+        object.exit();
+      }
+    });
+  }
+  
+  prepairComponents(props, initOrexit) {
+    if(props.buttonsLoaded) {
+      let pendings = {p: 0};
+      const func = (cb) => {
+        ++pendings.p;
+        setTimeout((cb, pendings, initOrexit, props) => {
+          cb();
+          if(0 === --pendings.p) {
+            if(initOrexit) {
+              props.onOnit();
+            }
+          }
+        }, 0, cb, pendings, initOrexit, props);
+      };
+      this._prepairComponent(func, initOrexit, DataLogDynamicBuffer, this.pooledBuffers);
+      this._prepairComponent(func, initOrexit, this.templateInners, props.stackStyles, this._updateScrollList.bind(this));
+      this.templates.forEach((template) => {
+        if(template) {
+          this._prepairComponent(func, initOrexit, template, props.filter, this.pooledBuffers, props.stackStyles, this.templateInners, this._updateScrollList.bind(this));
+        }
+      });
+      this._prepairComponent(func, initOrexit, TemplateIcon, props.stackStyles);
+      func(() => {
+        if(initOrexit) {
+          this.scrollList.refresh();
+        }
+      });
+    }
+  }
+  
+  _renderActiveRealtime(data, cb, ...params) {
+    if(this.isActive || data[0] || data[1]) {
+      this.renderRealtimeData(data, cb, ...params);
+    }
+  }
+  
+  calculateInnersSize(inners, type) {
+    const size = {p: LogType.IP === type ? 30 : 10};
+    this._calculateInnersSize(inners, size);
+    return size.p;
+  }
+  
+  _calculateInnersSize(inners, size) {
+    inners.forEach((inner) => {
+      size.p += 15;
+      if(inner.isOpen) {
+        this._calculateInnersSize(inner.inners, size);
+      }
+    });
+  }
+  
+  render() {
+    return (
+      <>
+        <div ref={this.refDivHeading} className="comp_layer_log_heading">
+          <div className="comp_layer_log_heading_column comp_layer_log_heading_column_nbr">
+            #
+          </div>
+          <div className="comp_layer_log_heading_column comp_layer_log_heading_column_type">
+            type
+          </div>
+          <div className="comp_layer_log_heading_column comp_layer_log_heading_column_date">
+            date
+          </div>
+          <div className="comp_layer_log_heading_column comp_layer_log_heading_column_actor">
+            actor
+          </div>
+          <div className="comp_layer_log_heading_column comp_layer_log_heading_column_file_name">
+            file name
+          </div>
+          <div className="comp_layer_log_heading_column comp_layer_log_heading_column_log">
+            log
+          </div>
+        </div>
+        <svg width="0" height="0" xmlns={InnerConst.SVG_NS}>
+          <defs>
+            <radialGradient id="ipLogGradient" cx="50%" cy="50%" r="50%">
+              <stop offset="70%" stopColor="white"/>
+              <stop offset="100%" stopColor="#DDDDFF"/>
+            </radialGradient>
+          </defs>
+        </svg>
+        <div ref={this.refDivLog} className="comp_layer_log_rows">
+        </div>
+      </>
+    );
+  }
+}

package/project/client/templates/template-icons/svgs/template-arrow-head.js

@@ -0,0 +1,35 @@
+
+'use strict';
+
+import Const from '../../../logic/const';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+
+
+class TemplateArrowHead {
+  static template = new Array(2);
+  
+  static {
+    const ARROW_LEFT = Const.ICON_X + 8;
+    const ARROW_RIGHT = Const.ICON_X + 11;
+    const ARROW_TOP = Const.ICON_Y - 1.5;
+    const ARROW_MIDDLE = Const.ICON_Y;
+    const BOTTOM = Const.ICON_Y + 1.5;
+    const ARROW_LEFT_R = Const.ICON_X + 2;
+    const ARROW_RIGHT_R = Const.ICON_X + 5;
+    
+    const arrowSend = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+    arrowSend.setAttribute('points', `${ARROW_LEFT},${BOTTOM} ${ARROW_LEFT},${ARROW_TOP} ${ARROW_RIGHT},${ARROW_MIDDLE}`);
+    TemplateArrowHead.template[Const.SEND] = arrowSend;
+    
+    const arrowReceive = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+    arrowReceive.setAttribute('points', `${ARROW_RIGHT_R},${BOTTOM} ${ARROW_RIGHT_R},${ARROW_TOP} ${ARROW_LEFT_R},${ARROW_MIDDLE}`);
+    TemplateArrowHead.template[Const.RECEIVE] = arrowReceive;
+  }
+  
+  static create(direction) {
+    return TemplateArrowHead.template[direction].cloneNode(true);
+  }
+}
+
+
+module.exports = TemplateArrowHead;

package/project/client/templates/template-icons/svgs/template-arrow-line.js

@@ -0,0 +1,34 @@
+
+'use strict';
+
+import Const from '../../../logic/const';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+
+
+class TemplateArrowLine {
+  static template = new Array(2);
+  
+  static {
+    const templateSend = document.createElementNS(InnerConst.SVG_NS, 'line');
+    templateSend.setAttribute('y1', Const.ICON_Y);
+    templateSend.setAttribute('y2', Const.ICON_Y);
+    templateSend.setAttribute('x1', Const.ICON_X + 2);
+    templateSend.setAttribute('x2', Const.ICON_X + 8);
+    templateSend.setAttribute('stroke-width', 2);
+    TemplateArrowLine.template[Const.SEND] = templateSend;
+    const templateReceive = document.createElementNS(InnerConst.SVG_NS, 'line');
+    templateReceive.setAttribute('y1', Const.ICON_Y);
+    templateReceive.setAttribute('y2', Const.ICON_Y);
+    templateReceive.setAttribute('x1', Const.ICON_X + 5);
+    templateReceive.setAttribute('x2', Const.ICON_X + 11);
+    templateReceive.setAttribute('stroke-width', 2);
+    TemplateArrowLine.template[Const.RECEIVE] = templateReceive;
+  }
+  
+  static create(direction) {
+    return TemplateArrowLine.template[direction].cloneNode(true);
+  }
+}
+
+
+module.exports = TemplateArrowLine;