Changes for page JavaScript (KLayJS)

Last modified by Richard Kreissig on 2023/09/14 10:14
<
From version < 12.1 >
edited by uru
on 2014/04/28 06:14
To version < 14.1 >
edited by uru
on 2014/05/22 10:45
>
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,7 +1,7 @@
1 1  {{panel title="Project Overview" borderStyle="dashed"}}
2 2  Responsible:
3 3  
4 -* {{mention reference="XWiki.uru" style="FULL_NAME" anchor="XWiki-uru-INgVT"/}}
4 +* {{mention reference="XWiki.uru" style="FULL_NAME" anchor="XWiki-uru-UqwhS"/}}
5 5  {{/panel}}
6 6  
7 7  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.
... ... @@ -12,12 +12,14 @@
12 12  
13 13  = Downloads =
14 14  
15 -We deploy two versions of the JavaScript library that only differ in the use of the specific [[GWT Linker>>url:http://www.gwtproject.org/javadoc/latest/com/google/gwt/core/ext/Linker.html||shape="rect"]].
15 +We deploy three versions of the JavaScript library that only differ in the use of the specific [[GWT Linker>>url:http://www.gwtproject.org/javadoc/latest/com/google/gwt/core/ext/Linker.html||shape="rect"]].
16 16  
17 17  * **Standard Linker**
18 18  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//".
19 19  * **Custom Linker**
20 20  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.
21 +* **Web Worker Linker**
22 +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, a specific example further down on this page.
21 21  
22 22  
23 23  
... ... @@ -29,8 +29,14 @@
29 29  [[http:~~/~~/rtsys.informatik.uni-kiel.de/~~~~kieler/files/nightly/klayjs/>>url:http://rtsys.informatik.uni-kiel.de/~~kieler/files/nightly/klayjs/||shape="rect"]]
30 30  {{/panel}}
31 31  
34 +{{panel title="Bower Component on GitGub (Web Worker)"}}
35 +[[https:~~/~~/github.com/automata/klay-js>>url:https://github.com/automata/klay-js||shape="rect"]]
36 +{{/panel}}
37 +
32 32  = API =
33 33  
40 +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.
41 +
34 34  {{code language="js"}}
35 35  $klay.layout({ graph, options, success, error });
36 36  {{/code}}
... ... @@ -174,6 +174,77 @@
174 174  </html>
175 175  {{/code}}
176 176  
185 += Example (Web Worker) =
186 +
187 +{{code language="js"}}
188 +<!doctype html>
189 +<html>
190 +  <head>
191 +    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
192 +    <title>KIELER Klay JS Layout Test</title>
193 +  </head>
194 +  <body>
195 +    <h1>KIELER Klay JS Layout Test</h1>
196 +  </body>
197 +  <script>
198 +    (function () {
199 +      // assemble a graph
200 +      var graph = {
201 +        "id": "root",
202 +        "properties": {
203 +          "direction": "DOWN",
204 +          "spacing": 40
205 +        },
206 +        "children": [{
207 +          "id": "n1",
208 +          "width": 40,
209 +          "height": 40
210 +        }, {
211 +          "id": "n2",
212 +          "width": 40,
213 +          "height": 40
214 +        }, {
215 +          "id": "n3",
216 +          "width": 40,
217 +          "height": 40
218 +        }],
219 +        "edges": [{
220 +          "id": "e1",
221 +          "source": "n1",
222 +          "target": "n2"
223 +        }, {
224 +          "id": "e2",
225 +          "source": "n1",
226 +          "target": "n3"
227 +        }, {
228 +          "id": "e3",
229 +          "source": "n2",
230 +          "target": "n3"
231 +        }]
232 +      };
233 +
234 +      // Creates a KlayJS Web Worker
235 +      var worker = new Worker('klayjs_worker.js');
236 +
237 +      // Receives the layouted graph from the Web Worker
238 +      worker.addEventListener('message', function (e) {
239 +        console.log('Layouted graph:', e.data);
240 +      }, false);
241 +
242 +      // Sends the original graph to the Web Worker
243 +      worker.postMessage({
244 +        "graph": graph,
245 +        "options": {
246 +          "spacing": 50
247 +        }
248 +      });
249 +    })();
250 +  </script>
251 +</html>
252 +{{/code}}
253 +
254 +
255 +
177 177  = See it in Action =
178 178  
179 179  * [[Proofscape>>url:http://proofscape.org/||shape="rect"]] – Visualizing mathematical proofs with graphs.
... ... @@ -191,3 +191,5 @@
191 191  [[image:attach:build_anatomie.png]]
192 192  
193 193  
273 +
274 += [[https:~~/~~/github.com/automata/klay-js>>url:https://github.com/automata/klay-js||shape="rect"]] =
Confluence.Code.ConfluencePageClass[0]
Id
... ... @@ -1,1 +1,1 @@
1 -9470828
1 +9470832
URL
... ... @@ -1,1 +1,1 @@
1 -https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/KIELER/pages/9470828/JavaScript (KLayJS)
1 +https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/KIELER/pages/9470832/JavaScript (KLayJS)

Navigation

Quick Links

KIELER on GitHub
RTSYS Homepage