From 3378b4503cb4774818b87cfb161603742adef1e5 Mon Sep 17 00:00:00 2001 From: Yanyan-Wang Date: Mon, 16 Mar 2020 18:25:20 +0800 Subject: [PATCH] docs: dom events. --- docs/api/Custom.en.md | 2 +- docs/api/Custom.zh.md | 2 +- docs/api/Group.en.md | 2 +- docs/api/Group.zh.md | 2 +- docs/api/Plugins.en.md | 2 +- docs/api/Plugins.zh.md | 2 +- docs/api/Shape.en.md | 4 ++-- docs/api/Shape.zh.md | 4 ++-- docs/api/nodeEdge/Edge.en.md | 2 +- docs/api/nodeEdge/Edge.zh.md | 2 +- docs/api/shapeProperties.en.md | 7 +++++-- docs/api/shapeProperties.zh.md | 5 ++++- docs/manual/advanced/custom-node.en.md | 28 ++++++++++++++++++++++++++ docs/manual/advanced/custom-node.zh.md | 27 +++++++++++++++++++++++++ 14 files changed, 76 insertions(+), 15 deletions(-) diff --git a/docs/api/Custom.en.md b/docs/api/Custom.en.md index 289671c004..22a51c7169 100644 --- a/docs/api/Custom.en.md +++ b/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`. diff --git a/docs/api/Custom.zh.md b/docs/api/Custom.zh.md index 137c69b58f..2e66168036 100644 --- a/docs/api/Custom.zh.md +++ b/docs/api/Custom.zh.md @@ -1,6 +1,6 @@ --- title: 自定义机制 -order: 10 +order: 7 --- 本文介绍 G6 的自定义机制，包括自定义节点、自定义边、自定义交互行为、自定义布局的相关方法。它们都被挂载在 G6 全局上，通过 `G6.registerXXX` 进行调用。 diff --git a/docs/api/Group.en.md b/docs/api/Group.en.md index 11caa75b22..53fe56de3b 100644 --- a/docs/api/Group.en.md +++ b/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 `` tag in SVG : 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. diff --git a/docs/api/Group.zh.md b/docs/api/Group.zh.md index ecd0e7619d..a01aa8c576 100644 --- a/docs/api/Group.zh.md +++ b/docs/api/Group.zh.md @@ -1,6 +1,6 @@ --- title: Graphics Group -order: 8 +order: 9 --- 图形分组 Graphics Group（下文简称 Group） 类似于 SVG 中的 `` 标签：Group  是用来组合图形对象的容器。在 Group  上添加变换（例如剪裁、旋转、放缩、平移等）会应用到其所有的子元素上。在 Group  上添加属性（例如颜色、位置等）会被其所有的子元素继承。此外， Group 可以多层嵌套使用，因此可以用来定义复杂的对象。关于 Group 更详细的介绍请参考 [图形分组 Group](/zh/docs/manual/advanced/keyconcept/graphics-group) 文档。 diff --git a/docs/api/Plugins.en.md b/docs/api/Plugins.en.md index 254f81c4f2..1dbbbea289 100644 --- a/docs/api/Plugins.en.md +++ b/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. diff --git a/docs/api/Plugins.zh.md b/docs/api/Plugins.zh.md index b9407f1be5..6a6c81cdd3 100644 --- a/docs/api/Plugins.zh.md +++ b/docs/api/Plugins.zh.md @@ -1,6 +1,6 @@ --- title: 插件 Plugins -order: 9 +order: 10 --- G6 中支持插件提供了一些可插拔的组件，包括： diff --git a/docs/api/Shape.en.md b/docs/api/Shape.en.md index 43451cd441..6fd2f06024 100644 --- a/docs/api/Shape.en.md +++ b/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`. diff --git a/docs/api/Shape.zh.md b/docs/api/Shape.zh.md index 8fab686029..d1e8258f56 100644 --- a/docs/api/Shape.zh.md +++ b/docs/api/Shape.zh.md @@ -1,6 +1,6 @@ --- -title: 自定义 -order: 7 +title: 自定义节点与边 +order: 8 --- 本文介绍的相关方法是在自定义节点（registerNode）或自定义边（registerEdge）的过程中需要部分实现或复写的方法。 diff --git a/docs/api/nodeEdge/Edge.en.md b/docs/api/nodeEdge/Edge.en.md index 49c578e028..e30ce67276 100644 --- a/docs/api/nodeEdge/Edge.en.md +++ b/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. diff --git a/docs/api/nodeEdge/Edge.zh.md b/docs/api/nodeEdge/Edge.zh.md index 35d689a478..4fcd94d835 100644 --- a/docs/api/nodeEdge/Edge.zh.md +++ b/docs/api/nodeEdge/Edge.zh.md @@ -1,6 +1,6 @@ --- title: Edge -order: 1 +order: 2 --- Edge 继承自 Item。所以 Item 的方法在 Edge 实例中都可以使用。 diff --git a/docs/api/shapeProperties.en.md b/docs/api/shapeProperties.en.md index d109259ddd..e47b8ae466 100644 --- a/docs/api/shapeProperties.en.md +++ b/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. +⚠️ Attention: 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, }); -``` \ No newline at end of file +``` diff --git a/docs/api/shapeProperties.zh.md b/docs/api/shapeProperties.zh.md index 93a386dfb9..5104145d8b 100644 --- a/docs/api/shapeProperties.zh.md +++ b/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'` 时可以使用。 +⚠️ 注意: 使用 dom 进行自定义的节点或边，不支持 G6 的交互事件，请使用原生 DOM 的交互事件。 + ### 特殊属性 | 属性名 | 含义 | 备注 | diff --git a/docs/manual/advanced/custom-node.en.md b/docs/manual/advanced/custom-node.en.md index e995124c03..dcd0df3760 100644 --- a/docs/manual/advanced/custom-node.en.md +++ b/docs/manual/advanced/custom-node.en.md @@ -515,4 +515,32 @@ const graph = new G6.Graph({ }); graph.data(data); graph.render(); +``` + + +⚠️ Attention: 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: ` +
+
+ +
+ ${cfg.label} +
+ ` + }, + draggable: true + }); + }, +}, 'single-node'); +const handleClick = msg => { + // ... +} ``` \ No newline at end of file diff --git a/docs/manual/advanced/custom-node.zh.md b/docs/manual/advanced/custom-node.zh.md index b05dfa1cf8..f1fb007a30 100644 --- a/docs/manual/advanced/custom-node.zh.md +++ b/docs/manual/advanced/custom-node.zh.md @@ -510,4 +510,31 @@ const graph = new G6.Graph({ }); graph.data(data); graph.render(); +``` + +⚠️ 注意: 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: ` +
+
+ +
+ ${cfg.label} +
+ ` + }, + draggable: true + }); + }, +}, 'single-node'); +const handleClick = msg => { + // ... +} ``` \ No newline at end of file