/*--------------------------------------------------------------------------------------------- * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ import 'vs/css!./media/keybindings'; import * as nls from 'vs/nls'; import { OS } from 'vs/base/common/platform'; import { TPromise } from 'vs/base/common/winjs.base'; import { Disposable } from 'vs/base/common/lifecycle'; import { Event, Emitter } from 'vs/base/common/event'; import { KeybindingLabel } from 'vs/base/browser/ui/keybindingLabel/keybindingLabel'; import { Widget } from 'vs/base/browser/ui/widget'; import { ResolvedKeybinding, KeyCode } from 'vs/base/common/keyCodes'; import * as dom from 'vs/base/browser/dom'; import { InputBox, IInputOptions } from 'vs/base/browser/ui/inputbox/inputBox'; import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { FastDomNode, createFastDomNode } from 'vs/base/browser/fastDomNode'; import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { ICodeEditor, IOverlayWidget, IOverlayWidgetPosition } from 'vs/editor/browser/editorBrowser'; import { attachInputBoxStyler, attachStylerCallback } from 'vs/platform/theme/common/styler'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { editorWidgetBackground, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; import { ScrollType } from 'vs/editor/common/editorCommon'; class KeybindingInputWidget extends Widget { private readonly inputBox: InputBox; private _acceptChords: boolean; private _firstPart: ResolvedKeybinding; private _chordPart: ResolvedKeybinding; private _inputValue: string; private _onKeybinding = this._register(new Emitter<[ResolvedKeybinding, ResolvedKeybinding]>()); public readonly onKeybinding: Event<[ResolvedKeybinding, ResolvedKeybinding]> = this._onKeybinding.event; private _onEnter = this._register(new Emitter()); public readonly onEnter: Event = this._onEnter.event; private _onEscape = this._register(new Emitter()); public readonly onEscape: Event = this._onEscape.event; private _onBlur = this._register(new Emitter()); public readonly onBlur: Event = this._onBlur.event; constructor(parent: HTMLElement, private options: IInputOptions, @IContextViewService private contextViewService: IContextViewService, @IKeybindingService private keybindingService: IKeybindingService, @IThemeService themeService: IThemeService ) { super(); this.inputBox = this._register(new InputBox(parent, this.contextViewService, this.options)); this._register(attachInputBoxStyler(this.inputBox, themeService)); this.onkeydown(this.inputBox.inputElement, e => this._onKeyDown(e)); this.onblur(this.inputBox.inputElement, (e) => this._onBlur.fire()); this.oninput(this.inputBox.inputElement, (e) => { // Prevent other characters from showing up this.setInputValue(this._inputValue); }); this._acceptChords = true; this._firstPart = null; this._chordPart = null; } public setInputValue(value: string): void { this._inputValue = value; this.inputBox.value = this._inputValue; } public focus(): void { this.inputBox.focus(); } public reset() { this._firstPart = null; this._chordPart = null; } private _onKeyDown(keyboardEvent: IKeyboardEvent): void { keyboardEvent.preventDefault(); keyboardEvent.stopPropagation(); if (keyboardEvent.equals(KeyCode.Enter)) { this._onEnter.fire(); return; } if (keyboardEvent.equals(KeyCode.Escape)) { this._onEscape.fire(); return; } this.printKeybinding(keyboardEvent); } private printKeybinding(keyboardEvent: IKeyboardEvent): void { const keybinding = this.keybindingService.resolveKeyboardEvent(keyboardEvent); const info = `code: ${keyboardEvent.browserEvent.code}, keyCode: ${keyboardEvent.browserEvent.keyCode}, key: ${keyboardEvent.browserEvent.key} => UI: ${keybinding.getAriaLabel()}, user settings: ${keybinding.getUserSettingsLabel()}, dispatch: ${keybinding.getDispatchParts()[0]}`; if (this._acceptChords) { const hasFirstPart = (this._firstPart && this._firstPart.getDispatchParts()[0] !== null); const hasChordPart = (this._chordPart && this._chordPart.getDispatchParts()[0] !== null); if (hasFirstPart && hasChordPart) { // Reset this._firstPart = keybinding; this._chordPart = null; } else if (!hasFirstPart) { this._firstPart = keybinding; } else { this._chordPart = keybinding; } } else { this._firstPart = keybinding; } let value = ''; if (this._firstPart) { value = this._firstPart.getUserSettingsLabel(); } if (this._chordPart) { value = value + ' ' + this._chordPart.getUserSettingsLabel(); } this.setInputValue(value); this.inputBox.inputElement.title = info; this._onKeybinding.fire([this._firstPart, this._chordPart]); } } export class DefineKeybindingWidget extends Widget { private static readonly WIDTH = 400; private static readonly HEIGHT = 90; private _domNode: FastDomNode; private _keybindingInputWidget: KeybindingInputWidget; private _outputNode: HTMLElement; private _firstPart: ResolvedKeybinding = null; private _chordPart: ResolvedKeybinding = null; private _isVisible: boolean = false; private _onHide = this._register(new Emitter()); private _onDidChange = this._register(new Emitter<[ResolvedKeybinding, ResolvedKeybinding]>()); public onDidChange: Event<[ResolvedKeybinding, ResolvedKeybinding]> = this._onDidChange.event; constructor( parent: HTMLElement, @IInstantiationService private instantiationService: IInstantiationService, @IThemeService private themeService: IThemeService ) { super(); this.create(); if (parent) { dom.append(parent, this._domNode.domNode); } } get domNode(): HTMLElement { return this._domNode.domNode; } define(): TPromise { this._keybindingInputWidget.reset(); return new TPromise((c, e) => { if (!this._isVisible) { this._isVisible = true; this._domNode.setDisplay('block'); this._firstPart = null; this._chordPart = null; this._keybindingInputWidget.setInputValue(''); dom.clearNode(this._outputNode); this._keybindingInputWidget.focus(); } const disposable = this._onHide.event(() => { if (this._firstPart) { let r = this._firstPart.getUserSettingsLabel(); if (this._chordPart) { r = r + ' ' + this._chordPart.getUserSettingsLabel(); } c(r); } else { c(null); } disposable.dispose(); }); }); } layout(layout: dom.Dimension): void { let top = Math.round((layout.height - DefineKeybindingWidget.HEIGHT) / 2); this._domNode.setTop(top); let left = Math.round((layout.width - DefineKeybindingWidget.WIDTH) / 2); this._domNode.setLeft(left); } private create(): void { this._domNode = createFastDomNode(document.createElement('div')); this._domNode.setDisplay('none'); this._domNode.setClassName('defineKeybindingWidget'); this._domNode.setWidth(DefineKeybindingWidget.WIDTH); this._domNode.setHeight(DefineKeybindingWidget.HEIGHT); dom.append(this._domNode.domNode, dom.$('.message', null, nls.localize('defineKeybinding.initial', "Press desired key combination and then press ENTER."))); this._register(attachStylerCallback(this.themeService, { editorWidgetBackground, widgetShadow }, colors => { if (colors.editorWidgetBackground) { this._domNode.domNode.style.backgroundColor = colors.editorWidgetBackground.toString(); } else { this._domNode.domNode.style.backgroundColor = null; } if (colors.widgetShadow) { this._domNode.domNode.style.boxShadow = `0 2px 8px ${colors.widgetShadow}`; } else { this._domNode.domNode.style.boxShadow = null; } })); this._keybindingInputWidget = this._register(this.instantiationService.createInstance(KeybindingInputWidget, this._domNode.domNode, {})); this._register(this._keybindingInputWidget.onKeybinding(keybinding => { this.printKeybinding(keybinding); this._onDidChange.fire(keybinding); })); this._register(this._keybindingInputWidget.onEnter(() => this.hide())); this._register(this._keybindingInputWidget.onEscape(() => this.onCancel())); this._register(this._keybindingInputWidget.onBlur(() => this.onCancel())); this._outputNode = dom.append(this._domNode.domNode, dom.$('.output')); } private printKeybinding(keybinding: [ResolvedKeybinding, ResolvedKeybinding]): void { const [firstPart, chordPart] = keybinding; this._firstPart = firstPart; this._chordPart = chordPart; dom.clearNode(this._outputNode); new KeybindingLabel(this._outputNode, OS).set(this._firstPart, null); if (this._chordPart) { this._outputNode.appendChild(document.createTextNode(nls.localize('defineKeybinding.chordsTo', "chord to"))); new KeybindingLabel(this._outputNode, OS).set(this._chordPart, null); } } public printConflicts(numConflicts: number): void { let outputString: string = nls.localize('defineKeybinding.conflicts', "Conflict(s)"); if (numConflicts > 0) { outputString = '(' + numConflicts + ' ' + outputString + ')'; } else { outputString = ''; } this._outputNode.appendChild(document.createTextNode(outputString)); } private onCancel(): void { this._firstPart = null; this._chordPart = null; this.hide(); } private hide(): void { this._domNode.setDisplay('none'); this._isVisible = false; this._onHide.fire(); } } export class DefineKeybindingOverlayWidget extends Disposable implements IOverlayWidget { private static readonly ID = 'editor.contrib.defineKeybindingWidget'; private readonly _widget: DefineKeybindingWidget; constructor(private _editor: ICodeEditor, @IInstantiationService instantiationService: IInstantiationService ) { super(); this._widget = instantiationService.createInstance(DefineKeybindingWidget, null); this._editor.addOverlayWidget(this); } public getId(): string { return DefineKeybindingOverlayWidget.ID; } public getDomNode(): HTMLElement { return this._widget.domNode; } public getPosition(): IOverlayWidgetPosition { return { preference: null }; } public dispose(): void { this._editor.removeOverlayWidget(this); super.dispose(); } public start(): TPromise { this._editor.revealPositionInCenterIfOutsideViewport(this._editor.getPosition(), ScrollType.Smooth); const layoutInfo = this._editor.getLayoutInfo(); this._widget.layout(new dom.Dimension(layoutInfo.width, layoutInfo.height)); return this._widget.define(); } }