Javascript 流生成器（可视化编辑器）

我想为我的客户构建一个流生成器，为他们提供一种在我的仪表板编辑器中构建数据的完整方法，灵感来自

我有一个简单的应用程序，它有UI编辑器，我需要构建一个工作流工具，允许人们将节点拖到画布上，将节点的输出连接到其他节点的输入。。。缩放等

我的灵感来自于一个你可以在这里看到的许多帽子编辑器

更多关于它在许多帽子中的外观

正在寻找关于如何开始的建议。。。好奇是否有框架/库，有人会建议让这更容易，或者只是确认我应该开始快速编写Javascript来处理拖拽/删除/线条绘制等

我找到了这个名为rete.js的库

到目前为止，这就是我所拥有的

js

var numSocket=new Rete.Socket（'Number-value'）；
变量VueNumControl={
道具：['readonly'，'emitter'，'ikey'，'getData'，'putData']，
模板：“”，
数据（）{
返回{
值：0，
}
},
方法：{
更改（e）{
this.value=+e.target.value；
这个.update（）；
},
更新（）{
如果（this.ikey）
this.putData（this.ikey，this.value）
this.emitter.trigger（'process'）；
}
},
安装的（）{
this.value=this.getData（this.ikey）；
}
}
类NumControl扩展了Rete.Control{
构造函数（发射器、密钥、只读）{
超级（键）；
this.component=VueNumControl；
this.props={emitter，ikey:key，readonly}；
}
设定值（val）{
this.vueContext.value=val；
}
}
类NumComponent扩展了Rete.Component{
构造函数（）{
超级（“数字”）；
}
生成器（节点）{
var out1=新网输出（'num'，'Number'，numSocket）；
返回node.addControl（新的NumControl（this.editor，'num'））.addOutput（out1）；
}
工人（节点、输入、输出）{
输出['num']=node.data.num；
}
}
类AddComponent扩展了Rete.Component{
构造函数（）{
超级（“添加”）；
}
生成器（节点）{
var inp1=新的网输入（'num1'，'Number'，numSocket）；
var inp2=新的网输入（'num2'，'Number2'，numSocket）；
var out=新的网输出（'num'，'Number'，numSocket）；
inp1.addControl（新的NumControl（this.editor，'num1'））
inp2.addControl（新的NumControl（this.editor，'num2'））
返回节点
.addInput（inp1）
.addInput（inp2）
.addControl（新的NumControl（此.editor“preview”，true））
.addOutput（输出）；
}
工人（节点、输入、输出）{
var n1=输入['num1'].length？输入['num1'][0]：node.data.num1；
var n2=输入['num2'].length？输入['num2'][0]：node.data.num2；
var总和=n1+n2；
this.editor.nodes.find（n=>n.id==node.id）.controls.get（'preview'）.setValue（sum）；
输出['num']=总和；
}
}
（异步（）=>{
var container=document.querySelector（“#rete”）；
var components=[new NumComponent（），new AddComponent（）]；
var editor=new Rete.NodeEditor（'demo@0.1.0",货柜),；
使用（ConnectionPlugin.default）；
使用（VuenderPlugin.default）；
使用（ContextMenuPlugin.default）；
编辑器.使用（AreaPlugin）；
使用（CommentPlugin.default）；
使用（HistoryPlugin）；
use（ConnectionMasteryPlugin.default）；
var engine=新的网引擎（'demo@0.1.0');
components.map（c=>{
编辑登记册（c）；
发动机记录器（c）；
});
var n1=等待组件[0]。createNode（{num:2}）；
var n2=等待组件[0]。createNode（{num:0}）；
var add=等待组件[1]。createNode（）；
n1.位置=[80200]；
n2.位置=[80400]；
add.position=[500240]；
addNode（n1）；
editor.addNode（n2）；
editor.addNode（add）；
connect（n1.outputs.get（'num'）、add.inputs.get（'num1'））；
connect（n2.outputs.get（'num'）、add.inputs.get（'num2'））；
on（'process nodecreated noderemoved connectioncreated connectionremoved'，async（）=>{
console.log（'process'）；
等待引擎。中止（）；
wait engine.process（editor.toJSON（））；
});
editor.view.resize（）；
AreaPlugin.zoomAt（编辑器）；
触发器（'process'）；
})();

这里是HTML

<div id="rete"></div>

<a target="_blank" href="https://github.com/retejs/rete"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>

这是代码笔

不幸的是，这并不能满足我的要求

---

我需要做什么才能得到我需要的？或者有没有我可以尝试的库？

许多人使用PIXI.js构建流生成器。我在阅读他们的捆绑代码时发现了自己（谁他妈的读过编译代码，是的，我读过：）

似乎他们使用了React-PIXI——PIXI.js的React包装器（我不确定这一点）

根据这一观察，我可以使用VueJS（在我以前公司的一个项目中）构建自己的一个

你应该看看碧溪。给您的一些重要通知（我从Manychat的想法和实施过程中收集的所有信息）：

• 记住将画布的宽度和高度属性加倍，然后使用CSS将画布的样式设置为宽度和高度的一半。这样做将使您的画布具有高质量。例如：

• 其中一个困难的部分是让箭头连接两个块，我读了Manychat的编译代码，发现了，不记得它到底是什么，但基本上他们把箭头分成两个对称的部分，并开始把它们画到它们的中心，你可以读它并发现你自己（如果你幸运的话，LOL），它在

  main.js

• 另一个困难的部分是将Vue数据反映到画布中，画布不是DOM，任何更改都必须重新绘制整个画布，所以要小心操作
• 不要渲染多个图像，这会增加成本
• 对于对象捕捉，您可以学习KonvaJS的思想（他们有一个例子）
• 对于pin、pan和Zoom，您可以使用PIXI在谷歌上搜索示例
• 单击块时，相机将通过一些动画（先放大后缩小，

  <div id="rete"></div>
  
  <a target="_blank" href="https://github.com/retejs/rete"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>