删除节点数据时如何在 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);