From 639caee48c286b4050f0ad46a66e239416b33694 Mon Sep 17 00:00:00 2001 From: jiangchu Date: Sun, 31 Mar 2024 22:14:51 +0800 Subject: [PATCH] :sparkles: feat: pipe line demo --- .../demos/pipeline/taskPipeline/data.tsx | 225 +++++++++++------- .../demos/pipeline/taskPipeline/index.tsx | 20 +- .../pipeline/taskPipeline/nodes/stageNode.tsx | 20 +- .../pipeline/taskPipeline/nodes/styled.ts | 41 +++- .../pipeline/taskPipeline/nodes/taskNode.tsx | 65 +++-- src/FlowView/helper.tsx | 4 + src/FlowView/index.tsx | 1 - src/FlowView/index.zh-CN.md | 4 +- 8 files changed, 256 insertions(+), 124 deletions(-) diff --git a/docs/caseShow/demos/pipeline/taskPipeline/data.tsx b/docs/caseShow/demos/pipeline/taskPipeline/data.tsx index 1938df9..18717cc 100644 --- a/docs/caseShow/demos/pipeline/taskPipeline/data.tsx +++ b/docs/caseShow/demos/pipeline/taskPipeline/data.tsx @@ -9,99 +9,164 @@ export const ActionBtn = () => { }; export const nodes = [ - // { - // id: 'A', - // type: 'group', - // data: { label: null }, - // position: { x: 0, y: 0 }, - // style: { - // width: 300, - // height: 500, - // }, - // }, { id: 'A', type: 'StageNode', - data: { label: null }, - position: { x: 0, y: 0 }, - zIndex: -1, - style: { - width: 300, - height: 500, + data: { + title: '配置校验', + extra:
+
, + children: [ + { + id: 'task1', + title: '提交申请', + status: 'success', + extra: , + isOpen: false, + children: , + }, + { + id: 'task2', + title: '提交申请123', + status: 'success', + extra: , + isOpen: false, + children: , + }, + ], }, + zIndex: -1, }, - // { - // id: 'B', - // type: 'input', - // data: { label: 'child node 1' }, - // position: { x: 10, y: 10 }, - // style: { - // width: 200, - // height: 100, - // }, - // parentNode: 'A', - // extent: 'parent', - // }, - // { - // id: 'C', - // type: 'default', - // style: { - // width: 200, - // height: 100, - // }, - // data: { label: 'child node 2' }, - // position: { x: 10, y: 90 }, - // parentNode: 'A', - // extent: 'parent', - // }, - // { - // id: 'A', - // type: 'group', - // data: { label: null }, - // position: { x: 0, y: 0 }, - // style: { - // width: 170, - // height: 140, - // }, - // }, { - id: 'a1', - type: 'taskNode', - parentNode: 'A', - extent: 'parent', - position: { x: 10, y: 10 }, - draggable: false, - // expandParent: true, - style: { - width: 240, - height: 40, - }, + id: 'B', + type: 'StageNode', data: { - title: '提交申请', - status: 'success', - extra: , - children: , + title: '多任务并行', + children: [ + { + id: 'b1', + title: '提交申请', + status: 'success', + isOpen: false, + }, + { + id: 'b2', + title: '提交申请', + status: 'success', + isOpen: true, + children: , + }, + { + id: 'b3', + title: '提交申请123', + status: 'success', + isOpen: false, + children: , + }, + ], }, + zIndex: -1, }, - { - id: 'a2', - type: 'taskNode', - parentNode: 'A', - extent: 'parent', - // expandParent: true, - position: { x: 10, y: 90 }, - style: { - width: 240, - height: 40, + id: 'C', + type: 'StageNode', + data: { + title: '阶段名称', + children: [ + { + id: 'c1', + title: '提交申请', + status: 'success', + extra: , + isOpen: false, + children: , + }, + { + id: 'c2', + title: '提交申请123', + status: 'success', + extra: , + isOpen: false, + children: , + }, + ], }, + zIndex: -1, + }, + { + id: 'D', + type: 'StageNode', data: { - title: '提交申请', - status: 'success', - extra: , - children: , + title: '阶段名称', + children: [ + { + id: 'd1', + title: '提交申请', + status: 'success', + extra: , + isOpen: false, + children: , + }, + ], }, + zIndex: -1, }, ]; -export const edges = [{ id: 'b-c', source: 'a1', target: 'a2' }]; +export const edges = [ + { + id: 'A-B', + source: 'A', + target: 'B', + sourceHandle: 'task1', + targetHandle: 'b2', + type: 'bezier', + }, + { + id: 'A-B2', + source: 'A', + target: 'B', + sourceHandle: 'task1', + type: 'bezier', + targetHandle: 'b3', + }, + { + id: 'B-C', + source: 'B', + target: 'C', + sourceHandle: 'b1', + type: 'bezier', + targetHandle: 'c1', + }, + { + id: 'B-C2', + source: 'B', + target: 'C', + sourceHandle: 'b2', + type: 'bezier', + targetHandle: 'c1', + }, + { + id: 'B-C3', + source: 'B', + target: 'C', + sourceHandle: 'b3', + type: 'bezier', + targetHandle: 'c2', + }, + { + id: 'C-D', + source: 'C', + target: 'D', + sourceHandle: 'c1', + type: 'bezier', + targetHandle: 'd1', + }, + { + id: 'C-D2', + source: 'C', + target: 'D', + sourceHandle: 'c2', + type: 'bezier', + targetHandle: 'd1', + }, +]; diff --git a/docs/caseShow/demos/pipeline/taskPipeline/index.tsx b/docs/caseShow/demos/pipeline/taskPipeline/index.tsx index 750bae3..80fb676 100644 --- a/docs/caseShow/demos/pipeline/taskPipeline/index.tsx +++ b/docs/caseShow/demos/pipeline/taskPipeline/index.tsx @@ -4,7 +4,6 @@ import { Background, FlowView, applyEdgeChanges, applyNodeChanges } from '@ant-design/pro-flow'; import { useCallback, useState } from 'react'; -// import ReactFlow, { applyEdgeChanges, applyNodeChanges, Background } from 'reactflow'; import { edges, nodes } from './data'; import StageNode from './nodes/stageNode'; import taskNode from './nodes/taskNode'; @@ -12,10 +11,6 @@ import useStyles from './styled'; const nodeTypes = { taskNode, StageNode }; -const rfStyle = { - backgroundColor: '#D0C0F7', -}; - function App() { const { styles } = useStyles(); const [_nodes, setNodes] = useState(nodes); @@ -40,21 +35,12 @@ function App() { nodes={_nodes} edges={_edges} background={false} - autoLayout={true} + layoutOptions={{ + ranksep: 50, + }} > - {/* - - */} ); } diff --git a/docs/caseShow/demos/pipeline/taskPipeline/nodes/stageNode.tsx b/docs/caseShow/demos/pipeline/taskPipeline/nodes/stageNode.tsx index 2737675..781e186 100644 --- a/docs/caseShow/demos/pipeline/taskPipeline/nodes/stageNode.tsx +++ b/docs/caseShow/demos/pipeline/taskPipeline/nodes/stageNode.tsx @@ -1,13 +1,27 @@ import { FlowViewNode } from '@ant-design/pro-flow'; -import { FC, useState } from 'react'; +import { FC } from 'react'; import useStyles from './styled'; +import TaskNode from './taskNode'; const StageNode: FC = (node) => { - const [open, setOpen] = useState(false); + // const [open, setOpen] = useState(false); const { styles } = useStyles(); const { data } = node; + const taskNodes = data.children; - return
; + return ( +
+
+
{data.title}
+ {data.extra} +
+
+ {taskNodes.map((taskNode: any) => { + return ; + })} +
+
+ ); }; export default StageNode; diff --git a/docs/caseShow/demos/pipeline/taskPipeline/nodes/styled.ts b/docs/caseShow/demos/pipeline/taskPipeline/nodes/styled.ts index 9e4cb40..4ef49a3 100644 --- a/docs/caseShow/demos/pipeline/taskPipeline/nodes/styled.ts +++ b/docs/caseShow/demos/pipeline/taskPipeline/nodes/styled.ts @@ -2,13 +2,20 @@ import { createStyles } from 'antd-style'; const useStyles = createStyles(() => { return { + wrap: { + width: '240px', + backgroundColor: '#FAFAFA', + marginBottom: '10px', + borderRadius: '8px', + position: 'relative', + }, taskNode: { width: '240px', minHeight: '42px', backgroundColor: 'white', padding: '8px 12px', - boxSizing: 'border-box', borderRadius: '8px', + boxSizing: 'border-box', border: '1px solid #e8e8e8', display: 'flex', alignItems: 'center', @@ -23,6 +30,10 @@ const useStyles = createStyles(() => { alignItems: 'center', justifyContent: 'space-between', + '.extra': { + width: '60px', + }, + '.span': { width: '20px', display: 'block', @@ -32,18 +43,34 @@ const useStyles = createStyles(() => { }, stageNode: { - width: '300px', - minHeight: '500px', - backgroundColor: 'red', - }, - wrap: { - width: '240px', + width: '256px', + height: ' 100%', backgroundColor: '#FAFAFA', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + borderRadius: '8px', + + '.wrap': { + width: '100%', + display: 'flex', + flexWrap: 'nowrap', + justifyContent: 'space-between', + padding: '10px', + }, + + '.title': { + width: '100px', + marginLeft: '10px', + }, }, + taskContent: { margin: '0', padding: '8px 12px', listStyle: 'none', + border: '1px solid #f0f0f0', + borderTop: 'none', '> li': { display: 'flex', alignItems: 'center', diff --git a/docs/caseShow/demos/pipeline/taskPipeline/nodes/taskNode.tsx b/docs/caseShow/demos/pipeline/taskPipeline/nodes/taskNode.tsx index 488482a..476106d 100644 --- a/docs/caseShow/demos/pipeline/taskPipeline/nodes/taskNode.tsx +++ b/docs/caseShow/demos/pipeline/taskPipeline/nodes/taskNode.tsx @@ -1,30 +1,67 @@ import { green } from '@ant-design/colors'; import { CheckCircleFilled } from '@ant-design/icons'; -import { FlowViewNode, Handle, Position } from '@ant-design/pro-flow'; -import { FC, useState } from 'react'; +import { Handle, Position } from '@ant-design/pro-flow'; +import { useState } from 'react'; import useStyles from './styled'; -const taskNode: FC = (node) => { - const [open, setOpen] = useState(false); +export interface TaskNodeC { + id: string; + title: string; + status: string; + extra: React.JSX.Element; + isOpen: boolean; + children: React.JSX.Element; +} + +const TaskNode = (props: { data: TaskNodeC }) => { + const { data } = props; + const [open, setOpen] = useState(data.isOpen); const { styles } = useStyles(); - const { data } = node; return (
- -
+ +
{data.title}
-
-
{data.extra}
- | -
setOpen(!open)}>{open ? 'on' : 'off'}
-
+ {data.children && ( +
+ {data.extra &&
{data.extra}
} + {data.extra && |} +
setOpen(!open)}>{open ? 'on' : 'off'}
+
+ )}
{open && data.children} - +
); }; -export default taskNode; +export default TaskNode; diff --git a/src/FlowView/helper.tsx b/src/FlowView/helper.tsx index 8e161f6..fa1a917 100644 --- a/src/FlowView/helper.tsx +++ b/src/FlowView/helper.tsx @@ -79,6 +79,10 @@ export function setNodePosition( const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({})); g.setGraph({ + rankdir: 'LR', + align: 'UL', + nodesep: 100, + ranksep: 200, ...layoutOptions, }); diff --git a/src/FlowView/index.tsx b/src/FlowView/index.tsx index 2618e93..c0d16ab 100644 --- a/src/FlowView/index.tsx +++ b/src/FlowView/index.tsx @@ -70,7 +70,6 @@ const FlowView: React.FC> = (props) => { BasicNode: BasicNode, BasicNodeGroup: BasicNodeGroup, default: DefaultNode, - group: 'group', }; }, []); diff --git a/src/FlowView/index.zh-CN.md b/src/FlowView/index.zh-CN.md index d092ab7..02abb33 100644 --- a/src/FlowView/index.zh-CN.md +++ b/src/FlowView/index.zh-CN.md @@ -44,8 +44,8 @@ description: 基础画布容器 | ------- | ------------------------------ | -------- | ------ | ---- | | rankdir | `'TB' \| 'BT' \| 'LR' \| 'RL'` | 布局样式 | - | - | | align | `'UL' \| 'DL' \| 'UR' \| 'DR'` | 左右对齐 | - | - | -| nodesep | `number` | 列间距 | - | - | -| ranksep | `number` | 行间距 | - | - | +| nodesep | `number` | 行间距 | - | - | +| ranksep | `number` | 列间距 | - | - | ### FlowViewNode