LogicFlow icon indicating copy to clipboard operation
LogicFlow copied to clipboard

直接连接2个节点(无吸附行为)和修改边连接的节点(有吸附行为)时交互不一致

Open wangzhengbo opened this issue 2 years ago • 4 comments

  1. 直接从节点A连接到B,鼠标可以在节点B内任意移动;
  2. 调整A -> C节点之间的边,改成A -> B,鼠标在节点B内移动的时候默认会被吸附到距离最近的锚点;

因为AdjustPoint.tsx中有如下代码,edgeModel.updateAfterAdjustStartAndEnd(params);产生了吸附交互

// 如果一定的坐标能够找到目标节点,预结算当前节点与目标节点的路径进行展示
 if (info && info.node && this.isAllowAdjust(info)) {
   let params;
   const { startPoint, endPoint, sourceNode, targetNode } = edgeModel;
   if (type === AdjustType.SOURCE) {
     params = {
       startPoint: { x: info.anchor.x, y: info.anchor.y },
       endPoint: { x: endPoint.x, y: endPoint.y },
       sourceNode: info.node,
       targetNode,
     };
   } else if (type === AdjustType.TARGET) {
     params = {
       startPoint: { x: startPoint.x, y: startPoint.y },
       endPoint: { x: info.anchor.x, y: info.anchor.y },
       sourceNode,
       targetNode: info.node,
     };
   }
   edgeModel.updateAfterAdjustStartAndEnd(params);
 } else if (type === AdjustType.SOURCE) {
   // 如果没有找到目标节点,更显起终点为当前坐标
   edgeModel.updateStartPoint({ x, y });
 } else if (type === AdjustType.TARGET) {
   edgeModel.updateEndPoint({ x, y });
 }

能否让以上2种连接边的方式的交互保持一致呢?或者提供参数来控制要不要开启吸附功能。

wangzhengbo avatar Jan 05 '23 03:01 wangzhengbo

这个先不用改吧,后面可以考虑一下,默认从锚点拖出的连线就是真实的连线,而不是直线。https://github.com/didi/LogicFlow/issues/861

towersxu avatar Jan 09 '23 02:01 towersxu

这个先不用改吧,后面可以考虑一下,默认从锚点拖出的连线就是真实的连线,而不是直线。#861

这里不是指连接出来的线的样式,是指拖拽移动的时候如果在节点移动上,可能会有吸附行为产生。

wangzhengbo avatar Jan 09 '23 08:01 wangzhengbo

直接连接节点创建的不是真实的连线,而是一个从锚点到鼠标位置的直线。这个时候没有加吸附是因为吸附了也不是真实连线后的效果。这里的交互确实可以考虑一下,例如把直接换成真实的折线或者高亮能吸附的锚点。

towersxu avatar Jan 13 '23 07:01 towersxu

直接连接节点创建的不是真实的连线,而是一个从锚点到鼠标位置的直线。这个时候没有加吸附是因为吸附了也不是真实连线后的效果。这里的交互确实可以考虑一下,例如把直接换成真实的折线或者高亮能吸附的锚点。

加个参数控制调整adjust point时的吸附交互怎么样?默认还是使用吸附效果,但是可以通过参数控制取消吸附功能。

因为有时候吸附并不是一个好的体验,比如节点A连接到节点B, 需要改成A连接到节点C,如果在拖拽调整的过程中,鼠标移动路径经过了其它节点,会被吸附到其它节点上去,产生不好的体验。

wangzhengbo avatar Jan 16 '23 08:01 wangzhengbo