Page History

...

Info

title	Tips

The following tips might come in handy...

Read the documentation of the KGraph and KLayoutData meta models. The input to the layout algorithm is a KNode that has child KNodes for every node in the graph. Iterate over these nodes by iterating over the getChildren() list of the parentNode argument.

Retrieve the size of a node and set its position later using the following code:

Code Block

language	java

KShapeLayout nodeLayout = node.getData(KShapeLayout.class);

// Retrieving the size
float width = nodeLayout.getWidth();
float height = nodeLayout.getHeight();

// Setting the position
nodeLayout.setXpos(x);
nodeLayout.setYpos(y);

objectSpacing is the spacing to be left between each pair of nodes.
borderSpacing is the spacing to be left to the borders of the drawing. The top left node's coordinates must therefore be at least (borderSpacing, borderSpacing).
At the end of the method, set the width and height of parentLayout such that it is large enough to hold the whole drawing, including borders.
A complete layout algorithm will of course also route the edges between the nodes. Ignore that for now – you will do this at a later step.

This exercise will introduce the usage of the Eclipse Plugin Development Environment for developing new layout algorithms to be used in Eclipse diagram editors. Replace each <login> by your own login name (e.g. msp), and each <Login> by your login name with capitalized first letter (e.g. Msp). For any questions contact msp.

...

Before you can test your layout code, you will have to register your new layout provider with KIML.

Open the META-INF/MANIFEST.MF file again and switch to the Extensions tab.
Add an extension for de.cau.cs.kieler.kiml.layout.layoutProviders.
Right-click the extension → New → layoutProviderSet name to <Login> Test Layouter, class to de.cau.cs.rtprak.<login>.tutorial2.<Login>LayoutProviderand click New > layoutAlgorithm.
Set the name to Login_name Test Layouter and the class to your layout provider class name.
Right-click the new layoutProvider → New → knownOption, set option to denew layoutAlgorithm and click New > knownOption. Set option to de.cau.cs.kieler.spacing.
Add another knownOption, set to deanother knownOption for de.cau.cs.kieler.borderSpacingRun → Run Configurations... → right-click Eclipse Application → New
Name: Layout
For testing the layouter, a new workspace location will be created; you may configure its destination in Workspace Data → Location
Add the program arguments -debug -consoleLog in the Arguments tab.

Go to

Plug-ins

tab, select Launch with:

.

Save the editor.

We will now have to add a new run configuration that will start an Eclipse instance with your layout code loaded into the application, ready to be used.

Click Run > Debug Configurations...
Right-click Eclipse Application and click New. Set the configuration's name to Layout Test.
In the Arguments tab, make sure the the program arguments include -debug and -consoleLog.
On the Plug-ins tab, set Launch with to plug-ins selected below only. Click Deselect All, activate Workspace checkbox, check the Workspace item in the tree, and click Add Required Plug-ins, Apply, Run.
Click Apply to save your changes and then Debug to start an Eclipse instance to test with.

Test the layouter in

...

your new Eclipse instance:

Click New → > Project... → General → Project, name test > General > Project and set the project name to something like Test.
Right-click test project → New → Other... → KEG Diagram (TODO: if graphs shall be created in another way, describe it here)
Create a graph using the palette on the right.
Window → Show View → Other... → KIELER → Layout
While the graph diagram is open, set Layout Provider or Type in the Layout view to <Login> Test Layouter.
Open the additional views Layout Graph and Layout Time.

Trigger layout with the

KIELER Layout

button in the toolbar or

the new project and click

New

>

Empty KEG Graph

. Enter a meaningful name and click

Finish

.

Put a few nodes into the diagram. To properly test your code, you will want to vary the sizes of the nodes. It may also be a good idea to get into the habit of giving each node a different name, such as N1, N2, etc. This will help you later if you have to debug your algorithm.
Open the Layout view through Window > Show View > Other... > KIELER Layout > Layout.
With your KEG diagram selected, set the Layout Algorithm option in the Layout view to your new algorithm.
Save your KEG diagram.
Trigger automatic layout by clicking the layout button in the toolbar, or by hitting Ctrl+R L (first Ctrl+R, then L).See

Info

title	Tip

You can see the direct

...

output of your algorithm

...

    /**
     * Route the edges that are connected with the children of the given node.
     * @param parentNode the parent node of the input graph
     */
     public void routeEdges(final KNode parentNode) {
         getMonitor().begin("Edge Routing", 1);
 
         getMonitor().done();
     }

...

        EdgeRouter edgeRouter = new EdgeRouter();
        edgeRouter.routeEdges(layoutNode);

...

and the time it took to run it through the Layout Graph and Layout Time views. The views are available through the de.cau.cs.kieler.kiml.debug plug-in, which can be found in the plugins-dev folder of the KIML repository. You will learn more about debugging layout algorithms in a layout tutorial or presentation.

Once you're satisfied with your node placement code, it's time to take care of edge routing.

Add a new method that will implement the edge routing using the following skeleton code:

Code Block

language	java

/**
 * Routes the edges connecting the nodes in the given graph.
 * 
 * @param parentNode the graph whose edges to route.
 * @return height used for edge routing.
private float routeEdges(final KNode parentNode) {
    // TODO: Implement edge routing

    return 0;
}

Add a call to routeEdges(...) in your doLayout(...) method and implement the latter.

Info

title	Tips

Here's a few tips for implementing the edge routing:

Each edge shall be drawn with three orthogonal line segments: one vertical segment

...

below the

...

start node, one

...

vertical segment

...

below the target node, and a horizontal segment that connects the two.
The horizontal segments of two different edges shall not have the same y-coordinate

...

. Two neighboring horizontal segments shall

...

be placed at a distance of objectSpacing.
See

...

the screenshot at the top of the tutorial for an example.
Find the edges

...

in a graph by calling getOutgoingEdges()

...

or getIncomingEdges()

...

        KEdgeLayout edgeLayout = edge.getData(KEdgeLayout.class);

...

        KPoint point = KLayoutDataFactory.eINSTANCE.createKPoint();

...

on the nodes.

You can add bend points to edges through the edge's edge layout:

Code Block

language	java

KEdgeLayout edgeLayout = edge.getData(KEdgeLayout.class);
KPoint bendPoint = KLayoutDataFactory.eINSTANCE.createKPoint();
edgeLayout.getBendPoints().add(bendPoint);

You will want to clear the list of bend points of each edge layout before adding bend points to it. This will remove all bend points the edge had prior to invoking your layout algorithm.
Set the values of the points returned by getSourcePoint() and getTargetPoint() according to the positions where an edge leaves its source node and reaches its target node.
If you want, you can improve the edge routing code by allowing horizontal segments to share the same y-coordinate if that doesn't make them overlap. Your goal could be to produce an edge routing that uses as little space as possible.
If that's not enough yet: can you find a way to find an order of the horizontal segments such that as few edge crossings as possible are produced?

Once you're done implementing the edge routing code, test it by running your debug configuration again, as before.

Child pages

Versions Compared

Old Version 10

New Version 11

Key