feat(anchor): auto adsorb

auto adsorb nearest anchor when find an edge's target anchor
antvis · Dec 13, 2019 · 16bcfd2 · 16bcfd2
1 parent 5f0783e
commit 16bcfd2
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 11 deletions.
diff --git a/packages/x6/src/handler/anchor/handler.ts b/packages/x6/src/handler/anchor/handler.ts
@@ -10,7 +10,8 @@ import { DomEvent, MouseEventEx, Disposable } from '../../common'
 import { getAnchorOptions, createAnchorHighlightShape } from './option'
 
 export class AnchorHandler extends BaseHandler {
-  inductionSize: number
+  inductiveSize: number
+  adsorbNearestTarget: boolean
   currentState: State | null
   currentPoint: Point | null
   currentArea: Rectangle | null
@@ -27,7 +28,9 @@ export class AnchorHandler extends BaseHandler {
   constructor(graph: Graph) {
     super(graph)
 
-    this.inductionSize = graph.options.anchor.inductionSize
+    const options = graph.options.anchor
+    this.inductiveSize = options.inductiveSize
+    this.adsorbNearestTarget = options.adsorbNearestTarget
 
     this.resetHandler = () => {
       if (
@@ -242,19 +245,21 @@ export class AnchorHandler extends BaseHandler {
         this.anchors != null &&
         (state == null || this.currentState === state)
       ) {
-        // console.log('highlight hovering anchor')
         let bounds: Rectangle | null = null
         let minDist: number | null = null
 
         for (let i = 0, ii = this.knobs.length; i < ii; i += 1) {
           const dx = graphX - this.knobs[i].bounds.getCenterX()
           const dy = graphY - this.knobs[i].bounds.getCenterY()
-          const dis = dx * dx + dy * dy
-          // console.log(dx, dy, dis)
+          const dis = Math.sqrt(dx * dx + dy * dy)
+
           if (
-            (Math.sqrt(dis) < this.inductionSize ||
-              this.intersects(this.knobs[i], mouse) ||
-              (currentPoint != null && this.intersects(this.knobs[i], grid))) &&
+            ((this.adsorbNearestTarget && !isSource) || // 进行目标链接桩查找时
+              // 在感应区域内时
+              (this.inductiveSize > 0 && dis < this.inductiveSize) ||
+              this.isIntersected(this.knobs[i], mouse) ||
+              (currentPoint != null &&
+                this.isIntersected(this.knobs[i], grid))) &&
             (minDist == null || dis < minDist)
           ) {
             this.currentPoint = this.points[i]
@@ -326,7 +331,7 @@ export class AnchorHandler extends BaseHandler {
     return shape
   }
 
-  protected intersects(icon: Shape, mouse: Rectangle) {
+  protected isIntersected(icon: Shape, mouse: Rectangle) {
     return icon.bounds.isIntersectWith(mouse)
   }
 

diff --git a/packages/x6/src/handler/anchor/option.ts b/packages/x6/src/handler/anchor/option.ts
@@ -13,7 +13,18 @@ import {
 } from '../../option'
 
 export interface AnchorOptions {
-  inductionSize: number
+  /**
+   * Specifies the inductive area size.
+   *
+   * Default is `20`.
+   */
+  inductiveSize: number
+  /**
+   * Specifies if adsorb the nearest anchor on finding a edge's target anchor.
+   *
+   * Default is `true`.
+   */
+  adsorbNearestTarget: boolean
   /**
    * The image for fixed connection points.
    */

diff --git a/packages/x6/src/option/preset.ts b/packages/x6/src/option/preset.ts
@@ -295,7 +295,8 @@ export const preset: FullOptions = {
   anchor: {
     image: images.cross,
     cursor: globals.defaultCursorPointer,
-    inductionSize: 20,
+    inductiveSize: 20,
+    adsorbNearestTarget: true,
   },
 
   anchorHighlight: {