Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

allowNode时判断是否snap计算distance时为基于节点中心,可否改为和边一样基于整个节点计算最近距离,或者支持可配置 #3963

Closed
xiawenqi opened this issue Oct 9, 2023 · 8 comments · Fixed by #4126
Labels
type: feature 新功能 Feature/enhancement requests

Comments

@xiawenqi
Copy link
Contributor

xiawenqi commented Oct 9, 2023

功能描述

我在做一个电气单线图的功能,有一个需求是将节点连接到母线上,母线形状和导线类似,用node来实现的,配置了allowNode。

但是在将节点连接到母线上时,虽然母线比较长,但是只有将鼠标移动到母线中间的位置时才能触发snap效果。

image

经阅读源码,发现当目标view为节点时,计算distance是否满足snap的条件为固定计算和节点中心点距离的方式
https://github.com/antvis/X6/blob/f99f0c04067f7097cc0ff99b20aca7e5801d9dcf/packages/x6/src/view/edge.ts#L2004C9-L2004C9

期望解决方案

希望可以不在只靠近到母线中间的时候触发snap,而是靠近节点就触发(也就是靠近上图中的绿色区域也可以触发snap)。支持采取和边类似的方式,计算distance时基于最近距离计算。

可以直接修改计算distance的方式(不清楚一开始这么设计的初衷),或者通过参数配置支持。

@NewByVector
Copy link
Contributor

母线为啥不直接用 edge 实现呢。

@NewByVector NewByVector added the type: discussion 讨论 Usage questions, guidance, and other discussions label Oct 11, 2023
@xiawenqi
Copy link
Contributor Author

母线需要支持从面板拖拽到画布中。面板是基于dnd实现的,只支持拖拽node。

也尝试过先拖拽node进入画布,再监听node添加到画布的事件把node替换成edge,但是效果不太好,很难实现视觉上没有跳跃。

@NewByVector NewByVector added type: feature 新功能 Feature/enhancement requests and removed type: discussion 讨论 Usage questions, guidance, and other discussions labels Oct 11, 2023
@NewByVector
Copy link
Contributor

明白,那可以将 snap 扩展成这样的类型:

type Snap = number | { left: number, right: number, top: number,  bottom: number}

这样应该能满足你的需求,欢迎提 PR 呀。

@xiawenqi
Copy link
Contributor Author

感觉满足不了,因为母线的尺寸是可变的,可能较短也可能很长。

得支持策略可选,比如“center”(默认)、“closest”; 或者snap.radius可以传一个函数, 函数参数为node

@NewByVector
Copy link
Contributor

type Distance = { left: number, right: number, top: number,  bottom: number}
snap: boolean | { radius: number |  Distance}

这样应该能满足需求吧, 如果 radius 给的是数字,就是距离 center 的距离,如果给定的是 Distance,就是距离节点上下左右的距离。

@xiawenqi
Copy link
Contributor Author

可以。我来实现一下,争取下周能把MR提出来~

@xiawenqi
Copy link
Contributor Author

type Distance = { left: number, right: number, top: number,  bottom: number}
snap: boolean | { radius: number |  Distance}

这样应该能满足需求吧, 如果 radius 给的是数字,就是距离 center 的距离,如果给定的是 Distance,就是距离节点上下左右的距离。

抱歉拖了比较久。

在实现的过程中我发现基于上下左右的配置比较难计算距离,而且很难界定某个点应该基于哪个值来进行判定。

提议在snap中增加一个参数 snapNode,默认为 center,支持配置为 bboxcenter保留原来的行为,bbox 改为基于包围框计算距离,这样改动比较小,只要计算距离包围框的最近距离就行。

@xiawenqi
Copy link
Contributor Author

更新:参数名为anchor

snap: boolean | { radius: number, anchor: 'center' | 'bbox' }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: feature 新功能 Feature/enhancement requests
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants