基于流的编程js html ui答案

【问题标题】：Flow based programming js html ui基于流的编程js html ui
【发布时间】：2018-12-09 18:51:02
【问题描述】：

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

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

输入 -> 过程 -> 输出

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

所以它基本上是一个函数：

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

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

如果能帮助我构建一个简单的 UI 来执行以下操作，我将不胜感激。

【问题讨论】：

标签： javascript html css node.js dom-events

【解决方案1】：

您也可以使用 jsplumb 工具包。

它允许您快速构建具有视觉连接的应用程序。它支持拖放、连接两个节点、平移和缩放功能、迷你地图等

Jsplumb 工具包网站位于link。

浏览他们的演示，你会确信你正在寻找相同的

【讨论】：

你能举出上面的例子吗？
浏览他们的文档。他们有很多相同的例子。

【解决方案2】：

JSPlumb 似乎要花 3000 美元购买一份开发者许可证！这是一个免费的开源库，我发现它压缩后只有 10kb：https://github.com/shamansir/rpd

Total.js 好像有a library for flow-based stuff（也是免费的）：

【讨论】：