JS Tutorial
Download
Demo
- Overview
- Documents
User Rating: 4.8/5 ( 1 votes)
Your Rating:
Drawflow is a simple javascript flow library that allows you to create data flows easily and quickly.
Features
- Drag Nodes
- Multiple Inputs / Outputs
- Multiple connections
- Delete Nodes and Connections
- Add/Delete inputs/outputs
- Reroute connections
- Data sync on Nodes
- Zoom in / out
- Clear data module
- Support modules
- Editor mode edit, fixed or view
- Import / Export data
- Events
- Mobile support
- Vanilla javascript (No dependencies)
- NPM
- Vue Support component nodes && Nuxt
Source: github.com
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css"> <script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
2. HTML
<div id="drawflow"></div>
3. JAVASCRIPT
var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.start();
4. Mouse and Keys
- del key to remove element.
- Right click to show remove options (Mobile long press).
- Left click press to move editor or node selected.
- Ctrl + Mouse Wheel Zoom in/out (Mobile pinch).
5. Editor
You can change the editor to fixed type to block. Only editor can be moved. You can put it before start.
editor.editor_mode = 'edit'; // Default editor.editor_mode = 'fixed'; // Only scroll
You can also adjust the zoom values.
editor.zoom_max = 1.6; editor.zoom_min = 0.5; editor.zoom_value = 0.1;
6. Editor options
| Parameter | Type | Default | Description |
|---|---|---|---|
| reroute | Boolean | false | Active reroute |
| reroute_fix_curvature | Boolean | false | Fix adding points |
| curvature | Number | 0.5 | Curvature |
| reroute_curvature_start_end | Number | 0.5 | Curvature reroute first point and las point |
| reroute_curvature | Number | 0.5 | Curvature reroute |
| reroute_width | Number | 6 | Width of reroute |
| line_path | Number | 5 | Width of line |
| force_first_input | Boolean | false | Force the first input to drop the connection on top of the node |
| editor_mode | Text | edit | edit for edit, fixed for nodes fixed but their input fields available, view for view only |
| zoom | Number | 1 | Default zoom |
| zoom_max | Number | 1.6 | Default zoom max |
| zoom_min | Number | 0.5 | Default zoom min |
| zoom_value | Number | 0.1 | Default zoom value update |
| zoom_last_value | Number | 1 | Default zoom last value |
| draggable_inputs | Boolean | true | Drag nodes on click inputs |
| useuuid | Boolean | false | Use UUID as node ID instead of integer index. Only affect newly created nodes, do not affect imported nodes |
Reroute
Active reroute connections. Use before start or import.
editor.reroute = true;
Create point with double click on line connection. Double click on point for remove.
7. Modules
Separate your flows in different editors.
editor.addModule('nameNewModule');
editor.changeModule('nameNewModule');
editor.removeModule('nameModule');
// Default Module is Home
editor.changeModule('Home');
RemovedModule if it is in the same module redirects to the Home module
8. Nodes
Adding a node is simple.
editor.addNode(name, inputs, outputs, posx, posy, class, data, html);
| Parameter | Type | Description |
|---|---|---|
| name | text | Name of module |
| inputs | number | Number of de inputs |
| outputs | number | Number of de outputs |
| pos_x | number | Position on start node left |
| pos_y | number | Position on start node top |
| class | text | Added classname to de node. Multiple classnames separated by space |
| data | json | Data passed to node |
| html | text | HTML drawn on node or name of register node. |
| typenode | boolean & text | Default false, true for Object HTML, vue for vue |
You can use the attribute df-* in inputs, textarea or select to synchronize with the node data and contenteditable.
Atrributs multiples parents support df-*-*...
9. Methods
Other available functions.
| Mehtod | Description |
|---|---|
| zoom_in() | Increment zoom +0.1 |
| zoom_out() | Decrement zoom -0.1 |
| getNodeFromId(id) | Get Info of node. Ex: id: 5 |
| getNodesFromName(name) | Return Array of nodes id. Ex: name: telegram |
| removeNodeId(id) | Remove node. Ex id: node-x |
| updateNodeDataFromId | Update data element. Ex: 5, { name: 'Drawflow' } |
| addNodeInput(id) | Add input to node. Ex id: 5 |
| addNodeOutput(id) | Add output to node. Ex id: 5 |
| removeNodeInput(id, input_class) | Remove input to node. Ex id: 5, input_2 |
| removeNodeOutput(id, output_class) | Remove output to node. Ex id: 5, output_2 |
| addConnection(id_output, id_input, output_class, input_class) | Add connection. Ex: 15,16,'output_1','input_1' |
| removeSingleConnection(id_output, id_input, output_class, input_class) | Remove connection. Ex: 15,16,'output_1','input_1' |
| updateConnectionNodes(id) | Update connections position from Node Ex id: node-x |
| removeConnectionNodeId(id) | Remove node connections. Ex id: node-x |
| getModuleFromNodeId(id) | Get name of module where is the id. Ex id: 5 |
| clearModuleSelected() | Clear data of module selected |
| clear() | Clear all data of all modules and modules remove. |
Methods example
editor.removeNodeId('node-4');
10. Events
You can detect events that are happening.
List of available events:
| Event | Return | Description |
|---|---|---|
| nodeCreated | id | id of Node |
| nodeRemoved | id | id of Node |
| nodeDataChanged | id | id of Node df-* attributes changed. |
| nodeSelected | id | id of Node |
| nodeUnselected | true | Unselect node |
| nodeMoved | id | id of Node |
| connectionStart | { output_id, output_class } | id of nodes and output selected |
| connectionCancel | true | Connection Cancel |
| connectionCreated | { output_id, input_id, output_class, input_class } | id's of nodes and output/input selected |
| connectionRemoved | { output_id, input_id, output_class, input_class } | id's of nodes and output/input selected |
| connectionSelected | { output_id, input_id, output_class, input_class } | id's of nodes and output/input selected |
| connectionUnselected | true | Unselect connection |
| addReroute | id | id of Node output |
| removeReroute | id | id of Node output |
| rerouteMoved | id | id of Node output |
| moduleCreated | name | name of Module |
| moduleChanged | name | name of Module |
| moduleRemoved | name | name of Module |
| click | event | Click event |
| clickEnd | event | Once the click changes have been made |
| contextmenu | event | Click second button mouse event |
| mouseMove | { x, y } | Position |
| mouseUp | event | MouseUp Event |
| keydown | event | Keydown event |
| zoom | zoom_level | Level of zoom |
| translate | { x, y } | Position translate editor |
| import | import | Finish import |
| export | data | Data export |
Events example
editor.on('nodeCreated', function(id) {
console.log("Node created " + id);
})
Export / Import
You can export and import your data.
var exportdata = editor.export(); editor.import(exportdata);
