Skip to content

Commit

Permalink
centered layout
Browse files Browse the repository at this point in the history 
fixes #44621
fixes #44492
  • Loading branch information
@isidorn
isidorn committed Feb 28, 2018
1 parent 5a7ed0f commit c3a869a
Showing 1 changed file with 63 additions and 68 deletions.
131 changes: 63 additions & 68 deletions src/vs/workbench/browser/parts/editor/editorGroupsControl.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,8 +90,8 @@ export interface IEditorGroupsControl {
}

interface CenteredEditorLayoutData {
leftMarginRatio: number;
size: number;
leftProportion: number;
rightProportion: number;
}

/**
Expand All @@ -105,13 +105,12 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
private static readonly PROGRESS_BAR_CONTROL_KEY = '__progressBar';
private static readonly INSTANTIATION_SERVICE_KEY = '__instantiationService';

private static readonly GOLDEN_RATIO = 0.61;
private static readonly MIN_EDITOR_WIDTH = 170;
private static readonly MIN_EDITOR_HEIGHT = 70;

private static readonly EDITOR_TITLE_HEIGHT = 35;

private static readonly CENTERED_EDITOR_MIN_MARGIN = 10;
private static readonly CENTERED_EDITOR_MIN_MARGIN = 20;

private static readonly SNAP_TO_MINIMIZED_THRESHOLD_WIDTH = 50;
private static readonly SNAP_TO_MINIMIZED_THRESHOLD_HEIGHT = 20;
Expand All @@ -137,21 +136,12 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
private sashTwo: Sash;
private startSiloThreeSize: number;

// if the centered editor layout is activated, the editor inside of silo ONE is centered
// the silo will then contain:
// [left margin]|[editor]|[right margin]
// - The size of the editor is defined by centeredEditorSize
// - The position is defined by the ratio centeredEditorLeftMarginRatio = left-margin/(left-margin + editor + right-margin).
// - The two sashes can be used to control the size and position of the editor inside of the silo.
// - In order to seperate the two sashes from the sashes that control the size of bordering widgets
// CENTERED_EDITOR_MIN_MARGIN is forced as a minimum size for the two margins.
private centeredEditorActive: boolean;
private centeredEditorSashLeft: Sash;
private centeredEditorSashRight: Sash;
private centeredEditorPreferedSize: number;
private centeredEditorLeftMarginRatio: number;
private centeredEditorDragStartPosition: number;
private centeredEditorDragStartSize: number;
private centeredEditorLeftProportion: number;
private centeredEditorRightProportion: number;
private centeredEditorSashXToSubtrackt: number;

private visibleEditors: BaseEditor[];

Expand Down Expand Up @@ -1039,27 +1029,29 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
if (position === Position.ONE) {

// Center Layout stuff
const registerSashListeners = (sash: Sash) => {
this.toUnbind.push(sash.onDidStart(() => this.onCenterSashDragStart()));
this.toUnbind.push(sash.onDidChange((e: ISashEvent) => this.onCenterSashDrag(sash, e)));
this.toUnbind.push(sash.onDidEnd(() => this.storeCenteredLayoutData()));
this.toUnbind.push(sash.onDidReset(() => this.resetCenteredEditor()));
};
this.centeredEditorSashLeft = new Sash(container.getHTMLElement(), this, { baseSize: 5, orientation: Orientation.VERTICAL });
this.toUnbind.push(this.centeredEditorSashLeft.onDidStart(e => this.centeredEditorSashXToSubtrackt = e.startX - this.centeredEditorLeftProportion * this.dimension.width));
this.toUnbind.push(this.centeredEditorSashLeft.onDidChange((e: ISashEvent) => this.onCenterSashLeftDrag(e)));
this.toUnbind.push(this.centeredEditorSashLeft.onDidEnd(() => this.storeCenteredLayoutData()));
this.toUnbind.push(this.centeredEditorSashLeft.onDidReset(() => this.resetCenteredEditor()));

this.centeredEditorSashRight = new Sash(container.getHTMLElement(), this, { baseSize: 5, orientation: Orientation.VERTICAL });
registerSashListeners(this.centeredEditorSashLeft);
registerSashListeners(this.centeredEditorSashRight);
this.toUnbind.push(this.centeredEditorSashRight.onDidStart(e => this.centeredEditorSashXToSubtrackt = e.startX - this.centeredEditorRightProportion * this.dimension.width));
this.toUnbind.push(this.centeredEditorSashRight.onDidChange((e: ISashEvent) => this.onCenterSashRightDrag(e)));
this.toUnbind.push(this.centeredEditorSashRight.onDidEnd(() => this.storeCenteredLayoutData()));
this.toUnbind.push(this.centeredEditorSashRight.onDidReset(() => this.resetCenteredEditor()));

this.centeredEditorActive = false;
this.centeredEditorLeftMarginRatio = 0.5;
this.centeredEditorPreferedSize = -1; // set this later if we know the container size

// Restore centered layout position and size
const centeredLayoutDataString = this.storageServise.get(EditorGroupsControl.CENTERED_EDITOR_LAYOUT_DATA_STORAGE_KEY, StorageScope.GLOBAL);
if (centeredLayoutDataString) {
const centeredLayout = <CenteredEditorLayoutData>JSON.parse(centeredLayoutDataString);
this.centeredEditorLeftMarginRatio = centeredLayout.leftMarginRatio;
this.centeredEditorPreferedSize = centeredLayout.size;
this.centeredEditorLeftProportion = centeredLayout.leftProportion;
this.centeredEditorRightProportion = centeredLayout.rightProportion;
}
if (!this.centeredEditorLeftProportion || !this.centeredEditorRightProportion) {
this.resetCenteredEditor(false);
}
}
}
Expand Down Expand Up @@ -1925,47 +1917,54 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
this.sashTwo.layout();
}

private get centeredEditorAvailableSize(): number {
return this.silosSize[Position.ONE] - EditorGroupsControl.CENTERED_EDITOR_MIN_MARGIN * 2;
}
private onCenterSashLeftDrag(e: ISashEvent): void {
// We need to convert x cordinates to be editor container scoped
const x = e.currentX - this.centeredEditorSashXToSubtrackt;

private get centeredEditorSize(): number {
return Math.min(this.centeredEditorAvailableSize, this.centeredEditorPreferedSize);
}
// Only react to changes if the new size is within boundaries
if (x > EditorGroupsControl.CENTERED_EDITOR_MIN_MARGIN && x < ((this.dimension.width - this.minSize) / 2)) {
const oldLeft = this.centeredEditorLeftProportion;
this.centeredEditorLeftProportion = x / this.dimension.width;

private get centeredEditorPosition(): number {
return EditorGroupsControl.CENTERED_EDITOR_MIN_MARGIN + this.centeredEditorLeftMarginRatio * (this.centeredEditorAvailableSize - this.centeredEditorSize);
}
const sashesCoupled = !e.altKey;
if (sashesCoupled) {
const delta = oldLeft - this.centeredEditorLeftProportion;
const newRightAbsolute = (this.centeredEditorRightProportion + delta) * this.dimension.width;
if ((newRightAbsolute > (this.dimension.width + this.minSize) / 2) && newRightAbsolute < this.dimension.width - EditorGroupsControl.CENTERED_EDITOR_MIN_MARGIN) {
this.centeredEditorRightProportion = newRightAbsolute / this.dimension.width;
}
}

private onCenterSashDragStart(): void {
this.centeredEditorDragStartPosition = this.centeredEditorPosition;
this.centeredEditorDragStartSize = this.centeredEditorSize;
this.layoutContainers();
}
}

private onCenterSashDrag(sash: Sash, e: ISashEvent): void {
const sashesCoupled = !e.altKey;
const delta = sash === this.centeredEditorSashLeft ? e.startX - e.currentX : e.currentX - e.startX;
const size = this.centeredEditorDragStartSize + (sashesCoupled ? 2 * delta : delta);
let position = this.centeredEditorDragStartPosition;
if (sash === this.centeredEditorSashLeft || sashesCoupled) {
position -= delta;
}
private onCenterSashRightDrag(e: ISashEvent): void {
// We need to convert x cordinates to be editor container scoped
const x = e.currentX - this.centeredEditorSashXToSubtrackt;

if (size > 3 * this.minSize) {
this.centeredEditorPreferedSize = size;
position -= EditorGroupsControl.CENTERED_EDITOR_MIN_MARGIN;
position = Math.min(position, this.centeredEditorAvailableSize - this.centeredEditorSize);
position = Math.max(0, position);
this.centeredEditorLeftMarginRatio = position / (this.centeredEditorAvailableSize - this.centeredEditorSize);
// Only react to changes if the new size is within boundaries
if ((x > (this.dimension.width + this.minSize) / 2) && x < this.dimension.width - EditorGroupsControl.CENTERED_EDITOR_MIN_MARGIN) {
const oldRight = this.centeredEditorRightProportion;
this.centeredEditorRightProportion = x / this.dimension.width;

const sashesCoupled = !e.altKey;
if (sashesCoupled) {
const delta = oldRight - this.centeredEditorRightProportion;
const newLeftAbsolute = (this.centeredEditorLeftProportion + delta) * this.dimension.width;
if (newLeftAbsolute > EditorGroupsControl.CENTERED_EDITOR_MIN_MARGIN && newLeftAbsolute < ((this.dimension.width - this.minSize) / 2)) {
this.centeredEditorLeftProportion = newLeftAbsolute / this.dimension.width;
}
}

this.layoutContainers();
}
}

private storeCenteredLayoutData(): void {
const data: CenteredEditorLayoutData = {
leftMarginRatio: this.centeredEditorLeftMarginRatio,
size: this.centeredEditorSize
leftProportion: this.centeredEditorLeftProportion,
rightProportion: this.centeredEditorRightProportion
};
this.storageServise.store(EditorGroupsControl.CENTERED_EDITOR_LAYOUT_DATA_STORAGE_KEY, JSON.stringify(data), StorageScope.GLOBAL);
}
Expand All @@ -1981,9 +1980,9 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
case this.sashTwo:
return this.silosSize[Position.TWO] + this.silosSize[Position.ONE];
case this.centeredEditorSashLeft:
return this.centeredEditorPosition;
return this.centeredEditorLeftProportion * this.dimension.width;
case this.centeredEditorSashRight:
return this.centeredEditorPosition + this.centeredEditorSize;
return this.centeredEditorRightProportion * this.dimension.width;
default:
return 0;
}
Expand Down Expand Up @@ -2142,11 +2141,6 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
if (doCentering && !this.centeredEditorActive) {
this.centeredEditorSashLeft.show();
this.centeredEditorSashRight.show();

// no size set yet. Calculate a default value
if (this.centeredEditorPreferedSize === -1) {
this.resetCenteredEditor(false);
}
} else if (!doCentering && this.centeredEditorActive) {
this.centeredEditorSashLeft.hide();
this.centeredEditorSashRight.hide();
Expand Down Expand Up @@ -2184,8 +2178,8 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro

let editorPosition = 0;
if (this.centeredEditorActive) {
editorWidth = this.centeredEditorSize;
editorPosition = this.centeredEditorPosition;
editorWidth = (this.centeredEditorRightProportion - this.centeredEditorLeftProportion) * this.dimension.width;
editorPosition = this.centeredEditorLeftProportion * this.dimension.width;
}

if (position !== Position.ONE) {
Expand All @@ -2205,12 +2199,13 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
}

private resetCenteredEditor(layout: boolean = true) {
this.centeredEditorLeftMarginRatio = 0.5;
this.centeredEditorPreferedSize = Math.floor(this.dimension.width * EditorGroupsControl.GOLDEN_RATIO);
// Use golden ratio
this.centeredEditorLeftProportion = 0.19;
this.centeredEditorRightProportion = 0.81;
if (layout) {
this.layoutContainers();
}
this.storageServise.remove(EditorGroupsControl.CENTERED_EDITOR_LAYOUT_DATA_STORAGE_KEY, StorageScope.GLOBAL);
this.storeCenteredLayoutData();
}

public getInstantiationService(position: Position): IInstantiationService {
Expand Down

0 comments on commit c3a869a

Please sign in to comment.