Merge branch 'master' of https://koljastrohm-games.com:3000/GraphDrawer/NodePlacementAnimation

doc/chapter/2architecture.tex

@@ -10,9 +10,15 @@ The following assumptions are made for the implementation of the node placement
 \end{itemize}
 
 
-\section{Components}\label{sec:components}
-\TODO{write about components and dependencies}
-Figure~\ref{fig:components} contains a component diagram that illustrates this.
+\section{Overview}\label{sec:components}
+The \code{main} package contains an executable class \code{Main}.
+This classes main method creates a graph or reads it from a file using the \code{graph.io} package and then creates a MainView.
+The view then instantiates a \code{BKNodePlacement} algorithm and runs it.
+The \code{BKNodePlacement} repeatedly asks the \code{AnimationController} if a step should be done (this is further explained in section~\ref{sec:theActualAlgorithm}).
+For each step it uses works with \code{LayeredGraphNode}s and \code{LayeredGraphEdge}s.
+Meanwhile the view displays the same \code{LayeredGraphNode}s and \code{LayeredGraphEdge}s on the screen.
+
+Figure~\ref{fig:components} contains a component diagram that illustrates these dependencies of the packages.
 
 \begin{figure}[htp]
     \centering
@@ -61,7 +67,7 @@ The internal representation of graphs is further explained in the section~\ref{s
 \begin{figure}[htp]
     \centering
     \includegraphics[width=\linewidth,trim=0 20cm 0 0,clip]{img/io.pdf}
-    \caption[Class diagram of the \enquote{graph.io} package]{Class diagram of the \enquote{graph.io} package, containing utilities for reading and writing graphs.}
+    \caption[Class diagram of the \code{graph.io} package]{Class diagram of the \code{graph.io} package, containing utilities for reading and writing graphs.}
     \label{fig:io}
 \end{figure}
 
@@ -71,9 +77,9 @@ The internal representation of graphs is further explained in the section~\ref{s
         \hline
         Attribute & Type & Optional & Explanation \\\hline\hline
         source & string & no & The name of the source of this edge.
-        Must be a node with the same parent node as the node specified by the \enquote{target} attribute. \\\hline
+        Must be a node with the same parent node as the node specified by the \code{target} attribute. \\\hline
         target & string & no & The name of the target of this edge.
-        Must be a node with the same parent node as the node specified by the \enquote{source} attribute. \\\hline
+        Must be a node with the same parent node as the node specified by the \code{source} attribute. \\\hline
     \end{longtable}
     \caption{Edge Attributes}
     \label{table:edge-attributes}
@@ -94,35 +100,39 @@ The internal representation of graphs is further explained in the section~\ref{s
 \end{figure}
 
 
-\section{Internal graph representation, \enquote{graph}}\label{sec:graph}
+\section{Internal graph representation, \code{graph}}\label{sec:graph}
 One feature that is important to us, is to be able to work with hierarchical graphs (cf.\ chapter~\ref{ch:progress}).
 Therefore a node not only has edges to other nodes, but also it can contain other nodes and edges.
 So far this is similar to what we described in section~\ref{sec:inputFileFormat}.
 Additionally, there are multiple attributes that are used during the computation or as output variables.
 \begin{itemize}
-    \item The attributes \enquote{shift},  \enquote{sink},  \enquote{root} and  \enquote{align} correspond to the variables used by Brandes and Köpf~\cite{brandes_fast_2001}.
+    \item The attributes \member{shift}, \member{sink},  \member{root} and  \member{align} correspond to the variables used by Brandes and Köpf~\cite{brandes_fast_2001}.
     They are summarized in table~\ref{table:bk-variables}.
-    \item The \enquote{parent} of a node is the node that contains it in the hierarchy.
-    \item The attributes $x$ and $y$ are the coordinates of the node relative to its parent node.
-    There is one coordinate for each of the four extremal layouts and on coordinate for the combined layout.
+    \item The \member{parent} of a node is the node that contains it in the hierarchy.
+    \item The attributes \member{x} and \member{y} are the coordinates of the node relative to its \code{parent}.
+    \item The attributes \member{w} and \member{h} are the width and height of the node.
+    \item The attributes \member{color} is the color in which the node is displayed.
+    \item The attribute \member{xUndef} determines whether the x coordinate of the node has already been assigned a value.
+    \item The attribute \member{selected} is used to highlight the node that is currently active in each layout.
 \end{itemize}
+The last five bullet points are available for each of the four extremal layouts and for the combined layout.
+
 Similarly, edges have additional attributes:
 \begin{itemize}
-    \item \enquote{dummy} specifies whether they are dummy edges.
-    \item \enquote{conflicted} corresponds to the variable used by Brandes and Köpf~\cite{brandes_fast_2001} and indicates that this edge won't be drawn vertically.
-    \item \enquote{bindPoints} is a list of bend points for the edge, including the beginning and end point of the edge.
+    \item \member{dummyNode} specifies whether they are dummy edges.
+    \item \member{conflicted} corresponds to the variable used by Brandes and Köpf~\cite{brandes_fast_2001} and indicates that this edge won't be drawn vertically.
+    \item \member{bindPoints} is a list of bend points for the edge, including the beginning and end point of the edge.
 \end{itemize}
 
-A class diagram of the package \enquote{graph} is displayed in figure~\ref{fig:graph}.
+A class diagram of the package \code{graph} is displayed in figure~\ref{fig:graph}.
 
 \begin{figure}[htp]
     \centering
     \includegraphics[width=\linewidth,trim=0 7.5cm 0 0,clip]{img/graph.pdf}
-    \caption{Class diagram of the \enquote{graph} package.}
+    \caption{Class diagram of the \code{graph} package.}
     \label{fig:graph}
 \end{figure}
 
-
 \begin{table}[htp]
     \begin{longtable}{|l|p{10cm}|}
         \hline
@@ -144,29 +154,29 @@ A class diagram of the package \enquote{graph} is displayed in figure~\ref{fig:g
 This section expects the reader to be familiar with the node placement algorithm by Brandes and Köpf~\cite{brandes_fast_2001}.
 We recommend section 3.2.1 of Carstens~\cite{carstens_node_2012} for a detailed explanation.
 
-A \enquote{stage} of the algorithm, interface \enquote{AlgorithmStage}, is an interval during which each step of the algorithm is performed in a similar way.
+A stage of the algorithm, interface \code{AlgorithmStage}, is an interval during which each step of the algorithm is performed in a similar way.
 Each time such a step is performed it returns whether the stage is already finished.
-For example, a forward step in the stage of calculating one extremal layout, class \enquote{ExtremalLayoutCalc}, consists of either a step of calculating the blocks, class \enquote{BlockCalc}, or a step of compacting the layout, class \enquote{Compaction}.
+For example, a forward step in the stage of calculating one extremal layout, \code{ExtremalLayoutCalc}, consists of either a step of calculating the blocks, \code{BlockCalc}, or a step of compacting the layout, \code{Compaction}.
 All the stages are displayed in class diagram~\ref{fig:animation_and_bk}.
 
 To be able to undo a step each stage needs to implement methods for both forward and backward steps.
 
-Note that the \enquote{AnimationController} is not a controller in the MVC sense that it processes user input, but in the sense that it \enquote{controls} the execution of steps/stages.
+Note that the \code{AnimationController} is not a controller in the MVC sense that it processes user input, but in the sense that it \emph{controls} the execution of steps/stages.
 This works the following:
 \begin{enumerate}
-    \item The main view creates a node placement algorithm (only \enquote{BKNodePlacement} available).
-    It sends a controller as a parameter for the constructor.
-    \item The algorithm concurrently asks the AnimationController if it should do a forward or backward step.
-    \item The AnimationController waits until it knows which action to take (for example if the user pressed the right arrow key).
-    Alternatively, if the animation is not paused, then it waits until a specific delay has passed.
+    \item The \code{MainView} creates a node placement algorithm (only \code{BKNodePlacement} available).
+    It sends an \code{AnimationController} as a parameter for the constructor.
+    \item The algorithm concurrently asks the \code{AnimationController} if it should do a forward or backward step.
+    \item The \code{AnimationController} waits until it knows which action to take (for example if the user pressed the right arrow key).
+    Alternatively, if the animation is not paused, it waits until a specific delay has passed.
     Then it returns to the algorithm which step to take next.
-    \item The algorithm potentially calls the step function of other alogrithms while executing one step.
+    \item The algorithm potentially calls one the step methods of other stages while executing one step.
 \end{enumerate}
 
 \begin{figure}[htp]
     \centering
     \includegraphics[width=\linewidth,trim=0 13cm 0 0,clip]{img/animation_and_bk.pdf}
-    \caption{Class diagram of the packages \enquote{bk} and\enquote{animation}.}
+    \caption{Class diagram of the packages \code{bk} and \code{animation}.}
     \label{fig:animation_and_bk}
 \end{figure}
 
@@ -177,16 +187,16 @@ For an explanation of what is actually displayed, see chapter~\ref{ch:ui}
 
 The distinguish two kinds of views:
 \begin{itemize}
-    \item The main window displays four regions for the different extremal layouts while also forwarding keyboard commands to the AnimationController.
-    For this we use a JFrame from the Swing library.
-    \item \enquote{EdgeView} and \enquote{NodeView} are JPanels, which means they can be drawn onto the JFrame.
+    \item The main window displays four regions for the different extremal layouts while also forwarding keyboard commands to the \code{AnimationController}.
+    For this we use a \code{JFrame} from the Swing library.
+    \item \code{EdgeView} and \code{NodeView} are \code{JPanel}s, which means they can be drawn onto the \code{JFrame}.
     For this they have to know about which part of the graph and which layout they belong to.
 \end{itemize}
-A class diagram of the packages \enquote{view} and \enquote{main} is displayed in figure~\ref{fig:view}.
+A class diagram of the packages \code{view} and \code{main} is displayed in figure~\ref{fig:view}.
 
 \begin{figure}[htp]
     \centering
     \includegraphics[width=\linewidth,trim=0 11cm 0 0,clip]{img/view.pdf}
-    \caption{Class diagram of the packages \enquote{view} and \enquote{main}.}
+    \caption{Class diagram of the packages \code{view} and \code{main}.}
     \label{fig:view}
 \end{figure}

doc/chapter/3ui.tex

@@ -43,7 +43,9 @@ Note that since the application is still under construction, so not all screensh
     \includegraphics[width=\linewidth]{img/skizze}
     \caption[First sketch of the planned layout]{A first sketch of the planned layout, created with Microsoft Paint.
     The buttons are (first row, from left to right): step over, step into, step out, run, pause, debug; and (second row, from left to right): step back, step back out, run backwards.
-    The actions corresponding to the buttons will be the same as described for the keyboard input in table~\ref{table:keys}, at least for the features that are already implemented.}
+    The actions corresponding to the buttons are the same as described for the keyboard input in table~\ref{table:keys}, at least for the features that are already implemented.
+    The left four rectangles show the progress of the four extremal layouts.
+    The right rectangle shows pseudocode of the algorithm and the position of the current step.}
     \label{fig:sketch}
 \end{figure}
 
@@ -58,7 +60,7 @@ The possible inputs are listed in table~\ref{table:keys}.
         \hline
         Key & Action \\\hline\hline
         Left arrow key & Perform one forward step of the algorithm. \\\hline
-        Right arrow key & Perform one backward step (\enquote{undo one step}) of the algorithm. \\\hline
+        Right arrow key & Perform one backward step---i.e.\ undo one step of the algorithm. \\\hline
         P & Pause/unpause the automatic execution. Initially paused. \\\hline
         D & Print a debug table to standard out. \\\hline
     \end{longtable}

doc/chapter/4progress.tex

@@ -1,20 +1,20 @@
 The following features are either planned (\planned), under construction (\progress) or done (\done):
 \begin{itemize}
-    \item[\done] Reading from an input file as described in section~\ref{sec:inputFileFormat}.
+    \item[\done] Reading a graph from an input file as described in section~\ref{sec:inputFileFormat}.
     \item[\done] Creating random graphs for testing purposes.
     \begin{itemize}
         \item[\done] Saving those randomly created graphs.
     \end{itemize}
     \item[\done] Drawing a graph with specified node sizes and positions.
-    \item[\progress] Running the node placement algorithm by Brandes and Köpf~\cite{brandes_fast_2001}.
+    \item[\done] Running the node placement algorithm by Brandes and Köpf~\cite{brandes_fast_2001}.
     \begin{itemize}
-        \item[\progress] Calculating the conflicts between edges.
+        \item[\done] Calculating the conflicts between edges.
         \begin{itemize}
-            \item[\progress] Differentiating between dummy nodes and non-dummy nodes.
+            \item[\done] Differentiating between dummy nodes and non-dummy nodes.
         \end{itemize}
-        \item[\progress] Calculating the blocks.
-        \item[\progress] Compacting the layout.
-        \item[\planned] Combining the layouts.
+        \item[\done] Calculating the blocks.
+        \item[\done] Compacting the layout.
+        \item[\done] Combining the layouts.
     \end{itemize}
     \item[\progress] Illustrating the progress while the algorithm is running in the form of
     \begin{itemize}
@@ -22,17 +22,19 @@ The following features are either planned (\planned), under construction (\progr
         \item[\done] Drawing the nodes in the color of their blocks.
         \item[\done] Drawing a colored circle to show the class assignments.
         \item[\done] Drawing the edges just as plain straight lines.
-        \item[\progress] Drawing the four extremal layouts and the combined layout separately.
-        \item[\planned] Drawing the edges of the block graph (in a different color than other edges).
+        \item[\done] Drawing the conflicted edges in a different color.
+        \item[\done] Drawing the four extremal layouts and the combined layout separately.
+        \item[\planned] Drawing the edges of the block graph (in a different color than other edges, low priority).
+        \item[\planned] Show pseudocode and the position where the algorithm currently is.
     \end{itemize}
     \item[\done] Running the algorithm step by step manually.
     \item[\progress] Running the algorithm step by step with configurable delay.
-    \item[\planned] Using debugger-like commands such as \enquote{step into}, \enquote{step over}, \enquote{step out}.
-    \item[\planned] Adding buttons and other graphical elements to support the user interface (low priority).
+    \item[\progress] Using debugger-like commands such as \enquote{step into}, \enquote{step over}, \enquote{step out}.
+    \item[\planned] Adding buttons and other graphical elements to support the user interface (low priority, see figure~\ref{fig:sketch}).
     Currently there is only keyboard input (cf.\ section~\ref{sec:userInterface}).
     \item[\done] Working with hierarchical graphs.
     \item[\done] Scaling the display with the (adjustable) window size.
-    \item[\planned] Work with disconnected graphs (cf.\ section~\ref{sec:assumptions}), either by modifying the algorithm or by processing the connected components one by one.
+    \item[\planned] Work with disconnected graphs (cf.\ section~\ref{sec:assumptions}), either by modifying the algorithm or by processing the connected components one by one (low priority).
     \item[\planned] Creating ElkNode~\cite{noauthor_elk:_2018} objects from LayeredNode (\ref{sec:graph}) objects.
     \item[\planned] Creating LayeredNode (\ref{sec:graph}) objects from ElkNode~\cite{noauthor_elk:_2018} objects (low priority).
-\end{itemize}
+\end{itemize}

doc/doc.tex

@@ -84,6 +84,9 @@
 % Quellcode
 % für Formatierung in Quelltexten, hier im Anhang
 \usepackage{listings}
+
+% same code font as in eclipse
+\usepackage{inconsolata}
 \usepackage{color, colortbl} % Farben
 
 \colorlet{punct}{red!60!black}
@@ -99,6 +102,11 @@
 \definecolor{deepred}{rgb}{0.8,0,0}
 \definecolor{deepgreen}{rgb}{0,0.4,0}
 \definecolor{grau}{gray}{0.3}
+\definecolor{member}{rgb}{0.27,0.37,0.75}
+
+\newcommand{\code}[1]{\lstinline[basicstyle=\ttfamily]|#1|}
+\newcommand{\member}[1]{\lstinline[basicstyle=\ttfamily\color{member}]|#1|}
+
 % python style code
 \lstset{
 extendedchars=true,

src/view/NiceButton.java

@@ -23,7 +23,7 @@ public class NiceButton extends JButton implements MouseListener {
     
     public NiceButton( String name )
     {
-        super( NiceButton.class.getResource( "../images/" + name + ".png" ) != null ? makeColorTransparent( new ImageIcon( NiceButton.class.getResource( "../images/" + name + ".png" ) ).getImage().getScaledInstance( 40, 40, Image.SCALE_AREA_AVERAGING ), Color.WHITE, 0 ) : new ImageIcon() );
+        super( NiceButton.class.getResource( "../img/" + name + ".png" ) != null ? makeColorTransparent( new ImageIcon( NiceButton.class.getResource( "../img/" + name + ".png" ) ).getImage().getScaledInstance( 40, 40, Image.SCALE_AREA_AVERAGING ), Color.WHITE, 0 ) : new ImageIcon() );
         setSize( 40, 40 );
         addMouseListener( this );
         setBorderPainted( false );