feat(editor): 事件流支持上下文对象传递和abort方法中断

packages/core/src/App.ts

@@ -26,6 +26,7 @@ import type { CodeBlockDSL, Id, JsEngine, MApp, RequestFunction } from '@tmagic/
 import Env from './Env';
 import EventHelper from './EventHelper';
 import Flexible from './Flexible';
+import FlowState from './FlowState';
 import Node from './Node';
 import Page from './Page';
 import { transformStyle as defaultTransformStyle } from './utils';
@@ -227,15 +228,21 @@ class App extends EventEmitter {
    * @param eventConfig 代码动作的配置
    * @returns void
    */
-  public async runCode(codeId: Id, params: Record<string, any>, args: any[]) {
+  public async runCode(codeId: Id, params: Record<string, any>, args: any[], flowState: FlowState) {
     if (!codeId || isEmpty(this.codeDsl)) return;
     const content = this.codeDsl?.[codeId]?.content;
     if (typeof content === 'function') {
-      await content({ app: this, params, eventParams: args });
+      await content({ app: this, params, eventParams: args, flowState });
     }
   }
 
-  public async runDataSourceMethod(dsId: string, methodName: string, params: Record<string, any>, args: any[]) {
+  public async runDataSourceMethod(
+    dsId: string,
+    methodName: string,
+    params: Record<string, any>,
+    args: any[],
+    flowState: FlowState,
+  ) {
     if (!dsId || !methodName) return;
 
     const dataSource = this.dataSourceManager?.get(dsId);
@@ -249,7 +256,7 @@ class App extends EventEmitter {
     if (!method) return;
 
     if (typeof method.content === 'function') {
-      await method.content({ app: this, params, dataSource, eventParams: args });
+      await method.content({ app: this, params, dataSource, eventParams: args, flowState });
     }
   }
 

packages/core/src/EventHelper.ts

@@ -35,6 +35,7 @@ import {
 import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, getIdFromEl } from '@tmagic/utils';
 
 import type { default as TMagicApp } from './App';
+import FlowState from './FlowState';
 import type { default as TMagicNode } from './Node';
 import { COMMON_EVENT_PREFIX, isCommonMethod, triggerCommonMethod } from './utils';
 
@@ -176,40 +177,49 @@ export default class EventHelper extends EventEmitter {
    * @param args 事件参数
    */
   private async eventHandler(config: EventConfig | number, fromCpt: TMagicNode | DataSource | undefined, args: any[]) {
+    console.log('eventHandler', config, fromCpt);
     const eventConfig = typeof config === 'number' ? (fromCpt as TMagicNode).events[config] : config;
     if (has(eventConfig, 'actions')) {
       // EventConfig类型
+      const flowState = new FlowState();
       const { actions } = eventConfig as EventConfig;
       for (let i = 0; i < actions.length; i++) {
+        if (flowState?.isAbort) break;
         if (typeof config === 'number') {
           // 事件响应中可能会有修改数据源数据的，会更新dsl，所以这里需要重新获取
           const actionItem = ((fromCpt as TMagicNode).events[config] as EventConfig).actions[i];
-          this.actionHandler(actionItem, fromCpt as TMagicNode, args);
+          this.actionHandler(actionItem, fromCpt as TMagicNode, args, flowState);
         } else {
-          this.actionHandler(actions[i], fromCpt as DataSource, args);
+          this.actionHandler(actions[i], fromCpt as DataSource, args, flowState);
         }
       }
+      flowState.reset();
     } else {
       // 兼容DeprecatedEventConfig类型 组件动作
       await this.compActionHandler(eventConfig as unknown as CompItemConfig, fromCpt as TMagicNode, args);
     }
   }
 
-  private async actionHandler(actionItem: EventActionItem, fromCpt: TMagicNode | DataSource, args: any[]) {
+  private async actionHandler(
+    actionItem: EventActionItem,
+    fromCpt: TMagicNode | DataSource,
+    args: any[],
+    flowState: FlowState,
+  ) {
     if (actionItem.actionType === ActionType.COMP) {
       const compActionItem = actionItem as CompItemConfig;
       // 组件动作
       await this.compActionHandler(compActionItem, fromCpt, args);
     } else if (actionItem.actionType === ActionType.CODE) {
       const codeActionItem = actionItem as CodeItemConfig;
       // 执行代码块
-      await this.app.runCode(codeActionItem.codeId, codeActionItem.params || {}, args);
+      await this.app.runCode(codeActionItem.codeId, codeActionItem.params || {}, args, flowState);
     } else if (actionItem.actionType === ActionType.DATA_SOURCE) {
       const dataSourceActionItem = actionItem as DataSourceItemConfig;
 
       const [dsId, methodName] = dataSourceActionItem.dataSourceMethod;
 
-      await this.app.runDataSourceMethod(dsId, methodName, dataSourceActionItem.params || {}, args);
+      await this.app.runDataSourceMethod(dsId, methodName, dataSourceActionItem.params || {}, args, flowState);
     }
   }
 

packages/core/src/FlowState.ts

@@ -0,0 +1,12 @@
+export default class FlowState {
+  public isAbort: boolean;
+  constructor() {
+    this.isAbort = false;
+  }
+  public abort() {
+    this.isAbort = true;
+  }
+  public reset() {
+    this.isAbort = false;
+  }
+}

packages/editor/src/hooks/use-code-block-edit.ts

@@ -21,7 +21,7 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
 
     codeConfig.value = {
       name: '',
-      content: `({app, params}) => {\n  // place your code here\n}`,
+      content: `({app, params, flowState}) => {\n  // place your code here\n}`,
       params: [],
     };
 

packages/editor/src/hooks/use-data-source-method.ts

@@ -21,7 +21,7 @@ export const useDataSourceMethod = () => {
     createCode: async (model: DataSourceSchema) => {
       codeConfig.value = {
         name: '',
-        content: `({ params, dataSource, app }) => {\n  // place your code here\n}`,
+        content: `({ params, dataSource, app, flowState }) => {\n  // place your code here\n}`,
         params: [],
       };
 

playground/src/configs/dsl.ts

@@ -48,6 +48,22 @@ const dsl: MApp = {
       },
       params: [],
     },
+    code_5317: {
+      name: 'code1',
+      content: ({ flowState }) => {
+        console.log('code1: set flowState.name=lisa');
+        flowState.name = 'lisa';
+      },
+      params: [],
+    },
+    code_5318: {
+      name: 'code2',
+      content: ({ flowState }) => {
+        console.log('print flowState.name', flowState.name);
+        flowState.abort();
+      },
+      params: [],
+    },
   },
   items: [
     {