Changes for page KIML

Last modified by Richard Kreissig on 2025/01/30 12:04

From version < 10.1 >

edited by cds
on 2013/04/11 13:55

To version < 12.1 >

edited by cds
on 2013/04/11 15:43

Change comment: There is no comment for this version

Raw
Rendered

Summary

Page properties (1 modified, 0 added, 0 removed)
Objects (1 modified, 0 added, 0 removed)
- Confluence.Code.ConfluencePageClass[0]

Details

Page properties

Content

@@ -178,9 +178,9 @@
  {{code language="java"}}
  progressMonitor.begin("Login_name layouter", 1);
--KShapeLayout parentLayout = layoutNode.getData(KShapeLayout.class);
++KShapeLayout parentLayout = parentNode.getData(KShapeLayout.class);
--float objectSpacing = parentLayout.getPRoperty(LayoutOptions.SPACING);
++float objectSpacing = parentLayout.getProperty(LayoutOptions.SPACING);
  if (objectSpacing < 0) {
      objectSpacing = DEFAULT_SPACING;
  }
@@ -195,140 +195,109 @@
  progressMonitor.done();
  {{/code}}
  )))
--1. (((
--Put the following code at the end of the {{code language="none"}}doLayout(...){{/code}} method:
++1. It is now time to write the code that places the nodes. Here's two suggestions for how you can place them:\\
++1*. The simplest way is to place nodes in a row, next to each other. To make this more interesting, you could also place the nodes along the graph of a Sine function.
++1*. Another way might be to place them in a square or a circle. You would have to think about how exactly to align the nodes, which may well vary in size.
++{{info title="Tips"}}
++The following tips might come in handy...
++
++* Read the documentation of the [[KGraph>>doc:KIELER.KGraph Meta Model]] and [[KLayoutData>>doc:KIELER.KLayoutData Meta Model]] meta models. The input to the layout algorithm is a {{code language="none"}}KNode{{/code}} that has child {{code language="none"}}KNode{{/code}}s for every node in the graph. Iterate over these nodes by iterating over the {{code language="none"}}getChildren(){{/code}} list of the {{code language="none"}}parentNode{{/code}} argument.
++* (((
++Retrieve the size of a node and set its position later using the following code:
++
  {{code language="java"}}
--progressMonitor.done();
++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);
  {{/code}}
  )))
++* {{code language="none"}}objectSpacing{{/code}} is the spacing to be left between each pair of nodes.
++* {{code language="none"}}borderSpacing{{/code}} is the spacing to be left to the borders of the drawing. The top left node's coordinates must therefore be at least {{code language="none"}}(borderSpacing, borderSpacing){{/code}}.
++* At the end of the method, set the width and height of {{code language="none"}}parentLayout{{/code}} 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.
++{{/info}}
--
++Before you can test your layout code, you will have to register your new layout provider with KIML.
--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.
++1. Open the {{code language="none"}}META-INF/MANIFEST.MF{{/code}} file again and switch to the //Extensions// tab.
++1. Add an extension for {{code language="none"}}de.cau.cs.kieler.kiml.layout.layoutProviders{{/code}}.
++1. Right-click the extension and click //New// > //layoutAlgorithm//.
++1. Set the name to {{code language="none"}}Login_name Test Layouter{{/code}} and the class to your layout provider class name.
++1. Right-click the new //layoutAlgorithm// and click //New// > //knownOption//. Set option to {{code language="none"}}de.cau.cs.kieler.spacing{{/code}}.
++1. Add another //knownOption// for {{code language="none"}}de.cau.cs.kieler.borderSpacing{{/code}}.
++1. Save the editor.
--1. (((
--Implement the layout provider class
--1. (% style="font-size: 10.0pt;line-height: 13.0pt;" %)Add the following constant to the class:
--1. (% class="code" %)
--(((
--(% class="cm" style="color: rgb(153,153,136);" %)/~*~* default value for spacing between nodes. */(% class="kd" %)privatestaticfinal(% class="kt" style="color: rgb(68,85,136);" %)float(% class="o" %)=(% class="mf" style="color: rgb(0,153,153);" %)15.0f(% class="o" %);
++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.
--{{{
--        DEFAULT_SPACING
--}}}
--)))
--1. Write the following lines at the beginning of the {{code language="none"}}doLayout{{/code}} method:(% class="code" %)
--(((
--(% class="o" %).(% class="na" style="color: rgb(0,128,128);" %)begin(% class="o" %)((% class="s" style="color: rgb(187,136,68);" %)"<Login> Layouter"(% class="o" %),(% class="mi" style="color: rgb(0,153,153);" %)1(% class="o" %));=.(% class="na" style="color: rgb(0,128,128);" %)getData(% class="o" %)(.(% class="na" style="color: rgb(0,128,128);" %)class(% class="o" %));(% class="kt" style="color: rgb(68,85,136);" %)float(% class="o" %)=.(% class="na" style="color: rgb(0,128,128);" %)getProperty(% class="o" %)(.(% class="na" style="color: rgb(0,128,128);" %)SPACING(% class="o" %));(% class="k" %)if(% class="o" %)(<(% class="mi" style="color: rgb(0,153,153);" %)0(% class="o" %)){=;}(% class="kt" style="color: rgb(68,85,136);" %)float(% class="o" %)=.(% class="na" style="color: rgb(0,128,128);" %)getProperty(% class="o" %)(.(% class="na" style="color: rgb(0,128,128);" %)BORDER_SPACING(% class="o" %));(% class="k" %)if(% class="o" %)(<(% class="mi" style="color: rgb(0,153,153);" %)0(% class="o" %)){=;}
++1. Click //Run// > //Debug Configurations...//
++1. Right-click //Eclipse Application// and click //New//. Set the configuration's name to {{code language="none"}}Layout Test{{/code}}.
++1. In the //Arguments// tab, make sure the the program arguments include {{code language="none"}}-debug{{/code}} and {{code language="none"}}-consoleLog{{/code}}.
++1. On the //Plug-ins// tab, set //Launch with// to //plug-ins selected below only//. Click //Deselect All//, check the //Workspace// item in the tree, and click //Add Required Plug-ins//.
++1. Click //Apply// to save your changes and then //Debug// to start an Eclipse instance to test with.
--{{{        progressMonitor
--        KShapeLayout parentLayout  layoutNodeKShapeLayout
--         objectSpacing  parentLayoutLayoutOptions
--         objectSpacing
--            objectSpacing  DEFAULT_SPACING
--
--         borderSpacing  parentLayoutLayoutOptions
--         borderSpacing
--            borderSpacing  DEFAULT_SPACING
--
--}}}
--)))
--1. Write the following line at the end of the {{code language="none"}}doLayout{{/code}} method:(% class="code" %)
--(((
--(% class="o" %).(% class="na" style="color: rgb(0,128,128);" %)done(% class="o" %)();
++Test the layouter in your new Eclipse instance:
--{{{        progressMonitor
--}}}
--)))
--1. (((
--Implement the rest of the layouter such that the nodes of the input graph are all put in a row.
--* See the [[KGraph>>doc:KIELER.KGraph Meta Model]] and [[KLayoutData>>doc:KIELER.KLayoutData Meta Model]] data structures: the input is a KNode and holds the nodes of the graph in its list of children
--* Iterate over the nodes in the {{code language="none"}}getChildren(){{/code}} list of the {{code language="none"}}layoutNode{{/code}} input
--* Retrieve the size of a node using the following code:(% class="code" %)
--(((
--(% class="o" %)=.(% class="na" style="color: rgb(0,128,128);" %)getData(% class="o" %)(.(% class="na" style="color: rgb(0,128,128);" %)class(% class="o" %));(% class="kt" style="color: rgb(68,85,136);" %)float(% class="o" %)=.(% class="na" style="color: rgb(0,128,128);" %)getWidth(% class="o" %)();(% class="kt" style="color: rgb(68,85,136);" %)float(% class="o" %)=.(% class="na" style="color: rgb(0,128,128);" %)getHeight(% class="o" %)();
++1. Click //New// > //Project...// > //General// > //Project// and set the project name to something like {{code language="none"}}Test{{/code}}.
++1. Right-click the new project and click //New// > //Empty KEG Graph//. Enter a meaningful name and click //Finish//.
++1. 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.
++1. Open the //Layout// view through //Window// > //Show View// > //Other...// > //KIELER Layout// > //Layout//.
++1. With your KEG diagram selected, set the //Layout Algorithm// option in the //Layout// view to your new algorithm.
++1. Save your KEG diagram.
++1. Trigger automatic layout by clicking the layout button in the toolbar, or by hitting Ctrl+R L (first Ctrl+R, then L).
--{{{        KShapeLayout nodeLayout  nodeKShapeLayout
--         width  nodeLayout
--         height  nodeLayout
--}}}
--)))
--* Set the position (x, y) of a node's upper left corner using the following code:(% class="code" %)
--(((
--(% class="o" %).(% class="na" style="color: rgb(0,128,128);" %)setXpos(% class="o" %)();.(% class="na" style="color: rgb(0,128,128);" %)setYpos(% class="o" %)();
++{{info title="Tip"}}
++You can see the direct output of your algorithm and the time it took to run it through the //Layout Graph// and //Layout Time// views. The views are available through the {{code language="none"}}de.cau.cs.kieler.kiml.debug{{/code}} 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.
++{{/info}}
--{{{        nodeLayoutx
--        nodeLayouty
--}}}
--)))
--* {{code language="none"}}objectSpacing{{/code}} shall be the spacing to be left between each pair of nodes.
--* {{code language="none"}}borderSpacing{{/code}} shall be the spacing to be left to the borders of the drawing: the first node's coordinates shall be (borderSpacing, borderSpacing).
--* At the end of the method, set the width and height of {{code language="none"}}parentLayout{{/code}} so that it is large enough to hold the whole drawing, including borders.
--* Edges may be ignored for now.
--)))
--)))
--1. Open the file META-INF/MANIFEST.MF //→// //Extensions// tab\\
--11. Add an extension for de.cau.cs.kieler.kiml.layout.layoutProviders
--11. Right-click the extension //→// //New// //→// //layoutProvider//
--11. Set //name// to //<Login> Test Layouter//, //class// to de.cau.cs.rtprak.<login>.tutorial2.<Login>LayoutProvider
--11. Right-click the new //layoutProvider// //→// //New// //→// //knownOption//, set //option// to de.cau.cs.kieler.spacing
--11. Add another //knownOption//, set to de.cau.cs.kieler.borderSpacing
--1. //Run// //→// //Run Configurations...// //→// right-click //Eclipse Application// //→// //New//\\
--11. Name: //Layout//
--11. For testing the layouter, a new workspace location will be created; you may configure its destination in //Workspace Data// //→// //Location//
--11. Add the program arguments {{code language="none"}}-debug -consoleLog{{/code}} in the //Arguments// tab.
--11. Go to //Plug-ins// tab, select //Launch with: plug-ins selected below only//
--11. //Deselect All//, activate //Workspace// checkbox, //Add Required Plug-ins//, //Apply//, //Run//
--1. Test the layouter in the new Eclipse instance:\\
--11. //New// //→// //Project...// //→// //General// //→// //Project//, name //test//
--11. Right-click test project //→// //New// //→// //Other...// //→// //KEG Diagram// ((% style="color: rgb(255,0,0);" %)TODO: if graphs shall be created in another way, describe it here(%%))
--11. Create a graph using the palette on the right.
--11. //Window// //→// //Show View// //→// //Other...// //→// //KIELER// //→// //Layout//
--11. While the graph diagram is open, set //Layout Provider or Type// in the //Layout// view to //<Login> Test Layouter.//
--11. Open the additional views //Layout Graph// and //Layout Time.//
--11. Trigger layout with the //KIELER Layout// button in the toolbar or Ctrl+R L (first Ctrl+R, then L).
--11. See the direct input and output of your algorithm in the //Layout Graph// view.
--11. See the execution time analysis in the //Layout Time// view.
++Once you're satisfied with your node placement code, it's time to take care of edge routing.
++
 . (((
--Implement another class //EdgeRouter//.
--1. Add the following method:(% class="code" %)
--(((
++Add a new method that will implement the edge routing using the following skeleton code:
--\\\\\\\\\\\\\\
++{{code 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
--{{{    /**     * 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();     }}}}
++    return 0;
++}
++{{/code}}
  )))
--1. Add the following code to the end of the {{code language="none"}}doLayout{{/code}} method in your layout provider:(% class="code" %)
--(((
--(% class="o" %)=(% class="k" %)new(% class="o" %)();.(% class="na" style="color: rgb(0,128,128);" %)routeEdges(% class="o" %)();
++1. Add a call to {{code language="none"}}routeEdges(...){{/code}} in your {{code language="none"}}doLayout(...){{/code}} method and implement the latter.
--{{{        EdgeRouter edgeRouter   EdgeRouter
--        edgeRouterlayoutNode
--}}}
--)))
--1. (((
--Implement the {{code language="none"}}routeEdges{{/code}} method:
--* Each edge shall be drawn with three line segments: one vertical segment starting below the source node, one horizonzal segment, and another vertical segment ending below the target node.
--* The horizontal segments of two different edges shall not have the same y-coordinate; for consecutive edges, the distance between their horizontal segments shall equal {{code language="none"}}objectSpacing{{/code}}.
--* See the attached image [[attach:test-drawing.png]] for an example.
--* Find the edges using {{code language="none"}}getOutgoingEdges(){{/code}} or {{code language="none"}}getIncomingEdges(){{/code}} on a node.
--* Get the edge layout of an edge to set bend points using this code:(% class="code" %)
--(((
--(% class="o" %)=.(% class="na" style="color: rgb(0,128,128);" %)getData(% class="o" %)(.(% class="na" style="color: rgb(0,128,128);" %)class(% class="o" %));
++{{info title="Tips"}}
++Here's a few tips for implementing the edge routing:
--{{{        KEdgeLayout edgeLayout  edgeKEdgeLayout
--}}}
--)))
--* Create a bend point using this code:(% class="code" %)
--(((
--(% class="o" %)=.(% class="na" style="color: rgb(0,128,128);" %)eINSTANCE(% class="o" %).(% class="na" style="color: rgb(0,128,128);" %)createKPoint(% class="o" %)();
++* 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 {{code language="none"}}getOutgoingEdges(){{/code}} or {{code language="none"}}getIncomingEdges(){{/code}} on the nodes.
++* (((
++You can add bend points to edges through the edge's edge layout:
--{{{        KPoint point  KLayoutDataFactory
--}}}
++{{code language="java"}}
++KEdgeLayout edgeLayout = edge.getData(KEdgeLayout.class);
++KPoint bendPoint = KLayoutDataFactory.eINSTANCE.createKPoint();
++edgeLayout.getBendPoints().add(bendPoint);
++{{/code}}
  )))
--* Use the {{code language="none"}}getBendPoints(){{/code}} list on the {{code language="none"}}edgeLayout{{/code}} to add bend points (clear the list first to remove points from the previous layout).
--* Set the values of the points returned by {{code language="none"}}getSourcePoint(){{/code}} and {{code language="none"}}getTargetPoint(){{/code}} according to the positions where the edge leaves its source node and reches its target node.
--)))
--)))
--1. Use your previous run configuration to test the edge router.
++* 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 {{code language="none"}}getSourcePoint(){{/code}} and {{code language="none"}}getTargetPoint(){{/code}} 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?
++{{/info}}
++
++Once you're done implementing the edge routing code, test it by running your debug configuration again, as before.
++
++

Confluence.Code.ConfluencePageClass[0]

Id

@@ -1,1 +1,1 @@
--6160474
++6160477

URL

@@ -1,1 +1,1 @@
--https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/SS13LayPract/pages/6160474/KIML
++https://rtsys.informatik.uni-kiel.de/confluence//wiki/spaces/SS13LayPract/pages/6160477/KIML

Changes for page KIML

Summary

Details

Navigation

Quick Links