From c9d7a34690243e05894da2c1783fe1826cddb267 Mon Sep 17 00:00:00 2001 From: balibabu Date: Wed, 21 Aug 2024 12:47:24 +0800 Subject: [PATCH] feat: Update Switch form data #1739 (#2029) ### What problem does this PR solve? feat: Update Switch form data #1739 ### Type of change - [x] New Feature (non-breaking change which adds functionality) --- .../flow/canvas/node/categorize-handle.tsx | 13 ++-- .../flow/canvas/node/categorize-node.tsx | 10 ++- web/src/pages/flow/constant.tsx | 2 + web/src/pages/flow/hooks.ts | 12 ++++ web/src/pages/flow/store.ts | 70 ++++++++++++------- web/src/pages/flow/switch-form/index.tsx | 9 +-- 6 files changed, 74 insertions(+), 42 deletions(-) diff --git a/web/src/pages/flow/canvas/node/categorize-handle.tsx b/web/src/pages/flow/canvas/node/categorize-handle.tsx index 987236bca..8c028825c 100644 --- a/web/src/pages/flow/canvas/node/categorize-handle.tsx +++ b/web/src/pages/flow/canvas/node/categorize-handle.tsx @@ -1,6 +1,6 @@ import { Handle, Position } from 'reactflow'; -// import { v4 as uuid } from 'uuid'; +import React from 'react'; import styles from './index.less'; const DEFAULT_HANDLE_STYLE = { @@ -10,20 +10,19 @@ const DEFAULT_HANDLE_STYLE = { fontSize: 8, }; -interface IProps { +interface IProps extends React.PropsWithChildren { top: number; right: number; - text: string; + id: string; idx?: number; } -const CategorizeHandle = ({ top, right, text, idx }: IProps) => { +const CategorizeHandle = ({ top, right, id, children }: IProps) => { return ( { color: 'black', }} > - {text} + {children || id} ); }; diff --git a/web/src/pages/flow/canvas/node/categorize-node.tsx b/web/src/pages/flow/canvas/node/categorize-node.tsx index 4b3240563..fcdace773 100644 --- a/web/src/pages/flow/canvas/node/categorize-node.tsx +++ b/web/src/pages/flow/canvas/node/categorize-node.tsx @@ -3,7 +3,7 @@ import { Flex } from 'antd'; import classNames from 'classnames'; import lowerFirst from 'lodash/lowerFirst'; import { Handle, NodeProps, Position } from 'reactflow'; -import { Operator, operatorMap } from '../../constant'; +import { Operator, SwitchElseTo, operatorMap } from '../../constant'; import { NodeData } from '../../interface'; import OperatorIcon from '../../operator-icon'; import CategorizeHandle from './categorize-handle'; @@ -16,6 +16,7 @@ export function CategorizeNode({ id, data, selected }: NodeProps) { const style = operatorMap[data.label as Operator]; const { t } = useTranslate('flow'); const { positions } = useBuildCategorizeHandlePositions({ data, id }); + const operatorName = data.label; return ( @@ -49,13 +50,18 @@ export function CategorizeNode({ id, data, selected }: NodeProps) { className={styles.handle} id={'c'} > + {operatorName === Operator.Switch && ( + + To + + )} {positions.map((position, idx) => { return ( ); diff --git a/web/src/pages/flow/constant.tsx b/web/src/pages/flow/constant.tsx index 04a92fb6b..a975a538b 100644 --- a/web/src/pages/flow/constant.tsx +++ b/web/src/pages/flow/constant.tsx @@ -2633,3 +2633,5 @@ export const ExeSQLOptions = ['mysql', 'postgresql', 'mariadb'].map((x) => ({ label: upperFirst(x), value: x, })); + +export const SwitchElseTo = 'end_cpn_id'; diff --git a/web/src/pages/flow/hooks.ts b/web/src/pages/flow/hooks.ts index 500483276..7132fa8b3 100644 --- a/web/src/pages/flow/hooks.ts +++ b/web/src/pages/flow/hooks.ts @@ -30,6 +30,7 @@ import { NodeMap, Operator, RestrictedUpstreamMap, + SwitchElseTo, initialArXivValues, initialBaiduFanyiValues, initialBaiduValues, @@ -519,6 +520,17 @@ export const useWatchNodeFormDataChange = () => { return pre; }, []); + // Splice the else condition of the conditional judgment to the edge list + const elseTo = form[SwitchElseTo]; + if (elseTo) { + downstreamEdges.push({ + id: uuid(), + source: nodeId, + target: elseTo, + sourceHandle: SwitchElseTo, + }); + } + setEdgesByNodeId(nodeId, downstreamEdges); }, [setEdgesByNodeId], diff --git a/web/src/pages/flow/store.ts b/web/src/pages/flow/store.ts index 983e3d405..14a0ca812 100644 --- a/web/src/pages/flow/store.ts +++ b/web/src/pages/flow/store.ts @@ -21,7 +21,7 @@ import { import { create } from 'zustand'; import { devtools } from 'zustand/middleware'; import { immer } from 'zustand/middleware/immer'; -import { Operator } from './constant'; +import { Operator, SwitchElseTo } from './constant'; import { NodeData } from './interface'; import { getOperatorIndex, isEdgeEqual } from './utils'; @@ -37,13 +37,22 @@ export type RFState = { setNodes: (nodes: Node[]) => void; setEdges: (edges: Edge[]) => void; setEdgesByNodeId: (nodeId: string, edges: Edge[]) => void; - updateNodeForm: (nodeId: string, values: any, path?: string[]) => void; + updateNodeForm: ( + nodeId: string, + values: any, + path?: (string | number)[], + ) => void; onSelectionChange: OnSelectionChangeFunc; addNode: (nodes: Node) => void; getNode: (id?: string | null) => Node | undefined; addEdge: (connection: Connection) => void; getEdge: (id: string) => Edge | undefined; updateFormDataOnConnect: (connection: Connection) => void; + updateSwitchFormData: ( + source: string, + sourceHandle?: string | null, + target?: string | null, + ) => void; deletePreviousEdgeOfClassificationNode: (connection: Connection) => void; duplicateNode: (id: string) => void; deleteEdge: () => void; @@ -132,8 +141,6 @@ const useGraphStore = create()( if (isDifferent) { // other operator's edges const irrelevantEdges = edges.filter((x) => x.source !== nodeId); - // the abandoned edges - const selfAbandonedEdges = []; // the added downstream edges const selfAddedDownstreamEdges = differenceWith( currentDownstreamEdges, @@ -168,7 +175,8 @@ const useGraphStore = create()( return get().edges.find((x) => x.id === id); }, updateFormDataOnConnect: (connection: Connection) => { - const { getOperatorTypeFromId, updateNodeForm } = get(); + const { getOperatorTypeFromId, updateNodeForm, updateSwitchFormData } = + get(); const { source, target, sourceHandle } = connection; const operatorType = getOperatorTypeFromId(source); if (source) { @@ -185,16 +193,7 @@ const useGraphStore = create()( ]); break; case Operator.Switch: { - if (sourceHandle) { - const operatorIndex = getOperatorIndex(sourceHandle); - if (operatorIndex) { - updateNodeForm(source, target, [ - 'conditions', - operatorIndex, - 'to', - ]); - } - } + updateSwitchFormData(source, sourceHandle, target); break; } default: @@ -253,7 +252,12 @@ const useGraphStore = create()( }); }, deleteEdgeById: (id: string) => { - const { edges, updateNodeForm, getOperatorTypeFromId } = get(); + const { + edges, + updateNodeForm, + getOperatorTypeFromId, + updateSwitchFormData, + } = get(); const currentEdge = edges.find((x) => x.id === id); if (currentEdge) { @@ -275,16 +279,7 @@ const useGraphStore = create()( ]); break; case Operator.Switch: { - if (sourceHandle) { - const operatorIndex = getOperatorIndex(sourceHandle); - if (operatorIndex) { - updateNodeForm(source, undefined, [ - 'conditions', - operatorIndex, - 'to', - ]); - } - } + updateSwitchFormData(source, sourceHandle, undefined); break; } default: @@ -320,7 +315,11 @@ const useGraphStore = create()( findNodeByName: (name: Operator) => { return get().nodes.find((x) => x.data.label === name); }, - updateNodeForm: (nodeId: string, values: any, path: string[] = []) => { + updateNodeForm: ( + nodeId: string, + values: any, + path: (string | number)[] = [], + ) => { set({ nodes: get().nodes.map((node) => { if (node.id === nodeId) { @@ -343,6 +342,23 @@ const useGraphStore = create()( }), }); }, + updateSwitchFormData: (source, sourceHandle, target) => { + const { updateNodeForm } = get(); + if (sourceHandle) { + if (sourceHandle === SwitchElseTo) { + updateNodeForm(source, target, [SwitchElseTo]); + } else { + const operatorIndex = getOperatorIndex(sourceHandle); + if (operatorIndex) { + updateNodeForm(source, target, [ + 'conditions', + Number(operatorIndex) - 1, // The index is the conditions form index + 'to', + ]); + } + } + } + }, updateMutableNodeFormItem: (id: string, field: string, value: any) => { const { nodes } = get(); const idx = nodes.findIndex((x) => x.id === id); diff --git a/web/src/pages/flow/switch-form/index.tsx b/web/src/pages/flow/switch-form/index.tsx index 3cd23992f..cb1840151 100644 --- a/web/src/pages/flow/switch-form/index.tsx +++ b/web/src/pages/flow/switch-form/index.tsx @@ -1,7 +1,7 @@ import { CloseOutlined } from '@ant-design/icons'; import { Button, Card, Form, Input, Select, Typography } from 'antd'; import { useTranslation } from 'react-i18next'; -import { Operator } from '../constant'; +import { Operator, SwitchElseTo } from '../constant'; import { useBuildFormSelectOptions } from '../form-hooks'; import { IOperatorForm, ISwitchForm } from '../interface'; import { getOtherFieldValues } from '../utils'; @@ -38,15 +38,12 @@ const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => { initialValues={{ conditions: [{}] }} onValuesChange={onValuesChange} > - + - {(fields, { add, remove }) => (
@@ -74,7 +71,7 @@ const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => {