ngskcloud
/
flow-playform-react
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(ide): 事件相关功能重构新结构数据

Browse Source
master
钟良源 3 months ago
parent ce375ebc15
commit be71426433
5 changed files with 77 additions and 38 deletions
Show Stats Download Patch File Download Diff File

79
src/hooks/useFlowCallbacks.ts
Unescape Escape View File

@ -15,7 +15,7 @@ import { localNodeData } from '@/pages/flowEditor/sideBar/config/localNodeData';
import { useAlignmentGuidelines } from '@/hooks/useAlignmentGuidelines'; import { useAlignmentGuidelines } from '@/hooks/useAlignmentGuidelines';
import LocalNode from '@/components/FlowEditor/node/localNode/LocalNode'; import LocalNode from '@/components/FlowEditor/node/localNode/LocalNode';
import LoopNode from '@/components/FlowEditor/node/loopNode/LoopNode'; import LoopNode from '@/components/FlowEditor/node/loopNode/LoopNode';
import { updateCanvasDataMap, resetNodeStatus, updateIsRunning } from '@/store/ideContainer'; import { updateCanvasDataMap, resetNodeStatus, updateIsRunning, updateEventListOld } from '@/store/ideContainer';
import { import {
validateAllNodes, validateAllNodes,
showValidationErrors, showValidationErrors,
@ -30,10 +30,11 @@ import { projectFlowHandle } from '@/pages/flowEditor/utils/projectFlowHandle';
import { appFLowHandle } from '@/pages/flowEditor/utils/appFlowhandle'; import { appFLowHandle } from '@/pages/flowEditor/utils/appFlowhandle';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
import { runMainFlow } from '@/api/apps'; import { runMainFlow, stopApp } from '@/api/apps';
import store from '@/store'; import store from '@/store';
import { updateAppEvent, updateAppEventChannel, updateAppFlowData } from '@/api/appEvent'; import { updateAppEvent, updateAppEventChannel, updateAppFlowData } from '@/api/appEvent';
import { sleep } from '@/utils/common'; import { sleep } from '@/utils/common';
import { queryEventItemBySceneIdOld } from '@/api/event';
export const useFlowCallbacks = ( export const useFlowCallbacks = (
nodes: Node[], nodes: Node[],
@ -1004,7 +1005,7 @@ export const useFlowCallbacks = (
const emptyEvent = eventList.find(item => item.topic.includes('**empty**')); const emptyEvent = eventList.find(item => item.topic.includes('**empty**'));
newNode.data.component = { newNode.data.component = {
type: nodeType, type: nodeType,
customDef: { eventId: emptyEvent.eventId, name: emptyEvent.name, topic: emptyEvent.topic } customDef: { eventId: emptyEvent?.eventId ?? null, name: emptyEvent.name, topic: emptyEvent.topic }
}; };
} }
// 将未定义的节点动态追加进nodeTypes // 将未定义的节点动态追加进nodeTypes
@ -1080,27 +1081,29 @@ export const useFlowCallbacks = (
// 事件接收节点 // 事件接收节点
params.eventListenes.push({ params.eventListenes.push({
nodeName: nodeConfig.nodeName || '', nodeName: nodeConfig.nodeName || '',
eventId: eventConfig?.eventId || '', eventId: eventConfig?.eventId || null,
topic: eventConfig?.topic || '', topic: eventConfig?.topic || '',
eventName: eventConfig?.name || '', eventName: eventConfig?.name || '',
dataOuts: nodeConfig.dataOuts || [] dataOuts: nodeConfig.dataOuts || [],
nodeId: nodeConfig.nodeId
}); });
} }
else if (nodeType === 'EVENTSEND') { else if (nodeType === 'EVENTSEND') {
// 事件发送节点 // 事件发送节点
params.eventSends.push({ params.eventSends.push({
nodeName: nodeConfig.nodeName || '', nodeName: nodeConfig.nodeName || '',
eventId: eventConfig?.eventId || '', eventId: eventConfig?.eventId || null,
topic: eventConfig?.topic || '', topic: eventConfig?.topic || '',
eventName: eventConfig?.name || '', eventName: eventConfig?.name || '',
dataIns: nodeConfig.dataIns || [] dataIns: nodeConfig.dataIns || [],
nodeId: nodeConfig.nodeId
}); });
} }
} }
}); });
// 调用更新事件的API // 调用更新事件的API
if (params.eventListenes.length > 0 || params.eventSends.length > 0) { if (params.eventListenes.length > 0 || params.eventSends.length > 0) {
updateAppEvent(appid, params); return params;
} }
}; };
const upDatePublish = async (revertedData) => { const upDatePublish = async (revertedData) => {
@ -1139,20 +1142,23 @@ export const useFlowCallbacks = (
const revertedData = revertFlowData(nodes, edges); const revertedData = revertFlowData(nodes, edges);
const upDatePublishCB = await upDatePublish(revertedData.nodeConfigs); const upDatePublishCB = await upDatePublish(revertedData.nodeConfigs);
const newRevertedData = reverseConvertFlowData(nodes, edges, upDatePublishCB); const newRevertedData = reverseConvertFlowData(nodes, edges, upDatePublishCB);
const { flowData, currentAppData } = store.getState().ideContainer; const { flowData, currentAppData, info } = store.getState().ideContainer;
// console.log('revertedData:', revertedData);
// console.log('newRevertedData:', newRevertedData);
let params = {}; let params = {};
// 更新复合组件/子流程 // 更新复合组件/子流程
if (currentAppData.key.includes('sub')) { if (currentAppData.key.includes('sub')) {
const appEventDefinition = updateEvent(revertedData.nodeConfigs, initialData.appId);
params = { params = {
...currentAppData?.compData || {}, ...currentAppData?.compData || {},
components: newRevertedData components: newRevertedData,
appEventDefinition,
sceneId: info.id
}; };
updateEvent(revertedData.nodeConfigs, currentAppData.parentAppId);
const res: any = await setSubFlowNew(params, currentAppData.parentAppId); const res: any = await setSubFlowNew(params, currentAppData.parentAppId);
if (res.code === 200) { if (res.code === 200) {
Message.success('保存成功'); Message.success('保存成功');
// 更新事件枚举表
const res1: any = await queryEventItemBySceneIdOld(info.id);
if (res1.code === 200) dispatch(updateEventListOld(res1.data));
} }
else { else {
Message.error(res.message); Message.error(res.message);
@ -1160,14 +1166,19 @@ export const useFlowCallbacks = (
} }
// 更新主流程 // 更新主流程
else { else {
const appEventDefinition = updateEvent(revertedData.nodeConfigs, initialData.appId);
params = { params = {
...flowData[currentAppData.id]?.main || {}, ...flowData[currentAppData.id]?.main || {},
components: newRevertedData components: newRevertedData,
appEventDefinition,
sceneId: info.id
}; };
updateEvent(revertedData.nodeConfigs, initialData.appId);
const res: any = await setMainFlowNew(params, initialData.appId); const res: any = await setMainFlowNew(params, initialData.appId);
if (res.code === 200) { if (res.code === 200) {
Message.success('保存成功'); Message.success('保存成功');
// 更新事件枚举表
const res1: any = await queryEventItemBySceneIdOld(info.id);
if (res1.code === 200) dispatch(updateEventListOld(res1.data));
} }
else { else {
Message.error(res.message); Message.error(res.message);
@ -1196,33 +1207,45 @@ export const useFlowCallbacks = (
const eventMap = new Map(); const eventMap = new Map();
edges.forEach((edge: any) => { edges.forEach((edge: any) => {
const eventId = edge.data.displayData.eventId; // 应用组件的桩点id就是事件id
const dto = { const sourceId = edge.source;
eventId: eventId, const targetId = edge.target;
topicDTO: { const topic = edge.data.displayData.topic;
topic: edge.data.displayData.topic,
eventName: edge.data.displayData.name if (eventMap.has(topic)) {
// 如果topic已存在，将eventId添加到数组中
eventMap.get(topic).eventId.push(sourceId);
eventMap.get(topic).eventId.push(targetId);
}
else {
// 如果topic不存在，创建新的条目
eventMap.set(topic, {
eventId: [sourceId, targetId],
topic: topic
});
} }
};
eventMap.set(eventId, dto);
}); });
const appEventParams = Array.from(eventMap.values()); // 对eventId数组进行去重处理
const appEventParams = Array.from(eventMap.values()).map(item => ({
...item,
eventId: Array.from(new Set(item.eventId))
}));
console.log('appEventParams:', appEventParams);
updateAppFlowData(appFlowParams); updateAppFlowData(appFlowParams);
if (appEventParams.length > 0) { if (appEventParams.length > 0) {
for (const item of appEventParams) { for (const item of appEventParams) {
console.log('item:', item);
await sleep(500); await sleep(500);
updateAppEventChannel(item); updateAppEventChannel(item);
} }
} }
} }
}, [nodes, edges, initialData?.appId]); }, [nodes, edges, initialData?.appId]);
// 运行处理函数 // 运行处理函数
const handleRun = useCallback(async (running: boolean) => { const handleRun = useCallback(async (running: boolean) => {
if (running) {
const { currentAppData, socketId } = store.getState().ideContainer; const { currentAppData, socketId } = store.getState().ideContainer;
if (running) {
// 启动运行 // 启动运行
const params = { const params = {
appId: currentAppData.id, appId: currentAppData.id,
@ -1250,6 +1273,8 @@ export const useFlowCallbacks = (
// 设置运行状态为false // 设置运行状态为false
dispatch(updateIsRunning(false)); dispatch(updateIsRunning(false));
stopApp(currentAppData.id);
// 停止运行 // 停止运行
setEdges((eds) => eds.map(edge => ({ setEdges((eds) => eds.map(edge => ({
...edge, ...edge,

6
src/pages/ideContainer/index.tsx
Unescape Escape View File

@ -1,6 +1,6 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { updateSocketId, updateNodeStatus, updateIsRunning, resetNodeStatus } from '@/store/ideContainer'; import { updateSocketId, updateNodeStatus, updateEventListOld } from '@/store/ideContainer';
import useWebSocket from '@/hooks/useWebSocket'; import useWebSocket from '@/hooks/useWebSocket';
import { isJSON, getUrlParams } from '@/utils/common'; import { isJSON, getUrlParams } from '@/utils/common';
@ -31,7 +31,7 @@ import ComponentDeployment from '@/pages/componentDevelopment/componentDeploymen
import ComponentTest from '@/pages/componentDevelopment/componentTest'; import ComponentTest from '@/pages/componentDevelopment/componentTest';
import { getUserToken } from '@/api/user'; import { getUserToken } from '@/api/user';
import { Message } from '@arco-design/web-react'; import { Message } from '@arco-design/web-react';
import { queryEventItemBySceneId } from '@/api/event'; import { queryEventItemBySceneId, queryEventItemBySceneIdOld } from '@/api/event';
type UrlParamsOptions = { type UrlParamsOptions = {
identity?: string; identity?: string;
@ -220,7 +220,9 @@ function IDEContainer() {
const getEvent = async () => { const getEvent = async () => {
const res: any = await queryEventItemBySceneId(urlParams.id); const res: any = await queryEventItemBySceneId(urlParams.id);
const res1: any = await queryEventItemBySceneIdOld(urlParams.id);
if (res.code === 200) dispatch(updateEventList(res.data)); if (res.code === 200) dispatch(updateEventList(res.data));
if (res1.code === 200) dispatch(updateEventListOld(res1.data));
}; };
useEffect(() => { useEffect(() => {

8
src/pages/ideContainer/sideBar.tsx
Unescape Escape View File

@ -17,11 +17,12 @@ import { menuData1, menuData2 } from './config/menuData';
import { IconSearch, IconPlus } from '@arco-design/web-react/icon'; import { IconSearch, IconPlus } from '@arco-design/web-react/icon';
import { Selected } from '@/pages/ideContainer/types'; import { Selected } from '@/pages/ideContainer/types';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { updateMenuData, updateFlowData, updateCurrentAppData } from '@/store/ideContainer'; import { updateMenuData, updateFlowData, updateCurrentAppData, updateEventListOld } from '@/store/ideContainer';
import { addApp, getProjectEnv, editApp, deleteApp } from '@/api/apps'; import { addApp, getProjectEnv, editApp, deleteApp } from '@/api/apps';
import _ from 'lodash'; import _ from 'lodash';
import { getAppInfoNew } from '@/api/appRes'; import { getAppInfoNew } from '@/api/appRes';
import { getAppEventData } from '@/api/appEvent'; import { getAppEventData } from '@/api/appEvent';
import { queryEventItemBySceneIdOld } from '@/api/event';
const TreeNode = Tree.Node; const TreeNode = Tree.Node;
const FormItem = Form.Item; const FormItem = Form.Item;
@ -191,7 +192,7 @@ const SideBar: React.FC<SideBarProps> = ({
}); // 添加右键菜单状态 }); // 添加右键菜单状态
const resizeBoxRef = useRef<HTMLDivElement>(null); // 引用第一个 ResizeBox 容器 const resizeBoxRef = useRef<HTMLDivElement>(null); // 引用第一个 ResizeBox 容器
const contextMenuRef = useRef<HTMLDivElement>(null); // 右键菜单引用 const contextMenuRef = useRef<HTMLDivElement>(null); // 右键菜单引用
const { menuData } = useSelector(state => state.ideContainer); const { menuData, info } = useSelector(state => state.ideContainer);
const dispatch = useDispatch(); const dispatch = useDispatch();
function getMenuData(): MenuItemType[] { function getMenuData(): MenuItemType[] {
@ -429,6 +430,9 @@ const SideBar: React.FC<SideBarProps> = ({
newMenu[activeKey] = { ...newMenu[activeKey], children: currentMenu[index].children }; newMenu[activeKey] = { ...newMenu[activeKey], children: currentMenu[index].children };
return newMenu; return newMenu;
}); });
// 获取最新的事件枚举表
const res1: any = await queryEventItemBySceneIdOld(info.id);
if (res1.code === 200) dispatch(updateEventListOld(res1.data));
} }
}; };

10
src/pages/orchestration/application/index.tsx
Unescape Escape View File

@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
import FlowEditor from '@/pages/flowEditor/index'; import FlowEditor from '@/pages/flowEditor/index';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { getAppEventList } from '@/api/appEvent'; import { getAppEventList } from '@/api/appEvent';
import { getTopicList } from '@/api/event'; import { getTopicList, queryEventItemBySceneId } from '@/api/event';
import { updateEventTopicList } from '@/store/ideContainer'; import { updateEventTopicList } from '@/store/ideContainer';
const ApplicationContainer = () => { const ApplicationContainer = () => {
@ -16,11 +16,13 @@ const ApplicationContainer = () => {
}; };
const getEventList = async () => { const getEventList = async () => {
const res: any = await getTopicList(info.id); const res: any = await queryEventItemBySceneId(info.id);
if (res.code === 200) { if (res.code === 200) {
dispatch(updateEventTopicList(res.data.map(v => { dispatch(updateEventTopicList(res.data
return { label: v.eventName, value: v.topic }; .filter(v => !v.topic.includes('**empty**')) // 过滤掉topic包含**empty**的项目
.map(v => {
return { label: v.name, value: v.topic };
}))); })));
} }
}; };

6
src/store/ideContainer.ts
Unescape Escape View File

@ -8,6 +8,7 @@ interface IDEContainerState {
canvasDataMap: any; canvasDataMap: any;
projectComponentData: any; projectComponentData: any;
currentAppData: any; currentAppData: any;
eventListOld: any;
eventList: any; eventList: any;
eventTopicList: any; eventTopicList: any;
logBarStatus?: boolean; logBarStatus?: boolean;
@ -24,6 +25,7 @@ const initialState: IDEContainerState = {
canvasDataMap: {}, // 每个画布的缓存信息 canvasDataMap: {}, // 每个画布的缓存信息
projectComponentData: {}, // 工程下的组件列表 projectComponentData: {}, // 工程下的组件列表
currentAppData: {}, // 当前选中的应用数据 currentAppData: {}, // 当前选中的应用数据
eventListOld: [], // 工程下的事件列表
eventList: [], // 工程下的事件列表 eventList: [], // 工程下的事件列表
eventTopicList: [], // 应用编排使用的事件名和topic列表 eventTopicList: [], // 应用编排使用的事件名和topic列表
logBarStatus: false, logBarStatus: false,
@ -58,6 +60,9 @@ const ideContainerSlice = createSlice({
updateEventList(state, action) { updateEventList(state, action) {
state.eventList = action.payload; state.eventList = action.payload;
}, },
updateEventListOld(state, action) {
state.eventListOld = action.payload;
},
updateEventTopicList(state, action) { updateEventTopicList(state, action) {
state.eventTopicList = action.payload; state.eventTopicList = action.payload;
}, },
@ -98,6 +103,7 @@ export const {
updateProjectComponentData, updateProjectComponentData,
updateCurrentAppData, updateCurrentAppData,
updateEventList, updateEventList,
updateEventListOld,
updateEventTopicList, updateEventTopicList,
updateLogBarStatus, updateLogBarStatus,
updateSocketId, updateSocketId,

Write Preview
Loading…
Cancel
Save