From c0922eda287cb34fc2895b48388dd15daad7b05c Mon Sep 17 00:00:00 2001 From: baizn <576375879@qq.com> Date: Mon, 11 Jan 2021 18:14:40 +0800 Subject: [PATCH 1/8] fix: update type file path --- packages/graphin/src/typings/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/graphin/src/typings/index.d.ts b/packages/graphin/src/typings/index.d.ts index 59666677c..6ee99414a 100644 --- a/packages/graphin/src/typings/index.d.ts +++ b/packages/graphin/src/typings/index.d.ts @@ -1,4 +1,4 @@ -import { IG6GraphEvent } from '@antv/g6/es/types'; +import { IG6GraphEvent } from '@antv/g6'; import { GraphinProps, GraphinState, IUserNode, IUserEdge, IGraphData, ITreeData } from './type'; declare global { From ab6abe60a138bc34008154bb1e2d7f3db105798e Mon Sep 17 00:00:00 2001 From: baizn <576375879@qq.com> Date: Mon, 11 Jan 2021 18:18:49 +0800 Subject: [PATCH 2/8] fix: add edge style types support parallel & animation --- packages/graphin/src/typings/type.ts | 49 +++++++++++++++------------- 1 file changed, 27 insertions(+), 22 deletions(-) diff --git a/packages/graphin/src/typings/type.ts b/packages/graphin/src/typings/type.ts index 6be841c59..3a11243b6 100644 --- a/packages/graphin/src/typings/type.ts +++ b/packages/graphin/src/typings/type.ts @@ -141,31 +141,36 @@ export interface EdgeStyle { position: '' | 'T'; autoRote: boolean; }; - animation: {}; - /** - * 自环 - * - * @type {({ - * position: string, - * dist: number, - * })} - * @memberof Edge - */ - loopCfg: { - // 是否开启自环 - enable: boolean; - position: string; - dist: number; + // 边上的动画，当 animation 不为 null 时，边上增加动画 + animation?: { + /** + * dotted：表示边上虚线运动的动画效果 + * dot：表示边上一个圆点的运动效果 + * grow：边从无到有出现的效果 + */ + type: 'dotted' | 'dot' | 'grow'; + // 一次动画的时长 + duration: number; + // 动画函数，详情参考 https://github.com/d3/d3/blob/master/API.md#easings-d3-ease + easing: string; + // 动画执行延迟时间 + delay: number; + // 是否重复执行动画 + repeat: boolean; }; /** - * 多边 - * - * @type {[number, number][]} - * @memberof Edge + * 多边配置 */ - poly: { - distance: number; - }; + parallel: Partial<{ + // 多边之间的偏移量 + offsetDiff: number; + // 多条边时边的类型 + multiEdgeType: string; + // 单条边的类型 + singleEdgeType: string; + // 自环边的类型 + loopEdgeType: string; + }>; } export interface IUserEdge extends BaseEdge, Partial, UserProperties {} From 3f1285c928b22e84e1e1c84c978a9add50ab5b08 Mon Sep 17 00:00:00 2001 From: baizn <576375879@qq.com> Date: Tue, 12 Jan 2021 11:06:17 +0800 Subject: [PATCH 3/8] fix: update G6 & add node example --- .../docs/render/element/graphin-circle.tsx | 57 ++++++++++--------- packages/graphin/package.json | 2 +- 2 files changed, 32 insertions(+), 27 deletions(-) diff --git a/packages/graphin/docs/render/element/graphin-circle.tsx b/packages/graphin/docs/render/element/graphin-circle.tsx index dcd873dc7..99afcac8a 100644 --- a/packages/graphin/docs/render/element/graphin-circle.tsx +++ b/packages/graphin/docs/render/element/graphin-circle.tsx @@ -1,9 +1,9 @@ import React, { useEffect } from 'react'; -import Graphin, { Utils, Behaviors,GraphinContext } from '@antv/graphin'; -import IconLoader from '@antv/graphin-icons' +import Graphin, { Utils, Behaviors, GraphinContext } from '@antv/graphin'; +import IconLoader from '@antv/graphin-icons'; -const iconLoader = Graphin.registerFontFamily(IconLoader) -const iconValue = iconLoader.home +const iconLoader = Graphin.registerFontFamily(IconLoader); +const iconValue = iconLoader.home; const { ZoomCanvas } = Behaviors; const defaultIcon = { @@ -14,22 +14,22 @@ const defaultIcon = { size: 12, /** 图标填充颜色 / 文本填充色 / 图片此属性无效 */ fill: 'green', - fontFamily: 'graphin' -} -const EventCenter =()=>{ - const { graph } = React.useContext(GraphinContext) - useEffect(()=>{ - graph.on('node:mouseenter',(evt)=>{ - graph.setItemState(evt.item, 'hover', true) - }) + fontFamily: 'graphin', +}; +const EventCenter = () => { + const { graph } = React.useContext(GraphinContext); + useEffect(() => { + graph.on('node:mouseenter', evt => { + graph.setItemState(evt.item, 'hover', true); + }); + + graph.on('node:mouseleave', evt => { + graph.setItemState(evt.item, 'hover', false); + }); + }, []); - graph.on('node:mouseleave',(evt)=>{ - graph.setItemState(evt.item, 'hover', false) - }) - },[]) - - return null -} + return null; +}; const defaultBadge = [ { @@ -48,7 +48,7 @@ const defaultBadge = [ color: '#000', fontSize: 12, padding: 2, - offset: [0, 0] + offset: [0, 0], }, { /** 放置的位置，ef：LT（left top）左上角 */ @@ -66,7 +66,7 @@ const defaultBadge = [ color: '#000', fontSize: 12, padding: 0, - offset: [0, 0] + offset: [0, 0], }, { /** 放置的位置，ef：LT（left top）左上角 */ @@ -81,7 +81,7 @@ const defaultBadge = [ /** 徽标描边色 */ stroke: 'green', padding: 5, - offset: [0, 0] + offset: [0, 0], }, { /** 放置的位置，ef：LT（left top）左上角 */ @@ -97,9 +97,9 @@ const defaultBadge = [ /** 徽标描边色 */ stroke: 'green', padding: 5, - offset: [3, 3] - } -] + offset: [3, 3], + }, +]; const data = Utils.mock(10) .circle() @@ -108,11 +108,16 @@ const layout = { type: 'circular', }; +const defaultNode = { + style: { + fill: 'red', + }, +}; export default () => { return (
- + diff --git a/packages/graphin/package.json b/packages/graphin/package.json index a22fa5da8..2e5888562 100644 --- a/packages/graphin/package.json +++ b/packages/graphin/package.json @@ -55,7 +55,7 @@ "license": "MIT", "dependencies": { "@antv/g-canvas": "^0.5.1", - "@antv/g6": "^4.1.0", + "@antv/g6": "^4.1.1", "@antv/util": "^2.0.10", "deepmerge": "^4.0.0", "lodash": "^4.17.15", From 16d8dcad95b18cbd85ce4ee311301015e62c45f3 Mon Sep 17 00:00:00 2001 From: baizn <576375879@qq.com> Date: Tue, 12 Jan 2021 11:06:52 +0800 Subject: [PATCH 4/8] fix: update edge types file --- packages/graphin/src/typings/type.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/graphin/src/typings/type.ts b/packages/graphin/src/typings/type.ts index 3a11243b6..477b0a452 100644 --- a/packages/graphin/src/typings/type.ts +++ b/packages/graphin/src/typings/type.ts @@ -27,7 +27,7 @@ export interface RestNode { /** 节点的样式，默认为默认样式 */ style: Partial; /** 节点当前的状态 */ - status: NodeStatus; + status: ElementStatus; /** 布局的相关信息 */ layout: { /** 度数 */ @@ -51,8 +51,9 @@ export interface RestEdge { /** 边的类型 */ type?: string; /** 边的数据 */ - data: {}; style: Partial; + /** 边当前的状态 */ + status: ElementStatus; layout: { /** 边的弹簧长度，力导时使用 */ spring?: number; @@ -242,7 +243,7 @@ export interface NodeStyle { badges: NodeStyleBadge[]; } -export interface NodeStatus { +export interface ElementStatus { [key: string]: | boolean | Partial<{ From 45e5520512af27bb8ad7e0e3dbaad80b4eda5e85 Mon Sep 17 00:00:00 2001 From: baizn <576375879@qq.com> Date: Tue, 12 Jan 2021 15:57:04 +0800 Subject: [PATCH 5/8] fix: add graphin-line type --- packages/graphin/src/index.ts | 5 ++++- packages/graphin/src/shape/index.ts | 1 + packages/graphin/src/utils/mock.ts | 1 + 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/graphin/src/index.ts b/packages/graphin/src/index.ts index 41524c227..83253f86f 100644 --- a/packages/graphin/src/index.ts +++ b/packages/graphin/src/index.ts @@ -5,7 +5,7 @@ import Layout from './layout'; import Behaviors from './behaviors'; import registerGraphinForce from './layout/inner/registerGraphinForce'; import registerRenderLayout from './layout/inner/registerRenderLayout'; -import { registerGraphinCircle } from './shape'; +import { registerGraphinCircle, registerGraphinLine } from './shape'; /** 注册 Graphin force 布局 */ registerGraphinForce(); @@ -14,6 +14,9 @@ registerRenderLayout(); /** 注册 Graphin Circle Node */ registerGraphinCircle(); +/** 注册 Graphin line Edge */ +registerGraphinLine(); + /** export */ export default Graphin; export { Utils, Layout, GraphinContext, Behaviors }; diff --git a/packages/graphin/src/shape/index.ts b/packages/graphin/src/shape/index.ts index 762ed7d7b..481d67ad9 100644 --- a/packages/graphin/src/shape/index.ts +++ b/packages/graphin/src/shape/index.ts @@ -1 +1,2 @@ export { default as registerGraphinCircle } from './graphin-circle'; +export { default as registerGraphinLine } from './graphin-line'; diff --git a/packages/graphin/src/utils/mock.ts b/packages/graphin/src/utils/mock.ts index eba6d1cee..d4f45bcb4 100644 --- a/packages/graphin/src/utils/mock.ts +++ b/packages/graphin/src/utils/mock.ts @@ -230,6 +230,7 @@ export class Mock { target: edge.target, label: edge.label, data: edge, + type: 'graphin-line', }; }), combos: this.combosData, From b36bea060514877b5d7498b7770668cf2282b19f Mon Sep 17 00:00:00 2001 From: baizn <576375879@qq.com> Date: Tue, 12 Jan 2021 15:57:38 +0800 Subject: [PATCH 6/8] fix: update edge types file --- packages/graphin/src/typings/type.ts | 73 ++++++++++++++++------------ 1 file changed, 41 insertions(+), 32 deletions(-) diff --git a/packages/graphin/src/typings/type.ts b/packages/graphin/src/typings/type.ts index 477b0a452..687b65708 100644 --- a/packages/graphin/src/typings/type.ts +++ b/packages/graphin/src/typings/type.ts @@ -47,13 +47,38 @@ type BaseEdge = { target: string; }; +interface EdgeStatus { + [key: string]: { + stroke: string; + opacity: string; + shadowColor: string; + shadowBlur: number; + animation?: { + /** + * dotted：表示边上虚线运动的动画效果 + * dot：表示边上一个圆点的运动效果 + * grow：边从无到有出现的效果 + */ + type: 'dotted' | 'dot' | 'grow'; + // 一次动画的时长 + duration: number; + // 动画函数，详情参考 https://github.com/d3/d3/blob/master/API.md#easings-d3-ease + easing: string; + // 动画执行延迟时间 + delay: number; + // 是否重复执行动画 + repeat: boolean; + }; + }; +} + export interface RestEdge { /** 边的类型 */ type?: string; /** 边的数据 */ style: Partial; /** 边当前的状态 */ - status: ElementStatus; + status: EdgeStatus; layout: { /** 边的弹簧长度，力导时使用 */ spring?: number; @@ -128,37 +153,6 @@ export interface GraphinProps { */ linkCenter?: boolean; - // children: React.ReactChildren; -} - -export interface IUserNode extends BaseNode, Partial, UserProperties {} -export interface GraphinNode extends BaseNode, RestNode, UserProperties {} - -export interface EdgeStyle { - /** 边的类型 */ - shape: 'line' | ''; - label: { - value: string | number; - position: '' | 'T'; - autoRote: boolean; - }; - // 边上的动画，当 animation 不为 null 时，边上增加动画 - animation?: { - /** - * dotted：表示边上虚线运动的动画效果 - * dot：表示边上一个圆点的运动效果 - * grow：边从无到有出现的效果 - */ - type: 'dotted' | 'dot' | 'grow'; - // 一次动画的时长 - duration: number; - // 动画函数，详情参考 https://github.com/d3/d3/blob/master/API.md#easings-d3-ease - easing: string; - // 动画执行延迟时间 - delay: number; - // 是否重复执行动画 - repeat: boolean; - }; /** * 多边配置 */ @@ -172,6 +166,21 @@ export interface EdgeStyle { // 自环边的类型 loopEdgeType: string; }>; + + // children: React.ReactChildren; +} + +export interface IUserNode extends BaseNode, Partial, UserProperties {} +export interface GraphinNode extends BaseNode, RestNode, UserProperties {} + +export interface EdgeStyle { + /** 边的类型 */ + type: 'graphin-line' | 'line'; + label: { + value: string | number; + position: '' | 'T'; + autoRote: boolean; + }; } export interface IUserEdge extends BaseEdge, Partial, UserProperties {} From e95374acff4b39d0e0cfec7a383b2e0ec364d693 Mon Sep 17 00:00:00 2001 From: baizn <576375879@qq.com> Date: Tue, 12 Jan 2021 16:06:42 +0800 Subject: [PATCH 7/8] feat: add graphin-line edge --- .../docs/render/element/graphin-circle.tsx | 22 +++- packages/graphin/src/shape/graphin-line.ts | 123 ++++++++++++++++++ 2 files changed, 142 insertions(+), 3 deletions(-) create mode 100644 packages/graphin/src/shape/graphin-line.ts diff --git a/packages/graphin/docs/render/element/graphin-circle.tsx b/packages/graphin/docs/render/element/graphin-circle.tsx index 99afcac8a..2f5fcff27 100644 --- a/packages/graphin/docs/render/element/graphin-circle.tsx +++ b/packages/graphin/docs/render/element/graphin-circle.tsx @@ -26,6 +26,14 @@ const EventCenter = () => { graph.on('node:mouseleave', evt => { graph.setItemState(evt.item, 'hover', false); }); + + graph.on('edge:mouseenter', evt => { + graph.setItemState(evt.item, 'selected', true); + }); + + graph.on('edge:mouseleave', evt => { + graph.setItemState(evt.item, 'selected', false); + }); }, []); return null; @@ -108,16 +116,24 @@ const layout = { type: 'circular', }; -const defaultNode = { +const defaultEdge = { style: { - fill: 'red', + stroke: '#000', + }, + status: { + selected: { + stroke: 'red', + animation: { + repeat: true, + }, + }, }, }; export default () => { return (
- + diff --git a/packages/graphin/src/shape/graphin-line.ts b/packages/graphin/src/shape/graphin-line.ts new file mode 100644 index 000000000..40837ab3a --- /dev/null +++ b/packages/graphin/src/shape/graphin-line.ts @@ -0,0 +1,123 @@ +import G6, { IGroup, IShape, IEdge } from '@antv/g6'; +import { isString } from '@antv/util'; + +import { IUserEdge } from '../typings/type'; + +export default () => { + G6.registerEdge( + 'graphin-line', + { + options: { + style: { + stroke: 'rgb(239, 244, 255)', + opacity: 1, + labelCfg: { + fill: 'rgb(0, 0, 0)', + fontSize: 12, + }, + }, + status: { + selected: { + fill: 'rgb(239, 244, 255)', + }, + hover: { + fill: 'rgb(239, 244, 255)', + }, + }, + }, + + afterDraw(cfg: IUserEdge, group: IGroup, keyShape: IShape) { + const path = keyShape.attr('path'); + const lineWidth = keyShape.attr('lineWidth'); + const shape = group.addShape('path', { + attrs: { + path, + lineWidth: lineWidth * 10, + // opacity: 0.1, + stroke: 'rgb(239, 244, 255)', + }, + name: 'external-shape', + visible: false, + }); + shape.toBack(); + }, + + setState(name: string, value: string, item: IEdge) { + const keyShape = item.getKeyShape(); + const group = item.get('group'); + const model = item.getModel() as IUserEdge; + const children = group.get('children'); + if (!model.status || !model.status[name]) return; + + const shape = children.find((element: any) => element.get('name') === 'external-shape'); + if (value) { + // selected 状态显示边上的 shape + if (name === 'selected') { + shape.show(); + } + + // 是否有配置动画 + const { animation, ...otherAttr } = model.status[name]; + for (let key in otherAttr) { + const value = (otherAttr as any)[key]; + keyShape.attr(key, value); + } + + if (animation) { + const { delay = 0, duration = 3000, easing = 'easeLinear', repeat = true } = animation; + let index = 0; + keyShape.animate( + () => { + index++; + if (index > 9) { + index = 0; + } + + const conf = { + lineDash: [3, 3], + lineDashOffset: -index, + }; + + return conf; + }, + { + easing, + delay, + repeat, + duration, + }, + ); + } + } else { + shape.hide(); + keyShape.stopAnimate(); + keyShape.attr('lineDash', null); + + // 恢复到原来的样式 + const originStyle = item.getOriginStyle() as any; + for (let key in originStyle) { + const currentShape = children.find((element: any) => element.get('name') === key); + if (currentShape) { + for (let value in originStyle[key]) { + const currentValue = originStyle[key][value]; + if (isString(currentValue)) { + currentShape.attr(value, currentValue); + } + } + } + } + } + }, + afterUpdate(cfg: IUserEdge, item: IEdge) { + const keyShape = item.getKeyShape(); + const group = item.get('group'); + const shape = group.get('children').find((element: any) => element.get('name') === 'external-shape'); + if (shape) { + shape.attr('path', keyShape.attr('path')); + } + }, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + } as any, + 'line', + ); +}; From 5f9eabf1384de4954683e63c14c5bbdb83bd3bf4 Mon Sep 17 00:00:00 2001 From: pomelo-nwu Date: Tue, 12 Jan 2021 19:11:40 +0800 Subject: [PATCH 8/8] style(graphin):adjust demos --- .../docs/render/element/demos/edge.tsx | 59 +++++++++ .../render/element/demos/graphin-circle.tsx | 121 ------------------ .../{graphin-circle.tsx => demos/index.tsx} | 2 +- .../element/demos/{default.tsx => node.tsx} | 0 packages/graphin/docs/render/element/edge.md | 13 ++ packages/graphin/docs/render/element/index.md | 4 +- packages/graphin/docs/render/element/node.md | 13 ++ 7 files changed, 88 insertions(+), 124 deletions(-) create mode 100644 packages/graphin/docs/render/element/demos/edge.tsx delete mode 100644 packages/graphin/docs/render/element/demos/graphin-circle.tsx rename packages/graphin/docs/render/element/{graphin-circle.tsx => demos/index.tsx} (98%) rename packages/graphin/docs/render/element/demos/{default.tsx => node.tsx} (100%) create mode 100644 packages/graphin/docs/render/element/edge.md create mode 100644 packages/graphin/docs/render/element/node.md diff --git a/packages/graphin/docs/render/element/demos/edge.tsx b/packages/graphin/docs/render/element/demos/edge.tsx new file mode 100644 index 000000000..3a0ca2eaf --- /dev/null +++ b/packages/graphin/docs/render/element/demos/edge.tsx @@ -0,0 +1,59 @@ +import React, { useEffect } from 'react'; +import Graphin, { Utils, Behaviors, GraphinContext } from '@antv/graphin'; + +const { ZoomCanvas } = Behaviors; + +const EventCenter = () => { + const { graph } = React.useContext(GraphinContext); + useEffect(() => { + graph.on('node:mouseenter', evt => { + graph.setItemState(evt.item, 'hover', true); + }); + + graph.on('node:mouseleave', evt => { + graph.setItemState(evt.item, 'hover', false); + }); + + graph.on('edge:mouseenter', evt => { + graph.setItemState(evt.item, 'selected', true); + }); + + graph.on('edge:mouseleave', evt => { + graph.setItemState(evt.item, 'selected', false); + }); + }, []); + + return null; +}; + +const data = Utils.mock(10) + .circle() + .graphin(); +const layout = { + type: 'circular', +}; + +const defaultEdge = { + style: { + stroke: '#000', + }, + status: { + selected: { + stroke: 'red', + animation: { + repeat: true, + }, + }, + }, +}; + +export default () => { + return ( +
+ + + + +
+ ); +}; diff --git a/packages/graphin/docs/render/element/demos/graphin-circle.tsx b/packages/graphin/docs/render/element/demos/graphin-circle.tsx deleted file mode 100644 index cae93969e..000000000 --- a/packages/graphin/docs/render/element/demos/graphin-circle.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import React, { useEffect } from 'react'; -import Graphin, { Utils, Behaviors, GraphinContext } from '@antv/graphin'; -import IconLoader from '@antv/graphin-icons'; - -const iconLoader = Graphin.registerFontFamily(IconLoader); -const iconValue = iconLoader.home; -const { ZoomCanvas } = Behaviors; - -const defaultIcon = { - type: 'font', - /** 根据类型，填写对应的值 */ - value: iconValue, - /** 图标大小 */ - size: 12, - /** 图标填充颜色 / 文本填充色 / 图片此属性无效 */ - fill: 'green', - fontFamily: 'graphin', -}; -const EventCenter = () => { - const { graph } = React.useContext(GraphinContext); - useEffect(() => { - graph.on('node:mouseenter', evt => { - graph.setItemState(evt.item, 'hover', true); - }); - - graph.on('node:mouseleave', evt => { - graph.setItemState(evt.item, 'hover', false); - }); - }, []); - - return null; -}; - -const defaultBadge = [ - { - /** 放置的位置，ef：LT（left top）左上角 */ - position: 'RT', - /** 类型可以为字体图标，可以为网络图片，可以为纯文本 */ - type: 'font', - value: iconValue, - // type = image 时表示图片的宽度和高度 - size: [20, 10], - /** 徽标填充色 */ - fill: 'pink', - /** 徽标描边色 */ - stroke: 'green', - /** 徽标内文本的颜色 */ - color: '#000', - fontSize: 12, - padding: 2, - offset: [0, 0], - }, - { - /** 放置的位置，ef：LT（left top）左上角 */ - position: 'LB', - /** 类型可以为字体图标，可以为网络图片，可以为纯文本 */ - type: 'text', - value: '12', - // type = image 时表示图片的宽度和高度 - size: 20, - /** 徽标填充色 */ - fill: 'pink', - /** 徽标描边色 */ - stroke: 'green', - /** 徽标内文本的颜色 */ - color: '#000', - fontSize: 12, - padding: 0, - offset: [0, 0], - }, - { - /** 放置的位置，ef：LT（left top）左上角 */ - position: 'RB', - /** 类型可以为字体图标，可以为网络图片，可以为纯文本 */ - type: 'image', - value: 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg', - // type = image 时表示图片的宽度和高度 - size: 10, - /** 徽标填充色 */ - fill: 'pink', - /** 徽标描边色 */ - stroke: 'green', - padding: 5, - offset: [0, 0], - }, - { - /** 放置的位置，ef：LT（left top）左上角 */ - position: 'LT', - /** 类型可以为字体图标，可以为网络图片，可以为纯文本 */ - type: 'text', - value: '999+', - // type = image 时表示图片的宽度和高度 - size: [25, 15], - /** 徽标填充色 */ - fill: 'pink', - color: '#000', - /** 徽标描边色 */ - stroke: 'green', - padding: 5, - offset: [3, 3], - }, -]; - -const data = Utils.mock(10) - .circle() - .graphinMock(null, defaultIcon as any); - -const layout = { - type: 'circular', -}; - -export default () => { - return ( -
- - - - -
- ); -}; diff --git a/packages/graphin/docs/render/element/graphin-circle.tsx b/packages/graphin/docs/render/element/demos/index.tsx similarity index 98% rename from packages/graphin/docs/render/element/graphin-circle.tsx rename to packages/graphin/docs/render/element/demos/index.tsx index 2f5fcff27..a1a088c0c 100644 --- a/packages/graphin/docs/render/element/graphin-circle.tsx +++ b/packages/graphin/docs/render/element/demos/index.tsx @@ -134,7 +134,7 @@ export default () => { return (
- +
diff --git a/packages/graphin/docs/render/element/demos/default.tsx b/packages/graphin/docs/render/element/demos/node.tsx similarity index 100% rename from packages/graphin/docs/render/element/demos/default.tsx rename to packages/graphin/docs/render/element/demos/node.tsx diff --git a/packages/graphin/docs/render/element/edge.md b/packages/graphin/docs/render/element/edge.md new file mode 100644 index 000000000..06a9092b5 --- /dev/null +++ b/packages/graphin/docs/render/element/edge.md @@ -0,0 +1,13 @@ +--- +title: 内置边 +group: + path: /render +nav: + title: Graphin + path: /graphin + order: 1 +--- + +## 基本介绍 + + diff --git a/packages/graphin/docs/render/element/index.md b/packages/graphin/docs/render/element/index.md index 14bff9d40..42fa52056 100644 --- a/packages/graphin/docs/render/element/index.md +++ b/packages/graphin/docs/render/element/index.md @@ -18,8 +18,8 @@ nav: ### Graphin Circle - + ### Graphin Circle - + diff --git a/packages/graphin/docs/render/element/node.md b/packages/graphin/docs/render/element/node.md new file mode 100644 index 000000000..2ab356192 --- /dev/null +++ b/packages/graphin/docs/render/element/node.md @@ -0,0 +1,13 @@ +--- +title: 节点元素 +group: + path: /render +nav: + title: Graphin + path: /graphin + order: 1 +--- + +## 基本介绍 + +