src/generic-components/graph/NodeVisualElementFactory.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 IconFactory from './IconFactory.js';
  26 import NodeVisualElementConstants from './NodeVisualElementConstants.js';
  27
  28 class NodeVisualElementFactory {
  29
  30   constructor() {
  31     this.visualElementMeta = {};
  32
  33     this.setVisualElementMeta = this.setVisualElementMeta.bind(this);
  34     this.buildVisualElement = this.buildVisualElement.bind(this);
  35     this.createSvgCircle = this.createSvgCircle.bind(this);
  36     this.createSvgLine = this.createSvgLine.bind(this);
  37     this.createTextElement = this.createTextElement.bind(this);
  38     this.createImageElement = this.createImageElement.bind(this);
  39     this.createObjectElement = this.createObjectElement.bind(this);
  40     this.createButtonElement = this.createButtonElement.bind(this);
  41     this.applySvgAttributes = this.applySvgAttributes.bind(this);
  42     this.applyTransform = this.applyTransform.bind(this);
  43   }
  44
  45   setVisualElementMeta(metaObject) {
  46     this.visualElementMeta = metaObject;
  47   }
  48
  49   buildVisualElement(nodeProps, elementType, elementProps, index) {
  50     let elementKey = nodeProps.id + index.toString();
  51     switch (elementType) {
  52       case NodeVisualElementConstants.SVG_CIRCLE:
  53         return this.createSvgCircle(elementProps, elementKey);
  54
  55       case NodeVisualElementConstants.SVG_LINE:
  56         return this.createSvgLine(elementProps, elementKey);
  57
  58       case NodeVisualElementConstants.TEXT:
  59         return this.createTextElement(nodeProps, elementProps, elementKey);
  60
  61       case NodeVisualElementConstants.IMAGE:
  62         return this.createImageElement(elementProps, elementKey);
  63
  64       case NodeVisualElementConstants.OBJECT:
  65         return this.createObjectElement(elementProps, elementKey);
  66
  67       case NodeVisualElementConstants.BUTTON:
  68         return this.createButtonElement(elementProps, elementKey);
  69
  70       case NodeVisualElementConstants.ICON:
  71         return this.createButtonElement(elementProps, elementKey, nodeProps);
  72
  73     }
  74   }
  75
  76   createSvgCircle(circleProps, elementKey) {
  77     let finalProps = {};
  78     finalProps[NodeVisualElementConstants.CSS_CLASS] = circleProps.class;
  79
  80     finalProps = this.applyTransform(finalProps, circleProps.shapeAttributes);
  81     finalProps = this.applySvgAttributes(finalProps, circleProps.svgAttributes);
  82
  83     finalProps = {
  84       ...finalProps,
  85       key: elementKey
  86     };
  87
  88     return React.createElement(NodeVisualElementConstants.SVG_CIRCLE,
  89       finalProps);
  90   }
  91
  92   createSvgLine(lineProps, elementKey) {
  93
  94     /* Keep this commented code. Will be used again when
  95       proper link construction is added
  96      let finalProps = {};
  97      finalProps[NodeVisualElementConstants.CSS_CLASS] = lineProps.class;
  98      finalProps = this.applySvgAttributes(finalProps, lineProps.svgAttributes);
  99      finalProps = this.applyTransform(finalProps, lineProps.shapeAttributes);
 100      */
 101
 102     let finalProps = {
 103       ...lineProps,
 104       key: elementKey
 105     };
 106
 107     return React.createElement(NodeVisualElementConstants.SVG_LINE, finalProps);
 108   }
 109
 110   createTextElement(nodeProps, textProps, elementKey) {
 111     let finalProps = {};
 112     finalProps[NodeVisualElementConstants.CSS_CLASS] = textProps.class;
 113
 114     finalProps = this.applySvgAttributes(finalProps, textProps.svgAttributes);
 115     finalProps = this.applyTransform(finalProps, textProps.shapeAttributes);
 116
 117     finalProps = {
 118       ...finalProps,
 119       key: elementKey
 120     };
 121
 122     return React.createElement(NodeVisualElementConstants.TEXT, finalProps,
 123       nodeProps[textProps.displayKey]);
 124   }
 125
 126   createImageElement(imageProps, elementKey) {
 127     let finalProps = {};
 128     finalProps[NodeVisualElementConstants.CSS_CLASS] = imageProps.class;
 129
 130     finalProps = this.applyTransform(finalProps, imageProps.shapeAttributes);
 131     finalProps = this.applySvgAttributes(finalProps, imageProps.svgAttributes);
 132
 133     finalProps = {
 134       ...finalProps,
 135       key: elementKey
 136     };
 137
 138     return React.createElement(NodeVisualElementConstants.IMAGE, finalProps);
 139   }
 140
 141   createObjectElement(objectProps, elementKey) {
 142     let finalProps = {};
 143     finalProps[NodeVisualElementConstants.CSS_CLASS] = objectProps.class;
 144
 145     finalProps = this.applyTransform(finalProps, objectProps.shapeAttributes);
 146     finalProps = this.applySvgAttributes(finalProps, objectProps.svgAttributes);
 147
 148     finalProps = {
 149       ...finalProps,
 150       key: elementKey
 151     };
 152
 153     return React.createElement(NodeVisualElementConstants.OBJECT, finalProps);
 154   }
 155
 156   createButtonElement(buttonProps, elementKey, nodeMeta) {
 157     return IconFactory.createIcon(buttonProps.name, buttonProps, elementKey,
 158       nodeMeta);
 159   }
 160
 161   applySvgAttributes(elementProps, svgAttributes) {
 162     if (svgAttributes) {
 163       return {
 164         ...elementProps,
 165         ...svgAttributes
 166       };
 167     }
 168     return elementProps;
 169   }
 170
 171   applyTransform(elementProps, shapeAttributes) {
 172     if (shapeAttributes) {
 173       if (shapeAttributes.offset) {
 174         return {
 175           ...elementProps,
 176           transform: `translate(
 177                                 ${shapeAttributes.offset.x},
 178                                 ${shapeAttributes.offset.y})`
 179         };
 180       }
 181     }
 182     return elementProps;
 183   }
 184 }
 185
 186 export default NodeVisualElementFactory;