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

package/project/client/templates/template-icons/svgs/template-background.js

@@ -0,0 +1,28 @@
+
+'use strict';
+
+import Const from '../../../logic/const';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+
+
+class TemplateBackground {
+  static template = null;
+  
+  static {
+    const template = document.createElementNS(InnerConst.SVG_NS, 'g');
+    const background = template.appendChild(document.createElementNS(InnerConst.SVG_NS, 'rect'));
+    background.setAttribute('x', 2);
+    background.setAttribute('y', 2);
+    background.setAttribute('height', 16);
+    background.setAttribute('width', Const.ICON_X_WIDTH - 4);
+    background.setAttribute("fill", "url(#ipLogGradient)");
+    TemplateBackground.template = template;
+  }
+  
+  static create() {
+    return TemplateBackground.template.cloneNode(true);
+  }
+}
+
+
+module.exports = TemplateBackground;

package/project/client/templates/template-icons/svgs/template-circle-big.js

@@ -0,0 +1,27 @@
+
+'use strict';
+
+import Const from '../../../logic/const';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+
+
+class TemplateCircleBig {
+  static template = null;
+  
+  static {
+    const template = document.createElementNS(InnerConst.SVG_NS, 'circle');
+    template.setAttribute('cx', Const.ICON_X);
+    template.setAttribute('cy', Const.ICON_Y);
+    template.setAttribute('r', 4);
+    template.setAttribute('stroke', 'black');
+    template.setAttribute('stroke-width', 1);
+    TemplateCircleBig.template = template;
+  }
+  
+  static create() {
+    return TemplateCircleBig.template.cloneNode(true);
+  }
+}
+
+
+module.exports = TemplateCircleBig;

package/project/client/templates/template-icons/svgs/template-circle-small.js

@@ -0,0 +1,27 @@
+
+'use strict';
+
+import Const from '../../../logic/const';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+
+
+class TemplateCircleSmall {
+  static template = null;
+  
+  static {
+    const template = document.createElementNS(InnerConst.SVG_NS, 'circle');
+    template.setAttribute('cx', Const.ICON_X);
+    template.setAttribute('cy', Const.ICON_Y);
+    template.setAttribute('r', 2.5);
+    template.setAttribute('stroke', 'black');
+    template.setAttribute('stroke-width', 1);
+    TemplateCircleSmall.template = template;
+  }
+  
+  static create() {
+    return TemplateCircleSmall.template.cloneNode(true);
+  }
+}
+
+
+module.exports = TemplateCircleSmall;

package/project/client/templates/template-icons/svgs/template-envelope.js

@@ -0,0 +1,46 @@
+
+'use strict';
+
+import Const from '../../../logic/const';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+
+
+class TemplateEnvelope {
+  static template = null;
+  
+  static {
+    const HEIGHT_HALF = 5;
+    const HEIGHT = HEIGHT_HALF + HEIGHT_HALF;
+    const MIDDLE_TOP_POINT = HEIGHT - 2.5;
+    const MIDDLE_BOTTOM_POINT = HEIGHT;
+    const BOTTOM_POINT = HEIGHT + 2.5;
+    const WIDTH_HALF = 5;
+    const WIDTH = WIDTH_HALF + WIDTH_HALF;
+    const MIDDLE_POINT = Const.ICON_X-3;
+    const LEFT_POINT = MIDDLE_POINT - WIDTH_HALF;
+    const RIGHT_POINT = MIDDLE_POINT + WIDTH_HALF;
+    
+    const template = document.createDocumentFragment();
+    const rect = template.appendChild(document.createElementNS('http://www.w3.org/2000/svg', 'rect'));
+    rect.setAttribute('y', MIDDLE_TOP_POINT);
+    rect.setAttribute('height', 5);
+    rect.setAttribute('fill', 'white');
+    rect.setAttribute('x', LEFT_POINT);
+    rect.setAttribute('width', WIDTH);
+    
+    const top = template.appendChild(document.createElementNS('http://www.w3.org/2000/svg', 'polygon'));
+    top.setAttribute('points', `${LEFT_POINT + 2},${MIDDLE_TOP_POINT} ${MIDDLE_POINT},${MIDDLE_BOTTOM_POINT - 1} ${RIGHT_POINT - 2},${MIDDLE_TOP_POINT}`);
+    
+    const bottom = template.appendChild(document.createElementNS(InnerConst.SVG_NS, 'polygon'));
+    bottom.setAttribute('points', `${LEFT_POINT},${MIDDLE_TOP_POINT} ${MIDDLE_POINT},${MIDDLE_BOTTOM_POINT} ${RIGHT_POINT},${MIDDLE_TOP_POINT} ${RIGHT_POINT},${BOTTOM_POINT} ${LEFT_POINT},${BOTTOM_POINT} ${LEFT_POINT},${MIDDLE_TOP_POINT} ${MIDDLE_POINT},${MIDDLE_TOP_POINT} ${RIGHT_POINT},${MIDDLE_TOP_POINT}`);
+      
+    TemplateEnvelope.template = template;
+  }
+  
+  static create() {
+    return TemplateEnvelope.template.cloneNode(true);
+  }
+}
+
+
+module.exports = TemplateEnvelope;

package/project/client/templates/template-icons/svgs/template-hex-big.js

@@ -0,0 +1,38 @@
+
+'use strict';
+
+import Const from '../../../logic/const';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+
+
+class TemplateHexBig {
+  static template = null;
+  
+  static {
+    const template = document.createElementNS(InnerConst.SVG_NS, 'polygon');
+    const arrowWidth = 4;
+    const cx = Const.ICON_X;
+    const cy = Const.ICON_Y;
+    const r = arrowWidth;
+    const sqrt3 = Math.sqrt(3);
+    const hexPoints = [
+      `${cx + r},${cy}`,
+      `${cx + (r >> 1)},${cy + (sqrt3 * r >> 1)}`,
+      `${cx - (r >> 1)},${cy + (sqrt3 * r >> 1)}`,
+      `${cx - r},${cy}`,
+      `${cx - (r >> 1)},${cy - (sqrt3 * r >> 1)}`,
+      `${cx + (r >> 1)},${cy - (sqrt3 * r >> 1)}`
+     ].join(' ');
+    template.setAttribute('points', hexPoints);
+    template.setAttribute('stroke', 'black');
+    template.setAttribute('stroke-width', 1);
+    TemplateHexBig.template = template;
+  }
+  
+  static create() {
+    return TemplateHexBig.template.cloneNode(true);
+  }
+}
+
+
+module.exports = TemplateHexBig;

package/project/client/templates/template-icons/svgs/template-hex-small.js

@@ -0,0 +1,38 @@
+
+'use strict';
+
+import Const from '../../../logic/const';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+
+
+class TemplateHexSmall {
+  static template = null;
+  
+  static {
+    const template = document.createElementNS(InnerConst.SVG_NS, 'polygon');
+    const arrowWidth = 3;
+    const cx = Const.ICON_X;
+    const cy = Const.ICON_Y;
+    const r = arrowWidth;
+    const sqrt3 = Math.sqrt(3);
+    const hexPoints = [
+      `${cx + r},${cy}`,
+      `${cx + (r >> 1)},${cy + (sqrt3 * r >> 1)}`,
+      `${cx - (r >> 1)},${cy + (sqrt3 * r >> 1)}`,
+      `${cx - r},${cy}`,
+      `${cx - (r >> 1)},${cy - (sqrt3 * r >> 1)}`,
+      `${cx + (r >> 1)},${cy - (sqrt3 * r >> 1)}`
+     ].join(' ');
+    template.setAttribute('points', hexPoints);
+    template.setAttribute('stroke', 'black');
+    template.setAttribute('stroke-width', 1);
+    TemplateHexSmall.template = template;
+  }
+  
+  static create() {
+    return TemplateHexSmall.template.cloneNode(true);
+  }
+}
+
+
+module.exports = TemplateHexSmall;

package/project/client/templates/template-icons/svgs/template-square-big.js

@@ -0,0 +1,28 @@
+
+'use strict';
+
+import Const from '../../../logic/const';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+
+
+class TemplateSquareBig {
+  static template = null;
+  
+  static {
+    const template = document.createElementNS(InnerConst.SVG_NS, 'rect');
+    template.setAttribute('y', Const.ICON_Y - 3);
+    template.setAttribute('height', 6);
+    template.setAttribute('x', Const.ICON_X - 3);
+    template.setAttribute('width', 6);
+    template.setAttribute('stroke', 'black');
+    template.setAttribute('stroke-width', 1);
+    TemplateSquareBig.template = template;
+  }
+  
+  static create() {
+    return TemplateSquareBig.template.cloneNode(true);
+  }
+}
+
+
+module.exports = TemplateSquareBig;

package/project/client/templates/template-icons/svgs/template-square-small.js

@@ -0,0 +1,28 @@
+
+'use strict';
+
+import Const from '../../../logic/const';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+
+
+class TemplateSquareSmall {
+  static template = null;
+  
+  static {
+    const template = document.createElementNS(InnerConst.SVG_NS, 'rect');
+    template.setAttribute('y', Const.ICON_Y - 2);
+    template.setAttribute('height', 4);
+    template.setAttribute('x', Const.ICON_X - 2);
+    template.setAttribute('width', 4);
+    template.setAttribute('stroke', 'black');
+    template.setAttribute('stroke-width', 1);
+    TemplateSquareSmall.template = template;
+  }
+  
+  static create() {
+    return TemplateSquareSmall.template.cloneNode(true);
+  }
+}
+
+
+module.exports = TemplateSquareSmall;

package/project/client/templates/template-icons/svgs/template-triangle-big.js

@@ -0,0 +1,31 @@
+
+'use strict';
+
+import Const from '../../../logic/const';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+
+
+class TemplateTriangleBig {
+  static template = null;
+  
+  static {
+    const template = document.createElementNS(InnerConst.SVG_NS, 'polygon');
+    const arrowWidth = 4;
+    const startArrowX1 = Const.ICON_X - arrowWidth;
+    const startArrowX2 = Const.ICON_X + arrowWidth;
+    const startArrowY1 = Const.ICON_Y - arrowWidth;
+    const startArrowY2 = Const.ICON_Y;
+    const startArrowY3 = Const.ICON_Y + arrowWidth;
+    template.setAttribute('points', `${startArrowX1},${startArrowY1} ${startArrowX1},${startArrowY3} ${startArrowX2},${startArrowY2}`);
+    template.setAttribute('stroke', 'black');
+    template.setAttribute('stroke-width', 1);
+    TemplateTriangleBig.template = template;
+  }
+  
+  static create() {
+    return TemplateTriangleBig.template.cloneNode(true);
+  }
+}
+
+
+module.exports = TemplateTriangleBig;

package/project/client/templates/template-icons/svgs/template-triangle-small.js

@@ -0,0 +1,31 @@
+
+'use strict';
+
+import Const from '../../../logic/const';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+
+
+class TemplateTriangleSmall {
+  static template = null;
+  
+  static {
+    const template = document.createElementNS(InnerConst.SVG_NS, 'polygon');
+    const arrowWidth = 3;
+    const startArrowX1 = Const.ICON_X - arrowWidth;
+    const startArrowX2 = Const.ICON_X + arrowWidth;
+    const startArrowY1 = Const.ICON_Y - arrowWidth;
+    const startArrowY2 = Const.ICON_Y;
+    const startArrowY3 = Const.ICON_Y + arrowWidth;
+    template.setAttribute('points', `${startArrowX1},${startArrowY1} ${startArrowX1},${startArrowY3} ${startArrowX2},${startArrowY2}`);
+    template.setAttribute('stroke', 'black');
+    template.setAttribute('stroke-width', 1);
+    TemplateTriangleSmall.template = template;
+  }
+  
+  static create() {
+    return TemplateTriangleSmall.template.cloneNode(true);
+  }
+}
+
+
+module.exports = TemplateTriangleSmall;

package/project/client/templates/template-icons/svgs/template-x-big.js

@@ -0,0 +1,39 @@
+
+'use strict';
+
+import Const from '../../../logic/const';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+
+
+class TemplateXBig {
+  static template = null;
+  
+  static {
+    const template = document.createDocumentFragment();
+    
+    const length = 4.5;
+    const closingLine1 = template.appendChild(document.createElementNS(InnerConst.SVG_NS, 'line'));
+    closingLine1.setAttribute('y1', Const.ICON_Y - length);
+    closingLine1.setAttribute('y2', Const.ICON_Y + length);
+    closingLine1.setAttribute('x1', Const.ICON_X - length);
+    closingLine1.setAttribute('x2', Const.ICON_X + length);
+    closingLine1.setAttribute('stroke', 'black');
+    closingLine1.setAttribute('stroke-width', 2);
+      
+    const closingLine2 = template.appendChild(document.createElementNS(InnerConst.SVG_NS, 'line'));
+    closingLine2.setAttribute('y1', Const.ICON_Y + length);
+    closingLine2.setAttribute('y2', Const.ICON_Y - length);
+    closingLine2.setAttribute('x1', Const.ICON_X - length);
+    closingLine2.setAttribute('x2', Const.ICON_X + length);
+    closingLine2.setAttribute('stroke', 'black');
+    closingLine2.setAttribute('stroke-width', 2);
+    TemplateXBig.template = template;
+  }
+  
+  static create() {
+    return TemplateXBig.template.cloneNode(true);
+  }
+}
+
+
+module.exports = TemplateXBig;

package/project/client/templates/template-icons/svgs/template-x-small.js

@@ -0,0 +1,39 @@
+
+'use strict';
+
+import Const from '../../../logic/const';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+
+
+class TemplateXSmall {
+  static template = null;
+  
+  static {
+    const template = document.createDocumentFragment();
+    
+    const length = 3;
+    const closingLine1 = template.appendChild(document.createElementNS(InnerConst.SVG_NS, 'line'));
+    closingLine1.setAttribute('y1', Const.ICON_Y - length);
+    closingLine1.setAttribute('y2', Const.ICON_Y + length);
+    closingLine1.setAttribute('x1', Const.ICON_X - length);
+    closingLine1.setAttribute('x2', Const.ICON_X + length);
+    closingLine1.setAttribute('stroke', 'black');
+    closingLine1.setAttribute('stroke-width', 2);
+      
+    const closingLine2 = template.appendChild(document.createElementNS(InnerConst.SVG_NS, 'line'));
+    closingLine2.setAttribute('y1', Const.ICON_Y + length);
+    closingLine2.setAttribute('y2', Const.ICON_Y - length);
+    closingLine2.setAttribute('x1', Const.ICON_X - length);
+    closingLine2.setAttribute('x2', Const.ICON_X + length);
+    closingLine2.setAttribute('stroke', 'black');
+    closingLine2.setAttribute('stroke-width', 2);
+    TemplateXSmall.template = template;
+  }
+  
+  static create() {
+    return TemplateXSmall.template.cloneNode(true);
+  }
+}
+
+
+module.exports = TemplateXSmall;

package/project/client/templates/template-icons/template-icon-accepted.js

@@ -0,0 +1,32 @@
+
+'use strict';
+
+import TemplateBackground from './svgs/template-background';
+import TemplateHexBig from './svgs/template-hex-big';
+
+
+class TemplateIconAccepted {
+  static template = [];
+    
+  static exit() {
+    TemplateIconAccepted.template = [];
+  }
+  
+  static init(stackStyles) {
+    stackStyles.forEach((stackStyle, key) => {
+      const template = TemplateBackground.create();
+      const acceptedTemplate = template.appendChild(TemplateHexBig.create());
+      acceptedTemplate.setAttribute('fill', stackStyle.protocolColor);
+      TemplateIconAccepted.template[stackStyle.index] = template;
+    });
+    return TemplateIconAccepted.create;
+  }
+  
+  static create(protocolIndex, type) {
+    const template = TemplateIconAccepted.template[protocolIndex].cloneNode(true);
+    return template;
+  }
+}
+
+
+module.exports = TemplateIconAccepted;

package/project/client/templates/template-icons/template-icon-accepting.js

@@ -0,0 +1,32 @@
+
+'use strict';
+
+import TemplateBackground from './svgs/template-background';
+import TemplateHexSmall from './svgs/template-hex-small';
+
+
+class TemplateIconAccepting {
+  static template = [];
+    
+  static exit() {
+    TemplateIconStarting.template = [];
+  }
+  
+  static init(stackStyles) {
+    stackStyles.forEach((stackStyle, key) => {
+      const template = TemplateBackground.create();
+      const acceptingTemplate = template.appendChild(TemplateHexSmall.create());
+      acceptingTemplate.setAttribute('fill', stackStyle.protocolColor);
+      TemplateIconAccepting.template[stackStyle.index] = template;
+    });
+    return TemplateIconAccepting.create;
+  }
+  
+  static create(protocolIndex, type) {
+    const template = TemplateIconAccepting.template[protocolIndex].cloneNode(true);
+    return template;
+  }
+}
+
+
+module.exports = TemplateIconAccepting;

package/project/client/templates/template-icons/template-icon-attached.js

@@ -0,0 +1,68 @@
+
+'use strict';
+
+import Const from '../../logic/const';
+import TemplateBackground from './svgs/template-background';
+import TemplateTriangleBig from './svgs/template-triangle-big';
+import InnerConst from 'z-abs-complayer-visualizationinner-client/client/logic/inner-const';
+
+class TemplateIconAttached {
+  static template = [];
+    
+  static exit() {
+    TemplateIconAttached.template = [];
+  }
+  
+  static init(stackStyles) {
+    stackStyles.forEach((stackStyle, key) => {
+      const template = TemplateBackground.create();
+      const startedTemplate = template.appendChild(TemplateTriangleBig.create());
+      startedTemplate.setAttribute('fill', stackStyle.protocolColor);
+      const hex = template.appendChild(document.createElementNS(InnerConst.SVG_NS, 'polygon'));
+      const arrowWidth = 4;
+      const cx = Const.ICON_X - 8;
+      const cy = Const.ICON_Y;
+      const r = arrowWidth;
+      const sqrt3 = Math.sqrt(3);
+      const hexPoints = [
+        `${cx + r},${cy}`,
+        `${cx + (r >> 1)},${cy + (sqrt3 * r >> 1)}`,
+        `${cx - (r >> 1)},${cy + (sqrt3 * r >> 1)}`,
+        `${cx - r},${cy}`,
+        `${cx - (r >> 1)},${cy - (sqrt3 * r >> 1)}`,
+        `${cx + (r >> 1)},${cy - (sqrt3 * r >> 1)}`
+       ].join(' ');
+      hex.setAttribute('points', hexPoints);
+      hex.setAttribute('stroke', 'black');
+      hex.setAttribute('stroke-width', 1);
+      hex.setAttribute('fill', stackStyle.protocolColor);
+      
+      const lineHorizontal = template.appendChild(document.createElementNS(InnerConst.SVG_NS, 'line'));
+      lineHorizontal.setAttribute('y1', Const.ICON_Y);
+      lineHorizontal.setAttribute('y2', Const.ICON_Y);
+      lineHorizontal.setAttribute('x1', Const.ICON_X - 6.5);
+      lineHorizontal.setAttribute('x2', Const.ICON_X - 9.5);
+      lineHorizontal.setAttribute('stroke', 'black');
+      lineHorizontal.setAttribute('stroke-width', 0.5);
+      
+      const lineVertical = template.appendChild(document.createElementNS(InnerConst.SVG_NS, 'line'));
+      lineVertical.setAttribute('y1', Const.ICON_Y - 1.5);
+      lineVertical.setAttribute('y2', Const.ICON_Y + 1.5);
+      lineVertical.setAttribute('x1', Const.ICON_X - 8);
+      lineVertical.setAttribute('x2', Const.ICON_X - 8);
+      lineVertical.setAttribute('stroke', 'black');
+      lineVertical.setAttribute('stroke-width', 0.5);
+      
+      TemplateIconAttached.template[stackStyle.index] = template;
+    });
+    return TemplateIconAttached.create;
+  }
+  
+  static create(protocolIndex, type) {
+    const template = TemplateIconAttached.template[protocolIndex].cloneNode(true);
+    return template;
+  }
+}
+
+
+module.exports = TemplateIconAttached;

package/project/client/templates/template-icons/template-icon-closed.js

@@ -0,0 +1,44 @@
+
+'use strict';
+
+import Const from '../../logic/const';
+import TemplateBackground from './svgs/template-background';
+import TemplateCircleBig from './svgs/template-circle-big';
+import TemplateHexBig from './svgs/template-hex-big';
+import TemplatexBig from './svgs/template-x-big';
+
+
+class TemplateIconClosed {
+  static template = [[], []];
+  
+  static exit() {
+    TemplateIconClosed.template = [[], []];
+  }
+  
+  static init(stackStyles) {
+    stackStyles.forEach((stackStyle, key) => {
+      const template = TemplateBackground.create();
+      template.appendChild(TemplatexBig.create());
+      
+      const closedClientTemplate = template.cloneNode(true);
+      const connectedTemplate = closedClientTemplate.appendChild(TemplateCircleBig.create());
+      connectedTemplate.setAttribute('fill', stackStyle.protocolColor);
+      
+      const closedServerTemplate = template.cloneNode(true);
+      const acceptedTemplate = closedServerTemplate.appendChild(TemplateHexBig.create());
+      acceptedTemplate.setAttribute('fill', stackStyle.protocolColor);
+      
+      TemplateIconClosed.template[Const.LOCAL_TYPE_IS_CLIENT][stackStyle.index] = closedClientTemplate;
+      TemplateIconClosed.template[Const.LOCAL_TYPE_IS_SERVER][stackStyle.index] = closedServerTemplate;
+    });
+    return TemplateIconClosed.create;
+  }
+  
+  static create(protocolIndex, type) {
+    const template = TemplateIconClosed.template[type][protocolIndex].cloneNode(true);
+    return template;
+  }
+}
+
+
+module.exports = TemplateIconClosed;

package/project/client/templates/template-icons/template-icon-closing.js

@@ -0,0 +1,44 @@
+
+'use strict';
+
+import Const from '../../logic/const';
+import TemplateBackground from './svgs/template-background';
+import TemplateCircleSmall from './svgs/template-circle-small';
+import TemplateHexSmall from './svgs/template-hex-small';
+import TemplateXSmall from './svgs/template-x-small';
+
+
+class TemplateIconClosing {
+  static template = [[], []];
+  
+  static exit() {
+    TemplateIconClosing.template = [[], []];
+  }
+  
+  static init(stackStyles) {
+    stackStyles.forEach((stackStyle, key) => {
+      const template = TemplateBackground.create();
+      template.appendChild(TemplateXSmall.create());
+      
+      const closingClientTemplate = template.cloneNode(true);
+      const connectingTemplate = closingClientTemplate.appendChild(TemplateCircleSmall.create());
+      connectingTemplate.setAttribute('fill', stackStyle.protocolColor);
+      
+      const closingServerTemplate = template.cloneNode(true);
+      const acceptingTemplate = closingServerTemplate.appendChild(TemplateHexSmall.create());
+      acceptingTemplate.setAttribute('fill', stackStyle.protocolColor);
+      
+      TemplateIconClosing.template[Const.LOCAL_TYPE_IS_CLIENT][stackStyle.index] = closingClientTemplate;
+      TemplateIconClosing.template[Const.LOCAL_TYPE_IS_SERVER][stackStyle.index] = closingServerTemplate;
+    });
+    return TemplateIconClosing.create;
+  }
+  
+  static create(protocolIndex, type) {
+    const template = TemplateIconClosing.template[type][protocolIndex].cloneNode(true);
+    return template;
+  }
+}
+  
+
+module.exports = TemplateIconClosing;

package/project/client/templates/template-icons/template-icon-connected.js

@@ -0,0 +1,32 @@
+
+'use strict';
+
+import TemplateBackground from './svgs/template-background';
+import TemplateCircleBig from './svgs/template-circle-big';
+
+
+class TemplateIconConnected {
+  static template = [];
+  
+  static exit() {
+    TemplateIconConnected.template = [];
+  }
+  
+  static init(stackStyles) {
+    stackStyles.forEach((stackStyle, key) => {
+      const template = TemplateBackground.create();
+      const connectedTemplate = template.appendChild(TemplateCircleBig.create());
+      connectedTemplate.setAttribute('fill', stackStyle.protocolColor);
+      TemplateIconConnected.template[stackStyle.index] = template;
+    });
+    return TemplateIconConnected.create;
+  }
+  
+  static create(protocolIndex, type) {
+    const template = TemplateIconConnected.template[protocolIndex].cloneNode(true);
+    return template;
+  }
+}
+
+
+module.exports = TemplateIconConnected;