From e6a437e03875571e82eddc6eeea4153b098f5fe2 Mon Sep 17 00:00:00 2001
From: Max <shadow.iqka@qq.com>
Date: Tue, 4 Jun 2024 11:46:57 +0800
Subject: [PATCH] refactor: Update Canvas component to include event handling
 for showing panel on label click

---
 .../FlowBuilder/components/Canvas/index.tsx   | 23 ++++++++++++
 .../components/Flow/Node/index.less           |  8 +++++
 .../components/Flow/Node/index.tsx            | 35 ++++++++++++++++---
 .../FlowBuilder/components/Flow/index.tsx     |  6 +++-
 4 files changed, 67 insertions(+), 5 deletions(-)

diff --git a/packages/xgen/components/edit/FlowBuilder/components/Canvas/index.tsx b/packages/xgen/components/edit/FlowBuilder/components/Canvas/index.tsx
index 2cb55098..2a4a3a25 100644
--- a/packages/xgen/components/edit/FlowBuilder/components/Canvas/index.tsx
+++ b/packages/xgen/components/edit/FlowBuilder/components/Canvas/index.tsx
@@ -35,6 +35,7 @@ const Index = (props: IProps) => {
 		value,
 		nodes,
 		setNodes,
+		setEdges,
 		openPanel,
 		setOpenPanel,
 		showMask,
@@ -63,6 +64,28 @@ const Index = (props: IProps) => {
 	const hidePanel = () => {
 		setOpenPanel(() => false)
 		setShowMask(() => true)
+
+		if (panelNode) {
+			setNodes((nodes) => {
+				return nodes.map((node) => {
+					if (node.id === panelNode.id) {
+						node.selected = false
+					}
+					return node
+				})
+			})
+		}
+
+		if (panelEdge) {
+			setEdges((edges) => {
+				return edges.map((edge) => {
+					if (edge.id === panelEdge.id) {
+						edge.selected = false
+					}
+					return edge
+				})
+			})
+		}
 	}
 
 	const afterOpenChange = (open: boolean) => {
diff --git a/packages/xgen/components/edit/FlowBuilder/components/Flow/Node/index.less b/packages/xgen/components/edit/FlowBuilder/components/Flow/Node/index.less
index 02188a3a..b77681e9 100644
--- a/packages/xgen/components/edit/FlowBuilder/components/Flow/Node/index.less
+++ b/packages/xgen/components/edit/FlowBuilder/components/Flow/Node/index.less
@@ -8,6 +8,7 @@
 			text-overflow: ellipsis;
 			white-space: nowrap;
 		}
+		cursor: pointer;
 	}
 }
 
@@ -75,5 +76,12 @@
 		font-size: 12px;
 		border-radius: 24px;
 		background: var(--color_border_soft);
+		cursor: move;
+	}
+}
+
+._type:hover {
+	:global {
+		background: var(--color_bg_menu);
 	}
 }
diff --git a/packages/xgen/components/edit/FlowBuilder/components/Flow/Node/index.tsx b/packages/xgen/components/edit/FlowBuilder/components/Flow/Node/index.tsx
index 2e86fd6f..53d32097 100644
--- a/packages/xgen/components/edit/FlowBuilder/components/Flow/Node/index.tsx
+++ b/packages/xgen/components/edit/FlowBuilder/components/Flow/Node/index.tsx
@@ -17,7 +17,7 @@ type IProps = {
 }
 
 const CustomNode: FC<NodeProps> = ({ id, data }: IProps) => {
-	const { onDelete, onAdd, onDuplicate, onSettingNode, running } = useBuilderContext()
+	const { onDelete, onAdd, onDuplicate, onSettingNode, running, setNodes } = useBuilderContext()
 
 	data.showSourceHandle = data.showSourceHandle === undefined ? true : data.showSourceHandle
 	data.showTargetHandle = data.showTargetHandle === undefined ? true : data.showTargetHandle
@@ -41,7 +41,20 @@ const CustomNode: FC<NodeProps> = ({ id, data }: IProps) => {
 					<a className='item' onClick={() => onDuplicate(id)}>
 						<Icon name='material-content_copy' size={16} />
 					</a>
-					<a className='item' onClick={() => onSettingNode(id)}>
+					<a
+						className='item'
+						onClick={() => {
+							setNodes((nodes) => {
+								return nodes.map((node) => {
+									if (node.id === id) {
+										node.selected = true
+									}
+									return node
+								})
+							})
+							onSettingNode(id)
+						}}
+					>
 						<Icon name='material-settings' size={16} />
 					</a>
 
@@ -63,7 +76,7 @@ const CustomNode: FC<NodeProps> = ({ id, data }: IProps) => {
 					<div className='message'>{data.error}</div>
 				</div>
 			)}
-			<div className={clsx([styles._type])}>
+			<div className={clsx([styles._type, 'item-drag-handle'])}>
 				{data.icon && (
 					<Icon
 						name={data.icon?.name ? data.icon?.name : data.icon}
@@ -75,7 +88,21 @@ const CustomNode: FC<NodeProps> = ({ id, data }: IProps) => {
 				<div style={{ color: color }}>{data.typeLabel || data.type}</div>
 			</div>
 
-			<div className={clsx([styles._label, 'flex align_center label'])}>
+			<div
+				className={clsx([styles._label, 'flex align_center label'])}
+				onMouseDown={(event) => {
+					event.stopPropagation()
+					setNodes((nodes) => {
+						return nodes.map((node) => {
+							if (node.id === id) {
+								node.selected = true
+							}
+							return node
+						})
+					})
+					onSettingNode(id)
+				}}
+			>
 				{data.icon && data.running !== true && (
 					<Icon
 						name={data.icon?.name ? data.icon?.name : data.icon}
diff --git a/packages/xgen/components/edit/FlowBuilder/components/Flow/index.tsx b/packages/xgen/components/edit/FlowBuilder/components/Flow/index.tsx
index aa692b1f..f42d894f 100644
--- a/packages/xgen/components/edit/FlowBuilder/components/Flow/index.tsx
+++ b/packages/xgen/components/edit/FlowBuilder/components/Flow/index.tsx
@@ -139,7 +139,11 @@ const Flow = (props: IProps) => {
 	return (
 		<div className='reactflow-wrapper' ref={reactFlowWrapper}>
 			<ReactFlow
-				nodes={nodes}
+				nodes={nodes?.map((node) => {
+					if (!node.data) return node
+					node.dragHandle = '.item-drag-handle'
+					return node
+				})}
 				edges={edges}
 				onInit={setReactFlowInstance}
 				onPaneClick={() => setHideContextMenu && setHideContextMenu(true)}