1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
/*-
* ============LICENSE_START=======================================================
* SDC
* ================================================================================
* Copyright (C) 2017 AT&T Intellectual Property. 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=========================================================
*/
import {GraphColors} from "app/utils";
export class ModulesNodesStyle {
public static getModuleGraphStyle = ():Array<Cy.Stylesheet> => {
return [
{
selector: '.cy-expand-collapse-collapsed-node',
css: {
'background-image': 'data(img)',
'width': 34,
'height': 32,
'background-opacity': 0,
'shape': 'rectangle',
'label': 'data(displayName)',
'events': 'yes',
'text-events': 'yes',
'text-valign': 'bottom',
'text-halign': 'center',
'text-margin-y': 5,
'border-opacity': 0
}
},
{
selector: '.module-node',
css: {
'background-color': 'transparent',
'background-opacity': 0,
"border-width": 2,
"border-color": GraphColors.NODE_SELECTED_BORDER_COLOR,
'border-style': 'dashed',
'label': 'data(displayName)',
'events': 'yes',
'text-events': 'yes',
'text-valign': 'bottom',
'text-halign': 'center',
'text-margin-y': 8
}
},
{
selector: 'node:selected',
css: {
"border-opacity": 0
}
},
{
selector: '.simple-link:selected',
css: {
'line-color': GraphColors.BASE_LINK,
}
},
{
selector: '.vl-link:selected',
css: {
'line-color': GraphColors.VL_LINK,
}
},
{
selector: '.cy-expand-collapse-collapsed-node:selected',
css: {
"border-color": GraphColors.NODE_SELECTED_BORDER_COLOR,
'border-opacity': 1,
'border-style': 'solid',
'border-width': 2
}
},
{
selector: '.module-node:selected',
css: {
"border-color": GraphColors.NODE_SELECTED_BORDER_COLOR,
'border-opacity': 1
}
},
{
selector: '.dummy-node',
css: {
'width': 20,
'height': 20
}
},
]
}
}
|