Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/tiagolr/vnodes

Vue node based svg visual graphs
https://github.com/tiagolr/vnodes

graph visualization vue2 vue3

Last synced: about 2 months ago
JSON representation

Vue node based svg visual graphs

Lists

README 

        
# vnodes



Vue components to create svg interactive graphs, diagrams or node visual tools.



### Demo



https://tiagolr.github.io/vnodes/



### Install



```bash

npm install vnodes

```



### Get started

```html



  

    

    



    

    

    

  



```

```js

import { Screen, Node, Edge, graph } from 'vnodes'

export default {

  components: {

     Screen,

     Node,

     Edge

  }

  data () {

    return {

      graph: new graph()

    }

  }

  created () {

    this.graph.createNode('a')

    this.graph.createNode('b')

    this.graph.createEdge('a', 'b')

    this.graph.graphNodes()

  }

}

```



## Components



Components are independent and can be imported separately.



### Screen



Svg wrapper with zoom, panning and other features.



```html



  



```



#### Screen Options

Screen component uses [svg-pan-zoom](https://www.npmjs.com/package/svg-pan-zoom) under the hood

and screen takes options prop like this

```html



  



```

you can refer to available options [here](https://www.npmjs.com/package/svg-pan-zoom#how-to-use)

```javascript

{

  viewportSelector: string,

  panEnabled: boolean,

  controlIconsEnabled: boolean,

  zoomEnabled: boolean,

  dblClickZoomEnabled: boolean,

  mouseWheelZoomEnabled: boolean,

  preventMouseEventsDefault: boolean,

  zoomScaleSensitivity: number,

  minZoom: number,

  maxZoom: number,

  fit: boolean,

  contain: boolean,

  center: boolean,

  refreshRate: 'auto',

  beforeZoom: function(){},

  onZoom: function(){},

  beforePan: function(){},

  onPan: function(){},

  onUpdatedCTM: function(){},

  customEventsHandler: {},

  eventsListenerElement: null

}

```



### Node



Html wrapper for svg with additional features like, dragging and fitting contents.



```html



  

      
My First Node!


  



```



### Edge



Connects nodes using svg lines



```html



```



Edges require node references `{ from: id|Object, to: String|Object }`, if nodes are refered by `id(String)` an array `nodes` must be passed:



```html



```



Edges can take **anchor** information to offset their position relative to a node,



```html



```

 anchors format can be:



* String `'center', 'left', 'right', 'top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'cirlce', 'rect'`

* Object `{ x?:Number|String, y?: Number|String, align?: String, snap?: String }`



Examples of valid anchors:



```js

null

{ x: 0, y: 0}

{ x: 10, y: 10 }

{ x: '50%', '50%' }

{ x: '50%', '50%', snap: 'rect' }

{ align: 'bottom-right' }

'center'

'top-left'

'circle'   // snaps offset to circle with radius node.width/2

'rect'     // snaps offset to node rectangle

```



### Group



Surrounds a group of nodes with a rectangle, allows dragging multiple nodes.



```html



  
Group Label



```



### Port



Placed inside a node, automatically offsets edges to a their position inside the nodes html [Ports demo].



### Label



Create a label node that is positioned along an edge



```html



  
Content



```



### graph.js



Can be used to store edges and nodes.

Contains utility methods to build graphs, layouts, remove and create nodes, edges and so on.



## Styling



The simplest way to style nodes and edges is using CSS



```css



svg .node .content {

  border-radius: 50%;

  background-color: red;

}



svg .edge {

  stroke-width: 10;

  stroke: blue;

  marker-start: url(#arrow-start);

}



```



### Markers



TODO

routing orth manh metro https://resources.jointjs.com/demos/routing

theme apply demo

markers demo

groups demo

edge api review

graph tools, nodes containing edge refs or adj list etc

graph layouts https://www.yworks.com/products/yfiles/features#layout

layered layouts https://github.com/erikbrinkman/d3-dag

layered layouts https://www.yworks.com/pages/layered-graph-layout

css animations demo/theme https://www.yworks.com/products/yfiles/features

https://www.edrawmax.com/online/en/

https://js.cytoscape.org/