multi sash resize groundwork

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

@@ -7,7 +7,7 @@
 
 import 'vs/css!./gridview';
 import { Event, anyEvent, Emitter, mapEvent, Relay } from 'vs/base/common/event';
-import { Orientation } from 'vs/base/browser/ui/sash/sash';
+import { Orientation, Sash } from 'vs/base/browser/ui/sash/sash';
 import { SplitView, IView as ISplitView, Sizing } from 'vs/base/browser/ui/splitview/splitview';
 import { empty as EmptyDisposable, IDisposable } from 'vs/base/common/lifecycle';
 import { $, append } from 'vs/base/browser/dom';
@@ -122,6 +122,11 @@ class BranchNode implements ISplitView, IDisposable {
 	private splitviewSashResetDisposable: IDisposable = EmptyDisposable;
 	private childrenSashResetDisposable: IDisposable = EmptyDisposable;
 
+	get orthogonalStartSash(): Sash | undefined { return this.splitview.orthogonalStartSash; }
+	set orthogonalStartSash(sash: Sash | undefined) { this.splitview.orthogonalStartSash = sash; }
+	get orthogonalEndSash(): Sash | undefined { return this.splitview.orthogonalEndSash; }
+	set orthogonalEndSash(sash: Sash | undefined) { this.splitview.orthogonalEndSash = sash; }
+
 	constructor(
 		readonly orientation: Orientation,
 		size: number = 0,
@@ -134,7 +139,7 @@ class BranchNode implements ISplitView, IDisposable {
 		this.children = [];
 
 		this.element = $('.monaco-grid-branch-node');
-		this.splitview = new SplitView(this.element, { orientation: this.orientation });
+		this.splitview = new SplitView(this.element, { orientation });
 		this.splitview.layout(size);
 
 		const onDidSashReset = mapEvent(this.splitview.onDidSashReset, i => [i]);
@@ -161,6 +166,8 @@ class BranchNode implements ISplitView, IDisposable {
 
 		this.splitview.addView(node, size, index);
 		this.children.splice(index, 0, node);
+		node.orthogonalStartSash = this.splitview.sashes[index - 1];
+		node.orthogonalEndSash = this.splitview.sashes[index];
 		this.onDidChildrenChange();
 	}
 
@@ -188,6 +195,7 @@ class BranchNode implements ISplitView, IDisposable {
 		}
 
 		this.splitview.swapViews(from, to);
+		[this.children[from].orthogonalStartSash, this.children[from].orthogonalEndSash, this.children[to].orthogonalStartSash, this.children[to].orthogonalEndSash] = [this.children[to].orthogonalStartSash, this.children[to].orthogonalEndSash, this.children[from].orthogonalStartSash, this.children[from].orthogonalEndSash];
 		[this.children[from], this.children[to]] = [this.children[to], this.children[from]];
 	}
 
@@ -285,6 +293,14 @@ class LeafNode implements ISplitView, IDisposable {
 		return mapEvent(this.view.onDidChange, this.orientation === Orientation.HORIZONTAL ? ({ width }) => width : ({ height }) => height);
 	}
 
+	set orthogonalStartSash(sash: Sash) {
+		// noop
+	}
+
+	set orthogonalEndSash(sash: Sash) {
+		// noop
+	}
+
 	layout(size: number): void {
 		this._size = size;
 		return this.view.layout(this.width, this.height);

src/vs/base/browser/ui/sash/sash.css

@@ -14,13 +14,43 @@
 	top: 0;
 	width: 5px;
 	height: 100%;
+	background: red;
+}
+
+.monaco-sash.orthogonal-start::before,
+.monaco-sash.orthogonal-end::after {
+	content: ' ';
+	height: 5px;
+	width: 5px;
+	background: green;
+	z-index: 100;
+	display: block;
+	cursor: all-scroll;
+	position: absolute;
+}
+
+.monaco-sash.orthogonal-start.vertical::before {
+	top: -2.5px;
+}
+
+.monaco-sash.orthogonal-end.vertical::after {
+	bottom: -2.5px;
+}
+
+.monaco-sash.orthogonal-start.horizontal::before {
+	left: -2.5px;
+}
+
+.monaco-sash.orthogonal-end.horizontal::after {
+	right: -2.5px;
 }
 
 .monaco-sash.horizontal {
 	cursor: ns-resize;
 	left: 0;
 	width: 100%;
 	height: 5px;
+	background: blue;
 }
 
 .monaco-sash.disabled {
@@ -45,4 +75,4 @@
 
 .monaco-sash.touch.horizontal {
 	height: 20px;
-}
+}

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

@@ -40,6 +40,8 @@ export interface ISashEvent {
 
 export interface ISashOptions {
 	orientation?: Orientation;
+	orthogonalStartSash?: Sash;
+	orthogonalEndSash?: Sash;
 }
 
 export enum Orientation {
@@ -84,6 +86,38 @@ export class Sash {
 	private readonly _onDidEnd = new Emitter<void>();
 	readonly onDidEnd: Event<void> = this._onDidEnd.event;
 
+	private orthogonalStartSashDisposables: IDisposable[] = [];
+	private _orthogonalStartSash: Sash | undefined;
+	get orthogonalStartSash(): Sash | undefined { return this._orthogonalStartSash; }
+	set orthogonalStartSash(sash: Sash | undefined) {
+		this.orthogonalStartSashDisposables = dispose(this.orthogonalStartSashDisposables);
+
+		if (sash) {
+			sash.onDidEnablementChange(this.onOrthogonalStartSashEnablementChange, this, this.orthogonalStartSashDisposables);
+			this.onOrthogonalStartSashEnablementChange(sash.enabled);
+		} else {
+			this.onOrthogonalStartSashEnablementChange(false);
+		}
+
+		this._orthogonalStartSash = sash;
+	}
+
+	private orthogonalEndSashDisposables: IDisposable[] = [];
+	private _orthogonalEndSash: Sash | undefined;
+	get orthogonalEndSash(): Sash | undefined { return this._orthogonalEndSash; }
+	set orthogonalEndSash(sash: Sash | undefined) {
+		this.orthogonalEndSashDisposables = dispose(this.orthogonalEndSashDisposables);
+
+		if (sash) {
+			sash.onDidEnablementChange(this.onOrthogonalEndSashEnablementChange, this, this.orthogonalEndSashDisposables);
+			this.onOrthogonalEndSashEnablementChange(sash.enabled);
+		} else {
+			this.onOrthogonalEndSashEnablementChange(false);
+		}
+
+		this._orthogonalEndSash = sash;
+	}
+
 	constructor(container: HTMLElement, layoutProvider: ISashLayoutProvider, options: ISashOptions = {}) {
 		this.el = append(container, $('.monaco-sash'));
 
@@ -106,6 +140,9 @@ export class Sash {
 
 		this.hidden = false;
 		this.layoutProvider = layoutProvider;
+
+		this.orthogonalStartSash = options.orthogonalStartSash;
+		this.orthogonalEndSash = options.orthogonalEndSash;
 	}
 
 	setOrientation(orientation: Orientation): void {
@@ -281,6 +318,22 @@ export class Sash {
 		return this.hidden;
 	}
 
+	private onOrthogonalStartSashEnablementChange(enabled: boolean): void {
+		if (enabled) {
+			addClass(this.el, 'orthogonal-start');
+		} else {
+			removeClass(this.el, 'orthogonal-start');
+		}
+	}
+
+	private onOrthogonalEndSashEnablementChange(enabled: boolean): void {
+		if (enabled) {
+			addClass(this.el, 'orthogonal-end');
+		} else {
+			removeClass(this.el, 'orthogonal-end');
+		}
+	}
+
 	dispose(): void {
 		if (this.el && this.el.parentElement) {
 			this.el.parentElement.removeChild(this.el);

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

@@ -5,7 +5,13 @@
 
 .monaco-split-view2 {
 	position: relative;
-	overflow: hidden;
+	/* overflow: hidden; */
+	width: 100%;
+	height: 100%;
+}
+
+.monaco-split-view2 > .sash-container {
+	position: absolute;
 	width: 100%;
 	height: 100%;
 }
@@ -17,7 +23,7 @@
 }
 
 .monaco-split-view2 > .split-view-container > .split-view-view {
-	overflow: hidden;
+	/* overflow: hidden; */
 	white-space: initial;
 }
 

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

@@ -17,6 +17,8 @@ export { Orientation } from 'vs/base/browser/ui/sash/sash';
 
 export interface ISplitViewOptions {
 	orientation?: Orientation; // default Orientation.VERTICAL
+	orthogonalStartSash?: Sash;
+	orthogonalEndSash?: Sash;
 }
 
 export interface IView {
@@ -107,8 +109,9 @@ export namespace Sizing {
 
 export class SplitView implements IDisposable {
 
-	private orientation: Orientation;
+	readonly orientation: Orientation;
 	private el: HTMLElement;
+	private sashContainer: HTMLElement;
 	private viewContainer: HTMLElement;
 	private size = 0;
 	private contentSize = 0;
@@ -126,6 +129,30 @@ export class SplitView implements IDisposable {
 		return this.viewItems.length;
 	}
 
+	private _orthogonalStartSash: Sash | undefined;
+	get orthogonalStartSash(): Sash | undefined { return this._orthogonalStartSash; }
+	set orthogonalStartSash(sash: Sash | undefined) {
+		for (const sashItem of this.sashItems) {
+			sashItem.sash.orthogonalStartSash = sash;
+		}
+
+		this._orthogonalStartSash = sash;
+	}
+
+	private _orthogonalEndSash: Sash | undefined;
+	get orthogonalEndSash(): Sash | undefined { return this._orthogonalEndSash; }
+	set orthogonalEndSash(sash: Sash | undefined) {
+		for (const sashItem of this.sashItems) {
+			sashItem.sash.orthogonalEndSash = sash;
+		}
+
+		this._orthogonalEndSash = sash;
+	}
+
+	get sashes(): Sash[] {
+		return this.sashItems.map(s => s.sash);
+	}
+
 	constructor(container: HTMLElement, options: ISplitViewOptions = {}) {
 		this.orientation = types.isUndefined(options.orientation) ? Orientation.VERTICAL : options.orientation;
 
@@ -134,9 +161,8 @@ export class SplitView implements IDisposable {
 		dom.addClass(this.el, this.orientation === Orientation.VERTICAL ? 'vertical' : 'horizontal');
 		container.appendChild(this.el);
 
-		this.viewContainer = document.createElement('div');
-		dom.addClass(this.viewContainer, 'split-view-container');
-		this.el.appendChild(this.viewContainer);
+		this.sashContainer = dom.append(this.el, dom.$('.sash-container'));
+		this.viewContainer = dom.append(this.el, dom.$('.split-view-container'));
 	}
 
 	addView(view: IView, size: number | Sizing, index = this.viewItems.length): void {
@@ -185,7 +211,11 @@ export class SplitView implements IDisposable {
 		if (this.viewItems.length > 1) {
 			const orientation = this.orientation === Orientation.VERTICAL ? Orientation.HORIZONTAL : Orientation.VERTICAL;
 			const layoutProvider = this.orientation === Orientation.VERTICAL ? { getHorizontalSashTop: sash => this.getSashPosition(sash) } : { getVerticalSashLeft: sash => this.getSashPosition(sash) };
-			const sash = new Sash(this.el, layoutProvider, { orientation });
+			const sash = new Sash(this.sashContainer, layoutProvider, {
+				orientation,
+				orthogonalStartSash: this.orthogonalStartSash,
+				orthogonalEndSash: this.orthogonalEndSash
+			});
 			const sashEventMapper = this.orientation === Orientation.VERTICAL
 				? (e: IBaseSashEvent) => ({ sash, start: e.startY, current: e.currentY })
 				: (e: IBaseSashEvent) => ({ sash, start: e.startX, current: e.currentX });