feat: onDidChange allow for orthogonalSize changes

packages/dockview/src/__tests__/splitview/core/splitview.spec.ts

@@ -14,7 +14,10 @@ class Testview implements IView {
     private _orthogonalSize = 0;
     private _priority: LayoutPriority | undefined;
 
-    private readonly _onDidChange = new Emitter<number | undefined>();
+    private readonly _onDidChange = new Emitter<{
+        size?: number;
+        orthogonalSize?: number;
+    }>();
     readonly onDidChange = this._onDidChange.event;
 
     private readonly _onLayoutCalled = new Emitter<void>();
@@ -62,7 +65,7 @@ class Testview implements IView {
         this._onLayoutCalled.fire();
     }
 
-    fireChangeEvent(value: number | undefined) {
+    fireChangeEvent(value: { size?: number; orthogonalSize?: number }) {
         this._onDidChange.fire(value);
     }
 
@@ -288,17 +291,17 @@ describe('splitview', () => {
         expect(view1.size).toBe(100);
         expect(view2.size).toBe(100);
 
-        view1.fireChangeEvent(65);
+        view1.fireChangeEvent({ size: 65 });
 
         expect(view1.size).toBe(65);
         expect(view2.size).toBe(135);
 
-        view2.fireChangeEvent(75);
+        view2.fireChangeEvent({ size: 75 });
 
         expect(view1.size).toBe(125);
         expect(view2.size).toBe(75);
 
-        view2.fireChangeEvent(undefined);
+        view2.fireChangeEvent({});
 
         expect(view1.size).toBe(125);
         expect(view2.size).toBe(75);

packages/dockview/src/dockview/dockviewComponent.ts

@@ -697,6 +697,8 @@ export class DockviewComponent
                     this._onDidDrop.fire({ ...event, api: this._api, group: view });
                 }),
                 view.model.onDidAddPanel((event) => {
+
+
                   this._onDidAddPanel.fire(event.panel);
                 }),
                 view.model.onDidRemovePanel((event) => {

packages/dockview/src/gridview/branchNode.ts

@@ -24,8 +24,12 @@ export class BranchNode extends CompositeDisposable implements IView {
     private _size: number;
     public readonly children: Node[] = [];
 
-    private readonly _onDidChange = new Emitter<number | undefined>();
-    readonly onDidChange: Event<number | undefined> = this._onDidChange.event;
+    private readonly _onDidChange = new Emitter<{
+        size?: number;
+        orthogonalSize?: number;
+    }>();
+    readonly onDidChange: Event<{ size?: number; orthogonalSize?: number }> =
+        this._onDidChange.event;
 
     get width(): number {
         return this.orientation === Orientation.HORIZONTAL
@@ -157,7 +161,7 @@ export class BranchNode extends CompositeDisposable implements IView {
         this.addDisposables(
             this._onDidChange,
             this.splitview.onDidSashEnd(() => {
-                this._onDidChange.fire(undefined);
+                this._onDidChange.fire({});
             })
         );
 
@@ -282,12 +286,12 @@ export class BranchNode extends CompositeDisposable implements IView {
 
         this._childrenDisposable = Event.any(
             ...this.children.map((c) => c.onDidChange)
-        )(() => {
+        )((e) => {
             /**
              * indicate a change has occured to allows any re-rendering but don't bubble
              * event because that was specific to this branch
              */
-            this._onDidChange.fire(undefined);
+            this._onDidChange.fire({ size: e.orthogonalSize });
         });
     }
 

packages/dockview/src/gridview/gridview.ts

@@ -269,8 +269,12 @@ export class Gridview implements IDisposable {
     public readonly element: HTMLElement;
     private disposable: MutableDisposable = new MutableDisposable();
 
-    private readonly _onDidChange = new Emitter<number | undefined>();
-    readonly onDidChange: Event<number | undefined> = this._onDidChange.event;
+    private readonly _onDidChange = new Emitter<{
+        size?: number;
+        orthogonalSize?: number;
+    }>();
+    readonly onDidChange: Event<{ size?: number; orthogonalSize?: number }> =
+        this._onDidChange.event;
 
     public serialize() {
         const root = serializeBranchNode(this.getView(), this.orientation);

packages/dockview/src/gridview/leafNode.ts

@@ -13,8 +13,12 @@ import { IGridView } from './gridview';
 import { IDisposable } from '../lifecycle';
 
 export class LeafNode implements IView {
-    private readonly _onDidChange = new Emitter<number | undefined>();
-    readonly onDidChange: Event<number | undefined> = this._onDidChange.event;
+    private readonly _onDidChange = new Emitter<{
+        size?: number;
+        orthogonalSize?: number;
+    }>();
+    readonly onDidChange: Event<{ size?: number; orthogonalSize?: number }> =
+        this._onDidChange.event;
     private _size: number;
     private _orthogonalSize: number;
     private _disposable: IDisposable;
@@ -102,13 +106,18 @@ export class LeafNode implements IView {
 
         this._disposable = this.view.onDidChange((event) => {
             if (event) {
-                this._onDidChange.fire(
-                    this.orientation === Orientation.VERTICAL
-                        ? event.width
-                        : event.height
-                );
+                this._onDidChange.fire({
+                    size:
+                        this.orientation === Orientation.VERTICAL
+                            ? event.width
+                            : event.height,
+                    orthogonalSize:
+                        this.orientation === Orientation.VERTICAL
+                            ? event.height
+                            : event.width,
+                });
             } else {
-                this._onDidChange.fire(undefined);
+                this._onDidChange.fire({});
             }
         });
     }
@@ -116,7 +125,7 @@ export class LeafNode implements IView {
     public setVisible(visible: boolean) {
         if (this.view.setVisible) {
             this.view.setVisible(visible);
-            this._onDidChange.fire(undefined);
+            this._onDidChange.fire({});
         }
     }
 

packages/dockview/src/paneview/paneviewPanel.ts

@@ -69,8 +69,12 @@ export abstract class PaneviewPanel
         { replay: true }
     );
     onDidChangeExpansionState = this._onDidChangeExpansionState.event;
-    private readonly _onDidChange = new Emitter<number | undefined>();
-    readonly onDidChange: Event<number | undefined> = this._onDidChange.event;
+    private readonly _onDidChange = new Emitter<{
+        size?: number;
+        orthogonalSize?: number;
+    }>();
+    readonly onDidChange: Event<{ size?: number; orthogonalSize?: number }> =
+        this._onDidChange.event;
 
     private headerSize = 22;
     private _orthogonalSize = 0;
@@ -171,7 +175,7 @@ export abstract class PaneviewPanel
 
         this.addDisposables(
             this.api.onDidSizeChange((event) => {
-                this._onDidChange.fire(event.size);
+                this._onDidChange.fire({ size: event.size });
             }),
             addDisposableListener(
                 this.element,
@@ -243,7 +247,7 @@ export abstract class PaneviewPanel
             }, 200);
         }
 
-        this._onDidChange.fire(expanded ? this.width : undefined);
+        this._onDidChange.fire(expanded ? { size: this.width } : {});
         this._onDidChangeExpansionState.fire(expanded);
     }
 

packages/dockview/src/splitview/core/splitview.ts

@@ -51,7 +51,7 @@ export interface IBaseView {
 
 export interface IView extends IBaseView {
     readonly element: HTMLElement | DocumentFragment;
-    readonly onDidChange: Event<number | undefined>;
+    readonly onDidChange: Event<{ size?: number; orthogonalSize?: number }>;
     layout(size: number, orthogonalSize: number): void;
     setVisible(visible: boolean): void;
 }
@@ -364,7 +364,7 @@ export class Splitview {
         }
 
         const disposable = view.onDidChange((newSize) =>
-            this.onDidChange(viewItem, newSize)
+            this.onDidChange(viewItem, newSize.size)
         );
 
         const dispose = () => {

packages/dockview/src/splitview/splitviewPanel.ts

@@ -31,8 +31,12 @@ export abstract class SplitviewPanel
 
     private _orientation?: Orientation;
 
-    private readonly _onDidChange = new Emitter<number | undefined>();
-    readonly onDidChange: Event<number | undefined> = this._onDidChange.event;
+    private readonly _onDidChange = new Emitter<{
+        size?: number;
+        orthogonalSize?: number;
+    }>();
+    readonly onDidChange: Event<{ size?: number; orthogonalSize?: number }> =
+        this._onDidChange.event;
 
     get priority(): LayoutPriority | undefined {
         return this._priority;
@@ -108,7 +112,7 @@ export abstract class SplitviewPanel
                 this.updateConstraints();
             }),
             this.api.onDidSizeChange((event) => {
-                this._onDidChange.fire(event.size);
+                this._onDidChange.fire({ size: event.size });
             })
         );
     }