flow based programing js html ui

问题

I need your great help on how to create a Simple Flow based UI in JS.

For my simple structure I will have 3 node groups that will connect like so :

Input -> Process -> output

For the below example I would like to just start of with a static input value of x=65 that can be connected via a connector to a process of either x+10 or x+10000 and depending on which ever is selected the out put is shown.

so its basically a function

function input(){
x=65;
return x;
}

function processadd10(x){
x=x+10;
return x;
}

function processadd10000(x){
x=x+10000;
return x;
}

function output(x){
return "after processing the value of X is".X;
}

The part I need help with is how can i implement a flow based User interface where i can drag and connect the releavent boxes to create an output..

I would appreciate any help in building a simple ui to do the below .

回答1:

You can use the jsplumb toolkit for the same.

It allows you to build application with visual connectivity fast. It has support for drag n drop, connecting two nodes, pan and zoom feature, mini map etc

Jsplumb toolkit website is at link.

Go through their demos and you will be convinced that you are looking for the same

回答2:

JSPlumb seems to cost $3000 for one developer license! Here's a free, open-source library that I found that's only 10kb gzipped: https://github.com/shamansir/rpd

And Total.js seems to have a library for flow-based stuff (also free):

来源：https://stackoverflow.com/questions/51120991/flow-based-programing-js-html-ui