feat(flow): 添加事件节点列表管理功能(未完成)

src/hooks/useFlowCallbacks.ts

@@ -1187,6 +1187,92 @@ export const useFlowCallbacks = (
     }
     else return {};
   };
+  const handelEventNodeList = (newRevertedData) => {
+    const { appRuntimeData, currentAppData } = store.getState().ideContainer;
+    const current = appRuntimeData[currentAppData.id];
+    const deleteEventSendNodeList = [];
+    const deleteEventlisteneList = [];
+    // 处理流程接口后的数据
+    const currentEventSendNodeList = current.eventSendNodeList;
+    const currentEventlisteneList = current.eventlisteneList;
+    // 画布数据
+    const nodeEntries: [string, any][] = Object.entries(newRevertedData);
+
+    // 分类事件节点
+    const eventSendNodes = [];
+    const eventListenerNodes = [];
+
+    // 从nodeEntries中提取事件节点
+    nodeEntries.forEach(([nodeId, nodeConfig]) => {
+      if (nodeConfig.component?.type === 'EVENTSEND') {
+        eventSendNodes.push({ nodeId, ...nodeConfig });
+      }
+      else if (nodeConfig.component?.type === 'EVENTLISTENE') {
+        eventListenerNodes.push({ nodeId, ...nodeConfig });
+      }
+    });
+
+    // 处理EVENTSEND节点
+    // 如果currentEventSendNodeList中有而nodeEntries中没有，则加入删除列表
+    currentEventSendNodeList.forEach((eventNode) => {
+      const nodeId = eventNode;
+      const nodeInCanvas = eventSendNodes.find(node => node.nodeId === nodeId);
+
+      if (!nodeInCanvas) {
+        // 画布数据中没有该节点，加入删除列表
+        deleteEventSendNodeList.push(eventNode);
+      }
+      else {
+        // 节点存在于画布中，比较时间戳
+        // nodeId格式为"节点类型-时间戳"
+        const canvasNode = nodeInCanvas.nodeId.split('-');
+        const canvasTimestamp = canvasNode[canvasNode.length - 1];
+
+        const interfaceNode = nodeId.split('-');
+        const interfaceTimestamp = interfaceNode[interfaceNode.length - 1];
+
+        // 如果画布数据的时间戳是最新的，那就是新增的事件节点，不需要添加到deleteList中
+        // 反之需要进一步判断
+        if (canvasTimestamp < interfaceTimestamp) {
+          // 画布节点时间戳较旧，需要进一步判断
+          // 这里留空，等待后续实现
+        }
+      }
+    });
+
+    // 处理EVENTLISTENE节点
+    // 如果currentEventlisteneList中有而nodeEntries中没有，则加入删除列表
+    currentEventlisteneList.forEach((eventNode) => {
+      const nodeId = eventNode;
+      const nodeInCanvas = eventListenerNodes.find(node => node.nodeId === nodeId);
+
+      if (!nodeInCanvas) {
+        // 画布数据中没有该节点，加入删除列表
+        deleteEventlisteneList.push(eventNode);
+      }
+      else {
+        // 节点存在于画布中，比较时间戳
+        // nodeId格式为"节点类型-时间戳"
+        const canvasNode = nodeInCanvas.nodeId.split('-');
+        const canvasTimestamp = canvasNode[canvasNode.length - 1];
+
+        const interfaceNode = nodeId.split('-');
+        const interfaceTimestamp = interfaceNode[interfaceNode.length - 1];
+
+        // 如果画布数据的时间戳是最新的，那就是新增的事件节点，不需要添加到deleteList中
+        // 反之需要进一步判断
+        if (canvasTimestamp < interfaceTimestamp) {
+          // 画布节点时间戳较旧，需要进一步判断
+          // 这里留空，等待后续实现
+        }
+      }
+    });
+
+    return {
+      deleteEventSendNodeList,
+      deleteEventlisteneList
+    };
+  };
   const saveFlowDataToServer = useCallback(async () => {
     if (useDefault) {
       try {
@@ -1208,6 +1294,9 @@ export const useFlowCallbacks = (
         const upDatePublishCB = await upDatePublish(revertedData.nodeConfigs);
         const newRevertedData = reverseConvertFlowData(nodes, edges, upDatePublishCB);
         const { flowData, currentAppData, info } = store.getState().ideContainer;
+        const { deleteEventSendNodeList, deleteEventlisteneList } = handelEventNodeList(newRevertedData);
+        // console.log(deleteEventSendNodeList, deleteEventlisteneList);
+        // return;
         let params = {};
         // 更新复合组件/子流程
         if (currentAppData.key.includes('sub')) {

src/store/ideContainer.ts

@@ -21,6 +21,8 @@ interface IDEContainerState {
     isRunning: boolean;
     logs: any[];
     runId: string;
+    eventSendNodeList: string[],
+    eventlisteneList: string[]
   }>;
 }
 
@@ -100,7 +102,9 @@ const ideContainerSlice = createSlice({
             nodeStatusMap: {},
             isRunning: false,
             logs: [],
-            runId: ''
+            runId: '',
+            eventSendNodeList: [],
+            eventlisteneList: []
           };
         }
         state.appRuntimeData[appId].nodeStatusMap[nodeId] = status;
@@ -128,7 +132,9 @@ const ideContainerSlice = createSlice({
             nodeStatusMap: {},
             isRunning: false,
             logs: [],
-            runId: ''
+            runId: '',
+            eventSendNodeList: [],
+            eventlisteneList: []
           };
         }
         state.appRuntimeData[appId].isRunning = payload;
@@ -142,11 +148,28 @@ const ideContainerSlice = createSlice({
           nodeStatusMap: {},
           isRunning: false,
           logs: [],
-          runId: ''
+          runId: '',
+          eventSendNodeList: [],
+          eventlisteneList: []
         };
       }
       state.appRuntimeData[appId].runId = payload;
     },
+    // 更新事件节点列表
+    updateEventNodeList: (state, { payload }) => {
+      const appId = state.currentAppData?.id;
+      if (!state.appRuntimeData[appId]) {
+        state.appRuntimeData[appId] = {
+          nodeStatusMap: {},
+          isRunning: false,
+          logs: [],
+          runId: '',
+          eventSendNodeList: [],
+          eventlisteneList: []
+        };
+      }
+      state.appRuntimeData[appId] = { ...state.appRuntimeData[appId], ...payload };
+    },
     // 添加运行日志
     addRuntimeLog: (state, { payload }) => {
       const { log, appId } = payload;
@@ -155,7 +178,9 @@ const ideContainerSlice = createSlice({
           nodeStatusMap: {},
           isRunning: false,
           logs: [],
-          runId: ''
+          runId: '',
+          eventSendNodeList: [],
+          eventlisteneList: []
         };
       }
       state.appRuntimeData[appId].logs.push(log);
@@ -187,6 +212,7 @@ export const {
   resetNodeStatus,
   updateIsRunning,
   updateRuntimeId,
+  updateEventNodeList,
   addRuntimeLog,
   clearRuntimeLogs
 } = ideContainerSlice.actions;

src/utils/convertFlowData.ts

@@ -7,6 +7,8 @@ import BasicNode from '@/components/FlowEditor/node/basicNode/BasicNode';
 import ImageNode from '@/components/FlowEditor/node/imageNode/ImageNode';
 import CodeNode from '@/components/FlowEditor/node/codeNode/CodeNode';
 import RestNode from '@/components/FlowEditor/node/restNode/RestNode';
+import { updateEventNodeList } from '@/store/ideContainer';
+
 
 /**
  * 将提供的数据结构转换为适用于 flow editor 的 nodes 和 edges
@@ -17,6 +19,8 @@ import RestNode from '@/components/FlowEditor/node/restNode/RestNode';
 export const convertFlowData = (flowData: any, useDefault = true) => {
   const nodes: any[] = [];
   const edges: any[] = [];
+  const eventSendNodeList = [];
+  const eventlisteneList = [];
   const currentProjectCompData = getCurrentProjectStoreData();
 
   if (!flowData || Object.keys(flowData).length === 0) {
@@ -70,6 +74,15 @@ export const convertFlowData = (flowData: any, useDefault = true) => {
     const nodeId: string = entry[0];
     const nodeConfig: any = entry[1];
 
+    // 更新应用中的事件节点列表
+    if (nodeId.includes('EVENTLISTENE')) eventlisteneList.push(nodeId);
+    else if (nodeId.includes('EVENTSEND')) eventSendNodeList.push(nodeId);
+
+    if (eventlisteneList.length > 0 || eventSendNodeList.length > 0) store.dispatch(updateEventNodeList({
+      eventSendNodeList,
+      eventlisteneList
+    }));
+
     // 确定节点类型
     let nodeType = 'BASIC';
     if (nodeId === 'start') {