From ecdb3128f3308751f52db134ebf8019ff1e0e366 Mon Sep 17 00:00:00 2001
From: Shawn <1322397827@qq.com>
Date: Thu, 20 Jan 2022 18:49:00 +0800
Subject: [PATCH] fix: sync menuBar mode status (#637)

---
 src/controller/menuBar.ts               |  5 +++++
 src/model/workbench/menuBar.ts          |  1 +
 src/services/workbench/layoutService.ts |  2 ++
 stories/extensions/test/testPane.tsx    | 10 ++++++++++
 4 files changed, 18 insertions(+)

diff --git a/src/controller/menuBar.ts b/src/controller/menuBar.ts
index b62cb08d1..c8dab75bf 100644
--- a/src/controller/menuBar.ts
+++ b/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);
diff --git a/src/model/workbench/menuBar.ts b/src/model/workbench/menuBar.ts
index 5819a5670..008816f83 100644
--- a/src/model/workbench/menuBar.ts
+++ b/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 {
diff --git a/src/services/workbench/layoutService.ts b/src/services/workbench/layoutService.ts
index 013a1c0a4..a876b5f9e 100644
--- a/src/services/workbench/layoutService.ts
+++ b/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);
         }
     }
 
diff --git a/stories/extensions/test/testPane.tsx b/stories/extensions/test/testPane.tsx
index 6db4c3200..db94fe32d 100644
--- a/stories/extensions/test/testPane.tsx
+++ b/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>