javascript - 删除节点数据时如何在 GoJS 中动画删除？

Question

我正在尝试以动画方式删除图中的节点

我正在使用 GoJS 文档中的这段代码: https://gojs.net/latest/intro/animation.html

myDiagram.addDiagramListener('SelectionDeleting', function(e) {
  // the DiagramEvent.subject is the collection of Parts about to be deleted
  e.subject.each(function(part) {
    if (!(part instanceof go.Node)) return; // only animate Nodes
    var animation = new go.Animation();
    var deletePart = part.copy();
    animation.add(deletePart, "scale", deletePart.scale, 0.01);
    animation.add(deletePart, "angle", deletePart.angle, 360);
    animation.addTemporaryPart(deletePart, myDiagram);
    animation.start();
  });
});

要删除节点，我使用myDiagram.model.removeNodeData(node)，但这不会触发事件。如果我使用 Del 键手动删除节点，它就会起作用。

使用代码删除节点时如何触发事件，例如使用 myDiagram.model.removeNodeData(node) 时？

Answer 1

你是对的，myDiagram.model.removeNodeData(node) 不会调用该事件。因此，您需要调用 myDiagram.model.removeNodeData(node) 的代码来调用与事件相同的代码。

因此取出代码并将其放入自己的函数中，以供更通用的使用:

function animateDeletion(part) {
  if (!(part instanceof go.Node)) return; // only animate Nodes
  var animation = new go.Animation();
  var deletePart = part.copy();
  animation.add(deletePart, "scale", deletePart.scale, 0.01);
  animation.add(deletePart, "angle", deletePart.angle, 360);
  animation.addTemporaryPart(deletePart, myDiagram);
  animation.start();
}

myDiagram.addDiagramListener('SelectionDeleting', function(e) {
  // the DiagramEvent.subject is the collection of Parts about to be deleted
  e.subject.each(function(part) {
    animateDeletion(part);
  });
});

然后您可以在调用removeNodeData之前调用相同的代码:

  // ... elsewhere...
  animateDeletion(node);
  myDiagram.model.removeNodeData(node.data);