feat: allow calculate distance by bbox when snap to node (#4126)

* feat: allow calculate distance by bbox when snap to node * fix: rename snap anchor API
antvis · Jan 10, 2024 · 8169d42 · 8169d42
1 parent c1358c7
commit 8169d42
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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