apextree 1.2.0 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.editorconfig +7 -0
- package/.eslintignore +2 -0
- package/.eslintrc +9 -0
- package/.prettierrc +5 -0
- package/.vscode/settings.json +5 -0
- package/LICENSE +80 -0
- package/README.md +2 -0
- package/apextree.es.min.js +15673 -1530
- package/apextree.min.js +1 -1
- package/demo/bottom_to_top_view.html +3 -3
- package/demo/custom_font_options.html +2 -2
- package/demo/dynamic_view_change.html +2 -2
- package/demo/expand_collapse_nodes.html +1 -1
- package/demo/group_leaf_nodes.html +118 -0
- package/demo/left_to_right_view.html +3 -3
- package/demo/per_node_options.html +7 -5
- package/demo/right_to_left_view.html +1 -2
- package/demo/top_to_bottom_view.html +1 -2
- package/globals.d.ts +4 -0
- package/lib/ApexTree.d.ts +4 -3
- package/lib/models/DagreGraph.d.ts +30 -0
- package/lib/models/Graph.d.ts +10 -24
- package/lib/models/GraphNode.d.ts +20 -0
- package/lib/models/GraphPoint.d.ts +4 -0
- package/lib/models/Paper.d.ts +22 -22
- package/lib/models/TreeNode.d.ts +15 -0
- package/lib/models/index.d.ts +3 -2
- package/lib/settings/DirectionConfig.d.ts +22 -30
- package/lib/settings/Options.d.ts +36 -26
- package/lib/utils/EdgeUtils.d.ts +3 -2
- package/lib/utils/GraphUtils.d.ts +4 -7
- package/package.json +14 -11
- package/tsconfig.json +28 -0
- package/webpack.common.ts +68 -0
- package/webpack.config.ts +7 -0
- package/webpack.dev.ts +12 -0
- package/webpack.prod.ts +9 -0
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<script src="../apextree.min.js"></script>
|
|
8
8
|
</head>
|
|
9
9
|
<body>
|
|
10
|
-
<div id="svg-tree" style="
|
|
10
|
+
<div id="svg-tree" style="margin: 0 auto;"></div>
|
|
11
11
|
<script>
|
|
12
12
|
const data = {
|
|
13
13
|
id: 'Lucas_Alex',
|
|
@@ -93,8 +93,8 @@
|
|
|
93
93
|
};
|
|
94
94
|
const options = {
|
|
95
95
|
contentKey: 'data',
|
|
96
|
-
width:
|
|
97
|
-
height:
|
|
96
|
+
width: '90%',
|
|
97
|
+
height: 'auto',
|
|
98
98
|
nodeWidth: 150,
|
|
99
99
|
nodeHeight: 70,
|
|
100
100
|
childrenSpacing: 70,
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
<script src="../apextree.min.js"></script>
|
|
11
11
|
</head>
|
|
12
12
|
<body>
|
|
13
|
-
<div id="svg-tree" style="
|
|
13
|
+
<div id="svg-tree" style="margin: 0 auto;"></div>
|
|
14
14
|
<script>
|
|
15
15
|
const data = {
|
|
16
16
|
id: '1',
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
},
|
|
90
90
|
fontSize: '24px',
|
|
91
91
|
fontFamily: 'Satisfy, "cursive"',
|
|
92
|
-
fontWeight: 600,
|
|
92
|
+
fontWeight: '600',
|
|
93
93
|
fontColor: '#388ac4',
|
|
94
94
|
borderColorHover: '#388ac4',
|
|
95
95
|
canvasStyle: 'border: 1px solid black;background: #f6f6f6;',
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
<button id="layoutRight">→</button>
|
|
23
23
|
<button id="fitScreen">Fit to Screen</button>
|
|
24
24
|
</div>
|
|
25
|
-
<div id="svg-tree" style="
|
|
25
|
+
<div id="svg-tree" style="margin: 0 auto;"></div>
|
|
26
26
|
</div>
|
|
27
27
|
|
|
28
28
|
<script>
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
direction: 'top',
|
|
104
104
|
fontSize: '20px',
|
|
105
105
|
fontFamily: 'sans-serif',
|
|
106
|
-
fontWeight: 600,
|
|
106
|
+
fontWeight: '600',
|
|
107
107
|
fontColor: '#a06dcc',
|
|
108
108
|
borderWidth: 2,
|
|
109
109
|
borderColor: '#a06dcc',
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Document</title>
|
|
7
|
+
<script src="../apextree.min.js"></script>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div id="svg-tree" style="margin: 0 auto"></div>
|
|
11
|
+
<script>
|
|
12
|
+
const data = {
|
|
13
|
+
id: 'ms',
|
|
14
|
+
data: {
|
|
15
|
+
imageURL: 'https://i.pravatar.cc/300?img=68',
|
|
16
|
+
name: 'Margret Swanson',
|
|
17
|
+
},
|
|
18
|
+
options: {
|
|
19
|
+
nodeBGColor: '#cdb4db',
|
|
20
|
+
nodeBGColorHover: '#cdb4db',
|
|
21
|
+
},
|
|
22
|
+
children: [
|
|
23
|
+
{
|
|
24
|
+
id: 'mh',
|
|
25
|
+
data: {
|
|
26
|
+
imageURL: 'https://i.pravatar.cc/300?img=69',
|
|
27
|
+
name: 'Mark Hudson',
|
|
28
|
+
},
|
|
29
|
+
options: {
|
|
30
|
+
nodeBGColor: '#ffafcc',
|
|
31
|
+
nodeBGColorHover: '#ffafcc',
|
|
32
|
+
},
|
|
33
|
+
children: [
|
|
34
|
+
{
|
|
35
|
+
id: 'kb',
|
|
36
|
+
data: {
|
|
37
|
+
imageURL: 'https://i.pravatar.cc/300?img=65',
|
|
38
|
+
name: 'Karyn Borbas',
|
|
39
|
+
},
|
|
40
|
+
options: {
|
|
41
|
+
nodeBGColor: '#f8ad9d',
|
|
42
|
+
nodeBGColorHover: '#f8ad9d',
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
id: 'cr',
|
|
47
|
+
data: {
|
|
48
|
+
imageURL: 'https://i.pravatar.cc/300?img=60',
|
|
49
|
+
name: 'Chris Rup',
|
|
50
|
+
},
|
|
51
|
+
options: {
|
|
52
|
+
nodeBGColor: '#c9cba3',
|
|
53
|
+
nodeBGColorHover: '#c9cba3',
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
],
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
id: 'cs',
|
|
60
|
+
data: {
|
|
61
|
+
imageURL: 'https://i.pravatar.cc/300?img=59',
|
|
62
|
+
name: 'Chris Lysek',
|
|
63
|
+
},
|
|
64
|
+
options: {
|
|
65
|
+
nodeBGColor: '#00afb9',
|
|
66
|
+
nodeBGColorHover: '#00afb9',
|
|
67
|
+
},
|
|
68
|
+
children: [
|
|
69
|
+
{
|
|
70
|
+
id: 'Noah_Chandler',
|
|
71
|
+
data: {
|
|
72
|
+
imageURL: 'https://i.pravatar.cc/300?img=57',
|
|
73
|
+
name: 'Noah Chandler',
|
|
74
|
+
},
|
|
75
|
+
options: {
|
|
76
|
+
nodeBGColor: '#84a59d',
|
|
77
|
+
nodeBGColorHover: '#84a59d',
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
id: 'Felix_Wagner',
|
|
82
|
+
data: {
|
|
83
|
+
imageURL: 'https://i.pravatar.cc/300?img=52',
|
|
84
|
+
name: 'Felix Wagner',
|
|
85
|
+
},
|
|
86
|
+
options: {
|
|
87
|
+
nodeBGColor: '#0081a7',
|
|
88
|
+
nodeBGColorHover: '#0081a7',
|
|
89
|
+
},
|
|
90
|
+
},
|
|
91
|
+
],
|
|
92
|
+
},
|
|
93
|
+
],
|
|
94
|
+
};
|
|
95
|
+
const options = {
|
|
96
|
+
contentKey: 'data',
|
|
97
|
+
width: 1000,
|
|
98
|
+
nodeWidth: 150,
|
|
99
|
+
nodeHeight: 100,
|
|
100
|
+
fontColor: '#fff',
|
|
101
|
+
borderColor: '#333',
|
|
102
|
+
childrenSpacing: 50,
|
|
103
|
+
siblingSpacing: 20,
|
|
104
|
+
direction: 'top',
|
|
105
|
+
groupLeafNodes: true,
|
|
106
|
+
nodeTemplate: (content) =>
|
|
107
|
+
`<div style='display: flex;flex-direction: column;gap: 10px;justify-content: center;align-items: center;height: 100%;'>
|
|
108
|
+
<img style='width: 50px;height: 50px;border-radius: 50%;' src='${content.imageURL}' alt='' />
|
|
109
|
+
<div style="font-weight: bold; font-family: Arial; font-size: 14px">${content.name}</div>
|
|
110
|
+
</div>`,
|
|
111
|
+
canvasStyle: 'border: 1px solid black;background: #f6f6f6;',
|
|
112
|
+
enableToolbar: true,
|
|
113
|
+
};
|
|
114
|
+
const tree = new ApexTree(document.getElementById('svg-tree'), options);
|
|
115
|
+
tree.render(data);
|
|
116
|
+
</script>
|
|
117
|
+
</body>
|
|
118
|
+
</html>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<script src="../apextree.min.js"></script>
|
|
8
8
|
</head>
|
|
9
9
|
<body>
|
|
10
|
-
<div id="svg-tree" style="
|
|
10
|
+
<div id="svg-tree" style="margin: 0 auto;"></div>
|
|
11
11
|
<script>
|
|
12
12
|
const data = {
|
|
13
13
|
id: 'Lucas_Alex',
|
|
@@ -130,8 +130,8 @@
|
|
|
130
130
|
};
|
|
131
131
|
const options = {
|
|
132
132
|
contentKey: 'data',
|
|
133
|
-
width:
|
|
134
|
-
height:
|
|
133
|
+
width: 800,
|
|
134
|
+
height: 'auto',
|
|
135
135
|
nodeWidth: 150,
|
|
136
136
|
nodeHeight: 70,
|
|
137
137
|
childrenSpacing: 70,
|
|
@@ -6,11 +6,14 @@
|
|
|
6
6
|
<title>Document</title>
|
|
7
7
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
8
8
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
9
|
-
<link
|
|
9
|
+
<link
|
|
10
|
+
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap"
|
|
11
|
+
rel="stylesheet"
|
|
12
|
+
/>
|
|
10
13
|
<script src="../apextree.min.js"></script>
|
|
11
14
|
</head>
|
|
12
15
|
<body>
|
|
13
|
-
<div id="svg-tree" style="
|
|
16
|
+
<div id="svg-tree" style="margin: 0 auto"></div>
|
|
14
17
|
<script>
|
|
15
18
|
const data = {
|
|
16
19
|
id: '1',
|
|
@@ -144,8 +147,7 @@
|
|
|
144
147
|
};
|
|
145
148
|
const options = {
|
|
146
149
|
contentKey: 'name',
|
|
147
|
-
width:
|
|
148
|
-
height: 800,
|
|
150
|
+
width: 800,
|
|
149
151
|
nodeWidth: 180,
|
|
150
152
|
nodeHeight: 50,
|
|
151
153
|
childrenSpacing: 180,
|
|
@@ -153,7 +155,7 @@
|
|
|
153
155
|
direction: 'left',
|
|
154
156
|
fontSize: '20px',
|
|
155
157
|
fontFamily: 'Quicksand, sans-serif',
|
|
156
|
-
fontWeight: 600,
|
|
158
|
+
fontWeight: '600',
|
|
157
159
|
fontColor: '#388ac4',
|
|
158
160
|
borderColorHover: '#388ac4',
|
|
159
161
|
nodeBGColorHover: '#d7d7d7',
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<script src="../apextree.min.js"></script>
|
|
8
8
|
</head>
|
|
9
9
|
<body>
|
|
10
|
-
<div id="svg-tree" style="
|
|
10
|
+
<div id="svg-tree" style="margin: 0 auto;"></div>
|
|
11
11
|
<script>
|
|
12
12
|
const data = {
|
|
13
13
|
id: 'Lucas_Alex',
|
|
@@ -131,7 +131,6 @@
|
|
|
131
131
|
const options = {
|
|
132
132
|
contentKey: 'data',
|
|
133
133
|
width: 700,
|
|
134
|
-
height: 800,
|
|
135
134
|
nodeWidth: 150,
|
|
136
135
|
nodeHeight: 70,
|
|
137
136
|
childrenSpacing: 70,
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<script src="../apextree.min.js"></script>
|
|
8
8
|
</head>
|
|
9
9
|
<body>
|
|
10
|
-
<div id="svg-tree" style="
|
|
10
|
+
<div id="svg-tree" style="margin: 0 auto;"></div>
|
|
11
11
|
<script>
|
|
12
12
|
const data = {
|
|
13
13
|
id: 'ms',
|
|
@@ -95,7 +95,6 @@
|
|
|
95
95
|
const options = {
|
|
96
96
|
contentKey: 'data',
|
|
97
97
|
width: 800,
|
|
98
|
-
height: 600,
|
|
99
98
|
nodeWidth: 150,
|
|
100
99
|
nodeHeight: 100,
|
|
101
100
|
fontColor: '#fff',
|
package/globals.d.ts
ADDED
package/lib/ApexTree.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { Node, Graph } from './models';
|
|
2
1
|
import { TreeOptions } from './settings/Options';
|
|
2
|
+
import { Graph, NestedNode } from './models';
|
|
3
|
+
|
|
3
4
|
export declare class ApexTree {
|
|
4
5
|
element: HTMLElement;
|
|
5
|
-
options: TreeOptions;
|
|
6
6
|
graph: Graph;
|
|
7
|
+
options: TreeOptions;
|
|
7
8
|
constructor(element: HTMLElement, options: TreeOptions);
|
|
8
|
-
render(data:
|
|
9
|
+
render(data: NestedNode): Graph;
|
|
9
10
|
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Paper } from './Paper';
|
|
2
|
+
import { NestedNode } from './GraphNode';
|
|
3
|
+
import { TreeDirection, TreeOptions } from '../settings/Options';
|
|
4
|
+
import { G } from '@svgdotjs/svg.js';
|
|
5
|
+
import { Edge } from '@dagrejs/dagre';
|
|
6
|
+
|
|
7
|
+
export declare class Graph extends Paper {
|
|
8
|
+
private data;
|
|
9
|
+
private graph;
|
|
10
|
+
private nodeMap;
|
|
11
|
+
element: HTMLElement;
|
|
12
|
+
options: TreeOptions;
|
|
13
|
+
constructor(element: HTMLElement, options: TreeOptions);
|
|
14
|
+
private calculateLayout;
|
|
15
|
+
private resetGraph;
|
|
16
|
+
private setGraphNodesAndEdges;
|
|
17
|
+
private setNodesRecursively;
|
|
18
|
+
changeLayout(direction?: TreeDirection): void;
|
|
19
|
+
collapse(nodeId: string): void;
|
|
20
|
+
construct(data: NestedNode): void;
|
|
21
|
+
expand(nodeId: string): void;
|
|
22
|
+
fitScreen(): void;
|
|
23
|
+
render({ keepOldPosition }?: {
|
|
24
|
+
keepOldPosition?: boolean;
|
|
25
|
+
}): void;
|
|
26
|
+
renderEdge(edge: Edge, group: G): void;
|
|
27
|
+
renderGroupedLeafNodes(nodeId: string, mainGroup: G): void;
|
|
28
|
+
renderLeafNode(nodeId: string, mainGroup: G, index: number): void;
|
|
29
|
+
renderNode(nodeId: string, mainGroup: G): void;
|
|
30
|
+
}
|
package/lib/models/Graph.d.ts
CHANGED
|
@@ -1,35 +1,21 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { FlextreeNode } from 'd3-flextree';
|
|
1
|
+
import { Node, TreeNode } from './TreeNode';
|
|
3
2
|
import { Paper } from './Paper';
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
readonly y: number;
|
|
8
|
-
}
|
|
9
|
-
export interface Node {
|
|
10
|
-
readonly id: string;
|
|
11
|
-
readonly name: string;
|
|
12
|
-
readonly children: Array<Node>;
|
|
13
|
-
readonly expanded: boolean;
|
|
14
|
-
readonly options?: NodeOptions & TooltipOptions & FontOptions;
|
|
15
|
-
}
|
|
16
|
-
export interface TreeNode<N> extends FlextreeNode<N> {
|
|
17
|
-
hiddenChildren: Array<TreeNode<N>> | undefined;
|
|
18
|
-
edge?: Path;
|
|
19
|
-
}
|
|
3
|
+
import { TreeDirection, TreeOptions } from '../settings/Options';
|
|
4
|
+
import { G } from '@svgdotjs/svg.js';
|
|
5
|
+
|
|
20
6
|
export declare class Graph extends Paper {
|
|
7
|
+
element: HTMLElement;
|
|
21
8
|
options: TreeOptions;
|
|
22
9
|
rootNode: TreeNode<Node> | undefined;
|
|
23
|
-
element: HTMLElement;
|
|
24
10
|
constructor(element: HTMLElement, options: TreeOptions);
|
|
25
|
-
|
|
26
|
-
renderNode(node: TreeNode<Node>, mainGroup: G): void;
|
|
27
|
-
renderEdge(node: TreeNode<Node>, group: G): void;
|
|
11
|
+
changeLayout(direction?: TreeDirection): void;
|
|
28
12
|
collapse(nodeId: string): void;
|
|
13
|
+
construct(data: Node): void;
|
|
29
14
|
expand(nodeId: string): void;
|
|
30
|
-
changeLayout(direction?: TreeDirection): void;
|
|
31
15
|
fitScreen(): void;
|
|
32
16
|
render({ keepOldPosition }?: {
|
|
33
|
-
keepOldPosition?: boolean
|
|
17
|
+
keepOldPosition?: boolean;
|
|
34
18
|
}): void;
|
|
19
|
+
renderEdge(node: TreeNode<Node>, group: G): void;
|
|
20
|
+
renderNode(node: TreeNode<Node>, mainGroup: G): void;
|
|
35
21
|
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { FontOptions, NodeOptions, TooltipOptions } from '../settings/Options';
|
|
2
|
+
import { Node as DagreNode } from '@dagrejs/dagre';
|
|
3
|
+
|
|
4
|
+
export interface NestedNode<T = undefined> {
|
|
5
|
+
readonly children: Array<NestedNode<T>>;
|
|
6
|
+
readonly data: T;
|
|
7
|
+
readonly id: string;
|
|
8
|
+
readonly name: string;
|
|
9
|
+
readonly options?: FontOptions & NodeOptions & TooltipOptions;
|
|
10
|
+
}
|
|
11
|
+
export interface Node<T = undefined> extends DagreNode {
|
|
12
|
+
readonly children: Array<string>;
|
|
13
|
+
readonly data: T;
|
|
14
|
+
readonly hiddenChildren: Array<string> | undefined;
|
|
15
|
+
readonly id: string;
|
|
16
|
+
readonly name: string;
|
|
17
|
+
readonly onlyLeafNodes?: boolean;
|
|
18
|
+
readonly options?: FontOptions & NodeOptions & TooltipOptions;
|
|
19
|
+
readonly parent?: string;
|
|
20
|
+
}
|
package/lib/models/Paper.d.ts
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
import { Circle } from '@svgdotjs/svg.js';
|
|
2
|
-
import { CircleAttr } from '@svgdotjs/svg.js';
|
|
3
|
-
import { Element, ForeignObject, G, Path, Rect, Svg, Text, TextAttr } from '@svgdotjs/svg.js';
|
|
4
1
|
import { NodeOptions } from '../settings/Options';
|
|
2
|
+
import { Circle, CircleAttr, Element, ForeignObject, G, Path, Rect, Svg, Text, TextAttr } from '@svgdotjs/svg.js';
|
|
3
|
+
|
|
5
4
|
export declare class Paper {
|
|
6
|
-
private readonly width;
|
|
7
5
|
private readonly height;
|
|
6
|
+
private readonly width;
|
|
8
7
|
canvas: Svg;
|
|
9
8
|
constructor(element: HTMLElement, width: number, height: number, canvasStyle: string);
|
|
9
|
+
static drawCircle(attributes?: CircleAttr): Circle;
|
|
10
|
+
static drawGroup(x?: number, y?: number, id?: string, parent?: string): G;
|
|
11
|
+
static drawPath(pathString: string, { borderColor, id }?: {
|
|
12
|
+
borderColor?: string;
|
|
13
|
+
id?: string;
|
|
14
|
+
}): Path;
|
|
15
|
+
static drawRect({ color, height, opacity, radius, width, x1, y1, }?: {
|
|
16
|
+
color?: string;
|
|
17
|
+
height?: number;
|
|
18
|
+
opacity?: number;
|
|
19
|
+
radius?: number;
|
|
20
|
+
width?: number;
|
|
21
|
+
x1?: any;
|
|
22
|
+
y1?: any;
|
|
23
|
+
}): Rect;
|
|
24
|
+
static drawTemplate(template: string, { nodeHeight, nodeWidth }?: Partial<NodeOptions>): ForeignObject;
|
|
25
|
+
static drawText(text: string, { dx, dy, x, y }: Partial<TextAttr>): Text;
|
|
10
26
|
add(element: Element): void;
|
|
27
|
+
clear(): void;
|
|
28
|
+
exportToSvg(): void;
|
|
11
29
|
resetViewBox(): void;
|
|
12
30
|
updateViewBox(x: number, y: number, width: number, height: number): void;
|
|
13
31
|
zoom(zoomFactor: number): void;
|
|
14
|
-
clear(): void;
|
|
15
|
-
static drawRect({ x1, y1, width, height, radius, color, opacity, }?: {
|
|
16
|
-
x1?: undefined;
|
|
17
|
-
y1?: undefined;
|
|
18
|
-
width?: number | undefined;
|
|
19
|
-
height?: number | undefined;
|
|
20
|
-
radius?: number | undefined;
|
|
21
|
-
color?: string | undefined;
|
|
22
|
-
opacity?: number | undefined;
|
|
23
|
-
}): Rect;
|
|
24
|
-
static drawCircle(attributes?: CircleAttr): Circle;
|
|
25
|
-
static drawText(text: string | undefined, { x, y, dx, dy }: Partial<TextAttr>): Text;
|
|
26
|
-
static drawTemplate(template: string, { nodeWidth, nodeHeight }?: Partial<NodeOptions>): ForeignObject;
|
|
27
|
-
static drawGroup(x?: number, y?: number, id?: string, parent?: string): G;
|
|
28
|
-
static drawPath(pathString: string, { id, borderColor }?: {
|
|
29
|
-
id?: string | undefined;
|
|
30
|
-
borderColor?: string | undefined;
|
|
31
|
-
}): Path;
|
|
32
32
|
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { FontOptions, NodeOptions, TooltipOptions } from '../settings/Options';
|
|
2
|
+
import { FlextreeNode } from 'd3-flextree';
|
|
3
|
+
import { Path } from '@svgdotjs/svg.js';
|
|
4
|
+
|
|
5
|
+
export interface Node {
|
|
6
|
+
readonly children: Array<Node>;
|
|
7
|
+
readonly expanded: boolean;
|
|
8
|
+
readonly id: string;
|
|
9
|
+
readonly name: string;
|
|
10
|
+
readonly options?: FontOptions & NodeOptions & TooltipOptions;
|
|
11
|
+
}
|
|
12
|
+
export interface TreeNode<N> extends FlextreeNode<N> {
|
|
13
|
+
edge?: Path;
|
|
14
|
+
hiddenChildren: Array<TreeNode<N>> | undefined;
|
|
15
|
+
}
|
package/lib/models/index.d.ts
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
export { Graph
|
|
2
|
-
export {
|
|
1
|
+
export { Graph } from './DagreGraph';
|
|
2
|
+
export { NestedNode, Node } from './GraphNode';
|
|
3
|
+
export { GraphPoint } from './GraphPoint';
|
|
@@ -1,47 +1,39 @@
|
|
|
1
|
-
import { GraphPoint
|
|
1
|
+
import { GraphPoint } from '../models/GraphPoint';
|
|
2
|
+
import { Node } from '../models/GraphNode';
|
|
3
|
+
|
|
2
4
|
export declare const curvedEdgesHorizontal: (s: GraphPoint, t: GraphPoint, m: GraphPoint) => string;
|
|
3
5
|
export declare const curvedEdgesVertical: (s: GraphPoint, t: GraphPoint, m: GraphPoint, offsets?: {
|
|
4
6
|
sy: number;
|
|
5
7
|
}) => string;
|
|
6
8
|
export interface DirectionConfigProperties {
|
|
7
|
-
readonly
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
readonly edgeY: (params: ConfigParams) => number;
|
|
9
|
+
readonly calculateEdge: (s: GraphPoint, t: GraphPoint, m: GraphPoint, offsets: {
|
|
10
|
+
sy: number;
|
|
11
|
+
}) => string;
|
|
11
12
|
readonly edgeMidX: (params: ConfigParams) => number;
|
|
12
13
|
readonly edgeMidY: (params: ConfigParams) => number;
|
|
13
14
|
readonly edgeParentX: (params: ConfigParams) => number;
|
|
14
15
|
readonly edgeParentY: (params: ConfigParams) => number;
|
|
15
|
-
readonly
|
|
16
|
-
readonly
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
readonly
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
readonly viewBoxDimensions: ({ rootNode, childrenSpacing, siblingSpacing, }: {
|
|
24
|
-
rootNode: TreeNode<Node> | undefined;
|
|
25
|
-
childrenSpacing: number;
|
|
26
|
-
siblingSpacing: number;
|
|
27
|
-
}) => {
|
|
28
|
-
x: number;
|
|
29
|
-
y: number;
|
|
30
|
-
width: number;
|
|
31
|
-
height: number;
|
|
32
|
-
};
|
|
16
|
+
readonly edgeX: (params: ConfigParams) => number;
|
|
17
|
+
readonly edgeY: (params: ConfigParams) => number;
|
|
18
|
+
readonly leafGroupX: (params: ConfigParams) => number;
|
|
19
|
+
readonly leafGroupY: (params: ConfigParams) => number;
|
|
20
|
+
readonly leafHeight: (params: ConfigParams) => number;
|
|
21
|
+
readonly leafWidth: (params: ConfigParams) => number;
|
|
22
|
+
readonly leafX: (params: ConfigParams) => number;
|
|
23
|
+
readonly leafY: (params: ConfigParams) => number;
|
|
33
24
|
}
|
|
34
|
-
interface ConfigParams {
|
|
35
|
-
readonly
|
|
36
|
-
readonly
|
|
37
|
-
readonly width: number;
|
|
25
|
+
export interface ConfigParams {
|
|
26
|
+
readonly childLength: number;
|
|
27
|
+
readonly childrenSpacing: number;
|
|
38
28
|
readonly height: number;
|
|
39
|
-
readonly
|
|
29
|
+
readonly index: number;
|
|
30
|
+
readonly node: Node;
|
|
40
31
|
readonly nodeHeight: number;
|
|
32
|
+
readonly nodeWidth: number;
|
|
33
|
+
readonly parent: Node;
|
|
41
34
|
readonly siblingSpacing: number;
|
|
42
|
-
readonly
|
|
35
|
+
readonly width: number;
|
|
43
36
|
readonly x: number;
|
|
44
37
|
readonly y: number;
|
|
45
38
|
}
|
|
46
39
|
export declare const DirectionConfig: Record<string, DirectionConfigProperties>;
|
|
47
|
-
export {};
|
|
@@ -1,49 +1,59 @@
|
|
|
1
|
-
export type TreeDirection = '
|
|
1
|
+
export type TreeDirection = 'bottom' | 'left' | 'right' | 'top';
|
|
2
|
+
export declare const DirectionMap: {
|
|
3
|
+
bottom: string;
|
|
4
|
+
left: string;
|
|
5
|
+
right: string;
|
|
6
|
+
top: string;
|
|
7
|
+
};
|
|
2
8
|
export interface NodeOptions {
|
|
3
|
-
readonly nodeWidth: number;
|
|
4
|
-
readonly nodeHeight: number;
|
|
5
|
-
readonly nodeBGColor: string;
|
|
6
|
-
readonly nodeBGColorHover: string;
|
|
7
|
-
readonly nodeStyle: string;
|
|
8
|
-
readonly nodeClassName: string;
|
|
9
|
-
readonly nodeTemplate: (content: any) => any;
|
|
10
|
-
readonly borderRadius: string;
|
|
11
|
-
readonly borderWidth: number;
|
|
12
9
|
readonly borderColor: string;
|
|
13
|
-
readonly borderStyle: string;
|
|
14
10
|
readonly borderColorHover: string;
|
|
11
|
+
readonly borderRadius: string;
|
|
12
|
+
readonly borderStyle: string;
|
|
13
|
+
readonly borderWidth: number;
|
|
15
14
|
readonly enableExpandCollapse: boolean;
|
|
15
|
+
readonly groupLeafNodesSpacing: number;
|
|
16
|
+
readonly nodeBGColor: string;
|
|
17
|
+
readonly nodeBGColorHover: string;
|
|
18
|
+
readonly nodeClassName: string;
|
|
19
|
+
readonly nodeHeight: number;
|
|
20
|
+
readonly nodeStyle: string;
|
|
21
|
+
readonly nodeTemplate: (content: string) => string;
|
|
22
|
+
readonly nodeWidth: number;
|
|
16
23
|
}
|
|
17
24
|
export interface TooltipOptions {
|
|
18
25
|
readonly enableTooltip: boolean;
|
|
26
|
+
readonly tooltipBGColor: string;
|
|
27
|
+
readonly tooltipBorderColor: string;
|
|
19
28
|
readonly tooltipId: string;
|
|
20
|
-
readonly tooltipTemplate?: (content: any) => any;
|
|
21
29
|
readonly tooltipMaxWidth: number;
|
|
22
|
-
readonly
|
|
23
|
-
readonly tooltipBGColor: string;
|
|
30
|
+
readonly tooltipTemplate?: (content: string) => string;
|
|
24
31
|
}
|
|
25
32
|
export interface FontOptions {
|
|
26
|
-
readonly fontSize: string;
|
|
27
|
-
readonly fontFamily: string;
|
|
28
|
-
readonly fontWeight: number;
|
|
29
33
|
readonly fontColor: string;
|
|
34
|
+
readonly fontFamily: string;
|
|
35
|
+
readonly fontSize: string;
|
|
36
|
+
readonly fontWeight: string;
|
|
30
37
|
}
|
|
31
38
|
export interface EdgeOptions {
|
|
32
|
-
readonly edgeWidth: number;
|
|
33
39
|
readonly edgeColor: string;
|
|
34
40
|
readonly edgeColorHover: string;
|
|
41
|
+
readonly edgeWidth: number;
|
|
35
42
|
}
|
|
36
43
|
export interface CommonOptions {
|
|
37
|
-
readonly
|
|
38
|
-
readonly height: number;
|
|
39
|
-
readonly direction: TreeDirection;
|
|
40
|
-
readonly contentKey: string;
|
|
41
|
-
readonly siblingSpacing: number;
|
|
44
|
+
readonly canvasStyle: string;
|
|
42
45
|
readonly childrenSpacing: number;
|
|
43
|
-
readonly highlightOnHover: boolean;
|
|
44
46
|
readonly containerClassName: string;
|
|
45
|
-
readonly
|
|
47
|
+
readonly contentKey: string;
|
|
48
|
+
readonly direction: TreeDirection;
|
|
46
49
|
readonly enableToolbar: boolean;
|
|
50
|
+
readonly groupLeafNodes: boolean;
|
|
51
|
+
readonly height: number | string;
|
|
52
|
+
readonly highlightOnHover: boolean;
|
|
53
|
+
readonly siblingSpacing: number;
|
|
54
|
+
readonly viewPortHeight: number;
|
|
55
|
+
readonly viewPortWidth: number;
|
|
56
|
+
readonly width: number | string;
|
|
47
57
|
}
|
|
48
|
-
export type TreeOptions = CommonOptions &
|
|
58
|
+
export type TreeOptions = CommonOptions & EdgeOptions & FontOptions & NodeOptions & TooltipOptions;
|
|
49
59
|
export declare const DefaultOptions: TreeOptions;
|
package/lib/utils/EdgeUtils.d.ts
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
import { Node
|
|
2
|
-
|
|
1
|
+
import { Node } from '../models';
|
|
2
|
+
|
|
3
|
+
export declare const getEdge: (node: Node, newParent: Node, nodeWidth: number, nodeHeight: number, graphDirection: string) => null | string;
|
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
import { Node, TreeNode } from '../models/Graph';
|
|
2
1
|
import { TreeOptions } from '../settings/Options';
|
|
2
|
+
|
|
3
3
|
export declare const setAttributes: (element: Element | null, attrs?: Record<string, any>) => void;
|
|
4
4
|
export declare const ExpandCollapseButtonSize = 14;
|
|
5
|
-
export declare const highlightToPath: (
|
|
6
|
-
export declare
|
|
7
|
-
export declare
|
|
8
|
-
export declare const getTooltip: (tooltipId?: string) => HTMLElement;
|
|
9
|
-
export declare const updateTooltip: (id?: string, styles?: string | undefined, content?: string) => void;
|
|
10
|
-
export declare const camelToKebabCase: (str: string) => string;
|
|
5
|
+
export declare const highlightToPath: (selfNode: any, nodeMap: any, isHighlighted: boolean, options: TreeOptions) => void;
|
|
6
|
+
export declare function processNodes(data: any): Record<string, any>;
|
|
7
|
+
export declare function findParentsWithOnlyLeafNodes(tree: any): any[];
|