基于流的编程js html ui [英] Flow based programming js html ui

问题描述

在如何在JS中创建基于简单流的UI方面，我需要您的大力帮助.

对于我的简单结构，我将有3个节点组，它们将像这样进行连接:

输入->处理->输出

对于下面的示例，我想以x = 65的静态输入值开始，该值可以通过连接器连接到x + 10或x + 10000的过程，并取决于选择了哪个显示了输出.

所以它基本上是一个功能:

 函数input(){x = 65；返回x;}函数processadd10(x){x = x + 10;返回x;}函数processadd10000(x){x = x + 10000；返回x;}函数输出(x){在处理后返回"X的值为".} 

需要帮助的部分是如何实现基于流的用户界面，在其中可以拖动并连接相关框以创建输出.

在构建简单的UI来完成以下操作方面，我将不胜感激.

解决方案

JSPlumb一张开发者许可证似乎要花费3000美元！这是一个免费的开源库，我发现它压缩后只有10kb:

Total.js似乎有

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 relevant boxes to create an output..

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

解决方案

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

这篇关于基于流的编程js html ui的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！