From 319cf65ac293ece8a3c5e2c08a4c89eafe8a011e Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Sat, 8 Jul 2023 10:49:30 +0100 Subject: [PATCH] feat: adjust gridview logic --- .../gridview/gridviewComponent.spec.ts | 387 +++++++++++++++++- .../dockview-core/src/gridview/branchNode.ts | 4 +- .../dockview-core/src/gridview/gridview.ts | 6 +- 3 files changed, 381 insertions(+), 16 deletions(-) diff --git a/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts b/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts index 267600ffb..99e237a6f 100644 --- a/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts @@ -2046,7 +2046,7 @@ describe('gridview', () => { }); }); - test('that a deep layout with fromJSON dimensions identical to the current dimensions loads', async () => { + test('that a deep HORIZONTAL layout with fromJSON dimensions identical to the current dimensions loads', async () => { const container = document.createElement('div'); const gridview = new GridviewComponent({ @@ -2056,12 +2056,12 @@ describe('gridview', () => { components: { default: TestGridview }, }); - gridview.layout(5000, 5000); + gridview.layout(6000, 5000); gridview.fromJSON({ grid: { height: 5000, - width: 5000, + width: 6000, orientation: Orientation.HORIZONTAL, root: { type: 'branch', @@ -2069,7 +2069,7 @@ describe('gridview', () => { data: [ { type: 'leaf', - size: 1000, + size: 2000, data: { id: 'panel_1', component: 'default', @@ -2078,7 +2078,7 @@ describe('gridview', () => { }, { type: 'branch', - size: 2000, + size: 3000, data: [ { type: 'branch', @@ -2095,7 +2095,7 @@ describe('gridview', () => { }, { type: 'branch', - size: 1000, + size: 2000, data: [ { type: 'leaf', @@ -2132,7 +2132,7 @@ describe('gridview', () => { }, { type: 'leaf', - size: 2000, + size: 1000, data: { id: 'panel_6', component: 'default', @@ -2148,7 +2148,7 @@ describe('gridview', () => { expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({ grid: { height: 5000, - width: 5000, + width: 6000, orientation: Orientation.HORIZONTAL, root: { type: 'branch', @@ -2156,7 +2156,7 @@ describe('gridview', () => { data: [ { type: 'leaf', - size: 1000, + size: 2000, data: { id: 'panel_1', component: 'default', @@ -2165,7 +2165,7 @@ describe('gridview', () => { }, { type: 'branch', - size: 2000, + size: 3000, data: [ { type: 'branch', @@ -2182,7 +2182,7 @@ describe('gridview', () => { }, { type: 'branch', - size: 1000, + size: 2000, data: [ { type: 'leaf', @@ -2217,9 +2217,374 @@ describe('gridview', () => { }, ], }, + { + type: 'leaf', + size: 1000, + data: { + id: 'panel_6', + component: 'default', + snap: false, + }, + }, + ], + }, + }, + activePanel: 'panel_1', + }); + + gridview.layout(6000, 5000, true); + + expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({ + grid: { + height: 5000, + width: 6000, + orientation: Orientation.HORIZONTAL, + root: { + type: 'branch', + size: 5000, + data: [ { type: 'leaf', size: 2000, + data: { + id: 'panel_1', + component: 'default', + snap: false, + }, + }, + { + type: 'branch', + size: 3000, + data: [ + { + type: 'branch', + size: 4000, + data: [ + { + type: 'leaf', + size: 1000, + data: { + id: 'panel_2', + component: 'default', + snap: false, + }, + }, + { + type: 'branch', + size: 2000, + data: [ + { + type: 'leaf', + size: 2000, + data: { + id: 'panel_3', + component: 'default', + snap: false, + }, + }, + { + type: 'leaf', + size: 2000, + data: { + id: 'panel_4', + component: 'default', + snap: false, + }, + }, + ], + }, + ], + }, + { + type: 'leaf', + size: 1000, + data: { + id: 'panel_5', + component: 'default', + snap: false, + }, + }, + ], + }, + { + type: 'leaf', + size: 1000, + data: { + id: 'panel_6', + component: 'default', + snap: false, + }, + }, + ], + }, + }, + activePanel: 'panel_1', + }); + }); + + test('that a deep VERTICAL layout with fromJSON dimensions identical to the current dimensions loads', async () => { + const container = document.createElement('div'); + + const gridview = new GridviewComponent({ + parentElement: container, + proportionalLayout: true, + orientation: Orientation.VERTICAL, + components: { default: TestGridview }, + }); + + gridview.layout(5000, 6000); + + gridview.fromJSON({ + grid: { + height: 6000, + width: 5000, + orientation: Orientation.VERTICAL, + root: { + type: 'branch', + size: 5000, + data: [ + { + type: 'leaf', + size: 2000, + data: { + id: 'panel_1', + component: 'default', + snap: false, + }, + }, + { + type: 'branch', + size: 3000, + data: [ + { + type: 'branch', + size: 4000, + data: [ + { + type: 'leaf', + size: 1000, + data: { + id: 'panel_2', + component: 'default', + snap: false, + }, + }, + { + type: 'branch', + size: 2000, + data: [ + { + type: 'leaf', + size: 2000, + data: { + id: 'panel_3', + component: 'default', + snap: false, + }, + }, + { + type: 'leaf', + size: 2000, + data: { + id: 'panel_4', + component: 'default', + snap: false, + }, + }, + ], + }, + ], + }, + { + type: 'leaf', + size: 1000, + data: { + id: 'panel_5', + component: 'default', + snap: false, + }, + }, + ], + }, + { + type: 'leaf', + size: 1000, + data: { + id: 'panel_6', + component: 'default', + snap: false, + }, + }, + ], + }, + }, + activePanel: 'panel_1', + }); + + expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({ + grid: { + height: 6000, + width: 5000, + orientation: Orientation.VERTICAL, + root: { + type: 'branch', + size: 5000, + data: [ + { + type: 'leaf', + size: 2000, + data: { + id: 'panel_1', + component: 'default', + snap: false, + }, + }, + { + type: 'branch', + size: 3000, + data: [ + { + type: 'branch', + size: 4000, + data: [ + { + type: 'leaf', + size: 1000, + data: { + id: 'panel_2', + component: 'default', + snap: false, + }, + }, + { + type: 'branch', + size: 2000, + data: [ + { + type: 'leaf', + size: 2000, + data: { + id: 'panel_3', + component: 'default', + snap: false, + }, + }, + { + type: 'leaf', + size: 2000, + data: { + id: 'panel_4', + component: 'default', + snap: false, + }, + }, + ], + }, + ], + }, + { + type: 'leaf', + size: 1000, + data: { + id: 'panel_5', + component: 'default', + snap: false, + }, + }, + ], + }, + { + type: 'leaf', + size: 1000, + data: { + id: 'panel_6', + component: 'default', + snap: false, + }, + }, + ], + }, + }, + activePanel: 'panel_1', + }); + + gridview.layout(5000, 6000, true); + + expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({ + grid: { + height: 6000, + width: 5000, + orientation: Orientation.VERTICAL, + root: { + type: 'branch', + size: 5000, + data: [ + { + type: 'leaf', + size: 2000, + data: { + id: 'panel_1', + component: 'default', + snap: false, + }, + }, + { + type: 'branch', + size: 3000, + data: [ + { + type: 'branch', + size: 4000, + data: [ + { + type: 'leaf', + size: 1000, + data: { + id: 'panel_2', + component: 'default', + snap: false, + }, + }, + { + type: 'branch', + size: 2000, + data: [ + { + type: 'leaf', + size: 2000, + data: { + id: 'panel_3', + component: 'default', + snap: false, + }, + }, + { + type: 'leaf', + size: 2000, + data: { + id: 'panel_4', + component: 'default', + snap: false, + }, + }, + ], + }, + ], + }, + { + type: 'leaf', + size: 1000, + data: { + id: 'panel_5', + component: 'default', + snap: false, + }, + }, + ], + }, + { + type: 'leaf', + size: 1000, data: { id: 'panel_6', component: 'default', diff --git a/packages/dockview-core/src/gridview/branchNode.ts b/packages/dockview-core/src/gridview/branchNode.ts index 6295b3f88..ab5507128 100644 --- a/packages/dockview-core/src/gridview/branchNode.ts +++ b/packages/dockview-core/src/gridview/branchNode.ts @@ -149,7 +149,7 @@ export class BranchNode extends CompositeDisposable implements IView { : true, }; }), - size: this.size, + size: this.orthogonalSize, }; this.children = childDescriptors.map((c) => c.node); @@ -235,7 +235,7 @@ export class BranchNode extends CompositeDisposable implements IView { this._size = orthogonalSize; this._orthogonalSize = size; - this.splitview.layout(this.size, this.orthogonalSize); + this.splitview.layout(orthogonalSize, size); } public addChild( diff --git a/packages/dockview-core/src/gridview/gridview.ts b/packages/dockview-core/src/gridview/gridview.ts index b62ca8057..f4f1d35eb 100644 --- a/packages/dockview-core/src/gridview/gridview.ts +++ b/packages/dockview-core/src/gridview/gridview.ts @@ -400,8 +400,9 @@ export class Gridview implements IDisposable { orientation, this.proportionalLayout, this.styles, - orthogonalSize, // <- size - flips at each depth node.size, // <- orthogonal size - flips at each depth + orthogonalSize, // <- size - flips at each depth + children ); } else { @@ -457,8 +458,7 @@ export class Gridview implements IDisposable { if (oldRoot.children.length === 0) { // no data so no need to add anything back in - } else - if (oldRoot.children.length === 1) { + } else if (oldRoot.children.length === 1) { // can remove one level of redundant branching if there is only a single child const childReference = oldRoot.children[0]; const child = oldRoot.removeChild(0); // remove to prevent disposal when disposing of unwanted root