feat: support to toggle side bar visibility by command (#203)

* feat: support to toggle side bar visibility by command

* fix: improve quick show sidebar command

* fix: add quick toggle sidebar action into command palette

src/controller/menuBar.ts

@@ -7,7 +7,6 @@ import {
     MENU_VIEW_ACTIVITYBAR,
     MENU_VIEW_MENUBAR,
     MENU_VIEW_STATUSBAR,
-    MENU_VIEW_SIDEBAR,
 } from 'mo/model/workbench/menuBar';
 import { Controller } from 'mo/react/controller';
 import {
@@ -18,6 +17,9 @@ import {
     MenuBarService,
     LayoutService,
 } from 'mo/services';
+import { ID_SIDE_BAR } from 'mo/common/id';
+import { IMonacoService, MonacoService } from 'mo/monaco/monacoService';
+import { CommandQuickSideBarViewAction } from 'mo/monaco/quickToggleSideBarAction';
 
 export interface IMenuBarController {
     onSelect?: (key: string, item?: IActivityBarItem) => void;
@@ -35,12 +37,14 @@ export class MenuBarController
     private readonly editorService: IEditorService;
     private readonly menuBarService: IMenuBarService;
     private readonly layoutService: ILayoutService;
+    private readonly monacoService: IMonacoService;
 
     constructor() {
         super();
         this.editorService = container.resolve(EditorService);
         this.menuBarService = container.resolve(MenuBarService);
         this.layoutService = container.resolve(LayoutService);
+        this.monacoService = container.resolve(MonacoService);
     }
 
     public readonly onClick = (event: React.MouseEvent, item: IMenuBarItem) => {
@@ -61,7 +65,7 @@ export class MenuBarController
             case MENU_VIEW_STATUSBAR:
                 this.updateStatusBar();
                 break;
-            case MENU_VIEW_SIDEBAR:
+            case ID_SIDE_BAR:
                 this.updateSideBar();
                 break;
         }
@@ -106,12 +110,8 @@ export class MenuBarController
     };
 
     public updateSideBar = () => {
-        this.layoutService.setSideBarHidden();
-        const {
-            sideBar: { hidden },
-        } = this.layoutService.getState();
-        this.menuBarService.update(MENU_VIEW_SIDEBAR, {
-            icon: hidden ? '' : 'check',
-        });
+        this.monacoService.commandService.executeCommand(
+            CommandQuickSideBarViewAction.ID
+        );
     };
 }

src/extensions/activityBar/index.ts

@@ -2,6 +2,7 @@ import { IExtension } from 'mo/model/extension';
 import { IExtensionService } from 'mo/services';
 import molecule from 'mo';
 import { builtInActivityBar } from 'mo/model';
+import { CommandQuickSideBarViewAction } from 'mo/monaco/quickToggleSideBarAction';
 
 export const ExtendsActivityBar: IExtension = {
     activate(extensionCtx: IExtensionService) {
@@ -10,16 +11,22 @@ export const ExtendsActivityBar: IExtension = {
         molecule.activityBar.addContextMenu(contextMenu);
 
         molecule.activityBar.onChange((pre, cur) => {
-            if (pre === cur) {
-                molecule.activityBar.setActive(undefined);
-                molecule.layout.setSideBarHidden();
-            } else {
+            if (cur !== pre) {
                 molecule.activityBar.setActive(cur);
                 molecule.sidebar.setActive(cur);
+
                 const { sideBar } = molecule.layout.getState();
                 if (sideBar.hidden) {
-                    molecule.layout.setSideBarHidden();
+                    extensionCtx.executeCommand(
+                        CommandQuickSideBarViewAction.ID,
+                        cur
+                    );
                 }
+            } else {
+                extensionCtx.executeCommand(
+                    CommandQuickSideBarViewAction.ID,
+                    cur
+                );
             }
         });
     },

src/extensions/keybinding/index.ts

@@ -4,12 +4,14 @@ import { SelectLocaleAction } from 'mo/i18n/selectLocaleAction';
 import { QuickAccessSettings } from 'mo/monaco/quickAccessSettingsAction';
 import { CommandQuickAccessViewAction } from 'mo/monaco/quickAccessViewAction';
 import { SelectColorThemeAction } from 'mo/monaco/selectColorThemeAction';
+import { CommandQuickSideBarViewAction } from 'mo/monaco/quickToggleSideBarAction';
 
 export const ExtendsKeybinding: IExtension = {
     activate(extensionCtx: IExtensionService) {
         extensionCtx.registerAction(CommandQuickAccessViewAction);
         extensionCtx.registerAction(SelectColorThemeAction);
         extensionCtx.registerAction(QuickAccessSettings);
         extensionCtx.registerAction(SelectLocaleAction);
+        extensionCtx.registerAction(CommandQuickSideBarViewAction);
     },
 };

src/i18n/source/en.ts

@@ -20,6 +20,7 @@ export default {
         'menu.appearance': 'Appearance',
         'menu.showMenuBar': 'Show Menu Bar',
         'menu.showSideBar': 'Show Side bar',
+        'menu.showSideBar.label': 'Toggle Side Bar Visibility',
         'menu.showStatusBar': 'Show Status Bar',
         'menu.showActivityBar': 'Show Activity Bar',
         'menu.run': 'Run',

src/i18n/source/zh-CN.json

@@ -22,6 +22,7 @@
         "menu.appearance": "外观",
         "menu.showMenuBar": "显示菜单栏",
         "menu.showSideBar": "显示边栏",
+        "menu.showSideBar.label": "切换侧边栏",
         "menu.showStatusBar": "显示状态栏",
         "menu.showActivityBar": "显示活动栏",
         "menu.hideActivityBar": "隐藏活动栏",

src/model/workbench/menuBar.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { localize } from 'mo/i18n/localize';
+import { ID_SIDE_BAR } from 'mo/common/id';
 
 /**
  * The activity bar event definition
@@ -26,7 +27,6 @@ export interface IMenuBar {
 export const MENU_FILE_UNDO = 'undo';
 export const MENU_FILE_REDO = 'redo';
 export const MENU_VIEW_MENUBAR = 'workbench.action.showMenuBar';
-export const MENU_VIEW_SIDEBAR = 'workbench.action.showSideBar';
 export const MENU_VIEW_ACTIVITYBAR = 'workbench.action.showActivityBar';
 export const MENU_VIEW_STATUSBAR = 'workbench.action.showStatusBar';
 
@@ -97,7 +97,7 @@ export function builtInMenuBarData() {
                         },
                         {
                             icon: 'check',
-                            id: MENU_VIEW_SIDEBAR,
+                            id: ID_SIDE_BAR,
                             name: localize('menu.showSideBar', 'Show Side Bar'),
                         },
                         {

src/monaco/common.ts

@@ -6,6 +6,7 @@ import { ContextKeyExpr } from 'monaco-editor/esm/vs/platform/contextkey/common/
 import { KeybindingsRegistry } from 'monaco-editor/esm/vs/platform/keybinding/common/keybindingsRegistry';
 import { ServicesAccessor } from 'monaco-editor/esm/vs/platform/instantiation/common/instantiation';
 import { CommandsRegistry } from 'monaco-editor/esm/vs/platform/commands/common/commands';
+import { localize } from 'monaco-editor/esm/vs/nls';
 import {
     MenuRegistry,
     MenuId,
@@ -19,6 +20,27 @@ export enum KeybindingWeight {
     ExternalExtension = 400,
 }
 
+export const CATEGORIES = {
+    View: { value: localize('view', 'View'), original: 'View' },
+    Help: { value: localize('help', 'Help'), original: 'Help' },
+    Preferences: {
+        value: localize('preferences', 'Preferences'),
+        original: 'Preferences',
+    },
+    Developer: {
+        value: localize(
+            {
+                key: 'developer',
+                comment: [
+                    'A developer on Code itself or someone diagnosing issues in Code',
+                ],
+            },
+            'Developer'
+        ),
+        original: 'Developer',
+    },
+};
+
 export abstract class Action2 {
     constructor(
         readonly desc: Readonly<{

src/monaco/quickToggleSideBarAction.ts

@@ -0,0 +1,75 @@
+import { ServicesAccessor } from 'monaco-editor/esm/vs/platform/instantiation/common/instantiation';
+import { KeyChord } from 'monaco-editor/esm/vs/base/common/keyCodes';
+import { localize } from 'mo/i18n/localize';
+import { KeyMod, KeyCode } from 'mo/monaco';
+import { Action2, CATEGORIES, KeybindingWeight } from './common';
+import { container } from 'tsyringe';
+import {
+    ActivityBarService,
+    IActivityBarService,
+    ILayoutService,
+    IMenuBarService,
+    ISidebarService,
+    LayoutService,
+    MenuBarService,
+    SidebarService,
+} from 'mo/services';
+import { ID_SIDE_BAR } from 'mo/common/id';
+
+export class CommandQuickSideBarViewAction extends Action2 {
+    static readonly ID = ID_SIDE_BAR;
+    static readonly LABEL = localize(
+        'menu.showSideBar.label',
+        'Toggle Side Bar Visibility'
+    );
+    private readonly layoutService: ILayoutService;
+    private readonly activityBarService: IActivityBarService;
+    private readonly menuBarService: IMenuBarService;
+    private readonly sideBarService: ISidebarService;
+    private _preActivityBar: string | undefined;
+
+    constructor() {
+        super({
+            id: CommandQuickSideBarViewAction.ID,
+            label: CommandQuickSideBarViewAction.LABEL,
+            title: CommandQuickSideBarViewAction.LABEL,
+            category: CATEGORIES.View,
+            alias: 'Toggle Side Bar',
+            precondition: undefined,
+            f1: true,
+            keybinding: {
+                when: undefined,
+                weight: KeybindingWeight.WorkbenchContrib,
+                // eslint-disable-next-line new-cap
+                primary: KeyChord(KeyMod.CtrlCmd | KeyCode.KEY_B),
+            },
+        });
+        this.layoutService = container.resolve(LayoutService);
+        this.activityBarService = container.resolve(ActivityBarService);
+        this.menuBarService = container.resolve(MenuBarService);
+        this.sideBarService = container.resolve(SidebarService);
+    }
+    run(accessor: ServicesAccessor, ...args) {
+        const sidebarId = args[0];
+        const { sideBar } = this.layoutService.getState();
+        const { selected } = this.activityBarService.getState();
+        if (sideBar.hidden) {
+            this.activityBarService.setActive(
+                sidebarId || this._preActivityBar
+            );
+            this.sideBarService.setActive(sidebarId || this._preActivityBar);
+            this.menuBarService.update(CommandQuickSideBarViewAction.ID, {
+                icon: 'check',
+            });
+            this.layoutService.setSideBarHidden();
+        } else {
+            this.activityBarService.setActive();
+            this.sideBarService.setActive();
+            this.menuBarService.update(CommandQuickSideBarViewAction.ID, {
+                icon: '',
+            });
+            this.layoutService.setSideBarHidden();
+            this._preActivityBar = selected;
+        }
+    }
+}

src/services/extensionService.ts

@@ -9,6 +9,7 @@ import {
     IColorThemeService,
 } from './theme/colorThemeService';
 import { Action2, registerAction2 } from 'mo/monaco/common';
+import { IMonacoService, MonacoService } from 'mo/monaco/monacoService';
 
 export interface IExtensionService {
     /**
@@ -32,16 +33,19 @@ export interface IExtensionService {
      * ```
      */
     registerAction(actionClass: { new (): Action2 }): void;
+    executeCommand(id: string, ...args: any): void;
 }
 
 @singleton()
 export class ExtensionService implements IExtensionService {
     public extensions: IExtension[] = [];
     private readonly colorThemeService: IColorThemeService;
+    private readonly monacoService: IMonacoService;
 
     constructor(@inject('Extensions') extensions: IExtension[] = []) {
         this.load(extensions);
         this.colorThemeService = container.resolve(ColorThemeService);
+        this.monacoService = container.resolve(MonacoService);
     }
 
     public load(extensions: IExtension[] = []) {
@@ -85,6 +89,10 @@ export class ExtensionService implements IExtensionService {
         registerAction2(actionClass);
     }
 
+    public executeCommand(id, ...args) {
+        this.monacoService.commandService.executeCommand(id, ...args);
+    }
+
     unload(extension: IExtension) {
         console.log('unload extension:', extension.name);
     }

stories/extensions/test/index.tsx

@@ -3,13 +3,13 @@ import molecule from 'mo';
 import {
     MENU_VIEW_ACTIVITYBAR,
     MENU_VIEW_MENUBAR,
-    MENU_VIEW_SIDEBAR,
     MENU_VIEW_STATUSBAR,
 } from 'mo/model/workbench/menuBar';
 import { IExtension } from 'mo/model';
 
 import TestPane from './testPane';
 import { Entry } from './entry';
+import { Position } from 'mo/model/workbench/layout';
 
 export const ExtendTestPane: IExtension = {
     activate() {
@@ -34,7 +34,6 @@ export const ExtendTestPane: IExtension = {
         molecule.editor.setEntry(<Entry />);
 
         molecule.settings.onChangeConfiguration(async (value) => {
-            console.log('onChangeConfiguration:', value);
             molecule.settings.update(value);
             const config = await molecule.settings.getConfiguration();
             const workbench: any = config.workbench;
@@ -60,16 +59,17 @@ export const ExtendTestPane: IExtension = {
                     icon: hidden ? '' : 'check',
                 });
             }
-            if (workbench?.sidebar) {
-                const hidden = workbench?.sidebar.hidden;
-                molecule.layout.setState({
-                    ...layoutViewState,
-                    sideBar: { ...layoutViewState.sideBar, hidden },
-                });
-
-                molecule.menuBar.update(MENU_VIEW_SIDEBAR, {
-                    icon: hidden ? '' : 'check',
-                });
+            if (workbench.sidebar) {
+                switch (workbench.sidebar) {
+                    case 'left':
+                        molecule.layout.setSideBarPosition(Position.LEFT);
+                        break;
+                    case 'right':
+                        molecule.layout.setSideBarPosition(Position.RIGHT);
+                        break;
+                    default:
+                        break;
+                }
             }
             if (workbench?.statusBar) {
                 const hidden = workbench?.statusBar.hidden;