fix(workbench): cache the workbench SplitPane position (#76)

fix #60

Author: wewoor

src/controller/index.ts

@@ -8,6 +8,7 @@ import { PanelController } from './panel';
 import { SettingsController } from './settings';
 import { SidebarController } from './sidebar';
 import { StatusBarController } from './statusBar';
+import { WorkbenchController } from './workbench';
 
 export const activityBarController = container.resolve(ActivityBarController);
 export const editorController = container.resolve(EditorController);
@@ -18,3 +19,4 @@ export const explorerController = container.resolve(ExplorerController);
 export const statusBarController = container.resolve(StatusBarController);
 export const settingsController = container.resolve(SettingsController);
 export const folderTreeController = container.resolve(FolderTreeController);
+export const workbenchController = container.resolve(WorkbenchController);

src/controller/workbench.ts

@@ -0,0 +1,23 @@
+import { Controller } from 'mo/react/controller';
+import { singleton } from 'tsyringe';
+
+export interface IWorkbenchController {
+    readonly splitPanePos: string[];
+    onPaneSizeChange?: (newSize: number) => void;
+}
+
+@singleton()
+export class WorkbenchController
+    extends Controller
+    implements IWorkbenchController {
+    // Group Pos locate here temporary, we can move it to state or localStorage in future.
+    public splitPanePos: string[] = ['300px', 'auto'];
+
+    constructor() {
+        super();
+    }
+
+    public onPaneSizeChange = (newSize) => {
+        this.splitPanePos = newSize;
+    };
+}

src/workbench/workbench.tsx

@@ -16,6 +16,8 @@ import { APP_PREFIX } from 'mo/common/const';
 import { panelService } from 'mo/services';
 import { connect } from 'mo/react';
 import { IPanel } from 'mo/model/workbench/panel';
+import { workbenchController } from 'mo/controller';
+import { IWorkbenchController } from 'mo/controller/workbench';
 
 export interface IWorkbench {
     panel: IPanel;
@@ -25,8 +27,9 @@ const mainBenchClassName = prefixClaName('mainBench');
 const workbenchClassName = prefixClaName('workbench');
 const appClassName = classNames(APP_PREFIX, Utils.isMacOs() ? 'mac' : '');
 
-export function WorkbenchView(props: IWorkbench) {
-    const { panel } = props;
+export function WorkbenchView(props: IWorkbench & IWorkbenchController) {
+    const { panel, onPaneSizeChange, splitPanePos } = props;
+
     return (
         <div id={ID_APP} className={appClassName}>
             <div className={workbenchClassName}>
@@ -37,8 +40,13 @@ export function WorkbenchView(props: IWorkbench) {
                         split="vertical"
                         primary="first"
                         allowResize={true}
+                        onChange={onPaneSizeChange}
                     >
-                        <Pane minSize="170px" initialSize="300px" maxSize="80%">
+                        <Pane
+                            minSize="170px"
+                            initialSize={splitPanePos[0]}
+                            maxSize="80%"
+                        >
                             <SidebarView />
                         </Pane>
                         <SplitPane
@@ -69,6 +77,10 @@ export function WorkbenchView(props: IWorkbench) {
     );
 }
 
-export const Workbench = connect({ panel: panelService }, WorkbenchView);
+export const Workbench = connect(
+    { panel: panelService },
+    WorkbenchView,
+    workbenchController
+);
 
 export default Workbench;