fix: treeGraph render with addItem and stack problem, closes: #2084; docs: complete the Event API docs.

2024-11-30 10:48:24 +08:00 · 2020-09-15 16:34:15 +08:00 · 2020-09-15 16:34:15 +08:00 · 9a1993cbfa
commit 9a1993cbfa
parent e649582d1b
7 changed files with 216 additions and 54 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -2,6 +2,7 @@

 #### 3.8

+- fix: treeGraph render with addItem and stack problem, closes: #2084;
 - feat: edge filter lens plugin.

 #### 3.7.3
--- a/docs/api/Event.en.md
+++ b/docs/api/Event.en.md
@ -7,7 +7,41 @@ The events in this chapter can be binded or unbinded to graph by [graph.on](/en/

 The parameters of callbacks for common events, Node events, and Edge events are described in [Behavior API](/en/docs/api/Behavior).

-## Common Event
+## Interaction Events
+
+Listen to the interaction events such as `click`, `mousemove` by the following way:
+
+```
+graph.on(eventName, evt => {
+  // some operations
+})
+```
+
+Where, the event object `evt` has the properties:
+
+- `type`: The type of the event
+- `name`: The name of the event
+- `x`: The x coordinate on the canvas
+- `y`: The y coordinate on the canvas
+- `clientX`: The x coordinate about the client
+- `clientY`: The y coordinate about the client
+- `canvasX`: The x coordinate about parent DOM of the canvas
+- `canvasY`: The y coordinate about parent DOM of the canvas
+
+（The differences between x/y, clientX/clientY, and canvasX/canvasY can be found in [Coordinate Systems in G6](/en/docs/manual/advanced/coordinate-system)）
+
+- `item`: The item being manipulated, which can be a node, an edge, or a Combo）
+- `target`: The target [Shape](/zh/docs/manual/middle/elements/shape/shape-keyshape) on the `item` being manupulated, or the canvas instance
+- `bubbles`: Whether bubbles
+- `defaultPrevented`: Whether prevent the original event
+- `originalEvent`: The original client event object. where the `button` can be used to distinguish the left/middle/right button of the mouse on some events like `click` or `dblclick`
+- `timeStamp`: The time stamp the event triggered
+- `propagationStopped`: Wheher stop the propogation
+- `propagationPath`: The triggering path
+
+`eventName` can be refered to the following parts.
+
+### Common Interaction Event

 | Event Name | Description |
 | --- | --- |
@ -29,11 +63,12 @@ The parameters of callbacks for common events, Node events, and Edge events are
 | drop | Activated when user drops an item on a target item. This event is applied on the target item. |
 | keydown | Activated when user presses down a button on keyboard. |
 | keyup | Activated when user releases a button on keyboard. |
+| wheel | Activated when user scroll the wheel. |
 | touchstart | Activated when a finger touches the screen. If there are fingers on the screen already, it will be activated too. |
-| touchmove | Activated during the processes of finger moving on the screen. Call preventDefault() to prevent scrolling. |
+| touchmove | Activated during the processes of finger moving on the screen. Call `preventDefault()` to prevent scrolling. |
 | touchend | Activated when a finger leaves the screen. |

-## Node Event
+### Node Interaction Event

 | Event Name | Description |
 | --- | --- |
@ -46,15 +81,16 @@ The parameters of callbacks for common events, Node events, and Edge events are
 | node:mouseleave | Activated when the mouse leaves the node. |
 | node:mousedown | Activated when the left or right button is clicked down on the node. It cannot be activated by keyboard. |
 | node:mouseup | Activated when the left or right button is released on the node. It cannot be activated by keyboard. |
-| node:contextmenu | Open the context menu when user clicks the right button of mouse on the node. [Demo](/en/examples/tool/contextMenu). |
 | node:dragstart | Activated when user begins to drag the node. This event is applied on the dragged node. |
 | node:drag | Activated during the dragging process on the node. This event is applied on the dragged node. |
 | node:dragend | Activated when user stops dragging on the node. This event is applied on the dragged node. |
-| node:dragenter | Activated when user drags the node into a target item. This event is applied on the dragged node. |
-| node:dragleave | Activated when user drags the node out of a target item. This event is applied on the target item. |
+| node:dragenter | Activated when user drags an item into a target node item. This event is applied on the target node item. |
+| node:dragleave | Activated when user drags an item out of a target node item. This event is applied on the target node item. |
+| node:dragover | Activated when user drags an item over a target node item. This event is applied on the target node item |
 | node:drop | Activated when user drops an item on a target item. This event is applied on the target item. |
+| node:contextmenu | Open the context menu when user clicks the right button of mouse on the node. [Demo](/en/examples/tool/contextMenu). |

-## Edge Event
+### Edge Interaction Event

 | Event Name | Description |
 | --- | --- |
@ -67,9 +103,17 @@ The parameters of callbacks for common events, Node events, and Edge events are
 | edge:mouseleave | Activated when the mouse leaves the edge. |
 | edge:mousedown | Activated when the left or right button is clicked down on the edge. It cannot be activated by keyboard. |
 | edge:mouseup | Activated when the left or right button is released on the edge. It cannot be activated by keyboard. |
+| edge:dragenter | Activated when user drags an item into a target edge item. This event is applied on the target edge item. |
+| edge:dragleave | Activated when user drags an item out of a target edge item. This event is applied on the target edge item. |
+| edge:dragover | Activated when user drags an item over a target edge item. This event is applied on the target edge item |
+| edge:drop | Activated when user drops an item on a target edge item. This event is applied on the target edge item. |
 | edge:contextmenu | Open the context menu when user clicks the right button of mouse on the edge. [Demo](/en/examples/tool/contextMenu). |

-## Canvas Event
+### Combo Interaction Event
+
+Combo inherit all the interaction events of Node.
+
+## Canvas Interaction Event

 | Event Name | Description |
 | --- | --- |
@ -88,10 +132,19 @@ The parameters of callbacks for common events, Node events, and Edge events are
 | canvas:dragend | Activated when user stops dragging on the canvas. This event is applied on the dragged canvas. |
 | canvas:dragenter | Activated when user drags the canvas into a target item. This event is applied on the target item. |
 | canvas:dragleave | Activated when user drags the canvas out of a target item. This event is applied on the target item. |
+| canvas:drop | Activated when user drags and drops an item on the canvas. |

-## The Timing of Listener
+## Timing Events

-Before and after being called some functions, G6 exports the timing events.
+Before and after being called some functions, G6 exports the timing events. These timing events can be listened by the following way:
+
+```
+graph.on(timingEventName, evt => {
+  // some operations
+})
+```
+
+`timingEventName` is shown below:

 | Event Name | Description |
 | --- | --- |
@ -113,8 +166,11 @@ Before and after being called some functions, G6 exports the timing events.
 | aftermodechange | Activated after `setMode` / `addBehaviors` / `removeBehaviors` being called. |
 | beforelayout | Activated before graph layout. `render` will layout the graph, so `render` will activate this event as well. |
 | afterlayout | Activated after graph layout being done. `render` will layout the graph, so `render` will activate this event as well. |
+| graphstatechange | Activated after `graph.updateItemState` being called. |
 | afteractivaterelations | Activated while activating a node by `'activate-relations'` Behavior which is assigned to the the instance of Graph. |
 | nodeselectchange | Activated while the selected items are changed by `'brush-select'`, `'click-select'` or `'lasso-select'` Behavior which is assigned to the instance of Graph. |
+| beforecreateedge | Activated before an edge is created by the built-in behavior `create-edge` |
+| aftercreateedge | Activated after an edge is created by the built-in behavior `create-edge` |
 | itemcollapsed | Activated while a node is clicked to collapse or expand by `'collapse-expand'` Behavior which is assigned to the instance of TreeGraph. |
 | tooltipchange | Activated after the show/hide state is changed by `'tooltip'` or `'edge-tooltip'` Behavior which is assigned to the instance of Graph. |
 | wheelzoom | Activated after the canvas being zoomed by `'zoom-canvas'` Behavior which is assigned to the instance of Graph. |
@ -195,6 +251,19 @@ No parameters.
 | item   | Item   | The manipulated item.         |
 | action | String | The name of the manipulation. |

+#### graphstatechange
+
+| Name   | Type   | Description                   |
+| ---- | ---- | -------------------- |
+| states | Object | The items with different states, e.g. `{ hover: [Node, Node], selected: [ Node ] }` |
+
+#### afteractivaterelations
+
+| Name   | Type   | Description                   |
+| ------ | ------ | -------------------- |
+| item   | Item   | The manipulated item currently |
+| action | String | The current action name           |
+
 #### nodeselectchange

 | Name          | Type   | Description                                                    |
@ -202,6 +271,15 @@ No parameters.
 | target        | Item   | The manipulated item.                                          |
 | selectedItems | Object | All selected items, formed as `{ nodes: [...], edges: [...]}`. |

+#### beforecreateedge / aftercreateedge
+
+`beforecreateedge` has no parameters. The parameters of `aftercreateedge` are:
+
+| Name      | Type    | Description                                                       |
+| ------------- | ------ | ---------------------------------------------------------------- |
+| edge        | Item   | The created edge                                             |
+
+
 #### itemcollapsed

 | Name      | Type    | Description                                                       |
--- a/docs/api/Event.zh.md
+++ b/docs/api/Event.zh.md
@ -7,12 +7,46 @@ order: 8

 通用事件、Node 事件、Edge 事件及 Canvas 事件回调的参数请参考 [Behavior API](/zh/docs/api/Behavior)。

-## 通用事件
+## 交互事件
+
+使用如下形式进行交互事件的监听：
+
+```
+graph.on(eventName, evt => {
+  // 一些操作
+})
+```
+
+其中，事件对象 `evt` 的属性值有：
+
+- `type`: 事件类型
+- `name`: 事件名称
+- `x`: 画布上的 x 坐标
+- `y`: 画布上的 y 坐标
+- `clientX`: 浏览器窗口上的 x 坐标
+- `clientY`: 浏览器窗口上的 y 坐标
+- `canvasX`: 画布父容器视口上的 x 坐标
+- `canvasY`: 画布父容器视口上的 y 坐标
+
+（x/y，clientX/clientY，canvasX/canvasY 三套坐标系详解见 [G6 坐标系深度解析](/zh/docs/manual/advanced/coordinate-system)）
+
+- `item`: 事件的触发元素（节点/边/ Combo）
+- `target`: 事件的触发图形 [Shape](/zh/docs/manual/middle/elements/shape/shape-keyshape) 或画布对象
+- `bubbles`: 是否允许冒泡
+- `defaultPrevented`: 是否阻止了原生事件
+- `originalEvent`: 原始浏览器事件对象，其中的 `button` 可以用于区分 `click` 事件的左/中/右键
+- `timeStamp`: 触发事件的时间
+- `propagationStopped`: 是否阻止传播（向上冒泡）
+- `propagationPath`: 触发事件的路径
+
+`eventName` 见下方内容。
+
+### 通用交互事件

 | 事件名称 | 描述 |
 | --- | --- |
 | click | 单击鼠标**左键**或者按下回车键时触发 |
-| dblclick | 双击鼠标**左键**时触发 |
+| dblclick | 双击鼠标**左键**时触发，同时会触发两次 click |
 | mouseenter | 鼠标移入元素范围内触发，**该事件不冒泡**，即鼠标移到其后代元素上时不会触发 |
 | mousemove | 鼠标在元素内部移到时不断触发，不能通过键盘触发 |
 | mouseout | 鼠标移出目标元素后触发 |
@ -29,16 +63,17 @@ order: 8
 | drop | 被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上 |
 | keydown | 按下键盘键触发该事件 |
 | keyup | 释放键盘键触发该事件 |
+| wheel | 鼠标滚轮滚动时触发该事件 |
 | touchstart | 当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发 |
 | touchmove | 当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用 `preventDefault()` 事件可以阻止滚动。 |
 | touchend | 当手指从屏幕上离开的时候触发 |

-## Node 事件
+### Node 交互事件

 | 事件名称 | 描述 |
 | --- | --- |
 | node:click | 鼠标**左键**单击节点时触发 |
-| node:dblclick | 鼠标双击**左键**节点时触发 |
+| node:dblclick | 鼠标双击**左键**节点时触发，同时会触发两次 node:click |
 | node:mouseenter | 鼠标移入节点时触发 |
 | node:mousemove | 鼠标在节点内部移到时不断触发，不能通过键盘触发 |
 | node:mouseout | 鼠标移出节点后触发 |
@ -46,20 +81,21 @@ order: 8
 | node:mouseleave | 鼠标移出节点时触发 |
 | node:mousedown | 鼠标按钮在节点上按下（左键或者右键）时触发，不能通过键盘触发 |
 | node:mouseup | 节点上按下的鼠标按钮被释放弹起时触发，不能通过键盘触发 |
-| node:contextmenu | 用户在节点上右击鼠标时触发并打开右键菜单，见 [Demo](/zh/examples/tool/contextMenu) |
 | node:dragstart | 当节点开始被拖拽的时候触发的事件，此事件作用在被拖曳节点上 |
 | node:drag | 当节点在拖动过程中时触发的事件，此事件作用于被拖拽节点上 |
 | node:dragend | 当拖拽完成后触发的事件，此事件作用在被拖曳节点上 |
 | node:dragenter | 当拖曳节点进入目标元素的时候触发的事件，此事件作用在目标元素上 |
 | node:dragleave | 当拖曳节点离开目标元素的时候触发的事件，此事件作用在目标元素上 |
+| node:dragover | 当拖曳节点在另一目标元素上移动时触发此事件，此事件作用在目标元素上 |
 | node:drop | 被拖拽的节点在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上 |
+| node:contextmenu | 用户在节点上右击鼠标时触发并打开右键菜单，见 [Demo](/zh/examples/tool/contextMenu) |

-## Edge 事件
+### Edge 交互事件

 | 事件名称 | 描述 |
 | --- | --- |
 | edge:click | 鼠标**左键**单击边时触发 |
-| edge:dblclick | 鼠标双击**左键**边时触发 |
+| edge:dblclick | 鼠标双击**左键**边时触发，同时会触发两次 edge:click |
 | edge:mouseenter | 鼠标移入边时触发 |
 | edge:mousemove | 鼠标在边上移到时不断触发，不能通过键盘触发 |
 | edge:mouseout | 鼠标移出边后触发 |
@ -67,9 +103,18 @@ order: 8
 | edge:mouseleave | 鼠标移出边时触发 |
 | edge:mousedown | 鼠标按钮在边上按下（左键或者右键）时触发，不能通过键盘触发 |
 | edge:mouseup | 边上按下的鼠标按钮被释放弹起时触发，不能通过键盘触发 |
+| edge:dragenter | 当拖曳元素进入目标边元素的时候触发的事件，此事件作用在目标边元素上 |
+| edge:dragleave | 当拖曳元素离开目标边元素的时候触发的事件，此事件作用在目标边元素上 |
+| edge:dragover | 当拖曳元素在另一目标边上移动时触发此事件，此事件作用在目标边元素上 |
+| edge:drop | 被拖拽的元素在目标边元素上同时鼠标放开触发的事件，此事件作用在目标边元素上 |
 | edge:contextmenu | 用户在边上右击鼠标时触发并打开右键菜单，见 [Demo](/zh/examples/tool/contextMenu) |

-## Canvas 事件
+
+### Combo 交互事件
+
+Combo 继承所有 Node 事件。
+
+### Canvas 交互事件

 | 事件名称 | 描述 |
 | --- | --- |
@ -86,35 +131,49 @@ order: 8
 | canvas:dragstart | 当画布开始被拖拽的时候触发的事件，此事件作用在被拖曳画布上 |
 | canvas:drag | 当画布在拖动过程中时触发的事件，此事件作用于被拖拽画布上 |
 | canvas:dragend | 当拖拽完成后触发的事件，此事件作用在被拖曳画布上 |
-| canvas:dragenter | 当拖曳画布进入目标元素的时候触发的事件，此事件作用在目标元素上 |
-| canvas:dragleave | 当拖曳画布离开目标元素的时候触发的事件，此事件作用在目标元素上 |
+| canvas:dragenter | 当拖曳画布进入目标元素的时候触发的事件，此事件作用在目标画布上 |
+| canvas:dragleave | 当拖曳画布离开目标元素的时候触发的事件，此事件作用在目标画布上 |
+| canvas:drop | 被拖拽的元素在空白画布上同时鼠标放开触发的事件，此事件作用在目标画布上 |

-## 时机监听

-用于监听图的某方法调用前后的时机。
+
+## 时机事件
+
+用于监听图的某方法调用前后的时机。使用如下形式进行交互事件的监听：
+
+```
+graph.on(timingEventName, evt => {
+  // 一些操作
+})
+```
+
+`timingEventName` 见下方内容。

 | 事件名称 | 描述 |
 | --- | --- |
-| beforeadditem | 调用 `add` / `addItem` 方法之前触发 |
-| afteradditem | 调用 `add` / `addItem` 方法之后触发 |
-| beforeremoveitem | 调用 `remove` / `removeItem` 方法之前触发 |
-| afterremoveitem | 调用 `remove` / `removeItem` 方法之后触发 |
-| beforeupdateitem | 调用 `update` / `updateItem` 方法之前触发 |
-| afterupdateitem | 调用 `update` / `updateItem` 方法之后触发 |
-| beforeitemvisibilitychange | 调用 `showItem` / `hideItem` 方法之前触发 |
-| afteritemvisibilitychange | 调用 `showItem` / `hideItem` 方法之后触发 |
-| beforeitemstatechange | 调用 `setItemState` 方法之前触发 |
-| afteritemstatechange | 调用 `setItemState` 方法之后触发 |
-| beforeitemrefresh | 调用 `refreshItem` 方法之前触发 |
-| afteritemrefresh | 调用 `refreshItem` 方法之后触发 |
-| beforeitemstatesclear | 调用 `clearItemStates` 方法之前触发 |
-| afteritemstatesclear | 调用 `clearItemStates` 方法之后触发 |
-| beforemodechange | 调用 `setMode` / `addBehaviors` / `removeBehaviors` 方法之前触发 |
-| aftermodechange | 调用 `setMode` / `addBehaviors` / `removeBehaviors` 方法之后触发 |
-| beforelayout | 布局前触发。调用 `render` 时会进行布局，因此 `render` 时会触发。或用户主动调用图的 `layout` 时触发。 |
-| afterlayout | 布局完成后触发。调用 `render` 时会进行布局，因此 `render` 时布局完成后会触发。或用户主动调用图的 `layout` 时布局完成后触发。 |
+| beforeadditem | 调用 `graph.add` / `graph.addItem` 方法之前触发 |
+| afteradditem | 调用 `graph.add` / `graph.addItem` 方法之后触发 |
+| beforeremoveitem | 调用 `graph.remove` / `graph.removeItem` 方法之前触发 |
+| afterremoveitem | 调用 `graph.remove` / `graph.removeItem` 方法之后触发 |
+| beforeupdateitem | 调用 `graph.update` / `graph.updateItem` 方法之前触发 |
+| afterupdateitem | 调用 `graph.update` / `graph.updateItem` 方法之后触发 |
+| beforeitemvisibilitychange | 调用 `graph.showItem` / `graph.hideItem` 方法之前触发 |
+| afteritemvisibilitychange | 调用 `graph.showItem` / `graph.hideItem` 方法之后触发 |
+| beforeitemstatechange | 调用 `graph.setItemState` 方法之前触发 |
+| afteritemstatechange | 调用 `graph.setItemState` 方法之后触发 |
+| beforeitemrefresh | 调用 `graph.refreshItem` 方法之前触发 |
+| afteritemrefresh | 调用 `graph.refreshItem` 方法之后触发 |
+| beforeitemstatesclear | 调用 `graph.clearItemStates` 方法之前触发 |
+| afteritemstatesclear | 调用 `graph.clearItemStates` 方法之后触发 |
+| beforemodechange | 调用 `graph.setMode` / `graph.addBehaviors` / `graph.removeBehaviors` 方法之前触发 |
+| aftermodechange | 调用 `graph.setMode` / `graph.addBehaviors` / `graph.removeBehaviors` 方法之后触发 |
+| beforelayout | 布局前触发。调用 `graph.render` 时会进行布局，因此 `render` 时会触发。或用户主动调用图的 `graph.layout` 时触发。 |
+| afterlayout | 布局完成后触发。调用 `graph.render` 时会进行布局，因此 `render` 时布局完成后会触发。或用户主动调用图的 `lgraph.ayout` 时布局完成后触发。 |
+| graphstatechange | 调用 `graph.updateItemState` 方法之后触发 |
 | afteractivaterelations | 使用了 `'activate-relations'` Behavior 并触发了该行为后，该事件被触发 |
 | nodeselectchange | 使用了 `'brush-select'` , `'click-select'` 或 `'lasso-select'` Behavior 且选中元素发生变化时，该事件被触发 |
+| beforecreateedge | 使用内置交互 `create-edge`，创建边之前触发 |
+| aftercreateedge | 使用内置交互 `create-edge`，创建边之后触发 |
 | itemcollapsed | 在 TreeGraph 上使用了 `'collapse-expand'` Behavior 并触发了该行为后，该事件被触发 |
 | tooltipchange | 使用了 `'tooltip'` 或 `'edge-tooltip'` Behavior 且 tooltip 的显示/隐藏被改变后，该事件被触发 |
 | wheelzoom | 使用了 `'zoom-canvas'` Behavior 并用滚轮对图进行缩放后，该事件被触发 |
@ -188,6 +247,12 @@ order: 8

 无参数

+#### graphstatechange
+
+| 名称 | 类型 | 描述                 |
+| ---- | ---- | -------------------- |
+| states | Object | 当前各个状态下的元素，格式举例 `{ hover: [Node, Node], selected: [ Node ] }` |
+
 #### afteractivaterelations

 | 名称   | 类型   | 描述                 |
@ -202,6 +267,14 @@ order: 8
 | target        | Item   | 当前操作的 item 实例                                             |
 | selectedItems | Object | 当前被选中的所有 item 实例，形如 `{ nodes: [...], edges: [...]}` |

+#### beforecreateedge / aftercreateedge
+
+`beforecreateedge` 无参数。`aftercreateedge` 参数如下：
+
+| 名称          | 类型   | 描述                                                             |
+| ------------- | ------ | ---------------------------------------------------------------- |
+| edge        | Item   | 当前被创建的边实例                                             |
+
 #### itemcollapsed

 | 名称      | 类型    | 描述                                  |
--- a/examples/tree/customItemTree/demo/customEdgeTree.js
+++ b/examples/tree/customItemTree/demo/customEdgeTree.js
@ -111,11 +111,14 @@ G6.registerNode(
      const styles = this.getShapeStyle(cfg);
      const { labelCfg = {} } = cfg;

+      const w = styles.width;
+      const h = styles.height;
+
      const keyShape = group.addShape('rect', {
        attrs: {
          ...styles,
-          x: 0,
-          y: 0,
+          x: -w / 2,
+          y: -h / 2,
        },
      });

@ -131,8 +134,8 @@ G6.registerNode(
        const { style, img } = cfg.leftIcon;
        group.addShape('rect', {
          attrs: {
-            x: 1,
-            y: 1,
+            x: 1 - w / 2,
+            y: 1 - h / 2,
            width: 38,
            height: styles.height - 2,
            fill: '#8c8c8c',
@ -142,8 +145,8 @@ G6.registerNode(

        group.addShape('image', {
          attrs: {
-            x: 8,
-            y: 8,
+            x: 8 - w / 2,
+            y: 8 - h / 2,
            width: 24,
            height: 24,
            img:
@ -157,8 +160,8 @@ G6.registerNode(
      // 如果不需要动态增加或删除元素，则不需要 add 这两个 marker
      group.addShape('marker', {
        attrs: {
-          x: 40,
-          y: 52,
+          x: 40 - w / 2,
+          y: 52 - h / 2,
          r: 6,
          stroke: '#73d13d',
          cursor: 'pointer',
@ -169,8 +172,8 @@ G6.registerNode(

      group.addShape('marker', {
        attrs: {
-          x: 80,
-          y: 52,
+          x: 80 - w / 2,
+          y: 52 - h / 2,
          r: 6,
          stroke: '#ff4d4f',
          cursor: 'pointer',
@ -184,14 +187,15 @@ G6.registerNode(
          attrs: {
            ...labelCfg.style,
            text: cfg.label,
-            x: 50,
-            y: 25,
+            x: 50 - w / 2,
+            y: 25 - h / 2,
          },
        });
      }

      return keyShape;
    },
+    update: undefined
  },
  'rect',
 );
--- a/src/behavior/create-edge.ts
+++ b/src/behavior/create-edge.ts
@ -78,6 +78,9 @@ export default {
      if (self.source === model.id) {
        updateCfg.type = 'loop';
      }
+
+      graph.emit('beforecreateedge', {});
+
      graph.updateItem(self.edge, updateCfg);

      graph.emit('aftercreateedge', {
@ -137,6 +140,9 @@ export default {
              })) {
              return;
            }
+
+            graph.emit('beforecreateedge', {});
+
            graph.updateItem(self.edge, {
              target: model.id
            });
--- a/src/graph/controller/event.ts
+++ b/src/graph/controller/event.ts
@ -28,7 +28,7 @@ type Fun = () => void;
 //   'dragenter',
 //   'dragleave',
 //   'dragover',
-//   'dragout',
+//   'dragout', // no this event
 //   'drop',
 //   'touchstart',
 //   'touchmove',
--- a/src/plugins/edgeFilterLens/index.ts
+++ b/src/plugins/edgeFilterLens/index.ts
@ -275,7 +275,7 @@ export default class EdgeFilterLens extends Base {
      // model上的x, y是相对于图形中心的，delegateShape是g实例，x,y是绝对坐标
      lensDelegate = parent.addShape('circle', {
        attrs: {
-          r: r,
+          r,
          x: mCenter.x,
          y: mCenter.y,
          ...attrs,