feat: add port events (#3185)

antvis · Jan 31, 2023 · 3265fe5 · 3265fe5
1 parent 5599286
commit 3265fe5
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 13 deletions.
diff --git a/packages/x6/src/view/node.ts b/packages/x6/src/view/node.ts
@@ -457,6 +457,28 @@ export class NodeView<
     return { e, x, y, view, node, cell } as NodeView.PositionEventArgs<E>
   }
 
+  protected getPortEventArgs<E>(
+    e: E,
+    port: string,
+    pos?: { x: number; y: number },
+  ) {
+    const view = this // eslint-disable-line
+    const node = view.cell
+    const cell = node
+    if (pos) {
+      return {
+        e,
+        x: pos.x,
+        y: pos.y,
+        view,
+        node,
+        cell,
+        port,
+      } as NodeView.PositionEventArgs<E>
+    }
+    return { e, view, node, cell, port } as NodeView.MouseEventArgs<E>
+  }
+
   notifyMouseDown(e: Dom.MouseDownEvent, x: number, y: number) {
     super.onMouseDown(e, x, y)
     this.notify('node:mousedown', this.getEventArgs(e, x, y))
@@ -472,26 +494,41 @@ export class NodeView<
     this.notify('node:mouseup', this.getEventArgs(e, x, y))
   }
 
+  notifyPortEvent(
+    name: string,
+    e: Dom.EventObject,
+    pos?: { x: number; y: number },
+  ) {
+    const port = this.findAttr('port', e.target)
+    if (port) {
+      this.notify(name, this.getPortEventArgs(e, port, pos))
+    }
+  }
+
   onClick(e: Dom.ClickEvent, x: number, y: number) {
     super.onClick(e, x, y)
     this.notify('node:click', this.getEventArgs(e, x, y))
+    this.notifyPortEvent('node:port:click', e, { x, y })
   }
 
   onDblClick(e: Dom.DoubleClickEvent, x: number, y: number) {
     super.onDblClick(e, x, y)
     this.notify('node:dblclick', this.getEventArgs(e, x, y))
+    this.notifyPortEvent('node:port:dblclick', e, { x, y })
   }
 
   onContextMenu(e: Dom.ContextMenuEvent, x: number, y: number) {
     super.onContextMenu(e, x, y)
     this.notify('node:contextmenu', this.getEventArgs(e, x, y))
+    this.notifyPortEvent('node:port:contextmenu', e, { x, y })
   }
 
   onMouseDown(e: Dom.MouseDownEvent, x: number, y: number) {
     if (this.isPropagationStopped(e)) {
       return
     }
     this.notifyMouseDown(e, x, y)
+    this.notifyPortEvent('node:port:mousedown', e, { x, y })
     this.startNodeDragging(e, x, y)
   }
 
@@ -515,6 +552,7 @@ export class NodeView<
         })
       }
       this.notifyMouseMove(e, x, y)
+      this.notifyPortEvent('node:port:mousemove', e, { x, y })
     }
 
     this.setEventData<EventData.Mousemove>(e, data)
@@ -527,6 +565,7 @@ export class NodeView<
       this.stopMagnetDragging(e, x, y)
     } else {
       this.notifyMouseUp(e, x, y)
+      this.notifyPortEvent('node:port:mouseup', e, { x, y })
       if (action === 'move') {
         const meta = data as EventData.Moving
         const view = meta.targetView || this
@@ -545,22 +584,26 @@ export class NodeView<
   onMouseOver(e: Dom.MouseOverEvent) {
     super.onMouseOver(e)
     this.notify('node:mouseover', this.getEventArgs(e))
+    this.notifyPortEvent('node:port:mouseover', e)
   }
 
   onMouseOut(e: Dom.MouseOutEvent) {
     super.onMouseOut(e)
     this.notify('node:mouseout', this.getEventArgs(e))
+    this.notifyPortEvent('node:port:mouseout', e)
   }
 
   onMouseEnter(e: Dom.MouseEnterEvent) {
     this.updateClassName(e)
     super.onMouseEnter(e)
     this.notify('node:mouseenter', this.getEventArgs(e))
+    this.notifyPortEvent('node:port:mouseenter', e)
   }
 
   onMouseLeave(e: Dom.MouseLeaveEvent) {
     super.onMouseLeave(e)
     this.notify('node:mouseleave', this.getEventArgs(e))
+    this.notifyPortEvent('node:port:mouseleave', e)
   }
 
   onMouseWheel(e: Dom.EventObject, x: number, y: number, delta: number) {
@@ -1092,14 +1135,13 @@ export namespace NodeView {
   interface MagnetEventArgs {
     magnet: Element
   }
-
   export interface MouseEventArgs<E> {
     e: E
     node: Node
     cell: Node
     view: NodeView
+    port?: string
   }
-
   export interface PositionEventArgs<E>
     extends MouseEventArgs<E>,
       CellView.PositionEventArgs {}
@@ -1124,6 +1166,17 @@ export namespace NodeView {
     'node:mousewheel': PositionEventArgs<Dom.EventObject> &
       CellView.MouseDeltaEventArgs
 
+    'node:port:click': PositionEventArgs<Dom.ClickEvent>
+    'node:port:dblclick': PositionEventArgs<Dom.DoubleClickEvent>
+    'node:port:contextmenu': PositionEventArgs<Dom.ContextMenuEvent>
+    'node:port:mousedown': PositionEventArgs<Dom.MouseDownEvent>
+    'node:port:mousemove': PositionEventArgs<Dom.MouseMoveEvent>
+    'node:port:mouseup': PositionEventArgs<Dom.MouseUpEvent>
+    'node:port:mouseover': MouseEventArgs<Dom.MouseOverEvent>
+    'node:port:mouseout': MouseEventArgs<Dom.MouseOutEvent>
+    'node:port:mouseenter': MouseEventArgs<Dom.MouseEnterEvent>
+    'node:port:mouseleave': MouseEventArgs<Dom.MouseLeaveEvent>
+
     'node:customevent': PositionEventArgs<Dom.MouseDownEvent> & {
       name: string
     }

diff --git a/sites/x6-sites/docs/tutorial/basic/events.zh.md b/sites/x6-sites/docs/tutorial/basic/events.zh.md
@@ -19,17 +19,17 @@ redirect_from:
 
 ### 鼠标事件
 
-| 事件     | cell 节点/边       | node 节点          | edge 边            | blank 画布空白区域  |
-| -------- | ------------------ | ------------------ | ------------------ | ------------------- |
-| 单击     | `cell:click`       | `node:click`       | `edge:click`       | `blank:click`       |
-| 双击     | `cell:dblclick`    | `node:dblclick`    | `edge:dblclick`    | `blank:dblclick`    |
-| 右键     | `cell:contextmenu` | `node:contextmenu` | `edge:contextmenu` | `blank:contextmenu` |
-| 鼠标按下 | `cell:mousedown`   | `node:mousedown`   | `edge:mousedown`   | `blank:mousedown`   |
-| 移动鼠标 | `cell:mousemove`   | `node:mousemove`   | `edge:mousemove`   | `blank:mousemove`   |
-| 鼠标抬起 | `cell:mouseup`     | `node:mouseup`     | `edge:mouseup`     | `blank:mouseup`     |
-| 鼠标滚轮 | `cell:mousewheel`  | `node:mousewheel`  | `edge:mousewheel`  | `blank:mousewheel`  |
-| 鼠标进入 | `cell:mouseenter`  | `node:mouseenter`  | `edge:mouseenter`  | `graph:mouseenter`  |
-| 鼠标离开 | `cell:mouseleave`  | `node:mouseleave`  | `edge:mouseleave`  | `graph:mouseleave`  |
+| 事件   | cell 节点/边          | node 节点            | port 连接桩                | edge 边             | blank 画布空白区域        |
+|-------|---------------------|---------------------|--------------------------|---------------------|----------------------|
+| 单击   | `cell:click`       | `node:click`       | `node:port:click`       | `edge:click`       | `blank:click`       |
+| 双击   | `cell:dblclick`    | `node:dblclick`    | `node:port:dblclick`    | `edge:dblclick`    | `blank:dblclick`    |
+| 右键   | `cell:contextmenu` | `node:contextmenu` | `node:port:contextmenu` | `edge:contextmenu` | `blank:contextmenu` |
+| 鼠标按下 | `cell:mousedown`   | `node:mousedown`   | `node:port:mousedown`   | `edge:mousedown`   | `blank:mousedown`   |
+| 移动鼠标 | `cell:mousemove`   | `node:mousemove`   | `node:port:mousemove`   | `edge:mousemove`   | `blank:mousemove`   |
+| 鼠标抬起 | `cell:mouseup`     | `node:mouseup`     | `node:port:mouseup`     | `edge:mouseup`     | `blank:mouseup`     |
+| 鼠标滚轮 | `cell:mousewheel`  | `node:mousewheel`  | -                       | `edge:mousewheel`  | `blank:mousewheel`  |
+| 鼠标进入 | `cell:mouseenter`  | `node:mouseenter`  | `node:port:mouseenter`  | `edge:mouseenter`  | `graph:mouseenter`  |
+| 鼠标离开 | `cell:mouseleave`  | `node:mouseleave`  | `node:port:mouseleave`  | `edge:mouseleave`  | `graph:mouseleave`  |
 
 :::warning{title=注意：}
 需要注意的是，这里的 `mousemove` 事件和通常的鼠标移动事件有所区别，它需要在鼠标按下后移动鼠标才能触发。