| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
| <link rel="icon" type="image/svg+xml" href="img/elk_fav.svg"> |
| |
| |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> |
| <link rel="stylesheet" href="https://www.eclipse.org/elk/css/elk.css"> |
| <link rel="stylesheet" href="https://www.eclipse.org/elk/css/prism.css"> |
| |
| <title>Advanced Configuration (ELK)</title> |
| |
| |
| |
| </head> |
| <body> |
| |
| <nav class="navbar navbar-expand-lg navbar-dark"> |
| <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> |
| <span class="navbar-toggler-icon"></span> |
| </button> |
| <a class="navbar-brand" href="https://www.eclipse.org/elk/"> |
| <img src="img/elk_small_light.svg" height="30" class="d-inline-block align-top mr-1" alt=""> |
| Eclipse Layout Kernel |
| </a> |
| <div class="collapse navbar-collapse" id="navbarCollapse"> |
| <ul class="navbar-nav mr-auto"> |
| |
| |
| |
| |
| <li class="nav-item"> |
| <a class="nav-link" href="../../../downloads.html">Downloads</a> |
| </li> |
| |
| |
| <li class="nav-item"> |
| <a class="nav-link" href="../../../gettingstarted.html">Getting Started</a> |
| </li> |
| |
| |
| <li class="nav-item active"> |
| <a class="nav-link" href="../../../documentation.html">Documentation <span class="sr-only">(current)</span></a> |
| </li> |
| |
| |
| <li class="nav-item"> |
| <a class="nav-link" href="../../../reference.html">Reference</a> |
| </li> |
| |
| |
| <li class="nav-item"> |
| <a class="nav-link" href="../../../support.html">Support</a> |
| </li> |
| |
| |
| <li class="nav-item"> |
| <a class="nav-link" href="https://github.com/eclipse/elk">GitHub</a> |
| </li> |
| |
| </ul> |
| </div> |
| </nav> |
| |
| |
| <div class="container px-3 py-5"> |
| |
| |
| <div class="row"> |
| <div class="col-sm-9"> |
| <h1>Advanced Configuration</h1> |
| |
| <p>What we have learned so far about how automatic layout in Eclipse works was comparatively straightforward: the diagram layout engine looks for a diagram layout connector to get its hands at a configured ElkGraph, invokes the recursive graph layout engine, and asks the diagram layout connector to apply the results back to the original diagram. As you will have guessed, things <em>can</em> become quite a bit more complex than that.</p> |
| <p>On this page, we will look at customizing how layout runs are executed, including more advanced options as well as building up chains of layout algorithms executed in series as part of a single layout run.</p> |
| <h2 id="parameters">Parameters</h2> |
| <p>The <code>Parameters</code> class is used to control how layout is executed on a graph. So far, we have only looked at doing a single layout pass over a graph. Parameters allow to add further layout runs afterwards, with the result of one layout run fed into the next. To see why this may be interesting, let’s take a layout algorithm that places nodes just the way you like it, but produces edge crossings or slanted edges. Parameters would allow us to add a specialized edge routing algorithm that takes care of producing proper edge routes.</p> |
| <p>Let us examine the <code>Parameters</code> class a bit more closely. Here’s what it can do:</p> |
| <ul> |
| <li> |
| <p>It lets you specify layout runs. Of course, each layout algorithm may expect the graph to be configured differently, so each layout run is specified by adding a <code>LayoutConfigurator</code> which is used to configure layout options on the graph before the next layout algorithm is run. We will examine layout configurators in a bit more detail below.</p> |
| </li> |
| <li> |
| <p>ELK distinguishes layout options that layout algorithms care about from layout options that may have more meaning for the layout engine or your layout connectors. The latter are called <em>global settings</em> and are stored in the parameters as well. This may for example include settings such as whether to animate the application of layout results, so that your diagram’s elements neatly morph into their new places. Of course you are free to introduce your own global settings and feed them into your parameters.</p> |
| </li> |
| </ul> |
| <p>Let’s come back to layout configurators and see how they work. Basically, each layout configurator added to your parameters can set an arbitrary number of layout options on different elements of your ElkGraph. Also, it can be configured to clear all previous configuration stored in the graph. To specify the options to set, there are two possibilities. First, you can specify concrete objects in the graph structure to set options on. And second, you can specify whole classes of graph elements to set options on. Here’s some example code that should make everything a bit clearer:</p> |
| <div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-java" data-lang="java">LayoutConfigurator configurator <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> LayoutConfigurator<span style="color:#f92672">();</span> |
| |
| <span style="color:#75715e">// Configure layout options for a concrete graph object |
| </span><span style="color:#75715e"></span>configurator<span style="color:#f92672">.</span><span style="color:#a6e22e">configure</span><span style="color:#f92672">(</span>myVerySpecialNode<span style="color:#f92672">)</span> |
| <span style="color:#f92672">.</span><span style="color:#a6e22e">setProperty</span><span style="color:#f92672">(</span>CoreOptions<span style="color:#f92672">.</span><span style="color:#a6e22e">INTERACTIVE</span><span style="color:#f92672">,</span> <span style="color:#66d9ef">true</span><span style="color:#f92672">)</span> |
| <span style="color:#f92672">.</span><span style="color:#a6e22e">setProperty</span><span style="color:#f92672">(</span>CoreOptions<span style="color:#f92672">.</span><span style="color:#a6e22e">PORT_CONSTRAINTS</span><span style="color:#f92672">,</span> PortConstraints<span style="color:#f92672">.</span><span style="color:#a6e22e">FIXED</span><span style="color:#f92672">);</span> |
| |
| <span style="color:#75715e">// Configure layout options for all nodes |
| </span><span style="color:#75715e"></span>configurator<span style="color:#f92672">.</span><span style="color:#a6e22e">configure</span><span style="color:#f92672">(</span>KNode<span style="color:#f92672">.</span><span style="color:#a6e22e">class</span><span style="color:#f92672">)</span> |
| <span style="color:#f92672">.</span><span style="color:#a6e22e">setProperty</span><span style="color:#f92672">(</span>CoreOptions<span style="color:#f92672">.</span><span style="color:#a6e22e">ALGORITHM</span><span style="color:#f92672">,</span> <span style="color:#e6db74">"org.eclipse.elk.layered"</span><span style="color:#f92672">)</span> |
| <span style="color:#f92672">.</span><span style="color:#a6e22e">setProperty</span><span style="color:#f92672">(</span>CoreOptions<span style="color:#f92672">.</span><span style="color:#a6e22e">SPACING_NODE</span><span style="color:#f92672">,</span> 30<span style="color:#f92672">.</span><span style="color:#a6e22e">0f</span><span style="color:#f92672">);</span> |
| </code></pre></div><p>This configurator can then be put into a <code>Parameters</code> object that can be passed to the <code>DiagramLayoutEngine</code>:</p> |
| <div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-java" data-lang="java">DiagramLayoutEngine<span style="color:#f92672">.</span><span style="color:#a6e22e">Parameters</span> params <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> DiagramLayoutEngine<span style="color:#f92672">.</span><span style="color:#a6e22e">Parameters</span><span style="color:#f92672">();</span> |
| params<span style="color:#f92672">.</span><span style="color:#a6e22e">addLayoutRun</span><span style="color:#f92672">(</span>configurator<span style="color:#f92672">);</span> |
| DiagramLayoutEngine<span style="color:#f92672">.</span><span style="color:#a6e22e">invokeLayout</span><span style="color:#f92672">(</span>workbenchPart<span style="color:#f92672">,</span> diagramPart<span style="color:#f92672">,</span> params<span style="color:#f92672">);</span> |
| </code></pre></div><p>The concept of using layout configurators to set layout options on your ElkGraph seems to contradict what we have said so far: that the layout connector is responsible for producing an ElkGraph with options already set. In fact, these do not contradict each other, but are simply two different (but combinable) ways of doing things. There are basically three ways of going about it:</p> |
| <ol> |
| <li> |
| <p>Having your layout connector set all options on your ElkGraph, and not using any layout configurator. This is the approach we first learned about.</p> |
| </li> |
| <li> |
| <p>Having your layout connector set only some of the options on your ElkGraph and using at least one layout configurator to fill in the rest.</p> |
| </li> |
| <li> |
| <p>Having your layout connector set no options at all and using at least one layout configurator to configure everything.</p> |
| </li> |
| </ol> |
| <p>In most cases, the first approach will work perfectly fine. Once your layout process consists of more than one layout run, however, you will probably want to go with either option 2 or option 3. Which of these you take depends on what layout options the involved layout algorithms expect.</p> |
| <h2 id="layout-configuration-management">Layout Configuration Management</h2> |
| <p><strong>TODO:</strong> Explain what the layout configuration manager does and what layout configuration stores do.</p> |
| |
| </div> |
| |
| <div class="secnav col-sm-3"> |
| <ul> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="../../../documentation/tooldevelopers.html"> |
| <li class="navlevel-1"> |
| Tool Developers |
| </li> |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="../../../documentation/tooldevelopers/graphdatastructure.html"> |
| <li class="navlevel-2"> |
| Graph Data Structure |
| </li> |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="../../../documentation/tooldevelopers/graphdatastructure/coordinatesystem.html"> |
| <li class="navlevel-3"> |
| Coordinate System |
| </li> |
| </a> |
| |
| |
| |
| <a href="../../../documentation/tooldevelopers/graphdatastructure/layoutoptions.html"> |
| <li class="navlevel-3"> |
| Layout Options |
| </li> |
| </a> |
| |
| |
| |
| <a href="../../../documentation/tooldevelopers/graphdatastructure/jsonformat.html"> |
| <li class="navlevel-3"> |
| JSON Format |
| </li> |
| </a> |
| |
| |
| |
| <a href="../../../documentation/tooldevelopers/graphdatastructure/elktextformat.html"> |
| <li class="navlevel-3"> |
| ELK Text Format |
| </li> |
| </a> |
| |
| |
| |
| |
| |
| |
| <a href="../../../documentation/tooldevelopers/usingalgorithmsdirectly.html"> |
| <li class="navlevel-2"> |
| Using Algorithms Directly |
| </li> |
| </a> |
| |
| |
| |
| <a href="../../../documentation/tooldevelopers/usingplainjavalayout.html"> |
| <li class="navlevel-2"> |
| Using Plain Java Layout |
| </li> |
| </a> |
| |
| |
| |
| <a href="../../../documentation/tooldevelopers/usingeclipselayout.html"> |
| <li class="navlevel-2"> |
| Using Eclipse Layout |
| </li> |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="../../../documentation/tooldevelopers/usingeclipselayout/connectingtoelk.html"> |
| <li class="navlevel-3"> |
| Connecting to ELK |
| </li> |
| </a> |
| |
| |
| |
| <a href="../../../documentation/tooldevelopers/usingeclipselayout/advancedconfiguration.html"> |
| <li class="navlevel-3 active"> |
| Advanced Configuration |
| </li> |
| </a> |
| |
| |
| |
| <a href="../../../documentation/tooldevelopers/usingeclipselayout/layoutviewsupport.html"> |
| <li class="navlevel-3"> |
| Layout View Support |
| </li> |
| </a> |
| |
| |
| |
| <a href="../../../documentation/tooldevelopers/usingeclipselayout/dependencyinjection.html"> |
| <li class="navlevel-3"> |
| Dependency Injection |
| </li> |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="../../../documentation/algorithmdevelopers.html"> |
| <li class="navlevel-1"> |
| Algorithm Developers |
| </li> |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="../../../documentation/algorithmdevelopers/gettingeclipseready.html"> |
| <li class="navlevel-2"> |
| Getting Eclipse Ready |
| </li> |
| </a> |
| |
| |
| |
| <a href="../../../documentation/algorithmdevelopers/creatinganewproject.html"> |
| <li class="navlevel-2"> |
| Creating a New Project |
| </li> |
| </a> |
| |
| |
| |
| <a href="../../../documentation/algorithmdevelopers/metadatalanguage.html"> |
| <li class="navlevel-2"> |
| ELK Metadata Language |
| </li> |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="../../../documentation/algorithmdevelopers/metadatalanguage/automaticbuilds.html"> |
| <li class="navlevel-3"> |
| Automatic Builds |
| </li> |
| </a> |
| |
| |
| |
| |
| |
| |
| <a href="../../../documentation/algorithmdevelopers/algorithmimplementation.html"> |
| <li class="navlevel-2"> |
| Algorithm Implementation |
| </li> |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="../../../documentation/algorithmdevelopers/algorithmimplementation/algorithmstructure.html"> |
| <li class="navlevel-3"> |
| Structuring Algorithms |
| </li> |
| </a> |
| |
| |
| |
| |
| |
| |
| <a href="../../../documentation/algorithmdevelopers/algorithmdebugging.html"> |
| <li class="navlevel-2"> |
| Algorithm Debugging |
| </li> |
| </a> |
| |
| |
| |
| <a href="../../../documentation/algorithmdevelopers/randomgraphs.html"> |
| <li class="navlevel-2"> |
| Random Graph Generation |
| </li> |
| </a> |
| |
| |
| |
| <a href="../../../documentation/algorithmdevelopers/unittesting.html"> |
| <li class="navlevel-2"> |
| Unit Tests |
| </li> |
| </a> |
| |
| |
| |
| |
| |
| |
| <a href="../../../documentation/contributors.html"> |
| <li class="navlevel-1"> |
| ELK Contributors |
| </li> |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="../../../documentation/contributors/developmentsetup.html"> |
| <li class="navlevel-2"> |
| Development Setup |
| </li> |
| </a> |
| |
| |
| |
| <a href="../../../documentation/contributors/developmentworkflow.html"> |
| <li class="navlevel-2"> |
| Development Workflow |
| </li> |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| |
| <a href="../../../documentation/contributors/developmentworkflow/installingwithoomph.html"> |
| <li class="navlevel-3"> |
| Installing With Oomph |
| </li> |
| </a> |
| |
| |
| |
| |
| |
| |
| <a href="../../../documentation/contributors/buildingelk.html"> |
| <li class="navlevel-2"> |
| Building ELK |
| </li> |
| </a> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| </ul> |
| |
| <div class="incubation-egg"> |
| <a href="https://www.eclipse.org/projects/what-is-incubation.php"> |
| <img src="https://www.eclipse.org/images/egg-incubation.png" alt="Incubation" /> |
| </a> |
| </div> |
| </div> |
| |
| </div> |
| |
| </div> |
| <footer role="contentinfo" class="footer"> |
| <div class="container"> |
| <div class="row"> |
| <div class="col"> |
| <span class="hidden-print"> |
| <a href="https://www.eclipse.org"><img class="logo-eclipse-white img-responsive" alt="logo" src="../../../img/eclipse_foundation_logo.svg"/></a> |
| </span> |
| </div> |
| <div class="col"> |
| |
| </div> |
| </div> |
| <div class="row"> |
| <div class="col hidden-print"> |
| <a href="http://www.eclipse.org/">Eclipse Foundation</a><br/> |
| <a href="http://www.eclipse.org/legal/privacy.php">Privacy Policy</a><br/> |
| <a href="http://www.eclipse.org/legal/termsofuse.php">Website Terms of Use</a><br/> |
| <a href="http://www.eclipse.org/legal/copyright.php">Copyright Agent</a><br/> |
| <a href="http://www.eclipse.org/legal">Legal</a> |
| </div> |
| <div class="col"> |
| <p class="copyright-text">Copyright © Eclipse Foundation, Inc. All Rights Reserved.</p> |
| </div> |
| </div> |
| </div> |
| |
| </footer> |
| |
| <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> |
| <script src="https://www.eclipse.org/elk/js/prism.js"></script> |
| |
| |
| <script>$(function() { $('table').addClass('table'); })</script> |
| </body> |
| </html> |
