Skip to content

Commit

Permalink
feat: update docs for api
Browse files Browse the repository at this point in the history
  • Loading branch information
@zxc0328
zxc0328 committed Nov 16, 2019
1 parent 04f5726 commit 6418e79
Show file tree
Hide file tree
Showing 14 changed files with 363 additions and 214 deletions.
21 changes: 21 additions & 0 deletions LICENSE
View file
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2019 Alipay.inc

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
2 changes: 1 addition & 1 deletion lerna.json
View file
Expand Up @@ -2,6 +2,6 @@
"packages": [
"packages/*"
],
"npmClient": "cnpm",
"npmClient": "yarn",
"version": "0.0.0"
}
2 changes: 1 addition & 1 deletion package.json
View file
@@ -1,7 +1,7 @@
{
"name": "graphin",
"scripts": {
"start": "lerna run start --parallel --ignore @antv/graphin-studio --ignore graphin-site --npm-client=npm",
"start": "lerna run start --parallel --ignore @antv/graphin-studio --ignore graphin-site",
"site": "cd ./packages/graphin-site && npm run start",
"studio": "cd ./packages/graphin-studio && npm run start",
"bootstrap": "lerna bootstrap",
Expand Down
2 changes: 1 addition & 1 deletion packages/graphin-components/package.json
View file
Expand Up @@ -10,7 +10,7 @@
"test": "jest"
},
"author": "",
"license": "ISC",
"license": "MIT",
"peerDependencies": {
"react": "^16.11.0",
"react-dom": "^16.11.0",
Expand Down
87 changes: 85 additions & 2 deletions packages/graphin-site/docs/api/components.zh.md
View file
@@ -1,7 +1,90 @@
---
title: 分析组件
order: 3
order: 5
---

## \<Toolbar /> 组件

两个组件的 Prop API
Props：

|   属性 | 类型 | 是否必选 | 说明 |
| ------------- | ---------------------------------------------------------- | -------- | --------------------------------------------------------- |
| bindType | 'node' \| 'edge' \| 'canvas' | 否 | 事件的监听对象类型，默认值为 node |
| graph | Graph | 否 | G6 实例 |
| options | [MenuItemType](#menuitemtype)[] | 否 | 菜单项配置 |
| render | (props: [RenderProps](#renderprops)) => React.ReactElement | 否 | 自定义的菜单渲染函数 |
| onContextmenu | (e: G6Event, graph: Graph) => boolean; | 否 | 右键菜单事件的 hook 函数。返回 false 可以阻止右键菜单出现 |

注意：options 和 render 必须提供一个。

### RenderProps

Toolbar render 函数的参数。

RenderProps extend 了 Toolbar 的 Props：

|   属性 | 类型 | 是否必选 | 说明 |
| ------- | ------------ | -------- | -------------------- |
| onClose | ( ) => void; | 否 | 隐藏右键菜单事件回调 |

### MenuItemType

MenuItem 的配置项

|   属性 | 类型 | 是否必选 | 说明 |
| ------------- | ----------------------------------------------------------- | -------- | ------------------- |
| key | string | **是** | React 组件 key |
| visible | boolean | 否 | G6 实例 |
| iconType | string | 否 | antd icon 类型 |
| title | string | 否 | 菜单项文本 |
| width | number | 否 | 菜单宽度 |
| height | number | 否 | 菜单高度 |
| onClick | (props: [ContainerProps](#containerprops)) => void; | 否 | 点击回调 |
| useCustomIcon | boolean | 否 | 是否使用自定义 icon |
| render | (props: [ContainerProps](#containerprops)) => ReactElement; | 否 | 自定义渲染函数 |

### ContainerProps

MenuItem 点击和渲染函数的参数

|   属性 | 类型 | 是否必选 | 说明 |
| ------- | -------------------------------- | -------- | -------------------- |
| graph | Graph | 否 | G6 实例 |
| menu | [MenuItemType](#menuitemtype)[ ] | 否 | 菜单项配置 |
| onClose | ( ) => void; | 否 | 隐藏右键菜单事件回调 |

## \<ContextMenu /> 组件

Props：

|   属性 | 类型 | 是否必选 | 说明 |
| --------- | ---------------------------------------------------------------- | -------- | ---------------------------------------------------- |
| graphDOM | HTMLElement | **是** | G6 挂载的 DOM 节点，Graphin 组件的子组件会被自动注入 |
| graph | Graph | 否 | G6 实例 |
| apis | [Apis](/zh/docs/api/graphin/#apis) | 否 | Graphin API |
| className | string | 否 | 类名 |
| graphVars | { width?: number; height: number; } | 否 | G6 图表信息 |
| direction | horizontal \| vertical | 否 | Toolbar 布局方向 |
| render | (props: [RenderProps](#renderprops)) => [MenuItem](#menuitem)[ ] | 否 | 自定义工具栏菜单渲染函数 |

### MenuItem

|   属性 | 类型 | 是否必选 | 说明 |
| ------------- | ---------------------- | -------- | ------------------------ |
| id | string | **是** | 唯一标识 |
| name | string | **是** | 菜单项文本 |
| icon | string | **是** | 菜单项 icon 类型（antd） |
| action | horizontal \| vertical | **是** | 点击事件回调 |
| disabled | boolean | 否 | 是否禁用菜单项 |
| style | CSSProperties | 否 | 自定义样式 |
| renderTooltip | () => ReactElement; | 否 | 自定义工具栏渲染函数 |

### RenderProps

|   属性 | 类型 | 是否必选 | 说明 |
| ---------- | ----------------------------------- | -------- | -------------------- |
| toolbarCfg | [MenuItem](#menuitem)[] | **是** | 默认的工具栏配置数组 |
| graph | Graph | 否 | G6 实例 |
| apis | [Apis](/zh/docs/api/graphin/#apis) | 否 | Graphin API | |
| graphVars | { width?: number; height: number; } | 否 | G6 图表信息 |
| direction | horizontal \| vertical | 否 | Toolbar 布局方向 |
45 changes: 44 additions & 1 deletion packages/graphin-site/docs/api/extend.zh.md
View file
Expand Up @@ -3,5 +3,48 @@ title: Extend
order: 3
---

`<Graphin/>` 组件 `props.extend` 配置。用于配置 Graphin 布局/NodeShape/Marker 的扩展。

extend 的配置文档
|   属性 | 类型 | 是否必选 | 说明 |
| --------- | -------------------------------------------------------------- | -------- | ---------- |
| layout | (graphin: [Graphin](), prevProps: [GraphinProps](/zh/docs/api/graphin#props)) => [ExendLayout](#extendlayout)[ ] | 否 | 自定义布局 |
| nodeShape | (node: [Node](/zh/docs/api/graphin#node)) => [ExtendNodeShape](#extendnodeshape)[ ] | 否 | 自定义节点 |
| marker | ( ) => [ExtendMarker](#extendmarker)[ ] | 否 | 自定义图标 |


### ExendLayout

自定义布局配置

|   属性 | 类型 | 是否必选 | 说明 |
| -------- | --------------------- | -------- | ------------- |
| name | string | **是** | 布局名称，唯一标识符 |
| desc | string | **是** | 布局展示名称 |
| icon | string | **是** | antd icon 类型 |
| layout | (data: [Data](/zh/docs/api/graphin#data), options: [LayoutOption]()) => { data: [Data](/zh/docs/api/graphin#data); forceSimulation?: [ForceSimulation]();} | **是** | 布局函数，用于计算布局。接受节点，返回带有位置的节点 |

### ExendNodeShape

自定义 NodeShape 配置

|   属性 | 类型 | 是否必选 | 说明 |
| -------- | --------------------- | -------- | ------------- |
| shape | string | **是** | 自定义的 NodeShape 名称，唯一标识符 |
| shapeComponents | [ShapeComponent](#shapecomponent)[ ] | **是** | 构成 Shape 的组件数组 |

#### ShapeComponent

|   属性 | 类型 | 是否必选 | 说明 |
| -------- | --------------------- | -------- | ------------- |
| shape | string | **是** | G6 内置的 NodeShape 名称 |
| attrs | [Attrs](https://www.yuque.com/antv/g6/ffzwfp) | **是** | G6 Shape 属性 |


### ExendMarker

自定义 Marker 配置

|   属性 | 类型 | 是否必选 | 说明 |
| -------- | --------------------- | -------- | ------------- |
| name | string | **是** | icon 类型 |
| path | string | **是** | svg 路径数据 |

0 comments on commit 6418e79

Please sign in to comment.