feat: 添加vscode编辑器
This commit is contained in:
@@ -0,0 +1,46 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.monaco-dropdown {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.monaco-dropdown > .dropdown-label {
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.monaco-dropdown > .dropdown-label > .action-label.disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.monaco-dropdown-with-primary {
|
||||
display: flex !important;
|
||||
flex-direction: row;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.monaco-dropdown-with-primary > .action-container > .action-label {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.monaco-dropdown-with-primary > .dropdown-action-container > .monaco-dropdown > .dropdown-label .codicon[class*='codicon-'] {
|
||||
font-size: 12px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
line-height: 16px;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.monaco-dropdown-with-primary > .dropdown-action-container > .monaco-dropdown > .dropdown-label > .action-label {
|
||||
display: block;
|
||||
background-size: 16px;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import { $, addDisposableListener, append, EventHelper, EventType } from '../../dom.js';
|
||||
import { StandardKeyboardEvent } from '../../keyboardEvent.js';
|
||||
import { EventType as GestureEventType, Gesture } from '../../touch.js';
|
||||
import { ActionRunner } from '../../../common/actions.js';
|
||||
import { Emitter } from '../../../common/event.js';
|
||||
import './dropdown.css';
|
||||
export class BaseDropdown extends ActionRunner {
|
||||
constructor(container, options) {
|
||||
super();
|
||||
this._onDidChangeVisibility = this._register(new Emitter());
|
||||
this.onDidChangeVisibility = this._onDidChangeVisibility.event;
|
||||
this._element = append(container, $('.monaco-dropdown'));
|
||||
this._label = append(this._element, $('.dropdown-label'));
|
||||
let labelRenderer = options.labelRenderer;
|
||||
if (!labelRenderer) {
|
||||
labelRenderer = (container) => {
|
||||
container.textContent = options.label || '';
|
||||
return null;
|
||||
};
|
||||
}
|
||||
for (const event of [EventType.CLICK, EventType.MOUSE_DOWN, GestureEventType.Tap]) {
|
||||
this._register(addDisposableListener(this.element, event, e => EventHelper.stop(e, true))); // prevent default click behaviour to trigger
|
||||
}
|
||||
for (const event of [EventType.MOUSE_DOWN, GestureEventType.Tap]) {
|
||||
this._register(addDisposableListener(this._label, event, e => {
|
||||
if (e instanceof MouseEvent && (e.detail > 1 || e.button !== 0)) {
|
||||
// prevent right click trigger to allow separate context menu (https://github.com/microsoft/vscode/issues/151064)
|
||||
// prevent multiple clicks to open multiple context menus (https://github.com/microsoft/vscode/issues/41363)
|
||||
return;
|
||||
}
|
||||
if (this.visible) {
|
||||
this.hide();
|
||||
}
|
||||
else {
|
||||
this.show();
|
||||
}
|
||||
}));
|
||||
}
|
||||
this._register(addDisposableListener(this._label, EventType.KEY_UP, e => {
|
||||
const event = new StandardKeyboardEvent(e);
|
||||
if (event.equals(3 /* KeyCode.Enter */) || event.equals(10 /* KeyCode.Space */)) {
|
||||
EventHelper.stop(e, true); // https://github.com/microsoft/vscode/issues/57997
|
||||
if (this.visible) {
|
||||
this.hide();
|
||||
}
|
||||
else {
|
||||
this.show();
|
||||
}
|
||||
}
|
||||
}));
|
||||
const cleanupFn = labelRenderer(this._label);
|
||||
if (cleanupFn) {
|
||||
this._register(cleanupFn);
|
||||
}
|
||||
this._register(Gesture.addTarget(this._label));
|
||||
}
|
||||
get element() {
|
||||
return this._element;
|
||||
}
|
||||
show() {
|
||||
if (!this.visible) {
|
||||
this.visible = true;
|
||||
this._onDidChangeVisibility.fire(true);
|
||||
}
|
||||
}
|
||||
hide() {
|
||||
if (this.visible) {
|
||||
this.visible = false;
|
||||
this._onDidChangeVisibility.fire(false);
|
||||
}
|
||||
}
|
||||
dispose() {
|
||||
super.dispose();
|
||||
this.hide();
|
||||
if (this.boxContainer) {
|
||||
this.boxContainer.remove();
|
||||
this.boxContainer = undefined;
|
||||
}
|
||||
if (this.contents) {
|
||||
this.contents.remove();
|
||||
this.contents = undefined;
|
||||
}
|
||||
if (this._label) {
|
||||
this._label.remove();
|
||||
this._label = undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
export class DropdownMenu extends BaseDropdown {
|
||||
constructor(container, options) {
|
||||
super(container, options);
|
||||
this._actions = [];
|
||||
this._contextMenuProvider = options.contextMenuProvider;
|
||||
this.actions = options.actions || [];
|
||||
this.actionProvider = options.actionProvider;
|
||||
this.menuClassName = options.menuClassName || '';
|
||||
this.menuAsChild = !!options.menuAsChild;
|
||||
}
|
||||
set menuOptions(options) {
|
||||
this._menuOptions = options;
|
||||
}
|
||||
get menuOptions() {
|
||||
return this._menuOptions;
|
||||
}
|
||||
get actions() {
|
||||
if (this.actionProvider) {
|
||||
return this.actionProvider.getActions();
|
||||
}
|
||||
return this._actions;
|
||||
}
|
||||
set actions(actions) {
|
||||
this._actions = actions;
|
||||
}
|
||||
show() {
|
||||
super.show();
|
||||
this.element.classList.add('active');
|
||||
this._contextMenuProvider.showContextMenu({
|
||||
getAnchor: () => this.element,
|
||||
getActions: () => this.actions,
|
||||
getActionsContext: () => this.menuOptions ? this.menuOptions.context : null,
|
||||
getActionViewItem: action => this.menuOptions && this.menuOptions.actionViewItemProvider ? this.menuOptions.actionViewItemProvider(action) : undefined,
|
||||
getKeyBinding: action => this.menuOptions && this.menuOptions.getKeyBinding ? this.menuOptions.getKeyBinding(action) : undefined,
|
||||
getMenuClassName: () => this.menuClassName,
|
||||
onHide: () => this.onHide(),
|
||||
actionRunner: this.menuOptions ? this.menuOptions.actionRunner : undefined,
|
||||
anchorAlignment: this.menuOptions ? this.menuOptions.anchorAlignment : 0 /* AnchorAlignment.LEFT */,
|
||||
domForShadowRoot: this.menuAsChild ? this.element : undefined
|
||||
});
|
||||
}
|
||||
hide() {
|
||||
super.hide();
|
||||
}
|
||||
onHide() {
|
||||
this.hide();
|
||||
this.element.classList.remove('active');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import { $, append } from '../../dom.js';
|
||||
import { BaseActionViewItem } from '../actionbar/actionViewItems.js';
|
||||
import { DropdownMenu } from './dropdown.js';
|
||||
import { Emitter } from '../../../common/event.js';
|
||||
import './dropdown.css';
|
||||
export class DropdownMenuActionViewItem extends BaseActionViewItem {
|
||||
constructor(action, menuActionsOrProvider, contextMenuProvider, options = Object.create(null)) {
|
||||
super(null, action, options);
|
||||
this.actionItem = null;
|
||||
this._onDidChangeVisibility = this._register(new Emitter());
|
||||
this.menuActionsOrProvider = menuActionsOrProvider;
|
||||
this.contextMenuProvider = contextMenuProvider;
|
||||
this.options = options;
|
||||
if (this.options.actionRunner) {
|
||||
this.actionRunner = this.options.actionRunner;
|
||||
}
|
||||
}
|
||||
render(container) {
|
||||
this.actionItem = container;
|
||||
const labelRenderer = (el) => {
|
||||
this.element = append(el, $('a.action-label'));
|
||||
let classNames = [];
|
||||
if (typeof this.options.classNames === 'string') {
|
||||
classNames = this.options.classNames.split(/\s+/g).filter(s => !!s);
|
||||
}
|
||||
else if (this.options.classNames) {
|
||||
classNames = this.options.classNames;
|
||||
}
|
||||
// todo@aeschli: remove codicon, should come through `this.options.classNames`
|
||||
if (!classNames.find(c => c === 'icon')) {
|
||||
classNames.push('codicon');
|
||||
}
|
||||
this.element.classList.add(...classNames);
|
||||
this.element.setAttribute('role', 'button');
|
||||
this.element.setAttribute('aria-haspopup', 'true');
|
||||
this.element.setAttribute('aria-expanded', 'false');
|
||||
this.element.title = this._action.label || '';
|
||||
this.element.ariaLabel = this._action.label || '';
|
||||
return null;
|
||||
};
|
||||
const isActionsArray = Array.isArray(this.menuActionsOrProvider);
|
||||
const options = {
|
||||
contextMenuProvider: this.contextMenuProvider,
|
||||
labelRenderer: labelRenderer,
|
||||
menuAsChild: this.options.menuAsChild,
|
||||
actions: isActionsArray ? this.menuActionsOrProvider : undefined,
|
||||
actionProvider: isActionsArray ? undefined : this.menuActionsOrProvider
|
||||
};
|
||||
this.dropdownMenu = this._register(new DropdownMenu(container, options));
|
||||
this._register(this.dropdownMenu.onDidChangeVisibility(visible => {
|
||||
var _a;
|
||||
(_a = this.element) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', `${visible}`);
|
||||
this._onDidChangeVisibility.fire(visible);
|
||||
}));
|
||||
this.dropdownMenu.menuOptions = {
|
||||
actionViewItemProvider: this.options.actionViewItemProvider,
|
||||
actionRunner: this.actionRunner,
|
||||
getKeyBinding: this.options.keybindingProvider,
|
||||
context: this._context
|
||||
};
|
||||
if (this.options.anchorAlignmentProvider) {
|
||||
const that = this;
|
||||
this.dropdownMenu.menuOptions = Object.assign(Object.assign({}, this.dropdownMenu.menuOptions), { get anchorAlignment() {
|
||||
return that.options.anchorAlignmentProvider();
|
||||
} });
|
||||
}
|
||||
this.updateTooltip();
|
||||
this.updateEnabled();
|
||||
}
|
||||
getTooltip() {
|
||||
let title = null;
|
||||
if (this.getAction().tooltip) {
|
||||
title = this.getAction().tooltip;
|
||||
}
|
||||
else if (this.getAction().label) {
|
||||
title = this.getAction().label;
|
||||
}
|
||||
return title !== null && title !== void 0 ? title : undefined;
|
||||
}
|
||||
setActionContext(newContext) {
|
||||
super.setActionContext(newContext);
|
||||
if (this.dropdownMenu) {
|
||||
if (this.dropdownMenu.menuOptions) {
|
||||
this.dropdownMenu.menuOptions.context = newContext;
|
||||
}
|
||||
else {
|
||||
this.dropdownMenu.menuOptions = { context: newContext };
|
||||
}
|
||||
}
|
||||
}
|
||||
updateEnabled() {
|
||||
var _a, _b;
|
||||
const disabled = !this.getAction().enabled;
|
||||
(_a = this.actionItem) === null || _a === void 0 ? void 0 : _a.classList.toggle('disabled', disabled);
|
||||
(_b = this.element) === null || _b === void 0 ? void 0 : _b.classList.toggle('disabled', disabled);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user