Skip to content

B
bkunyun
Commit 2e9b040a authored by 吴永生#A02208's avatar 吴永生#A02208
Browse files
Options

chore: flow组件开发

parent f300b769
Hide whitespace changes
Inline Side-by-side
Showing with 534 additions and 45 deletions
package-lock.json
View file @ 2e9b040a
...@@ -1437,17 +1437,48 @@ ...@@ -1437,17 +1437,48 @@
"integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==" "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
}, },
"@emotion/react": { "@emotion/react": {
"version": "11.9.0", "version": "11.9.3",
"resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.9.0.tgz", "resolved": "https://registry.npmmirror.com/@emotion/react/-/react-11.9.3.tgz",
"integrity": "sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==", "integrity": "sha512-g9Q1GcTOlzOEjqwuLF/Zd9LC+4FljjPjDfxSM7KmEakm+hsHXk+bYZ2q+/hTJzr0OUNkujo72pXLQvXj6H+GJQ==",
"requires": { "requires": {
"@babel/runtime": "^7.13.10", "@babel/runtime": "^7.13.10",
"@emotion/babel-plugin": "^11.7.1", "@emotion/babel-plugin": "^11.7.1",
"@emotion/cache": "^11.7.1", "@emotion/cache": "^11.9.3",
"@emotion/serialize": "^1.0.3", "@emotion/serialize": "^1.0.4",
"@emotion/utils": "^1.1.0", "@emotion/utils": "^1.1.0",
"@emotion/weak-memoize": "^0.2.5", "@emotion/weak-memoize": "^0.2.5",
"hoist-non-react-statics": "^3.3.1" "hoist-non-react-statics": "^3.3.1"
},
"dependencies": {
"@emotion/cache": {
"version": "11.9.3",
"resolved": "https://registry.npmmirror.com/@emotion/cache/-/cache-11.9.3.tgz",
"integrity": "sha512-0dgkI/JKlCXa+lEXviaMtGBL0ynpx4osh7rjOXE71q9bIF8G+XhJgvi+wDu0B0IdCVx37BffiwXlN9I3UuzFvg==",
"requires": {
"@emotion/memoize": "^0.7.4",
"@emotion/sheet": "^1.1.1",
"@emotion/utils": "^1.0.0",
"@emotion/weak-memoize": "^0.2.5",
"stylis": "4.0.13"
}
},
"@emotion/serialize": {
"version": "1.0.4",
"resolved": "https://registry.npmmirror.com/@emotion/serialize/-/serialize-1.0.4.tgz",
"integrity": "sha512-1JHamSpH8PIfFwAMryO2bNka+y8+KA5yga5Ocf2d7ZEiJjb7xlLW7aknBGZqJLajuLOvJ+72vN+IBSwPlXD1Pg==",
"requires": {
"@emotion/hash": "^0.8.0",
"@emotion/memoize": "^0.7.4",
"@emotion/unitless": "^0.7.5",
"@emotion/utils": "^1.0.0",
"csstype": "^3.0.2"
}
},
"@emotion/sheet": {
"version": "1.1.1",
"resolved": "https://registry.npmmirror.com/@emotion/sheet/-/sheet-1.1.1.tgz",
"integrity": "sha512-J3YPccVRMiTZxYAY0IOq3kd+hUP8idY8Kz6B/Cyo+JuXq52Ek+zbPbSQUrVQp95aJ+lsAW7DPL1P2Z+U1jGkKA=="
}
} }
}, },
"@emotion/serialize": { "@emotion/serialize": {
...@@ -4126,6 +4157,11 @@ ...@@ -4126,6 +4157,11 @@
"resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz", "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
"integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==" "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
}, },
"classcat": {
"version": "5.0.3",
"resolved": "https://registry.npmmirror.com/classcat/-/classcat-5.0.3.tgz",
"integrity": "sha512-6dK2ke4VEJZOFx2ZfdDAl5OhEL8lvkl6EHF92IfRePfHxQTqir5NlcNVUv+2idjDqCX2NDc8m8YSAI5NI975ZQ=="
},
"classnames": { "classnames": {
"version": "2.3.1", "version": "2.3.1",
"resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.3.1.tgz", "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.3.1.tgz",
...@@ -4679,6 +4715,72 @@ ...@@ -4679,6 +4715,72 @@
"resolved": "https://registry.npmmirror.com/custom-error-instance/-/custom-error-instance-2.1.1.tgz", "resolved": "https://registry.npmmirror.com/custom-error-instance/-/custom-error-instance-2.1.1.tgz",
"integrity": "sha512-p6JFxJc3M4OTD2li2qaHkDCw9SfMw82Ldr6OC9Je1aXiGfhx2W8p3GaoeaGrPJTUN9NirTM/KTxHWMUdR1rsUg==" "integrity": "sha512-p6JFxJc3M4OTD2li2qaHkDCw9SfMw82Ldr6OC9Je1aXiGfhx2W8p3GaoeaGrPJTUN9NirTM/KTxHWMUdR1rsUg=="
}, },
"d3-color": {
"version": "3.1.0",
"resolved": "https://registry.npmmirror.com/d3-color/-/d3-color-3.1.0.tgz",
"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
},
"d3-dispatch": {
"version": "3.0.1",
"resolved": "https://registry.npmmirror.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
"integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="
},
"d3-drag": {
"version": "3.0.0",
"resolved": "https://registry.npmmirror.com/d3-drag/-/d3-drag-3.0.0.tgz",
"integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
"requires": {
"d3-dispatch": "1 - 3",
"d3-selection": "3"
}
},
"d3-ease": {
"version": "3.0.1",
"resolved": "https://registry.npmmirror.com/d3-ease/-/d3-ease-3.0.1.tgz",
"integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="
},
"d3-interpolate": {
"version": "3.0.1",
"resolved": "https://registry.npmmirror.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
"requires": {
"d3-color": "1 - 3"
}
},
"d3-selection": {
"version": "3.0.0",
"resolved": "https://registry.npmmirror.com/d3-selection/-/d3-selection-3.0.0.tgz",
"integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
},
"d3-timer": {
"version": "3.0.1",
"resolved": "https://registry.npmmirror.com/d3-timer/-/d3-timer-3.0.1.tgz",
"integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="
},
"d3-transition": {
"version": "3.0.1",
"resolved": "https://registry.npmmirror.com/d3-transition/-/d3-transition-3.0.1.tgz",
"integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
"requires": {
"d3-color": "1 - 3",
"d3-dispatch": "1 - 3",
"d3-ease": "1 - 3",
"d3-interpolate": "1 - 3",
"d3-timer": "1 - 3"
}
},
"d3-zoom": {
"version": "3.0.0",
"resolved": "https://registry.npmmirror.com/d3-zoom/-/d3-zoom-3.0.0.tgz",
"integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
"requires": {
"d3-dispatch": "1 - 3",
"d3-drag": "2 - 3",
"d3-interpolate": "1 - 3",
"d3-selection": "2 - 3",
"d3-transition": "2 - 3"
}
},
"damerau-levenshtein": { "damerau-levenshtein": {
"version": "1.0.8", "version": "1.0.8",
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
...@@ -10242,6 +10344,29 @@ ...@@ -10242,6 +10344,29 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
}, },
"react-flow-renderer": {
"version": "10.3.7",
"resolved": "https://registry.npmmirror.com/react-flow-renderer/-/react-flow-renderer-10.3.7.tgz",
"integrity": "sha512-0WGyozT4SzMpim8MQRFBR8hqm11FGApXm+UD05BoAejhcUgohvmckBTRIQKxzGC2WQLR/6oXRzwzRYGQdrb4rw==",
"requires": {
"@babel/runtime": "^7.18.0",
"classcat": "^5.0.3",
"d3-drag": "^3.0.0",
"d3-selection": "^3.0.0",
"d3-zoom": "^3.0.0",
"zustand": "^3.7.2"
},
"dependencies": {
"@babel/runtime": {
"version": "7.18.3",
"resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.18.3.tgz",
"integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==",
"requires": {
"regenerator-runtime": "^0.13.4"
}
}
}
},
"react-is": { "react-is": {
"version": "17.0.2", "version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
...@@ -11478,6 +11603,16 @@ ...@@ -11478,6 +11603,16 @@
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
}, },
"tss-react": {
"version": "3.7.0",
"resolved": "https://registry.npmmirror.com/tss-react/-/tss-react-3.7.0.tgz",
"integrity": "sha512-thvJWR+sr3ZGMcV/Ryo1F5RzjXd1gMTzYV/ckfUEBhu701uTYE3KyL9DNxv827uRFPFSLYG7bKefuc7kmYMB9Q==",
"requires": {
"@emotion/cache": "*",
"@emotion/serialize": "*",
"@emotion/utils": "*"
}
},
"tsutils": { "tsutils": {
"version": "3.21.0", "version": "3.21.0",
"resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz", "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
...@@ -11838,7 +11973,7 @@ ...@@ -11838,7 +11973,7 @@
}, },
"webpack-dev-server": { "webpack-dev-server": {
"version": "4.9.0", "version": "4.9.0",
"resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.9.0.tgz", "resolved": "https://registry.npmmirror.com/webpack-dev-server/-/webpack-dev-server-4.9.0.tgz",
"integrity": "sha512-+Nlb39iQSOSsFv0lWUuUTim3jDQO8nhK3E68f//J2r5rIcp4lULHXz2oZ0UVdEeWXEh5lSzYUlzarZhDAeAVQw==", "integrity": "sha512-+Nlb39iQSOSsFv0lWUuUTim3jDQO8nhK3E68f//J2r5rIcp4lULHXz2oZ0UVdEeWXEh5lSzYUlzarZhDAeAVQw==",
"requires": { "requires": {
"@types/bonjour": "^3.5.9", "@types/bonjour": "^3.5.9",
...@@ -12398,6 +12533,11 @@ ...@@ -12398,6 +12533,11 @@
"version": "0.1.0", "version": "0.1.0",
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
},
"zustand": {
"version": "3.7.2",
"resolved": "https://registry.npmmirror.com/zustand/-/zustand-3.7.2.tgz",
"integrity": "sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA=="
} }
} }
} }
package.json
View file @ 2e9b040a
...@@ -67,6 +67,7 @@ ...@@ -67,6 +67,7 @@
"react-dev-utils": "^12.0.1", "react-dev-utils": "^12.0.1",
"react-dom": "^18.1.0", "react-dom": "^18.1.0",
"react-dropzone": "^14.2.1", "react-dropzone": "^14.2.1",
"react-flow-renderer": "^10.3.7",
"react-refresh": "^0.11.0", "react-refresh": "^0.11.0",
"react-router-dom": "^6.3.0", "react-router-dom": "^6.3.0",
"resolve": "^1.20.0", "resolve": "^1.20.0",
......
src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx
View file @ 2e9b040a
...@@ -48,10 +48,10 @@ const ConfigForm = (props: ConfigFormProps) => { ...@@ -48,10 +48,10 @@ const ConfigForm = (props: ConfigFormProps) => {
const renderTasks: IRenderTasks = useMemo(() => { const renderTasks: IRenderTasks = useMemo(() => {
const result: IRenderTasks = []; const result: IRenderTasks = [];
templateConfigInfo.tasks.forEach((task, taskIndex) => { templateConfigInfo.tasks.forEach((task, taskIndex) => {
if (task.type === "batch") { if (task.type === "BATCH") {
result.push({ ...task, flows: [] }); result.push({ ...task, flows: [] });
} else { } else {
result[result.length - 1].flows.push({ ...task }); result[result.length - 1]?.flows.push({ ...task });
} }
}); });
return result; return result;
......
src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx
View file @ 2e9b040a
const WorkFlow = () => { /*
return <div>flow</div>; * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 15:25:25
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-22 10:40:30
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import Flow from "../../components/Flow";
import { ITemplateConfig } from "../interface";
interface IProps {
templateConfigInfo: ITemplateConfig;
}
const WorkFlow = (props: IProps) => {
const { templateConfigInfo } = props;
return <Flow data={templateConfigInfo} />;
}; };
export default WorkFlow; export default WorkFlow;
src/views/Project/ProjectSubmitWork/WorkFlow/initial-elements.tsx 0 → 100644
View file @ 2e9b040a
import React from "react";
// import { MarkerType } from "react-flow-renderer";
export const nodes = [
{
id: "1",
type: "input",
data: {
label: (
<>
Welcome to <strong>React Flow!</strong>
</>
),
},
position: { x: 250, y: 0 },
},
{
id: "2",
data: {
label: (
<>
This is a <strong>default node</strong>
</>
),
},
position: { x: 100, y: 100 },
},
{
id: "3",
data: {
label: (
<>
This one has a <strong>custom style</strong>
</>
),
},
position: { x: 400, y: 100 },
style: {
background: "#D6D5E6",
color: "#333",
border: "1px solid #222138",
width: 180,
},
},
{
id: "4",
position: { x: 250, y: 200 },
data: {
label: "Another default node",
},
},
{
id: "5",
data: {
label: "Node id: 5",
},
position: { x: 250, y: 325 },
},
{
id: "6",
type: "output",
data: {
label: (
<>
An <strong>output node</strong>
</>
),
},
position: { x: 100, y: 480 },
},
{
id: "7",
type: "output",
data: { label: "Another output node" },
position: { x: 400, y: 450 },
},
];
export const edges = [
{ id: "e1-2", source: "1", target: "2", label: "this is an edge label" },
{ id: "e1-3", source: "1", target: "3" },
{
id: "e3-4",
source: "3",
target: "4",
animated: true,
label: "animated edge",
},
{
id: "e4-5",
source: "4",
target: "5",
label: "edge with arrow head",
},
{
id: "e5-6",
source: "5",
target: "6",
type: "smoothstep",
label: "smooth step edge",
},
{
id: "e5-7",
source: "5",
target: "7",
type: "step",
style: { stroke: "#f6ab6c" },
label: "a step edge",
animated: true,
labelStyle: { fill: "#f6ab6c", fontWeight: 700 },
},
];
src/views/Project/ProjectSubmitWork/index.tsx
View file @ 2e9b040a
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-22 17:29:16
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { useState } from "react"; import { useState } from "react";
import styles from "./index.module.css"; import styles from "./index.module.css";
import { templateConfigJson } from "./mock"; import { templateConfigJson } from "./mock";
...@@ -11,7 +19,7 @@ import _ from "lodash"; ...@@ -11,7 +19,7 @@ import _ from "lodash";
const ProjectSubmitWork = () => { const ProjectSubmitWork = () => {
const [templateConfigInfo, setTemplateConfigInfo] = useState<ITemplateConfig>( const [templateConfigInfo, setTemplateConfigInfo] = useState<ITemplateConfig>(
templateConfigJson as ITemplateConfig templateConfigJson as any
); );
const setParameter = (value: any, taskId: string, parameterName: string) => { const setParameter = (value: any, taskId: string, parameterName: string) => {
...@@ -80,7 +88,7 @@ const ProjectSubmitWork = () => { ...@@ -80,7 +88,7 @@ const ProjectSubmitWork = () => {
/> />
</div> </div>
<div className={styles.swFlowBox}> <div className={styles.swFlowBox}>
<WorkFlow /> <WorkFlow templateConfigInfo={templateConfigInfo} />
</div> </div>
</div> </div>
</div> </div>
......
src/views/Project/ProjectSubmitWork/interface.ts
View file @ 2e9b040a
export interface ITemplateConfig { /*
title: string; * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
version: string; * @Date: 2022-06-21 20:03:56
updateTime: string; * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-22 19:53:09
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/interface.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
type IType = 'BATCH' | 'FLOW'
export interface IParameter {
hidden: boolean;
id?: string;
name: string;
required: boolean;
domType: IDomType;
dataType?: string;
value: string;
description: string; description: string;
language: string; language: string;
languageVersion: string; languageVersion: string;
tags: Array<string>; tags: Array<string>;
source: string; source: string;
productId: string; productId: string;
tasks: Array<ITaskFlow | ITaskBatch>; tasks: ITask[];
validators: Array<IValidator>;
choices: Array<IChoice>;
} }
export interface ITaskFlow { export interface ITask {
id: string; id: string;
title: string; title: string;
description: string; description: string;
...@@ -19,36 +34,24 @@ export interface ITaskFlow { ...@@ -19,36 +34,24 @@ export interface ITaskFlow {
x: number; x: number;
y: number; y: number;
}; };
type: "flow"; type: IType;
parentNode: string; parentNode?: string;
parameters: Array<IParameter>; parameters: Array<IParameter>;
edges: Array<IEdge>; edges: Array<IEdge>;
} }
export interface ITaskBatch {
id: string;
title: string;
description: string;
position: {
x: number;
y: number;
};
type: "batch";
parameters: Array<IParameter>;
edges: Array<IEdge>;
}
export interface IParameter { export interface ITemplateConfig {
hidden: boolean; title: string;
id?: string; version: string;
name: string; updateTime?: string;
required: boolean;
domType: IDomType;
dataType?: string;
value: string;
description: string; description: string;
validators: Array<IValidator>; language: string;
choices: Array<IChoice>; languageVersion: string;
tags: Array<string>;
source: string;
productId: string;
tasks: ITask[];
} }
export type IDomType = export type IDomType =
...@@ -79,7 +82,7 @@ export interface IEdge { ...@@ -79,7 +82,7 @@ export interface IEdge {
sourceHandle: string; sourceHandle: string;
target: string; target: string;
targetHandle: string; targetHandle: string;
lable: string; label: string;
} }
// 提交任务时的动态表单的数据结构 // 提交任务时的动态表单的数据结构
...@@ -92,8 +95,8 @@ export type IRenderTask = { ...@@ -92,8 +95,8 @@ export type IRenderTask = {
x: number; x: number;
y: number; y: number;
}; };
type: "batch"; type: IType;
parameters: Array<IParameter>; parameters: Array<IParameter>;
edges: Array<IEdge>; edges: Array<IEdge>;
flows: Array<ITaskFlow>; flows: ITask[];
}; };
src/views/Project/components/Flow/index.module.css 0 → 100644
View file @ 2e9b040a
.batchNode {
background-color: #fff;
border-radius: 4px;
padding: 16px;
border: 1px solid #e6e8eb;
border-left: 4px solid #e6e8eb;
}
.selectBatchNode {
border-left: 4px solid #1370ff;
}
.batchRotate {
transform: rotate(-90deg);
}
.flowNode {
background-color: #f5f6f7;
border-radius: 2px;
padding: 6px 12px;
}
src/views/Project/components/Flow/index.tsx 0 → 100644
View file @ 2e9b040a
import { ITemplateConfig, IEdge } from "../../ProjectSubmitWork/interface";
import ReactFlow, {
addEdge,
MiniMap,
Controls,
Background,
useNodesState,
useEdgesState,
Handle,
Position,
} from "react-flow-renderer";
import { useCallback, useMemo } from "react";
import styles from "./index.module.css";
import classNames from "classnames";
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-22 10:15:22
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-06-22 11:10:35
* @FilePath: /bkunyun/src/views/Project/components/Flow/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
interface IProps {
data: ITemplateConfig;
}
const BatchNode = (props: any) => {
const { data } = props;
return (
<div
className={classNames({
[styles.batchNode]: true,
[styles.selectBatchNode]: false,
})}
style={data.style}
>
<Handle type="target" position={Position.Top} />
<div
className={classNames({
[styles.batchRotate]: false,
})}
>
{data.label || ""}
</div>
<Handle type="source" position={Position.Bottom} id="a" />
</div>
);
};
const FlowNode = (props: any) => {
const { data } = props;
return (
<div
className={classNames({
[styles.flowNode]: true,
})}
>
<Handle type="target" position={Position.Top} />
<div>{data.label || ""}</div>
<Handle type="source" position={Position.Bottom} id="a" />
</div>
);
};
const Flow = (props: IProps) => {
const { data } = props;
const nodeTypes = useMemo(() => {
return { batchNode: BatchNode, flowNode: FlowNode };
}, []);
const getBatchStyle = useCallback(
(id: string) => {
const positionXArr: number[] = [];
const positionYArr: number[] = [];
data?.tasks?.length &&
data?.tasks?.forEach((item) => {
if (item.parentNode === id) {
positionXArr.push(item.position?.x || 0);
positionYArr.push(item.position?.y || 0);
}
});
positionXArr.sort((a, b) => {
return a - b;
});
positionYArr.sort((a, b) => {
return a - b;
});
let width = 176,
height = 44;
if (positionXArr?.length) {
const val = positionXArr[positionXArr.length - 1] - positionXArr[0];
width = val ? val : width;
}
if (positionXArr?.length) {
const val = positionYArr[positionYArr.length - 1] - positionYArr[0];
height = val ? val : height;
}
return {
width,
height,
};
},
[data?.tasks]
);
const initialNodes = useMemo(() => {
const val: any = [];
data?.tasks?.length &&
data?.tasks.forEach((item) => {
if (item.type === "BATCH") {
console.log(getBatchStyle(item.id));
}
val.push({
id: item.id,
type: item.type === "BATCH" ? "batchNode" : "flowNode",
data: { label: item.title || "", style: getBatchStyle(item.id) },
position: item.position,
// style: { width: 176, height: 500 },
...(item.type === "BATCH" ? { style: getBatchStyle(item.id) } : {}),
...(item.parentNode ? { parentNode: item.parentNode } : {}),
...(item.type === "BATCH" ? { extent: "parent" } : {}),
});
});
return val;
}, [data?.tasks, getBatchStyle]);
const initialEdges = useMemo(() => {
const val: any = [];
data?.tasks?.length &&
data?.tasks.forEach((item) => {
val.push(...item.edges);
});
val.map((item: IEdge) => {
return {
id: item.id,
label: item.label,
source: item.source,
target: item.target,
};
});
return val;
}, [data]);
console.log(initialEdges, initialNodes, 11111);
const [nodes, setNodes, onNodesChange] = useNodesState<any>(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = (params: any) => setEdges((eds) => addEdge(params, eds));
const onInit = (reactFlowInstance: any) =>
console.log("flow loaded:", reactFlowInstance);
return (
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
onInit={onInit}
fitView
attributionPosition="top-right"
nodeTypes={nodeTypes}
>
<MiniMap
// nodeStrokeColor={(n) => {
// if (n.style?.background) return n.style.background;
// if (n.type === "input") return "#0041d0";
// if (n.type === "output") return "#ff0072";
// if (n.type === "default") return "#1a192b";
// return "#eee";
// }}
// nodeColor={(n) => {
// if (n.style?.background) return n.style.background;
// return "#fff";
// }}
nodeBorderRadius={2}
/>
<Controls />
<Background color="#aaa" gap={16} />
</ReactFlow>
);
};
export default Flow;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment