From 7d8922408c8603fe60c0378932d5bc7a1761175e Mon Sep 17 00:00:00 2001 From: mortalYoung Date: Wed, 2 Nov 2022 19:33:52 +0800 Subject: [PATCH 1/2] feat: support to set the direction of editor group --- src/model/workbench/layout.ts | 6 +++++- src/services/workbench/layoutService.ts | 22 ++++++++++++++++++++++ src/workbench/__tests__/workbench.test.tsx | 1 + src/workbench/editor/editor.tsx | 4 ++-- stories/extensions/extend-panel/index.tsx | 9 +++++++++ 5 files changed, 39 insertions(+), 3 deletions(-) diff --git a/src/model/workbench/layout.ts b/src/model/workbench/layout.ts index f17a805b5..951a208a1 100644 --- a/src/model/workbench/layout.ts +++ b/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; } } diff --git a/src/services/workbench/layoutService.ts b/src/services/workbench/layoutService.ts index 88a170e3f..2d354dd12 100644 --- a/src/services/workbench/layoutService.ts +++ b/src/services/workbench/layoutService.ts @@ -69,6 +69,12 @@ export interface ILayoutService extends Component { * 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'], diff --git a/src/workbench/__tests__/workbench.test.tsx b/src/workbench/__tests__/workbench.test.tsx index e047e4f27..e6c389ebe 100644 --- a/src/workbench/__tests__/workbench.test.tsx +++ b/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, }; } diff --git a/src/workbench/editor/editor.tsx b/src/workbench/editor/editor.tsx index c39e3e987..6ac6426df 100644 --- a/src/workbench/editor/editor.tsx +++ b/src/workbench/editor/editor.tsx @@ -32,7 +32,7 @@ export function Editor( entry = , editorOptions, } = editor || {}; - const { groupSplitPos } = layout || {}; + const { groupSplitPos, editorGroupDirection } = layout || {}; const getEvents = (groupId: UniqueId) => { return { @@ -61,7 +61,7 @@ export function Editor( return ( {groups.map((g: IEditorGroup, index: number) => ( diff --git a/stories/extensions/extend-panel/index.tsx b/stories/extensions/extend-panel/index.tsx index 79f94e929..003a04183 100644 --- a/stories/extensions/extend-panel/index.tsx +++ b/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: () => , }); + + molecule.editorTree.onLayout(() => { + molecule.layout.setEditorGroupDirection((pre) => + pre === MenuBarMode.horizontal + ? MenuBarMode.vertical + : MenuBarMode.horizontal + ); + }); }, dispose() { molecule.problems.remove(1); From a15efe5a45e6ee92c8b2cb37a868d8c4aabd19fb Mon Sep 17 00:00:00 2001 From: mortalYoung Date: Thu, 3 Nov 2022 11:03:53 +0800 Subject: [PATCH 2/2] test: update test cases --- src/services/__tests__/layoutService.test.ts | 17 +++- .../__snapshots__/editor.test.tsx.snap | 99 +++++++++++++++++++ .../editor/__tests__/editor.test.tsx | 35 +++++-- 3 files changed, 140 insertions(+), 11 deletions(-) diff --git a/src/services/__tests__/layoutService.test.ts b/src/services/__tests__/layoutService.test.ts index 313ee8213..47fbec9f8 100644 --- a/src/services/__tests__/layoutService.test.ts +++ b/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); + }); }); }); diff --git a/src/workbench/editor/__tests__/__snapshots__/editor.test.tsx.snap b/src/workbench/editor/__tests__/__snapshots__/editor.test.tsx.snap index 74fba2039..346d5f082 100644 --- a/src/workbench/editor/__tests__/__snapshots__/editor.test.tsx.snap +++ b/src/workbench/editor/__tests__/__snapshots__/editor.test.tsx.snap @@ -99,6 +99,105 @@ exports[`The Editor Component Match the editor group snapshot 1`] = ` `; +exports[`The Editor Component Match the horizontal editor group 1`] = ` + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +`; + exports[`The Editor Component Match the status snapshot 1`] = ` Ln 0, Col 0 diff --git a/src/workbench/editor/__tests__/editor.test.tsx b/src/workbench/editor/__tests__/editor.test.tsx index 3d6e1aa39..f2e836c5c 100644 --- a/src/workbench/editor/__tests__/editor.test.tsx +++ b/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( + + ); + expect(asFragment()).toMatchSnapshot(); + }); + test('Match the status snapshot', () => { const component = renderer.create( @@ -84,15 +108,6 @@ describe('The Editor Component', () => { expect(getByTestId(TEST_ID)).toBeInTheDocument(); }); - test('Should support to set entry', () => { - const testJSX =
; - const { getByTestId } = render( - - ); - - expect(getByTestId(TEST_ID)).toBeInTheDocument(); - }); - test('Should have default class name', () => { const { container } = render();