src/generic-components/graph/IconFactory.js

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