Skip to content

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

feat: 连线校验

parent 1378e838
Hide whitespace changes
Inline Side-by-side
Showing with 138 additions and 37 deletions
src/views/Project/components/Flow/components/BatchNode/index.tsx
View file @ 4722964b
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-12 11:20:29
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-12 11:28:57
* @LastEditTime: 2022-07-12 20:25:34
* @FilePath: /bkunyun/src/views/Project/components/Flow/components/BatchNode.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......
src/views/Project/components/Flow/components/FlowNode/index.module.css
View file @ 4722964b
......@@ -4,6 +4,15 @@
padding: 6px 12px;
}
.flowNode:hover {
border: 1px solid #1370ff;
}
.selectedFlowBox {
color: #1370ff;
border: 1px solid #1370ff;
background-color: #ebf3ff;
}
.successDot {
display: inline-block;
line-height: 22px;
......
src/views/Project/components/Flow/components/FlowNode/index.tsx
View file @ 4722964b
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-12 11:29:46
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-12 11:32:20
* @LastEditTime: 2022-07-12 16:29:39
* @FilePath: /bkunyun/src/views/Project/components/Flow/components/FlowNode/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -34,12 +34,15 @@ const FlowNode = (props: any) => {
const { data } = props;
const {
dotStatus,
selectedStatus,
info: { title, isCheck, executionStatus },
} = data;
console.log(selectedStatus, "selectedStatus");
return (
<div
className={classNames({
[styles.flowNode]: true,
[styles.selectedFlowBox]: selectedStatus,
})}
>
{dotStatus?.isInput ? (
......
src/views/Project/components/Flow/index.tsx
View file @ 4722964b
......@@ -8,12 +8,15 @@ import ReactFlow, {
Connection,
} from "react-flow-renderer";
import { useCallback, useEffect, useMemo, useState } from "react";
import _ from "lodash";
import { uuid } from "@/utils/util";
import { IEdge, IParameter, ITask } from "../../ProjectSubmitWork/interface";
import { ILine } from "./interface";
import BatchNode from "./components/BatchNode";
import FlowNode from "./components/FlowNode";
import { getCustomTemplateParameterCheckResult } from "@/views/WorkFlowEdit/util";
import { useMessage } from "@/components/MySnackbar";
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
......@@ -53,8 +56,11 @@ const Flow = (props: IProps) => {
const nodeTypes = useMemo(() => {
return { batchNode: BatchNode, flowNode: FlowNode };
}, []);
/** 内部维护的选择的节点Id */
const [inSideNodeId, setInSideNodeId] = useState<string>("");
/** 内部维护的选择的batch节点Id */
const [inSideBatchNodeId, setInSideBatchNodeId] = useState<string>("");
/** 内部维护的选择的flow节点Id */
const [inSideFlowNodeId, setInSideFlowNodeId] = useState<string>("");
const Message = useMessage();
/** 删除批节点 */
const deleteSelectBatchNode = useCallback(
......@@ -63,12 +69,15 @@ const Flow = (props: IProps) => {
const val =
tasks?.length &&
tasks.filter((item) => {
return item.id !== inSideNodeId && item.parentNode !== inSideNodeId;
return (
item.id !== inSideBatchNodeId &&
item.parentNode !== inSideBatchNodeId
);
});
setTasks && setTasks(val || []);
}
},
[inSideNodeId, setTasks, tasks]
[inSideBatchNodeId, setTasks, tasks]
);
/** 监听鼠标按下事件 */
......@@ -138,7 +147,7 @@ const Flow = (props: IProps) => {
width = val > 176 ? val : width;
}
if (positionYArr?.length) {
const val = positionYArr[positionYArr.length - 1];
const val = positionYArr[positionYArr.length - 1] + 6;
height = val > 22 ? val : height;
}
return {
......@@ -167,9 +176,11 @@ const Flow = (props: IProps) => {
/** 选中状态 */
selectedStatus: selectedBatchNodeId
? selectedBatchNodeId === item.id
: inSideNodeId === item.id,
: inSideBatchNodeId === item.id,
/** tasks 数据 */
tasks: tasks,
}
: {}),
: { selectedStatus: inSideFlowNodeId === item.id }),
/** 输入输出圆点状态 */
dotStatus: nodesInputAndOutputStatus(item.id),
......@@ -200,7 +211,8 @@ const Flow = (props: IProps) => {
tasks,
isFlowNode,
selectedBatchNodeId,
inSideNodeId,
inSideBatchNodeId,
inSideFlowNodeId,
nodesInputAndOutputStatus,
getBatchStyle,
]);
......@@ -219,10 +231,10 @@ const Flow = (props: IProps) => {
val.push(newLine);
}, []);
});
const a = val.map((item: ILine) => {
return val.map((item: ILine) => {
const newSelectId = selectedBatchNodeId
? selectedBatchNodeId
: inSideNodeId;
: inSideBatchNodeId;
return {
...item,
// type: "smoothstep",
......@@ -234,27 +246,29 @@ const Flow = (props: IProps) => {
label: item.label ? `(${item.label})` : "",
};
});
return a;
}, [inSideNodeId, selectedBatchNodeId, tasks]);
}, [inSideBatchNodeId, selectedBatchNodeId, tasks]);
/** 设置nodeId方法 */
const setNodeIdFun = useCallback(
(id: string) => {
setSelectedBatchNodeId
? setSelectedBatchNodeId(id)
: setInSideBatchNodeId(id);
onBatchClick && onBatchClick(id);
document.getElementById(`point${id}`)?.scrollIntoView(true);
},
[onBatchClick, setSelectedBatchNodeId]
);
/** flowNode点击事件 */
const onNodeClick = (e: any, node: Node) => {
tasks?.forEach((item) => {
if (item.id === node.id) {
if (item.parentNode) {
setSelectedBatchNodeId
? setSelectedBatchNodeId(item.parentNode)
: setInSideNodeId(item.parentNode);
onBatchClick && onBatchClick(item.parentNode);
document
.getElementById(`point${item.parentNode}`)
?.scrollIntoView(true);
setInSideFlowNodeId(node.id);
setNodeIdFun(item.parentNode);
} else {
setSelectedBatchNodeId
? setSelectedBatchNodeId(node.id)
: setInSideNodeId(node.id);
onBatchClick && onBatchClick(node.id || "");
document.getElementById(`point${node.id}`)?.scrollIntoView(true);
setNodeIdFun(node.id);
}
}
});
......@@ -262,7 +276,10 @@ const Flow = (props: IProps) => {
};
const handlePaneClick = () => {
setSelectedBatchNodeId ? setSelectedBatchNodeId("") : setInSideNodeId("");
setSelectedBatchNodeId
? setSelectedBatchNodeId("")
: setInSideBatchNodeId("");
setInSideFlowNodeId("");
onBatchClick && onBatchClick("");
};
......@@ -303,8 +320,10 @@ const Flow = (props: IProps) => {
const connectModifyParameters = useCallback(
(parameters: IParameter[], edgeItem: Connection) => {
return parameters.map((item) => {
const { error, helperText } =
getCustomTemplateParameterCheckResult(item);
if (item.name === edgeItem.targetHandle) {
return { ...item, isLine: true };
return { ...item, isLine: true, helperText, error };
} else {
return item;
}
......@@ -313,35 +332,105 @@ const Flow = (props: IProps) => {
[]
);
const onConnect = useCallback(
(val: Connection) => {
/** 原始数据删除线 */
const tasksDeleteLine = useCallback(
(connection: Connection) => {
const result =
(tasks?.length &&
tasks.map((item) => {
if (item.id === connection.source) {
const newEdges =
(item.edges?.length &&
item.edges?.filter(
(every) => every.sourceHandle !== connection.sourceHandle
)) ||
[];
return {
...item,
edges: newEdges,
};
} else {
return item;
}
})) ||
[];
return result;
},
[tasks]
);
/** 获取连接线的端点类型 */
const getClassType = useCallback(
(connection: Connection) => {
let inputClassType = "",
outClassType: string | undefined = undefined;
tasks?.length &&
tasks.forEach((item) => {
if ([connection.source, connection.target].includes(item.id)) {
item.parameters.forEach((every) => {
if (every.name === connection.targetHandle) {
inputClassType = every.classType;
}
if (every.name === connection.source) {
outClassType = every.classType;
}
});
}
});
return { inputClassType, outClassType };
},
[tasks]
);
/** 连接校验并修改值 */
const connectCheck = useCallback(
(connection: Connection) => {
const newVal =
(tasks?.length &&
tasks?.map((item) => {
if (item.id === val.source) {
if (item.id === connection.source) {
return {
...item,
edges: [
...item.edges,
{
...val,
...connection,
id: uuid(),
},
],
};
} else if (item.id === val.target) {
} else if (item.id === connection.target) {
return {
...item,
parameters: connectModifyParameters(item.parameters, val),
parameters: connectModifyParameters(
item.parameters,
connection
),
};
} else {
return item;
}
})) ||
[];
setTasks && setTasks(newVal as ITask[]);
return newVal;
},
[connectModifyParameters, tasks]
);
/** 已经连接线啦 */
const onConnect = useCallback(
(connection: Connection) => {
const { inputClassType, outClassType } = getClassType(connection);
let result: ITask[] = [];
if (inputClassType === outClassType) {
result = connectCheck(connection) as ITask[];
} else {
Message.error("端口数据类型不一致，无法连接！");
result = tasksDeleteLine(connection);
}
setTasks && setTasks(result);
},
[connectModifyParameters, setTasks, tasks]
[Message, connectCheck, getClassType, setTasks, tasksDeleteLine]
);
return (
......
src/views/Project/components/Flow/interface.ts
View file @ 4722964b
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-23 11:00:29
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-12 00:26:48
* @LastEditTime: 2022-07-12 20:25:50
* @FilePath: /bkunyun/src/views/Project/components/Flow/interface.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......
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