Flowchart & Flowchart designer component for Vue.js(flowchart-react for React.js).
Usage
<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.
DemoDevelopment Environment
git clone https://github.com/joyceworks/flowchart-vue.git cd flowchart-vue yarn install yarn run serve
Then open http://localhost:yourport/ in browser.
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>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4