fxi: 调整连接线对应source节点状态，根据节点连接规则处理节点间链接判断

kampiu · Jan 16, 2024 · f735ad9 · f735ad9
1 parent c2f0e8f
commit f735ad9
Show file tree

Hide file tree

Showing 22 changed files with 444 additions and 39 deletions.
diff --git a/src/FlowManager.ts b/src/FlowManager.ts
@@ -10,8 +10,8 @@ type EdgeType = string
 
 /** 节点链接规则 */
 interface INodeRule {
-	sourceNodeType: NodeType
-	targetNodeType: NodeType
+	nodeType: NodeType
+	maxCount?: number
 }
 
 /** 线段类型 */

diff --git a/src/Nodes/NodeA/NodeA.module.less b/src/Nodes/NodeA/NodeA.module.less
@@ -1,7 +1,10 @@
 .node {
 	width: 40px;
 	height: 40px;
-	background-color: pink;
+	background-color: #FFFFFF;
+	border: 1px solid #DDDDDD;
+	border-radius: 4px;
+	user-select: none;
 	position: relative;
 
 	&:hover {
@@ -44,4 +47,13 @@
 		border-radius: 0;
 		transition: all linear 0.1s;
 	}
+
+	&-wrapper {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 18px;
+	}
 }
diff --git a/src/Nodes/NodeA/NodeA.tsx b/src/Nodes/NodeA/NodeA.tsx
@@ -5,6 +5,7 @@ import type { NodeProps } from "@reactflow/core/dist/esm/types/nodes"
 import { useFlowDataSelector } from "@/context/FlowData"
 import hotkeys from "hotkeys-js"
 import withMenu from "../withMenu"
+import Icons from "../../components/Icons"
 
 interface NodeAProps extends NodeProps {
 	isMenu?: boolean
@@ -34,6 +35,9 @@ const NodeA = forwardRef<NodeAInstance, NodeAProps>((props, ref) => {
 
 	return (
 		<div className={ styles.node }>
+			<div className={ styles.nodeWrapper }>
+				<Icons.DataDisplay />
+			</div>
 			{
 				!isMenu && (
 					<>
@@ -55,7 +59,9 @@ const NodeA = forwardRef<NodeAInstance, NodeAProps>((props, ref) => {
 							position={ Position.Top }
 							isConnectable={ isConnectable }
 						/>
-						<span className={ styles.nodeText }>NodeA</span>
+						<span className={ styles.nodeText }>
+							NodeA
+						</span>
 					</>
 				)
 			}

diff --git a/src/Nodes/NodeA/index.ts b/src/Nodes/NodeA/index.ts
@@ -4,6 +4,14 @@ import { Flow } from "../../types"
 import generateContextMenu from "./generateContextMenu"
 import { ComponentType } from "react"
 
+/**
+ * 节点链接规则
+ * 1. 根据类型，单个类型作为一个条件。
+ * 2. 根据链接数量：可区分针对所有已链接的数量，或单一类型的饿链接数量。
+ * 3. 根据节点配置：节点数据配置中的某个字段作为条件，可触发链接哪些类型的节点，或对应节点类型的数量。
+ * 4. 根据节点输出/输入：约束当前节点的输出，至于输入由source节点负责。
+ */
+
 /** 节点注册方法 */
 export const install = () => {
 	FlowManager.registerNode({
@@ -13,8 +21,7 @@ export const install = () => {
 		generateContextMenu,
 		rules: [
 			{
-				sourceNodeType: "",
-				targetNodeType: ""
+				nodeType: "NodeB"
 			}
 		]
 	})

diff --git a/src/Nodes/NodeB/NodeB.module.less b/src/Nodes/NodeB/NodeB.module.less
@@ -1,7 +1,10 @@
 .node {
 	width: 40px;
 	height: 40px;
-	background-color: orange;
+	background-color: #FFFFFF;
+	border: 1px solid #DDDDDD;
+	border-radius: 4px;
+	user-select: none;
 	position: relative;
 
 	&:hover {
@@ -44,4 +47,13 @@
 		border-radius: 0;
 		transition: all linear 0.1s;
 	}
+
+	&-wrapper {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 18px;
+	}
 }
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 Icons from "../../components/Icons"
 
 interface NodeBProps extends NodeProps {
 	isMenu?: boolean
@@ -24,6 +25,9 @@ const NodeB = forwardRef<NodeBInstance, NodeBProps>((props, ref) => {
 
 	return (
 		<div className={ styles.node }>
+			<div className={styles.nodeWrapper}>
+				<Icons.ReverseOperationOut />
+			</div>
 			{
 				!isMenu && (
 					<>

diff --git a/src/Nodes/NodeC/NodeC.module.less b/src/Nodes/NodeC/NodeC.module.less
@@ -1,7 +1,10 @@
 .node {
 	width: 40px;
 	height: 40px;
-	background-color: deepskyblue;
+	background-color: #FFFFFF;
+	border: 1px solid #DDDDDD;
+	border-radius: 4px;
+	user-select: none;
 	position: relative;
 
 	&:hover {
@@ -44,4 +47,13 @@
 		border-radius: 0;
 		transition: all linear 0.1s;
 	}
+
+	&-wrapper {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 18px;
+	}
 }
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 Icons from "@/components/Icons"
 
 interface NodeCProps extends NodeProps {
 	isMenu?: boolean
@@ -24,6 +25,9 @@ const NodeC = forwardRef<NodeCInstance, NodeCProps>((props, ref) => {
 
 	return (
 		<div className={ styles.node }>
+			<div className={ styles.nodeWrapper }>
+				<Icons.ReverseOperationIn/>
+			</div>
 			{
 				!isMenu && (
 					<>

diff --git a/src/components/FloatingConnectionLine.tsx b/src/components/FloatingConnectionLine.tsx
@@ -1,14 +1,24 @@
 import React from "react"
-import { getBezierPath } from "reactflow"
+import { getBezierPath, getSimpleBezierPath } from "reactflow"
 
 import { getEdgeParams } from "./utils"
 import { ConnectionLineComponentProps } from "@reactflow/core"
 
-function FloatingConnectionLine({toX, toY, fromPosition, toPosition, fromNode}: ConnectionLineComponentProps) {
+function FloatingConnectionLine({
+	                                toX,
+	                                toY,
+	                                fromPosition,
+	                                toPosition,
+	                                fromNode,
+	                                connectionStatus
+                                }: ConnectionLineComponentProps) {
 	if (!fromNode) {
 		return null
 	}
 
+	// 是否对目标链接节点存在有效链接
+	const invalid = connectionStatus === "invalid"
+
 	const targetNode = {
 		id: "connection-target",
 		width: 40,
@@ -18,7 +28,16 @@ function FloatingConnectionLine({toX, toY, fromPosition, toPosition, fromNode}:
 	}
 
 	const {sx, sy} = getEdgeParams(fromNode, targetNode as any)
-	const [edgePath] = getBezierPath({
+	// const [edgePath] = getBezierPath({
+	// 	sourceX: sx,
+	// 	sourceY: sy,
+	// 	sourcePosition: fromPosition,
+	// 	targetPosition: toPosition,
+	// 	targetX: toX,
+	// 	targetY: toY
+	// })
+
+	const [edgePath] = getSimpleBezierPath({
 		sourceX: sx,
 		sourceY: sy,
 		sourcePosition: fromPosition,
@@ -27,13 +46,14 @@ function FloatingConnectionLine({toX, toY, fromPosition, toPosition, fromNode}:
 		targetY: toY
 	})
 
-	console.log("- hover -", edgePath, fromNode, targetNode)
+	const color = connectionStatus === "invalid" ? "red" : (connectionStatus === "valid" ? "green" : "rgba(107,112,117, 1)")
+
 	return (
 		<g>
 			<path
 				fill="none"
-				stroke="red"
-				strokeWidth={ 1.5 }
+				stroke={ color }
+				strokeWidth={ connectionStatus ? 2 : 1 }
 				className="animated"
 				d={ edgePath }
 			/>
@@ -42,7 +62,7 @@ function FloatingConnectionLine({toX, toY, fromPosition, toPosition, fromNode}:
 				cy={ toY }
 				fill="#fff"
 				r={ 3 }
-				stroke="red"
+				stroke={ color }
 				strokeWidth={ 1.5 }
 			/>
 		</g>

diff --git a/src/components/FloatingEdge.tsx b/src/components/FloatingEdge.tsx
@@ -1,13 +1,20 @@
 import { useCallback } from "react"
-import { useStore, getBezierPath } from "reactflow"
+import { useStore, getBezierPath, getStraightPath } from "reactflow"
 
 import { getEdgeParams } from "./utils.js"
 import type { EdgeProps } from "@reactflow/core"
 
-function FloatingEdge({id, source, target, markerEnd, style}: EdgeProps) {
+/**
+ * 链接点段可根据source、target从数据层获取节点的数据，通过数据动态更改线段当前的状态、颜色、粗细等
+ */
+
+
+function FloatingEdge(props: EdgeProps) {
+	const {id, source, target, markerEnd, style} = props
 	const sourceNode = useStore(useCallback((store) => store.nodeInternals.get(source), [source]))
 	const targetNode = useStore(useCallback((store) => store.nodeInternals.get(target), [target]))
 
+	console.log("-- props -->", props)
 	if (!sourceNode || !targetNode) {
 		return null
 	}
@@ -23,19 +30,15 @@ function FloatingEdge({id, source, target, markerEnd, style}: EdgeProps) {
 		targetY: ty,
 	})
 
-	console.log("- fill -", edgePath, sourceNode, targetNode)
 	return (
-		<g>
-			<path
-				fill="none"
-				stroke="red"
-				id={ id }
-				className="react-flow__edge-path"
-				d={ edgePath }
-				markerEnd={ markerEnd }
-				style={ style }
-			/>
-		</g>
+		<path
+			fill="none"
+			stroke="red"
+			id={ id }
+			d={ edgePath }
+			markerEnd={ markerEnd }
+			style={ style }
+		/>
 	)
 }
 

diff --git a/src/components/Icons/icons/Analysis.tsx b/src/components/Icons/icons/Analysis.tsx
@@ -0,0 +1,18 @@
+import React from "react"
+
+function Analysis() {
+	return (
+		<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path d="M44 5H3.99998V17H44V5Z" fill="#2F88FF" stroke="#212121" stroke-width="3" stroke-linejoin="round"/>
+			<path d="M3.99998 41.0301L16.1756 28.7293L22.7549 35.0301L30.7982 27L35.2786 31.368" stroke="#212121"
+			      stroke-width="3" stroke-linecap="square" stroke-linejoin="round"/>
+			<path d="M44 16.1719V42.1719" stroke="#212121" stroke-width="3" stroke-linecap="square"/>
+			<path d="M3.99998 16.1719V30.1719" stroke="#212121" stroke-width="3" stroke-linecap="square"/>
+			<path d="M13.0155 43H44" stroke="#212121" stroke-width="3" stroke-linecap="square"/>
+			<path d="M17 11H38" stroke="#FFF" stroke-width="3" stroke-linecap="square"/>
+			<path d="M9.99998 10.9966H11" stroke="#FFF" stroke-width="3" stroke-linecap="square"/>
+		</svg>
+	)
+}
+
+export default Analysis
diff --git a/src/components/Icons/icons/AssemblyLine.tsx b/src/components/Icons/icons/AssemblyLine.tsx
@@ -0,0 +1,18 @@
+import React from "react"
+
+function AssemblyLine() {
+	return (
+		<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<circle cx="16" cy="10" r="4" fill="#2F88FF" stroke="#212121" stroke-width="3"/>
+			<path d="M28 38H13.0004C9.00037 38 6.00037 35.0833 6 31C5.99963 26.9167 9.00037 24 13.0004 24H20"
+			      stroke="#212121" stroke-width="3" stroke-linecap="square" stroke-linejoin="round"/>
+			<path d="M20.0003 24H34.9997C38.9997 24 41.9996 21.0833 42 17C42.0004 12.9167 38.9997 10 34.9997 10H20"
+			      stroke="#212121" stroke-width="3" stroke-linecap="square" stroke-linejoin="round"/>
+			<path d="M6 10L12 10" stroke="#212121" stroke-width="3" stroke-linecap="square" stroke-linejoin="round"/>
+			<path d="M36 38H42" stroke="#212121" stroke-width="3" stroke-linecap="square" stroke-linejoin="round"/>
+			<circle cx="32" cy="38" r="4" fill="#2F88FF" stroke="#212121" stroke-width="3"/>
+		</svg>
+	)
+}
+
+export default AssemblyLine
diff --git a/src/components/Icons/icons/CardTwo.tsx b/src/components/Icons/icons/CardTwo.tsx
@@ -0,0 +1,13 @@
+import React from "react"
+
+function CardTwo() {
+	return (
+		<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path d="M28 12V4L8 14V42L20 36" stroke="#212121" stroke-width="3" stroke-linejoin="round"/>
+			<path d="M20 16L40 6V34L20 44V16Z" fill="#2F88FF" stroke="#212121" stroke-width="3"
+			      stroke-linejoin="round"/>
+		</svg>
+	)
+}
+
+export default CardTwo
diff --git a/src/components/Icons/icons/CloudStorage.tsx b/src/components/Icons/icons/CloudStorage.tsx
@@ -0,0 +1,25 @@
+import React from "react"
+
+function CloudStorage() {
+	return (
+		<svg width="1em" height="1em" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path d="M44 29H4V42H44V29Z" fill="#2F88FF" stroke="#212121" stroke-width="3" stroke-linejoin="round"/>
+			<path
+				d="M35.5 38C36.8807 38 38 36.8807 38 35.5C38 34.1193 36.8807 33 35.5 33C34.1193 33 33 34.1193 33 35.5C33 36.8807 34.1193 38 35.5 38Z"
+				fill="#FFF"/>
+			<path d="M4 28.9998L9.03837 4.99902H39.0205L44 28.9998" stroke="#212121" stroke-width="3"
+			      stroke-linejoin="round"/>
+			<path
+				d="M19.006 16.0259C16.8635 16.0259 15 17.5124 15 19.5128C15 21.9998 17.0947 22.9998 19.6973 22.9998C20.1437 22.9998 20.5567 22.9998 20.9768 22.9998"
+				stroke="#212121" stroke-width="3" stroke-linecap="square" stroke-linejoin="round"/>
+			<path
+				d="M29.007 16.0259C31.1039 16.0259 33 16.9994 33 19.5128C33 21.9998 30.8902 22.9998 28.2877 22.9998C27.8412 22.9998 27.4013 22.9998 26.9871 22.9998"
+				stroke="#212121" stroke-width="3" stroke-linecap="square" stroke-linejoin="round"/>
+			<path d="M29.0069 16.0261C29.0069 13.0423 27.0231 11 23.9998 11C20.9766 11 19.0059 12.9927 19.0059 16.0261"
+			      stroke="#212121" stroke-width="3" stroke-linecap="square" stroke-linejoin="round"/>
+			<path d="M20 23H28" stroke="#212121" stroke-width="3"/>
+		</svg>
+	)
+}
+
+export default CloudStorage