如何在 vis.js 中将操作 GUI 替换为我自己的

Question

我的问题是关于 vis.js 中的默认操作用户界面：

我想用我自己的控件替换 vis.js 中现有的操作用户界面，这样我就可以右键单击网络来添加或删除节点和边。

我从 this issue 可以看出，在 2014 年这是不可能的，但可能可以将某些东西一起破解（尽管那里的链接不再有效）。我希望在过去的 5 年里，这已经成为可能，而无需分叉项目。

问题:
是否可以禁用现有的用户界面并连接我自己的控件？

Answer 1

简短回答是的，您可以在此处查看它的运行情况：https://thomaash.github.io/me/#/canvas and in code here https://github.com/Thomaash/me/blob/master/src/components/Vis.vue（它是相当大的 Vue.js 应用程序的一部分）。

文档里都有。从 GUI 触发操作操作的方法记录在此处：https://visjs.github.io/vis-network/docs/network/#methodManipulation。在这里：https://visjs.github.io/vis-network/docs/network/manipulation.html you have the docs to the callbacks that allow you to react to the user placing the node or connecting nodes with an edge. If you want to react to events (for example oncontext from your question) you can find the docs here: https://visjs.github.io/vis-network/docs/network/#Events .

Answer 2

以及如何将 angular MatDialog 放入添加边的函数中？

  manipulation: {
    enabled: false,
    addEdge: this.addEdge
  }

在这种情况下 dialogRef = undefined 并且我无法打开模式 window 来填写表格。

addEdge(edgeData: any, callback: any) {
    const dialogRef = this._dialog.open(CreateEdgeModalComponent, {
      width: window.innerWidth > 960 ? '23%' : '40%',
    });
    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        edgeData.label = ' ';
        edgeData.labelFrom = result;
        edgeData.labelTo = prompt('Please enter edge label', '');
        callback(edgeData);
      }
    })
  }

如何在 vis.js 中将操作 GUI 替换为我自己的

How to replace manipulation GUI with my own in vis.js

user-interface

vis.js

vis.js-network