Skip to content

Commit f1ead08

Browse files
mxz96102Yanyan-Wang
mxz96102
authored and
Yanyan-Wang
committed
feat: react node doc
1 parent 0f1992e commit f1ead08

File tree

2 files changed

+355
-0
lines changed

2 files changed

+355
-0
lines changed

‎packages/site/docs/manual/middle/elements/nodes/react-node.en.md

+177
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
---
2+
title: How to custom node with React Component
3+
order: 5
4+
---
5+
6+
Customing nodes has long been a problem, and even with the introduction of the jsx solution to simplify it, it's still difficult, so we've introduced `@antv/g6-react-node`, a package that makes it easier to define nodes. event animations, etc., to make it easier to use G6.
7+
8+
### How to use
9+
10+
First of all, after installing G6, you need to additionally install `@antv/g6-react-node`
11+
12+
```bash
13+
npm install @antv/g6-react-node
14+
// yarn add @antv/g6-react-node
15+
```
16+
17+
As an example of a simple card with definitions, custom events, node data management, etc..
18+
19+
```jsx
20+
import React from 'react';
21+
import G6 from '@antv/g6';
22+
import { Rect, Text, Circle, Image, Group, createNodeFromReact } from '@antv/g6-react-node';
23+
24+
const Tag = ({ text, color }) => (
25+
<Rect
26+
style={{
27+
fill: color,
28+
padding: [5, 10],
29+
width: 'auto',
30+
radius: [4],
31+
margin: [0, 8],
32+
}}
33+
>
34+
<Text style={{ fill: '#fff', fontSize: 10 }}>{text}</Text>
35+
</Rect>
36+
);
37+
38+
const Card = ({ cfg }) => {
39+
const { collapsed = false } = cfg;
40+
41+
return (
42+
<Group draggable>
43+
<Rect
44+
style={{
45+
width: 400,
46+
height: 'auto',
47+
fill: '#fff',
48+
stroke: '#ddd',
49+
shadowColor: '#eee',
50+
shadowBlur: 30,
51+
radius: [8],
52+
justifyContent: 'center',
53+
padding: [18, 0],
54+
}}
55+
draggable
56+
>
57+
<Text
58+
style={{
59+
fill: '#000',
60+
margin: [0, 24],
61+
fontSize: 16,
62+
fontWeight: 'bold',
63+
}}
64+
>
65+
This is a card
66+
</Text>
67+
<Text style={{ fill: '#ccc', fontSize: 12, margin: [12, 24] }}>
68+
I'm loooooooooooooooooooooooooooooooooog
69+
</Text>
70+
{collapsed && (
71+
<Group>
72+
<Image
73+
style={{
74+
img: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
75+
width: 200,
76+
height: 200,
77+
margin: [24, 'auto'],
78+
}}
79+
/>
80+
<Rect style={{ width: 'auto', flexDirection: 'row', padding: [4, 12] }}>
81+
<Tag color="#66ccff" text="We" />
82+
<Tag color="#66ccff" text="are" />
83+
<Tag color="#66ccff" text="many" />
84+
<Tag color="#66ccff" text="tags" />
85+
</Rect>
86+
</Group>
87+
)}
88+
<Circle
89+
style={{
90+
position: 'absolute',
91+
x: 380,
92+
y: 20,
93+
r: 5,
94+
fill: collapsed ? 'blue' : 'green',
95+
}}
96+
>
97+
<Text
98+
style={{
99+
fill: '#fff',
100+
fontSize: 10,
101+
margin: [-6, -3, 0],
102+
cursor: 'pointer',
103+
}}
104+
onClick={(evt, node, shape, graph) => {
105+
graph.updateItem(node, {
106+
collapsed: !collapsed,
107+
});
108+
}}
109+
>
110+
{collapsed ? '-' : '+'}
111+
</Text>
112+
</Circle>
113+
</Rect>
114+
</Group>
115+
);
116+
};
117+
118+
G6.registerNode('test', createNodeFromReact(Card));
119+
```
120+
121+
It results in this
122+
123+
<img width="400" src="https://gw.alipayobjects.com/zos/antfincdn/imZMZ8jYKJ/xiazai%252520%2815%29.png" />
124+
125+
126+
### Using Guide
127+
128+
#### Shape React Component
129+
130+
When defining React component nodes, you cannot use any hook or asynchronous fetching logic as node drawing currently needs to be a synchronous process, and it is recommended to put all state as well as data information in the node itself DATA for easier management. In a React component node, all data flow should be: node data -> react component props(cfg) -> node content changes. The component itself needs to be free of any side effects and all changes to the node data should be based on updateItem.
131+
132+
133+
#### React inner layouts
134+
135+
If you don't do any positioning or layout, all layouts will follow the normal document flow, top-down. To give you more freedom of layout, React also has internal support for flex layouts, which you can use by manipulating: `alignContent`,`alignItems`,`alignSelf`,`display`,`flex`,`flexBasis`,`flexGrow`,` flexShrink`, `flexDirection`, `flexWrap`, `height`, `width`, `justifyContent`, `margin`, `padding`, `maxHeight`, `maxWidth`, `minHeight`, ` minWidth` which control the internal layout of the node.
136+
137+
138+
#### Event handling based on the React component Shape
139+
140+
To make it easier to control nodes, we support event binding to a graph inside a node (event bubbling will be supported in a later version), these event binding functions have uniform parameters: `(evt: the event of G6 itself, node: the node where the event occurs, shape: the Shape where the event occurs, graph: the graph where the event is emitted graph)`, we currently support most of the G6 events: `onClick`, `onDBClick`, `onMouseEnter`, `onMouseMove`, `onMouseOut`, `onMouseOver`, `onMouseLeave`, ` onMouseDown `,`onMouseUp `,`onDragStart `,`onDrag `,`onDragEnd `,`onDragEnter `,`onDragLeave `,`onDragOver `,`onDrop `,`onContextMenu `
141+
142+
⚠️ Note: After using the event, you need to mount the event on the performed pair of graphs using the function `appenAutoShapeListener(graph)`, which can be derived directly from the `@antv/g6-react-node` package.
143+
144+
#### Simple animations based on React component Shape (alpha)
145+
146+
In order to make it easier to add animations to nodes, we have built in some simple animations to use, hopefully to satisfy the effects of basic interaction. In the first phase we have only introduced six animations for now, the `animation` property is animated when it is set, and the property stops animating when it is empty.
147+
148+
For Example:
149+
150+
```jsx
151+
<Rect
152+
style={{
153+
width: 400,
154+
// ...
155+
}}
156+
draggable
157+
animation={
158+
animated && {
159+
animate: 'rubber', // 同时支持 'spin','flash','pulse','tada','bounce'
160+
repeat: true,
161+
duration: 2000,
162+
}
163+
}
164+
>
165+
```
166+
167+
<img src="https://gw.alipayobjects.com/zos/antfincdn/cXLES5%26w5x/ezgif.com-video-to-gif.gif" />
168+
169+
### More Help
170+
171+
[G6 React Node Docs](https://dicegraph.github.io/g6-react-node/)
172+
173+
174+
175+
176+
177+

‎packages/site/docs/manual/middle/elements/nodes/react-node.zh.md

+178
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
---
2+
title: 使用React直接定义节点
3+
order: 5
4+
---
5+
6+
长期以来，定义节点一直是一个比较让大家烦恼的问题，即使推出了 jsx 方案来简化，也依然有一定难度，于是我们推出了 `@antv/g6-react-node` 这一个包，让大家可以更简单的定义节点，这个包支持 ts 提示，并且包含了高阶的基于 shape 的事件动画等，让大家可以更方便的使用 G6。
7+
8+
### 怎么使用
9+
10+
首先在安装完 G6 后，你需要额外安装 `@antv/g6-react-node`
11+
12+
```bash
13+
npm install @antv/g6-react-node
14+
// yarn add @antv/g6-react-node
15+
```
16+
17+
以一个简单的卡片为例子，它包含了定义，自定义事件，节点数据管理等的示例：
18+
19+
```jsx
20+
import React from 'react';
21+
import G6 from '@antv/g6';
22+
import { Rect, Text, Circle, Image, Group, createNodeFromReact } from '@antv/g6-react-node';
23+
24+
const Tag = ({ text, color }) => (
25+
<Rect
26+
style={{
27+
fill: color,
28+
padding: [5, 10],
29+
width: 'auto',
30+
radius: [4],
31+
margin: [0, 8],
32+
}}
33+
>
34+
<Text style={{ fill: '#fff', fontSize: 10 }}>{text}</Text>
35+
</Rect>
36+
);
37+
38+
const Card = ({ cfg }) => {
39+
const { collapsed = false } = cfg;
40+
41+
return (
42+
<Group draggable>
43+
<Rect
44+
style={{
45+
width: 400,
46+
height: 'auto',
47+
fill: '#fff',
48+
stroke: '#ddd',
49+
shadowColor: '#eee',
50+
shadowBlur: 30,
51+
radius: [8],
52+
justifyContent: 'center',
53+
padding: [18, 0],
54+
}}
55+
draggable
56+
>
57+
<Text
58+
style={{
59+
fill: '#000',
60+
margin: [0, 24],
61+
fontSize: 16,
62+
fontWeight: 'bold',
63+
}}
64+
>
65+
这是一个卡片
66+
</Text>
67+
<Text style={{ fill: '#ccc', fontSize: 12, margin: [12, 24] }}>
68+
我是一段特别特别特别特别特别特别特别长的描述
69+
</Text>
70+
{collapsed && (
71+
<Group>
72+
<Image
73+
style={{
74+
img: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
75+
width: 200,
76+
height: 200,
77+
margin: [24, 'auto'],
78+
}}
79+
/>
80+
<Rect style={{ width: 'auto', flexDirection: 'row', padding: [4, 12] }}>
81+
<Tag color="#66ccff" text="我是" />
82+
<Tag color="#66ccff" text="很多个" />
83+
<Tag color="#66ccff" text="很多个的" />
84+
<Tag color="#66ccff" text="标签" />
85+
</Rect>
86+
</Group>
87+
)}
88+
<Circle
89+
style={{
90+
position: 'absolute',
91+
x: 380,
92+
y: 20,
93+
r: 5,
94+
fill: collapsed ? 'blue' : 'green',
95+
}}
96+
>
97+
<Text
98+
style={{
99+
fill: '#fff',
100+
fontSize: 10,
101+
margin: [-6, -3, 0],
102+
cursor: 'pointer',
103+
}}
104+
onClick={(evt, node, shape, graph) => {
105+
graph.updateItem(node, {
106+
collapsed: !collapsed,
107+
});
108+
}}
109+
>
110+
{collapsed ? '-' : '+'}
111+
</Text>
112+
</Circle>
113+
</Rect>
114+
</Group>
115+
);
116+
};
117+
118+
G6.registerNode('test', createNodeFromReact(Card));
119+
```
120+
121+
他展示了这样一个卡片的节点：
122+
123+
<img width="400" src="https://gw.alipayobjects.com/zos/antfincdn/imZMZ8jYKJ/xiazai%252520%2815%29.png" />
124+
125+
126+
### 使用指南
127+
128+
#### 图形React组件
129+
130+
定义React组件节点的时候，你不能使用任何的hook或者异步获取的逻辑，因为目前节点绘制需要是一个同步的过程，并且，我们推荐把所有状态以及数据信息放在节点本身data中，这样可以更方便的进行管理。在React组件节点中，所有的数据流动都应该是：节点数据 -> react组件props(cfg) -> 节点内容变化。组件本身需要是没有任何副作用的，所有对于节点数据的改变，都是基于updateItem的。
131+
132+
#### React组件内部的布局
133+
134+
如果你没有做任何定位或者布局，所有布局都会按照正常的文档流，自上而下排布。为了让大家有更自由的布局方式，React内部还支持了flex布局，你可以通过操作：`alignContent`,`alignItems`,`alignSelf`,`display`,`flex`,`flexBasis`,`flexGrow`,`flexShrink`,`flexDirection`,`flexWrap`,`height`,`width`,`justifyContent`,`margin`,`padding`,`maxHeight`,`maxWidth`,`minHeight`,`minWidth` 这几个属性来控制节点内部的布局。
135+
136+
#### 基于React组件Shape的事件处理
137+
138+
为了更加方便的控制节点，我们支持了在节点内部的某一个图形进行事件绑定(事件冒泡会在后续版本支持)，这些事件绑定函数都有统一的参数： `(evt: G6本身的事件, node: 事件发生的节点, shape: 事件发生的Shape, graph: 发出事件的graph)`，目前我们支持了大部分的G6事件：`onClick`,`onDBClick `,`onMouseEnter`,`onMouseMove `,`onMouseOut`,`onMouseOver `,`onMouseLeave`,`onMouseDown `,`onMouseUp `,`onDragStart `,`onDrag`,`onDragEnd `,`onDragEnter `,`onDragLeave `,`onDragOver`,`onDrop`,`onContextMenu`
139+
140+
⚠️ 注意： 使用了事件后，需要使用函数 `appenAutoShapeListener(graph)` 对所进行对图进行事件挂载才可以生效，该方法可以直接从`@antv/g6-react-node`包引出。
141+
142+
#### 基于React组件Shape的简单动画（alpha）
143+
144+
为了更加方便给节点添加动画，所以我们内置了一些简单的动画来使用，希望能满足基本交互的效果，第一期我们暂时只推出了六种动画，`animation`属性设置后就有动画，属性为空则停止动画。
145+
146+
示例：
147+
148+
```jsx
149+
<Rect
150+
style={{
151+
width: 400,
152+
// ...
153+
}}
154+
draggable
155+
animation={
156+
animated && {
157+
animate: 'rubber', // 同时支持 'spin','flash','pulse','tada','bounce'
158+
repeat: true,
159+
duration: 2000,
160+
}
161+
}
162+
>
163+
```
164+
165+
<img src="https://gw.alipayobjects.com/zos/antfincdn/cXLES5%26w5x/ezgif.com-video-to-gif.gif" />
166+
167+
### 更多帮助
168+
169+
[「如何用React在G6里面优雅的定制节点」](https://www.yuque.com/docs/share/e1cb2776-ed13-45bb-8172-69b1d3db2fc2?#)
170+
171+
172+
[G6 React Node Docs](https://dicegraph.github.io/g6-react-node/)
173+
174+
175+
176+
177+
178+

0 commit comments

Comments
 (0)