Skip to content

B
bkunyun
Commit 31a3b1a3 authored by chenshouchao's avatar chenshouchao
Browse files
Options

Merge branch 'feat-20220705-customTemplate' of http://120.77.149.83/root/bkunyun… 

Merge branch 'feat-20220705-customTemplate' of http://120.77.149.83/root/bkunyun into feat-20220705-customTemplate
parents 09f2b20b 6326745b
Hide whitespace changes
Inline Side-by-side
Showing with 331 additions and 239 deletions
src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx
View file @ 31a3b1a3
......@@ -20,11 +20,11 @@ type ConfigFormProps = {
templateConfigInfo?: ITemplateConfig;
setParameter: any;
onRef?: React.Ref<any>;
setSelectedNodeId: (val: string) => void;
setSelectedBatchNodeId: (val: string) => void;
};
const ConfigForm = (props: ConfigFormProps) => {
const { templateConfigInfo, setParameter, setSelectedNodeId } = props;
const { templateConfigInfo, setParameter, setSelectedBatchNodeId } = props;
const [name, setName] = useState<string>(""); // 任务名称
const [nameHelp, setNameHelp] = useState({
......@@ -212,8 +212,8 @@ const ConfigForm = (props: ConfigFormProps) => {
<div className={styles.parameterContent}>
{parameter.domType.toLowerCase() === "file" && (
<MyInput
onFocus={() => setSelectedNodeId(batchId || "")}
onBlur={() => setSelectedNodeId("")}
onFocus={() => setSelectedBatchNodeId(batchId || "")}
onBlur={() => setSelectedBatchNodeId("")}
value={parameter.value || ""}
InputProps={{
endAdornment: (
......@@ -234,8 +234,8 @@ const ConfigForm = (props: ConfigFormProps) => {
)}
{parameter.domType.toLowerCase() === "path" && (
<MyInput
onFocus={() => setSelectedNodeId(batchId || "")}
onBlur={() => setSelectedNodeId("")}
onFocus={() => setSelectedBatchNodeId(batchId || "")}
onBlur={() => setSelectedBatchNodeId("")}
value={parameter.value || ""}
InputProps={{
endAdornment: (
......@@ -256,8 +256,8 @@ const ConfigForm = (props: ConfigFormProps) => {
)}
{parameter.domType.toLowerCase() === "dataset" && (
<MyInput
onFocus={() => setSelectedNodeId(taskId)}
onBlur={() => setSelectedNodeId("")}
onFocus={() => setSelectedBatchNodeId(taskId)}
onBlur={() => setSelectedBatchNodeId("")}
value={parameter.value || ""}
InputProps={{
endAdornment: (
......@@ -279,10 +279,10 @@ const ConfigForm = (props: ConfigFormProps) => {
{parameter.domType.toLowerCase() === "input" && (
<MyInput
onFocus={() => {
setSelectedNodeId(batchId || "");
setSelectedBatchNodeId(batchId || "");
console.log(batchId, "111");
}}
onBlur={() => setSelectedNodeId("")}
onBlur={() => setSelectedBatchNodeId("")}
value={parameter.value || ""}
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
......@@ -294,8 +294,8 @@ const ConfigForm = (props: ConfigFormProps) => {
)}
{parameter.domType.toLowerCase() === "select" && (
<MySelect
onFocus={() => setSelectedNodeId(batchId || "")}
onBlur={() => setSelectedNodeId("")}
onFocus={() => setSelectedBatchNodeId(batchId || "")}
onBlur={() => setSelectedBatchNodeId("")}
value={parameter.value}
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
......@@ -307,8 +307,8 @@ const ConfigForm = (props: ConfigFormProps) => {
)}
{parameter.domType.toLowerCase() === "multipleselect" && (
<MySelect
onFocus={() => setSelectedNodeId(batchId || "")}
onBlur={() => setSelectedNodeId("")}
onFocus={() => setSelectedBatchNodeId(batchId || "")}
onBlur={() => setSelectedBatchNodeId("")}
value={parameter.value}
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
......@@ -325,8 +325,8 @@ const ConfigForm = (props: ConfigFormProps) => {
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
}
onFocus={() => setSelectedNodeId(batchId || "")}
onBlur={() => setSelectedNodeId("")}
onFocus={() => setSelectedBatchNodeId(batchId || "")}
onBlur={() => setSelectedBatchNodeId("")}
options={optionsTransform(parameter.choices, "label")}
error={parameter.error || false}
helperText={parameter.helperText}
......@@ -347,8 +347,8 @@ const ConfigForm = (props: ConfigFormProps) => {
)
}
options={optionsTransform(parameter.choices, "label")}
onFocus={() => setSelectedNodeId(batchId || "")}
onBlur={() => setSelectedNodeId("")}
onFocus={() => setSelectedBatchNodeId(batchId || "")}
onBlur={() => setSelectedBatchNodeId("")}
error={parameter.error || false}
helperText={parameter.helperText}
></MyCheckBox>
......
src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx
View file @ 31a3b1a3
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 15:25:25
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-06 11:55:41
* @LastEditTime: 2022-07-12 14:09:20
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -10,13 +10,20 @@ import Flow from "../../components/Flow";
import { ITemplateConfig } from "../interface";
interface IProps {
templateConfigInfo?: ITemplateConfig;
setSelectedNodeId?: (val:string) => void;
selectedNodeId?: string;
templateConfigInfo?: ITemplateConfig;
setSelectedBatchNodeId?: (val: string) => void;
selectedBatchNodeId?: string;
}
const WorkFlow = (props: IProps) => {
const { templateConfigInfo,setSelectedNodeId, selectedNodeId } = props;
return <Flow tasks={templateConfigInfo?.tasks} setSelectedNodeId={setSelectedNodeId} selectedNodeId={selectedNodeId}/>;
const { templateConfigInfo, setSelectedBatchNodeId, selectedBatchNodeId } =
props;
return (
<Flow
tasks={templateConfigInfo?.tasks}
setSelectedBatchNodeId={setSelectedBatchNodeId}
selectedBatchNodeId={selectedBatchNodeId}
/>
);
};
export default WorkFlow;
src/views/Project/ProjectSubmitWork/index.tsx
View file @ 31a3b1a3
......@@ -42,7 +42,7 @@ const ProjectSubmitWork = observer(() => {
let configFormRef: any = React.createRef();
/** 是否全屏 */
const [fullScreenShow, setFullScreenShow] = useState<boolean>(false);
const [selectedNodeId, setSelectedNodeId] = useState<string>("");
const [selectedBatchNodeId, setSelectedBatchNodeId] = useState<string>("");
// 前往工作台
const goToWorkbench = (toWorkbenchList = false) => {
......@@ -298,7 +298,7 @@ const ProjectSubmitWork = observer(() => {
onRef={configFormRef}
templateConfigInfo={templateConfigInfo}
setParameter={setParameter}
setSelectedNodeId={setSelectedNodeId}
setSelectedBatchNodeId={setSelectedBatchNodeId}
/>
</div>
)}
......@@ -308,8 +308,8 @@ const ProjectSubmitWork = observer(() => {
>
<WorkFlow
templateConfigInfo={templateConfigInfo}
setSelectedNodeId={setSelectedNodeId}
selectedNodeId={selectedNodeId}
setSelectedBatchNodeId={setSelectedBatchNodeId}
selectedBatchNodeId={selectedBatchNodeId}
/>
</div>
</div>
......
src/views/Project/ProjectSubmitWork/interface.ts
View file @ 31a3b1a3
......@@ -2,7 +2,7 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-09 15:57:24
* @LastEditTime: 2022-07-12 11:51:17
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/interface.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -23,7 +23,8 @@ export interface IParameter {
tags: Array<string>;
source: string;
productId: string;
tasks: ITask[];
// tasks: ITask[];
isLine?: boolean;
validators: Array<IValidator>;
choices: Array<IChoice>;
error?: boolean;
......@@ -93,7 +94,7 @@ export interface IEdge {
sourceHandle: string;
target: string;
targetHandle: string;
label: string;
label?: string;
}
// 提交任务时的动态表单的数据结构
......
src/views/Project/components/Flow/index.module.css → src/views/Project/components/Flow/components/BatchNode/index.module.css
View file @ 31a3b1a3
......@@ -20,16 +20,6 @@
border-left: 4px solid #ff4e4e;
}
.batchRotate {
transform: translateX(-50%) rotate(-90deg);
}
.flowNode {
background-color: #f5f6f7;
border-radius: 2px;
padding: 6px 12px;
}
.successDot {
display: inline-block;
line-height: 22px;
......@@ -45,3 +35,7 @@
border: 1px solid #1370ff;
border-left: 4px solid #1370ff;
}
.batchRotate {
transform: translateX(-50%) rotate(-90deg);
}
src/views/Project/components/Flow/components/BatchNode/index.tsx 0 → 100644
View file @ 31a3b1a3
/*
* @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
* @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
*/
import { Tooltip } from "@mui/material";
import classNames from "classnames";
import { useMemo } from "react";
import { Handle, Position } from "react-flow-renderer";
import { uuid } from "@/utils/util";
import { IBatchNode } from "../../interface";
import styles from "./index.module.css";
/** 自定义batch节点 */
const BatchNode = (props: IBatchNode) => {
const { data } = props;
const {
style,
isFlowNode,
selectedStatus,
info: { title, isCheck, executionStatus, parameters },
} = data;
/** 获取输入参数数组 */
const inParamsArr = useMemo(() => {
return parameters.filter((item) => {
return item.parameterGroup === "in";
});
}, [parameters]);
/** 获取输出参数数组 */
const outParamsArr = useMemo(() => {
return parameters.filter((item) => {
return item.parameterGroup === "out";
});
}, [parameters]);
return (
<div
className={classNames({
[styles.batchNode]: true,
[styles.selectedBatchBox]: selectedStatus,
[styles.runBatchNode]: executionStatus === "Running",
[styles.doneBatchNode]: executionStatus === "Done",
[styles.errorBatchNode]: executionStatus === "Failed",
})}
style={style}
>
{inParamsArr?.length &&
inParamsArr.map((item, index) => {
return (
<Tooltip title={item.name} key={uuid()}>
<Handle
id={item.name}
style={{
background: "#fff ",
border: item.error
? "1px solid #FF4E4E"
: "1px solid #D1D6DE",
left: index * 20 + 20,
}}
type="target"
position={Position.Top}
/>
</Tooltip>
);
})}
<div
className={classNames({
[styles.batchRotate]: isFlowNode,
})}
>
{title || ""}
{isCheck && <span className={styles.successDot}></span>}
</div>
{outParamsArr?.length &&
outParamsArr.map((item, index) => {
return (
<Tooltip title={item.name} key={uuid()}>
<Handle
id={item.name}
style={{
background: "#fff ",
border: "1px solid #D1D6DE",
left: index * 20 + 20,
}}
type="source"
position={Position.Bottom}
/>
</Tooltip>
);
})}
</div>
);
};
export default BatchNode;
src/views/Project/components/Flow/components/FlowNode/index.module.css 0 → 100644
View file @ 31a3b1a3
.flowNode {
background-color: #f5f6f7;
border-radius: 2px;
padding: 6px 12px;
}
.successDot {
display: inline-block;
line-height: 22px;
vertical-align: middle;
width: 8px;
height: 8px;
background-color: #0dd09b;
border-radius: 8px;
margin-left: 8px;
}
src/views/Project/components/Flow/components/FlowNode/index.tsx 0 → 100644
View file @ 31a3b1a3
/*
* @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
* @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
*/
import classNames from "classnames";
import { Handle, Position } from "react-flow-renderer";
import { IExecutionStatus } from "@/views/Project/ProjectSubmitWork/interface";
import jobFail from "@/assets/project/jobFail.svg";
import jobRun from "@/assets/project/jobRun.svg";
import jobSue from "@/assets/project/jobSue.svg";
import styles from "./index.module.css";
/** 自定义flow节点 */
const FlowNode = (props: any) => {
/** 获取imgUrl */
const getImgUrl = (type: IExecutionStatus) => {
if (type === "Done") {
return jobSue;
}
if (type === "Failed") {
return jobFail;
}
if (type === "Running") {
return jobRun;
}
return undefined;
};
const { data } = props;
const {
dotStatus,
info: { title, isCheck, executionStatus },
} = data;
return (
<div
className={classNames({
[styles.flowNode]: true,
})}
>
{dotStatus?.isInput ? (
<Handle
style={{ background: "#C2C6CC ", left: 12 }}
type="target"
position={Position.Top}
/>
) : null}
<div style={{ display: "flex", alignItems: "center" }}>
{title || ""}
{isCheck && <span className={styles.successDot}></span>}
{getImgUrl(executionStatus) && (
<img
style={{ marginLeft: "6px" }}
src={getImgUrl(executionStatus)}
alt=""
/>
)}
</div>
{dotStatus?.isOutput ? (
<Handle
style={{ background: "#C2C6CC ", left: 12 }}
type="source"
position={Position.Bottom}
/>
) : null}
</div>
);
};
export default FlowNode;
src/views/Project/components/Flow/index.tsx
View file @ 31a3b1a3
......@@ -3,30 +3,18 @@ import ReactFlow, {
Background,
useNodesState,
useEdgesState,
Handle,
Position,
ReactFlowProps,
Node,
applyNodeChanges,
applyEdgeChanges,
EdgeChange,
NodeChange,
Connection,
} from "react-flow-renderer";
import { useCallback, useEffect, useMemo, useState } from "react";
import classNames from "classnames";
import jobFail from "@/assets/project/jobFail.svg";
import jobRun from "@/assets/project/jobRun.svg";
import jobSue from "@/assets/project/jobSue.svg";
import {
IEdge,
IExecutionStatus,
ITask,
} from "../../ProjectSubmitWork/interface";
import { IBatchNode, ILine } from "./interface";
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 styles from "./index.module.css";
import { Tooltip } from "@mui/material";
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-22 10:15:22
......@@ -39,10 +27,10 @@ interface IProps extends ReactFlowProps {
tasks?: ITask[];
/** 点击batch事件 */
onBatchClick?: (val: string) => void;
/** 设置选中节点id */
setSelectedNodeId?: (val: string) => void;
/** 选中的节点id */
selectedNodeId?: string;
/** 设置选中的batch节点id */
setSelectedBatchNodeId?: (val: string) => void;
/** 选中的batch节点id */
selectedBatchNodeId?: string;
/** 类型， edit为编辑类型 */
type?: "edit" | "default";
/** 设置组件数据 组件为编辑状态使用 */
......@@ -51,150 +39,12 @@ interface IProps extends ReactFlowProps {
onFlowNodeClick?: (val: string) => void;
}
/** 获取imgUrl */
const getImgUrl = (type: IExecutionStatus) => {
if (type === "Done") {
return jobSue;
}
if (type === "Failed") {
return jobFail;
}
if (type === "Running") {
return jobRun;
}
return undefined;
};
/** 自定义batch节点 */
const BatchNode = (props: IBatchNode) => {
const { data } = props;
const {
dotStatus,
style,
isFlowNode,
selectedStatus,
info: { title, isCheck, executionStatus, parameters },
} = data;
/** 获取输入参数数组 */
const inParamsArr = useMemo(() => {
return parameters.filter((item) => {
return item.parameterGroup === "in";
});
}, [parameters]);
/** 获取输出参数数组 */
const outParamsArr = useMemo(() => {
return parameters.filter((item) => {
return item.parameterGroup === "out";
});
}, [parameters]);
return (
<div
className={classNames({
[styles.batchNode]: true,
[styles.selectedBatchBox]: selectedStatus,
[styles.runBatchNode]: executionStatus === "Running",
[styles.doneBatchNode]: executionStatus === "Done",
[styles.errorBatchNode]: executionStatus === "Failed",
})}
style={style}
>
{inParamsArr?.length &&
inParamsArr.map((item, index) => {
return (
<Tooltip title={item.name}>
<Handle
// title={item.name}
style={{
background: "#fff ",
border: "1px solid #D1D6DE",
left: index * 20 + 20,
}}
type="target"
position={Position.Top}
/>
</Tooltip>
);
})}
<div
className={classNames({
[styles.batchRotate]: isFlowNode,
})}
>
{title || ""}
{isCheck && <span className={styles.successDot}></span>}
</div>
{outParamsArr?.length &&
outParamsArr.map((item, index) => {
return (
<Tooltip title={item.name}>
<Handle
style={{
background: "#fff ",
border: "1px solid #D1D6DE",
left: index * 20 + 20,
}}
type="source"
position={Position.Bottom}
/>
</Tooltip>
);
})}
</div>
);
};
/** 自定义flow节点 */
const FlowNode = (props: any) => {
const { data } = props;
const {
dotStatus,
info: { title, isCheck, executionStatus },
} = data;
return (
<div
className={classNames({
[styles.flowNode]: true,
})}
>
{dotStatus?.isInput ? (
<Handle
style={{ background: "#C2C6CC ", left: 12 }}
type="target"
position={Position.Top}
/>
) : null}
<div style={{ display: "flex", alignItems: "center" }}>
{title || ""}
{isCheck && <span className={styles.successDot}></span>}
{getImgUrl(executionStatus) && (
<img
style={{ marginLeft: "6px" }}
src={getImgUrl(executionStatus)}
alt=""
/>
)}
</div>
{dotStatus?.isOutput ? (
<Handle
style={{ background: "#C2C6CC ", left: 12 }}
type="source"
position={Position.Bottom}
id="a"
/>
) : null}
</div>
);
};
const Flow = (props: IProps) => {
const {
tasks,
onBatchClick,
setSelectedNodeId,
selectedNodeId,
setSelectedBatchNodeId,
selectedBatchNodeId,
type: flowType = "default",
setTasks,
onFlowNodeClick,
......@@ -309,22 +159,17 @@ const Flow = (props: IProps) => {
type: item.type === "BATCH" ? "batchNode" : "flowNode",
/** 每一项的数据 */
data: {
// label: item.title || "",
info: item,
...(item.type === "BATCH"
? {
/** 是否有流节点 */
isFlowNode: isFlowNode(item.id),
/** 选中状态 */
selectedStatus: selectedNodeId
? selectedNodeId === item.id
selectedStatus: selectedBatchNodeId
? selectedBatchNodeId === item.id
: inSideNodeId === item.id,
}
: {}),
// /** 是否选中 */
// isCheck: item.isCheck,
/** 运行状态 */
// executionStatus: item.executionStatus,
/** 输入输出圆点状态 */
dotStatus: nodesInputAndOutputStatus(item.id),
......@@ -354,7 +199,7 @@ const Flow = (props: IProps) => {
}, [
tasks,
isFlowNode,
selectedNodeId,
selectedBatchNodeId,
inSideNodeId,
nodesInputAndOutputStatus,
getBatchStyle,
......@@ -374,13 +219,13 @@ const Flow = (props: IProps) => {
val.push(newLine);
}, []);
});
return val.map((item: ILine) => {
const newSelectId = selectedNodeId ? selectedNodeId : inSideNodeId;
const a = val.map((item: ILine) => {
const newSelectId = selectedBatchNodeId
? selectedBatchNodeId
: inSideNodeId;
return {
id: item.id,
source: item.source,
target: item.target,
type: "smoothstep",
...item,
// type: "smoothstep",
...(item?.batchId === newSelectId
? { style: { stroke: "#1370FF" }, animated: true }
: {}),
......@@ -389,23 +234,24 @@ const Flow = (props: IProps) => {
label: item.label ? `(${item.label})` : "",
};
});
}, [inSideNodeId, selectedNodeId, tasks]);
return a;
}, [inSideNodeId, selectedBatchNodeId, tasks]);
/** flowNode点击事件 */
const onNodeClick = (e: any, node: Node) => {
tasks?.forEach((item) => {
if (item.id === node.id) {
if (item.parentNode) {
setSelectedNodeId
? setSelectedNodeId(item.parentNode)
setSelectedBatchNodeId
? setSelectedBatchNodeId(item.parentNode)
: setInSideNodeId(item.parentNode);
onBatchClick && onBatchClick(item.parentNode);
document
.getElementById(`point${item.parentNode}`)
?.scrollIntoView(true);
} else {
setSelectedNodeId
? setSelectedNodeId(node.id)
setSelectedBatchNodeId
? setSelectedBatchNodeId(node.id)
: setInSideNodeId(node.id);
onBatchClick && onBatchClick(node.id || "");
document.getElementById(`point${node.id}`)?.scrollIntoView(true);
......@@ -416,14 +262,14 @@ const Flow = (props: IProps) => {
};
const handlePaneClick = () => {
setSelectedNodeId ? setSelectedNodeId("") : setInSideNodeId("");
setSelectedBatchNodeId ? setSelectedBatchNodeId("") : setInSideNodeId("");
onBatchClick && onBatchClick("");
};
/** node节点 */
const [nodes, setNodes] = useNodesState(initialNodes);
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
/** 连线数组 */
const [edges, setEdges] = useEdgesState(initialEdges);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
useEffect(() => {
setEdges(initialEdges);
......@@ -433,20 +279,69 @@ const Flow = (props: IProps) => {
setNodes(initialNodes);
}, [initialNodes, setNodes]);
const onNodesChange = useCallback(
(changes: NodeChange[]) => {
console.log(changes, "1111");
setNodes((ns) => applyNodeChanges(changes, ns));
/** 节点拖动停止 */
const onNodeDragStop = useCallback(
(event: React.MouseEvent, node: Node) => {
const newVal =
(tasks?.length &&
tasks.map((item) => {
if (item.id === node.id) {
return {
...item,
position: node.position,
};
} else {
return item;
}
})) ||
[];
setTasks && setTasks(newVal);
},
[setTasks, tasks]
);
const connectModifyParameters = useCallback(
(parameters: IParameter[], edgeItem: Connection) => {
return parameters.map((item) => {
if (item.name === edgeItem.targetHandle) {
return { ...item, isLine: true };
} else {
return item;
}
});
},
[setNodes]
[]
);
const onEdgesChange = useCallback(
(changes: EdgeChange[]) => {
console.log(changes, "222222");
setEdges((es) => applyEdgeChanges(changes, es));
const onConnect = useCallback(
(val: Connection) => {
const newVal =
(tasks?.length &&
tasks?.map((item) => {
if (item.id === val.source) {
return {
...item,
edges: [
...item.edges,
{
...val,
id: uuid(),
},
],
};
} else if (item.id === val.target) {
return {
...item,
parameters: connectModifyParameters(item.parameters, val),
};
} else {
return item;
}
})) ||
[];
setTasks && setTasks(newVal as ITask[]);
},
[setEdges]
[connectModifyParameters, setTasks, tasks]
);
return (
......@@ -456,8 +351,8 @@ const Flow = (props: IProps) => {
fitView={flowType === "default" ? true : false}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
deleteKeyCode={["13"]}
// onConnect={onConnect}
onNodeDragStop={onNodeDragStop}
onConnect={onConnect}
// proOptions={{ hideAttribution: true, account: "" }}
nodeTypes={nodeTypes}
onPaneClick={handlePaneClick}
......
src/views/Project/components/Flow/interface.ts
View file @ 31a3b1a3
......@@ -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-11 15:24:53
* @LastEditTime: 2022-07-12 00:26:48
* @FilePath: /bkunyun/src/views/Project/components/Flow/interface.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -13,10 +13,12 @@ import { ITask } from "../../ProjectSubmitWork/interface";
/** 线的参数 */
export interface ILine {
id: string,
label: string,
label?: string,
batchId?: string,
source: string,
target: string,
sourceHandle: string,
targetHandle: string,
}
export interface IDotStatus {
......
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