Chapter 6. Displaying and Editing Graphs

Table of Contents

Model-View-Controller Paradigm
Graph Structure Enhancements
Class Graph2D
Advanced Topics
Copying a Graph2D
Bringing Graph Elements to Life: The Realizer Concept
Binding Realizers
General Features
Node Realizers
Class ShapeNodeRealizer
Class ImageNodeRealizer
Class GenericNodeRealizer
Edge Realizers
Class PolyLineEdgeRealizer
Class ArcEdgeRealizer
Class BezierEdgeRealizer
Class SplineEdgeRealizer
Class QuadCurveEdgeRealizer
Class GenericEdgeRealizer
Realizer-Related Features
Label Support
Configurations
Customizing Label Behavior
Label Models
Node Label Models
Edge Label Models
Auto-rotated Edge Labels
Automatic Edge Label Placement
Node Ports
Customizing Node Port Behavior
Port Location Model
Port Location Model Parameter
Labeling Node Ports
Support for Automatic Layout
EdgeRealizer-related Classes
Class Arrow
Class Bend
Class LineType
Selection State
Writing Customized Realizers
Subclassing and Overriding
Realizer Replication
Bounds Calculation
YGF Serialization and Deserialization
Providing Interface Implementations
Class GenericNodeRealizer
Class GenericEdgeRealizer
Swing User Interface Components as Node Realizers
Rendering
Editor Functionality
Tutorial Demo Code
View Implementations
Class Graph2DView
Support for Automatic Layout
World and View Coordinates
Viewport and Clipping
Scroll Bars
Grid
Selection Box
Rendering Order
Rendering Hints
Drag and Drop Support
Tutorial Demo Code
Class Overview
Related Classes and Interfaces
Class DefaultGraph2DRenderer
Class GraphicsContext
Interface Drawable
Classes Graph2DViewMouseWheelZoomListener, Graph2DViewMouseWheelScrollListener
Class NavigationComponent
User Interaction
Mouse-Driven Actions
Keyboard-Driven Actions
Label Editor
Node-Related Editing Capabilities
ViewMode Workings
Class EditMode
Support for Orthogonal Edge Paths
Support for Interactive Snapping of Graph Elements
Class MoveLabelMode
Class HotSpotMode
Class NavigationMode
Class CellEditorMode
Class MagnifierViewMode
Class AutoDragViewMode
Class TooltipMode
Related Classes and Interfaces
Class HitInfo
Interface MouseInputEditor
Customizing an EditMode
Tutorial Demo Code
Events and Listeners
Graphical Property Changes
Selection State Changes
Multiple Views on a Common Model Graph
Concept
Class ModelViewManager
Synchronization
Filtering
Local Views
Concept
Class LocalViewCreator
Creator Implementations
Managing Local Views
Mapping Graph Elements between Local View and Model
Tutorial Demo Code
Printing a Graph's Visual Representation
Scaling and Clipping
Title Bar and Footer Support
Printing Preview
Creating a Dedicated Printing View
Tutorial Demo Code
Animations for Graph Elements
Animation Framework
Tutorial Demo Code
Advanced Application Logic
Undo/Redo
Clipboard
Layout Morphing
Automatic Layout
Class Graph2DLayoutExecutor
Asynchronous Layout
Graph2DView Support for Automatic Layout
Tutorial Demo Code

This chapter shows how to render a graph in a so-called "view." It presents the classes that are responsible for the visual representation of graph elements and explains their contribution to the "look and feel" of an application. Furthermore, it shows how user interaction with both graph elements and the view containing a graph is handled.

Model-View-Controller Paradigm

Package y.view bundles the yFiles classes that provide user interface (UI) functionality. UI functionality comprises two main aspects, namely the representation of a graph structure to the user and the interaction of a user with the graph structure.

The classes from package y.view reflect the Model-View-Controller (MVC) paradigm, i.e., conceptually they can be divided into three types, each having specific responsibilities:

  • Model classes: hold data specific to the application
  • View classes: present information to the user
  • Controller classes: tie the model to the view

In terms of MVC then, class Graph2D together with classes NodeRealizer and EdgeRealizer make up the model which holds the data and its state. Class Graph2DView defines the view which presents the information to the user. Finally, class ViewMode and its descendants tie together model and view.

The respective parts of MVC are further described in the following sections:

Figure 6.1, “Model-View-Controller paradigm in package y.view” depicts the interdependencies of the three parts. The view (a Graph2DView instance) renders the model (an object of type Graph2D); it also propagates user interface events to the controller (class ViewMode and its descendants). According to these events, the controller then changes state on either view or model.

Figure 6.1. Model-View-Controller paradigm in package y.view

Model-View-Controller paradigm in package y.view.