[Bug Report]: 更新节点宽高时边路径不跟随变化
发生了什么?
排查了一下1.0版本的demo里也复现了这个问题,应该是个陈年bug https://codesandbox.io/p/devbox/logicflowdemo-g3nc5g 初步定位到问题的原因主要在于节点宽高变化后,对应的锚点坐标没有更新,从而导致边的起终点没变化的现象出现 核心只要解决锚点坐标不更新就行
目前尝试了一下比较可行的临时解决方案是手动删除再新增边:
const { nodes } = lfRef.current?.graphModel nodes.forEach((node) => { const { incoming: { edges: incomingEdges }, outgoing: { edges: outgoingEdges }, } = node; node.setProperties({ width: 20, height: 100, }); incomingEdges.forEach((edge) => { const edgeInfo = edge.getData(); lfRef.current?.deleteEdge(edgeInfo.id); lfRef.current?.addEdge({ sourceNodeId: edgeInfo.sourceNodeId, targetNodeId: edgeInfo.targetNodeId, sourceAnchorId: edgeInfo.sourceAnchorId, targetAnchorId: edgeInfo.targetAnchorId, type: edgeInfo.type, properties: edgeInfo.properties, }) }); outgoingEdges.forEach((edge) => { const edgeInfo = edge.getData(); lfRef.current?.deleteEdge(edgeInfo.id); lfRef.current?.addEdge({ sourceNodeId: edgeInfo.sourceNodeId, targetNodeId: edgeInfo.targetNodeId, sourceAnchorId: edgeInfo.sourceAnchorId, targetAnchorId: edgeInfo.targetAnchorId, type: edgeInfo.type, properties: edgeInfo.properties, }) });
修复方案。。。暂时还没有想的特别清楚,也欢迎看到的朋友一起讨论
logicflow/core版本
1.x + 2.x
logicflow/extension版本
logicflow/engine版本
No response
浏览器&环境
Chrome
改变宽高如果是手动模式的话,那么可能很类似的场景就是packages/core/src/view/Control.tsx相关drag事件,在拖拽结束的时候,会触发
// 由于将拖拽放大缩小改成丝滑模式,这个时候需要再拖拽结束的时候,将节点的位置更新到 grid 上。
onDragEnd = () => {
const x = this.nodeModel.x
const y = this.nodeModel.y
this.nodeModel.moveTo(x, y)
// 先触发 onDragging() -> 更新边 -> 再触发用户自定义的 getDefaultAnchor(),所以 onDragging()
// 拿到的 anchors 是滞后的,为了正确的设置最终的位置,应该在拖拽结束的时候,再设置一次边的 Point 位置,
// 此时拿到的 anchors 是最新的
this.updateEdgePointByAnchors()
}
所以这种主动改变宽高的模式,是不是可以模仿拖拽结束的处理模式,比如
提供对应的API给用户进行node的宽高改变,然后这个API中使用onDragEnd()的具体逻辑,就是重新构建下updateEdgePointByAnchors()放在core中进行调用重新计算node对应的anchor值
当然也可以将这个处理过的updateEdgePointByAnchors()暴露给用户自己在改变width和height后自己去主动触发
还有一种模式是监听width和height,当width和height改变时,主动重新计算node对应的anchor值,但是这种就得排查目前存在的代码中是否已经有一些操作,改变width和height的时候,也会触发计算node对应的anchor值,如果监听width和height,会造成重复计算多次