refactor: Update Node component to include icon and type label

YaoApp · Jun 4, 2024 · f5b38c9 · f5b38c9
1 parent e6a437e
commit f5b38c9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 15 deletions.
diff --git a/packages/xgen/components/edit/FlowBuilder/components/Flow/Node/index.less b/packages/xgen/components/edit/FlowBuilder/components/Flow/Node/index.less
@@ -8,7 +8,6 @@
 			text-overflow: ellipsis;
 			white-space: nowrap;
 		}
-		cursor: pointer;
 	}
 }
 
@@ -76,7 +75,7 @@
 		font-size: 12px;
 		border-radius: 24px;
 		background: var(--color_border_soft);
-		cursor: move;
+		cursor: pointer;
 	}
 }
 

diff --git a/packages/xgen/components/edit/FlowBuilder/components/Flow/Node/index.tsx b/packages/xgen/components/edit/FlowBuilder/components/Flow/Node/index.tsx
@@ -76,20 +76,8 @@ const CustomNode: FC<NodeProps> = ({ id, data }: IProps) => {
 					<div className='message'>{data.error}</div>
 				</div>
 			)}
-			<div className={clsx([styles._type, 'item-drag-handle'])}>
-				{data.icon && (
-					<Icon
-						name={data.icon?.name ? data.icon?.name : data.icon}
-						style={{ marginRight: 4 }}
-						color={color}
-						size={data.icon?.size ? data.icon?.size : 16}
-					/>
-				)}
-				<div style={{ color: color }}>{data.typeLabel || data.type}</div>
-			</div>
-
 			<div
-				className={clsx([styles._label, 'flex align_center label'])}
+				className={clsx([styles._type])}
 				onMouseDown={(event) => {
 					event.stopPropagation()
 					setNodes((nodes) => {
@@ -103,6 +91,18 @@ const CustomNode: FC<NodeProps> = ({ id, data }: IProps) => {
 					onSettingNode(id)
 				}}
 			>
+				{data.icon && (
+					<Icon
+						name={data.icon?.name ? data.icon?.name : data.icon}
+						style={{ marginRight: 4 }}
+						color={color}
+						size={data.icon?.size ? data.icon?.size : 16}
+					/>
+				)}
+				<div style={{ color: color }}>{data.typeLabel || data.type}</div>
+			</div>
+
+			<div className={clsx([styles._label, 'flex align_center label item-drag-handle'])}>
 				{data.icon && data.running !== true && (
 					<Icon
 						name={data.icon?.name ? data.icon?.name : data.icon}