src/generic-components/graph/IconFactory.js

   1 /*
   2  * ============LICENSE_START===================================================
   3  * SPARKY (AAI UI service)
   4  * ============================================================================
   5  * Copyright © 2017 AT&T Intellectual Property.
   6  * Copyright © 2017 Amdocs
   7  * All rights reserved.
   8  * ============================================================================
   9  * Licensed under the Apache License, Version 2.0 (the "License");
  10  * you may not use this file except in compliance with the License.
  11  * You may obtain a copy of the License at
  12  *
  13  *      http://www.apache.org/licenses/LICENSE-2.0
  14  *
  15  * Unless required by applicable law or agreed to in writing, software
  16  * distributed under the License is distributed on an "AS IS" BASIS,
  17  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18  * See the License for the specific language governing permissions and
  19  * limitations under the License.
  20  * ============LICENSE_END=====================================================
  21  *
  22  * ECOMP and OpenECOMP are trademarks
  23  * and service marks of AT&T Intellectual Property.
  24  */
  25
  26 import React from 'react';
  27
  28 import NodeVisualElementConstants from './NodeVisualElementConstants.js';
  29
  30 class IconFactory {
  31   static createIcon(iconName, iconProps, key, nodeProps) {
  32     switch (iconName) {
  33       case NodeVisualElementConstants.ICON_ELLIPSES:
  34         let iconEllipsesChildren = [];
  35
  36         if (iconProps.svgAttributes) {
  37           let circleProps = {
  38             ...iconProps.svgAttributes,
  39             key: key + '_ellipsesCircle'
  40           };
  41
  42           let ellipsesBackgroundClassName = (iconProps.isSelected === true)
  43             ? 'background-selected'
  44             : 'background-unselected';
  45
  46           circleProps = {
  47             ...circleProps,
  48             className: ellipsesBackgroundClassName
  49           };
  50
  51           iconEllipsesChildren.push(
  52             React.createElement(NodeVisualElementConstants.SVG_CIRCLE,
  53               circleProps));
  54         }
  55
  56         let ellipseOneProps = {
  57           className: 'ellipses-ellipse',
  58           cx: '-4',
  59           cy: '0',
  60           rx: '1.5',
  61           ry: '1.5',
  62           key: key + '_ellipseOne'
  63         };
  64         iconEllipsesChildren.push(
  65           React.createElement(NodeVisualElementConstants.ELLIPSE,
  66             ellipseOneProps));
  67
  68         let ellipseTwoProps = {
  69           className: 'ellipses-ellipse',
  70           cx: '0',
  71           cy: '0',
  72           rx: '1.5',
  73           ry: '1.5',
  74           key: key + '_ellipseTwo'
  75         };
  76         iconEllipsesChildren.push(
  77           React.createElement(NodeVisualElementConstants.ELLIPSE,
  78             ellipseTwoProps));
  79
  80         let ellipseThreeProps = {
  81           className: 'ellipses-ellipse',
  82           cx: '4',
  83           cy: '0',
  84           rx: '1.5',
  85           ry: '1.5',
  86           key: key + '_ellipseThree'
  87         };
  88         iconEllipsesChildren.push(
  89           React.createElement(NodeVisualElementConstants.ELLIPSE,
  90             ellipseThreeProps));
  91
  92         let finalEllipsesProps = {
  93           className: iconProps.class,
  94           key: key
  95         };
  96
  97         if (iconProps.shapeAttributes) {
  98           if (iconProps.shapeAttributes.offset) {
  99             finalEllipsesProps = {
 100               ...finalEllipsesProps,
 101               transform: `translate(
 102                                    ${iconProps.shapeAttributes.offset.x},
 103                                    ${iconProps.shapeAttributes.offset.y})`
 104             };
 105           }
 106         }
 107
 108         return React.createElement(NodeVisualElementConstants.G,
 109           finalEllipsesProps, iconEllipsesChildren);
 110
 111       case NodeVisualElementConstants.ICON_TRIANGLE_WARNING:
 112         let iconTriangleWarningChildren = [];
 113
 114         if (iconProps.svgAttributes) {
 115           let circleProps = {
 116             ...iconProps.svgAttributes,
 117             key: key + '_triangleWarningCircle'
 118           };
 119
 120           let triangleWarningBackgrounClassName = (iconProps.isSelected ===
 121           true) ? 'background-selected' : 'background-unselected';
 122
 123           circleProps = {
 124             ...circleProps,
 125             className: triangleWarningBackgrounClassName
 126           };
 127           iconTriangleWarningChildren.push(
 128             React.createElement(NodeVisualElementConstants.SVG_CIRCLE,
 129               circleProps));
 130         }
 131
 132         let trianglePathProps = {
 133           className: 'triangle-warning',
 134           d: 'M-4.5 4 L 0 -6.5 L 4.5 4 Z M-0.5 3.75 L -0.5 3 L 0.5 3 L 0.5 3.75 Z M-0.35 2.75 L -0.75 -3.5 L 0.75 -3.5 L 0.35 2.75 Z',
 135           key: key + '_triangleWarningPath'
 136         };
 137         iconTriangleWarningChildren.push(
 138           React.createElement(NodeVisualElementConstants.PATH,
 139             trianglePathProps));
 140
 141         let finalTriangleWarningProps = {
 142           className: iconProps.class,
 143           key: key
 144         };
 145
 146         if (iconProps.shapeAttributes) {
 147           if (iconProps.shapeAttributes.offset) {
 148             finalTriangleWarningProps = {
 149               ...finalTriangleWarningProps,
 150               transform: `translate(
 151                                    ${iconProps.shapeAttributes.offset.x},
 152                                    ${iconProps.shapeAttributes.offset.y})`
 153             };
 154           }
 155         }
 156
 157         return React.createElement(NodeVisualElementConstants.G,
 158           finalTriangleWarningProps, iconTriangleWarningChildren);
 159
 160       case NodeVisualElementConstants.ICON_TICK:
 161         let tickOverlayMainKey = nodeProps.meta.id + '_overlayTick';
 162         let iconTickRadius = 5;
 163         let tickNodeClassName = nodeProps.meta.nodeMeta.className;
 164         if (tickNodeClassName ===
 165           NodeVisualElementConstants.SELECTED_SEARCHED_NODE_CLASS_NAME ||
 166           tickNodeClassName ===
 167           NodeVisualElementConstants.SELECTED_NODE_CLASS_NAME) {
 168           iconTickRadius = 8;
 169         }
 170         let tickIconcircleProps = {
 171           className: 'icon_tick_circle',
 172           r: iconTickRadius,
 173           key: key + '_tickCircle'
 174         };
 175         let iconTickChildren = [];
 176
 177         iconTickChildren.push(
 178           React.createElement(NodeVisualElementConstants.SVG_CIRCLE,
 179             tickIconcircleProps));
 180         let tickIconTransformProperty = 'translate(-15, -10)';
 181         if (tickNodeClassName ===
 182           NodeVisualElementConstants.SELECTED_SEARCHED_NODE_CLASS_NAME ||
 183           tickNodeClassName ===
 184           NodeVisualElementConstants.SELECTED_NODE_CLASS_NAME) {
 185           tickIconTransformProperty = 'translate(-30, -18)';
 186
 187         }
 188         let tickPathProps = {
 189           className: 'icon_tick_path',
 190           d: 'M-3 0 L -1.5 1.8 L3 -1.5 L -1.5 1.8',
 191           key: key + '_tickPath'
 192         };
 193         iconTickChildren.push(
 194           React.createElement(NodeVisualElementConstants.PATH, tickPathProps));
 195
 196         let finalTickIconProps = {
 197           className: 'icon_tick',
 198           key: tickOverlayMainKey + '_final',
 199           transform: tickIconTransformProperty
 200         };
 201         return React.createElement(NodeVisualElementConstants.G,
 202           finalTickIconProps, iconTickChildren);
 203
 204       case NodeVisualElementConstants.ICON_WARNING:
 205         let warningOverlayMainKey = nodeProps.meta.id + '_overlayTick';
 206         let iconWarningRadius = 5;
 207         let warningNodeClassName = nodeProps.meta.nodeMeta.className;
 208         if (warningNodeClassName ===
 209           NodeVisualElementConstants.SELECTED_SEARCHED_NODE_CLASS_NAME ||
 210           warningNodeClassName ===
 211           NodeVisualElementConstants.SELECTED_NODE_CLASS_NAME) {
 212           iconWarningRadius = 8;
 213         }
 214         let warningIconcircleProps = {
 215           className: 'icon_warning_circle',
 216           r: iconWarningRadius,
 217           key: key + '_warningCircle'
 218         };
 219         let iconWarningChildren = [];
 220
 221         iconWarningChildren.push(
 222           React.createElement(NodeVisualElementConstants.SVG_CIRCLE,
 223             warningIconcircleProps));
 224         let warningIconTransformProperty = 'translate(-15, -10)';
 225         if (warningNodeClassName ===
 226           NodeVisualElementConstants.SELECTED_SEARCHED_NODE_CLASS_NAME ||
 227           warningNodeClassName ===
 228           NodeVisualElementConstants.SELECTED_NODE_CLASS_NAME) {
 229           warningIconTransformProperty = 'translate(-30, -18)';
 230         }
 231         let warningPathProps = {
 232           className: 'icon_warning_path',
 233           d: 'M-0.35 3.8 L -0.35 3.7 L 0.35 3.7 L 0.35 3.8 Z M-0.1 1.8 L -0.6 -3.5 L 0.6 -3.5 L 0.1 1.8 Z',
 234           key: key + '_tickPath'
 235         };
 236         iconWarningChildren.push(
 237           React.createElement(NodeVisualElementConstants.PATH,
 238             warningPathProps));
 239
 240         let finalWarningIconProps = {
 241           className: 'icon_warning',
 242           key: warningOverlayMainKey + '_final',
 243           transform: warningIconTransformProperty
 244         };
 245         return React.createElement(NodeVisualElementConstants.G,
 246           finalWarningIconProps, iconWarningChildren);
 247     }
 248   }
 249 }
 250
 251 export default IconFactory;