diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts index 8ce3e9d32..253cd4f1e 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts @@ -1919,7 +1919,7 @@ describe('dockviewComponent', () => { id: 'group-1', activeView: 'panel1', }, - size: 1000, + size: 500, }, ], size: 1000, diff --git a/packages/dockview-core/src/__tests__/gridview/gridview.spec.ts b/packages/dockview-core/src/__tests__/gridview/gridview.spec.ts index d796b888a..79cdd3de5 100644 --- a/packages/dockview-core/src/__tests__/gridview/gridview.spec.ts +++ b/packages/dockview-core/src/__tests__/gridview/gridview.spec.ts @@ -1,5 +1,31 @@ -import { Gridview } from '../../gridview/gridview'; -import { Orientation } from '../../splitview/splitview'; +import { Emitter, Event } from '../../events'; +import { BranchNode } from '../../gridview/branchNode'; +import { + Gridview, + IGridView, + IViewSize, + orthogonal, +} from '../../gridview/gridview'; +import { Orientation, Sizing } from '../../splitview/splitview'; + +class MockGridview implements IGridView { + minimumWidth: number = 0; + maximumWidth: number = Number.MAX_VALUE; + minimumHeight: number = 0; + maximumHeight: number = Number.MAX_VALUE; + onDidChange: Event = new Emitter< + IViewSize | undefined + >().event; + element: HTMLElement = document.createElement('div'); + + layout(width: number, height: number): void { + // + } + + toJSON(): object { + return {}; + } +} describe('gridview', () => { let container: HTMLElement; @@ -25,4 +51,69 @@ describe('gridview', () => { expect(container.childNodes.length).toBe(0); }); + + test('insertOrthogonalSplitviewAtRoot #1', () => { + const gridview = new Gridview( + false, + { separatorBorder: '' }, + Orientation.HORIZONTAL + ); + gridview.layout(1000, 1000); + + gridview.addView(new MockGridview(), Sizing.Distribute, [0]); + + gridview.insertOrthogonalSplitviewAtRoot(); + + gridview.addView(new MockGridview(), Sizing.Distribute, [1]); + + gridview.addView(new MockGridview(), Sizing.Distribute, [0, 1]); + + function checkOrientationFlipsAtEachLevel(root: BranchNode) { + const orientation = root.orientation; + const orthogonalOrientation = orthogonal(orientation); + + for (const child of root.children) { + if (child.orientation !== orthogonalOrientation) { + fail('child cannot have the same orientation as parent'); + } + if (child instanceof BranchNode) { + checkOrientationFlipsAtEachLevel(child); + } + } + } + + checkOrientationFlipsAtEachLevel((gridview as any).root as BranchNode); + }); + + test('insertOrthogonalSplitviewAtRoot #2', () => { + const gridview = new Gridview( + false, + { separatorBorder: '' }, + Orientation.HORIZONTAL + ); + gridview.layout(1000, 1000); + + gridview.addView(new MockGridview(), Sizing.Distribute, [0]); + gridview.addView(new MockGridview(), Sizing.Distribute, [1]); + + gridview.insertOrthogonalSplitviewAtRoot(); + + gridview.addView(new MockGridview(), Sizing.Distribute, [1]); + + function checkOrientationFlipsAtEachLevel(root: BranchNode) { + const orientation = root.orientation; + const orthogonalOrientation = orthogonal(orientation); + + for (const child of root.children) { + if (child.orientation !== orthogonalOrientation) { + fail('child cannot have the same orientation as parent'); + } + if (child instanceof BranchNode) { + checkOrientationFlipsAtEachLevel(child); + } + } + } + + checkOrientationFlipsAtEachLevel((gridview as any).root as BranchNode); + }); }); diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index 0cb6ee8e1..6d58c0b67 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -717,7 +717,7 @@ export class DockviewComponent if (itemId === undefined) { if (sourceGroup) { - this.moveGroup(sourceGroup, referenceGroup, target); + this.moveGroup(sourceGroup, referenceGroup, target); } return; } diff --git a/packages/dockview-core/src/gridview/gridview.ts b/packages/dockview-core/src/gridview/gridview.ts index 2e45405c1..37242cc33 100644 --- a/packages/dockview-core/src/gridview/gridview.ts +++ b/packages/dockview-core/src/gridview/gridview.ts @@ -464,7 +464,22 @@ export class Gridview implements IDisposable { const childReference = oldRoot.children[0]; oldRoot.removeChild(0); // remove to prevent disposal when disposing of unwanted root oldRoot.dispose(); - this._root.addChild(childReference, Sizing.Distribute, 0); + + this._root.addChild( + /** + * the child node will have the same orientation as the new root since + * we are removing the inbetween node. + * the entire 'tree' must be flipped recursively to ensure that the orientation + * flips at each level + */ + flipNode( + childReference, + childReference.orthogonalSize, + childReference.size + ), + Sizing.Distribute, + 0 + ); } else { this._root.addChild(oldRoot, Sizing.Distribute, 0); }