feat: 点击样式修改

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

@@ -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 16:29:39
+ * @LastEditTime: 2022-07-12 21:06:48
  * @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
  */
@@ -37,7 +37,6 @@ const FlowNode = (props: any) => {
 		selectedStatus,
 		info: { title, isCheck, executionStatus },
 	} = data;
-	console.log(selectedStatus, "selectedStatus");
 	return (
 		<div
 			className={classNames({

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

@@ -6,6 +6,7 @@ import ReactFlow, {
 	ReactFlowProps,
 	Node,
 	Connection,
+	Edge,
 } from "react-flow-renderer";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import _ from "lodash";
@@ -62,7 +63,7 @@ const Flow = (props: IProps) => {
 	const [inSideFlowNodeId, setInSideFlowNodeId] = useState<string>("");
 	const Message = useMessage();
 
-	/** 删除批节点 */
+	/** 删除批或者线节点 */
 	const deleteSelectBatchNode = useCallback(
 		(e: any) => {
 			if (e.keyCode === 8) {
@@ -255,6 +256,7 @@ const Flow = (props: IProps) => {
 				? setSelectedBatchNodeId(id)
 				: setInSideBatchNodeId(id);
 			onBatchClick && onBatchClick(id);
+			setInSideFlowNodeId("");
 			document.getElementById(`point${id}`)?.scrollIntoView(true);
 		},
 		[onBatchClick, setSelectedBatchNodeId]
@@ -264,11 +266,12 @@ const Flow = (props: IProps) => {
 	const onNodeClick = (e: any, node: Node) => {
 		tasks?.forEach((item) => {
 			if (item.id === node.id) {
-				if (item.parentNode) {
-					setInSideFlowNodeId(node.id);
-					setNodeIdFun(item.parentNode);
-				} else {
+				if (item.type === "BATCH") {
 					setNodeIdFun(node.id);
+				} else {
+					setInSideFlowNodeId(node.id);
+					setInSideBatchNodeId("");
+					setSelectedBatchNodeId && setSelectedBatchNodeId("");
 				}
 			}
 		});
@@ -371,7 +374,7 @@ const Flow = (props: IProps) => {
 							if (every.name === connection.targetHandle) {
 								inputClassType = every.classType;
 							}
-							if (every.name === connection.source) {
+							if (every.name === connection.sourceHandle) {
 								outClassType = every.classType;
 							}
 						});
@@ -433,6 +436,11 @@ const Flow = (props: IProps) => {
 		[Message, connectCheck, getClassType, setTasks, tasksDeleteLine]
 	);
 
+	/** 点击连线 */
+	const onEdgeClick = useCallback((e: any, val: Edge) => {
+		console.log(val, "1111");
+	}, []);
+
 	return (
 		<ReactFlow
 			nodes={nodes}
@@ -442,6 +450,7 @@ const Flow = (props: IProps) => {
 			onEdgesChange={onEdgesChange}
 			onNodeDragStop={onNodeDragStop}
 			onConnect={onConnect}
+			onEdgeClick={onEdgeClick}
 			// proOptions={{ hideAttribution: true, account: "" }}
 			nodeTypes={nodeTypes}
 			onPaneClick={handlePaneClick}