Fix sash corners when moving views around (microsoft#186624)

fixes microsoft#186508

Author: joaomoreno

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

@@ -356,6 +356,13 @@ class BranchNode implements ISplitView<ILayoutContext>, IDisposable {
 	private _boundarySashes: IRelativeBoundarySashes = {};
 	get boundarySashes(): IRelativeBoundarySashes { return this._boundarySashes; }
 	set boundarySashes(boundarySashes: IRelativeBoundarySashes) {
+		if (this._boundarySashes.start === boundarySashes.start
+			&& this._boundarySashes.end === boundarySashes.end
+			&& this._boundarySashes.orthogonalStart === boundarySashes.orthogonalStart
+			&& this._boundarySashes.orthogonalEnd === boundarySashes.orthogonalEnd) {
+			return;
+		}
+
 		this._boundarySashes = boundarySashes;
 
 		this.splitview.orthogonalStartSash = boundarySashes.orthogonalStart;
@@ -498,65 +505,20 @@ class BranchNode implements ISplitView<ILayoutContext>, IDisposable {
 		index = validateIndex(index, this.children.length);
 
 		this.splitview.addView(node, size, index, skipLayout);
-		this._addChild(node, index);
-		this.onDidChildrenChange();
-	}
-
-	private _addChild(node: Node, index: number): void {
-		const first = index === 0;
-		const last = index === this.children.length;
 		this.children.splice(index, 0, node);
 
-		node.boundarySashes = {
-			start: this.boundarySashes.orthogonalStart,
-			end: this.boundarySashes.orthogonalEnd,
-			orthogonalStart: first ? this.boundarySashes.start : this.splitview.sashes[index - 1],
-			orthogonalEnd: last ? this.boundarySashes.end : this.splitview.sashes[index],
-		};
-
-		if (!first) {
-			this.children[index - 1].boundarySashes = {
-				...this.children[index - 1].boundarySashes,
-				orthogonalEnd: this.splitview.sashes[index - 1]
-			};
-		}
-
-		if (!last) {
-			this.children[index + 1].boundarySashes = {
-				...this.children[index + 1].boundarySashes,
-				orthogonalStart: this.splitview.sashes[index]
-			};
-		}
+		this.updateBoundarySashes();
+		this.onDidChildrenChange();
 	}
 
 	removeChild(index: number, sizing?: Sizing): void {
 		index = validateIndex(index, this.children.length);
 
 		this.splitview.removeView(index, sizing);
-		this._removeChild(index);
-		this.onDidChildrenChange();
-	}
+		this.children.splice(index, 1);
 
-	private _removeChild(index: number): Node {
-		const first = index === 0;
-		const last = index === this.children.length - 1;
-		const [child] = this.children.splice(index, 1);
-
-		if (!first) {
-			this.children[index - 1].boundarySashes = {
-				...this.children[index - 1].boundarySashes,
-				orthogonalEnd: this.splitview.sashes[index - 1]
-			};
-		}
-
-		if (!last) { // [0,1,2,3] (2) => [0,1,3]
-			this.children[index].boundarySashes = {
-				...this.children[index].boundarySashes,
-				orthogonalStart: this.splitview.sashes[Math.max(index - 1, 0)]
-			};
-		}
-
-		return child;
+		this.updateBoundarySashes();
+		this.onDidChildrenChange();
 	}
 
 	moveChild(from: number, to: number): void {
@@ -568,14 +530,13 @@ class BranchNode implements ISplitView<ILayoutContext>, IDisposable {
 		}
 
 		if (from < to) {
-			to--;
+			to -= 1;
 		}
 
 		this.splitview.moveView(from, to);
+		this.children.splice(to, 0, this.children.splice(from, 1)[0]);
 
-		const child = this._removeChild(from);
-		this._addChild(child, to);
-
+		this.updateBoundarySashes();
 		this.onDidChildrenChange();
 	}
 
@@ -649,6 +610,17 @@ class BranchNode implements ISplitView<ILayoutContext>, IDisposable {
 		return this.splitview.getViewCachedVisibleSize(index);
 	}
 
+	private updateBoundarySashes(): void {
+		for (let i = 0; i < this.children.length; i++) {
+			this.children[i].boundarySashes = {
+				start: this.boundarySashes.orthogonalStart,
+				end: this.boundarySashes.orthogonalEnd,
+				orthogonalStart: i === 0 ? this.boundarySashes.start : this.splitview.sashes[i - 1],
+				orthogonalEnd: i === this.children.length - 1 ? this.boundarySashes.end : this.splitview.sashes[i],
+			};
+		}
+	}
+
 	private onDidChildrenChange(): void {
 		this.updateChildrenEvents();
 		this._onDidChange.fire(undefined);

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

@@ -328,6 +328,10 @@ export class Sash extends Disposable {
 	 * The start of a vertical sash is its top-most position.
 	 */
 	set orthogonalStartSash(sash: Sash | undefined) {
+		if (this._orthogonalStartSash === sash) {
+			return;
+		}
+
 		this.orthogonalStartDragHandleDisposables.clear();
 		this.orthogonalStartSashDisposables.clear();
 
@@ -362,6 +366,10 @@ export class Sash extends Disposable {
 	 */
 
 	set orthogonalEndSash(sash: Sash | undefined) {
+		if (this._orthogonalEndSash === sash) {
+			return;
+		}
+
 		this.orthogonalEndDragHandleDisposables.clear();
 		this.orthogonalEndSashDisposables.clear();