wip

related to #112630

src/vs/base/browser/ui/grid/gridview.ts

@@ -307,7 +307,7 @@ class BranchNode implements ISplitView<ILayoutContext>, IDisposable {
 
 		if (!childDescriptors) {
 			// Normal behavior, we have no children yet, just set up the splitview
-			this.splitview = new SplitView(this.element, { orientation, styles, proportionalLayout });
+			this.splitview = new SplitView(this.element, { orientation, styles, proportionalLayout, manualLayout: true });
 			this.splitview.layout(size, { orthogonalSize, absoluteOffset: 0, absoluteOrthogonalOffset: 0, absoluteSize: size, absoluteOrthogonalSize: orthogonalSize });
 		} else {
 			// Reconstruction behavior, we want to reconstruct a splitview
@@ -325,7 +325,7 @@ class BranchNode implements ISplitView<ILayoutContext>, IDisposable {
 			const options = { proportionalLayout, orientation, styles };
 
 			this.children = childDescriptors.map(c => c.node);
-			this.splitview = new SplitView(this.element, { ...options, descriptor });
+			this.splitview = new SplitView(this.element, { ...options, descriptor, manualLayout: true });
 
 			this.children.forEach((node, index) => {
 				const first = index === 0;
@@ -830,6 +830,7 @@ export class GridView implements IDisposable {
 	private styles: IGridViewStyles;
 	private proportionalLayout: boolean;
 
+	private relayoutDisposable: IDisposable = Disposable.None;
 	private _root!: BranchNode;
 	private onDidSashResetRelay = new Relay<number[]>();
 	readonly onDidSashReset: Event<number[]> = this.onDidSashResetRelay.event;
@@ -844,6 +845,7 @@ export class GridView implements IDisposable {
 		const oldRoot = this._root;
 
 		if (oldRoot) {
+			this.relayoutDisposable.dispose();
 			this.element.removeChild(oldRoot.element);
 			oldRoot.dispose();
 		}
@@ -852,6 +854,7 @@ export class GridView implements IDisposable {
 		this.element.appendChild(root.element);
 		this.onDidSashResetRelay.input = root.onDidSashReset;
 		this._onDidChange.input = Event.map(root.onDidChange, () => undefined); // TODO
+		this.relayoutDisposable = root.onDidChange(e => this.layout(this.width, this.height));
 	}
 
 	get orientation(): Orientation {

src/vs/base/browser/ui/splitview/splitview.ts

@@ -33,6 +33,7 @@ export interface ISplitViewOptions<TLayoutContext = undefined> {
 	readonly inverseAltBehavior?: boolean;
 	readonly proportionalLayout?: boolean; // default true,
 	readonly descriptor?: ISplitViewDescriptor<TLayoutContext>;
+	readonly manualLayout?: boolean;
 }
 
 /**
@@ -227,6 +228,7 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
 	private state: State = State.Idle;
 	private inverseAltBehavior: boolean;
 	private proportionalLayout: boolean;
+	private manualLayout: boolean;
 
 	private _onDidSashChange = this._register(new Emitter<number>());
 	readonly onDidSashChange = this._onDidSashChange.event;
@@ -298,6 +300,7 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
 		this.orientation = types.isUndefined(options.orientation) ? Orientation.VERTICAL : options.orientation;
 		this.inverseAltBehavior = !!options.inverseAltBehavior;
 		this.proportionalLayout = types.isUndefined(options.proportionalLayout) ? true : !!options.proportionalLayout;
+		this.manualLayout = options.manualLayout ?? false;
 
 		this.el = document.createElement('div');
 		this.el.classList.add('monaco-split-view2');
@@ -682,7 +685,7 @@ export class SplitView<TLayoutContext = undefined> extends Disposable {
 			this.viewContainer.insertBefore(container, this.viewContainer.children.item(index));
 		}
 
-		const onChangeDisposable = view.onDidChange(size => this.onViewChange(item, size));
+		const onChangeDisposable = this.manualLayout ? Disposable.None : view.onDidChange(size => this.onViewChange(item, size));
 		const containerDisposable = toDisposable(() => this.viewContainer.removeChild(container));
 		const disposable = combinedDisposable(onChangeDisposable, containerDisposable);
 

src/vs/base/test/browser/ui/grid/grid.test.ts

@@ -1077,4 +1077,40 @@ suite('SerializableGrid', function () {
 		assert.deepEqual(grid2.isViewVisible(view4Copy), true);
 		assert.deepEqual(grid2.isViewVisible(view5Copy), true);
 	});
+
+	test('limit layout calls', function () {
+		const view1 = new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE);
+		const view2 = new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE);
+		const view3 = new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE);
+		const view4 = new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE);
+		const view5 = new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE);
+
+		const grid = new Grid(view1);
+		container.appendChild(grid.element);
+
+		grid.layout(800, 600);
+		grid.addView(view2, 200, view1, Direction.Up);
+		grid.addView(view3, 200, view1, Direction.Right);
+		grid.addView(view4, 200, view2, Direction.Left);
+		grid.addView(view5, 100, view1, Direction.Down);
+
+		let view1LayoutCount = 0;
+		view1.onDidChange(_ => view1LayoutCount++);
+		let view2LayoutCount = 0;
+		view2.onDidChange(_ => view2LayoutCount++);
+		let view3LayoutCount = 0;
+		view3.onDidChange(_ => view3LayoutCount++);
+		let view4LayoutCount = 0;
+		view4.onDidChange(_ => view4LayoutCount++);
+		let view5LayoutCount = 0;
+		view5.onDidChange(_ => view5LayoutCount++);
+
+		view2.minimumWidth = view2.minimumWidth; // trigger onDidChange
+
+		assert.deepStrictEqual(view1LayoutCount, 1);
+		assert.deepStrictEqual(view2LayoutCount, 1);
+		assert.deepStrictEqual(view3LayoutCount, 1);
+		assert.deepStrictEqual(view4LayoutCount, 1);
+		assert.deepStrictEqual(view5LayoutCount, 1);
+	});
 });