|
1
|
|
|
import { DependencyLink, DependencyNode, NodeSelection, RenderedDependencyNode } from '../components/types'; |
|
2
|
|
|
import { BASE_FONT_SIZE, Colors } from '../utils/AppConsts'; |
|
3
|
|
|
import { select } from 'd3-selection'; |
|
4
|
|
|
import { selectAllNodes } from '../utils/helpers/Selectors'; |
|
5
|
|
|
|
|
6
|
|
|
export function createNodeLabels(labelNodesGroup: NodeSelection<SVGGElement>, nodes: DependencyNode[]) { |
|
7
|
|
|
labelNodesGroup |
|
8
|
|
|
.selectAll('g') |
|
9
|
|
|
.data(nodes) |
|
10
|
|
|
.append<SVGPathElement>('svg:path') |
|
11
|
|
|
.attr('class', 'label') |
|
12
|
|
|
.attr('fill', Colors.LIGHT_GREY) |
|
13
|
|
|
.attr('d', function({ isConsumer, isProvider }) { |
|
14
|
|
|
return createNodeLabelPath(this, isConsumer, isProvider); |
|
15
|
|
|
}); |
|
16
|
|
|
} |
|
17
|
|
|
|
|
18
|
|
|
export function createNodes(labelNodesGroup: NodeSelection<SVGGElement>, nodes: DependencyNode[]) { |
|
19
|
|
|
return labelNodesGroup |
|
20
|
|
|
.selectAll<HTMLElement, DependencyNode>('g#labels') |
|
21
|
|
|
.data(nodes) |
|
22
|
|
|
.enter() |
|
23
|
|
|
.append<SVGGElement>('g') |
|
24
|
|
|
.attr('data-test-id', 'node') |
|
25
|
|
|
.attr('cursor', 'pointer') |
|
26
|
|
|
.append('text') |
|
27
|
|
|
.attr('font-size', BASE_FONT_SIZE) |
|
28
|
|
|
.attr('fill', Colors.BASIC_TEXT) |
|
29
|
|
|
.attr('text-anchor', 'middle') |
|
30
|
|
|
.text(d => d.name); |
|
31
|
|
|
} |
|
32
|
|
|
|
|
33
|
|
|
export function getTextDimensions(textElement: SVGTextElement | null) { |
|
34
|
|
|
if (textElement) { |
|
35
|
|
|
return select<SVGTextElement, DependencyNode>(textElement) |
|
36
|
|
|
.node() |
|
37
|
|
|
?.getBBox(); |
|
38
|
|
|
} |
|
39
|
|
|
} |
|
40
|
|
|
|
|
41
|
|
|
export function getNodeDimensions(selectedNode: DependencyNode): { width: number; height: number } { |
|
42
|
|
|
const foundNode = selectAllNodes() |
|
43
|
|
|
.filter((node: DependencyNode) => node.x === selectedNode.x && node.y === selectedNode.y) |
|
44
|
|
|
.node(); |
|
45
|
|
|
return foundNode ? foundNode.getBBox() : { width: 200, height: 25 }; |
|
46
|
|
|
} |
|
47
|
|
|
|
|
48
|
|
|
export function findMaxDependencyLevel(labelNodesGroup: NodeSelection<SVGGElement>) { |
|
49
|
|
|
return ( |
|
50
|
|
|
Math.max( |
|
51
|
|
|
...labelNodesGroup |
|
52
|
|
|
.selectAll<HTMLElement, DependencyNode>('g') |
|
53
|
|
|
.filter((node: DependencyNode) => node.level > 0) |
|
54
|
|
|
.data() |
|
55
|
|
|
.map((node: DependencyNode) => node.level) |
|
56
|
|
|
) - 1 |
|
57
|
|
|
); |
|
58
|
|
|
} |
|
59
|
|
|
|
|
60
|
|
|
export function areNodesConnected(a: DependencyNode, b: DependencyNode, links: DependencyLink[]) { |
|
61
|
|
|
return ( |
|
62
|
|
|
a.index === b.index || |
|
63
|
|
|
links.some( |
|
64
|
|
|
link => |
|
65
|
|
|
(link.source.index === a.index && link.target.index === b.index) || |
|
66
|
|
|
(link.source.index === b.index && link.target.index === a.index) |
|
67
|
|
|
) |
|
68
|
|
|
); |
|
69
|
|
|
} |
|
70
|
|
|
|
|
71
|
|
|
export function getHighLightedLabelColor(node: DependencyNode) { |
|
72
|
|
|
const { isConsumer, isProvider, level } = node; |
|
73
|
|
|
|
|
74
|
|
|
if (level === 1) { |
|
75
|
|
|
return Colors.CLIFTON_NAVY; |
|
76
|
|
|
} |
|
77
|
|
|
|
|
78
|
|
|
if (isConsumer || isProvider) { |
|
79
|
|
|
return Colors.MILLENNIUM_MINT; |
|
80
|
|
|
} |
|
81
|
|
|
|
|
82
|
|
|
return Colors.LIGHT_GREY; |
|
83
|
|
|
} |
|
84
|
|
|
|
|
85
|
|
|
export function getRenderedNodes(nodes: DependencyNode[]): RenderedDependencyNode[] { |
|
86
|
|
|
return nodes.filter((node): node is RenderedDependencyNode => node.x !== undefined && node.y !== undefined && node.width !== undefined); |
|
87
|
|
|
} |
|
88
|
|
|
|
|
89
|
|
|
export function createNodeLabelPath(node: SVGPathElement | null, isConsumer: boolean, isProvider: boolean) { |
|
90
|
|
|
const labelText = (node?.previousSibling || node?.nextSibling) as SVGTextElement | null; |
|
91
|
|
|
const labelTextDimensions = getTextDimensions(labelText); |
|
92
|
|
|
|
|
93
|
|
|
if (!labelTextDimensions) { |
|
94
|
|
|
return ''; |
|
95
|
|
|
} |
|
96
|
|
|
|
|
97
|
|
|
const labelTextWidth = labelTextDimensions.width; |
|
98
|
|
|
|
|
99
|
|
|
if (isConsumer && isProvider) { |
|
100
|
|
|
return `M${-labelTextWidth / 2 + 4.5},35l9.37,14.59L${-labelTextWidth / 2 + 4.5},64.18h${labelTextWidth + |
|
101
|
|
|
45}l9-14.59L${labelTextWidth / 2 + 49.5},35H${-labelTextWidth / 2 + 4.5}z`; |
|
102
|
|
|
} |
|
103
|
|
|
|
|
104
|
|
|
if (isProvider) { |
|
105
|
|
|
return `M${labelTextWidth / 2 + 49.5},35H${-labelTextWidth / 2 + 4.5}l9.37,14.59L${-labelTextWidth / 2 + |
|
106
|
|
|
4.5},64.18h${labelTextWidth + 45}`; |
|
107
|
|
|
} |
|
108
|
|
|
|
|
109
|
|
|
if (isConsumer) { |
|
110
|
|
|
return `M${-labelTextWidth / 2 + 4.5},64.18h${labelTextWidth + 45}l9.42-14.59L${labelTextWidth / 2 + 49.5},35H${-labelTextWidth / |
|
111
|
|
|
2 + |
|
112
|
|
|
4.5}`; |
|
113
|
|
|
} |
|
114
|
|
|
|
|
115
|
|
|
return `M${-labelTextWidth / 2 + 4.5},64.18h${labelTextWidth + 55}L${labelTextWidth / 2 + 59.5},35H${-labelTextWidth / 2 + 4.5}`; |
|
116
|
|
|
} |
|
117
|
|
|
|
HLTech /
judge-d-ui
