From 8169d423dc9f01e54ac3d20086c37576dafe8901 Mon Sep 17 00:00:00 2001
From: Xia Wenqi <xiawenqi90@gmail.com>
Date: Wed, 10 Jan 2024 13:43:40 +0800
Subject: [PATCH] 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
---
 packages/x6/src/graph/options.ts                | 2 +-
 packages/x6/src/view/edge.ts                    | 6 +++++-
 sites/x6-sites/docs/api/model/interaction.zh.md | 4 +++-
 3 files changed, 9 insertions(+), 3 deletions(-)

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