docs: dom events.

docs/api/Custom.en.md

@@ -1,6 +1,6 @@
 ---
 title: Custom Mechanism
-order: 10
+order: 7
 ---
 
 This document will introduce custom mechanism in G6, including custom node, custom edge, custom behavior, custom layout. All of them are mounted on global G6, called by `G6.registerXXX`.

docs/api/Custom.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 自定义机制
-order: 10
+order: 7
 ---
 
 本文介绍 G6 的自定义机制，包括自定义节点、自定义边、自定义交互行为、自定义布局的相关方法。它们都被挂载在 G6 全局上，通过 `G6.registerXXX` 进行调用。

docs/api/Group.en.md

@@ -1,6 +1,6 @@
 ---
 title: Graphics Group
-order: 8
+order: 9
 ---
 
 Graphics Group (hereinafter referred to as Group) in G6 is similar to <a href='https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g' target='_blank'> `<g>` tag in SVG </a>: Group a container of a group of graphics. The transformations on a Group such as clipping, rotating, zooming, and translating will be applied to all the children of the Group. The properties like color and position will also be inherited by its children. Besides, Group can be nested for complicated objects. For more information about Group, please refer to [Graphics Group](/en/docs/manual/advanced/keyconcept/graphics-group) document.

docs/api/Group.zh.md

@@ -1,6 +1,6 @@
 ---
 title: Graphics Group
-order: 8
+order: 9
 ---
 
 图形分组 Graphics Group（下文简称 Group） 类似于 <a href='https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g' target='_blank'>SVG 中的 `<g>` 标签</a>：Group  是用来组合图形对象的容器。在 Group  上添加变换（例如剪裁、旋转、放缩、平移等）会应用到其所有的子元素上。在 Group  上添加属性（例如颜色、位置等）会被其所有的子元素继承。此外， Group 可以多层嵌套使用，因此可以用来定义复杂的对象。关于 Group 更详细的介绍请参考 [图形分组 Group](/zh/docs/manual/advanced/keyconcept/graphics-group) 文档。

docs/api/Plugins.en.md

@@ -1,6 +1,6 @@
 ---
 title: Plugins
-order: 9
+order: 10
 ---
 
 There are several plugins in G6 which can be used inside and ouside G6 freely.

docs/api/Plugins.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 插件 Plugins
-order: 9
+order: 10
 ---
 
 G6 中支持插件提供了一些可插拔的组件，包括：

docs/api/Shape.en.md

@@ -1,6 +1,6 @@
 ---
-title: Register
-order: 7
+title: Register Node and Edge
+order: 8
 ---
 
 This document shows the functions that should be implemented or rewrited when custom nodes by `G6.registerNode` or custom edges by `G6.registerEdge`.

docs/api/Shape.zh.md

@@ -1,6 +1,6 @@
 ---
-title: 自定义
-order: 7
+title: 自定义节点与边
+order: 8
 ---
 
 本文介绍的相关方法是在自定义节点（registerNode）或自定义边（registerEdge）的过程中需要部分实现或复写的方法。

docs/api/nodeEdge/Edge.en.md

@@ -1,6 +1,6 @@
 ---
 title: Edge
-order: 1
+order: 2
 ---
 
 Edge inherits from item. The functions of Item are also available for Edge.

docs/api/nodeEdge/Edge.zh.md

@@ -1,6 +1,6 @@
 ---
 title: Edge
-order: 1
+order: 2
 ---
 
 Edge 继承自 Item。所以 Item 的方法在 Edge 实例中都可以使用。

docs/api/shapeProperties.en.md

@@ -15,7 +15,8 @@ G6 has these shapes:
 - [image](#image);
 - [marker](#marker);
 - [path](#path);
-- [text](#text).
+- [text](#text);
+- [dom(svg)](#dom-svg): DOM (available only when the `renderer` of Graph instance is `'svg'`).
 
 ### Common Property
 
@@ -306,6 +307,8 @@ group.addShape('text', {
 
 > This shape is available only when the `renderer` is assgined to `'svg'` for graph instance.
 
+<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ Attention:</strong></span> If you custom a Node type or an Edge type with dom shape, please use the original DOM events instead of events of G6.
+
 ### Properties
 
 | Name | Description | Remark |
@@ -333,4 +336,4 @@ group.addShape('dom', {
   name: 'dom-shape',
   draggable: true,
 });
-```
+```

docs/api/shapeProperties.zh.md

@@ -15,7 +15,8 @@ G6 支持以下图形：
 - [image](#图片图形-image)：图片；
 - [marker](#标记图形-marker)：标记；
 - [path](#路径-path)：路径；
-- [text](#文本-text)：文本。
+- [text](#文本-text)：文本；
+- [dom(svg)](#dom-svg)：DOM（图渲染方式 `renderer` 为 `'svg'` 时可用）。
 
 ## 通用属性
 
@@ -304,6 +305,8 @@ group.addShape('text', {
 
 > 仅在 Graph 的 `renderer` 为 `'svg'` 时可以使用。
 
+<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ 注意:</strong></span> 使用 dom 进行自定义的节点或边，不支持 G6 的交互事件，请使用原生 DOM 的交互事件。
+
 ### 特殊属性
 
 | 属性名 | 含义 | 备注 |

docs/manual/advanced/custom-node.en.md

@@ -515,4 +515,32 @@ const graph = new G6.Graph({
 });
 graph.data(data);
 graph.render();
+```
+
+
+<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ Attention:</strong></span> DOM Shape in G6 does not support the events on Node and Edge. You can bind events for DOM as the way in HTML. e.g.:
+```javascript
+G6.registerNode('dom-node', {
+  draw: (cfg: ModelConfig, group: Group) => {
+    return group.addShape('dom', {
+      attrs: {
+        width: cfg.size[0],
+        height: cfg.size[1],
+        // DOM's html with onclick event
+        html: `
+        <div onclick="handleClick('Hello')" style="background-color: #fff; border: 2px solid #5B8FF9; border-radius: 5px; width: ${cfg.size[0]-5}px; height: ${cfg.size[1]-5}px; display: flex;">
+          <div style="height: 100%; width: 33%; background-color: #CDDDFD">
+            <img alt="" style="line-height: 100%; padding-top: 6px; padding-left: 8px;" src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ" width="20" height="20" />  
+          </div>
+          <span style="margin:auto; padding:auto; color: #5B8FF9">${cfg.label}</span>
+        </div>
+          `
+      },
+      draggable: true
+    });
+  },
+}, 'single-node');
+const handleClick = msg => {
+  // ...
+}
 ```

docs/manual/advanced/custom-node.zh.md

@@ -510,4 +510,31 @@ const graph = new G6.Graph({
 });
 graph.data(data);
 graph.render();
+```
+
+<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ 注意:</strong></span> G6 的节点/边事件不支持 DOM 类型的图形。如果需要为 DOM 节点绑定事件，请使用原生 DOM 事件。例如：
+```javascript
+G6.registerNode('dom-node', {
+  draw: (cfg: ModelConfig, group: Group) => {
+    return group.addShape('dom', {
+      attrs: {
+        width: cfg.size[0],
+        height: cfg.size[1],
+        // 传入 DOM 的 html，带有原生 onclick 事件
+        html: `
+        <div onclick="handleClick('Hello')" style="background-color: #fff; border: 2px solid #5B8FF9; border-radius: 5px; width: ${cfg.size[0]-5}px; height: ${cfg.size[1]-5}px; display: flex;">
+          <div style="height: 100%; width: 33%; background-color: #CDDDFD">
+            <img alt="" style="line-height: 100%; padding-top: 6px; padding-left: 8px;" src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ" width="20" height="20" />  
+          </div>
+          <span style="margin:auto; padding:auto; color: #5B8FF9">${cfg.label}</span>
+        </div>
+          `
+      },
+      draggable: true
+    });
+  },
+}, 'single-node');
+const handleClick = msg => {
+  // ...
+}
 ```