Skip to content

V
vscode

xxadev / vscode
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
V
vscode

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 44558a15 编写于 作者: J João Moreno 提交者： GitHub
浏览文件
操作

Merge pull request #51612 from Microsoft/joao/remove-v-sash 

Remove VSash
上级 14651bd6 050971da
显示空白变更内容
内联 并排
Showing with 62 addition and 185 deletion
src/vs/base/browser/ui/sash/sash.ts
浏览文件 @ 44558a15
......@@ -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;
......@@ -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();
}
}
}
src/vs/workbench/browser/parts/editor/sideBySideEditor.ts
浏览文件 @ 44558a15
......@@ -8,7 +8,6 @@ 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';
......@@ -16,12 +15,14 @@ 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;
......@@ -29,7 +30,7 @@ export class SideBySideEditor extends BaseEditor {
protected detailsEditor: BaseEditor;
private detailsEditorContainer: HTMLElement;
private sash: VSash;
private splitview: SplitView;
constructor(
@ITelemetryService telemetryService: ITelemetryService,
......@@ -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> {
......@@ -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 {
......@@ -112,7 +136,6 @@ export class SideBySideEditor extends BaseEditor {
if (oldInput) {
this.disposeEditors();
}
this.createEditorContainers();
return this.setNewInput(newInput, options, token);
} else {
......@@ -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();
......@@ -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;
......@@ -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 {
......
src/vs/workbench/parts/preferences/browser/preferencesEditor.ts
浏览文件 @ 44558a15
......@@ -5,7 +5,6 @@
import * as DOM from 'vs/base/browser/dom';
import { Button } from 'vs/base/browser/ui/button/button';
import { VSash } from 'vs/base/browser/ui/sash/sash';
import { Widget } from 'vs/base/browser/ui/widget';
import * as arrays from 'vs/base/common/arrays';
import { Delayer, ThrottledDelayer } from 'vs/base/common/async';
......@@ -56,6 +55,7 @@ import { IFilterResult, IPreferencesService, ISearchResult, ISetting, ISettingsE
import { DefaultPreferencesEditorInput, PreferencesEditorInput } from 'vs/workbench/services/preferences/common/preferencesEditorInput';
import { DefaultSettingsEditorModel, SettingsEditorModel } from 'vs/workbench/services/preferences/common/preferencesModels';
import { ITextFileService } from 'vs/workbench/services/textfile/common/textfiles';
import { SplitView, Orientation, Sizing } from 'vs/base/browser/ui/splitview/splitview';
export class PreferencesEditor extends BaseEditor {
......@@ -736,7 +736,7 @@ class PreferencesRenderersController extends Disposable {
class SideBySidePreferencesWidget extends Widget {
private dimension: DOM.Dimension;
private dimension: DOM.Dimension = new DOM.Dimension(0, 0);
private defaultPreferencesHeader: HTMLElement;
private defaultPreferencesEditor: DefaultPreferencesEditor;
......@@ -753,30 +753,26 @@ class SideBySidePreferencesWidget extends Widget {
readonly onDidSettingsTargetChange: Event<SettingsTarget> = this._onDidSettingsTargetChange.event;
private lastFocusedEditor: BaseEditor;
private sash: VSash;
private splitview: SplitView;
constructor(
parent: HTMLElement,
parentElement: HTMLElement,
@IInstantiationService private instantiationService: IInstantiationService,
@IThemeService private themeService: IThemeService,
@IWorkspaceContextService private workspaceContextService: IWorkspaceContextService,
@IPreferencesService private preferencesService: IPreferencesService,
) {
super();
this.create(parent);
}
private create(parentElement: HTMLElement): void {
DOM.addClass(parentElement, 'side-by-side-preferences-editor');
this.createSash(parentElement);
this.defaultPreferencesEditorContainer = DOM.append(parentElement, DOM.$('.default-preferences-editor-container'));
this.defaultPreferencesEditorContainer.style.position = 'absolute';
this.splitview = new SplitView(parentElement, { orientation: Orientation.HORIZONTAL });
this._register(this.splitview);
this._register(this.splitview.onDidSashReset(() => this.splitview.distributeViewSizes()));
this.defaultPreferencesEditorContainer = DOM.$('.default-preferences-editor-container');
const defaultPreferencesHeaderContainer = DOM.append(this.defaultPreferencesEditorContainer, DOM.$('.preferences-header-container'));
defaultPreferencesHeaderContainer.style.height = '30px';
defaultPreferencesHeaderContainer.style.marginBottom = '4px';
this.defaultPreferencesHeader = DOM.append(defaultPreferencesHeaderContainer, DOM.$('div.default-preferences-header'));
this.defaultPreferencesHeader.textContent = nls.localize('defaultSettings', "Default Settings");
......@@ -784,11 +780,16 @@ class SideBySidePreferencesWidget extends Widget {
this.defaultPreferencesEditor.create(this.defaultPreferencesEditorContainer);
(<CodeEditorWidget>this.defaultPreferencesEditor.getControl()).onDidFocusEditorWidget(() => this.lastFocusedEditor = this.defaultPreferencesEditor);
this.editablePreferencesEditorContainer = DOM.append(parentElement, DOM.$('.editable-preferences-editor-container'));
this.editablePreferencesEditorContainer.style.position = 'absolute';
this.splitview.addView({
element: this.defaultPreferencesEditorContainer,
layout: size => this.defaultPreferencesEditor.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.editablePreferencesEditorContainer = DOM.$('.editable-preferences-editor-container');
const editablePreferencesHeaderContainer = DOM.append(this.editablePreferencesEditorContainer, DOM.$('.preferences-header-container'));
editablePreferencesHeaderContainer.style.height = '30px';
editablePreferencesHeaderContainer.style.marginBottom = '4px';
this.settingsTargetsWidget = this._register(this.instantiationService.createInstance(SettingsTargetsWidget, editablePreferencesHeaderContainer));
this._register(this.settingsTargetsWidget.onDidTargetChange(target => this._onDidSettingsTargetChange.fire(target)));
......@@ -802,6 +803,14 @@ class SideBySidePreferencesWidget extends Widget {
}
}));
this.splitview.addView({
element: this.editablePreferencesEditorContainer,
layout: size => this.editablePreferencesEditor && this.editablePreferencesEditor.layout(new DOM.Dimension(size, this.dimension.height - 34 /* height of header container */)),
minimumSize: 220,
maximumSize: Number.POSITIVE_INFINITY,
onDidChange: Event.None
}, Sizing.Distribute);
const focusTracker = this._register(DOM.trackFocus(parentElement));
this._register(focusTracker.onDidFocus(() => this._onFocus.fire()));
}
......@@ -809,7 +818,6 @@ class SideBySidePreferencesWidget extends Widget {
public setInput(defaultPreferencesEditorInput: DefaultPreferencesEditorInput, editablePreferencesEditorInput: EditorInput, options: EditorOptions, token: CancellationToken): TPromise<{ defaultPreferencesRenderer: IPreferencesRenderer<ISetting>, editablePreferencesRenderer: IPreferencesRenderer<ISetting> }> {
this.getOrCreateEditablePreferencesEditor(editablePreferencesEditorInput);
this.settingsTargetsWidget.settingsTarget = this.getSettingsTarget(editablePreferencesEditorInput.getResource());
this.dolayout(this.sash.getVerticalSashLeft());
return TPromise.join([
this.updateInput(this.defaultPreferencesEditor, defaultPreferencesEditorInput, DefaultSettingsEditorContribution.ID, editablePreferencesEditorInput.getResource(), options, token),
this.updateInput(this.editablePreferencesEditor, editablePreferencesEditorInput, SettingsEditorContribution.ID, defaultPreferencesEditorInput.getResource(), options, token)
......@@ -840,9 +848,9 @@ class SideBySidePreferencesWidget extends Widget {
this.settingsTargetsWidget.setResultCount(settingsTarget, count);
}
public layout(dimension: DOM.Dimension): void {
public layout(dimension: DOM.Dimension = this.dimension): void {
this.dimension = dimension;
this.sash.setDimenesion(this.dimension);
this.splitview.layout(dimension.width);
}
public focus(): void {
......@@ -883,6 +891,7 @@ class SideBySidePreferencesWidget extends Widget {
this.editablePreferencesEditor.create(this.editablePreferencesEditorContainer);
(<CodeEditorWidget>this.editablePreferencesEditor.getControl()).onDidFocusEditorWidget(() => this.lastFocusedEditor = this.editablePreferencesEditor);
this.lastFocusedEditor = this.editablePreferencesEditor;
this.layout();
return editor;
}
......@@ -898,30 +907,6 @@ class SideBySidePreferencesWidget extends Widget {
});
}
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.editablePreferencesEditor || !this.dimension) {
return;
}
const masterEditorWidth = this.dimension.width - splitPoint;
const detailsEditorWidth = this.dimension.width - masterEditorWidth;
this.defaultPreferencesEditorContainer.style.width = `${detailsEditorWidth}px`;
this.defaultPreferencesEditorContainer.style.height = `${this.dimension.height}px`;
this.defaultPreferencesEditorContainer.style.left = '0px';
this.editablePreferencesEditorContainer.style.width = `${masterEditorWidth}px`;
this.editablePreferencesEditorContainer.style.height = `${this.dimension.height}px`;
this.editablePreferencesEditorContainer.style.left = `${splitPoint}px`;
this.defaultPreferencesEditor.layout(new DOM.Dimension(detailsEditorWidth, this.dimension.height - 34 /* height of header container */));
this.editablePreferencesEditor.layout(new DOM.Dimension(masterEditorWidth, this.dimension.height - 34 /* height of header container */));
}
private getSettingsTarget(resource: URI): SettingsTarget {
if (this.preferencesService.userSettingsResource.toString() === resource.toString()) {
return ConfigurationTarget.USER;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或