Skip to content

Commit bbce451

Browse files
zbynekstarakumilingus
zbynekstara
and
kumilingus
authored
examples(layout-elk-ts): Using ELKJS to layout an existing graph (#3088)
Co-authored-by: Roman Bruckner <bruckner.roman@gmail.com>
1 parent 12571ba commit bbce451

File tree

10 files changed

+2216
-1610
lines changed

10 files changed

+2216
-1610
lines changed

‎examples/layout-elk-ts/.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
build/
2+
dist/
3+
node_modules/

‎examples/layout-elk-ts/README.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# JointJS ELK Demo
2+
3+
## Setup
4+
5+
Use Yarn to run this demo.
6+
7+
You need to build *JointJS* first. Navigate to the root folder and run:
8+
```bash
9+
yarn install
10+
yarn run build
11+
```
12+
13+
Navigate to this directory, then run:
14+
```bash
15+
yarn start
16+
```
17+
18+
## License
19+
20+
The *JointJS* library is licensed under the [Mozilla Public License 2.0](https://github.com/clientIO/joint/blob/master/LICENSE).
21+
22+
Copyright © 2013-2025 client IO

‎examples/layout-elk-ts/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description"
8+
content="The JointJS ELK automatic layout demo serves as a template to help bring your idea to life in no time.">
9+
<title>ELK Automatic Layout | JointJS</title>
10+
</head>
11+
12+
<body>
13+
<div class="toolbar">
14+
<span id="zoom-out" class="toolbar-button">Zoom Out</span>
15+
<span id="zoom-in" class="toolbar-button">Zoom In</span>
16+
</div>
17+
<div id="canvas" class="canvas"></div>
18+
<script src="dist/bundle.js"></script>
19+
20+
</body>
21+
22+
</html>

‎examples/layout-elk-ts/package.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "@joint/demo-elk-ts",
3+
"version": "4.1.3",
4+
"main": "dist/bundle.js",
5+
"homepage": "https://jointjs.com",
6+
"author": {
7+
"name": "client IO",
8+
"url": "https://client.io"
9+
},
10+
"license": "MPL-2.0",
11+
"private": true,
12+
"installConfig": {
13+
"hoistingLimits": "workspaces"
14+
},
15+
"scripts": {
16+
"start": "webpack-dev-server",
17+
"build": "webpack"
18+
},
19+
"dependencies": {
20+
"@joint/core": "workspace:^",
21+
"elkjs": "^0.11.0"
22+
},
23+
"devDependencies": {
24+
"css-loader": "3.5.3",
25+
"sass-loader": "8.0.2",
26+
"style-loader": "1.2.1",
27+
"ts-loader": "^9.2.5",
28+
"typescript": "5.8.2",
29+
"webpack": "5.98.0",
30+
"webpack-cli": "6.0.1",
31+
"webpack-dev-server": "5.2.0"
32+
},
33+
"volta": {
34+
"node": "22.14.0",
35+
"npm": "11.2.0",
36+
"yarn": "4.7.0"
37+
}
38+
}

‎examples/layout-elk-ts/src/dependencies.json‎

Lines changed: 286 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
1+
[
2+
{
3+
"source": 1,
4+
"target": 2
5+
},
6+
{
7+
"source": 1,
8+
"target": 3
9+
},
10+
{
11+
"source": 1,
12+
"target": 4
13+
},
14+
{
15+
"source": 5,
16+
"target": 6
17+
},
18+
{
19+
"source": 1,
20+
"target": 7
21+
},
22+
{
23+
"source": 1,
24+
"target": 8
25+
},
26+
{
27+
"source": 9,
28+
"target": 1
29+
},
30+
{
31+
"source": 10,
32+
"target": 1
33+
},
34+
{
35+
"source": 11,
36+
"target": 1
37+
},
38+
{
39+
"source": 12,
40+
"target": 1
41+
},
42+
{
43+
"source": 13,
44+
"target": 1
45+
},
46+
{
47+
"source": 14,
48+
"target": 1
49+
},
50+
{
51+
"source": 15,
52+
"target": 1
53+
},
54+
{
55+
"source": 16,
56+
"target": 1
57+
},
58+
{
59+
"source": 17,
60+
"target": 1
61+
},
62+
{
63+
"source": 18,
64+
"target": 1
65+
},
66+
{
67+
"source": 19,
68+
"target": 1
69+
},
70+
{
71+
"source": 20,
72+
"target": 1
73+
},
74+
{
75+
"source": 21,
76+
"target": 1
77+
},
78+
{
79+
"source": 18,
80+
"target": 1
81+
},
82+
{
83+
"source": 20,
84+
"target": 1
85+
},
86+
{
87+
"source": 20,
88+
"target": 1
89+
},
90+
{
91+
"source": 18,
92+
"target": 1
93+
},
94+
{
95+
"source": 20,
96+
"target": 1
97+
},
98+
{
99+
"source": 20,
100+
"target": 1
101+
},
102+
{
103+
"source": 20,
104+
"target": 1
105+
},
106+
{
107+
"source": 20,
108+
"target": 1
109+
},
110+
{
111+
"source": 20,
112+
"target": 1
113+
},
114+
{
115+
"source": 20,
116+
"target": 1
117+
},
118+
{
119+
"source": 20,
120+
"target": 1
121+
},
122+
{
123+
"source": 20,
124+
"target": 1
125+
},
126+
{
127+
"source": 18,
128+
"target": 1
129+
},
130+
{
131+
"source": 20,
132+
"target": 1
133+
},
134+
{
135+
"source": 18,
136+
"target": 1
137+
},
138+
{
139+
"source": 20,
140+
"target": 1
141+
},
142+
{
143+
"source": 18,
144+
"target": 1
145+
},
146+
{
147+
"source": 20,
148+
"target": 1
149+
},
150+
{
151+
"source": 20,
152+
"target": 1
153+
},
154+
{
155+
"source": 20,
156+
"target": 1
157+
},
158+
{
159+
"source": 20,
160+
"target": 1
161+
},
162+
{
163+
"source": 18,
164+
"target": 1
165+
},
166+
{
167+
"source": 1,
168+
"target": 22
169+
},
170+
{
171+
"source": 19,
172+
"target": 23
173+
},
174+
{
175+
"source": 15,
176+
"target": 23
177+
},
178+
{
179+
"source": 23,
180+
"target": 24
181+
},
182+
{
183+
"source": 25,
184+
"target": 26
185+
},
186+
{
187+
"source": 26,
188+
"target": 25
189+
},
190+
{
191+
"source": 1,
192+
"target": 27
193+
},
194+
{
195+
"source": 28,
196+
"target": 27
197+
},
198+
{
199+
"source": 29,
200+
"target": 27
201+
},
202+
{
203+
"source": 30,
204+
"target": 31
205+
},
206+
{
207+
"source": 32,
208+
"target": 31
209+
},
210+
{
211+
"source": 33,
212+
"target": 31
213+
},
214+
{
215+
"source": 34,
216+
"target": 35
217+
},
218+
{
219+
"source": 36,
220+
"target": 35
221+
},
222+
{
223+
"source": 36,
224+
"target": 37
225+
},
226+
{
227+
"source": 36,
228+
"target": 38
229+
},
230+
{
231+
"source": 36,
232+
"target": 39
233+
},
234+
{
235+
"source": 1,
236+
"target": 40
237+
},
238+
{
239+
"source": 38,
240+
"target": 41
241+
},
242+
{
243+
"source": 12,
244+
"target": 42
245+
},
246+
{
247+
"source": 43,
248+
"target": 42
249+
},
250+
{
251+
"source": 5,
252+
"target": 44
253+
},
254+
{
255+
"source": 34,
256+
"target": 36
257+
},
258+
{
259+
"source": 36,
260+
"target": 34
261+
},
262+
{
263+
"source": 1,
264+
"target": 45
265+
},
266+
{
267+
"source": 1,
268+
"target": 46
269+
},
270+
{
271+
"source": 6,
272+
"target": 12
273+
},
274+
{
275+
"source": 41,
276+
"target": 20
277+
},
278+
{
279+
"source": 31,
280+
"target": 20
281+
},
282+
{
283+
"source": 25,
284+
"target": 20
285+
}
286+
]

0 commit comments

Comments
 (0)