summaryrefslogtreecommitdiffstats
path: root/src/generic-components/graph/IconFactory.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/generic-components/graph/IconFactory.js')
-rw-r--r--src/generic-components/graph/IconFactory.js251
1 files changed, 251 insertions, 0 deletions
diff --git a/src/generic-components/graph/IconFactory.js b/src/generic-components/graph/IconFactory.js
new file mode 100644
index 0000000..772cb1e
--- /dev/null
+++ b/src/generic-components/graph/IconFactory.js
@@ -0,0 +1,251 @@
+/*
+ * ============LICENSE_START===================================================
+ * SPARKY (AAI UI service)
+ * ============================================================================
+ * Copyright © 2017 AT&T Intellectual Property.
+ * Copyright © 2017 Amdocs
+ * All rights reserved.
+ * ============================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=====================================================
+ *
+ * ECOMP and OpenECOMP are trademarks
+ * and service marks of AT&T Intellectual Property.
+ */
+
+import React from 'react';
+
+import NodeVisualElementConstants from './NodeVisualElementConstants.js';
+
+class IconFactory {
+ static createIcon(iconName, iconProps, key, nodeProps) {
+ switch (iconName) {
+ case NodeVisualElementConstants.ICON_ELLIPSES:
+ let iconEllipsesChildren = [];
+
+ if (iconProps.svgAttributes) {
+ let circleProps = {
+ ...iconProps.svgAttributes,
+ key: key + '_ellipsesCircle'
+ };
+
+ let ellipsesBackgroundClassName = (iconProps.isSelected === true)
+ ? 'background-selected'
+ : 'background-unselected';
+
+ circleProps = {
+ ...circleProps,
+ className: ellipsesBackgroundClassName
+ };
+
+ iconEllipsesChildren.push(
+ React.createElement(NodeVisualElementConstants.SVG_CIRCLE,
+ circleProps));
+ }
+
+ let ellipseOneProps = {
+ className: 'ellipses-ellipse',
+ cx: '-4',
+ cy: '0',
+ rx: '1.5',
+ ry: '1.5',
+ key: key + '_ellipseOne'
+ };
+ iconEllipsesChildren.push(
+ React.createElement(NodeVisualElementConstants.ELLIPSE,
+ ellipseOneProps));
+
+ let ellipseTwoProps = {
+ className: 'ellipses-ellipse',
+ cx: '0',
+ cy: '0',
+ rx: '1.5',
+ ry: '1.5',
+ key: key + '_ellipseTwo'
+ };
+ iconEllipsesChildren.push(
+ React.createElement(NodeVisualElementConstants.ELLIPSE,
+ ellipseTwoProps));
+
+ let ellipseThreeProps = {
+ className: 'ellipses-ellipse',
+ cx: '4',
+ cy: '0',
+ rx: '1.5',
+ ry: '1.5',
+ key: key + '_ellipseThree'
+ };
+ iconEllipsesChildren.push(
+ React.createElement(NodeVisualElementConstants.ELLIPSE,
+ ellipseThreeProps));
+
+ let finalEllipsesProps = {
+ className: iconProps.class,
+ key: key
+ };
+
+ if (iconProps.shapeAttributes) {
+ if (iconProps.shapeAttributes.offset) {
+ finalEllipsesProps = {
+ ...finalEllipsesProps,
+ transform: `translate(
+ ${iconProps.shapeAttributes.offset.x},
+ ${iconProps.shapeAttributes.offset.y})`
+ };
+ }
+ }
+
+ return React.createElement(NodeVisualElementConstants.G,
+ finalEllipsesProps, iconEllipsesChildren);
+
+ case NodeVisualElementConstants.ICON_TRIANGLE_WARNING:
+ let iconTriangleWarningChildren = [];
+
+ if (iconProps.svgAttributes) {
+ let circleProps = {
+ ...iconProps.svgAttributes,
+ key: key + '_triangleWarningCircle'
+ };
+
+ let triangleWarningBackgrounClassName = (iconProps.isSelected ===
+ true) ? 'background-selected' : 'background-unselected';
+
+ circleProps = {
+ ...circleProps,
+ className: triangleWarningBackgrounClassName
+ };
+ iconTriangleWarningChildren.push(
+ React.createElement(NodeVisualElementConstants.SVG_CIRCLE,
+ circleProps));
+ }
+
+ let trianglePathProps = {
+ className: 'triangle-warning',
+ 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',
+ key: key + '_triangleWarningPath'
+ };
+ iconTriangleWarningChildren.push(
+ React.createElement(NodeVisualElementConstants.PATH,
+ trianglePathProps));
+
+ let finalTriangleWarningProps = {
+ className: iconProps.class,
+ key: key
+ };
+
+ if (iconProps.shapeAttributes) {
+ if (iconProps.shapeAttributes.offset) {
+ finalTriangleWarningProps = {
+ ...finalTriangleWarningProps,
+ transform: `translate(
+ ${iconProps.shapeAttributes.offset.x},
+ ${iconProps.shapeAttributes.offset.y})`
+ };
+ }
+ }
+
+ return React.createElement(NodeVisualElementConstants.G,
+ finalTriangleWarningProps, iconTriangleWarningChildren);
+
+ case NodeVisualElementConstants.ICON_TICK:
+ let tickOverlayMainKey = nodeProps.meta.id + '_overlayTick';
+ let iconTickRadius = 5;
+ let tickNodeClassName = nodeProps.meta.nodeMeta.className;
+ if (tickNodeClassName ===
+ NodeVisualElementConstants.SELECTED_SEARCHED_NODE_CLASS_NAME ||
+ tickNodeClassName ===
+ NodeVisualElementConstants.SELECTED_NODE_CLASS_NAME) {
+ iconTickRadius = 8;
+ }
+ let tickIconcircleProps = {
+ className: 'icon_tick_circle',
+ r: iconTickRadius,
+ key: key + '_tickCircle'
+ };
+ let iconTickChildren = [];
+
+ iconTickChildren.push(
+ React.createElement(NodeVisualElementConstants.SVG_CIRCLE,
+ tickIconcircleProps));
+ let tickIconTransformProperty = 'translate(-15, -10)';
+ if (tickNodeClassName ===
+ NodeVisualElementConstants.SELECTED_SEARCHED_NODE_CLASS_NAME ||
+ tickNodeClassName ===
+ NodeVisualElementConstants.SELECTED_NODE_CLASS_NAME) {
+ tickIconTransformProperty = 'translate(-30, -18)';
+
+ }
+ let tickPathProps = {
+ className: 'icon_tick_path',
+ d: 'M-3 0 L -1.5 1.8 L3 -1.5 L -1.5 1.8',
+ key: key + '_tickPath'
+ };
+ iconTickChildren.push(
+ React.createElement(NodeVisualElementConstants.PATH, tickPathProps));
+
+ let finalTickIconProps = {
+ className: 'icon_tick',
+ key: tickOverlayMainKey + '_final',
+ transform: tickIconTransformProperty
+ };
+ return React.createElement(NodeVisualElementConstants.G,
+ finalTickIconProps, iconTickChildren);
+
+ case NodeVisualElementConstants.ICON_WARNING:
+ let warningOverlayMainKey = nodeProps.meta.id + '_overlayTick';
+ let iconWarningRadius = 5;
+ let warningNodeClassName = nodeProps.meta.nodeMeta.className;
+ if (warningNodeClassName ===
+ NodeVisualElementConstants.SELECTED_SEARCHED_NODE_CLASS_NAME ||
+ warningNodeClassName ===
+ NodeVisualElementConstants.SELECTED_NODE_CLASS_NAME) {
+ iconWarningRadius = 8;
+ }
+ let warningIconcircleProps = {
+ className: 'icon_warning_circle',
+ r: iconWarningRadius,
+ key: key + '_warningCircle'
+ };
+ let iconWarningChildren = [];
+
+ iconWarningChildren.push(
+ React.createElement(NodeVisualElementConstants.SVG_CIRCLE,
+ warningIconcircleProps));
+ let warningIconTransformProperty = 'translate(-15, -10)';
+ if (warningNodeClassName ===
+ NodeVisualElementConstants.SELECTED_SEARCHED_NODE_CLASS_NAME ||
+ warningNodeClassName ===
+ NodeVisualElementConstants.SELECTED_NODE_CLASS_NAME) {
+ warningIconTransformProperty = 'translate(-30, -18)';
+ }
+ let warningPathProps = {
+ className: 'icon_warning_path',
+ 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',
+ key: key + '_tickPath'
+ };
+ iconWarningChildren.push(
+ React.createElement(NodeVisualElementConstants.PATH,
+ warningPathProps));
+
+ let finalWarningIconProps = {
+ className: 'icon_warning',
+ key: warningOverlayMainKey + '_final',
+ transform: warningIconTransformProperty
+ };
+ return React.createElement(NodeVisualElementConstants.G,
+ finalWarningIconProps, iconWarningChildren);
+ }
+ }
+}
+
+export default IconFactory;