Button Input Mode Demo [yFiles for HTML]

This demo shows how to use a custom input mode to add temporary buttons to model items.
The buttons can be individually styled and placed and trigger an action on click or drag.

Things to Try

Hover over nodes, edges, bends or labels to see which buttons are added for them.
Hover over these buttons to see different hover effects and cursors.
Click or drag from a button to trigger the action associated with the button.
Switch the button trigger in the toolbar to change the trigger when buttons should be added to an item.
- Hover is the default behavior that displays the buttons for an item when hovering over it.
- Current item displays the buttons for the current item of the GraphComponent.
- RightClick displays the buttons on right-clicking a model item.
Press the TAB key while the GraphComponent is focused to set a focus to the first button and cycle through all buttons.
A focused button can be triggered using the ENTER or SPACE key.

See the sources for details.

Legal Disclosure | Privacy Policy | View on GitHub