FP Flow is a flow library that is very small and built on vanillajs. You can pass on a simple node of your html element and it creates the node. You can create the connections as well very easily, with simple javascript.
Go to flow's github page to refer to example code and proper uses.
- Install the package by running
npm install. - Import the
main.cssthat is passed with this package, into your project. - Create a container with class
fp-flow-containerand make sure it takes the height you intend for. Apply height if necessary. Careful, it has to match the class name exactly. - You are ready to go.
- Import the class
Flowfrom the package. - Instantiate
Flow. Eg.:const flow = new Flow(). - Call the methods provided by the instantiated object created from
Flowclass to perform specific tasks.
There are various methods that can be easily viewed but the most used are descibed below.
HTMLElement of the node. If you are using React, use createElement method. For angular you have to use Dynamic Component Rendering.
To add a node, simply call addNode method on the intantiated object by passing the html element of your node that you want to create.
Id of the node that you received on calling addNode method.
To remove a node, you simply call removeNode method on the intantiated object by passing the id of your node that you got by doing addNode.
Node1Id, Node2Id. The ids of the nodes you want to connect.
To add a connection, simply call addConnection method on the intantiated object by passing the ids of the nodes that you want to connect.
Node1Id, Node2Id. The ids of the nodes you want to remove the connection of.
To remove a connection between two nodes, simply call removeConnection method on the intantiated object by passing the ids of the nodes that you want to connect.
If you want to save the flow for reuse, which you would be doing in most cases, call getRenditionInfo to get the data that you can pass to your backend. This is the minimum data required by this flow library to be rendered. In the each node object inside flow.nodes array. the data property can also be used to set extra information about the element or its state.
Saved flow object
Once you saved your rendition data, call renderSavedFlow method to render the the flow next time after you brought the data from API. Remember to create the nodes with elements by calling node.element = <html element> and their state, that you saved to node.data property. Don't call the addNode or addConnection or any other method before calling renderSavedFlow when you have the pre-saved flow data and you want to render that flow.
const flow = new Flow();
flow.nodes.forEach(node => {
const el = document.createElement('div');
el.innerText = "Hi";
});
flow.renderSavedFlow(savedFlowObj);
Call this method to refresh the canvas anytime you do any change to the elements.
There are mainly two types of properties. One is for the flow object we created from the Flow class, another is the node object we got from calling addNode.
The flow object can be gotten by calling new Flow(). Following are its properties.
This returns all the array of nodes you created
This gives the container element
This gives the canvas on which we are drawing the blocks. It's an html div element. You can easily set style or background color.
Width of the connection strokes. It has the same unit as canvas context line width. It's changable directly.
It gives you the color of the strokkeline. It's also directly changeable.
You can get the node object on calling the addNode method. Following are its main properties.
This returns the node element you passed.
This is the property you would like to put most focus on as you can store your data here. You can modify, reasign and delete as you do with js objects. Be careful not to save the whole node object in backend as it holds unnecessary information.
Look at renderSavedFlow method.
- Add comments
- Remove event listeners
- Apply requestAnmationFrame