vue-graph-vis v0.1.4
Vue Graph Visualizer (Vis)
A Vue component to render graph on canvas, based on Vis.js network.
How to
Perform an npm installation of the package:
npm i vue-graph-vis
The default import is the Vue component, so you can import it in your project with a statement like this:
import VueGraphVis from 'vue-graph-vis';
and use it in you Vue template in this way (supposed you are using webpack):
<template>
...
<GraphDiagram class="canvas" :graph="graph" :options="options" />
...
</template>
You could also import some classes, useful to build the diagram such as:
import { DefaultCommmandManager, Node, Edge, Graph, NodeType, Cluster, ClusterType } from 'vue-graph-vis';
The Vue component
The Vue Component props that are mandatory to be bound are:
- A Graph object (graph)
- A Options object (options)
An optional prop is 'commandManager'. By default a DummyCommandManager is assigned which doesn't manipulate the graph provided to the component.
The Graph Object
By default a graph contains:
- nodes ( Node[] )
- edges ( Edge[] )
For nodes and edges documentation see: http://visjs.org/docs/network/.
IMPORTANT: Do not use nodes groups. A more sophisticated group version has been implemented which uses NodeType.
- Groups: do not use nodes groups. A more sophisticated group system has been implemented which uses NodeType.
- HTML Nodes: you can now define a node with inner html, by putting your HTML code inside the _graphCanvas property of the node, as a string
- Clusters: similarly to groups, a more sophisticated clustering system has been implemented which uses ClusterType.
- resizable: node are now resizable, but you can decide to make them not resizable, giving this boolean a value of false
Example:
_graphCanvas:
{
nodeType: 'start',
clusterType : 'logic',
resizable : false,
html: `<table style='width: 100%;' border='1' cellspacing='0' cellpadding='5'>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
</table>`
}
The Options Object
See http://visjs.org/docs/network/.
New options are available under the _graphCanvas property:
- background: a background can be defined through a URL
- NodeTypes: see the implementation details below
- ClusterTypes: see the implementation details below
- canAddEdges: allows to add edges to the graph, in addition to the initial one (if an appropriate CommandManager is provided)
- saveNodesPosition: save the new nodes' positions on the model (if an appropriate CommandManager is provided)
- allowMultiselect: enable or disable the multiple selection of nodes and edges
- allowResizing: enable or disable the interactive resizing of nodes
Example:
var options = {
...
_graphCanvas:
{
canAddEdges : true,
allowMultiselect: false,
allowResizing : false,
nodeTypes: [...],
background: ***random_url***,
clusterTypes : [...]
}
}
NodeType(s)
Example:
var nodeType = {
linkIn: {
max: 2, //default 0, means no limits
allowedNodeTypes: ["nodeType1"] // default ["*"], means all nodeTypes allowed
},
linkOut: {
max: 2, //default 0, means no limits
allowedNodeTypes: ["nodeType1"] // default ["*"], means all nodeTypes allowed
},
options: {
color : {
background: blue,
border: black
}
}
}
You can also use the Class constructor of the NodeType class, importing the class with:
import { NodeType } from 'vue-graph-vis';
In this case you can code:
var nodeType = new NodeType(
{
linkIn: { allowedNodeTypes: [] },
linkOut: { allowedNodeTypes: ["*"], max: 1 },
options:
{
color: { background: "#99B898" },
shape: "circle",
margin: 1,
borderWidth: 3
}
});
ClusterType(s)
Example:
var x = {
id: 'main',
level: 1
}
You can also use the Class constructor of the ClusterType class, importing the class with:
import { ClusterType } from 'vue-graph-vis';
In this case you can code:
var clusterType = new ClusterType( { id : 'world', level : 0})
CommandManager
I strongly suggest you to use defaultCommandManager.
If you want to create you should at least implements the standard interface:
export default interface CommandManager
{
updateNode (payload : {node: Node; graph: Graph}) : any
addEdge (payload : {edge: Edge; graph: Graph}) : any
}
which requires an updateNode method and an addEdge method.
Contributing
You can clone the GitHub repo from here.
Default commands are:
npm run serve
npm run build
npm run test:unit
npm run test:watch