Merge from vscode ec07311dab2556c9d66a4cb3eecdc21c524202e1 (#6739)

This commit is contained in:
Anthony Dresser
2019-08-13 19:14:03 -07:00
committed by GitHub
parent a645a09f42
commit 82c1c57c76
77 changed files with 1319 additions and 741 deletions

View File

@@ -76,6 +76,11 @@ export class LayoutController implements ILayoutController {
constructor(public isLayoutEnabled: boolean) { }
}
export class MultiplexLayoutController implements ILayoutController {
get isLayoutEnabled(): boolean { return this.layoutControllers.every(l => l.isLayoutEnabled); }
constructor(private layoutControllers: ILayoutController[]) { }
}
export interface IGridViewOptions {
readonly styles?: IGridViewStyles;
readonly proportionalLayout?: boolean; // default true
@@ -170,6 +175,7 @@ class BranchNode implements ISplitView, IDisposable {
constructor(
readonly orientation: Orientation,
readonly layoutController: ILayoutController,
styles: IGridViewStyles,
readonly proportionalLayout: boolean,
size: number = 0,
@@ -181,7 +187,7 @@ class BranchNode implements ISplitView, IDisposable {
this.element = $('.monaco-grid-branch-node');
this.splitview = new SplitView(this.element, { orientation, styles, proportionalLayout });
this.splitview.layout(size);
this.splitview.layout(size, orthogonalSize);
const onDidSashReset = Event.map(this.splitview.onDidSashReset, i => [i]);
this.splitviewSashResetDisposable = onDidSashReset(this._onDidSashReset.fire, this._onDidSashReset);
@@ -198,12 +204,20 @@ class BranchNode implements ISplitView, IDisposable {
}
}
layout(size: number): void {
layout(size: number, orthogonalSize: number | undefined): void {
if (!this.layoutController.isLayoutEnabled) {
return;
}
if (typeof orthogonalSize !== 'number') {
throw new Error('Invalid state');
}
// branch nodes should flip the normal/orthogonal directions
this._size = orthogonalSize;
this._orthogonalSize = size;
for (const child of this.children) {
child.orthogonalLayout(size);
}
this.splitview.layout(orthogonalSize, size);
}
setVisible(visible: boolean): void {
@@ -212,11 +226,6 @@ class BranchNode implements ISplitView, IDisposable {
}
}
orthogonalLayout(size: number): void {
this._size = size;
this.splitview.layout(size);
}
addChild(node: Node, size: number | Sizing, index: number): void {
if (index < 0 || index > this.children.length) {
throw new Error('Invalid index');
@@ -347,6 +356,10 @@ class BranchNode implements ISplitView, IDisposable {
throw new Error('Invalid index');
}
if (this.splitview.isViewVisible(index) === visible) {
return;
}
this.splitview.setViewVisible(index, visible);
this._onDidChange.fire(undefined);
}
@@ -539,12 +552,18 @@ class LeafNode implements ISplitView, IDisposable {
// noop
}
layout(size: number): void {
this._size = size;
if (this.layoutController.isLayoutEnabled) {
this.view.layout(this.width, this.height, orthogonal(this.orientation));
layout(size: number, orthogonalSize: number | undefined): void {
if (!this.layoutController.isLayoutEnabled) {
return;
}
if (typeof orthogonalSize !== 'number') {
throw new Error('Invalid state');
}
this._size = size;
this._orthogonalSize = orthogonalSize;
this.view.layout(this.width, this.height, orthogonal(this.orientation));
}
setVisible(visible: boolean): void {
@@ -553,14 +572,6 @@ class LeafNode implements ISplitView, IDisposable {
}
}
orthogonalLayout(size: number): void {
this._orthogonalSize = size;
if (this.layoutController.isLayoutEnabled) {
this.view.layout(this.width, this.height, orthogonal(this.orientation));
}
}
dispose(): void { }
}
@@ -568,7 +579,7 @@ type Node = BranchNode | LeafNode;
function flipNode<T extends Node>(node: T, size: number, orthogonalSize: number): T {
if (node instanceof BranchNode) {
const result = new BranchNode(orthogonal(node.orientation), node.styles, node.proportionalLayout, size, orthogonalSize);
const result = new BranchNode(orthogonal(node.orientation), node.layoutController, node.styles, node.proportionalLayout, size, orthogonalSize);
let totalSize = 0;
@@ -589,7 +600,7 @@ function flipNode<T extends Node>(node: T, size: number, orthogonalSize: number)
return result as T;
} else {
return new LeafNode((node as LeafNode).view, orthogonal(node.orientation), (node as LeafNode).layoutController, orthogonalSize) as T;
return new LeafNode((node as LeafNode).view, orthogonal(node.orientation), node.layoutController, orthogonalSize) as T;
}
}
@@ -634,8 +645,7 @@ export class GridView implements IDisposable {
const { size, orthogonalSize } = this._root;
this.root = flipNode(this._root, orthogonalSize, size);
this.root.layout(size);
this.root.orthogonalLayout(orthogonalSize);
this.root.layout(size, orthogonalSize);
}
get width(): number { return this.root.width; }
@@ -649,14 +659,25 @@ export class GridView implements IDisposable {
private _onDidChange = new Relay<IViewSize | undefined>();
readonly onDidChange = this._onDidChange.event;
/**
* The first layout controller makes sure layout only propagates
* to the views after the very first call to gridview.layout()
*/
private firstLayoutController: LayoutController;
private layoutController: LayoutController;
constructor(options: IGridViewOptions = {}) {
this.element = $('.monaco-grid-view');
this.styles = options.styles || defaultStyles;
this.proportionalLayout = typeof options.proportionalLayout !== 'undefined' ? !!options.proportionalLayout : true;
this.root = new BranchNode(Orientation.VERTICAL, this.styles, this.proportionalLayout);
this.layoutController = options.layoutController || new LayoutController(true);
this.firstLayoutController = new LayoutController(false);
this.layoutController = new MultiplexLayoutController([
this.firstLayoutController,
...(options.layoutController ? [options.layoutController] : [])
]);
this.root = new BranchNode(Orientation.VERTICAL, this.layoutController, this.styles, this.proportionalLayout);
}
style(styles: IGridViewStyles): void {
@@ -665,9 +686,10 @@ export class GridView implements IDisposable {
}
layout(width: number, height: number): void {
this.firstLayoutController.isLayoutEnabled = true;
const [size, orthogonalSize] = this.root.orientation === Orientation.HORIZONTAL ? [height, width] : [width, height];
this.root.layout(size);
this.root.orthogonalLayout(orthogonalSize);
this.root.layout(size, orthogonalSize);
}
addView(view: IView, size: number | Sizing, location: number[]): void {
@@ -694,9 +716,8 @@ export class GridView implements IDisposable {
grandParent.removeChild(parentIndex);
const newParent = new BranchNode(parent.orientation, this.styles, this.proportionalLayout, parent.size, parent.orthogonalSize);
const newParent = new BranchNode(parent.orientation, parent.layoutController, this.styles, this.proportionalLayout, parent.size, parent.orthogonalSize);
grandParent.addChild(newParent, parent.size, parentIndex);
newParent.orthogonalLayout(parent.orthogonalSize);
const newSibling = new LeafNode(parent.view, grandParent.orientation, this.layoutController, parent.size);
newParent.addChild(newSibling, newSiblingSize, 0);
@@ -827,9 +848,6 @@ export class GridView implements IDisposable {
fromParent.addChild(toNode, fromSize, fromIndex);
toParent.addChild(fromNode, toSize, toIndex);
fromParent.layout(fromParent.orthogonalSize);
toParent.layout(toParent.orthogonalSize);
}
}