src/generic-components/graph/IconFactory.js

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