JointJS 库中删除顶点和链接的确认对话框

Question

我正在尝试在删除

vertex

和

link

的

Finite State Machine demo

的

Joint Js lib v-2.2

之前添加确认对话框。

源代码参考：

https://resources.jointjs.com/demos/fsa

https://resources.jointjs.com/demos/joint/demo/fsa/src/fsa.js

我想仅在用户在对话框中确认后才触发

built in remove event

。

我正在尝试

graph: any;
paper: any;

this.graph = new joint.dia.Graph; 

this.paper = new joint.dia.Paper({
  el: $('#paper'),
  width: 800,
  height: 600,
  gridSize: 1,
  model: this.graph,
  background: {
    color: 'rgba(0, 255, 0, 0.3)'
  }
});

 /* not working */
 this.paper.on('tool:remove', function(linkView, evt) {
  evt.stopPropagation();
  if (confirm('Are you sure you want to delete this element?')) {
    linkView.remove();
  }
});


/* not working */
this.paper.on('element:delete', function(elementView, evt) {
   evt.stopPropagation();
  if (confirm('Are you sure you want to delete this element?')) {
    elementView.model.remove();
  }
});

我也从这里尝试过，但不起作用。 JointJS - 处理链接删除点击

Answer 1

我想您使用 ToolsView 的“删除”按钮来删除图表上的元素。 如果是这样，请将“操作”选项添加到“删除”按钮构造函数中，如下所示：

const elToolsView = new dia.ToolsView({
    tools: [
        new elementTools.Remove({
            x: "100%",
            y: 0,
            offset: { x: 10, y: -10 },
            action: () => confirmRemoval(el2) //--- ADD THIS
        })
    ]
});

function confirmRemoval(cell) {
    showDialog({
        text: "Are you sure you want to remove this element?",
        yesText: "Remove",
        yes: () => cell.remove(), //only when the user confirms, delete
        noText: "Cancel"
    });
}

可以在这里找到完整的示例：https://www.jointjs.com/blog/demo-friday-confirmation-dialogs