Implementing Visual Work flow in VUE Applications with RETE.JS
As per Official Site Rete. Js (https://rete.js.org)
Before reading further please spend some time on following example from official Rete. Js creators to get some idea about Rete library.
or Let’s say I want to have Visual work flow to update my linked in, Facebook & twitter with my medium articles based on my used Hash Tags.
For one of the use case ,I have to implement visual work flow support in VUE application .
Thanks to my you tube suggestions & stackshare,I have found this cool & new library which has flexibly of customizing visual workflows as per your need.
Install Rete
If you are a full stack developer you know where to start
npm install rete rete-vue-render-plugin rete-connection-plugin
//Main
import Rete from “rete”;
// Plugin to support Connection between Nodes
import ConnectionPlugin from ‘rete-connection-plugin’;
// Plugin for Rendering Worflow blocks
import VueRenderPlugin from ‘rete-vue-render-plugin’;
Editor & Engine
In rete.js world main components are Editor & Engine.
Editor is an drawing area contains different nodes and connections between their sockets
It has following features
- Interaction with the Drawing area like move your blocks and Add,Delete blocks
- Display connections between different nodes and there sockets,UI Controls
- Event handling
- Supporting functionality from Rete.Js plugins
Engine allows you to process data between nodes and transfer them to output to the input.
Nodes
Node is single block with name,input,out and controls
SOCKET
Sockets will used to define input and output which will be used to connect two different node blocks .
const socketName = new Rete.Socket(‘SocketName’);
Components & Controls
Component is where Rete.js library will build & process node.You can configure your control to use and all your required parameters as constructor parameters
class CustomReteComponent extends Rete.Component {
constructor() {
super(“My Component”); // name
}
//Styling and Control to Use
builder(node) {
/// modify the node
}
// Process Data Via Engine
worker(node, inputs, outputs) {
/// process data
}
}
Control
Control is where as you can start injecting your VUE Components and work well with Rete.Nodes
class UIControl extends Rete.Control { constructor(emitter, key, readonly)
{ super(key);
this.component = MyVueComponent;
this.props = { emitter, ikey: key, readonly }; }
setValue(val) { this.vueContext.value = val; }
}
this.data.render = ‘vue’;
Events
In my working experience with Rete.js ,this is the part impressed me a lot .
“In-built events to capture user actions provided by library.”
it will give lot of control over work flow actions and can be used to customize all nodes and connection paths & JSON output response.
editor.on(‘eventName’, node => {
// Custom Logic
//
})
Plugins
Rete.js library provides plugins to extend functionality of Nodes & Editor.
For Example , by using Context Menu Plugin we can have context menu with Clone/Delete option for Node.
By using History Plugin,We can Undo/Redo Actions on Editor.
By using Connection path,We can customize Connections path ,color and other attributes.
Example : https://codepen.io/Ni55aN/pen/XydYbB?editors=0010
Highlights
Easy integration with VUE Framework
Easy to Customize
Easy to Convert Visual Work flow as JSON Object and Vice Versa
Easy to Track/Bind User Actions
