Ecosyste.ms: Awesome

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

https://github.com/joyceworks/flowchart-vue

Flowchart & designer component for Vue.js.
https://github.com/joyceworks/flowchart-vue

flowchart vuejs

Last synced: about 2 months ago
JSON representation

Flowchart & designer component for Vue.js.

Lists

README 

        
# Flowchart



Flowchart & Flowchart designer component for Vue.js([flowchart-react](https://github.com/joyceworks/flowchart-react) for React.js).



[![NPM](https://img.shields.io/npm/v/flowchart-vue.svg)](https://www.npmjs.com/package/flowchart-vue)



image



## Usage



```shell script

yarn add flowchart-vue

```



```vue



    


        

            Add

        

        

            Del

        

        

            Edit

        

        

            Save

        

        

            Confirm removing

        

        

            Reject removing

        

        

        

    



  import Vue from 'vue';

  import FlowChart from 'flowchart-vue';



  Vue.use(FlowChart);



  export default {

    name: 'App',

    data: function() {

      return {

        nodes: [

          // Basic fields

          {id: 1, x: 140, y: 270, name: 'Start', type: 'start'},

          // You can add any generic fields to node, for example: description

          // It will be passed to @save, @editnode

          {id: 2, x: 540, y: 270, name: 'End', type: 'end', description: 'I\'m here'},

        ],

        connections: [

          {

            source: {id: 1, position: 'right'},

            destination: {id: 2, position: 'left'},

            id: 1,

            type: 'pass',

          },

        ],

        showRemovingConfirmation: false,

      };

    },

    methods: {

      handleChartSave(nodes, connections) {

        // axios.post(url, {nodes, connections}).then(resp => {

        //   this.nodes = resp.data.nodes;

        //   this.connections = resp.data.connections;

        //   // Flowchart will refresh after this.nodes and this.connections changed

        // });

      },

      handleEditNode(node) {

        if (node.id === 2) {

          console.log(node.description);

        }

      },

      handleEditConnection(connection) {

      },

      handleDblClick(position) {

        this.$refs.chart.add({

          id: +new Date(),

          x: position.x,

          y: position.y,

          name: 'New',

          type: 'operation',

          approvers: [],

        });

      },

      initRemovingConfirmation() {

        this.showRemovingConfirmation = true;

      },

      confirmRemoving() {

        this.$refs.chart.confirmRemove();

        this.showRemovingConfirmation = false;

      }

    }

  };



```



See more at [src/views/App.vue](https://github.com/joyceworks/flowchart-vue/blob/master/src/views/App.vue).



## Demo



- [GitHub Pages](https://joyceworks.github.io/flowchart-vue/)

- [CodeSandbox](https://codesandbox.io/s/funny-shaw-971s84)

- [Flowchart Vue Demo](https://github.com/joyceworks/flowchart-vue-demo)

- Development Environment



  ``` shell

  git clone https://github.com/joyceworks/flowchart-vue.git

  cd flowchart-vue

  yarn install

  yarn run serve

  ```

  

  Then open http://localhost:yourport/ in browser.



## API



## Props



Property|Description|Type|Default

-|-|-|-

nodes|Collection of nodes|`Array`|`[{id: 1, x: 140, y: 270, name: 'Start', type: 'start'}, {id: 2, x: 540, y: 270, name: 'End', type: 'end'}]`

connections|Collection of connections|`Array`|`[{source: {id: 1, position: 'right'}, destination: {id: 2, position: 'left'}, id: 1, type: 'pass',          }]`

width|Width of canvas|`String` \| `Number`|`800`

height|Height of canvas|`String` \| `Number`|`600`

locale|Display language, available values: `'en'`, `'zh'`|`String`|`'en'`

readonly|Read-only|`Boolean`|false

render|Custom render function|`null`

readOnlyPermissions|Allows to specify more granular read-only mode permissions|`Object`|`{ allowDragNodes: false, allowSave: false, allowAddNodes: false, allowEditNodes: false, allowEditConnections: false, allowDblClick: false, allowRemove: false }`



## Events



Event|Description|Handler

-|-|-

editnode|Node double-click event|`(node) => void`

editconnection|Connection double-click event|`(connection) => void`

save|Save event|`(nodes, connections) => void`

dblclick|Background double-click event|`(position: {x: number, y: number}) => void`

connect|Connect event|`(connection, nodes, connections) => void`

disconnect|Disconnect event|`(connection, nodes, connections) => void`

add|Add node event|`(node, nodes, connections) => void`

delete|Delete node event|`(node, nodes, connections) => void`

select|Select node event|`nodes => void`

selectconnection|Select connection event|`connections => void`

render|Node render event, children is a collection of svg elements |`(node: Node, children: { header, title, body, content }) => vod`

nodesdragged|Notifies which nodes dragging just ended|`(nodes) => void`

removeConfirmationRequired|Notifies that remove confirmation required. Pass nodes and connections selected to remove|`(nodes, connections) => void`

movediff|Notifies about change in chart view position|`(diff: {x: number, y: number}) => void`



### Properties.Node



Property|Description        |Type|Default

-|-|-|-

id|ID|`Number`|`+new Date()`

x|Horizontal position of node|`Number`|-

y|Vertical position of node|`Number`|-

type|Type of node|`String`|`'operation'`

width|Width of node|`Number`|`120`

height|Height of node|`Number`|`60`

approvers|Approvers of node, eg: [{name: 'admin'}]|`Array`|[]

connectors|Defines which connectors should be rendered|`Array`|['top', 'right', 'bottom', 'left']

theme|Defines colors for specified node elements|`Object`|`{ borderColor: "#bbbbbb", borderColorSelected: "#666666", headerTextColor: "black", headerBackgroundColor: "#f1f3f4", bodyBackgroundColor: "white", bodyTextColor: "black" }`



### Properties.Connection



Property|Description        |Type|Default

-|-|-|-

id|ID|`Number`|`+new Date()`

source|Source of connection|`Object`|-

destination|Destination of connection|`Object`|-

type|Type of connection|`String`|`pass`



### Properties.Connection.Source & Properties.Connection.Destination



Property|Description        |Type|Default

-|-|-|-

id|Node id|`Object`|-

position|Starting/Ending position of node|`Object`|-



### Slot

If you want you can pass value as slot. It allows you to add new UI elements to chart playground.

These slot elements aren't selectable - are ignored while selection. Moreover actions on click and on double click are disabled

in area filled by passed elements. 

You can use this functionality to e.g. in quite easy way add toolbar inside.



```vue



  


    Delete(Del)

    

      Edit(Double-click node)

    

    Save

  



```