Mouse Wheel Customization Demo
This demo shows how to customize and enhance the default mouse wheel behavior.
The mouse wheel behavior can be configured to zoom or scroll the graph, or do both, with
additional modifiers being pressed.
When scrolling, the scroll direction can be switched between vertical and horizontal
scrolling using a modifier key (Shift by default, Ctrl for the alternative
modifier scheme configured in this demo).
When both scrolling and zooming is enabled, switch from scrolling to zooming using the
respective modifier (Ctrl by default, Alt for the alternative modifier
scheme).
The Modifiers dropdown lets you switch between the default and an alternative
modifier scheme. In code, the modifiers, as well as other conditions, can be configured
freely.
When the Scroll, Zoom and Resize option is selected, a custom listener to the
Wheel event of the CanvasComponent allows to resize the
selected nodes by pressing both, Shift and Ctrl.
The settings Wheel Zoom Factor and Wheel Scroll Factor allow to adjust
the amount that's zoomed or scrolled on each turn of the mouse wheel. Additionally, the
system's mouse settings determine how far the graph is zoomed or scrolled.
Things to Try
- Turn the mouse wheel to scroll the graph vertically.
-
Press SHIFT and turn the mouse wheel or press the mouse wheel sideways to scroll
the graph horizontally.
- Press CONTROL and turn the mouse wheel to zoom the graph.
-
Press SHIFT and CONTROL and turn the mouse wheel to change the size of the
selected nodes.
-
Press SHIFT while zooming to zoom to the center of the view instead of the mouse
location (when wheel behavior set to zoom).
-
Change the default settings in the toolbar and play around with the mouse wheel and the
different modifier keys.