Learn how to add ports to nodes in the Syncfusion Vue Diagram component. This video demonstrates how to create ports programmatically and add, remove, and update ports at run time using an external button click. It also shows you how to add multiple ports and update the properties of ports dynamically. Finally, it shows you how to customize the appearance and position of the ports and how to connect nodes using ports.
The Vue Diagram is a feature-rich library for visualizing, creating, and editing interactive diagrams. It lets users create flowcharts, organizational charts, mind maps, and BPMN charts through code or a visual interface. The Vue Diagram provides support to define custom ports for making connections. When a connector is set between two nodes, its end points are automatically docked to the nodes’ nearest boundary. Ports act as the connection points of nodes and allow us to create connections with only those specific points. To add a connection port, define the port object and add it to the node ports collection. The offset property of the port accepts an object of fractions and is used to determine its position.
You can add and remove ports at runtime by using the client-side methods addPorts and removePorts. The shape of a port can be changed by using its shape property. If we need to render a custom shape, we can set the shape as a path and define the path using the pathData property of the port. The appearance of ports can be customized by using the strokeColor, strokeWidth, and fill properties. The port size can be customized using the width and height properties. The ports’ visibility property allows us to define when the port should be visible.
Explore our tutorial videos: [ Ссылка ]
Example project: [ Ссылка ]
TRIAL LICENSE KEY
-----------------------------
If you need a trial license key, start your Vue trial from [ Ссылка ] in your Syncfusion account. There, you can obtain your trial license key from the downloads page.
Check whether you are eligible for a free license for all Essential Studio products on our Community License page: [ Ссылка ]
BOOKMARK DETAILS
------------------------------
[00:00] Introduction
[01:02] Create port programmatically
[03:02] Create port dynamically
[04:13] Remove port dynamically
[05:41] Update port offset dynamically
[06:27] Change port alignment
[07:46] Customize port appearance
[08:13] Change port shapes
[08:38] Add multiple ports
[08:53] Connect nodes using ports
[09:49] Port constraints
VUE DIAGRAM
---------------------
Product overview: [ Ссылка ]
Examples: [ Ссылка ]
Documentation: [ Ссылка ]
Download free trial: [ Ссылка ]
npmjs package: [ Ссылка ]
SUBSCRIBE
----------
Syncfusion on YouTube: [ Ссылка ]
Sign up to receive email updates: [ Ссылка ]
SOCIAL COMMUNITIES
-----------------------------
Facebook: [ Ссылка ]
Twitter: [ Ссылка ]
LinkedIn: [ Ссылка ]
Instagram: [ Ссылка ]
#vue #vuejs #diagram
