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
106
107
108
109
110
111
|
/*
* SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
*
* SPDX-License-Identifier: EPL-2.0
*/
import cancelSVG from '@material-icons/svg/svg/cancel/baseline.svg?raw';
import labelSVG from '@material-icons/svg/svg/label/baseline.svg?raw';
import labelOutlinedSVG from '@material-icons/svg/svg/label/outline.svg?raw';
import { alpha, styled, type CSSObject } from '@mui/material/styles';
import svgURL from '../utils/svgURL';
function createEdgeColor(
suffix: string,
stroke: string,
fill?: string,
): CSSObject {
return {
[`.edge-${suffix}`]: {
'& text': {
fill: stroke,
},
'& [stroke="black"]': {
stroke,
},
'& [fill="black"]': {
fill: fill ?? stroke,
},
},
};
}
export default styled('div', {
name: 'GraphTheme',
})(({ theme }) => ({
'& svg': {
userSelect: 'none',
'.node': {
'& text': {
fontFamily: theme.typography.fontFamily,
fill: theme.palette.text.primary,
},
'& [stroke="black"]': {
stroke: theme.palette.text.primary,
},
'& [fill="green"]': {
fill:
theme.palette.mode === 'dark'
? theme.palette.primary.dark
: theme.palette.primary.light,
},
'& [fill="white"]': {
fill: theme.palette.background.default,
},
},
'.node-INDIVIDUAL': {
'& [stroke="black"]': {
strokeWidth: 2,
},
},
'.node-shadow[fill="white"]': {
fill: alpha(
theme.palette.text.primary,
theme.palette.mode === 'dark' ? 0.32 : 0.24,
),
},
'.node-exists-UNKNOWN [stroke="black"]': {
strokeDasharray: '5 2',
},
'.edge': {
'& text': {
fontFamily: theme.typography.fontFamily,
fill: theme.palette.text.primary,
},
'& [stroke="black"]': {
stroke: theme.palette.text.primary,
},
'& [fill="black"]': {
fill: theme.palette.text.primary,
},
},
...createEdgeColor('UNKNOWN', theme.palette.text.secondary, 'none'),
...createEdgeColor('ERROR', theme.palette.error.main),
'.icon': {
maskSize: '12px 12px',
maskPosition: '50% 50%',
maskRepeat: 'no-repeat',
width: '100%',
height: '100%',
},
'.icon-TRUE': {
maskImage: svgURL(labelSVG),
background: theme.palette.text.primary,
},
'.icon-UNKNOWN': {
maskImage: svgURL(labelOutlinedSVG),
background: theme.palette.text.secondary,
},
'.icon-ERROR': {
maskImage: svgURL(cancelSVG),
background: theme.palette.error.main,
},
'text.label-UNKNOWN': {
fill: theme.palette.text.secondary,
},
'text.label-ERROR': {
fill: theme.palette.error.main,
},
},
}));
|
