feat: 点击按delete删除线

src/views/Project/components/Flow/index.tsx

@@ -61,24 +61,61 @@ const Flow = (props: IProps) => {
 	const [inSideBatchNodeId, setInSideBatchNodeId] = useState<string>("");
 	/** 内部维护的选择的flow节点Id */
 	const [inSideFlowNodeId, setInSideFlowNodeId] = useState<string>("");
+	/** 选中的线 */
+	const [selectedEdge, setSelectedEdge] = useState<Edge>();
 	const Message = useMessage();
 
-	/** 删除批或者线节点 */
+	/** 原始数据删除线 */
+	const tasksDeleteLine = useCallback(
+		(connection: Connection | Edge) => {
+			const result =
+				(tasks?.length &&
+					tasks.map((item) => {
+						if (item.id === connection.source && item.type === "BATCH") {
+							const newEdges =
+								(item.edges?.length &&
+									item.edges?.filter(
+										(every) => every.sourceHandle !== connection.sourceHandle
+									)) ||
+								[];
+							return {
+								...item,
+								edges: newEdges,
+							};
+						} else {
+							return item;
+						}
+					})) ||
+				[];
+			return result;
+		},
+		[tasks]
+	);
+
+	/** 删除批节点或者线 */
 	const deleteSelectBatchNode = useCallback(
 		(e: any) => {
 			if (e.keyCode === 8) {
-				const val =
-					tasks?.length &&
-					tasks.filter((item) => {
-						return (
-							item.id !== inSideBatchNodeId &&
-							item.parentNode !== inSideBatchNodeId
-						);
-					});
-				setTasks && setTasks(val || []);
+				let val: ITask[] = [];
+				/** 删除批节点逻辑 */
+				if (inSideBatchNodeId) {
+					val =
+						(tasks?.length &&
+							tasks.filter((item) => {
+								return (
+									item.id !== inSideBatchNodeId &&
+									item.parentNode !== inSideBatchNodeId
+								);
+							})) ||
+						[];
+				}
+				if (selectedEdge) {
+					val = tasksDeleteLine(selectedEdge);
+				}
+				setTasks && setTasks(val);
 			}
 		},
-		[inSideBatchNodeId, setTasks, tasks]
+		[inSideBatchNodeId, selectedEdge, setTasks, tasks, tasksDeleteLine]
 	);
 
 	/** 监听鼠标按下事件 */
@@ -239,6 +276,14 @@ const Flow = (props: IProps) => {
 			return {
 				...item,
 				// type: "smoothstep",
+				/** 点击线选中 */
+				...(selectedEdge?.id === item.id
+					? {
+							style: { stroke: "#1370FF", strokeWidth: 2 },
+							animated: true,
+					  }
+					: {}),
+				/** 点击batch节点选中 */
 				...(item?.batchId === newSelectId
 					? { style: { stroke: "#1370FF" }, animated: true }
 					: {}),
@@ -247,7 +292,7 @@ const Flow = (props: IProps) => {
 				label: item.label ? `(${item.label})` : "",
 			};
 		});
-	}, [inSideBatchNodeId, selectedBatchNodeId, tasks]);
+	}, [inSideBatchNodeId, selectedBatchNodeId, selectedEdge?.id, tasks]);
 
 	/** 设置nodeId方法 */
 	const setNodeIdFun = useCallback(
@@ -284,6 +329,7 @@ const Flow = (props: IProps) => {
 			: setInSideBatchNodeId("");
 		setInSideFlowNodeId("");
 		onBatchClick && onBatchClick("");
+		setSelectedEdge(undefined);
 	};
 
 	/** node节点 */
@@ -335,33 +381,6 @@ const Flow = (props: IProps) => {
 		[]
 	);
 
-	/** 原始数据删除线 */
-	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) => {
@@ -438,7 +457,7 @@ const Flow = (props: IProps) => {
 
 	/** 点击连线 */
 	const onEdgeClick = useCallback((e: any, val: Edge) => {
-		console.log(val, "1111");
+		setSelectedEdge(val);
 	}, []);
 
 	return (