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