Javascript Library to build drag and drop interface and connect elements with line

Question

I am looking for an approach or Javascript library that I can use to build a scientific modeling application. I suppose this is analogues to the way flowcharting software like Visio works. Add elements and connect them with click and drag.

I need to be able to define certain elements and add them to the "canvas" by selecting the element and dragging them onto the canvas.

When I click on an element I need to be able to set certain parameters for that element.

I also need to be able to connect one element to another by clicking on one and dragging a line to the second element.

I am looking for some advise on the best javascript library or approach to use. I will probably build the app in Vue.js as I have some experience using it.

Answer 1

考虑到更复杂的功能集，我选择了mxgraph（draw.io 库）。它很旧，很重，很复杂，它是用普通的 javascript 编写的，为了使其与 Vue 一起工作，你可能需要自己编写集成。但它确实有效，隧道尽头就有光明。

对我来说最重要的部分是：自定义复杂形状支持（例如，带有组和“手柄” - 例如，这些黄点用于在 Visio 中“调整”某些形状片段）、撤消/重做、保存/加载， 打印。

joint.js（“rappid”现在）可能是我的第二个赌注，如果 mxgraph 不会削减它（不确定它如何比较，但功能列表包括我需要的项目）

总有一个选项可以使用纯 JavaScript 来完成这一切；你有 svg.js、snap.svg 等基本库可以实现这一点。即使使用普通的 JavaScript，通过拖放移动形状也没有问题。但在这种情况下，连接器路由和撤消/重做将由您负责，这有点困难。

如果您发现比这些选项更好的东西，请告诉我！

顺便说一句，Visio Online 现在根本不支持自定义形状。