Deploy preview for PR 34 🛫

pr-previews/pr-34/docs/actions-and-protocols/index.html

@@ -11,6 +11,7 @@
 <label><span class=flex><a href=../../docs/dependency-injection class=gdoc-nav__entry>Sprotty Configuration and Dependency Injection</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/svg-rendering class=gdoc-nav__entry>SVG Rendering</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/micro-layout class=gdoc-nav__entry>Micro-layout</a></span></label></li><li><input type=checkbox class=hidden>
+<label><span class=flex><a href=../../docs/styling class=gdoc-nav__entry>Styling</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/model-sources class=gdoc-nav__entry>Model Sources</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/actions-and-protocols class="gdoc-nav__entry is-active">Communication and Protocols</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/custom-interactions class=gdoc-nav__entry>Creating Custom Interactions</a></span></label></li></ul></li><li><span class=flex>Reference</span><ul class=gdoc-nav__list><li><input type=checkbox class=hidden>

pr-previews/pr-34/docs/custom-interactions/index.html

@@ -8,6 +8,7 @@
 <label><span class=flex><a href=../../docs/dependency-injection class=gdoc-nav__entry>Sprotty Configuration and Dependency Injection</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/svg-rendering class=gdoc-nav__entry>SVG Rendering</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/micro-layout class=gdoc-nav__entry>Micro-layout</a></span></label></li><li><input type=checkbox class=hidden>
+<label><span class=flex><a href=../../docs/styling class=gdoc-nav__entry>Styling</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/model-sources class=gdoc-nav__entry>Model Sources</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/actions-and-protocols class=gdoc-nav__entry>Communication and Protocols</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/custom-interactions class="gdoc-nav__entry is-active">Creating Custom Interactions</a></span></label></li></ul></li><li><span class=flex>Reference</span><ul class=gdoc-nav__list><li><input type=checkbox class=hidden>

pr-previews/pr-34/docs/dependency-injection/index.html

@@ -14,6 +14,7 @@
 <label><span class=flex><a href=../../docs/dependency-injection class="gdoc-nav__entry is-active">Sprotty Configuration and Dependency Injection</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/svg-rendering class=gdoc-nav__entry>SVG Rendering</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/micro-layout class=gdoc-nav__entry>Micro-layout</a></span></label></li><li><input type=checkbox class=hidden>
+<label><span class=flex><a href=../../docs/styling class=gdoc-nav__entry>Styling</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/model-sources class=gdoc-nav__entry>Model Sources</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/actions-and-protocols class=gdoc-nav__entry>Communication and Protocols</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/custom-interactions class=gdoc-nav__entry>Creating Custom Interactions</a></span></label></li></ul></li><li><span class=flex>Reference</span><ul class=gdoc-nav__list><li><input type=checkbox class=hidden>

pr-previews/pr-34/docs/features/index.html

@@ -11,6 +11,7 @@
 <label><span class=flex><a href=../../docs/dependency-injection class=gdoc-nav__entry>Sprotty Configuration and Dependency Injection</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/svg-rendering class=gdoc-nav__entry>SVG Rendering</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/micro-layout class=gdoc-nav__entry>Micro-layout</a></span></label></li><li><input type=checkbox class=hidden>
+<label><span class=flex><a href=../../docs/styling class=gdoc-nav__entry>Styling</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/model-sources class=gdoc-nav__entry>Model Sources</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/actions-and-protocols class=gdoc-nav__entry>Communication and Protocols</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/custom-interactions class=gdoc-nav__entry>Creating Custom Interactions</a></span></label></li></ul></li><li><span class=flex>Reference</span><ul class=gdoc-nav__list><li><input type=checkbox class=hidden>

pr-previews/pr-34/docs/getting-started/index.html

@@ -14,6 +14,7 @@
 <label><span class=flex><a href=../../docs/dependency-injection class=gdoc-nav__entry>Sprotty Configuration and Dependency Injection</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/svg-rendering class=gdoc-nav__entry>SVG Rendering</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/micro-layout class=gdoc-nav__entry>Micro-layout</a></span></label></li><li><input type=checkbox class=hidden>
+<label><span class=flex><a href=../../docs/styling class=gdoc-nav__entry>Styling</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/model-sources class=gdoc-nav__entry>Model Sources</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/actions-and-protocols class=gdoc-nav__entry>Communication and Protocols</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/custom-interactions class=gdoc-nav__entry>Creating Custom Interactions</a></span></label></li></ul></li><li><span class=flex>Reference</span><ul class=gdoc-nav__list><li><input type=checkbox class=hidden>

pr-previews/pr-34/docs/index.html

@@ -8,6 +8,7 @@
 <label><span class=flex><a href=../docs/dependency-injection class=gdoc-nav__entry>Sprotty Configuration and Dependency Injection</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../docs/svg-rendering class=gdoc-nav__entry>SVG Rendering</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../docs/micro-layout class=gdoc-nav__entry>Micro-layout</a></span></label></li><li><input type=checkbox class=hidden>
+<label><span class=flex><a href=../docs/styling class=gdoc-nav__entry>Styling</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../docs/model-sources class=gdoc-nav__entry>Model Sources</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../docs/actions-and-protocols class=gdoc-nav__entry>Communication and Protocols</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../docs/custom-interactions class=gdoc-nav__entry>Creating Custom Interactions</a></span></label></li></ul></li><li><span class=flex>Reference</span><ul class=gdoc-nav__list><li><input type=checkbox class=hidden>

pr-previews/pr-34/docs/introduction/index.html

@@ -14,6 +14,7 @@
 <label><span class=flex><a href=../../docs/dependency-injection class=gdoc-nav__entry>Sprotty Configuration and Dependency Injection</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/svg-rendering class=gdoc-nav__entry>SVG Rendering</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/micro-layout class=gdoc-nav__entry>Micro-layout</a></span></label></li><li><input type=checkbox class=hidden>
+<label><span class=flex><a href=../../docs/styling class=gdoc-nav__entry>Styling</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/model-sources class=gdoc-nav__entry>Model Sources</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/actions-and-protocols class=gdoc-nav__entry>Communication and Protocols</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/custom-interactions class=gdoc-nav__entry>Creating Custom Interactions</a></span></label></li></ul></li><li><span class=flex>Reference</span><ul class=gdoc-nav__list><li><input type=checkbox class=hidden>

pr-previews/pr-34/docs/micro-layout/index.html

@@ -11,6 +11,7 @@
 <label><span class=flex><a href=../../docs/dependency-injection class=gdoc-nav__entry>Sprotty Configuration and Dependency Injection</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/svg-rendering class=gdoc-nav__entry>SVG Rendering</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/micro-layout class="gdoc-nav__entry is-active">Micro-layout</a></span></label></li><li><input type=checkbox class=hidden>
+<label><span class=flex><a href=../../docs/styling class=gdoc-nav__entry>Styling</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/model-sources class=gdoc-nav__entry>Model Sources</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/actions-and-protocols class=gdoc-nav__entry>Communication and Protocols</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/custom-interactions class=gdoc-nav__entry>Creating Custom Interactions</a></span></label></li></ul></li><li><span class=flex>Reference</span><ul class=gdoc-nav__list><li><input type=checkbox class=hidden>
@@ -277,5 +278,5 @@
 <a data-clipboard-text=/docs/micro-layout/#layouting-nested-nodes class="gdoc-page__anchor clip flex align-center" title="Anchor to: Layouting Nested Nodes" aria-label="Anchor to: Layouting Nested Nodes" href=#layouting-nested-nodes><svg class="gdoc-icon gdoc_link"><use xlink:href="#gdoc_link"/></svg></a></h2></div><p>By design, nested <code>SNode</code> do not obey the <code>layout</code> property of an <code>SNode</code> parent. This is because nested nodes are usually used to represent a graph hierarchy, and the layout of the children of a node is not relevant for the structure of the graph. In general, the position of those nodes should be the responsibility of the macro-layout engine.</p><p>However, if you still need the micro-layout engine to control the position of nested nodes, this can be achieved by enabling the <code>layoutableChildFeature</code> in the inversify container.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-typescript data-lang=typescript><span class=line><span class=cl><span class=nx>configureModelElement</span><span class=p>(</span><span class=nx>context</span><span class=p>,</span> <span class=s1>&#39;your node type&#39;</span><span class=p>,</span> <span class=nx>SNodeImpl</span><span class=p>,</span> <span class=nx>YourNodeView</span><span class=p>,</span> <span class=p>{</span><span class=nx>enable</span><span class=o>:</span> <span class=p>[</span><span class=nx>layoutableChildFeature</span><span class=p>]})</span>
 </span></span></code></pre></div></article><div class="gdoc-page__footer flex flex-wrap justify-between"><span class=gdoc-page__nav><a class="gdoc-page__nav--prev flex align-center" href=../../docs/svg-rendering/ title="SVG Rendering"><i class=gdoc-icon>gdoc_arrow_left_alt</i>
 SVG Rendering</a></span>
-<span class=gdoc-page__nav><a class="gdoc-page__nav--next flex align-center" href=../../docs/model-sources/ title="Model Sources">Model Sources
+<span class=gdoc-page__nav><a class="gdoc-page__nav--next flex align-center" href=../../docs/styling/ title=Styling>Styling
 <i class=gdoc-icon>gdoc_arrow_right_alt</i></a></span></div></div></main><footer class=gdoc-footer><nav class="container flex"><div><section class="flex flex-wrap align-center"><span class="gdoc-footer__item gdoc-footer__item--row">Built with <a href=https://gohugo.io/ class=gdoc-footer__link>Hugo</a> and<svg class="gdoc-icon gdoc_heart"><use xlink:href="#gdoc_heart"/></svg></span></section></div><div class="flex flex-25 justify-end"><span class="gdoc-footer__item text-right"><a class="gdoc-footer__link fake-link" href=# aria-label="Back to top"><svg class="gdoc-icon gdoc_keyboard_arrow_up"><use xlink:href="#gdoc_keyboard_arrow_up"/></svg><span class=hidden-mobile>Back to top</span></a></span></div></nav></footer></div><script defer src=../../js/search-5a80054d.bundle.min.js></script></body></html>

pr-previews/pr-34/docs/model-sources/index.html

@@ -8,6 +8,7 @@
 <label><span class=flex><a href=../../docs/dependency-injection class=gdoc-nav__entry>Sprotty Configuration and Dependency Injection</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/svg-rendering class=gdoc-nav__entry>SVG Rendering</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/micro-layout class=gdoc-nav__entry>Micro-layout</a></span></label></li><li><input type=checkbox class=hidden>
+<label><span class=flex><a href=../../docs/styling class=gdoc-nav__entry>Styling</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/model-sources class="gdoc-nav__entry is-active">Model Sources</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/actions-and-protocols class=gdoc-nav__entry>Communication and Protocols</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/custom-interactions class=gdoc-nav__entry>Creating Custom Interactions</a></span></label></li></ul></li><li><span class=flex>Reference</span><ul class=gdoc-nav__list><li><input type=checkbox class=hidden>
@@ -116,7 +117,7 @@
 </span></span><span class=line><span class=cl><span class=p>}</span>
 </span></span></code></pre></div><p>Following the example above, first we need to extend <code>DiagramServerProxy</code>. This already gives us most of our needed functionality and makes this proxy a <code>ModelSource</code>.
 Then we need to listen for incoming messages and pass them to the <code>messageReceived()</code> function, which deserializes and passes them to the <code>ActionDispatcher</code>.
-Lastly, we need to implement the <code>sendMessage()</code> method to allow actions coming from the <code>ActionDispatcher</code> to be transferred to the <code>DiagramServer</code>.</p><p>Now our custom model source proxy is able to propagate all actions between the <code>ActionDispatcher</code> and our <code>DiagramServer</code> running in the worker, which gives us access to all of sprotty&rsquo;s functionality.</p></article><div class="gdoc-page__footer flex flex-wrap justify-between"><span class=gdoc-page__nav><a class="gdoc-page__nav--prev flex align-center" href=../../docs/micro-layout/ title=Micro-layout><i class=gdoc-icon>gdoc_arrow_left_alt</i>
-Micro-layout</a></span>
+Lastly, we need to implement the <code>sendMessage()</code> method to allow actions coming from the <code>ActionDispatcher</code> to be transferred to the <code>DiagramServer</code>.</p><p>Now our custom model source proxy is able to propagate all actions between the <code>ActionDispatcher</code> and our <code>DiagramServer</code> running in the worker, which gives us access to all of sprotty&rsquo;s functionality.</p></article><div class="gdoc-page__footer flex flex-wrap justify-between"><span class=gdoc-page__nav><a class="gdoc-page__nav--prev flex align-center" href=../../docs/styling/ title=Styling><i class=gdoc-icon>gdoc_arrow_left_alt</i>
+Styling</a></span>
 <span class=gdoc-page__nav><a class="gdoc-page__nav--next flex align-center" href=../../docs/actions-and-protocols/ title="Communication and Protocols">Communication and Protocols
 <i class=gdoc-icon>gdoc_arrow_right_alt</i></a></span></div></div></main><footer class=gdoc-footer><nav class="container flex"><div><section class="flex flex-wrap align-center"><span class="gdoc-footer__item gdoc-footer__item--row">Built with <a href=https://gohugo.io/ class=gdoc-footer__link>Hugo</a> and<svg class="gdoc-icon gdoc_heart"><use xlink:href="#gdoc_heart"/></svg></span></section></div><div class="flex flex-25 justify-end"><span class="gdoc-footer__item text-right"><a class="gdoc-footer__link fake-link" href=# aria-label="Back to top"><svg class="gdoc-icon gdoc_keyboard_arrow_up"><use xlink:href="#gdoc_keyboard_arrow_up"/></svg><span class=hidden-mobile>Back to top</span></a></span></div></nav></footer></div><script defer src=../../js/search-5a80054d.bundle.min.js></script></body></html>

pr-previews/pr-34/docs/overview/index.html

@@ -8,6 +8,7 @@
 <label><span class=flex><a href=../../docs/dependency-injection class=gdoc-nav__entry>Sprotty Configuration and Dependency Injection</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/svg-rendering class=gdoc-nav__entry>SVG Rendering</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/micro-layout class=gdoc-nav__entry>Micro-layout</a></span></label></li><li><input type=checkbox class=hidden>
+<label><span class=flex><a href=../../docs/styling class=gdoc-nav__entry>Styling</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/model-sources class=gdoc-nav__entry>Model Sources</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/actions-and-protocols class=gdoc-nav__entry>Communication and Protocols</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/custom-interactions class=gdoc-nav__entry>Creating Custom Interactions</a></span></label></li></ul></li><li><span class=flex>Reference</span><ul class=gdoc-nav__list><li><input type=checkbox class=hidden>

pr-previews/pr-34/docs/smodel/index.html

@@ -11,6 +11,7 @@
 <label><span class=flex><a href=../../docs/dependency-injection class=gdoc-nav__entry>Sprotty Configuration and Dependency Injection</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/svg-rendering class=gdoc-nav__entry>SVG Rendering</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/micro-layout class=gdoc-nav__entry>Micro-layout</a></span></label></li><li><input type=checkbox class=hidden>
+<label><span class=flex><a href=../../docs/styling class=gdoc-nav__entry>Styling</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/model-sources class=gdoc-nav__entry>Model Sources</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/actions-and-protocols class=gdoc-nav__entry>Communication and Protocols</a></span></label></li><li><input type=checkbox class=hidden>
 <label><span class=flex><a href=../../docs/custom-interactions class=gdoc-nav__entry>Creating Custom Interactions</a></span></label></li></ul></li><li><span class=flex>Reference</span><ul class=gdoc-nav__list><li><input type=checkbox class=hidden>