Skip to content

joyceworks/flowchart-vue

Repository files navigation

Flowchart

Flowchart & Flowchart designer component for Vue.js(flowchart-react for React.js).

NPM

image

Usage

yarn add flowchart-vue
<template>
    <div id="app">
        <button type="button" @click="$refs.chart.add({id: +new Date(), x: 10, y: 10, name: 'New', type: 'operation', approvers: []})">
            Add
        </button>
        <button type="button" @click="$refs.chart.remove()">
            Del
        </button>
        <button type="button" @click="$refs.chart.editCurrent()">
            Edit
        </button>
        <button type="button" @click="$refs.chart.save()">
            Save
        </button>
        <button type="button" v-if="showRemovingConfirmation" @click="confirmRemoving">
            Confirm removing
        </button>
        <button type="button" v-if="showRemovingConfirmation" @click="showRemovingConfirmation = false">
            Reject removing
        </button>
        <flowchart :nodes="nodes" 
                   :connections="connections" 
                   :remove-requires-confirmation="true"
                   @editnode="handleEditNode"
                   @dblclick="handleDblClick" 
                   @editconnection="handleEditConnection"
                   @removeconfirmationrequired="initRemovingConfirmation"
                   @save="handleChartSave" ref="chart">
        </flowchart>
    </div>
</template>
<script>
  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;
      }
    }
  };
</script>

See more at src/views/App.vue.

Demo

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.

<flowchart ...>
  <div id="toolbox" style="position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; 
                           display: flex; align-items: center; 
                           background-color: rgba(225, 225, 225, 0.7);">
    <button @click="$refs.chart.remove()">Delete(Del)</button>
    <button @click="$refs.chart.editCurrent()">
      Edit(Double-click node)
    </button>
    <button @click="$refs.chart.save()">Save</button>
  </div>
</flowchart>