fix: 调整节点连接规则

kampiu · Jan 15, 2024 · df3b425 · df3b425
1 parent 47399e9
commit df3b425
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 51 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,8 @@
     "antd": "^5.12.8",
     "axios": "^1.4.0",
     "dayjs": "^1.11.10",
+    "hotkeys": "^1.0.0",
+    "hotkeys-js": "^3.13.5",
     "immer": "^10.0.3",
     "immutability-helper": "^3.1.1",
     "react": "^18.2.0",

diff --git a/src/Nodes/NodeA/NodeA.tsx b/src/Nodes/NodeA/NodeA.tsx
@@ -3,6 +3,7 @@ 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"
+import hotkeys from "hotkeys-js"
 
 interface NodeAProps extends NodeProps {
 	isMenu?: boolean
@@ -12,20 +13,24 @@ export interface NodeAInstance {
 
 }
 
-const position = [Position.Top, Position.Left, Position.Right, Position.Bottom]
+export const position = [Position.Top, Position.Left, Position.Right, Position.Bottom]
 
 const NodeA = forwardRef<NodeAInstance, NodeAProps>((props, ref) => {
 
-	const { isMenu, isConnectable } = props
+	const {isMenu, isConnectable} = props
 
 	const activeNode = useFlowDataSelector((store) => store.activeNode)
-
-	useEffect(() => {
-	}, [activeNode])
+
 	useImperativeHandle(ref, (): NodeAInstance => {
 		return {}
 	})
 
+	useEffect(() => {
+		hotkeys("a", (event) => {
+			console.log("--a--", event)
+		})
+	}, [])
+
 	return (
 		<div className={ styles.node }>
 			{
@@ -34,12 +39,12 @@ const NodeA = forwardRef<NodeAInstance, NodeAProps>((props, ref) => {
 						{
 							position.map(i => (
 								<Handle
-									key={i}
+									key={ `source_${i}` }
 									type="source"
-									className={styles.nodeHandle}
-									style={{
+									className={ styles.nodeHandle }
+									style={ {
 										zIndex: activeNode === null ? 100 : -1,
-									}}
+									} }
 									position={ i }
 									isConnectable={ isConnectable }
 								/>
@@ -48,12 +53,12 @@ const NodeA = forwardRef<NodeAInstance, NodeAProps>((props, ref) => {
 						{
 							position.map(i => (
 								<Handle
-									key={i}
+									key={ `target_${i}` }
 									type="target"
-									className={styles.nodeHandle}
-									style={{
+									className={ styles.nodeHandle }
+									style={ {
 										zIndex: (!props.id && activeNode !== props.id) ? 100 : -1
-									}}
+									} }
 									position={ i }
 									isConnectable={ isConnectable }
 								/>

diff --git a/src/Nodes/NodeB/NodeB.tsx b/src/Nodes/NodeB/NodeB.tsx
@@ -3,6 +3,7 @@ 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"
+import { position } from "@/Nodes/NodeA/NodeA"
 
 interface NodeBProps extends NodeProps {
 	isMenu?: boolean
@@ -27,24 +28,34 @@ const NodeB = forwardRef<NodeBInstance, NodeBProps>((props, ref) => {
 			{
 				!isMenu && (
 					<>
-						<Handle
-							type="source"
-							className={styles.nodeHandle}
-							style={{
-								zIndex: activeNode === null ? 100 : -1,
-							}}
-							position={ Position.Left }
-							isConnectable={ isConnectable }
-						/>
-						<Handle
-							type="target"
-							className={styles.nodeHandle}
-							style={{
-								zIndex: (!props.id && activeNode !== props.id) ? 100 : -1
-							}}
-							position={ Position.Right }
-							isConnectable={ isConnectable }
-						/>
+						{
+							position.map(i => (
+								<Handle
+									key={ `source_${i}` }
+									type="source"
+									className={ styles.nodeHandle }
+									style={ {
+										zIndex: activeNode === null ? 100 : -1,
+									} }
+									position={ i }
+									isConnectable={ isConnectable }
+								/>
+							))
+						}
+						{
+							position.map(i => (
+								<Handle
+									key={ `target_${i}` }
+									type="target"
+									className={ styles.nodeHandle }
+									style={ {
+										zIndex: (!props.id && activeNode !== props.id) ? 100 : -1
+									} }
+									position={ i }
+									isConnectable={ isConnectable }
+								/>
+							))
+						}
 						<span className={ styles.nodeText }>NodeB</span>
 					</>
 				)

diff --git a/src/Nodes/NodeC/NodeC.tsx b/src/Nodes/NodeC/NodeC.tsx
@@ -3,6 +3,7 @@ import styles from "./NodeC.module.less"
 import { Handle, Position } from "reactflow"
 import type { NodeProps } from "@reactflow/core/dist/esm/types/nodes"
 import { useFlowDataSelector } from "@/context/FlowData"
+import { position } from "@/Nodes/NodeA/NodeA"
 
 interface NodeCProps extends NodeProps {
 	isMenu?: boolean
@@ -27,24 +28,34 @@ const NodeC = forwardRef<NodeCInstance, NodeCProps>((props, ref) => {
 			{
 				!isMenu && (
 					<>
-						<Handle
-							type="source"
-							className={styles.nodeHandle}
-							style={{
-								zIndex: activeNode === null ? 100 : -1
-							}}
-							position={ Position.Left }
-							isConnectable={ isConnectable }
-						/>
-						<Handle
-							type="target"
-							className={styles.nodeHandle}
-							style={{
-								zIndex: (!props.id && activeNode !== props.id) ? 100 : -1
-							}}
-							position={ Position.Right }
-							isConnectable={ isConnectable }
-						/>
+						{
+							position.map(i => (
+								<Handle
+									key={ `source_${i}` }
+									type="source"
+									className={ styles.nodeHandle }
+									style={ {
+										zIndex: activeNode === null ? 100 : -1,
+									} }
+									position={ i }
+									isConnectable={ isConnectable }
+								/>
+							))
+						}
+						{
+							position.map(i => (
+								<Handle
+									key={ `target_${i}` }
+									type="target"
+									className={ styles.nodeHandle }
+									style={ {
+										zIndex: (!props.id && activeNode !== props.id) ? 100 : -1
+									} }
+									position={ i }
+									isConnectable={ isConnectable }
+								/>
+							))
+						}
 						<span className={ styles.nodeText }>NodeC</span>
 					</>
 				)

diff --git a/src/views/DemoA.tsx b/src/views/DemoA.tsx
@@ -10,7 +10,7 @@ import ReactFlow, {
 	useNodes,
 	useStore,
 	useReactFlow,
-	useOnSelectionChange
+	useOnSelectionChange, Position,
 } from "reactflow"
 import styles from "./DemoA.module.less"
 import CustomNode from "./components/CustomNode"
@@ -24,6 +24,7 @@ import FlowManager from "@/FlowManager"
 import { Flow } from "@/types"
 import FlowDataProvider from "../context/FlowData"
 import useSetActiveNode from "../hooks/useSetActiveNode"
+import { ConnectionLineType } from "@reactflow/core"
 
 const initialNodes = [
 	{id: "1", position: {x: 0, y: 0}, data: {label: "1"}},
@@ -68,6 +69,12 @@ function DemoA() {
 	const onConnect = useCallback(
 		(connection: Connection) => {
 			// 通过connection处理两个节点的handle方向
+			const sourcePosition = document.querySelector(`[data-id="${connection.source}"]`)?.getBoundingClientRect()
+			const targetPosition = document.querySelector(`[data-id="${connection.target}"]`)?.getBoundingClientRect()
+
+			// connection.sourceHandle = `source_${Position.Right}`
+			// connection.targetHandle = `target_${Position.Top}`
+			console.log("---", connection, sourcePosition?.left, targetPosition?.left)
 			setEdges((eds) => addEdge(connection, eds))
 		},
 		[setEdges],
@@ -116,6 +123,11 @@ function DemoA() {
 		return FlowManager.getAllNodes()
 	}, [])
 
+	const isValidConnection = useCallback((connection: Connection): boolean => {
+		return !!(connection.source && connection.target && connection.source !== connection.target);
+
+	}, [])
+
 	return (
 		<div className={ styles.layout }>
 			<div className={ styles.layoutSideMenu }>
@@ -124,7 +136,7 @@ function DemoA() {
 						nodesComponent.map(node => {
 							const NodeItem = node.component
 							return (
-								<div className={ clsx(styles.item, "dndnode", "input") } key={ node.type }>
+								<div className={ clsx(styles.item) } key={ node.type }>
 									<div className={ styles.itemIcon }
 									     onDragStart={ (event) => onDragStart(event, node.type) } draggable>
 										<NodeItem isMenu/>
@@ -150,6 +162,9 @@ function DemoA() {
 					onConnect={ onConnect }
 					nodeTypes={ nodeTypes }
 					edgeTypes={ edgeTypes }
+					connectionRadius={6}
+					isValidConnection={isValidConnection}
+					connectionLineType={ ConnectionLineType.Straight }
 				>
 					<Controls/>
 					<MiniMap/>