Skip to content

Commit 88f5e9b

Browse files
PierreCapoPierreCapo
committed
breaking: uniformize argument callback
1 parent dcf084b commit 88f5e9b

File tree

10 files changed

+299
-225
lines changed

10 files changed

+299
-225
lines changed

‎README.md‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -108,21 +108,30 @@ The table below lists all the avalaible key that the config object can have
108108
| `hasZoom` | boolean | false | Toggle the ability to zoom the tree |
109109
| `nodeWidth` | number | 160 | Width of a node in px |
110110
| `nodeHeight` | number | 100 | Height of a node in px |
111-
| `linkColor` | function | (nodeData) => "#ffcc80" | Color of the link |
112-
| `linkWidth` | function | (nodeData) => 10 | Width of the link |
111+
| `linkColor` | function | (node: NodeData) => "#ffcc80" | Color of the link |
112+
| `linkWidth` | function | (node: NodeData) => 10 | Width of the link |
113113
| `linkShape` | "quadraticBeziers" \| "orthogonal" \| "curve" | "quadraticBeziers" | Shape of the link |
114-
| `renderNode` | function | (nodeData) => null | HTML template for every node |
114+
| `renderNode` | function | (node: NodeData) => null | HTML template for every node |
115115
| `isHorizontal` | boolean | true | Direction of the tree. If true, the tree expands from left to right. If false, it goes from top to bottom |
116-
| `onNodeClick` | function | (nodeData) => null | Function handling the event when someone click on it |
117-
| `onNodeMouseEnter` | function | (nodeData) => null | Function handling the event when someone hover a node |
118-
| `onNodeMouseLeave` | function | (nodeData) => null | Function handling the event when the mouse pointer leaves a node |
116+
| `onNodeClick` | function | (node: NodeData) => null | Function handling the event when someone click on it |
117+
| `onNodeMouseEnter` | function | (node: NodeData) => null | Function handling the event when someone hover a node |
118+
| `onNodeMouseLeave` | function | (node: NodeData) => null | Function handling the event when the mouse pointer leaves a node |
119119
| `mainAxisNodeSpacing` | number or "auto" | 300 | Set the distance in pixels between two depths in the tree. If the value is `auto` it will automatically display the tree to fit the size of the container. |
120120
| `secondaryAxisNodeSpacing` | number | 1.25 | Set the distance between nodes in the same level as a coefficient of node dimensions. Recommended to have the value superior to 1 |
121121
| `marginTop` | number | 1.25 | Set the margin between the SVG element and the tree |
122122
| `marginBottom` | number | 1.25 | Set the margin between the SVG element and the tree |
123123
| `marginLeft` | number | 1.25 | Set the margin between the SVG element and the tree |
124124
| `marginRight` | number | 1.25 | Set the margin between the SVG element and the tree |
125125
| `duration` | number | 600 | The duration of the animation transition between layouts |
126+
| `data` | any | | Needed for Typescript projects only to type the `NodeData` argument |
127+
128+
And then, we have the `NodeData` type that is passed as callback of some functions:
129+
`
130+
type NodeData {
131+
data: // the data of each item
132+
settings: // the settings object
133+
}
134+
`
126135

127136
## Contributing
128137

‎example/example.ts‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
import { Treeviz } from "../src";
2+
3+
var data_1 = [
4+
{
5+
id: 1,
6+
text_1: "Chaos",
7+
text_2: "Void",
8+
father: null,
9+
color: "#FF5722",
10+
},
11+
{
12+
id: 2,
13+
text_1: "Tartarus",
14+
text_2: "Abyss",
15+
father: 1,
16+
color: "#FFC107",
17+
},
18+
{
19+
id: 3,
20+
text_1: "Gaia",
21+
text_2: "Earth",
22+
father: 1,
23+
color: "#8BC34A",
24+
},
25+
{
26+
id: 4,
27+
text_1: "Eros",
28+
text_2: "Desire",
29+
father: 1,
30+
color: "#00BCD4",
31+
},
32+
];
33+
var data_2 = [
34+
{
35+
id: 1,
36+
text_1: "Chaos",
37+
text_2: " Void",
38+
father: null,
39+
color: "#2196F3",
40+
},
41+
{
42+
id: 2,
43+
text_1: "Tartarus",
44+
text_2: "Abyss",
45+
father: 1,
46+
color: "#F44336",
47+
},
48+
{
49+
id: 3,
50+
text_1: "Gaia",
51+
text_2: "Earth",
52+
father: 1,
53+
color: "#673AB7",
54+
},
55+
{
56+
id: 4,
57+
text_1: "Eros",
58+
text_2: "Desire",
59+
father: 1,
60+
color: "#009688",
61+
},
62+
{
63+
id: 5,
64+
text_1: "Uranus",
65+
text_2: "Sky",
66+
father: 3,
67+
color: "#4CAF50",
68+
},
69+
{
70+
id: 6,
71+
text_1: "Ourea",
72+
text_2: "Mountains",
73+
father: 3,
74+
color: "#FF9800",
75+
},
76+
];
77+
var data_3 = [
78+
{
79+
id: 1,
80+
text_1: "Chaos",
81+
text_2: "Void",
82+
father: null,
83+
color: "#2196F3",
84+
},
85+
{
86+
id: 2,
87+
text_1: "Tartarus",
88+
text_2: "Abyss",
89+
father: 1,
90+
color: "#F44336",
91+
},
92+
{
93+
id: 3,
94+
text_1: "Gaia",
95+
text_2: "Earth",
96+
father: 1,
97+
color: "#673AB7",
98+
},
99+
{
100+
id: 4,
101+
text_1: "Eros",
102+
text_2: "Desire",
103+
father: 1,
104+
color: "#009688",
105+
},
106+
{
107+
id: 5,
108+
text_1: "Uranus",
109+
text_2: "Sky",
110+
father: 3,
111+
color: "#4CAF50",
112+
},
113+
{
114+
id: 6,
115+
text_1: "Ourea",
116+
text_2: "Mountains",
117+
father: 3,
118+
color: "#FF9800",
119+
},
120+
{
121+
id: 7,
122+
text_1: "Hermes",
123+
text_2: " Sky",
124+
father: 4,
125+
color: "#2196F3",
126+
},
127+
{
128+
id: 8,
129+
text_1: "Aphrodite",
130+
text_2: "Love",
131+
father: 4,
132+
color: "#8BC34A",
133+
},
134+
{
135+
id: 3.3,
136+
text_1: "Love",
137+
text_2: "Peace",
138+
father: 8,
139+
color: "#c72e99",
140+
},
141+
{
142+
id: 4.1,
143+
text_1: "Hope",
144+
text_2: "Life",
145+
father: 8,
146+
color: "#2eecc7",
147+
},
148+
];
149+
150+
var myTree = Treeviz.create({
151+
data: data_1, // for Typescript projects only.
152+
htmlId: "tree",
153+
idKey: "id",
154+
hasFlatData: true,
155+
relationnalField: "father",
156+
nodeWidth: 120,
157+
hasPan: true,
158+
hasZoom: true,
159+
nodeHeight: 80,
160+
mainAxisNodeSpacing: 2,
161+
isHorizontal: false,
162+
renderNode: function renderNode(node) {
163+
return (
164+
"<div class='box' style='cursor:pointer;height:" +
165+
node.settings.nodeHeight +
166+
"px; width:" +
167+
node.settings.nodeWidth +
168+
"px;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:" +
169+
node.data.color +
170+
";border-radius:5px;'><div><strong>" +
171+
node.data.text_1 +
172+
"</strong></div><div>is</div><div><i>" +
173+
node.data.text_2 +
174+
"</i></div></div>"
175+
);
176+
},
177+
linkWidth: (node) => {
178+
return node.data.id * 2;
179+
},
180+
linkShape: "curve",
181+
linkColor: () => `#B0BEC5`,
182+
onNodeClick: (node) => {
183+
console.log(node.data);
184+
},
185+
onNodeMouseEnter: (node) => {
186+
console.log(node.data);
187+
},
188+
});
189+
myTree.refresh(data_1);
190+
191+
var toggle = true;
192+
var addButton = document.querySelector("#add");
193+
var removeButton = document.querySelector("#remove");
194+
var doTasksButton = document.querySelector("#doTasks");
195+
addButton?.addEventListener("click", function () {
196+
console.log("addButton clicked");
197+
toggle ? myTree.refresh(data_2) : myTree.refresh(data_3);
198+
toggle = false;
199+
});
200+
removeButton?.addEventListener("click", function () {
201+
console.log("removeButton clicked");
202+
myTree.refresh(data_1);
203+
});
204+
doTasksButton?.addEventListener("click", function () {
205+
addButton?.click();
206+
removeButton?.click();
207+
addButton?.click();
208+
removeButton?.click();
209+
removeButton?.click();
210+
addButton?.click();
211+
removeButton?.click();
212+
addButton?.click();
213+
addButton?.click();
214+
removeButton?.click();
215+
removeButton?.click();
216+
});

0 commit comments

Comments
 (0)