feat:鼠标交互，及元素捕捉+事件触发

antvis · Aug 19, 2024 · 1f88d3d · 1f88d3d
1 parent 5ebb94a
commit 1f88d3d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/packages/x6/src/graph/graph.ts b/packages/x6/src/graph/graph.ts
@@ -52,7 +52,7 @@ export class Graph extends Basecoat<EventArgs> {
     this.css = new Css(this)
     this.view = new GraphView(this)
     this.defs = new Defs(this)
-    // 坐标
+    // 坐标？（用于捕捉交互的元素?）
     this.coord = new Coord(this)
     this.transform = new Transform(this)
     this.highlight = new Highlight(this)
@@ -826,6 +826,12 @@ export class Graph extends Basecoat<EventArgs> {
 
   // #region coord
 
+   /**
+   * 捕捉到栅格？（是否捕捉到栅格上的元素）
+   * @param x 
+   * @param y 
+   * @returns 
+   */
   snapToGrid(p: Point.PointLike): Point
   snapToGrid(x: number, y: number): Point
   snapToGrid(x: number | Point.PointLike, y?: number) {

diff --git a/packages/x6/src/graph/view.ts b/packages/x6/src/graph/view.ts
@@ -50,6 +50,7 @@ export class GraphView extends View {
   }
 
   delegateEvents() {
+    // 委托监听this.container dom事件上的交互事件；在对应的handler上再去触发graph上的事件
     const ctor = this.constructor as typeof GraphView
     super.delegateEvents(ctor.events)
     return this
@@ -126,9 +127,11 @@ export class GraphView extends View {
       }
 
       const localPoint = this.graph.snapToGrid(e.clientX, e.clientY)
+      // 捕捉到元素，触发事件
       if (view) {
         view.onClick(e, localPoint.x, localPoint.y)
       } else {
+        // 没有找到，触发空白点击事件
         this.graph.trigger('blank:click', {
           e,
           x: localPoint.x,