@vaadin-component-factory/vcf-network
v1.3.9
Published
Hierarchical network visualizing web component
Downloads
70
Readme
<vcf-network>
Live Demo ↗ | API documentation ↗
Installation
Install vcf-network
:
npm i @vaadin-component-factory/vcf-network --save
Usage
Once installed, import it in your application:
import '@vaadin-component-factory/vcf-network/vcf-network.js';
Add <vcf-network>
element to the page.
<vcf-network></vcf-network>
Creating networks
The hierarchical network visualization consists of nodes, edges and components. A component is a grouping of nodes, edges and other components.
Add nodes
Click the button for the node type you would like to add on the left tool panel. This will activate the "Add node mode" for this node type. You can then click anywhere on the middle canvas area to create a node at that position.
Add edges
To add an edge between two nodes, first click and hold on the node you would like the edge to begin from. The cursor will change and you will be able to drag an edge to another node. When you release the mouse button over another node, an edge will be created.
Creating components
In order to create components you must first select the nodes that will be in that component. You can select a single node by clicking with the left mouse button but to select multiple nodes, you must click and drag with the right mouse button. Once you have selected nodes, click the Create Component button on the right panel. You can then edit the components name and color using the fields also found on the right panel.
Hotkeys
Mouse
- Double Click: Create node if on empty space
- Right Click: Right click and drag to create selection rectangle
Keyboard
- N: Create normal node at cursor position or activate add node mode if add-node-toggle is enabled
- I: Create input node at cursor position or activate add node mode if add-node-toggle is enabled
- O: Create output node at cursor position or activate add node mode if add-node-toggle is enabled
- C: Create component from current selection
- D: Duplicate current selection
- E: Export current selection
- Backspace: Delete current selection
Running demo
Fork the
vcf-network
repository and clone it locally.Make sure you have npm installed.
When in the
vcf-network
directory, runnpm install
to install dependencies.Run
npm start
to open the demo.
Contributing
To contribute to the component, please read the guideline first.
Vaadin Prime
This component is available in the Vaadin Prime subscription. It is still open source, but you need to have a valid CVAL license in order to use it. Read more at: https://vaadin.com/pricing
License
Apache License 2.0