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 < 13.1 >
edited by uru
on 2014/05/22 10:43
>
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-XDNoS"/}}
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.
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"}}
35 +[[url:http://rtsys.informatik.uni-kiel.de/%7Ekieler/files/nightly/klayjs/||shape="rect"]][[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,82 @@
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 +    <!--
194 +      <script type="text/javascript" src="bower_components/klay-js/klay/klay.nocache.js"></script>
195 +       
196 +      <script src="klay-ww/klay.nocache.js"></script>
197 +      -->
198 +  </head>
199 +  <body>
200 +    <h1>KIELER Klay JS Layout Test</h1>
201 +  </body>
202 +  <script>
203 +    (function () {
204 +      // assemble a graph
205 +      var graph = {
206 +        "id": "root",
207 +        "properties": {
208 +          "direction": "DOWN",
209 +          "spacing": 40
210 +        },
211 +        "children": [{
212 +          "id": "n1",
213 +          "width": 40,
214 +          "height": 40
215 +        }, {
216 +          "id": "n2",
217 +          "width": 40,
218 +          "height": 40
219 +        }, {
220 +          "id": "n3",
221 +          "width": 40,
222 +          "height": 40
223 +        }],
224 +        "edges": [{
225 +          "id": "e1",
226 +          "source": "n1",
227 +          "target": "n2"
228 +        }, {
229 +          "id": "e2",
230 +          "source": "n1",
231 +          "target": "n3"
232 +        }, {
233 +          "id": "e3",
234 +          "source": "n2",
235 +          "target": "n3"
236 +        }]
237 +      };
238 +
239 +      // Creates a KlayJS Web Worker
240 +      var worker = new Worker('klayjs_worker.js');
241 +
242 +      // Receives the layouted graph from the Web Worker
243 +      worker.addEventListener('message', function (e) {
244 +        console.log('Layouted graph:', e.data);
245 +      }, false);
246 +
247 +      // Sends the original graph to the Web Worker
248 +      worker.postMessage({
249 +        "graph": graph,
250 +        "options": {
251 +          "spacing": 50
252 +        }
253 +      });
254 +    })();
255 +  </script>
256 +</html>
257 +{{/code}}
258 +
259 +
260 +
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  
278 +
279 += [[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 +9470830
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/9470830/JavaScript (KLayJS)

Navigation

Quick Links

KIELER on GitHub
RTSYS Homepage