Design and Extract LayoutService

src/controller/activityBar.ts

@@ -1,4 +1,7 @@
 import 'reflect-metadata';
+import { Controller } from 'mo/react/controller';
+import { container, singleton } from 'tsyringe';
+import { MenuBarController, IMenuBarController } from 'mo/controller';
 import { IMenuItemProps } from 'mo/components/menu';
 import {
     ActivityBarEvent,
@@ -11,15 +14,11 @@ import {
     CONTEXT_MENU_SETTINGS,
     IActivityBarItem,
 } from 'mo/model';
-import { Controller } from 'mo/react/controller';
-import { container, singleton } from 'tsyringe';
 import { SelectColorThemeAction } from 'mo/monaco/selectColorThemeAction';
 
 import {
     ActivityBarService,
-    MenuBarService,
     IActivityBarService,
-    IMenuBarService,
     ISettingsService,
     SettingsService,
 } from 'mo/services';
@@ -39,16 +38,16 @@ export class ActivityBarController
     extends Controller
     implements IActivityBarController {
     private readonly activityBarService: IActivityBarService;
-    private readonly menuBarService: IMenuBarService;
     private readonly settingsService: ISettingsService;
     private readonly monacoService: IMonacoService;
+    private readonly menuBarController: IMenuBarController;
 
     constructor() {
         super();
         this.activityBarService = container.resolve(ActivityBarService);
-        this.menuBarService = container.resolve(MenuBarService);
         this.settingsService = container.resolve(SettingsService);
         this.monacoService = container.resolve(MonacoService);
+        this.menuBarController = container.resolve(MenuBarController);
     }
 
     public readonly onSelect = (
@@ -91,7 +90,7 @@ export class ActivityBarController
         switch (contextMenuId) {
             // activityBar contextMenu
             case CONTEXT_MENU_MENU: {
-                this.menuBarService.showHide();
+                this.menuBarController.updateMenuBar!();
                 break;
             }
             case CONTEXT_MENU_EXPLORER: {
@@ -103,7 +102,7 @@ export class ActivityBarController
                 break;
             }
             case CONTEXT_MENU_HIDE: {
-                this.activityBarService.showHide();
+                this.menuBarController.updateActivityBar!();
                 break;
             }
             // manage button contextMenu

src/controller/explorer/explorer.tsx

@@ -1,6 +1,7 @@
 import 'reflect-metadata';
 import * as React from 'react';
 import { Controller } from 'mo/react/controller';
+import { MenuBarController, IMenuBarController } from 'mo/controller';
 import { container, singleton } from 'tsyringe';
 import { connect } from 'mo/react';
 import { Explorer, FolderTreeView } from 'mo/workbench/sidebar/explore';
@@ -53,6 +54,7 @@ export class ExplorerController
     private readonly folderTreeService: IFolderTreeService;
     private readonly menuBarService: IMenuBarService;
     private readonly folderTreeController: IFolderTreeController;
+    private readonly menuBarController: IMenuBarController;
 
     constructor() {
         super();
@@ -62,6 +64,7 @@ export class ExplorerController
         this.folderTreeService = container.resolve(FolderTreeService);
         this.menuBarService = container.resolve(MenuBarService);
         this.folderTreeController = container.resolve(FolderTreeController);
+        this.menuBarController = container.resolve(MenuBarController);
 
         this.initView();
     }
@@ -94,13 +97,11 @@ export class ExplorerController
         };
 
         this.activityBarService.onSelect((e, item: IActivityBarItem) => {
-            const { hidden } = this.sidebarService.getState();
             if (item.id === EXPLORER_ACTIVITY_ITEM) {
-                const isShow = hidden ? !hidden : hidden;
                 this.sidebarService.setState({
                     current: explorePane.id,
-                    hidden: isShow,
                 });
+                this.menuBarController.updateSideBar!();
                 this.menuBarService.update(MENU_VIEW_SIDEBAR, {
                     icon: 'check',
                 });

src/controller/index.ts

@@ -7,7 +7,7 @@ export * from './problems';
 export * from './settings';
 export * from './sidebar';
 export * from './statusBar';
-export * from './workbench';
+export * from './layout';
 export * from './explorer/explorer';
 export * from './explorer/folderTree';
 export * from './explorer/outline';

src/controller/layout.ts

@@ -0,0 +1,27 @@
+import 'reflect-metadata';
+import { container, singleton } from 'tsyringe';
+import { Controller } from 'mo/react/controller';
+import { ILayoutService, LayoutService } from 'mo/services';
+
+export interface ILayoutController {
+    onPaneSizeChange: (splitPanePos: string[]) => void;
+    onHorizontalPaneSizeChange: (horizontalSplitPanePos: string[]) => void;
+}
+
+@singleton()
+export class LayoutController extends Controller implements ILayoutController {
+    private readonly layoutService: ILayoutService;
+
+    constructor() {
+        super();
+        this.layoutService = container.resolve(LayoutService);
+    }
+
+    public onPaneSizeChange = (splitPanePos: string[]) => {
+        this.layoutService.setPaneSize(splitPanePos);
+    };
+
+    public onHorizontalPaneSizeChange = (horizontalSplitPanePos: string[]) => {
+        this.layoutService.setHorizontalPaneSize(horizontalSplitPanePos);
+    };
+}

src/controller/menuBar.ts

@@ -11,40 +11,36 @@ import {
 } from 'mo/model/workbench/menuBar';
 import { Controller } from 'mo/react/controller';
 import {
-    ActivityBarService,
     EditorService,
-    IActivityBarService,
     IEditorService,
     IMenuBarService,
-    ISidebarService,
-    IStatusBarService,
+    ILayoutService,
     MenuBarService,
-    SidebarService,
-    StatusBarService,
+    LayoutService,
 } from 'mo/services';
 
 export interface IMenuBarController {
     onSelect?: (key: string, item?: IActivityBarItem) => void;
     onClick: (event: React.MouseEvent<any, any>, item: IMenuBarItem) => void;
+    updateStatusBar?: () => void;
+    updateMenuBar?: () => void;
+    updateActivityBar?: () => void;
+    updateSideBar?: () => void;
 }
 
 @singleton()
 export class MenuBarController
     extends Controller
     implements IMenuBarController {
-    private readonly activityBarService: IActivityBarService;
     private readonly editorService: IEditorService;
     private readonly menuBarService: IMenuBarService;
-    private readonly statusBarService: IStatusBarService;
-    private readonly sidebarService: ISidebarService;
+    private readonly layoutService: ILayoutService;
 
     constructor() {
         super();
-        this.activityBarService = container.resolve(ActivityBarService);
         this.editorService = container.resolve(EditorService);
         this.menuBarService = container.resolve(MenuBarService);
-        this.statusBarService = container.resolve(StatusBarService);
-        this.sidebarService = container.resolve(SidebarService);
+        this.layoutService = container.resolve(LayoutService);
     }
 
     public readonly onClick = (event: React.MouseEvent, item: IMenuBarItem) => {
@@ -80,32 +76,40 @@ export class MenuBarController
     };
 
     public updateActivityBar = () => {
-        this.activityBarService.showHide();
-        const { hidden } = this.activityBarService.getState();
+        this.layoutService.setActivityBarHidden();
+        const {
+            activityBar: { hidden },
+        } = this.layoutService.getState();
         this.menuBarService.update(MENU_VIEW_ACTIVITYBAR, {
             icon: hidden ? '' : 'check',
         });
     };
 
     public updateMenuBar = () => {
-        this.menuBarService.showHide();
-        const { hidden } = this.menuBarService.getState();
+        this.layoutService.setMenuBarHidden();
+        const {
+            menuBar: { hidden },
+        } = this.layoutService.getState();
         this.menuBarService.update(MENU_VIEW_MENUBAR, {
             icon: hidden ? '' : 'check',
         });
     };
 
     public updateStatusBar = () => {
-        this.statusBarService.showHide();
-        const { hidden } = this.statusBarService.getState();
+        this.layoutService.setStatusBarHidden();
+        const {
+            statusBar: { hidden },
+        } = this.layoutService.getState();
         this.menuBarService.update(MENU_VIEW_STATUSBAR, {
             icon: hidden ? '' : 'check',
         });
     };
 
     public updateSideBar = () => {
-        this.sidebarService.showHide();
-        const { hidden } = this.sidebarService.getState();
+        this.layoutService.setSideBarHidden();
+        const {
+            sideBar: { hidden },
+        } = this.layoutService.getState();
         this.menuBarService.update(MENU_VIEW_SIDEBAR, {
             icon: hidden ? '' : 'check',
         });

src/controller/panel.tsx

@@ -8,7 +8,12 @@ import {
     PANEL_TOOLBOX_CLOSE,
     PANEL_TOOLBOX_RESIZE,
 } from 'mo/model/workbench/panel';
-import { IPanelService, PanelService } from 'mo/services';
+import {
+    IPanelService,
+    PanelService,
+    ILayoutService,
+    LayoutService,
+} from 'mo/services';
 
 export interface IPanelController {
     onTabChange(key: string | undefined): void;
@@ -18,10 +23,12 @@ export interface IPanelController {
 @singleton()
 export class PanelController extends Controller implements IPanelController {
     private readonly panelService: IPanelService;
+    private readonly layoutService: ILayoutService;
 
     constructor() {
         super();
         this.panelService = container.resolve(PanelService);
+        this.layoutService = container.resolve(LayoutService);
     }
 
     public readonly onTabChange = (key: string | undefined): void => {
@@ -39,7 +46,7 @@ export class PanelController extends Controller implements IPanelController {
         item: IActionBarItemProps
     ): void => {
         if (item.id === PANEL_TOOLBOX_CLOSE) {
-            this.panelService.showHide();
+            this.layoutService.setPanelHidden();
         } else if (item.id === PANEL_TOOLBOX_RESIZE) {
             this.panelService.maximizeRestore();
         }

src/controller/problems.tsx

@@ -7,6 +7,8 @@ import {
     PanelService,
     IStatusBarService,
     StatusBarService,
+    ILayoutService,
+    LayoutService,
 } from 'mo/services';
 import { singleton, container } from 'tsyringe';
 import { builtInPanelProblems, builtInStatusProblems } from 'mo/model/problems';
@@ -19,24 +21,29 @@ export class ProblemsController
     implements IProblemsController {
     private readonly panelService: IPanelService;
     private readonly statusBarService: IStatusBarService;
+    private readonly layoutService: ILayoutService;
 
     constructor() {
         super();
         this.panelService = container.resolve(PanelService);
         this.statusBarService = container.resolve(StatusBarService);
+        this.layoutService = container.resolve(LayoutService);
         this.init();
     }
 
     private showHideProblems() {
-        const { current, hidden } = this.panelService.getState();
+        const { current } = this.panelService.getState();
+        const {
+            panel: { hidden },
+        } = this.layoutService.getState();
         if (hidden) {
-            this.panelService.showHide();
+            this.layoutService.setPanelHidden();
             this.panelService.open(builtInPanelProblems());
         } else {
             if (current?.id !== builtInPanelProblems().id) {
                 this.panelService.open(builtInPanelProblems());
             } else {
-                this.panelService.showHide();
+                this.layoutService.setPanelHidden();
             }
         }
     }

src/model/workbench/activityBar.ts

@@ -36,7 +36,6 @@ export interface IActivityBar {
     data?: IActivityBarItem[];
     contextMenu?: IMenuItemProps[];
     selected?: string;
-    hidden?: boolean;
 }
 
 export const ACTIVITY_BAR_GLOBAL_SETTINGS = 'global.menu.settings';
@@ -113,16 +112,13 @@ export class ActivityBarModel implements IActivityBar {
     public data: IActivityBarItem[];
     public contextMenu: IMenuItemProps[];
     public selected: string;
-    public hidden = false;
     constructor(
         data: IActivityBarItem[] = [],
         contextMenu: IMenuItemProps[] = [],
-        selected: string = '',
-        hidden = false
+        selected: string = ''
     ) {
         this.data = data;
         this.contextMenu = contextMenu;
         this.selected = selected;
-        this.hidden = hidden;
     }
 }