maxmustermann/vscode
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

sash: ditch event emitter

Browse source 
#38417
This commit is contained in:
isidor 2017-11-15 18:42:48 +01:00
parent abaf393e9d
commit bc69f8d521
8 changed files with 68 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/vs/base/browser/ui/sash/sash.ts
View file

@ -13,7 +13,6 @@ import { isMacintosh } from 'vs/base/common/platform';
import types = require('vs/base/common/types');
import DOM = require('vs/base/browser/dom');
import { EventType, GestureEvent } from 'vs/base/browser/touch';
import { EventEmitter } from 'vs/base/common/eventEmitter';
import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
import Event, { Emitter } from 'vs/base/common/event';
@ -48,7 +47,7 @@ export enum Orientation {
HORIZONTAL
}
export class Sash extends EventEmitter {
export class Sash {
private $e: Builder;
private layoutProvider: ISashLayoutProvider;
@ -57,8 +56,12 @@ export class Sash extends EventEmitter {
private orientation: Orientation;
private size: number;
private _onDidStart = new Emitter<ISashEvent>();
private _onDidChange = new Emitter<ISashEvent>();
private _onDidReset = new Emitter<void>();
private _onDidEnd = new Emitter<void>();
constructor(container: HTMLElement, layoutProvider: ISashLayoutProvider, options: ISashOptions = {}) {
super();
this.$e = $('.monaco-sash').appendTo(container);
@ -67,7 +70,7 @@ export class Sash extends EventEmitter {
}
this.$e.on(DOM.EventType.MOUSE_DOWN, (e) => { this.onMouseDown(e as MouseEvent); });
this.$e.on(DOM.EventType.DBLCLICK, (e) => { this.emit('reset', e as MouseEvent); });
this.$e.on(DOM.EventType.DBLCLICK, (e) => this._onDidReset.fire());
this.$e.on(EventType.Start, (e) => { this.onTouchStart(e as GestureEvent); });
this.size = options.baseSize || 5;
@ -84,6 +87,22 @@ export class Sash extends EventEmitter {
this.layoutProvider = layoutProvider;
}
public get onDidStart(): Event<ISashEvent> {
return this._onDidStart.event;
}
public get onDidChange(): Event<ISashEvent> {
return this._onDidChange.event;
}
public get onDidReset(): Event<void> {
return this._onDidReset.event;
}
public get onDidEnd(): Event<void> {
return this._onDidEnd.event;
}
public getHTMLElement(): HTMLElement {
return this.$e.getHTMLElement();
}
@ -133,7 +152,7 @@ export class Sash extends EventEmitter {
};
this.$e.addClass('active');
this.emit('start', startEvent);
this._onDidStart.fire(startEvent);
let $window = $(window);
let containerCSSClass = `${this.getOrientation()}-cursor-container${isMacintosh ? '-mac' : ''}`;
@ -149,11 +168,11 @@ export class Sash extends EventEmitter {
currentY: mouseMoveEvent.posy
};
this.emit('change', event);
this._onDidChange.fire(event);
}).once('mouseup', (e) => {
DOM.EventHelper.stop(e, false);
this.$e.removeClass('active');
this.emit('end');
this._onDidEnd.fire();
$window.off('mousemove');
document.body.classList.remove(containerCSSClass);
@ -175,7 +194,7 @@ export class Sash extends EventEmitter {
let startX = event.pageX;
let startY = event.pageY;
this.emit('start', {
this._onDidStart.fire({
startX: startX,
currentX: startX,
startY: startY,
@ -184,7 +203,7 @@ export class Sash extends EventEmitter {
listeners.push(DOM.addDisposableListener(this.$e.getHTMLElement(), EventType.Change, (event: GestureEvent) => {
if (types.isNumber(event.pageX) && types.isNumber(event.pageY)) {
this.emit('change', {
this._onDidChange.fire({
startX: startX,
currentX: event.pageX,
startY: startY,
@ -194,7 +213,7 @@ export class Sash extends EventEmitter {
}));
listeners.push(DOM.addDisposableListener(this.$e.getHTMLElement(), EventType.End, (event: GestureEvent) => {
this.emit('end');
this._onDidEnd.fire();
dispose(listeners);
}));
}
@ -262,8 +281,6 @@ export class Sash extends EventEmitter {
this.$e.destroy();
this.$e = null;
}
super.dispose();
}
}
@ -287,10 +304,10 @@ export class VSash extends Disposable implements IVerticalSashLayoutProvider {
this.ratio = 0.5;
this.sash = new Sash(container, this);
this._register(this.sash.addListener('start', () => this.onSashDragStart()));
this._register(this.sash.addListener('change', (e: ISashEvent) => this.onSashDrag(e)));
this._register(this.sash.addListener('end', () => this.onSashDragEnd()));
this._register(this.sash.addListener('reset', () => this.onSashReset()));
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()));
}
public getVerticalSashTop(): number {

8
src/vs/base/browser/ui/splitview/splitview.ts
View file

@ -7,7 +7,7 @@
import 'vs/css!./splitview';
import { IDisposable, combinedDisposable, toDisposable } from 'vs/base/common/lifecycle';
import Event, { fromEventEmitter, mapEvent, Emitter } from 'vs/base/common/event';
import Event, { mapEvent, Emitter } from 'vs/base/common/event';
import types = require('vs/base/common/types');
import dom = require('vs/base/browser/dom');
import { clamp } from 'vs/base/common/numbers';
@ -127,11 +127,11 @@ export class SplitView implements IDisposable {
? (e: IBaseSashEvent) => ({ sash, start: e.startY, current: e.currentY })
: (e: IBaseSashEvent) => ({ sash, start: e.startX, current: e.currentX });
const onStart = mapEvent(fromEventEmitter<IBaseSashEvent>(sash, 'start'), sashEventMapper);
const onStart = mapEvent(sash.onDidStart, sashEventMapper);
const onStartDisposable = onStart(this.onSashStart, this);
const onChange = mapEvent(fromEventEmitter<IBaseSashEvent>(sash, 'change'), sashEventMapper);
const onChange = mapEvent(sash.onDidChange, sashEventMapper);
const onSashChangeDisposable = onChange(this.onSashChange, this);
const onEnd = mapEvent<IBaseSashEvent, void>(fromEventEmitter<IBaseSashEvent>(sash, 'end'), () => null);
const onEnd = mapEvent<void, void>(sash.onDidEnd, () => null);
const onEndDisposable = onEnd(() => this._onDidSashChange.fire());
const disposable = combinedDisposable([onStartDisposable, onSashChangeDisposable, onEndDisposable, sash]);

8
src/vs/editor/browser/widget/diffEditorWidget.ts
View file

@ -1516,10 +1516,10 @@ class DiffEdtorWidgetSideBySide extends DiffEditorWidgetStyle implements IDiffEd
this._sash.disable();
}
this._sash.addListener('start', () => this.onSashDragStart());
this._sash.addListener('change', (e: ISashEvent) => this.onSashDrag(e));
this._sash.addListener('end', () => this.onSashDragEnd());
this._sash.addListener('reset', () => this.onSashReset());
this._sash.onDidStart(() => this.onSashDragStart());
this._sash.onDidChange((e: ISashEvent) => this.onSashDrag(e));
this._sash.onDidEnd(() => this.onSashDragEnd());
this._sash.onDidReset(() => this.onSashReset());
}
public dispose(): void {

4
src/vs/editor/contrib/find/findWidget.ts
View file

@ -863,11 +863,11 @@ export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSas
this._resizeSash = new Sash(this._domNode, this, { orientation: Orientation.VERTICAL });
let originalWidth = FIND_WIDGET_INITIAL_WIDTH;
this._register(this._resizeSash.addListener('start', (e: ISashEvent) => {
this._register(this._resizeSash.onDidStart((e: ISashEvent) => {
originalWidth = dom.getTotalWidth(this._domNode);
}));
this._register(this._resizeSash.addListener('change', (evt: ISashEvent) => {
this._register(this._resizeSash.onDidChange((evt: ISashEvent) => {
let width = originalWidth + evt.startX - evt.currentX;
if (width < FIND_WIDGET_INITIAL_WIDTH) {

4
src/vs/editor/contrib/referenceSearch/referencesWidget.ts
View file

@ -493,11 +493,11 @@ class VSash {
// compute the current widget clientX postion since
// the sash works with clientX when dragging
let clientX: number;
this._disposables.push(this._sash.addListener('start', (e: ISashEvent) => {
this._disposables.push(this._sash.onDidStart((e: ISashEvent) => {
clientX = e.startX - (this._width * this.ratio);
}));
this._disposables.push(this._sash.addListener('change', (e: ISashEvent) => {
this._disposables.push(this._sash.onDidChange((e: ISashEvent) => {
// compute the new position of the sash and from that
// compute the new ratio that we are using
let newLeft = e.currentX - clientX;

6
src/vs/editor/contrib/zoneWidget/zoneWidget.ts
View file

@ -441,7 +441,7 @@ export abstract class ZoneWidget implements IHorizontalSashLayoutProvider {
}
let data: { startY: number; heightInLines: number; };
this._disposables.push(this._resizeSash.addListener('start', (e: ISashEvent) => {
this._disposables.push(this._resizeSash.onDidStart((e: ISashEvent) => {
if (this._viewZone) {
data = {
startY: e.startY,
@ -450,11 +450,11 @@ export abstract class ZoneWidget implements IHorizontalSashLayoutProvider {
}
}));
this._disposables.push(this._resizeSash.addListener('end', () => {
this._disposables.push(this._resizeSash.onDidEnd(() => {
data = undefined;
}));
this._disposables.push(this._resizeSash.addListener('change', (evt: ISashEvent) => {
this._disposables.push(this._resizeSash.onDidChange((evt: ISashEvent) => {
if (data) {
let lineDelta = (evt.currentY - data.startY) / this.editor.getConfiguration().lineHeight;
let roundedLineDelta = lineDelta < 0 ? Math.ceil(lineDelta) : Math.floor(lineDelta);

24
src/vs/workbench/browser/layout.ts
View file

@ -237,22 +237,22 @@ export class WorkbenchLayout implements IVerticalSashLayoutProvider, IHorizontal
let startPanelHeight: number;
let startPanelWidth: number;
this.toUnbind.push(this.sashXOne.addListener('start', (e: ISashEvent) => {
this.toUnbind.push(this.sashXOne.onDidStart((e: ISashEvent) => {
startSidebarWidth = this.sidebarWidth;
startX = e.startX;
}));
this.toUnbind.push(this.sashY.addListener('start', (e: ISashEvent) => {
this.toUnbind.push(this.sashY.onDidStart((e: ISashEvent) => {
startPanelHeight = this.panelHeight;
startY = e.startY;
}));
this.toUnbind.push(this.sashXTwo.addListener('start', (e: ISashEvent) => {
this.toUnbind.push(this.sashXTwo.onDidStart((e: ISashEvent) => {
startPanelWidth = this.panelWidth;
startXTwo = e.startX;
}));
this.toUnbind.push(this.sashXOne.addListener('change', (e: ISashEvent) => {
this.toUnbind.push(this.sashXOne.onDidChange((e: ISashEvent) => {
let doLayout = false;
let sidebarPosition = this.partService.getSideBarPosition();
let isSidebarVisible = this.partService.isVisible(Parts.SIDEBAR_PART);
@ -292,7 +292,7 @@ export class WorkbenchLayout implements IVerticalSashLayoutProvider, IHorizontal
}
}));
this.toUnbind.push(this.sashY.addListener('change', (e: ISashEvent) => {
this.toUnbind.push(this.sashY.onDidChange((e: ISashEvent) => {
let doLayout = false;
let isPanelVisible = this.partService.isVisible(Parts.PANEL_PART);
let newSashHeight = startPanelHeight - (e.currentY - startY);
@ -330,7 +330,7 @@ export class WorkbenchLayout implements IVerticalSashLayoutProvider, IHorizontal
}
}));
this.toUnbind.push(this.sashXTwo.addListener('change', (e: ISashEvent) => {
this.toUnbind.push(this.sashXTwo.onDidChange((e: ISashEvent) => {
let doLayout = false;
let isPanelVisible = this.partService.isVisible(Parts.PANEL_PART);
let newSashWidth = startPanelWidth - (e.currentX - startXTwo);
@ -368,25 +368,25 @@ export class WorkbenchLayout implements IVerticalSashLayoutProvider, IHorizontal
}
}));
this.toUnbind.push(this.sashXOne.addListener('end', () => {
this.toUnbind.push(this.sashXOne.onDidEnd(() => {
this.storageService.store(WorkbenchLayout.sashXOneWidthSettingsKey, this.sidebarWidth, StorageScope.GLOBAL);
}));
this.toUnbind.push(this.sashY.addListener('end', () => {
this.toUnbind.push(this.sashY.onDidEnd(() => {
this.storageService.store(WorkbenchLayout.sashYHeightSettingsKey, this.panelHeight, StorageScope.GLOBAL);
}));
this.toUnbind.push(this.sashXTwo.addListener('end', () => {
this.toUnbind.push(this.sashXTwo.onDidEnd(() => {
this.storageService.store(WorkbenchLayout.sashXTwoWidthSettingsKey, this.panelWidth, StorageScope.GLOBAL);
}));
this.toUnbind.push(this.sashY.addListener('reset', () => {
this.toUnbind.push(this.sashY.onDidReset(() => {
this.panelHeight = this.sidebarHeight * DEFAULT_PANEL_SIZE_COEFFICIENT;
this.storageService.store(WorkbenchLayout.sashYHeightSettingsKey, this.panelHeight, StorageScope.GLOBAL);
this.layout();
}));
this.toUnbind.push(this.sashXOne.addListener('reset', () => {
this.toUnbind.push(this.sashXOne.onDidReset(() => {
let activeViewlet = this.viewletService.getActiveViewlet();
let optimalWidth = activeViewlet && activeViewlet.getOptimalWidth();
this.sidebarWidth = optimalWidth || 0;
@ -394,7 +394,7 @@ export class WorkbenchLayout implements IVerticalSashLayoutProvider, IHorizontal
this.partService.setSideBarHidden(false).done(() => this.layout(), errors.onUnexpectedError);
}));
this.toUnbind.push(this.sashXTwo.addListener('reset', () => {
this.toUnbind.push(this.sashXTwo.onDidReset(() => {
this.panelWidth = (this.workbenchSize.width - this.sidebarWidth - this.activitybarWidth) * DEFAULT_PANEL_SIZE_COEFFICIENT;
this.storageService.store(WorkbenchLayout.sashXTwoWidthSettingsKey, this.panelWidth, StorageScope.GLOBAL);
this.layout();

16
src/vs/workbench/browser/parts/editor/editorGroupsControl.ts
View file

@ -955,10 +955,10 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
// Sash One
this.sashOne = new Sash(this.parent.getHTMLElement(), this, { baseSize: 5, orientation: this.layoutVertically ? Orientation.VERTICAL : Orientation.HORIZONTAL });
this.toUnbind.push(this.sashOne.addListener('start', () => this.onSashOneDragStart()));
this.toUnbind.push(this.sashOne.addListener('change', (e: ISashEvent) => this.onSashOneDrag(e)));
this.toUnbind.push(this.sashOne.addListener('end', () => this.onSashOneDragEnd()));
this.toUnbind.push(this.sashOne.addListener('reset', () => this.onSashOneReset()));
this.toUnbind.push(this.sashOne.onDidStart(() => this.onSashOneDragStart()));
this.toUnbind.push(this.sashOne.onDidChange((e: ISashEvent) => this.onSashOneDrag(e)));
this.toUnbind.push(this.sashOne.onDidEnd(() => this.onSashOneDragEnd()));
this.toUnbind.push(this.sashOne.onDidReset(() => this.onSashOneReset()));
this.sashOne.hide();
// Silo Two
@ -966,10 +966,10 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro
// Sash Two
this.sashTwo = new Sash(this.parent.getHTMLElement(), this, { baseSize: 5, orientation: this.layoutVertically ? Orientation.VERTICAL : Orientation.HORIZONTAL });
this.toUnbind.push(this.sashTwo.addListener('start', () => this.onSashTwoDragStart()));
this.toUnbind.push(this.sashTwo.addListener('change', (e: ISashEvent) => this.onSashTwoDrag(e)));
this.toUnbind.push(this.sashTwo.addListener('end', () => this.onSashTwoDragEnd()));
this.toUnbind.push(this.sashTwo.addListener('reset', () => this.onSashTwoReset()));
this.toUnbind.push(this.sashTwo.onDidStart(() => this.onSashTwoDragStart()));
this.toUnbind.push(this.sashTwo.onDidChange((e: ISashEvent) => this.onSashTwoDrag(e)));
this.toUnbind.push(this.sashTwo.onDidEnd(() => this.onSashTwoDragEnd()));
this.toUnbind.push(this.sashTwo.onDidReset(() => this.onSashTwoReset()));
this.sashTwo.hide();
// Silo Three