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