Wiki source code of JavaScript (KLayJS)

Last modified by Richard Kreissig on 2023/09/14 10:14
Hide last authors
uru 24.1 1 {{warning}}
cds 25.1 2 KLayJS is deprecated and has been replaced by [[elkjs>>url:https://github.com/kieler/elkjs||shape="rect"]]. The documentation below may be **outdated**.
uru 24.1 3 {{/warning}}
uru 1.1 4
5
6 The KLay JS project provides our Java-based layout algorithms to the JavaScript community. We leverage the Java to JavaScript compiler of the [[Google Web Toolkit (GWT) >>url:http://www.gwtproject.org/||shape="rect"]]to convert our Java code into a JavaScript library. This allows you to use the full power of our layout algorithms in pure JavaScript.
7
8
uru 17.1 9
uru 18.1 10 {{toc/}}
uru 17.1 11
uru 23.1 12 = GitHub =
13
14 The library is now available via [[OpenKieler >>url:https://github.com/OpenKieler||shape="rect"]]on GitHub. Please refer to those sides for further information. The documentation below might be incomplete and outdated.
15
uru 1.1 16 = Downloads =
17
cds 26.3 18 [[doc:KIELER.Downloads - KLayJS]]
uru 10.1 19
uru 21.1 20
Richard Kreissig 32.1 21
uru 10.1 22 * **Standard Linker**
23 I.e. GWT's [[IFrameLinker >>url:http://www.gwtproject.org/javadoc/latest/com/google/gwt/core/linker/IFrameLinker.html||shape="rect"]]that "//loads the GWT module in a separate iframe//".
Richard Kreissig 32.1 24 * **Custom Linker**
uru 10.1 25 The linker extends GWT's [[DirectInstallLinker>>url:http://www.gwtproject.org/javadoc/latest/com/google/gwt/core/linker/DirectInstallLinker.html||shape="rect"]] and enables the library to be used with, for instance, Chrome Packaged Apps. According to the javadoc the linker "//adds a script tag to the iframe rather than downloading the code as a string and then installing it into the iframe//". However, when using this linker a lot of GWT's variables will be added to the global namespace.
uru 13.1 26 * **Web Worker Linker**
uru 19.1 27 The linker allows to use our library with a [[Web Worker>>url:http://en.wikipedia.org/wiki/Web_worker||shape="rect"]]. It removes GWT generations that are not required for our use case, e.g. loading of browser specific permutations. A bower component is available on GitHub (Thanks to [[automata>>url:https://github.com/automata||shape="rect"]]), a specific example further down on this page.
Richard Kreissig 32.1 28
uru 10.1 29
uru 21.1 30 == API ==
uru 10.1 31
uru 13.1 32 This documentation targets the //Default Linker// and //Custom Linker//. The //Web Worker Linker// has a slightly different API, please refer to the GitHub page for more information.
33
uru 1.1 34 {{code language="js"}}
35 $klay.layout({ graph, options, success, error });
36 {{/code}}
37
Alexander Schulz-Rosengarten 31.1 38 * **graph** - the graph to be layouted in our [[JSON Format>>doc:KIELER.Discontinued Projects.Web Services (KWebS).Graph Formats.JSON Graph Format.WebHome]].
uru 1.1 39 * **options** - a JSON object containing layout options that should be used for every hierarchy level of the graph. The same effect can be achieved by specifying the //properties //for every compound node, however, using the //options// object offers a more convenient way. Further information on available layout options can be found [[here>>url:http://layout.rtsys.informatik.uni-kiel.de:9444/Providedlayout.html?algorithm=de.cau.cs.kieler.klay.layered||shape="rect"]].
uru 3.1 40 * **success(//layouted//)** - a function to be called upon success, the layouted graph is passed as argument.
41 * **error(//obj//)** - a function to be called if an error occurs, an object is passed as argument which contains a //text// field with further information about the error.
Richard Kreissig 32.1 42
uru 8.1 43 ** (((
uru 24.1 44 (% class="wrapped" %)
uru 8.1 45 |=(((
46 Field
47 )))|=(((
48 Description
49 )))
50 |(((
51 type
52 )))|(((
53 The type of the error, e.g. an invalid graph format.
54 )))
55 |(((
56 text
57 )))|(((
58 Further description of the problem that occurred.
59 )))
uru 9.1 60 |(% colspan="1" %)(% colspan="1" %)
61 (((
62 stacktrace
63 )))|(% colspan="1" %)(% colspan="1" %)
64 (((
65 The strack trace of the Java exception, if any.
66 )))
uru 8.1 67 |=(% colspan="2" %)(% colspan="2" %)
68 (((
69 Additional Information Invalid Graph Format
70 )))
71 |(% colspan="1" %)(% colspan="1" %)
72 (((
73 value
74 )))|(% colspan="1" %)(% colspan="1" %)
75 (((
uru 9.1 76 The JSON object that caused the problem.
uru 8.1 77 )))
78 |(% colspan="1" %)(% colspan="1" %)
79 (((
80 context
81 )))|(% colspan="1" %)(% colspan="1" %)
82 (((
Richard Kreissig 32.1 83 The context of the
uru 1.1 84
uru 8.1 85 {{code language="none"}}
86 value
87 {{/code}}
88
89 , e.g. if the value is an edge, the context is the containing node.
90 )))
91 )))
92
uru 7.1 93 === Dedicated KlayJS Options ===
94
95 We offer some options that have influence of the behavior of the JavaScript interface. These options are listed below.
96
97 * **intCoordinates** - when set to {{code language="none"}}true{{/code}} all calculated layout coordinates (by default doubles) are cast to an integer value.
98
uru 1.1 99 = Example =
100
uru 3.1 101 Below is small example that executes layout on a small graph. Upon success the returned JSON is printed to the console and added to the body of the document.
102
uru 15.1 103 {{info}}
104 This example shows the usage of the Default and Custom Linker. For a Web Worker example see next example.
105 {{/info}}
106
uru 3.1 107 {{code language="js"}}
108 <!doctype html>
109 <html>
110 <head>
111 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
112 <title>KIELER Klay JS Layout Test</title>
113 <script type="text/javascript" src="klay.nocache.js"></script>
114 </head>
115 <body>
116 <h1>KIELER Klay JS Layout Test</h1>
117 </body>
118
119 <script>
120 // the 'klayinit' method is called as soon as GWT finished inititalizing
121 function klayinit() {
122
123 // assemble a graph
124 var graph = {
125 "id": "root",
uru 22.1 126 "properties": {
uru 3.1 127 "direction": "DOWN",
128 "spacing": 40
129 },
130 "children": [{
131 "id": "n1",
132 "width": 40,
133 "height": 40
134 }, {
135 "id": "n2",
136 "width": 40,
137 "height": 40
138 }, {
139 "id": "n3",
140 "width": 40,
141 "height": 40
142 }],
143 "edges": [{
144 "id": "e1",
145 "source": "n1",
146 "target": "n2"
147 },
148 {
149 "id": "e2",
150 "source": "n1",
151 "target": "n3"
152 },
153 {
154 "id": "e3",
155 "source": "n2",
156 "target": "n3"
157 }
158 ]
159 };
160
161 // execute the layout
162 $klay.layout({
163 graph: graph,
164 options: {
165 spacing: 50
166 },
167 success: function(layouted) {
168 console.log(layouted);
169 document.body.innerHTML = "<pre>" + JSON.stringify(layouted, null, " ") + "</pre>";
170 },
171 error: function(error) {
172 console.log(error);
173 document.body.innerHTML = "<pre>" + JSON.stringify(error, null, " ") + "</pre>";
174 }
175 });
176 }
177 </script>
178
179 </html>
180 {{/code}}
181
uru 13.1 182 = Example (Web Worker) =
183
184 {{code language="js"}}
185 <!doctype html>
186 <html>
187   <head>
188     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
189     <title>KIELER Klay JS Layout Test</title>
190   </head>
191   <body>
192     <h1>KIELER Klay JS Layout Test</h1>
193   </body>
194   <script>
195     (function () {
196       // assemble a graph
197       var graph = {
198         "id": "root",
199         "properties": {
200           "direction": "DOWN",
201           "spacing": 40
202         },
203         "children": [{
204           "id": "n1",
205           "width": 40,
206           "height": 40
207         }, {
208           "id": "n2",
209           "width": 40,
210           "height": 40
211         }, {
212           "id": "n3",
213           "width": 40,
214           "height": 40
215         }],
216         "edges": [{
217           "id": "e1",
218           "source": "n1",
219           "target": "n2"
220         }, {
221           "id": "e2",
222           "source": "n1",
223           "target": "n3"
224         }, {
225           "id": "e3",
226           "source": "n2",
227           "target": "n3"
228         }]
229       };
230
231       // Creates a KlayJS Web Worker
232       var worker = new Worker('klayjs_worker.js');
233
234       // Receives the layouted graph from the Web Worker
235       worker.addEventListener('message', function (e) {
236         console.log('Layouted graph:', e.data);
237       }, false);
238
239       // Sends the original graph to the Web Worker
240       worker.postMessage({
241         "graph": graph,
242         "options": {
243           "spacing": 50
244         }
245       });
246     })();
247   </script>
248 </html>
249 {{/code}}
250
251
uru 12.1 252 = See it in Action =
253
254 * [[Proofscape>>url:http://proofscape.org/||shape="rect"]] – Visualizing mathematical proofs with graphs.
uru 20.1 255 * [[NoFlo >>url:http://noflojs.org/||shape="rect"]]- Flow-Based Programming in JavaScript. Examples can be found [[here>>url:http://app.flowhub.io/||shape="rect"]] (Works best on Chrome, use the Magic Stick).
256 [[image:attach:noflo.png]]
uru 12.1 257
uru 1.1 258 = Development =
uru 3.1 259
uru 4.1 260 Git branch **gwt-export**
261
262 The GWT plugin that is used for the building proccess resides in the build folder and is called {{code language="none"}}de.cau.cs.kieler.klay.layered.gwt{{/code}}. If you want to develop on the classes of the project you want to use {{code language="none"}}ant copySrc{{/code}} to copy all required klay layered classes from the main repository.
263
uru 5.1 264 == Build Anatomie ==
uru 4.1 265
uru 5.1 266 The following figure illustrates the build process. First the ant script copies the original KIELER source code files into a dedicated GWT project ({{code language="none"}}de.cau.cs.kieler.klay.layered.gwt{{/code}}). This project contains further classes that define the JavaScript interface and the conversion from the JSON Graph format into our internal graph representation. Second, the GWT compiler is used to generate JavaScript code from the Java sources. Finally, we remove superfluous GWT elements and pack a zip archive containing the generated JavaScript library.
267
268 [[image:attach:build_anatomie.png]]
269
uru 19.1 270
271 (Thanks to [[automata>>url:https://github.com/automata||shape="rect"]])

Navigation

Quick Links

KIELER on GitHub
RTSYS Homepage