diff --git a/packages/x6/src/graph/options.ts b/packages/x6/src/graph/options.ts index 3943414ca4e..9086fe5d507 100644 --- a/packages/x6/src/graph/options.ts +++ b/packages/x6/src/graph/options.ts @@ -109,7 +109,7 @@ export namespace Options { /** * Snap edge to the closest node/port in the given radius on dragging. */ - snap: boolean | { radius: number } + snap: boolean | { radius: number; anchor: 'center' | 'bbox' } /** * Specify whether connect to point on the graph is allowed. diff --git a/packages/x6/src/view/edge.ts b/packages/x6/src/view/edge.ts index e077353c048..3afc0822405 100644 --- a/packages/x6/src/view/edge.ts +++ b/packages/x6/src/view/edge.ts @@ -1968,6 +1968,7 @@ export class EdgeView< const graph = this.graph const { snap, allowEdge } = graph.options.connecting const radius = (typeof snap === 'object' && snap.radius) || 50 + const anchor = (typeof snap === 'object' && snap.anchor) || 'center' const views = graph.renderer.findViewsInArea( { @@ -2001,7 +2002,10 @@ export class EdgeView< views.forEach((view) => { if (view.container.getAttribute('magnet') !== 'false') { if (view.isNodeView()) { - distance = view.cell.getBBox().getCenter().distance(pos) + distance = + anchor === 'center' + ? view.cell.getBBox().getCenter().distance(pos) + : view.cell.getBBox().getNearestPointToPoint(pos).distance(pos) } else if (view.isEdgeView()) { const point = view.getClosestPoint(pos) if (point) { diff --git a/sites/x6-sites/docs/api/model/interaction.zh.md b/sites/x6-sites/docs/api/model/interaction.zh.md index 2f36d0febaa..f6213db8e97 100644 --- a/sites/x6-sites/docs/api/model/interaction.zh.md +++ b/sites/x6-sites/docs/api/model/interaction.zh.md @@ -27,7 +27,7 @@ const graph = new Graph({ ### snap ```typescript -snap: boolean | { radius: number } +snap: boolean | { radius: number, anchor: 'center' | 'bbox' } ``` 当 `snap` 设置为 `true` 或者 `false` 代表开启和关闭连线过程中自动吸附,开启时距离目标 `50px` 是触发吸附。可以通过配置 `radius` 属性来自定义吸附半径。 @@ -48,6 +48,8 @@ const graph = new Graph({ }) ``` +当计算distance用于判断是否吸附到节点时,默认基于节点的中心,可以通过配置 `anchor` 为 `bbox` 改为基于节点的包围盒子计算距离。 + ### allowBlank ```typescript