forked from brunomnsilva/JavaFXSmartGraph
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsmartgraph.css
More file actions
105 lines (90 loc) · 3.01 KB
/
Copy pathsmartgraph.css
File metadata and controls
105 lines (90 loc) · 3.01 KB
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
104
105
/*
STYLESHEET FOR SMARTGRAPH VISUALIZATION.
For your customization, please see:
https://openjfx.io/javadoc/19/javafx.graphics/javafx/scene/doc-files/cssref.html
And know that:
- The drawing area is a Pane, which is an extension of Region;
- A vertex is of type Shape;
- The edges are of type CubicLine (Shape);
- The labels are of type Pane (background) + Text (accept both sets of properties);
- The arrows are of type Path.
This should help you understand which styles you can apply to each type of elements.
*/
.graph {
-fx-background-color: #F4FFFB;
/* you can use -fx-background-image to set a background image */
}
.vertex {
-fx-stroke-width: 3;
-fx-stroke: #61B5F1;
-fx-stroke-type: inside; /* you should keep this if using arrows; it will keep the shape radius consistent. */
-fx-fill: #B1DFF7;
-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.25), 8, 0.2, 0, 4);
}
.vertex:hover { /* pseudo-classes also work */
/*-fx-cursor: default; */ /* You can use this style to override the hand/move cursors while hovering. */
-fx-stroke-width: 4;
}
.vertex-label {
-fx-font: bold 8pt "sans-serif";
-fx-padding: 5px;
-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.25), 8, 0.2, 0, 4);
}
.vertex-label:hover {
-fx-background-color: white;
-fx-background-radius: 5;
-fx-border-radius: 5;
-fx-border-color: black;
}
.edge {
-fx-stroke-width: 2;
-fx-stroke: #FF6D66;
-fx-stroke-dash-array: 2 5 2 5; /* remove for clean lines */
-fx-fill: transparent; /* important to keep for curved edges */
-fx-stroke-line-cap: round;
-fx-opacity: 0.8;
}
.edge:hover {
-fx-stroke-width: 3;
}
.edge-label {
-fx-font: normal 5pt "sans-serif";
-fx-fill: white;
-fx-background-color: red;
-fx-background-radius: 0;
-fx-border-color: black;
-fx-padding: 2px;
}
.edge-label:hover {
-fx-font: bold 5pt "sans-serif";
-fx-background-radius: 5;
-fx-border-radius: 5;
}
/* Since version 2.0.0-rc2 this style is cumulatively applied to arrows, after the "edge" class.
* Use to, e.g., to remove the dash effect (that will not look good in arrows).
* Afterwards, styles applied to the edges are propagated to the respective arrows. You can, however, apply
* specific styles to the arrows programmatically. See example programs.
*/
.arrow {
-fx-stroke-dash-array: none;
}
/* Custom vertex class. If you use node.setStyleClass("myVertex"), any previous styling
* will be overwritten. If you use node.addStyleClass("myVertex"), the styles are applied
* cumulatively; in the later case, any properties not wanted from the default "vertex" class
* must be overwritten.
*/
.myVertex {
-fx-stroke-width: 4;
-fx-stroke: green;
-fx-stroke-type: inside; /* you should keep this if using arrows */
-fx-fill: yellowgreen;
-fx-opacity: 0.5;
}
/* Custom edge class. The same above logic applies to edges.
*/
.myEdge {
-fx-stroke-width: 2;
-fx-stroke: red;
-fx-opacity: 1;
-fx-fill: transparent; /* important to keep for curved edges */
}