[Bug Report]: 2.0版本打开内置缩放，导致经过边合并

[0131LWG]

发生了什么？

2.0版本打开内置缩放allowResize: true时。导致经过边和节点连接处出现合并边的情况

-.Google.Chrome.2024-10-21.18-21-16.mp4

示例：https://codesandbox.io/p/devbox/xsl72v

这种情况只出现在lf.render时有数据的情况下并且allowResize设置为true

logicflow/core版本

2.0.6

logicflow/extension版本

2.0.10

logicflow/engine版本

No response

浏览器&环境

Chrome

[ChangeSuger]

@boyongjiong ，导致以上问题的代码主要是这个：

LogicFlow/packages/core/src/view/Control.tsx

Lines 59 to 61 in f74b47c

	componentWillUnmount() {
	this.dragHandler.cancelDrag()
	}

感觉这个逻辑确实多余了，除了导致以上问题外，还会导致 hover 状态下调整节点大小只能缩小不能放大：向内拉不会导致锚点消失，可以正常拖拽，向外拉时因为是按照网格间距触发缩放，网格间距大时鼠标会移出节点，hover 状态消失，然后触发组件卸载，触发 cancelDrag 直接取消拖拽。不过也有可能是出于这个原因设置的。

这个处理起来争议可能比较大，就不提 PR 了（我处理基本上就是直接删了这三行😂，实测可以解决以上提到的两个问题，但不确定会不会引入新的问题😥）。

[0131LWG]

@boyongjiong ，导致以上问题的代码主要是这个：

LogicFlow/packages/core/src/view/Control.tsx

Lines 59 to 61 in f74b47c

	componentWillUnmount() {
	this.dragHandler.cancelDrag()
	}

感觉这个逻辑确实多余了，除了导致以上问题外，还会导致 hover 状态下调整节点大小只能缩小不能放大：向内拉不会导致锚点消失，可以正常拖拽，向外拉时因为是按照网格间距触发缩放，网格间距大时鼠标会移出节点，hover 状态消失，然后触发组件卸载，触发 cancelDrag 直接取消拖拽。不过也有可能是出于这个原因设置的。

这个处理起来争议可能比较大，就不提 PR 了（我处理基本上就是直接删了这三行😂，实测可以解决以上提到的两个问题，但不确定会不会引入新的问题😥）。

好的，谢谢，那我就先不使用allowResize来规避这个问题，等后面有结论了再看

[wbccb]

问题应该是下面代码触发的onDragEnd()导致的，更加具体点讲应该是onDragEnd()->updateEdgePointByAnchors()触发了两个node连线edge的anchor位置重新计算

 componentWillUnmount() { 
   this.dragHandler.cancelDrag() 
 } 
cancelDrag = () => {
  const DOC: any = window?.document

  DOC.removeEventListener('mousemove', this.handleMouseMove, false)
  DOC.removeEventListener('mouseup', this.handleMouseUp, false)
  this.onDragEnd({ event: undefined })
  this.isDragging = false
}
updateEdgePointByAnchors = () => {
    const { id, anchors } = this.nodeModel
    const edges = this.getNodeEdges(id)
    // 更新边
    edges.sourceEdges.forEach((item) => {
      const anchorItem = anchors.find(
        (anchor) => anchor.id === item.sourceAnchorId,
      )
      if (anchorItem) {
        item.updateStartPoint({
          x: anchorItem.x,
          y: anchorItem.y,
        })
      }
    })
    edges.targetEdges.forEach((item) => {
      const anchorItem = anchors.find(
        (anchor) => anchor.id === item.targetAnchorId,
      )
      if (anchorItem) {
        item.updateEndPoint({
          x: anchorItem.x,
          y: anchorItem.y,
        })
      }
    })
  }

目前有两个路径会触发onDragEnd()，一个是组件销毁时触发onDragEnd()，一个是拖拽时触发onDragEnd()，因此就算删掉下面的代码也无法解决问题，因为你拖拽了还是会导致anchor位置重新计算

 componentWillUnmount() { 
   this.dragHandler.cancelDrag() 
 } 

但是我没有深度研究具体原因是什么？初步看起来，应该是初始化edge时，没有传入连接点anchor的id，导致初始化后，实际的anchor坐标跟表现的anchor坐标不一致导致的，也就是

---

而在componentWillUnmount()触发this.dragHandler.cancelDrag() 并不多余，甚至非常有必要，这个代码主要涉及两个东西，一个是

• 请看fix(core): node => rotate+正常模式resize(#1428) #1835的3.3.2 onDragging 没有销毁注册事件小点，展示了为什么要添加这段代码的原因，因为有可能会导致滑动异常
• 因为组件可能销毁，但是如果你在销毁时没有触发this.dragHandler.cancelDrag() ，那么就会发生内存泄露，因为在drag.ts中注册了事件监听器mousemove和mouseup，但是没有正确解绑，在 vue3 使用时 切换显示状态 内存一直在增加 没有自动清楚缓存 #1581就算切换为2.0，其实还是无法正常完全释放LogicFlow，其实在#1581中没有触发drag.ts中注册了事件监听器mousemove和mouseup的，但是还是无法释放，如果多了这个drag.ts的事件监听器mousemove和mouseup的内存泄露，更加无法释放内存

---

而导致了hover 状态下调整节点大小只能缩小不能放大这个问题，我个人觉得这个问题应该是：
根据网格调整位置跟hover之间的冲突问题，而不是componentWillUnmount()触发this.dragHandler.cancelDrag() 的问题，这段代码只是把这个问题显露出来而已，并不是导致根据网格调整位置，网格间距大时鼠标会移出节点跟hover之间的冲突问题的主要原因，当然cancelDrag()触发的内容，比如cancelDrag()方法是否不应该触发this.onDragEnd({ event: undefined })，这个有待商榷（这个方法也不是我写的=_=）