feat: support to set the direction of editor group

src/model/workbench/layout.ts

@@ -32,6 +32,7 @@ export interface ILayout {
     sidebar: ISidebarViewState;
     menuBar: IMenuBarViewState;
     groupSplitPos: (number | string)[];
+    editorGroupDirection: MenuBarMode;
 }
 
 export class LayoutModel implements ILayout {
@@ -43,6 +44,7 @@ export class LayoutModel implements ILayout {
     public statusBar: ViewVisibility;
     public sidebar: ISidebarViewState;
     public menuBar: IMenuBarViewState;
+    public editorGroupDirection: MenuBarMode;
     constructor(
         splitPanePos: string[] = ['300px', 'auto'],
         horizontalSplitPanePos = ['auto', '150px'],
@@ -51,7 +53,8 @@ export class LayoutModel implements ILayout {
         panel = { hidden: false, panelMaximized: false },
         statusBar = { hidden: false },
         sidebar = { hidden: false, position: Position.left },
-        menuBar = { hidden: false, mode: MenuBarMode.vertical }
+        menuBar = { hidden: false, mode: MenuBarMode.vertical },
+        editorGroupDirection = MenuBarMode.vertical
     ) {
         this.splitPanePos = splitPanePos;
         this.horizontalSplitPanePos = horizontalSplitPanePos;
@@ -61,5 +64,6 @@ export class LayoutModel implements ILayout {
         this.statusBar = statusBar;
         this.sidebar = sidebar;
         this.menuBar = menuBar;
+        this.editorGroupDirection = editorGroupDirection;
     }
 }

src/services/__tests__/layoutService.test.ts

@@ -1,5 +1,5 @@
 import { ID_APP } from 'mo/common/id';
-import { Position } from 'mo/model/workbench/layout';
+import { MenuBarMode, Position } from 'mo/model/workbench/layout';
 import 'reflect-metadata';
 import { container } from 'tsyringe';
 import { LayoutService } from '../workbench';
@@ -117,5 +117,20 @@ describe('The layout service', () => {
             layoutService.setHorizontalPaneSize(nextSize);
             expect(state.horizontalSplitPanePos).toEqual(nextSize);
         });
+
+        test('Should support to change the direction of editor group', () => {
+            const state = layoutService.getState();
+            expect(state.editorGroupDirection).toBe(MenuBarMode.vertical);
+
+            layoutService.setEditorGroupDirection(MenuBarMode.horizontal);
+            expect(state.editorGroupDirection).toBe(MenuBarMode.horizontal);
+
+            layoutService.setEditorGroupDirection((prev) =>
+                prev === MenuBarMode.vertical
+                    ? MenuBarMode.horizontal
+                    : MenuBarMode.vertical
+            );
+            expect(state.editorGroupDirection).toBe(MenuBarMode.vertical);
+        });
     });
 });

src/services/workbench/layoutService.ts

@@ -69,6 +69,12 @@ export interface ILayoutService extends Component<ILayout> {
      * Get the mode of the MenuBar
      */
     getMenuBarMode(): keyof typeof MenuBarMode;
+    /**
+     * Set the direction of editor group,default is `vertical`
+     */
+    setEditorGroupDirection(
+        direction: MenuBarMode | ((prev: MenuBarMode) => MenuBarMode)
+    ): void;
     /**
      * Reset all layout data as default value
      */
@@ -178,6 +184,22 @@ export class LayoutService
         return menuBar.mode;
     }
 
+    public setEditorGroupDirection(
+        direction: MenuBarMode | ((prev: MenuBarMode) => MenuBarMode)
+    ) {
+        if (typeof direction === 'function') {
+            this.setState({
+                editorGroupDirection: direction(
+                    this.state.editorGroupDirection
+                ),
+            });
+        } else {
+            this.setState({
+                editorGroupDirection: direction,
+            });
+        }
+    }
+
     public reset() {
         this.setState({
             splitPanePos: ['300px', 'auto'],

src/workbench/__tests__/workbench.test.tsx

@@ -127,6 +127,7 @@ describe('Test Workbench Component', () => {
             splitPanePos: layout.splitPanePos,
             horizontalSplitPanePos: layout.horizontalSplitPanePos,
             groupSplitPos: layout.groupSplitPos,
+            editorGroupDirection: layout.editorGroupDirection,
         };
     }
 

src/workbench/editor/__tests__/__snapshots__/editor.test.tsx.snap

@@ -99,6 +99,105 @@ exports[`The Editor Component Match the editor group snapshot 1`] = `
 </DocumentFragment>
 `;
 
+exports[`The Editor Component Match the horizontal editor group 1`] = `
+<DocumentFragment>
+  <div
+    class="mo-editor"
+  >
+    <div
+      class="mo-split mo-split--horizontal"
+    >
+      <div
+        class="mo-split__pane"
+        style="height: 0px; top: 0px;"
+      >
+        <div
+          class="mo-editor__group"
+        >
+          <div
+            class="mo-editor__group-header"
+          >
+            <div
+              class="mo-editor__group-tabs"
+            >
+              <div
+                data-testid="test-id"
+                type="card"
+              />
+            </div>
+            <div
+              class="mo-editor__group-actions"
+            />
+          </div>
+          <div
+            class="mo-editor__group-breadcrumb"
+          >
+            <div
+              class="mo-breadcrumb"
+              role="breadcrumb"
+            />
+          </div>
+          <div
+            class="mo-editor__group-container"
+          >
+            <div
+              class="mo-monaco-editor"
+              style="position: relative; min-height: 400px; height: 100%; width: 100%;"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="mo-split__sash mo-split__sash--horizontal"
+        role="Resizer"
+        style="height: 4px; top: -2px;"
+      />
+      <div
+        class="mo-split__pane"
+        style="height: 0px; top: 0px;"
+      >
+        <div
+          class="mo-editor__group"
+        >
+          <div
+            class="mo-editor__group-header"
+          >
+            <div
+              class="mo-editor__group-tabs"
+            >
+              <div
+                activetab=""
+                data-testid="test-id"
+                type="card"
+              />
+            </div>
+            <div
+              class="mo-editor__group-actions"
+            />
+          </div>
+          <div
+            class="mo-editor__group-breadcrumb"
+          >
+            <div
+              class="mo-breadcrumb"
+              role="breadcrumb"
+            />
+          </div>
+          <div
+            class="mo-editor__group-container"
+          >
+            <div
+              class="mo-monaco-editor"
+              style="position: relative; min-height: 400px; height: 100%; width: 100%;"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`The Editor Component Match the status snapshot 1`] = `
 <span>
   Ln 0, Col 0

src/workbench/editor/__tests__/editor.test.tsx

@@ -5,7 +5,7 @@ import Editor from '../editor';
 import EditorStatusBarView from '../statusBarView';
 import { defaultEditorClassName, groupClassName } from '../base';
 import { expectFnCalled } from '@test/utils';
-import { LayoutModel } from 'mo/model/workbench/layout';
+import { LayoutModel, MenuBarMode } from 'mo/model/workbench/layout';
 import '@testing-library/jest-dom';
 
 const mockItems = {
@@ -68,6 +68,30 @@ describe('The Editor Component', () => {
         expect(asFragment()).toMatchSnapshot();
     });
 
+    test('Match the horizontal editor group', () => {
+        const groups = [current, Object.assign({}, current, { id: 2 })];
+        const { asFragment } = render(
+            <Editor
+                onClickActions={jest.fn()}
+                editor={{ current, groups }}
+                layout={
+                    new LayoutModel(
+                        undefined,
+                        undefined,
+                        undefined,
+                        undefined,
+                        undefined,
+                        undefined,
+                        undefined,
+                        undefined,
+                        MenuBarMode.horizontal
+                    )
+                }
+            />
+        );
+        expect(asFragment()).toMatchSnapshot();
+    });
+
     test('Match the status snapshot', () => {
         const component = renderer.create(
             <EditorStatusBarView {...mockItems} />
@@ -84,15 +108,6 @@ describe('The Editor Component', () => {
         expect(getByTestId(TEST_ID)).toBeInTheDocument();
     });
 
-    test('Should support to set entry', () => {
-        const testJSX = <div data-testid={TEST_ID}></div>;
-        const { getByTestId } = render(
-            <Editor onClickActions={jest.fn()} editor={{ entry: testJSX }} />
-        );
-
-        expect(getByTestId(TEST_ID)).toBeInTheDocument();
-    });
-
     test('Should have default class name', () => {
         const { container } = render(<Editor onClickActions={jest.fn()} />);
 

src/workbench/editor/editor.tsx

@@ -32,7 +32,7 @@ export function Editor(
         entry = <Welcome />,
         editorOptions,
     } = editor || {};
-    const { groupSplitPos } = layout || {};
+    const { groupSplitPos, editorGroupDirection } = layout || {};
 
     const getEvents = (groupId: UniqueId) => {
         return {
@@ -61,7 +61,7 @@ export function Editor(
             return (
                 <SplitPane
                     sizes={groupSplitPos!}
-                    split="vertical"
+                    split={editorGroupDirection}
                     onChange={onPaneSizeChange!}
                 >
                     {groups.map((g: IEditorGroup, index: number) => (

stories/extensions/extend-panel/index.tsx

@@ -4,6 +4,7 @@ import { IExtension } from 'mo/model';
 import molecule from 'mo';
 
 import { Pane } from './pane';
+import { MenuBarMode } from 'mo/model/workbench/layout';
 
 export const ExtendPanel: IExtension = {
     id: 'ExtendsProblems',
@@ -14,6 +15,14 @@ export const ExtendPanel: IExtension = {
             name: 'Test Panel',
             renderPane: () => <Pane />,
         });
+
+        molecule.editorTree.onLayout(() => {
+            molecule.layout.setEditorGroupDirection((pre) =>
+                pre === MenuBarMode.horizontal
+                    ? MenuBarMode.vertical
+                    : MenuBarMode.horizontal
+            );
+        });
     },
     dispose() {
         molecule.problems.remove(1);