The following tutorial demos describe how to use, customize, and extend diverse ViewMode classes. View modes provide the base functionality to handle mouse-based interaction that happens in a view.
| Class | Description |
|---|---|
| demo.view.viewmode.MagnifierViewModeDemo | Demonstrates how to use a magnifying glass effect to zoom view regions locally. |
| demo.view.viewmode.FullScreenNavigationDemo |
This demo demonstrates the usage of y.view.NavigationComponent and y.view.Overview. Both controls
will be added to a glass pane the view provides (y.view.Graph2DView#getGlassPane()) and can be toggled during
runtime.
Besides one can switch to a full screen mode and navigate through the graph view. |
| demo.view.viewmode.OrthogonalEdgeViewModeDemo | Demonstrates how to customize EditMode in order to simulate orthogonal edges.
This demo allows to switch between the creation of orthogonal and polygonal edges and toggling snapping behavior on and off. Toggling the "Orthogonal" button in the toolbar switches the type of newly created edges. Also intelligent snapping for the various view modes can be toggled in the tool bar. This affects the behavior of CreateEdgeMode and EditMode, as well as implicitly the minor modes of EditMode. |
| demo.view.viewmode.SnapLineDemo | Demonstrates EditMode's snapping feature in conjunction with orthogonal edges.
This demo can be used to toggle the snapping feature on and off. It shows how a custom SnapLine (the red vertical line) can be used to snap nodes and edges to other entities. Toggling the button in the toolbar toggles snapping on and off, the sliders can be used to adjust the preferred distance between nodes and edges. This will influence the "preferred distance snap lines." |
| demo.view.viewmode.RollOverEffectDemo | Demonstrates how to create a custom ViewMode that uses yFiles' Animation Framework to produce a roll over effect for nodes under the mouse cursor. |
| demo.view.viewmode.MouseInputDemo | Demonstrates how to add a custom drawable to the view that interacts with the MouseInputMode that is registered with class EditMode by default. |
| demo.view.viewmode.PopupModeDemo | Demonstrates how to display context sensitive popup menus and how to edit node labels in the view. |
| demo.view.viewmode.CreateEdgeModeDemo | Demonstrates how CreateEdgeMode can be customized to prevent the creation of certain edges and to provide feedback whether creating an edge to the node the mouse is hovering over is possible. |
| demo.view.viewmode.PortCreateEdgeModeDemo | Demonstrates how CreateEdgeMode can be customized in order to control automatic assignments of ports for edges. |
| demo.view.viewmode.HyperlinkDemo |
Demonstrates how to use y.view.HtmlLabelConfiguration to
trigger and process hyperlink events with HTML formatted label text.
|
| demo.view.viewmode.SmartLabelModelDemo |
Demonstrates how to use y.view.SmartNodeLabelModel and
y.view.SmartEdgeLabelModel.
|
Set <yFilesDir>/src as your source directory. Then add <yFilesDir>/lib/y.jar and the source folder <yFilesDir>/src to your classpath. Now you should be ready to compile and run all executable demo classes.
First make sure you have the build tool Ant installed on your system. Now you can use the demo build script build.xml located in <yFilesDir>/src/demo to launch each demo by specifying its simple class name as a target. Alternatively, launch the interactive demo driver by specifying run as target to conveniently access all demos.