All Projects → jerosoler → Drawflow

jerosoler / Drawflow

Licence: mit
Simple flow library 🖥️🖱️

Programming Languages

javascript
184084 projects - #8 most used programming language
flow
126 projects

Projects that are alternatives of or similar to Drawflow

dspatch
The Refreshingly Simple Cross-Platform C++ Dataflow / Pipelining / Stream Processing / Reactive Programming Framework
Stars: ✭ 124 (-83.01%)
Mutual labels:  dataflow, flow-based-programming, dataflow-programming
flowd
An inter-language runtime for flow-based programming (FBP)
Stars: ✭ 18 (-97.53%)
Mutual labels:  dataflow, flow-based-programming, dataflow-programming
Flowbase
A Flow-based Programming inspired micro-framework / un-framework for Go (Golang)
Stars: ✭ 129 (-82.33%)
Mutual labels:  dataflow, flow-based-programming
Chigraph
A visual systems language for beginners compiled using LLVM
Stars: ✭ 247 (-66.16%)
Mutual labels:  dataflow, dataflow-programming
Raftlib
The RaftLib C++ library, streaming/dataflow concurrency via C++ iostream-like operators
Stars: ✭ 717 (-1.78%)
Mutual labels:  dataflow, dataflow-programming
Rete
JavaScript framework for visual programming and creating node editor
Stars: ✭ 7,156 (+880.27%)
Mutual labels:  dataflow-programming, flow-based-programming
Plumber
The General-Purpose Cross-Language Dataflow Programming
Stars: ✭ 26 (-96.44%)
Mutual labels:  dataflow-programming, flow-based-programming
Dnai.Editor
Dnai Editor - Visual Scripting (Node Editor)
Stars: ✭ 117 (-83.97%)
Mutual labels:  dataflow, dataflow-programming
cocoon-demo
Cocoon – a flow-based workflow automation, data mining and visual analytics tool.
Stars: ✭ 19 (-97.4%)
Mutual labels:  dataflow, flow-based-programming
DFiant
DFiant: A Dataflow Hardware Descripition Language
Stars: ✭ 21 (-97.12%)
Mutual labels:  dataflow, dataflow-programming
Gojs
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
Stars: ✭ 5,739 (+686.16%)
Mutual labels:  flowchart, javascript-library
Nipype
Workflows and interfaces for neuroimaging packages
Stars: ✭ 557 (-23.7%)
Mutual labels:  dataflow, dataflow-programming
Warewolf
Effortless Microservice Design and Integration. This repository includes the code-base for the Warewolf Studio and Server.
Stars: ✭ 238 (-67.4%)
Mutual labels:  flow-based-programming, flowchart
Fgbase
Ready-send coordination layer on top of goroutines.
Stars: ✭ 45 (-93.84%)
Mutual labels:  dataflow, flow-based-programming
Flowy
The minimal javascript library to create flowcharts ✨
Stars: ✭ 8,636 (+1083.01%)
Mutual labels:  flowchart, javascript-library
act
ACT hardware description language and core tools.
Stars: ✭ 53 (-92.74%)
Mutual labels:  dataflow, dataflow-programming
Rpd
👌 A Minimal Engine for creating Node-Based Visual Programming User Interfaces
Stars: ✭ 370 (-49.32%)
Mutual labels:  dataflow-programming, flow-based-programming
Shenzhen Go
Experimental visual Go environment
Stars: ✭ 450 (-38.36%)
Mutual labels:  dataflow, flowchart
Presenta Lib
A javascript library to build expressive web presentations in seconds.
Stars: ✭ 614 (-15.89%)
Mutual labels:  javascript-library
Pixi Particles
A particle system for PixiJS
Stars: ✭ 555 (-23.97%)
Mutual labels:  javascript-library

npm npm npm bundle size GitHub license Twitter URL

Drawflow

Demo

Simple flow library.

Drawflow allows you to create data flows easily and quickly.

Installing only a javascript library and with four lines of code.

LIVE DEMO

🎨 THEME EDIT GENERATOR

Table of contents

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 fixed and edit
  • Import / Export data
  • Events
  • Mobile support
  • Vanilla javascript (No dependencies)
  • NPM
  • Vue Support component nodes && Nuxt

Installation

Download or clone repository and copy the dist folder, CDN option Or npm.

Clone

git clone https://github.com/jerosoler/Drawflow.git

CDN

<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>

NPM

npm i drawflow

Typescript

External package. More info #119

npm install -D @types/drawflow

Import

import Drawflow from 'drawflow'
import styleDrawflow from 'drawflow/dist/drawflow.min.css'

Require

var Drawflow = require('drawflow')
var styleDrawflow = require('drawflow/dist/drawflow.min.css')

Create the parent element of drawflow.

<div id="drawflow"></div>

Running

Start drawflow.

var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.start();
Parameter Type Description
id Object Name of module
render Object It's for Vue.

For vue 2 example.

import Vue from 'vue'

// Pass render Vue
this.editor = new Drawflow(id, Vue);

For vue 3 example.

import * as Vue from 'vue'

// Pass render Vue
this.editor = new Drawflow(id, Vue);

Nuxt

Add to nuxt.config.js file

build: {
    transpile: ['drawflow'],
    ...
  }

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).

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;

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 or fixed mode
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 doble click on line connection. Doble click on point for remove.

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

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
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.

Atrributs multiples parents support df-*-*...

Node example

var html = `
<div><input type="text" df-name></div>
`;
var data = { "name": '' };

editor.addNode('github', 0, 1, 150, 300, 'github', data, html);

Register Node

it's possible register nodes for reuse.

var html = document.createElement("div");
html.innerHTML =  "Hello Drawflow!!";
editor.registerNode('test', html);
// Use
editor.addNode('github', 0, 1, 150, 300, 'github', data, 'test', true);

// For vue
import component from '~/components/testcomponent.vue'
editor.registerNode('name', component, props, options);
// Use for vue
editor.addNode('github', 0, 1, 150, 300, 'github', data, 'name', 'vue');
Parameter Type Description
name text Name of module registered.
html text HTML to drawn or vue component.
props json Only for vue. Props of component. Not Required
options json Only for vue. Options of component. Not Required

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');

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
nodeSelected id id of Node
nodeUnselected true Unselect node
nodeMoved id id of Node
connectionStart { output_id, output_class } id of nodes and ouput selected
connectionCancel true Connection Cancel
connectionCreated { output_id, input_id, output_class, input_class } id's of nodes and ouput/input selected
connectionRemoved { output_id, input_id, output_class, input_class } id's of nodes and ouput/input selected
connectionSelected { output_id, input_id, output_class, input_class } id's of nodes and ouput/input selected
connectionUnselected true Unselect connection
addReroute id id of Node output
removeReroute 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
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);

Export example

Example of exported data:

{
    "drawflow": {
        "Home": {
            "data": {}
        },
        "Other": {
            "data": {
                "16": {
                    "id": 16,
                    "name": "facebook",
                    "data": {},
                    "class": "facebook",
                    "html": "\n        
\n          
 Facebook Message
\n        
\n        ",
                    "inputs": {},
                    "outputs": {
                        "output_1": {
                            "connections": [
                                {
                                    "node": "17",
                                    "output": "input_1"
                                }
                            ]
                        }
                    },
                    "pos_x": 226,
                    "pos_y": 138
                },
                "17": {
                    "id": 17,
                    "name": "log",
                    "data": {},
                    "class": "log",
                    "html": "\n            
\n              
 Save log file
\n            
\n            ",
                    "inputs": {
                        "input_1": {
                            "connections": [
                                {
                                    "node": "16",
                                    "input": "output_1"
                                }
                            ]
                        }
                    },
                    "outputs": {},
                    "pos_x": 690,
                    "pos_y": 129
                }
            }
        }
    }
}

Example

View the complete example in folder docs.
There is also an example how to use Drawflow in a custom element. (based on LitElement).

License

MIT License

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].