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

pu82cl6c 于 2023-11-19 发布在其他

关注(0)|答案(1)|浏览(131)

我试图在删除Joint Js lib v-2.2的Finite State Machine demo的vertex和link之前添加确认对话框。
源代码参考：
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 - handling a Link Delete click

backbone.js

来源：https://stackoverflow.com/questions/54923396/confirmation-dialog-on-remove-vertex-and-link-in-jointjs-library

1条答案

按热度按时间

yh2wf1be1#

我假设你使用ToolsView的“Remove”按钮来删除图表上的元素。如果是这样，将“action”选项添加到“Remove”按钮构造函数中，如下所示：

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

赞(0）回复(0）举报 2023-11-19

我来回答

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

1条答案

相关问题

热门标签

最新问答