Vue Diagram Editor component
Introduction
The main purpose of this component is to make it possible to use any component within each node of the diagram.
Vue Diagram Editor features:
- scoped-slot for node
- ripple (pulsable) node
- any number of instances per page
- customizable node color
- customizable node pulse color
Special thanks to the author of the
gwenaelp/vue-diagrams
package.
Getting Started
It's recommended to install vue-diagram-editor
via npm, and build your app using a bundler like
webpack.
Requires Vue 2.6+
Simple example
If you just don't want to use webpack or any other bundlers,
you can simply include the standalone UMD build in your page.
In this way, make sure Vue as a dependency is included before vue-diagram-editor
.
Data structure
The data structure of the Vue-Diagram-Editor has 2 main entities -
Node and Link.
The Vue-Diagram-Editor has the following data structure:
API
Node
Prop | Req... | Default | Description |
---|---|---|---|
id |
no | generated ulid identifier | Unique identifier of node |
title |
yes | - |
Title of node |
coordinates |
no | { x:10, y:10 } |
Node coordinates object. Must contain this two numerical properties: x and y
|
size |
no | { width:150, height:150 } |
Node size object. Must contain this two numerical properties: width and height
|
portsIn |
no | {} |
The node's incoming ports object. Object keys are port names and values are port headers |
portsOut |
no | {} |
The node's outgoing ports object. Object keys are port names and values are port headers |
data |
no | {} |
Custom data object. May be useful when handling events |
Link
Prop | Req... | Type/Default | Description |
---|---|---|---|
id |
no |
Type: String
Default: generated ulid identifier |
Unique identifier of link |
start_id |
yes |
Type: String
No default value
|
ID of the node from which this link starts |
start_port |
no |
Type: String
Default:
"default" |
The name of the outgoing port of the node from which this link begins |
end_id |
yes |
Type: String
No default value
|
ID of the node where this link ends |
end_port |
no |
Type: String
Default:
"default" |
The name of the incoming port of the node where this link ends |
Props
Name | Type / Default | Description |
---|---|---|
height |
Type: Number
Default:
500
|
Block height with Vue-Diagram-Editor |
zoomEnabled |
Type: Boolean
Default:
true
|
Allows to scale the diagram |
nodeColor |
Type: Function: String
Default:
node => "#66cc00"
|
The function takes object of Node as parameter and must return a string with a hexadecimal color
representation. Avoid heavy computation in this function
|
nodeDeletable |
Type: Function: Boolean
Default:
node => true
|
Shows or hides the delete node button |
nodePulsable |
Type: Function: Boolean
Default:
node => false
|
Enables or disables the ripple of a specific node. Avoid heavy computation in this function |
nodePulseColor |
Type: Function: String
Default:
node => "#f00"
|
Determines the color of the node's ripple
(in the case when nodePulsable returns true ).
Avoid heavy computation in this function
|
beforeDeleteNode |
Type: Function: Boolean
Default:
node => true
|
In the case when the node is deletable, it is executed immediately before deleting. If the function returns false, the node is not deleted. Avoid heavy computation in this function |
beforeDeleteLink |
Type: Function: Boolean
Default:
link => true
|
Executed immediately before the link is removed. If the function returns false, the link is not removed. Avoid heavy computation in this function |
portDisabled |
Type: Function: Boolean
Default:
({id,type,port}) => false
|
Determines if the port is blocked for communication.
If the port is disabled, you will not be able to create a new link or click on it.
Accepts an object with properties:
id - node identifier,type - port type (in or out ),port - port name |
portAvailable |
Type: Function: Boolean
Default:
({id,type,port,activePort}) => true
|
This function is executed at the moment of hovering to the port when a new link is creating.
Accepts an object with properties:
id - node identifier,type - port type (in or out ),port - port nameactivePort - Object with the data of the starting port of the link being created |
preventMouseEventsDefault |
Type: Boolean
Default:
true
|
Stops handling native events |
Methods
Name | Params | Return | Description |
---|---|---|---|
setModel(model) |
model.nodes - Array or collection of node structure objects model.links - Array or collection of link structure objects |
void |
The method completely re-initializes the diagram model |
serialize() |
- |
{nodes:[{...},{...}], links:[{...}]} |
Method returns an object with arrays of nodes and links |
addNode(node) |
node - node structure object |
void |
Method new node to the diagram model |
addLink(link) |
link - link structure object |
void |
Method new link to the diagram model |
updateNode(params) |
params.id node IDparams.name node property nameparams.value node property value |
void |
Update root property of node |
deleteNode(id) |
id - node ID |
void |
the method simulates a click on the button to delete a node |
deleteLink(id) |
id - link ID |
void |
the method lowers the deletion of the link. |
enableDblClickZoom() |
- |
void |
see |
disableDblClickZoom() |
- |
void |
see |
isDblClickZoomEnabled() |
- |
Boolean |
see |
enableMouseWheelZoom() |
- |
void |
see |
disableMouseWheelZoom() |
- |
void |
see |
isMouseWheelZoomEnabled() |
- |
Boolean |
see |
resetZoom() |
- |
void |
see |
updateBBox() |
- |
void |
see |
fit() |
- |
void |
see |
contain() |
- |
void |
see |
center() |
- |
void |
see |
Events
Name | Data | Description |
---|---|---|
select-node |
nodeId
|
When a node is selected, an event with the node identifier is emitted |
deleted-node |
nodeId
|
When deleting a node, an event with the node identifier is emitted |
deleted-link |
linkId
|
When deleting a link, an event with the identifier of the deleted link is emitted |
updated-node |
Node
|
Updated node object |
click-port |
The event is emitted when a port is clicked.
The event sends an object with a node identifier (id ),
port type (in or out ) and port name
|
|
created-link |
Link
|
The event is emitted after creating a new link |
Slots
Name | Props | Description |
---|---|---|
node |
{node,width,height} |
Yes, every node can have any view component!
Slot scoped params:
node - Nodewidth - content part widthheight - content part height |
Contributing Vue Diagram Editor
Best way to contribute is to create a pull request. In order to create a pull request:
- Fork this repository
- Clone repository fork (created in previous step) locally (on your machine)
- Ensure that you have nodejs and npm installed locally
- In console:
cd
into project foldernpm install && npm run dev
- After change is done lint project
npm run lint
- Commit only meaningful changes. Do not commit distribution files (dist folder). Distribution files are built only before a release
- Push your changes into your fork
- Create a pull request