Skip to content

Commit c5ef6da

Browse files
joaomorenojoaomoreno
committed
center view: do not reset grid
1 parent 9481b20 commit c5ef6da

5 files changed

Lines changed: 89 additions & 73 deletions

File tree

‎src/vs/base/browser/ui/centered/centeredViewLayout.css‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/vs/base/browser/ui/centered/centeredViewLayout.ts‎

Lines changed: 32 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,12 @@
33
* Licensed under the MIT License. See License.txt in the project root for license information.
44
*--------------------------------------------------------------------------------------------*/
55

6-
import 'vs/css!./centeredViewLayout';
7-
86
import { SplitView, Orientation, ISplitViewStyles, IView as ISplitViewView } from 'vs/base/browser/ui/splitview/splitview';
97
import { $ } from 'vs/base/browser/dom';
108
import { Event, mapEvent } from 'vs/base/common/event';
119
import { IView } from 'vs/base/browser/ui/grid/gridview';
1210
import { IDisposable, dispose } from 'vs/base/common/lifecycle';
1311

14-
function toSplitViewView(view: IView, getHeight: () => number): ISplitViewView {
15-
return {
16-
element: view.element,
17-
maximumSize: view.maximumWidth,
18-
minimumSize: view.minimumWidth,
19-
onDidChange: mapEvent(view.onDidChange, widthAndHeight => widthAndHeight && widthAndHeight.width),
20-
layout: size => view.layout(size, getHeight())
21-
};
22-
}
23-
2412
export interface CenteredViewState {
2513
leftMarginRatio: number;
2614
rightMarginRatio: number;
@@ -31,15 +19,34 @@ const GOLDEN_RATIO = {
3119
rightMarginRatio: 0.1909
3220
};
3321

22+
function createEmptyView() {
23+
return {
24+
element: $('.centered-layout-margin'),
25+
layout: () => undefined,
26+
minimumSize: 60,
27+
maximumSize: Number.POSITIVE_INFINITY,
28+
onDidChange: Event.None
29+
};
30+
}
31+
32+
function toSplitViewView(view: IView, getHeight: () => number): ISplitViewView {
33+
return {
34+
element: view.element,
35+
maximumSize: view.maximumWidth,
36+
minimumSize: view.minimumWidth,
37+
onDidChange: mapEvent(view.onDidChange, widthAndHeight => widthAndHeight && widthAndHeight.width),
38+
layout: size => view.layout(size, getHeight())
39+
};
40+
}
41+
3442
export class CenteredViewLayout {
3543

3644
private splitView: SplitView;
37-
private element: HTMLElement;
3845
private width: number = 0;
3946
private height: number = 0;
4047
private style: ISplitViewStyles;
4148
private didLayout = false;
42-
private splitViewDisposable: IDisposable[] = [];
49+
private splitViewDisposables: IDisposable[] = [];
4350

4451
constructor(private container: HTMLElement, private view: IView, public readonly state: CenteredViewState = GOLDEN_RATIO) {
4552
this.container.appendChild(this.view.element);
@@ -75,68 +82,48 @@ export class CenteredViewLayout {
7582
}
7683
}
7784

78-
resetView(view: IView): void {
79-
if (this.splitView) {
80-
const size = this.splitView.getViewSize(1);
81-
this.splitView.removeView(1);
82-
this.splitView.addView(toSplitViewView(view, () => this.height), size, 1);
83-
} else {
84-
this.container.appendChild(view.element);
85-
}
86-
87-
this.view = view;
88-
}
89-
9085
activate(active: boolean): void {
91-
if (active === !!this.splitView) {
86+
if (active === this.isActive()) {
9287
return;
9388
}
9489

9590
if (active) {
96-
this.element = $('.centered-view-layout');
9791
this.container.removeChild(this.view.element);
98-
this.container.appendChild(this.element);
99-
this.splitView = new SplitView(this.element, {
92+
this.splitView = new SplitView(this.container, {
10093
inverseAltBehavior: true,
10194
orientation: Orientation.HORIZONTAL,
10295
styles: this.style
10396
});
10497

105-
this.splitViewDisposable.push(this.splitView.onDidSashChange(() => {
98+
this.splitViewDisposables.push(this.splitView.onDidSashChange(() => {
10699
this.state.leftMarginRatio = this.splitView.getViewSize(0) / this.width;
107100
this.state.rightMarginRatio = this.splitView.getViewSize(2) / this.width;
108101
}));
109-
this.splitViewDisposable.push(this.splitView.onDidSashReset(() => {
102+
this.splitViewDisposables.push(this.splitView.onDidSashReset(() => {
110103
this.state.leftMarginRatio = GOLDEN_RATIO.leftMarginRatio;
111104
this.state.rightMarginRatio = GOLDEN_RATIO.rightMarginRatio;
112105
this.resizeMargins();
113106
}));
114107

115108
this.splitView.layout(this.width);
116-
117-
const getEmptyView = () => ({
118-
element: $('.centered-layout-margin'),
119-
layout: () => undefined,
120-
minimumSize: 60,
121-
maximumSize: Number.POSITIVE_INFINITY,
122-
onDidChange: Event.None
123-
});
124-
125109
this.splitView.addView(toSplitViewView(this.view, () => this.height), 0);
126-
this.splitView.addView(getEmptyView(), this.state.leftMarginRatio * this.width, 0);
127-
this.splitView.addView(getEmptyView(), this.state.rightMarginRatio * this.width, 2);
110+
this.splitView.addView(createEmptyView(), this.state.leftMarginRatio * this.width, 0);
111+
this.splitView.addView(createEmptyView(), this.state.rightMarginRatio * this.width, 2);
128112
} else {
129-
this.splitViewDisposable = dispose(this.splitViewDisposable);
113+
this.container.removeChild(this.splitView.el);
114+
this.splitViewDisposables = dispose(this.splitViewDisposables);
130115
this.splitView.dispose();
131116
this.splitView = undefined;
132-
this.container.removeChild(this.element);
133117
this.container.appendChild(this.view.element);
134118
}
135119
}
136120

137121
dispose(): void {
122+
this.splitViewDisposables = dispose(this.splitViewDisposables);
123+
138124
if (this.splitView) {
139125
this.splitView.dispose();
126+
this.splitView = undefined;
140127
}
141128
}
142129
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,8 @@ export namespace Sizing {
8989
export class SplitView implements IDisposable {
9090

9191
readonly orientation: Orientation;
92-
private el: HTMLElement;
92+
// TODO@Joao have the same pattern as grid here
93+
readonly el: HTMLElement;
9394
private sashContainer: HTMLElement;
9495
private viewContainer: HTMLElement;
9596
private size = 0;

‎src/vs/workbench/browser/parts/editor/editorPart.ts‎

Lines changed: 50 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@
88
import 'vs/workbench/browser/parts/editor/editor.contribution';
99
import { IThemeService } from 'vs/platform/theme/common/themeService';
1010
import { Part } from 'vs/workbench/browser/part';
11-
import { Dimension, isAncestor, toggleClass, addClass } from 'vs/base/browser/dom';
11+
import { Dimension, isAncestor, toggleClass, addClass, $ } from 'vs/base/browser/dom';
1212
import { Event, Emitter, once, Relay, anyEvent } from 'vs/base/common/event';
1313
import { contrastBorder, editorBackground } from 'vs/platform/theme/common/colorRegistry';
1414
import { GroupDirection, IAddGroupOptions, GroupsArrangement, GroupOrientation, IMergeGroupOptions, MergeGroupMode, ICopyEditorOptions, GroupsOrder, GroupChangeKind, GroupLocation, IFindGroupScope, EditorGroupLayout, GroupLayoutArgument } from 'vs/workbench/services/group/common/editorGroupsService';
1515
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
16-
import { Direction, SerializableGrid, Sizing, ISerializedGrid, Orientation, ISerializedNode, GridBranchNode, isGridBranchNode, GridNode, createSerializedGrid } from 'vs/base/browser/ui/grid/grid';
16+
import { Direction, SerializableGrid, Sizing, ISerializedGrid, Orientation, ISerializedNode, GridBranchNode, isGridBranchNode, GridNode, createSerializedGrid, Grid } from 'vs/base/browser/ui/grid/grid';
1717
import { GroupIdentifier, IWorkbenchEditorConfiguration } from 'vs/workbench/common/editor';
1818
import { values } from 'vs/base/common/map';
1919
import { EDITOR_GROUP_BORDER } from 'vs/workbench/common/theme';
@@ -43,6 +43,48 @@ interface IEditorPartUIState {
4343
mostRecentActiveGroups: GroupIdentifier[];
4444
}
4545

46+
class GridWidgetView<T extends IView> implements IView {
47+
48+
readonly element: HTMLElement = $('.grid-view-container');
49+
50+
get minimumWidth(): number { return this.gridWidget ? this.gridWidget.minimumWidth : 0; }
51+
get maximumWidth(): number { return this.gridWidget ? this.gridWidget.maximumWidth : Number.POSITIVE_INFINITY; }
52+
get minimumHeight(): number { return this.gridWidget ? this.gridWidget.minimumHeight : 0; }
53+
get maximumHeight(): number { return this.gridWidget ? this.gridWidget.maximumHeight : Number.POSITIVE_INFINITY; }
54+
55+
private _onDidChange = new Relay<{ width: number; height: number; }>();
56+
readonly onDidChange: Event<{ width: number; height: number; }> = this._onDidChange.event;
57+
58+
private _gridWidget: Grid<T>;
59+
60+
get gridWidget(): Grid<T> {
61+
return this._gridWidget;
62+
}
63+
64+
set gridWidget(grid: Grid<T>) {
65+
this.element.innerHTML = '';
66+
67+
if (grid) {
68+
this.element.appendChild(grid.element);
69+
this._onDidChange.input = grid.onDidChange;
70+
} else {
71+
this._onDidChange.input = Event.None;
72+
}
73+
74+
this._gridWidget = grid;
75+
}
76+
77+
layout(width: number, height: number): void {
78+
if (this.gridWidget) {
79+
this.gridWidget.layout(width, height);
80+
}
81+
}
82+
83+
dispose(): void {
84+
this._onDidChange.dispose();
85+
}
86+
}
87+
4688
export class EditorPart extends Part implements EditorGroupsServiceImpl, IEditorGroupsAccessor {
4789

4890
_serviceBrand: any;
@@ -91,6 +133,7 @@ export class EditorPart extends Part implements EditorGroupsServiceImpl, IEditor
91133
private container: HTMLElement;
92134
private centeredLayoutWidget: CenteredViewLayout;
93135
private gridWidget: SerializableGrid<IEditorGroupView>;
136+
private gridWidgetView: GridWidgetView<IEditorGroupView>;
94137

95138
private _whenRestored: TPromise<void>;
96139
private whenRestoredComplete: TValueCallback<void>;
@@ -110,6 +153,8 @@ export class EditorPart extends Part implements EditorGroupsServiceImpl, IEditor
110153
) {
111154
super(id, { hasTitle: false }, themeService);
112155

156+
this.gridWidgetView = new GridWidgetView<IEditorGroupView>();
157+
113158
this._partOptions = getEditorPartOptions(this.configurationService.getValue<IWorkbenchEditorConfiguration>());
114159
this.memento = this.getMemento(this.storageService, Scope.WORKSPACE);
115160
this.globalMemento = this.getMemento(this.storageService, Scope.GLOBAL);
@@ -720,26 +765,15 @@ export class EditorPart extends Part implements EditorGroupsServiceImpl, IEditor
720765

721766
// Grid control with center layout
722767
this.doCreateGridControl();
723-
this.centeredLayoutWidget = this._register(new CenteredViewLayout(this.container, this.getGridAsView(), this.globalMemento[EditorPart.EDITOR_PART_CENTERED_VIEW_STORAGE_KEY]));
768+
769+
this.centeredLayoutWidget = this._register(new CenteredViewLayout(this.container, this.gridWidgetView, this.globalMemento[EditorPart.EDITOR_PART_CENTERED_VIEW_STORAGE_KEY]));
724770

725771
// Drop support
726772
this._register(this.instantiationService.createInstance(EditorDropTarget, this, this.container));
727773

728774
return this.container;
729775
}
730776

731-
private getGridAsView(): IView {
732-
return {
733-
element: this.gridWidget.element,
734-
layout: (width, height) => this.gridWidget.layout(width, height),
735-
minimumWidth: this.gridWidget.minimumWidth,
736-
maximumWidth: this.gridWidget.maximumWidth,
737-
minimumHeight: this.gridWidget.minimumHeight,
738-
maximumHeight: this.gridWidget.minimumHeight,
739-
onDidChange: this.gridWidget.onDidChange
740-
};
741-
}
742-
743777
centerLayout(active: boolean): void {
744778
this.centeredLayoutWidget.activate(active);
745779
}
@@ -838,12 +872,9 @@ export class EditorPart extends Part implements EditorGroupsServiceImpl, IEditor
838872
}
839873

840874
this.gridWidget = gridWidget;
875+
this.gridWidgetView.gridWidget = gridWidget;
841876

842877
if (gridWidget) {
843-
if (this.centeredLayoutWidget) {
844-
this.centeredLayoutWidget.resetView(this.getGridAsView());
845-
}
846-
847878
this._onDidSizeConstraintsChange.input = gridWidget.onDidChange;
848879
}
849880

‎src/vs/workbench/browser/parts/editor/media/editorgroupview.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,4 +106,9 @@
106106

107107
.monaco-workbench > .part.editor > .content .editor-group-container > .editor-container > .editor-instance {
108108
height: 100%;
109+
}
110+
111+
.monaco-workbench > .part.editor > .content .grid-view-container {
112+
width: 100%;
113+
height: 100%;
109114
}

0 commit comments

Comments
 (0)