feat: 增加流程模块数据层，优化节点的线段链接根据节点位置编排方向变化

package.json

@@ -33,6 +33,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.3",
+    "react-tracked": "^1.7.11",
     "reactflow": "^11.10.1",
     "simplebar-react": "^3.2.4",
     "use-immer": "^0.9.0",

src/FlowManager.ts

@@ -25,7 +25,7 @@ export interface INode {
 	title: string
 	component: ForwardRefExoticComponent<any & RefAttributes<any>>
 	/** 节点链接规则 */
-	riles?: Array<INodeRule>
+	rules?: Array<INodeRule>
 }
 
 class FlowManager {

src/Nodes/NodeA/NodeA.module.less

@@ -2,4 +2,34 @@
 	width: 40px;
 	height: 40px;
 	background-color: pink;
+	position: relative;
+
+	&:hover {
+		.node-text {
+			opacity: 1;
+		}
+	}
+
+	&-text {
+		position: absolute;
+		width: 100%;
+		height: 20px;
+		text-align: center;
+		bottom: -20px;
+		left: 0;
+		font-size: 12px;
+		line-height: 20px;
+		color: #333333;
+		opacity: 0;
+	}
+
+	& &-handle {
+		width: 100%;
+		height: 100%;
+		left: 0;
+		top: 0;
+		transform: translate(0, 0);
+		opacity: 0;
+		border-radius: 0;
+	}
 }

src/Nodes/NodeA/NodeA.tsx

@@ -1,7 +1,8 @@
-import React, { forwardRef, useImperativeHandle } from "react"
+import React, { forwardRef, useEffect, useImperativeHandle } from "react"
 import styles from "./NodeA.module.less"
 import { Handle, Position } from "reactflow"
 import type { NodeProps } from "@reactflow/core/dist/esm/types/nodes"
+import { useFlowDataSelector } from "@/context/FlowData"
 
 interface NodeAProps extends NodeProps {
 	isMenu?: boolean
@@ -11,10 +12,16 @@ export interface NodeAInstance {
 
 }
 
+const position = [Position.Top, Position.Left, Position.Right, Position.Bottom]
+
 const NodeA = forwardRef<NodeAInstance, NodeAProps>((props, ref) => {
 
 	const { isMenu, isConnectable } = props
+
+	const activeNode = useFlowDataSelector((store) => store.activeNode)
 
+	useEffect(() => {
+	}, [activeNode])
 	useImperativeHandle(ref, (): NodeAInstance => {
 		return {}
 	})
@@ -24,16 +31,35 @@ const NodeA = forwardRef<NodeAInstance, NodeAProps>((props, ref) => {
 			{
 				!isMenu && (
 					<>
-						<Handle
-							type="source"
-							position={ Position.Left }
-							isConnectable={ isConnectable }
-						/>
-						<Handle
-							type="source"
-							position={ Position.Right }
-							isConnectable={ isConnectable }
-						/>
+						{
+							position.map(i => (
+								<Handle
+									key={i}
+									type="source"
+									className={styles.nodeHandle}
+									style={{
+										zIndex: activeNode === null ? 100 : -1,
+									}}
+									position={ i }
+									isConnectable={ isConnectable }
+								/>
+							))
+						}
+						{
+							position.map(i => (
+								<Handle
+									key={i}
+									type="target"
+									className={styles.nodeHandle}
+									style={{
+										zIndex: (!props.id && activeNode !== props.id) ? 100 : -1
+									}}
+									position={ i }
+									isConnectable={ isConnectable }
+								/>
+							))
+						}
+						<span className={ styles.nodeText }>NodeA</span>
 					</>
 				)
 			}

src/Nodes/NodeA/index.ts

@@ -8,7 +8,13 @@ export const install = () => {
 	FlowManager.registerNode({
 		type: Flow.NodeType.NodeA,
 		title: "NodeA",
-		component: NodeA
+		component: NodeA,
+		rules: [
+			{
+				sourceNodeType: "",
+				targetNodeType: ""
+			}
+		]
 	})
 }
 

src/Nodes/NodeB/NodeB.module.less

@@ -2,4 +2,33 @@
 	width: 40px;
 	height: 40px;
 	background-color: orange;
+
+	&:hover {
+		.node-text {
+			opacity: 1;
+		}
+	}
+
+	&-text {
+		position: absolute;
+		width: 100%;
+		height: 20px;
+		text-align: center;
+		bottom: -20px;
+		left: 0;
+		font-size: 12px;
+		line-height: 20px;
+		color: #333333;
+		opacity: 0;
+	}
+
+	& &-handle {
+		width: 100%;
+		height: 100%;
+		left: 0;
+		top: 0;
+		transform: translate(0, 0);
+		opacity: 0;
+		border-radius: 0;
+	}
 }

src/Nodes/NodeB/NodeB.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef, useImperativeHandle } from "react"
 import styles from "./NodeB.module.less"
 import { Handle, Position } from "reactflow"
 import type { NodeProps } from "@reactflow/core/dist/esm/types/nodes"
+import { useFlowDataSelector } from "@/context/FlowData"
 
 interface NodeBProps extends NodeProps {
 	isMenu?: boolean
@@ -15,6 +16,8 @@ const NodeB = forwardRef<NodeBInstance, NodeBProps>((props, ref) => {
 
 	const { isMenu, isConnectable } = props
 
+	const activeNode = useFlowDataSelector((store) => store.activeNode)
+
 	useImperativeHandle(ref, (): NodeBInstance => {
 		return {}
 	})
@@ -26,14 +29,23 @@ const NodeB = forwardRef<NodeBInstance, NodeBProps>((props, ref) => {
 					<>
 						<Handle
 							type="source"
+							className={styles.nodeHandle}
+							style={{
+								zIndex: activeNode === null ? 100 : -1,
+							}}
 							position={ Position.Left }
 							isConnectable={ isConnectable }
 						/>
 						<Handle
-							type="source"
+							type="target"
+							className={styles.nodeHandle}
+							style={{
+								zIndex: (!props.id && activeNode !== props.id) ? 100 : -1
+							}}
 							position={ Position.Right }
 							isConnectable={ isConnectable }
 						/>
+						<span className={ styles.nodeText }>NodeB</span>
 					</>
 				)
 			}

src/Nodes/NodeC/NodeC.module.less

@@ -2,4 +2,33 @@
 	width: 40px;
 	height: 40px;
 	background-color: deepskyblue;
+
+	&:hover {
+		.node-text {
+			opacity: 1;
+		}
+	}
+
+	&-text {
+		position: absolute;
+		width: 100%;
+		height: 20px;
+		text-align: center;
+		bottom: -20px;
+		left: 0;
+		font-size: 12px;
+		line-height: 20px;
+		color: #333333;
+		opacity: 0;
+	}
+
+	& &-handle {
+		width: 100%;
+		height: 100%;
+		left: 0;
+		top: 0;
+		transform: translate(0, 0);
+		opacity: 0;
+		border-radius: 0;
+	}
 }