feat: allow calculate distance by bbox when snap to node

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; snapNode: 'center' | 'bbox' }
 
     /**
      * Specify whether connect to point on the graph is allowed.

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 snapNode = (typeof snap === 'object' && snap.snapNode) || '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 =
+            snapNode === '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) {

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, snapNode: 'center' | 'bbox' }
 ```
 
 当 `snap` 设置为 `true` 或者 `false` 代表开启和关闭连线过程中自动吸附，开启时距离目标 `50px` 是触发吸附。可以通过配置 `radius` 属性来自定义吸附半径。
@@ -48,6 +48,8 @@ const graph = new Graph({
 })
 ```
 
+当开启了 `allowNode` 时，判断是否吸附到节点计算distance时默认为基于节点的中心，可以通过配置 `snapNode` 为 `bbox` 改为基于节点的包围盒子计算距离。
+
 ### allowBlank
 
 ```typescript