fix: sync menuBar mode status (#637)

Author: kiwiwong

src/controller/menuBar.ts

@@ -106,6 +106,8 @@ export class MenuBarController
                 this.automation[key] = value;
             }
         });
+
+        this.subscribe(MenuBarEvent.onChangeMode, this.updateMenuBarData);
     }
 
     public updateFocusinEle = (ele: HTMLElement | null) => {
@@ -209,6 +211,9 @@ export class MenuBarController
 
     public updateMenuBarMode = (mode: keyof typeof MenuBarMode) => {
         this.layoutService.setMenuBarMode(mode);
+    };
+
+    public updateMenuBarData = (mode: keyof typeof MenuBarMode) => {
         const { builtInMenuBarData } = this.builtinService.getModules();
         const menuBarData = this.getMenuBarDataByMode(mode, builtInMenuBarData);
         this.menuBarService.setMenus(menuBarData);

src/model/workbench/menuBar.ts

@@ -11,6 +11,7 @@ export enum MenuBarEvent {
      * Selected an activity bar
      */
     onSelect = 'menuBar.onSelect',
+    onChangeMode = 'menuBar.onChangeMode',
 }
 
 export interface IMenuBarItem {

src/services/workbench/layoutService.ts

@@ -7,6 +7,7 @@ import {
     LayoutModel,
     MenuBarMode,
 } from 'mo/model/workbench/layout';
+import { MenuBarEvent } from 'mo/model/workbench/menuBar';
 
 export interface ILayoutService extends Component<ILayout> {
     /**
@@ -155,6 +156,7 @@ export class LayoutService
         const { mode: preMode } = menuBar;
         if (preMode !== mode) {
             this.setState({ menuBar: { ...menuBar, mode, hidden: false } });
+            this.emit(MenuBarEvent.onChangeMode, mode);
         }
     }
 

stories/extensions/test/testPane.tsx

@@ -316,6 +316,13 @@ PARTITIONED BY (ds string) lifecycle 1000;
             );
         };
 
+        const toggleMenuBarMode = () => {
+            const currentMode = molecule.layout.getMenuBarMode();
+            const newMode =
+                currentMode === 'horizontal' ? 'vertical' : 'horizontal';
+            molecule.layout.setMenuBarMode(newMode);
+        };
+
         return (
             <Scrollable isShowShadow>
                 <div>
@@ -361,6 +368,9 @@ PARTITIONED BY (ds string) lifecycle 1000;
                         <Button onClick={addSettingsItem}>
                             Append Settings Item
                         </Button>
+                        <Button onClick={toggleMenuBarMode}>
+                            Toggle MenuBar mode
+                        </Button>
                     </div>
                     <div style={{ margin: '50px 20px' }}>
                         <h2>Exploer:</h2>