Skip to content

Commit

Permalink
Merge pull request microsoft#51612 from Microsoft/joao/remove-v-sash
Browse files Browse the repository at this point in the history 
Remove VSash
  • Loading branch information
@joaomoreno
joaomoreno authored Jun 13, 2018
2 parents 14651bd + 050971d commit 44558a1
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 185 deletions.
93 changes: 2 additions & 91 deletions src/vs/base/browser/ui/sash/sash.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@
'use strict';

import 'vs/css!./sash';
import { IDisposable, Disposable, dispose } from 'vs/base/common/lifecycle';
import { IDisposable, dispose } from 'vs/base/common/lifecycle';
import { isIPad } from 'vs/base/browser/browser';
import { isMacintosh } from 'vs/base/common/platform';
import * as types from 'vs/base/common/types';
import { EventType, GestureEvent, Gesture } from 'vs/base/browser/touch';
import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
import { Event, Emitter } from 'vs/base/common/event';
import { getElementsByTagName, EventHelper, createStyleSheet, addDisposableListener, Dimension, append, $, addClass, removeClass, toggleClass } from 'vs/base/browser/dom';
import { getElementsByTagName, EventHelper, createStyleSheet, addDisposableListener, append, $, addClass, removeClass, toggleClass } from 'vs/base/browser/dom';
import { domEvent } from 'vs/base/browser/event';

const DEBUG = false;
Expand Down Expand Up @@ -394,92 +394,3 @@ export class Sash {
this.disposables = dispose(this.disposables);
}
}

/**
* A simple Vertical Sash that computes the position of the sash when it is moved between the given dimension.
* Triggers onPositionChange event when the position is changed
*/
export class VSash extends Disposable implements IVerticalSashLayoutProvider {
private sash: Sash;
private ratio: number;
private startPosition: number;
private position: number;
private dimension: Dimension;

private readonly _onPositionChange: Emitter<number> = new Emitter<number>();
get onPositionChange(): Event<number> { return this._onPositionChange.event; }

constructor(container: HTMLElement, private minWidth: number) {
super();

this.ratio = 0.5;
this.sash = new Sash(container, this);

this._register(this.sash.onDidStart(() => this.onSashDragStart()));
this._register(this.sash.onDidChange((e: ISashEvent) => this.onSashDrag(e)));
this._register(this.sash.onDidEnd(() => this.onSashDragEnd()));
this._register(this.sash.onDidReset(() => this.onSashReset()));
}

getVerticalSashTop(): number {
return 0;
}

getVerticalSashLeft(): number {
return this.position;
}

getVerticalSashHeight(): number {
return this.dimension.height;
}

setDimenesion(dimension: Dimension) {
this.dimension = dimension;
this.compute(this.ratio);
}

private onSashDragStart(): void {
this.startPosition = this.position;
}

private onSashDrag(e: ISashEvent): void {
this.compute((this.startPosition + (e.currentX - e.startX)) / this.dimension.width);
}

private compute(ratio: number) {
this.computeSashPosition(ratio);
this.ratio = this.position / this.dimension.width;
this._onPositionChange.fire(this.position);
}

private onSashDragEnd(): void {
this.sash.layout();
}

private onSashReset(): void {
this.compute(0.5);
this._onPositionChange.fire(this.position);
this.sash.layout();
}

private computeSashPosition(sashRatio: number = this.ratio) {
const contentWidth = this.dimension.width;
let sashPosition = Math.floor((sashRatio || 0.5) * contentWidth);
const midPoint = Math.floor(0.5 * contentWidth);

if (contentWidth > this.minWidth * 2) {
if (sashPosition < this.minWidth) {
sashPosition = this.minWidth;
}
if (sashPosition > contentWidth - this.minWidth) {
sashPosition = contentWidth - this.minWidth;
}
} else {
sashPosition = midPoint;
}
if (this.position !== sashPosition) {
this.position = sashPosition;
this.sash.layout();
}
}
}
81 changes: 31 additions & 50 deletions src/vs/workbench/browser/parts/editor/sideBySideEditor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,29 @@ import * as DOM from 'vs/base/browser/dom';
import { Registry } from 'vs/platform/registry/common/platform';
import { EditorInput, EditorOptions, SideBySideEditorInput, IEditorControl, IEditor } from 'vs/workbench/common/editor';
import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
import { VSash } from 'vs/base/browser/ui/sash/sash';
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { scrollbarShadow } from 'vs/platform/theme/common/colorRegistry';
import { IEditorRegistry, Extensions as EditorExtensions } from 'vs/workbench/browser/editor';
import { CancellationToken } from 'vs/base/common/cancellation';
import { IEditorGroup } from 'vs/workbench/services/group/common/editorGroupsService';
import { SplitView, Sizing, Orientation } from 'vs/base/browser/ui/splitview/splitview';
import { Event } from 'vs/base/common/event';

export class SideBySideEditor extends BaseEditor {

public static readonly ID: string = 'workbench.editor.sidebysideEditor';

private dimension: DOM.Dimension;
private dimension: DOM.Dimension = new DOM.Dimension(0, 0);

protected masterEditor: BaseEditor;
private masterEditorContainer: HTMLElement;

protected detailsEditor: BaseEditor;
private detailsEditorContainer: HTMLElement;

private sash: VSash;
private splitview: SplitView;

constructor(
@ITelemetryService telemetryService: ITelemetryService,
Expand All @@ -41,7 +42,30 @@ export class SideBySideEditor extends BaseEditor {

protected createEditor(parent: HTMLElement): void {
DOM.addClass(parent, 'side-by-side-editor');
this.createSash(parent);

this.splitview = new SplitView(parent, { orientation: Orientation.HORIZONTAL });
this._register(this.splitview);
this._register(this.splitview.onDidSashReset(() => this.splitview.distributeViewSizes()));

this.detailsEditorContainer = DOM.$('.details-editor-container');
this.splitview.addView({
element: this.detailsEditorContainer,
layout: size => this.detailsEditor && this.detailsEditor.layout(new DOM.Dimension(size, this.dimension.height - 34 /* height of header container */)),
minimumSize: 220,
maximumSize: Number.POSITIVE_INFINITY,
onDidChange: Event.None
}, Sizing.Distribute);

this.masterEditorContainer = DOM.$('.master-editor-container');
this.splitview.addView({
element: this.masterEditorContainer,
layout: size => this.masterEditor && this.masterEditor.layout(new DOM.Dimension(size, this.dimension.height - 34 /* height of header container */)),
minimumSize: 220,
maximumSize: Number.POSITIVE_INFINITY,
onDidChange: Event.None
}, Sizing.Distribute);

this.updateStyles();
}

public setInput(newInput: SideBySideEditorInput, options: EditorOptions, token: CancellationToken): Thenable<void> {
Expand Down Expand Up @@ -85,7 +109,7 @@ export class SideBySideEditor extends BaseEditor {

public layout(dimension: DOM.Dimension): void {
this.dimension = dimension;
this.sash.setDimenesion(this.dimension);
this.splitview.layout(dimension.width);
}

public getControl(): IEditorControl {
Expand All @@ -112,7 +136,6 @@ export class SideBySideEditor extends BaseEditor {
if (oldInput) {
this.disposeEditors();
}
this.createEditorContainers();

return this.setNewInput(newInput, options, token);
} else {
Expand Down Expand Up @@ -140,20 +163,9 @@ export class SideBySideEditor extends BaseEditor {
private onEditorsCreated(details: BaseEditor, master: BaseEditor, detailsInput: EditorInput, masterInput: EditorInput, options: EditorOptions, token: CancellationToken): TPromise<void> {
this.detailsEditor = details;
this.masterEditor = master;
this.dolayout(this.sash.getVerticalSashLeft());
return TPromise.join([this.detailsEditor.setInput(detailsInput, null, token), this.masterEditor.setInput(masterInput, options, token)]).then(() => this.focus());
}

private createEditorContainers(): void {
const parentElement = this.getContainer();
this.detailsEditorContainer = DOM.append(parentElement, DOM.$('.details-editor-container'));
this.detailsEditorContainer.style.position = 'absolute';
this.masterEditorContainer = DOM.append(parentElement, DOM.$('.master-editor-container'));
this.masterEditorContainer.style.position = 'absolute';

this.updateStyles();
}

public updateStyles(): void {
super.updateStyles();

Expand All @@ -162,32 +174,7 @@ export class SideBySideEditor extends BaseEditor {
}
}

private createSash(parentElement: HTMLElement): void {
this.sash = this._register(new VSash(parentElement, 220));
this._register(this.sash.onPositionChange(position => this.dolayout(position)));
}

private dolayout(splitPoint: number): void {
if (!this.detailsEditor || !this.masterEditor || !this.dimension) {
return;
}
const masterEditorWidth = this.dimension.width - splitPoint;
const detailsEditorWidth = this.dimension.width - masterEditorWidth;

this.detailsEditorContainer.style.width = `${detailsEditorWidth}px`;
this.detailsEditorContainer.style.height = `${this.dimension.height}px`;
this.detailsEditorContainer.style.left = '0px';

this.masterEditorContainer.style.width = `${masterEditorWidth}px`;
this.masterEditorContainer.style.height = `${this.dimension.height}px`;
this.masterEditorContainer.style.left = `${splitPoint}px`;

this.detailsEditor.layout(new DOM.Dimension(detailsEditorWidth, this.dimension.height));
this.masterEditor.layout(new DOM.Dimension(masterEditorWidth, this.dimension.height));
}

private disposeEditors(): void {
const parentContainer = this.getContainer();
if (this.detailsEditor) {
this.detailsEditor.dispose();
this.detailsEditor = null;
Expand All @@ -196,14 +183,8 @@ export class SideBySideEditor extends BaseEditor {
this.masterEditor.dispose();
this.masterEditor = null;
}
if (this.detailsEditorContainer) {
parentContainer.removeChild(this.detailsEditorContainer);
this.detailsEditorContainer = null;
}
if (this.masterEditorContainer) {
parentContainer.removeChild(this.masterEditorContainer);
this.masterEditorContainer = null;
}
this.detailsEditorContainer.innerHTML = '';
this.masterEditorContainer.innerHTML = '';
}

public dispose(): void {
Expand Down
Loading

0 comments on commit 44558a1

Please sign in to comment.