2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
6 * ================================================================================
7 * Licensed under the Apache License, Version 2.0 (the "License");
8 * you may not use this file except in compliance with the License.
9 * You may obtain a copy of the License at
11 * http://www.apache.org/licenses/LICENSE-2.0
13 * Unless required by applicable law or agreed to in writing, software
14 * distributed under the License is distributed on an "AS IS" BASIS,
15 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 * See the License for the specific language governing permissions and
17 * limitations under the License.
18 * ============LICENSE_END=========================================================
21 import {GraphColors} from "app/utils/constants";
22 import constant = require("lodash/constant");
23 import {ImagesUrl} from "app/utils/constants";
24 import {AngularJSBridge} from "app/services/angular-js-bridge-service";
26 * Created by obarda on 12/18/2016.
28 export class ComponentInstanceNodesStyle {
30 public static getCompositionGraphStyle = ():Array<Cy.Stylesheet> => {
37 'selection-box-color': 'rgb(0, 159, 219)',
38 'selection-box-opacity': 0.2,
39 'selection-box-border-color': '#009fdb',
40 'selection-box-border-width': 1
47 'font-family': 'OpenSans-Regular,sans-serif',
52 'text-border-width': 15,
53 'text-border-color': GraphColors.NODE_UCPE,
60 'background-color': 'transparent',
62 'label': 'data(displayName)',
63 'background-image': 'data(img)',
66 'background-opacity': 0,
67 "background-width": 65,
68 "background-height": 65,
69 'text-valign': 'bottom',
70 'text-halign': 'center',
71 'background-fit': 'cover',
72 'background-clip': 'node',
73 'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
79 selector: '.service-node',
81 'background-color': 'transparent',
82 'label': 'data(displayName)',
85 'background-image': 'data(img)',
89 'text-valign': 'bottom',
90 'text-halign': 'center',
91 'background-opacity': 0,
92 'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
99 'background-color': 'rgb(255,255,255)',
100 'shape': 'rectangle',
101 'label': 'data(displayName)',
102 'background-image': 'data(img)',
103 'background-width': 21,
104 'background-height': 21,
107 'text-valign': 'bottom',
108 'text-halign': 'center',
109 'background-opacity': 0,
110 'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
115 selector: '.vl-node',
117 'background-color': 'rgb(255,255,255)',
118 'shape': 'rectangle',
119 'label': 'data(displayName)',
120 'background-image': 'data(img)',
121 'background-width': 21,
122 'background-height': 21,
125 'text-valign': 'bottom',
126 'text-halign': 'center',
127 'background-opacity': 0,
128 'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
133 selector: '.ucpe-cp',
135 'background-color': GraphColors.NODE_UCPE_CP,
136 'background-width': 15,
137 'background-height': 15,
140 'text-halign': 'center',
141 'overlay-opacity': 0,
142 'label': 'data(displayName)',
143 'text-valign': 'data(textPosition)',
144 'text-margin-y': (ele:Cy.Collection) => {
145 return (ele.data('textPosition') == 'top') ? -5 : 5;
151 selector: '.ucpe-node',
153 'background-fit': 'cover',
159 selector: '.simple-link',
162 'line-color': GraphColors.BASE_LINK,
163 'target-arrow-color': '#3b7b9b',
164 'target-arrow-shape': 'triangle',
165 'curve-style': 'bezier',
166 'control-point-step-size': 30
170 selector: '.vl-link',
173 'line-color': GraphColors.VL_LINK,
174 'curve-style': 'bezier',
175 'control-point-step-size': 30
179 selector: '.ucpe-host-link',
185 selector: '.not-certified-link',
188 'line-color': GraphColors.NOT_CERTIFIED_LINK,
189 'curve-style': 'bezier',
190 'control-point-step-size': 30,
191 'line-style': 'dashed',
192 'target-arrow-color': '#3b7b9b',
193 'target-arrow-shape': 'triangle'
199 selector: '.not-certified',
201 'shape': 'rectangle',
202 'background-image': (ele:Cy.Collection) => {
203 return ele.data().initImage(ele)
209 selector: 'node:selected',
212 "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR,
217 selector: 'edge:selected',
219 'line-color': GraphColors.ACTIVE_LINK
224 selector: 'edge:active',
232 public static getBasicNodeHanlde = () => {
241 nodeTypeNames: ["basic-node"],
242 imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_PLUS_ICON,
249 public static getBasicSmallNodeHandle = () => {
258 nodeTypeNames: ["basic-small-node"],
259 imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_PLUS_ICON,
265 public static getUcpeCpNodeHandle = () => {
274 nodeTypeNames: ["ucpe-cp-node"],
275 imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_PLUS_ICON,