generated from arvinxx/npm-template
-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* 📝 feat: proflow controller doc * 📝 feat: background doc * 📝 feat: default proflow background * 📝 feat: flow panel component and docs * 📝 feat: rename proflow to flowview * ✨ feat: 新增default节点样式 * 📝 feat: flowview docs * 📝 feat: lineage node docs * 📝 feat: lineage group node docs * 📝 feat: quick doc * 🐛 fix: ci --------- Co-authored-by: jiangchu <[email protected]>
- Loading branch information
Showing
43 changed files
with
1,136 additions
and
251 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,5 +6,3 @@ group: | |
title: 为什么选择 ReactFlow ? | ||
description: | ||
--- | ||
|
||
dsfsaf |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import { ProFlow } from '@/index'; | ||
import { createStyles } from 'antd-style'; | ||
import { memo } from 'react'; | ||
import Background, { BackgroundVariant } from '..'; | ||
|
||
const useStyles = createStyles(({ css }) => ({ | ||
container: css` | ||
width: 100%; | ||
height: 600px; | ||
`, | ||
})); | ||
|
||
const BackgroundDemo = memo(() => { | ||
const { styles } = useStyles(); | ||
|
||
return ( | ||
<div className={styles.container}> | ||
<ProFlow nodes={[]} edges={[]} miniMap={false} background={false}> | ||
<Background id="1" gap={10} color="yellow" variant={BackgroundVariant.Lines} /> | ||
<Background id="2" gap={100} offset={1} color="red" variant={BackgroundVariant.Lines} /> | ||
</ProFlow> | ||
</div> | ||
); | ||
}); | ||
|
||
export default BackgroundDemo; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import { ProFlow } from '@/index'; | ||
import { createStyles } from 'antd-style'; | ||
import { memo, useState } from 'react'; | ||
import { Panel } from 'reactflow'; | ||
import Background, { BackgroundVariant } from '..'; | ||
|
||
const useStyles = createStyles(({ css }) => ({ | ||
container: css` | ||
width: 100%; | ||
height: 600px; | ||
`, | ||
})); | ||
|
||
const BackgroundDemo = memo(() => { | ||
const [variant, setVariant] = useState<BackgroundVariant>(BackgroundVariant.Cross); | ||
const { styles } = useStyles(); | ||
|
||
return ( | ||
<div className={styles.container}> | ||
<ProFlow nodes={[]} edges={[]} miniMap={false} background={false}> | ||
<Panel position={'top-left'}> | ||
<div>variant:</div> | ||
<button type="button" onClick={() => setVariant(BackgroundVariant.Dots)}> | ||
dots | ||
</button> | ||
<button type="button" onClick={() => setVariant(BackgroundVariant.Lines)}> | ||
lines | ||
</button> | ||
<button type="button" onClick={() => setVariant(BackgroundVariant.Cross)}> | ||
cross | ||
</button> | ||
</Panel> | ||
<Background variant={variant} /> | ||
</ProFlow> | ||
</div> | ||
); | ||
}); | ||
|
||
export default BackgroundDemo; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
--- | ||
group: 辅助 | ||
title: Background 画布背景 | ||
description: 配合ProFLow组件使用,控制背景展示 | ||
--- | ||
|
||
## Default | ||
|
||
<code src="./demos/index.tsx" center></code> | ||
|
||
## Double Background | ||
|
||
<code src="./demos/double.tsx" center></code> | ||
|
||
## APIs | ||
|
||
| 属性名 | 类型 | 描述 | 默认值 | 必选 | | ||
| --------- | --------------------------- | ------------------------------------------------------------------------ | ------ | ---- | | ||
| id | `string` | 如果要显示多个背景,则需要 | - | - | | ||
| className | `string` | 自定义类名 | - | - | | ||
| variant | `BackgroundVariant` | 背景图案类型 | - | - | | ||
| gap | `number \|[number, number]` | 模式之间的差距。您可以传递一个包含两个数字的数组来指定 x 间隙和 y 间隙。 | - | - | | ||
| size | `number` | ”点“的半径或”十字“的尺寸 | - | - | | ||
| lineWidth | `number` | ”线“或”十字“的宽度 | - | - | | ||
| offset | `number` | 图案偏移 | - | - | | ||
| color | `string` | 图案颜色 | - | - | | ||
| style | `CSSProperties` | 样式属性 | - | - | | ||
|
||
### BackgroundVariant | ||
|
||
| 属性名 | 类型 | 描述 | 默认值 | 必选 | | ||
| ------ | -------- | ---- | ------ | ---- | | ||
| lines | `string` | 线 | - | - | | ||
| dots | `string` | 点 | - | - | | ||
| cross | `string` | 十字 | - | - | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import { CSSProperties } from 'react'; | ||
import { Background, BackgroundVariant } from 'reactflow'; | ||
|
||
interface BackgroundProps { | ||
variant?: BackgroundVariant; | ||
gap?: number | [number, number]; | ||
size?: number; | ||
lineWidth?: number; | ||
offset?: number; | ||
color?: string; | ||
style?: CSSProperties; | ||
className?: string; | ||
id?: string; | ||
} | ||
|
||
export default (props: BackgroundProps) => { | ||
const { gap = 10, color = '#bac3d4' } = props; | ||
|
||
return <Background {...props} gap={gap} color={color} />; | ||
}; | ||
|
||
export { BackgroundVariant }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,6 @@ | ||
--- | ||
title: ControlInput 可控输入框 | ||
group: 输入控件 | ||
group: 控件 | ||
description: 针对编辑场景优化的输入框控件 | ||
--- | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import { ProFlow } from '@/index'; | ||
import { createStyles } from 'antd-style'; | ||
import { memo } from 'react'; | ||
import FlowPanel from '..'; | ||
|
||
const useStyles = createStyles(({ css }) => ({ | ||
container: css` | ||
width: 100%; | ||
height: 600px; | ||
`, | ||
})); | ||
|
||
const FlowControllerDemo = memo(() => { | ||
const { styles } = useStyles(); | ||
return ( | ||
<div className={styles.container}> | ||
<ProFlow nodes={[]} edges={[]} miniMap={false}> | ||
<FlowPanel position="top-left">top-left</FlowPanel> | ||
<FlowPanel position="top-center">top-center</FlowPanel> | ||
<FlowPanel position="top-right">top-right</FlowPanel> | ||
<FlowPanel position="bottom-left">bottom-left</FlowPanel> | ||
<FlowPanel position="bottom-center">bottom-center</FlowPanel> | ||
<FlowPanel position="bottom-right">bottom-right</FlowPanel> | ||
</ProFlow> | ||
</div> | ||
); | ||
}); | ||
|
||
export default FlowControllerDemo; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
--- | ||
group: 辅助 | ||
title: FlowPanel 画布面板 | ||
description: 配合ProFLow组件使用,提供一个展示在画布上的面板 | ||
--- | ||
|
||
## Default | ||
|
||
<code src="./demos/index.tsx" center></code> | ||
|
||
## APIs | ||
|
||
| 属性名 | 类型 | 描述 | 默认值 | 必选 | | ||
| --------- | ----------------- | -------------------- | ------ | ---- | | ||
| className | `string` | 自定义类名 | - | - | | ||
| visible | `boolean` | 是否展示 | - | - | | ||
| position | `MiniMapPosition` | 控制器在画布中的坐标 | - | - | | ||
|
||
### MiniMapPosition | ||
|
||
| 属性名 | 类型 | 描述 | 默认值 | 必选 | | ||
| ------ | -------- | ------------------------------ | ------ | ---- | | ||
| x | `number` | x 坐标,正数向左偏移,负数反之 | 0 | - | | ||
| y | `number` | y 坐标,正数向上偏移,负数反之 | 0 | - | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import { Panel, PanelPosition } from 'reactflow'; | ||
|
||
interface PanelProps { | ||
position?: PanelPosition; | ||
children: React.ReactNode; | ||
className?: string; | ||
style?: React.CSSProperties; | ||
} | ||
|
||
export default (props: PanelProps) => { | ||
const { position = 'top-left', children } = props; | ||
|
||
return <Panel position={position}>{children}</Panel>; | ||
}; | ||
|
||
export { PanelPosition }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import { DefaultNodeData } from '@/constants'; | ||
import { FC } from 'react'; | ||
import { useStyles } from '../styles'; | ||
|
||
const DefaultNode: FC<DefaultNodeData> = (props) => { | ||
const { styles, cx } = useStyles(); | ||
const { className, children } = props; | ||
|
||
return <div className={cx(styles.nodeWrap, className)}>{children}</div>; | ||
}; | ||
|
||
export default DefaultNode; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.