bug: flip orientation when removing intermediate node

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,

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<IViewSize | undefined> = 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);
+    });
 });

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;
         }

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);
         }