From 19005f948d4ea402239a154e9d34ace6685e6562 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Wed, 20 Apr 2022 21:32:23 +0100 Subject: [PATCH] feat: fixes to layout w/tests --- .../gridview/baseComponentGridview.spec.ts | 166 ++++++++++++++ .../src/__tests__/gridview/gridview.spec.ts | 215 ++++++++++++++++++ .../splitview/core/splitview.spec.ts | 3 +- .../src/gridview/baseComponentGridview.ts | 2 +- packages/dockview/src/gridview/branchNode.ts | 2 +- .../dockview/src/react/gridview/gridview.tsx | 5 +- .../src/react/splitview/splitview.tsx | 5 +- 7 files changed, 392 insertions(+), 6 deletions(-) create mode 100644 packages/dockview/src/__tests__/gridview/baseComponentGridview.spec.ts diff --git a/packages/dockview/src/__tests__/gridview/baseComponentGridview.spec.ts b/packages/dockview/src/__tests__/gridview/baseComponentGridview.spec.ts new file mode 100644 index 000000000..896f67961 --- /dev/null +++ b/packages/dockview/src/__tests__/gridview/baseComponentGridview.spec.ts @@ -0,0 +1,166 @@ +import { Emitter } from '../../events'; +import { + BaseGrid, + IGridPanelView, + BaseGridOptions, +} from '../../gridview/baseComponentGridview'; +import { IViewSize } from '../../gridview/gridview'; +import { CompositeDisposable } from '../../lifecycle'; +import { + PanelInitParameters, + PanelUpdateEvent, + Parameters, +} from '../../panel/types'; +import { LayoutPriority, Orientation } from '../../splitview/core/splitview'; + +class TestPanel implements IGridPanelView { + _onDidChange = new Emitter(); + readonly onDidChange = this._onDidChange.event; + + get isActive(): boolean { + return true; + } + + get params(): Record { + return {}; + } + + constructor( + public readonly id: string, + public readonly element: HTMLElement, + public readonly minimumWidth: number, + public readonly maximumWidth: number, + public readonly minimumHeight: number, + public readonly maximumHeight: number, + public priority: LayoutPriority, + public snap: boolean + ) {} + + init(params: PanelInitParameters): void { + // + } + + setActive(isActive: boolean): void { + // + } + + toJSON(): object { + return {}; + } + + layout(width: number, height: number): void { + // + } + + update(event: PanelUpdateEvent): void { + // + } + + focus(): void { + // + } + + fromJSON(json: object): void { + // + } + + dispose(): void { + // + } +} + +class ClassUnderTest extends BaseGrid { + constructor(element: HTMLElement, options: BaseGridOptions) { + super(element, options); + } + + doRemoveGroup( + group: TestPanel, + options?: { skipActive?: boolean; skipDispose?: boolean } + ): TestPanel { + return super.doRemoveGroup(group, options); + } + + doAddGroup(group: TestPanel, location?: number[], size?: number): void { + this._groups.set(group.id, { + value: group, + disposable: { + dispose: () => { + // + }, + }, + }); + super.doAddGroup(group, location, size); + } + + public fromJSON(data: any): void { + // + } + + public toJSON(): object { + return {}; + } +} + +describe('baseComponentGridview', () => { + test('can add group', () => { + const cut = new ClassUnderTest(document.createElement('div'), { + orientation: Orientation.HORIZONTAL, + proportionalLayout: true, + }); + + const events: TestPanel[] = []; + + const disposable = new CompositeDisposable( + cut.onDidAddGroup((event) => { + events.push(event); + }), + cut.onDidRemoveGroup((event) => { + events.push(event); + }), + cut.onDidActiveGroupChange((event) => { + events.push(event); + }) + ); + + const panel1 = new TestPanel( + 'id', + document.createElement('div'), + 0, + 100, + 0, + 100, + LayoutPriority.Normal, + false + ); + + cut.doAddGroup(panel1); + + expect(events.length).toBe(2); + expect(events[0]).toBe(panel1); + expect(events[1]).toBe(panel1); + + const panel2 = new TestPanel( + 'id', + document.createElement('div'), + 0, + 100, + 0, + 100, + LayoutPriority.Normal, + false + ); + + cut.doAddGroup(panel2); + + expect(events.length).toBe(4); + expect(events[2]).toBe(panel2); + + cut.doRemoveGroup(panel1); + expect(events.length).toBe(5); + expect(events[4]).toBe(panel1); + + disposable.dispose(); + cut.dispose(); + }); +}); diff --git a/packages/dockview/src/__tests__/gridview/gridview.spec.ts b/packages/dockview/src/__tests__/gridview/gridview.spec.ts index 9fc1bba5c..a9e85b62a 100644 --- a/packages/dockview/src/__tests__/gridview/gridview.spec.ts +++ b/packages/dockview/src/__tests__/gridview/gridview.spec.ts @@ -779,6 +779,99 @@ describe('gridview', () => { }); }); + test('#5/VERTICAL/proportional/false', () => { + const gridview = new GridviewComponent(container, { + proportionalLayout: false, + orientation: Orientation.VERTICAL, + components: { default: TestGridview }, + }); + + gridview.fromJSON({ + grid: { + height: 400, + width: 800, + orientation: Orientation.VERTICAL, + root: { + type: 'branch', + size: 800, + data: [ + { + type: 'leaf', + size: 100, + data: { + id: 'panel_1', + component: 'default', + snap: false, + }, + }, + { + type: 'leaf', + size: 200, + data: { + id: 'panel_1', + component: 'default', + snap: false, + }, + }, + { + type: 'leaf', + size: 100, + data: { + id: 'panel_1', + component: 'default', + snap: false, + }, + }, + ], + }, + }, + activePanel: 'panel_1', + }); + gridview.layout(800, 400, true); + + expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({ + grid: { + height: 400, + width: 800, + orientation: Orientation.VERTICAL, + root: { + type: 'branch', + size: 800, + data: [ + { + type: 'leaf', + size: 100, + data: { + id: 'panel_1', + component: 'default', + snap: false, + }, + }, + { + type: 'leaf', + size: 200, + data: { + id: 'panel_1', + component: 'default', + snap: false, + }, + }, + { + type: 'leaf', + size: 100, + data: { + id: 'panel_1', + component: 'default', + snap: false, + }, + }, + ], + }, + }, + activePanel: 'panel_1', + }); + }); + test('#6/VERTICAL', () => { const gridview = new GridviewComponent(container, { proportionalLayout: true, @@ -1272,6 +1365,128 @@ describe('gridview', () => { }); }); + test('#9/HORIZONTAL/proportional/false', () => { + const gridview = new GridviewComponent(container, { + proportionalLayout: false, + orientation: Orientation.HORIZONTAL, + components: { default: TestGridview }, + }); + + gridview.fromJSON({ + grid: { + height: 400, + width: 800, + orientation: Orientation.HORIZONTAL, + root: { + type: 'branch', + size: 400, + data: [ + { + type: 'leaf', + size: 200, + data: { + id: 'panel_1', + component: 'default', + snap: false, + }, + }, + { + type: 'branch', + size: 400, + data: [ + { + type: 'leaf', + size: 250, + data: { + id: 'panel_1', + component: 'default', + snap: false, + }, + }, + { + type: 'leaf', + size: 150, + data: { + id: 'panel_1', + component: 'default', + snap: false, + }, + }, + ], + }, + { + type: 'leaf', + size: 200, + data: { + id: 'panel_1', + component: 'default', + snap: false, + }, + }, + ], + }, + }, + activePanel: 'panel_1', + }); + + expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({ + grid: { + height: 400, + width: 800, + orientation: Orientation.HORIZONTAL, + root: { + type: 'branch', + size: 400, + data: [ + { + type: 'leaf', + size: 200, + data: { + id: 'panel_1', + component: 'default', + snap: false, + }, + }, + { + type: 'branch', + size: 400, + data: [ + { + type: 'leaf', + size: 250, + data: { + id: 'panel_1', + component: 'default', + snap: false, + }, + }, + { + type: 'leaf', + size: 150, + data: { + id: 'panel_1', + component: 'default', + snap: false, + }, + }, + ], + }, + { + type: 'leaf', + size: 200, + data: { + id: 'panel_1', + component: 'default', + snap: false, + }, + }, + ], + }, + }, + activePanel: 'panel_1', + }); + }); + test('#10/HORIZONTAL scale x:1.5 y:2', () => { const gridview = new GridviewComponent(container, { proportionalLayout: true, diff --git a/packages/dockview/src/__tests__/splitview/core/splitview.spec.ts b/packages/dockview/src/__tests__/splitview/core/splitview.spec.ts index a9717e557..e8f0e4fe3 100644 --- a/packages/dockview/src/__tests__/splitview/core/splitview.spec.ts +++ b/packages/dockview/src/__tests__/splitview/core/splitview.spec.ts @@ -1,4 +1,3 @@ -import { last } from '../../../array'; import { Emitter } from '../../../events'; import { CompositeDisposable } from '../../../lifecycle'; import { @@ -388,7 +387,7 @@ describe('splitview', () => { splitview.dispose(); }); - test('disable proportional layout', () => { + test('proportional layout', () => { const splitview = new Splitview(container, { orientation: Orientation.HORIZONTAL, }); diff --git a/packages/dockview/src/gridview/baseComponentGridview.ts b/packages/dockview/src/gridview/baseComponentGridview.ts index 14077f0a5..524b24502 100644 --- a/packages/dockview/src/gridview/baseComponentGridview.ts +++ b/packages/dockview/src/gridview/baseComponentGridview.ts @@ -50,7 +50,7 @@ export function toTarget(direction: Direction) { } export interface BaseGridOptions { - readonly proportionalLayout?: boolean; + readonly proportionalLayout: boolean; readonly orientation: Orientation; readonly styles?: ISplitviewStyles; } diff --git a/packages/dockview/src/gridview/branchNode.ts b/packages/dockview/src/gridview/branchNode.ts index d915f90b3..d8c26bc0f 100644 --- a/packages/dockview/src/gridview/branchNode.ts +++ b/packages/dockview/src/gridview/branchNode.ts @@ -143,7 +143,7 @@ export class BranchNode extends CompositeDisposable implements IView { : true, }; }), - size: this.orthogonalSize, + size: this.size, }; this.children = childDescriptors.map((c) => c.node); diff --git a/packages/dockview/src/react/gridview/gridview.tsx b/packages/dockview/src/react/gridview/gridview.tsx index 520c94c4a..33a2dfa97 100644 --- a/packages/dockview/src/react/gridview/gridview.tsx +++ b/packages/dockview/src/react/gridview/gridview.tsx @@ -60,7 +60,10 @@ export const GridviewReact = React.forwardRef( const element = document.createElement('div'); const gridview = new GridviewComponent(element, { - proportionalLayout: !!props.proportionalLayout, + proportionalLayout: + typeof props.proportionalLayout === 'boolean' + ? props.proportionalLayout + : true, orientation: props.orientation, frameworkComponents: props.components, frameworkComponentFactory: { diff --git a/packages/dockview/src/react/splitview/splitview.tsx b/packages/dockview/src/react/splitview/splitview.tsx index 765371291..bda1de124 100644 --- a/packages/dockview/src/react/splitview/splitview.tsx +++ b/packages/dockview/src/react/splitview/splitview.tsx @@ -71,7 +71,10 @@ export const SplitviewReact = React.forwardRef( }); }, }, - proportionalLayout: props.proportionalLayout, + proportionalLayout: + typeof props.proportionalLayout === 'boolean' + ? props.proportionalLayout + : true, styles: props.hideBorders ? { separatorBorder: 'transparent' } : undefined,