From 48397baa55ddec2245c34444220741638388af5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=98=94=E6=A2=A6?= Date: Tue, 24 Dec 2024 16:52:46 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E8=8A=82=E7=82=B9?= =?UTF-8?q?=E5=90=8D=E7=A7=B0=E6=94=B9=E4=B8=BAtitle+4=E4=BD=8D=E9=9A=8F?= =?UTF-8?q?=E6=9C=BA=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/x-flow/src/XFlow.tsx | 14 +++++-- .../src/components/CustomEdge/index.tsx | 39 +++++++++++++------ .../src/components/CustomNode/index.tsx | 10 +++-- packages/x-flow/src/utils/index.ts | 1 + 4 files changed, 47 insertions(+), 17 deletions(-) diff --git a/packages/x-flow/src/XFlow.tsx b/packages/x-flow/src/XFlow.tsx index 8d15fb39c..95426ac0e 100644 --- a/packages/x-flow/src/XFlow.tsx +++ b/packages/x-flow/src/XFlow.tsx @@ -10,7 +10,7 @@ import { useEventListener, useMemoizedFn } from 'ahooks'; import produce, { setAutoFreeze } from 'immer'; import { debounce } from 'lodash'; import type { FC } from 'react'; -import React, { memo, useEffect, useMemo, useRef, useState } from 'react'; +import React, { memo, useContext, useEffect, useMemo, useRef, useState } from 'react'; import CandidateNode from './components/CandidateNode'; import CustomEdge from './components/CustomEdge'; import PanelContainer from './components/PanelContainer'; @@ -21,13 +21,14 @@ import { useStore, useStoreApi } from './hooks/useStore'; import Operator from './operator'; import FlowProps from './types'; -import { uuid } from './utils'; +import { uuid, uuid4 } from './utils'; import autoLayoutNodes from './utils/autoLayoutNodes'; import { shallow } from 'zustand/shallow'; import NodeEditor from './components/NodeEditor'; import './index.less'; import { useTemporalStore } from './hooks/useTemporalStore'; +import { ConfigContext } from './models/context'; const CustomNode = memo(CustomNodeComponent); const edgeTypes = { buttonedge: memo(CustomEdge) }; @@ -73,6 +74,8 @@ const XFlow: FC = memo(() => { ); const { record } = useTemporalStore(); const [activeNode, setActiveNode] = useState(null); + const { settingMap } = useContext(ConfigContext); + useEffect(() => { zoomTo(0.8); setAutoFreeze(false); @@ -81,6 +84,7 @@ const XFlow: FC = memo(() => { }; }, []); + useEventListener('keydown', e => { if ((e.key === 'd' || e.key === 'D') && (e.ctrlKey || e.metaKey)) e.preventDefault(); @@ -123,10 +127,14 @@ const XFlow: FC = memo(() => { // 新增节点 const handleAddNode = (data: any) => { + const title = settingMap[data?._nodeType]?.title || data?._nodeType; const newNode = { id: uuid(), type: 'custom', - data, + data: { + ...data, + title: `${title}_${uuid4()}` + }, position: { x: 0, y: 0, diff --git a/packages/x-flow/src/components/CustomEdge/index.tsx b/packages/x-flow/src/components/CustomEdge/index.tsx index 704c868c1..9761e21f9 100644 --- a/packages/x-flow/src/components/CustomEdge/index.tsx +++ b/packages/x-flow/src/components/CustomEdge/index.tsx @@ -9,14 +9,23 @@ import produce from 'immer'; import React, { memo, useContext, useState } from 'react'; import { shallow } from 'zustand/shallow'; import { useStore } from '../../hooks/useStore'; -import { uuid } from '../../utils'; +import { ConfigContext } from '../../models/context'; +import { uuid, uuid4 } from '../../utils'; import NodeSelectPopover from '../NodesPopover'; import './index.less'; -import { ConfigContext } from '../../models/context'; export default memo((edge: any) => { - const { id, selected, sourceX, sourceY, targetX, targetY, source, target, sourceHandleId } = - edge; + const { + id, + selected, + sourceX, + sourceY, + targetX, + targetY, + source, + target, + sourceHandleId, + } = edge; const reactflow = useReactFlow(); const [isHovered, setIsHovered] = useState(false); @@ -27,7 +36,7 @@ export default memo((edge: any) => { targetY, }); - const { globalConfig } = useContext(ConfigContext); + const { globalConfig, settingMap } = useContext(ConfigContext); const hideEdgeAddBtn = globalConfig?.edge?.hideEdgeAddBtn ?? false; const { @@ -49,7 +58,7 @@ export default memo((edge: any) => { onEdgesChange: state.onEdgesChange, }), shallow - ); + ); const handleAddNode = (data: any) => { const { screenToFlowPosition } = reactflow; @@ -59,11 +68,16 @@ export default memo((edge: any) => { }); const targetId = uuid(); + const title = settingMap[data?._nodeType]?.title || data?._nodeType; + const newNodes = produce(nodes, (draft: any) => { draft.push({ id: targetId, type: 'custom', - data, + data: { + ...data, + title: `${title}_${uuid4()}`, + }, position: { x, y }, }); }); @@ -75,7 +89,7 @@ export default memo((edge: any) => { id: uuid(), source, target: targetId, - ...sourceHandleId && { sourceHandle: sourceHandleId } + ...(sourceHandleId && { sourceHandle: sourceHandleId }), }, { id: uuid(), @@ -127,13 +141,16 @@ export default memo((edge: any) => { > - { - !hideEdgeAddBtn && + {!hideEdgeAddBtn && ( +
- } + )} diff --git a/packages/x-flow/src/components/CustomNode/index.tsx b/packages/x-flow/src/components/CustomNode/index.tsx index 28ff77de5..da3ad7486 100644 --- a/packages/x-flow/src/components/CustomNode/index.tsx +++ b/packages/x-flow/src/components/CustomNode/index.tsx @@ -4,7 +4,7 @@ import React, { memo, useContext, useState } from 'react'; import { shallow } from 'zustand/shallow'; import { useStore } from '../../hooks/useStore'; import { ConfigContext } from '../../models/context'; -import { capitalize, uuid } from '../../utils'; +import { capitalize, uuid, uuid4 } from '../../utils'; import './index.less'; import SourceHandle from './sourceHandle'; @@ -28,18 +28,22 @@ export default memo((props: any) => { ); const isSwitchNode = type === 'Switch' || type === 'Parallel'; // 判断是否为条件节点/并行节点 // 增加节点并进行联系 - const handleAddNode = (data: any, sourceHandle?:string) => { + const handleAddNode = (data: any, sourceHandle?: string) => { const { screenToFlowPosition } = reactflow; const { x, y } = screenToFlowPosition({ x: mousePosition.pageX + 100, y: mousePosition.pageY + 100, }); const targetId = uuid(); + const title = settingMap[data?._nodeType]?.title || data?._nodeType; const newNodes = { id: targetId, type: 'custom', - data, + data: { + ...data, + title: `${title}_${uuid4()}` + }, position: { x, y }, }; const newEdges = { diff --git a/packages/x-flow/src/utils/index.ts b/packages/x-flow/src/utils/index.ts index fe11bf380..ade94f1b3 100644 --- a/packages/x-flow/src/utils/index.ts +++ b/packages/x-flow/src/utils/index.ts @@ -1,6 +1,7 @@ import { version as antdVersion } from 'antd'; import { customAlphabet } from 'nanoid'; export const uuid = customAlphabet('0123456789abcdefghijklmnopqrstuvwxyz', 16); +export const uuid4 = customAlphabet('0123456789abcdefghijklmnopqrstuvwxyz', 4); import { isMatch, some, set, get, cloneDeep, has as _has, merge, mergeWith, isUndefined, omitBy } from 'lodash-es';