Merge pull request #11303 from allenve/330-6.10.0

fix: 全局广播事件及时更新

packages/amis-editor-core/src/component/Editor.tsx

@@ -206,6 +206,10 @@ export default class Editor extends Component<EditorProps> {
 
     this.manager = new EditorManager(config, this.store, hostManager);
 
+    this.store.setGlobalEvents(
+      config.actionOptions?.globalEventGetter?.(this.manager) || []
+    );
+
     // 子编辑器不再重新设置 editorStore
     if (!(props.isSubEditor && (window as any).editorStore)) {
       (window as any).editorStore = this.store;
@@ -274,6 +278,14 @@ export default class Editor extends Component<EditorProps> {
     if (props?.amisEnv?.replaceText !== prevProps?.amisEnv?.replaceText) {
       this.store.setAppCorpusData(props?.amisEnv?.replaceText);
     }
+    if (
+      props.actionOptions?.globalEventGetter?.(this.manager) !==
+      prevProps.actionOptions?.globalEventGetter?.(this.manager)
+    ) {
+      this.store.setGlobalEvents(
+        props.actionOptions?.globalEventGetter?.(this.manager) || []
+      );
+    }
   }
 
   componentWillUnmount() {

packages/amis-editor-core/src/component/base/SchemaForm.tsx

@@ -4,6 +4,7 @@ import {EditorManager} from '../../manager';
 import {diff, getThemeConfig} from '../../util';
 import {
   createObjectFromChain,
+  createObject,
   extractObjectChain,
   IFormStore,
   render,

packages/amis-editor-core/src/store/editor.ts

@@ -37,7 +37,8 @@ import {
   ScaffoldForm,
   PopOverForm,
   DeleteEventContext,
-  BaseEventContext
+  BaseEventContext,
+  IGlobalEvent
 } from '../plugin';
 import {
   JSONDuplicate,
@@ -265,7 +266,9 @@ export const MainStore = types
     /** 应用语料 */
     appCorpusData: types.optional(types.frozen(), {}),
     /** 应用多语言状态，用于其它组件进行订阅 */
-    appLocaleState: types.optional(types.number, 0)
+    appLocaleState: types.optional(types.number, 0),
+    /** 全局广播事件 */
+    globalEvents: types.optional(types.frozen<Array<IGlobalEvent>>(), [])
   })
   .views(self => {
     return {
@@ -2348,6 +2351,10 @@ export const MainStore = types
         this.updateAppLocaleState();
       },
 
+      setGlobalEvents(events: IGlobalEvent[]) {
+        self.globalEvents = events;
+      },
+
       beforeDestroy() {
         lazyUpdateTargetName.cancel();
       }

packages/amis-editor/src/renderer/event-control/actionsPanelPlugins/otherActionsPanel/broadcast.tsx

@@ -8,7 +8,7 @@ registerActionPanel('broadcast', {
   description: '触发全局广播事件',
   innerArgs: [],
   descDetail: (info: any, context: any, props: any) => {
-    const globalEvents = props.globalEvents || [];
+    const globalEvents = props.manager.store.globalEvents;
     const event = globalEvents.find(
       (item: any) => item.name === info?.eventName
     );
@@ -21,8 +21,7 @@ registerActionPanel('broadcast', {
     );
   },
   schema: (manager: EditorManager, data: any) => {
-    const globalEvents =
-      manager.config?.actionOptions?.globalEventGetter?.(manager) || [];
+    const globalEvents = manager.store.globalEvents;
     return {
       type: 'wrapper',
       body: [

packages/amis-editor/src/renderer/event-control/helper.tsx

@@ -953,8 +953,6 @@ export const getEventControlConfig = (
   const actionTree = manager?.config.actionOptions?.actionTreeGetter
     ? manager?.config.actionOptions?.actionTreeGetter(ACTION_TYPE_TREE(manager))
     : ACTION_TYPE_TREE(manager);
-  const globalEvents =
-    manager?.config.actionOptions?.globalEventGetter?.(manager);
   const allComponents = manager?.store?.getComponentTreeSource();
   return {
     showOldEntry:
@@ -966,7 +964,6 @@ export const getEventControlConfig = (
     events: manager?.pluginEvents,
     actionTree,
     commonActions,
-    globalEvents,
     owner: '',
     addBroadcast: manager?.addBroadcast.bind(manager),
     removeBroadcast: manager?.removeBroadcast.bind(manager),

packages/amis-editor/src/renderer/event-control/index.tsx

@@ -62,10 +62,10 @@ import {updateComponentContext} from 'amis-editor-core';
 import type {VariableItem} from 'amis-ui';
 
 interface EventControlProps extends FormControlProps {
+  manager: EditorManager;
   actions: PluginActions; // 组件的动作列表
   events: PluginEvents; // 组件的事件列表
   actionTree: RendererPluginAction[]; // 动作树
-  globalEvents?: IGlobalEvent[]; // 全局事件
   commonActions?: {[propName: string]: RendererPluginAction}; // 公共动作Map
   value: ActionEventConfig; // 事件动作配置
   onChange: (
@@ -140,6 +140,7 @@ interface EventControlState {
   type: 'update' | 'add';
   appLocaleState?: number;
   actionRelations: any;
+  globalEvents: IGlobalEvent[];
 }
 
 const dialogObjMap = {
@@ -158,12 +159,14 @@ export class EventControl extends React.Component<
   } = {};
   drag?: HTMLElement | null;
   unReaction: any;
+  unEventReaction: any;
   submitSubscribers: Array<(value: any) => any> = [];
 
   constructor(props: EventControlProps) {
     super(props);
-    const {events, value, data, rawType, globalEvents} = props;
-
+    const {events, value, data, rawType} = props;
+    const editorStore = props.manager.store;
+    const globalEvents = editorStore.globalEvents;
     const eventPanelActive: {
       [prop: string]: boolean;
     } = {};
@@ -193,12 +196,13 @@ export class EventControl extends React.Component<
       actionData: undefined,
       type: 'add',
       appLocaleState: 0,
-      actionRelations: actionRelations ?? []
+      actionRelations: actionRelations ?? [],
+      globalEvents: globalEvents
     };
   }
 
   componentDidMount(): void {
-    const editorStore = (window as any).editorStore;
+    const editorStore = this.props.manager.store;
     this.unReaction = reaction(
       () => editorStore?.appLocaleState,
       () => {
@@ -207,10 +211,19 @@ export class EventControl extends React.Component<
         });
       }
     );
+    this.unEventReaction = reaction(
+      () => editorStore.globalEvents,
+      () => {
+        this.setState({
+          globalEvents: editorStore.globalEvents
+        });
+      }
+    );
   }
 
   componentWillUnmount() {
     this.unReaction?.();
+    this.unEventReaction?.();
     this.submitSubscribers = [];
   }
 
@@ -228,21 +241,12 @@ export class EventControl extends React.Component<
       data?.type !== prevProps.data?.type ||
       data?.onEvent !== prevProps.data?.onEvent
     ) {
-      const eventPanelActive: {
-        [prop: string]: boolean;
-      } = {};
       const tmpEvents =
         events[
           rawType || (!data.type || data.type === 'text' ? 'plain' : data.type)
         ] || [];
       const pluginEvents =
         typeof tmpEvents === 'function' ? tmpEvents(data) : [...tmpEvents];
-
-      // 事件配置面板不自动折叠
-      // pluginEvents.forEach((event: RendererPluginEvent) => {
-      //   eventPanelActive[event.eventName] = true;
-      // });
-
       const actionRelations = this.getActionRelations();
 
       this.setState({
@@ -638,10 +642,9 @@ export class EventControl extends React.Component<
       actionTree,
       actions: pluginActions,
       commonActions,
-      allComponents,
-      globalEvents
+      allComponents
     } = this.props;
-    const {events, onEvent} = this.state;
+    const {events, onEvent, globalEvents} = this.state;
     const eventConfig = events.find(
       item => item.eventName === data.actionData!.eventKey
     );
@@ -771,7 +774,7 @@ export class EventControl extends React.Component<
     variables = (manager.dataSchema as DataSchema).getDataPropsAsOptions();
 
     // 插入应用变量
-    const appVariables: VariableItem[] =
+    const appVariables =
       manager?.variableManager?.getVariableFormulaOptions() || [];
     appVariables.forEach(item => {
       if (Array.isArray(item?.children) && item.children.length) {
@@ -1079,14 +1082,12 @@ export class EventControl extends React.Component<
       actions: pluginActions,
       commonActions,
       getComponents,
-      allComponents,
-      render,
-      globalEvents = [],
-      subscribeSchemaSubmit
+      render
     } = this.props;
     const {
       onEvent,
       events: itemEvents,
+      globalEvents,
       eventPanelActive,
       showAcionDialog,
       showEventDialog,