parent
abaf393e9d
commit
bc69f8d521
8 changed files with 68 additions and 51 deletions
|
@ -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 {
|
||||
|
|
|
@ -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]);
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue