Skip to content

Commit

Permalink
docs: update interface docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@pomelo-nwu
pomelo-nwu committed Feb 24, 2021
1 parent 306d847 commit 4e6310d
Show file tree
Hide file tree
Showing 5 changed files with 404 additions and 0 deletions.
4 changes: 4 additions & 0 deletions packages/graphin/docs/interface/apis.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import { ApisType } from '../../src/apis/types';

export const apis = (props: ApisType) => {};
121 changes: 121 additions & 0 deletions packages/graphin/docs/interface/index.en-US.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
---
title: Interface
order: 1
group:
path: /quick-start
title: Quick start
order: 2
nav:
path: /graphin
order: 0
---

## How to use Graphin

The most basic role of Graphin is the React component. The following table is the interface description of `<Graphin />`.

| Property name | type | Default value | Description |
| ---------------- | ------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| data | `GraphinProps.data` | `-` | [Data Structure](/en-US/graphin/render/data) |
| layout | `Layout` | `{type:"grid"}` | [Set Layout](/en-US/graphin/layout/layout) |
| theme | `ThemeType` | `{mode:"#light",...}` | [Set theme](/en-US/graphin/render/theme#api) |
| ref | `ReactRef` | `-` | Graphin component Ref |
| width | `number` | `-` | Graphin canvas width, it is recommended to set the width through the parent element container, the default width is 100% |
| height | `number` | `-` | Graphin canvas height, it is recommended to set the width through the parent element container, the default minHeight is 500px |
| modes | `G6.Modes` | `-` | Recommended use [Behaviors](/en-US/graphin/behaviors/behaviors) |
| plugins | `G6.Plugins` | `-` | Recommended [Components](/en-US/components/interaction/context-menu) |
| defaultNode | | | Default style configuration of node |
| defaultEdge | | | Default edge style configuration |
| defaultCombo | | | Combo's default style configuration |
| nodeStateStyles | | | Node style configuration in different states |
| edgeStateStyles | | | Edge style configuration in different states |
| comboStateStyles | | | Combo style configuration in different states |
| fitView | `boolean` | false | Whether to enable canvas adaptation. The image automatically adapts to the canvas size after opening |
| fitCenter | `boolean` | false | After opening, the graph will be translated, the center of the graph will be aligned to the center of the canvas, but not zoomed. Priority is lower than fitView |
| fitViewPadding | `number[]` | [0,0] | Take effect when fitView is true. When the figure adapts to the canvas, specify the space around it |
| minZoom | `number` | 0.2 | Minimum zoom ratio |
| maxZoom | `number` | 10 | Maximum zoom ratio |
| enabledStack | `boolean` | false | Whether to enable stack, that is, whether to enable redo & undo function |
| maxStep | `number` | 10 | redo & undo maximum number of steps, only works when enabledStack is true |

## How to use the graph instance in Graphin

### 01. Get through Ref

```jsx | pure
import React from 'react';
import Graphin, { Utils } from '@antv/graphin';

const data = Utils.mock(10)
.circle()
.graphin();

const Demo = () => {
const graphinRef = React.createRef();

React.useEffect(() => {
const {
graph, // Graph instance of g6
apis, // API interface provided by Graphin
} = graphinRef.current;
console.log('ref', graphinRef, graph, apis);
}, []);

return (
<div className="App">
<Graphin data={data} ref={graphinRef}></Graphin>
</div>
);
};
export default Demo;
```

### 02. Get through GraphinContext

```jsx | pure
import React from 'react';
import Graphin, { Utils, GraphinContext } from '@antv/graphin';

const data = Utils.mock(10)
.circle()
.graphin();

const CustomComponents = () => {
// As long as the components wrapped in Graphin, you can obtain graph instances and apis provided by Graphin through Context
const { graph, apis } = React.useContext(GraphinContext);
return null;
};

const Demo = () => {
return (
<div className="App">
<Graphin data={data} ref={graphinRef}>
<CustomComponents />
</Graphin>
</div>
);
};
export default Demo;
```

## the instance of G6 graph

> Refer to the instance of G6 graph: https://g6.antv.vision/en/docs/api/graphFunc/get_set
The commonly used methods are as follows:

- [Viewport Operation](https://g6.antv.vision/en/docs/api/graphFunc/transform)
- [Element Operation](https://g6.antv.vision/en/docs/api/graphFunc/item)
- [Find element](https://g6.antv.vision/en/docs/api/graphFunc/find)
- [Element State](https://g6.antv.vision/en/docs/api/graphFunc/state)
- [Event Binding](https://g6.antv.vision/en/docs/api/graphFunc/on_off)
- [Layout](https://g6.antv.vision/en/docs/api/graphFunc/layout): Note ⚠️: The layout algorithm in Graphin is the same as G6, but the layout process is not the layout process of G6, so about the layout The interface operation is temporarily unavailable and will be compatible in the future.
- [Graph calculation related](https://g6.antv.vision/en/docs/api/graphFunc/calculation)
- [Add watermark](https://g6.antv.vision/en/docs/api/graphFunc/watermarker)
- [Export Picture](https://g6.antv.vision/en/docs/api/graphFunc/download)

## Graphin built-in interface: apis

> In the future iterations of Graphin versions, commonly used interfaces will be aggregated on the upper layer of Graphin.
<API src='./apis.ts'>
121 changes: 121 additions & 0 deletions packages/graphin/docs/interface/index.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
---
title: 接口文档
order: 1
group:
path: /quick-start
title: 快速开始
order: 2
nav:
path: /graphin
order: 0
---

## 如何使用 Graphin

Graphin 最基础的角色是 React 组件，下表是`<Graphin />`的接口说明.

| 属性名 | Typescript 类型 | 默认值 | 说明 |
| ---------------- | ------------------- | --------------------- | ---------------------------------------------------------------------------- |
| data | `GraphinProps.data` | **是** | [数据结构](/graphin/render/data) |
| layout | `Layout` | `{type:"grid"}` | [设置布局](/graphin/layout/layout) |
| theme | `ThemeType` | `{mode:"#light",...}` | [设置主题](/graphin/render/theme#api) |
| ref | `ReactRef` | `-` | Graphin 组件 Ref |
| width | `number` | `-` | Graphin 画布宽度,推荐通过父元素容器设置宽度，默认宽度为 100% |
| height | `number` | `-` | Graphin 画布高度,推荐通过父元素容器设置宽度,默认最小高度 500px |
| modes | `G6.Modes` | `-` | 推荐使用 [Behaviors](/graphin/behaviors/behaviros) |
| plugins | `G6.Plugins` | `-` | 推荐使用 [Components](/components/interaction/context-menu) |
| defaultNode | | | 节点的默认样式配置 |
| defaultEdge | | | 边的默认样式配置 |
| defaultCombo | | | Combo 的默认样式配置 |
| nodeStateStyles | | | 不同状态下的节点样式配 |
| edgeStateStyles | | | 不同状态下的边样式配置 |
| comboStateStyles | | | 不同状态下的 Combo 样式配置 |
| fitView | `boolean` | false | 是否开启画布自适应。开启后图自动适配画布大小 |
| fitCenter | `boolean` | false | 开启后，图将会被平移，图的中心将对齐到画布中心，但不缩放。优先级低于 fitView |
| fitViewPadding | `number[]` | [0,0] | fitView 为 true 时生效。图适应画布时，指定四周的留白 |
| minZoom | `number` | 0.2 | 最小缩放比例 |
| maxZoom | `number` | 10 | 最大缩放比例 |
| enabledStack | `boolean` | false | 是否启用 stack，即是否开启 redo & undo 功能 |
| maxStep | `number` | 10 | redo & undo 最大步数, 只有当 enabledStack 为 true 时才起作用 |

## 如何使用 Graphin 中的 graph 实例

### 01. 通过 Ref 获取

```jsx | pure
import React from 'react';
import Graphin, { Utils } from '@antv/graphin';

const data = Utils.mock(10)
.circle()
.graphin();

const Demo = () => {
const graphinRef = React.createRef();

React.useEffect(() => {
const {
graph, // g6 的Graph实例
apis, // Graphin 提供的API接口
} = graphinRef.current;
console.log('ref', graphinRef, graph, apis);
}, []);

return (
<div className="App">
<Graphin data={data} ref={graphinRef}></Graphin>
</div>
);
};
export default Demo;
```

### 02.通过 context 获取

```jsx | pure
import React from 'react';
import Graphin, { Utils, GraphinContext } from '@antv/graphin';

const data = Utils.mock(10)
.circle()
.graphin();

const CustomComponents = () => {
// 只要包裹在Graphin内的组件，都可以通过Context获得Graphin提供的graph实例和apis
const { graph, apis } = React.useContext(GraphinContext);
return null;
};

const Demo = () => {
return (
<div className="App">
<Graphin data={data} ref={graphinRef}>
<CustomComponents />
</Graphin>
</div>
);
};
export default Demo;
```

## G6 的实例 graph

> 参考 G6 graph 的实例方法：https://g6.antv.vision/zh/docs/api/graphFunc/get_set
常用的方法如下：

- [视口操作](https://g6.antv.vision/zh/docs/api/graphFunc/transform)
- [元素操作](https://g6.antv.vision/zh/docs/api/graphFunc/item)
- [查找元素](https://g6.antv.vision/zh/docs/api/graphFunc/find)
- [元素状态](https://g6.antv.vision/zh/docs/api/graphFunc/state)
- [事件绑定](https://g6.antv.vision/zh/docs/api/graphFunc/on_off)
- [布局](https://g6.antv.vision/zh/docs/api/graphFunc/layout) : 注意 ⚠️ ： Graphin 中的布局算法和 G6 一致，但是布局流程不是 G6 的布局流程，因此关于布局的接口操作暂不可用，未来会兼容。
- [图计算相关](https://g6.antv.vision/zh/docs/api/graphFunc/calculation)
- [增加水印](https://g6.antv.vision/zh/docs/api/graphFunc/watermarker)
- [导出图片](https://g6.antv.vision/zh/docs/api/graphFunc/download)

## Graphin 内建接口 apis

> 未来 Graphin 的版本迭代，将会将常用的接口 在 Graphin 上层聚合透出
<API src='./apis.ts'>
137 changes: 137 additions & 0 deletions packages/graphin/docs/render/element/demos/node-g6.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
import React, { useEffect } from 'react';
import Graphin, { Utils, Behaviors, GraphinContext, NodeStyle } from '@antv/graphin';
import IconLoader from '@antv/graphin-icons';
import { Row, Col, Card } from 'antd';

const icons = Graphin.registerFontFamily(IconLoader);

const { ZoomCanvas, Hoverable } = Behaviors;

const normalStyle: Partial<NodeStyle> = {
keyshape: {
size: 60,
fillOpacity: 0.2,
},
icon: {
type: 'font',
fontFamily: 'graphin',
value: icons.user,
size: 30,
},
label: {
value: '普通节点',
offset: [0, 12],
},
};

const clusterStyle = {
label: {
value: '聚合节点',
offset: [0, 12],
},
keyshape: {
size: 60,
stroke: 'red',
fill: 'red',
fillOpacity: 0.2,
},
icon: {
type: 'font',
fontFamily: 'graphin',
value: icons.user,
fill: 'red',
size: 30,
},
badges: [
{
position: 'RT',
type: 'text',
value: 8,
size: [20, 20],
color: '#fff',
fill: 'red',
},
],
};
const tagStyle = {
label: {
value: '标记节点',
offset: [0, 12],
},
keyshape: {
size: 60,
stroke: 'black',
fill: 'black',
fillOpacity: 0.2,
},
icon: {
type: 'font',
fontFamily: 'graphin',
value: icons.user,
fill: 'black',
size: 30,
},
badges: [
{
position: 'RT',
type: 'text',
value: 8,
size: [20, 20],
color: '#fff',
fill: 'black',
},
{
position: 'LB',
type: 'font',
fontFamily: 'graphin',
value: icons.pushpin,
size: [20, 20],
color: '#fff',
fill: 'black',
},
],
};

const data = {
nodes: [
{
id: 'node-0',
type: 'star',
size: [60, 30],
label: 'star',
labelCfg: {
/* label's position, options: center, top, bottom, left, right */
position: 'bottom',
/* label's offset to the keyShape, 4 by default */
offset: 20,
/* label's style */
style: {
fontSize: 20,
fill: '#ccc',
fontWeight: 500,
},
},
},
{
id: 'node-1',
style: clusterStyle,
},
],
edges: [],
};

console.log(data);

const layout = {
type: 'grid',
};

export default () => {
return (
<div>
<Graphin data={data} layout={layout}>
<ZoomCanvas disabled />
</Graphin>
</div>
);
};
Loading

0 comments on commit 4e6310d

Please sign in to comment.