microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-07-13 20:06:25 -05:00
Code Issues Packages Projects Releases 177 Wiki Activity

better grid 2x2

Browse Source 
fixes #52333
This commit is contained in:
Joao Moreno
2018-06-20 15:55:05 +02:00
parent 76cdeb7948
commit 4dbe064b41
2 changed files with 85 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/vs/base/browser/ui/grid/grid.ts
View File

@@ -467,7 +467,6 @@ export class SerializableGrid<T extends ISerializableView> extends Grid<T> {
result.orientation = orientation;
result.restoreViews(firstLeaf.view, orientation, root);
result.initialLayoutContext = { width, height, root };
result.gridview.trySet2x2();
return result;
}
@@ -496,6 +495,8 @@ export class SerializableGrid<T extends ISerializableView> extends Grid<T> {
this.restoreViewsSize([], this.initialLayoutContext.root, this.orientation, widthScale, heightScale);
this.initialLayoutContext = undefined;
this.gridview.trySet2x2();
}
}

98
src/vs/base/browser/ui/grid/gridview.ts
View File

@@ -75,7 +75,7 @@ export interface IGridViewOptions {
class BranchNode implements ISplitView, IDisposable {
readonly element: HTMLElement;
readonly children: Node[];
readonly children: Node[] = [];
private splitview: SplitView;
private _size: number;
@@ -127,8 +127,9 @@ class BranchNode implements ISplitView, IDisposable {
return this.orientation === Orientation.HORIZONTAL ? this.maximumSize : this.maximumOrthogonalSize;
}
private _onDidChange: Emitter<number | undefined>;
get onDidChange(): Event<number | undefined> { return this._onDidChange.event; }
private _onDidChange = new Emitter<number | undefined>();
readonly onDidChange: Event<number | undefined> = this._onDidChange.event;
private childrenChangeDisposable: IDisposable = EmptyDisposable;
private _onDidSashReset = new Emitter<number[]>();
@@ -151,9 +152,6 @@ class BranchNode implements ISplitView, IDisposable {
this._size = size;
this._orthogonalSize = orthogonalSize;
this._onDidChange = new Emitter<number | undefined>();
this.children = [];
this.element = $('.monaco-grid-branch-node');
this.splitview = new SplitView(this.element, { orientation, styles });
this.splitview.layout(size);
@@ -297,11 +295,44 @@ class BranchNode implements ISplitView, IDisposable {
return EmptyDisposable;
}
const [firstChild, secondChild] = this.children;
const [otherFirstChild, otherSecondChild] = other.children;
if (!(firstChild instanceof LeafNode) || !(secondChild instanceof LeafNode)) {
return EmptyDisposable;
}
if (!(otherFirstChild instanceof LeafNode) || !(otherSecondChild instanceof LeafNode)) {
return EmptyDisposable;
}
if (this.orientation === Orientation.VERTICAL) {
secondChild.linkedWidthNode = otherFirstChild.linkedHeightNode = firstChild;
firstChild.linkedWidthNode = otherSecondChild.linkedHeightNode = secondChild;
otherSecondChild.linkedWidthNode = firstChild.linkedHeightNode = otherFirstChild;
otherFirstChild.linkedWidthNode = secondChild.linkedHeightNode = otherSecondChild;
} else {
otherFirstChild.linkedWidthNode = secondChild.linkedHeightNode = firstChild;
otherSecondChild.linkedWidthNode = firstChild.linkedHeightNode = secondChild;
firstChild.linkedWidthNode = otherSecondChild.linkedHeightNode = otherFirstChild;
secondChild.linkedWidthNode = otherFirstChild.linkedHeightNode = otherSecondChild;
}
const mySash = this.splitview.sashes[0];
const otherSash = other.splitview.sashes[0];
mySash.linkedSash = otherSash;
otherSash.linkedSash = mySash;
return toDisposable(() => mySash.linkedSash = otherSash.linkedSash = undefined);
this._onDidChange.fire();
other._onDidChange.fire();
return toDisposable(() => {
mySash.linkedSash = otherSash.linkedSash = undefined;
firstChild.linkedHeightNode = firstChild.linkedWidthNode = undefined;
secondChild.linkedHeightNode = secondChild.linkedWidthNode = undefined;
otherFirstChild.linkedHeightNode = otherFirstChild.linkedWidthNode = undefined;
otherSecondChild.linkedHeightNode = otherSecondChild.linkedWidthNode = undefined;
});
}
dispose(): void {
@@ -326,12 +357,37 @@ class LeafNode implements ISplitView, IDisposable {
readonly onDidSashReset: Event<number[]> = Event.None;
private _onDidLinkedWidthNodeChange = new Relay<number | undefined>();
private _linkedWidthNode: LeafNode | undefined = undefined;
get linkedWidthNode(): LeafNode | undefined { return this._linkedWidthNode; }
set linkedWidthNode(node: LeafNode | undefined) {
this._onDidLinkedWidthNodeChange.input = node ? node._onDidViewChange : Event.None;
this._linkedWidthNode = node;
this._onDidSetLinkedNode.fire();
}
private _onDidLinkedHeightNodeChange = new Relay<number | undefined>();
private _linkedHeightNode: LeafNode | undefined = undefined;
get linkedHeightNode(): LeafNode | undefined { return this._linkedHeightNode; }
set linkedHeightNode(node: LeafNode | undefined) {
this._onDidLinkedHeightNodeChange.input = node ? node._onDidViewChange : Event.None;
this._linkedHeightNode = node;
this._onDidSetLinkedNode.fire();
}
private _onDidSetLinkedNode = new Emitter<number | undefined>();
private _onDidViewChange: Event<number | undefined>;
readonly onDidChange: Event<number | undefined>;
constructor(
readonly view: IView,
readonly orientation: Orientation,
orthogonalSize: number = 0
) {
this._orthogonalSize = orthogonalSize;
this._onDidViewChange = mapEvent(this.view.onDidChange, this.orientation === Orientation.HORIZONTAL ? e => e && e.width : e => e && e.height);
this.onDidChange = anyEvent(this._onDidViewChange, this._onDidSetLinkedNode.event, this._onDidLinkedWidthNodeChange.event, this._onDidLinkedHeightNodeChange.event);
}
get width(): number {
@@ -346,24 +402,36 @@ class LeafNode implements ISplitView, IDisposable {
return this.view.element;
}
private get minimumWidth(): number {
return this.linkedWidthNode ? Math.max(this.linkedWidthNode.view.minimumWidth, this.view.minimumWidth) : this.view.minimumWidth;
}
private get maximumWidth(): number {
return this.linkedWidthNode ? Math.min(this.linkedWidthNode.view.maximumWidth, this.view.maximumWidth) : this.view.maximumWidth;
}
private get minimumHeight(): number {
return this.linkedHeightNode ? Math.max(this.linkedHeightNode.view.minimumHeight, this.view.minimumHeight) : this.view.minimumHeight;
}
private get maximumHeight(): number {
return this.linkedHeightNode ? Math.min(this.linkedHeightNode.view.maximumHeight, this.view.maximumHeight) : this.view.maximumHeight;
}
get minimumSize(): number {
return this.orientation === Orientation.HORIZONTAL ? this.view.minimumHeight : this.view.minimumWidth;
return this.orientation === Orientation.HORIZONTAL ? this.minimumHeight : this.minimumWidth;
}
get maximumSize(): number {
return this.orientation === Orientation.HORIZONTAL ? this.view.maximumHeight : this.view.maximumWidth;
return this.orientation === Orientation.HORIZONTAL ? this.maximumHeight : this.maximumWidth;
}
get minimumOrthogonalSize(): number {
return this.orientation === Orientation.HORIZONTAL ? this.view.minimumWidth : this.view.minimumHeight;
return this.orientation === Orientation.HORIZONTAL ? this.minimumWidth : this.minimumHeight;
}
get maximumOrthogonalSize(): number {
return this.orientation === Orientation.HORIZONTAL ? this.view.maximumWidth : this.view.maximumHeight;
}
get onDidChange(): Event<number> {
return mapEvent(this.view.onDidChange, this.orientation === Orientation.HORIZONTAL ? e => e && e.width : e => e && e.height);
return this.orientation === Orientation.HORIZONTAL ? this.maximumWidth : this.maximumHeight;
}
set orthogonalStartSash(sash: Sash) {