vue创建节点后添加子节点，撤销重做子节点出现重复创建

[nanfb]

问题描述

vue节点使用dnd拖拽到画布后监听node:added事件给node添加子节点，然后通过子节点的属性避免重复调用栈溢出，当撤销重做后，监听事件又会重复创建原来的子节点，然后再重复调用，然而关联的只有再次新建的那个，在vue节点的mounted事件中创建节点可以解决重复创建节点的问题，当创建了多个节点后全部一步步撤销，重做的时候只会回复一个。然后重做栈为0 ，想知道这个问题怎么解决

重现链接

https://codesandbox.io/s/distracted-bose-5tgl8j?file=/App.tsx

重现步骤

点击上一步到不能点击后点击下一步，会重复创建节点

预期行为

只创建添加一次子节点

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox ...]
• X6 版本: [2.11.1 ...]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[nanfb]

我可以在vue的模板中提前写好文本节点，但是我不想dnd面板布局变很混乱，而且如果在vue模板中写好，旋转节点本身的话文本描述也会旋转，还要进行计算

[NewByVector]

其实你的添加子节点的动作是不需要添加到 history 去吧。

[nanfb]

其实你的添加子节点的动作是不需要添加到 history 去吧。

对，但是我在history事件中监听不到，因为我使用的是vue组件，然后是在vue组件的声明周期中添加子节点，没办法在事件中进行过滤

[NewByVector]

可以在 beforeAddCommand 中做一个判断，如果是添加子节点的话，不增加记录。

[nanfb]

可以在 beforeAddCommand 中做一个判断，如果是添加子节点的话，不增加记录。

我目前是这么写的，其实这个并不是很重要，主要是比如添加了多个记录，然后恢复的时候只能恢复一个记录

[nanfb]

可以在 beforeAddCommand 中做一个判断，如果是添加子节点的话，不增加记录。

我目前是这么写的，其实这个并不是很重要，主要是比如添加了多个记录，然后恢复的时候只能恢复一个记录

说具体一点就是比如创建了多个节点，然后撤销，这都是正常的，但是恢复的时候只能恢复一个创建的节点，那个历史记录的栈也是空的

[nanfb]

可以在 beforeAddCommand 中做一个判断，如果是添加子节点的话，不增加记录。

我目前是这么写的，其实这个并不是很重要，主要是比如添加了多个记录，然后恢复的时候只能恢复一个记录

说具体一点就是比如创建了多个节点，然后撤销，这都是正常的，但是恢复的时候只能恢复一个创建的节点，那个历史记录的栈也是空的

我只过滤了这三个操纵，只要是有节点通过撤销的方式删除，他恢复只能恢复一个节点，有时候还会出现一些离谱的bug，比如多创建子节点，子节点的关联和父节点消失了等等

[wb-wenbei]

我也遇到了类似的问题。

@nanfb 我的解决方案可供参考一下：

1.把拖拽添加节点和监听事件添加子节点使用graph.startBatch、graph.stopBatch接口给合并为一个历史记录。

2.把监听事件添加子节点的动作做一个延时，像下面这样：

let timer: NodeJS.Timeout
const needAddRelatedNodes: Node[] = []

const delayAddRelatedNode = (node: Node, time = 20) => {
  needAddRelatedNodes.push(node)

  timer && clearTimeout(timer)

  timer = setTimeout(() => {
    needAddRelatedNodes.forEach((n) => addRelatedNode(n))
    needAddRelatedNodes.length = 0
    graph.stopBatch('related-node-add')
  }, time)
}

3.在监听添加子节点的函数needAddRelatedNodes中做一下判断，看是否已经存在子节点，如存在，则不再创建。

const addRelatedNode = (node: Node) => {
  const relatedNode = graph.getNodes().find((n) => n.getData().payload?.sourceId === node.getData().id)
  if (!relatedNode) graph.addNode(createRelatedNodeFn[node.shape](graph, node))
}