A Generic Framework for the Topology-Shape-Metrics Based Layout
Total Page:16
File Type:pdf, Size:1020Kb
A Generic Framework for the Topology-Shape-Metrics Based Layout Paul Klose Master Thesis October 2012 Christian-Albrechts-Universität zu Kiel Real-Time and Embedded Systems Group Prof. Dr. Reinhard von Hanxleden Advised by: Dipl-Inf. Miro Spönemann Abstract Modeling is an important part of software engineering, but it is also used in many other areas of application. In that context the arrangement of diagram elements by hand is not efficient. Thus, layout algorithms are used to create or rearrange the diagram elements automatically in order to free users from this. However, different types of diagrams require different types of layout algorithms. Planarity and orthogonality are well-known drawing conventions for many domains such as UML class diagrams, circuit schemata or entity-relationship models. One approach to arrange such diagrams is considered by Roberto Tamassia and is called Topology-Shape-Metrics approach, which minimizes edge crossings and generates compact orthogonal grid drawings. This basic approach works with three phases: the planarization, the orthogonalization, and the compaction. The implementation of these phases are considered in this thesis in detail with respect to a generic, extensible architecture, such that every phase can be exchanged with different alternatives. This leads to a considerable amount of flexibility and expandability. Special handling of high-degree nodes has been implemented based on this architecture. Moreover, approach and implementation proposals for interactive planarization and for handling edge labels, hypergraphs and port constraints are presented. iii Eidesstattliche Erklärung Hiermit erkläre ich an Eides statt, dass ich die vorliegende Arbeit selbstständig verfasst und keine anderen als die angegebenen Quellen und Hilfsmittel verwendet habe. Kiel, v Contents 1 Introduction1 1.1 Related Work................................4 1.2 Contributions................................5 1.3 Overview...................................5 2 Preliminaries7 2.1 Basics of Graph Drawing..........................7 2.1.1 Flow Networks........................... 12 2.1.2 Drawing Conventions....................... 13 2.1.3 Aesthetics Criteria......................... 15 2.2 Topology-Shape-Metrics Approach.................... 16 2.3 Kiel Integrated Environment for Layout Eclipse Rich Client..... 18 2.3.1 KIELER Infrastructure for Meta Layout.............. 19 2.4 KLay Architecture.............................. 20 2.4.1 KLay Planar Architecture...................... 21 3 Planarization 23 3.1 Planarity Testing.............................. 23 3.2 Edge Insertion................................ 26 3.2.1 Face Calculation.......................... 27 4 Orthogonalization 31 4.1 Preliminaries................................. 31 4.2 Tamassia’s Approach............................ 33 4.2.1 Angles and the Orthogonal Representation........... 33 4.2.2 Orthogonalization Network Flow................ 35 4.2.3 Compute Orthogonal Representation.............. 38 4.3 Preprocessing................................ 39 4.3.1 The External Face.......................... 39 vii Contents 5 Compaction 41 5.1 Tidy Rectangular Compaction....................... 42 5.1.1 Again the Flow Network..................... 43 5.1.2 Simple Flow Solving........................ 45 5.2 Preprocessing................................ 48 5.2.1 Insertion of Bend-Point Dummies................ 48 5.2.2 Making Faces Rectangular.................... 49 5.2.3 Face Sides.............................. 61 5.3 Postprocessing................................ 63 5.3.1 Grid Drawing............................ 63 5.3.2 Dummy Removal.......................... 66 6 Extensions 71 6.1 Node Degree Higher Than Four..................... 71 6.1.1 Implementation........................... 74 6.2 Interactive Planarization.......................... 79 6.3 Optimal Embedding............................ 81 6.4 Compaction................................. 81 6.5 Planar Drawing Alternatives....................... 82 6.6 Handling Directed Edges......................... 84 6.7 Hypergraphs................................. 86 6.8 Port-Constraints............................... 88 6.9 Edge Enhancement............................. 88 6.9.1 Edge Labels............................. 89 6.9.2 Multi-Edges............................. 91 6.9.3 Self-Loops.............................. 92 7 Conclusion 95 7.1 Evaluation.................................. 95 7.2 Summary................................... 103 Bibliography 105 viii List of Figures 1.1 Different layouts for the same diagram.................2 1.2 Entity-relationship diagram........................3 2.1 Directed graph with self-loop.......................8 2.2 Subdivision example............................8 2.3 Drawings of the smallest non-planar graphs..............9 2.4 Different representations of a graph................... 10 2.5 Different drawings illustrating upward planarity........... 11 2.6 Different drawings showing drawing conventions........... 14 2.7 Steps of the TSM approach......................... 17 2.8 KIML structure overview.......................... 19 2.9 KLay architecture overview......................... 20 2.10 KLay Planar architecture.......................... 21 3.1 DFS-tree creation............................... 24 3.2 Back-edge insertion............................. 25 3.3 Planar embedding of Figure 3.1a..................... 26 3.4 Edge insertion example.......................... 27 3.5 Result of the edge insertion of Figure 3.4................ 28 3.6 Simple connected graph example..................... 28 3.7 Calculation of the left and right face................... 29 4.1 Flow network example with its corresponding residual network.. 32 4.2 Vertex- and bend-angles of a planar orthogonal drawing....... 33 4.3 Orthogonal drawing with four vertices and four bends........ 34 4.4 Illustration of the transportation problem................ 35 4.5 Transformation of a planar embedding to a flow network...... 36 4.6 Angle mapping from network flow to original graph......... 38 4.7 Area discrepancy of the same embedding with different external faces 40 5.1 Example of orthogonal representation with rectangular faces.... 42 5.2 Example for minimum cost flow in the context of the compaction.. 44 ix List of Figures 5.3 Flow increasing example.......................... 47 5.4 Example for bend-point dummy node insertion............ 49 5.5 Orthogonal representation containing faces with non-rectangular shape 50 5.6 Refining the external face of the orthogonal representation of Figure 5.5 53 5.7 Problems with the edge extensions.................... 55 5.8 Refinement of the faces of an orthogonal representation with a cutvertex 58 5.9 Two examples for orthogonal representations with cutedges..... 60 5.10 Representation with marked face sides................. 61 5.11 Grid drawing of K3,3 with marked edge lengths............ 64 5.12 Increasing of the grid positions...................... 65 5.13 Removal of rectangular shape dummies................. 66 5.14 Removal of bend dummies........................ 67 5.15 Removal of planarization dummies................... 68 6.1 Planar graphs drawn with different high degree approaches..... 72 6.2 Transformation of a high-degree node into an expansion cycle.... 73 6.3 Transformation of a high-degree node into an sequence of dummy nodes..................................... 74 6.4 Performing orthogonalization and compaction on expansion cycle. 75 6.5 Back transformation to the high-degree node with Giotto approach. 77 6.6 Back transformation to the high-degree node with Quod approach. 78 6.7 Planarization with preserving the given embedding.......... 80 6.8 Two drawings with different edge length, respectively different draw- ing area.................................... 82 6.9 Triangulating a planar graph bases on the canonical ordering.... 83 6.10 An example of a planar straight-line drawing............. 84 6.11 Snippet of KLay Planar class diagram................... 85 6.12 Two representations with different layering strategies......... 86 6.13 Different representations of a hypergraph................ 87 6.14 Example graph containing labeled multi-edges and labeled self-loops 89 6.15 Different labeled drawings of the same orthogonal representation.. 90 6.16 Processing steps of handling multi-edges................ 91 6.17 Handling of self-loops........................... 92 7.1 Drawing D1 computed with KLay Force................. 96 7.2 KLay Planar with different high-degree strategies............ 96 7.3 Drawing D1 computed with KLay Layered................ 97 x List of Figures 7.4 Drawing D2 computed with KLay Force................. 98 7.5 Drawing D2 computed with KLay Layered................ 98 7.6 Drawing D2 computed with OGDF orthogonal algorithm....... 99 7.7 Drawing D2 computed with KLay Planar................. 99 7.8 Drawing D3 computed with KLay Layered................ 100 7.9 Drawing D3 computed with OGDF upward planarity......... 101 7.10 Drawing D3 computed with KLay Planar................. 102 xi List of Tables 4.1 The architecture of the orthogonalization................ 31 4.2 Angle-data of Figure 4.3.......................... 34 5.1 The architecture of the compaction.................... 41 5.2 Edge properties of the orthogonal representation of Figure 5.5.... 51 5.3 Order of setting edge properties of the external face of Figure 5.9a. 59 5.4 Result of setting edge properties of the external face of Figure 5.9b. 60 6.1 Advantages and disadvantages of the different high degree