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