@sussudio/platform
Version:
Internal APIs for VS Code's service injection the base services.
588 lines (587 loc) • 19.6 kB
JavaScript
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
var __decorate =
(this && this.__decorate) ||
function (decorators, target, key, desc) {
var c = arguments.length,
r = c < 3 ? target : desc === null ? (desc = Object.getOwnPropertyDescriptor(target, key)) : desc,
d;
if (typeof Reflect === 'object' && typeof Reflect.decorate === 'function')
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if ((d = decorators[i])) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __param =
(this && this.__param) ||
function (paramIndex, decorator) {
return function (target, key) {
decorator(target, key, paramIndex);
};
};
import {
$,
addDisposableListener,
append,
asCSSUrl,
EventType,
ModifierKeyEmitter,
prepend,
} from '@sussudio/base/browser/dom.mjs';
import { StandardKeyboardEvent } from '@sussudio/base/browser/keyboardEvent.mjs';
import {
ActionViewItem,
BaseActionViewItem,
SelectActionViewItem,
} from '@sussudio/base/browser/ui/actionbar/actionViewItems.mjs';
import { DropdownMenuActionViewItem } from '@sussudio/base/browser/ui/dropdown/dropdownActionViewItem.mjs';
import { ActionRunner, Separator, SubmenuAction } from '@sussudio/base/common/actions.mjs';
import { UILabelProvider } from '@sussudio/base/common/keybindingLabels.mjs';
import { combinedDisposable, MutableDisposable, toDisposable } from '@sussudio/base/common/lifecycle.mjs';
import { isLinux, isWindows, OS } from '@sussudio/base/common/platform.mjs';
import '../../../css!./menuEntryActionViewItem.mjs';
import { localize } from 'vscode-nls.mjs';
import { IMenuService, MenuItemAction, SubmenuItemAction } from '../common/actions.mjs';
import { isICommandActionToggleInfo } from '../../action/common/action.mjs';
import { IContextKeyService } from '../../contextkey/common/contextkey.mjs';
import { IContextMenuService, IContextViewService } from '../../contextview/browser/contextView.mjs';
import { IInstantiationService } from '../../instantiation/common/instantiation.mjs';
import { IKeybindingService } from '../../keybinding/common/keybinding.mjs';
import { INotificationService } from '../../notification/common/notification.mjs';
import { IStorageService } from '../../storage/common/storage.mjs';
import { IThemeService, ThemeIcon } from '../../theme/common/themeService.mjs';
import { isDark } from '../../theme/common/theme.mjs';
import { assertType } from '@sussudio/base/common/types.mjs';
import { attachSelectBoxStyler, attachStylerCallback } from '../../theme/common/styler.mjs';
import { selectBorder } from '../../theme/common/colorRegistry.mjs';
export function createAndFillInContextMenuActions(menu, options, target, primaryGroup) {
const groups = menu.getActions(options);
const modifierKeyEmitter = ModifierKeyEmitter.getInstance();
const useAlternativeActions =
modifierKeyEmitter.keyStatus.altKey || ((isWindows || isLinux) && modifierKeyEmitter.keyStatus.shiftKey);
fillInActions(
groups,
target,
useAlternativeActions,
primaryGroup ? (actionGroup) => actionGroup === primaryGroup : (actionGroup) => actionGroup === 'navigation',
);
}
export function createAndFillInActionBarActions(
menu,
options,
target,
primaryGroup,
shouldInlineSubmenu,
useSeparatorsInPrimaryActions,
) {
const groups = menu.getActions(options);
const isPrimaryAction =
typeof primaryGroup === 'string' ? (actionGroup) => actionGroup === primaryGroup : primaryGroup;
// Action bars handle alternative actions on their own so the alternative actions should be ignored
fillInActions(groups, target, false, isPrimaryAction, shouldInlineSubmenu, useSeparatorsInPrimaryActions);
}
function fillInActions(
groups,
target,
useAlternativeActions,
isPrimaryAction = (actionGroup) => actionGroup === 'navigation',
shouldInlineSubmenu = () => false,
useSeparatorsInPrimaryActions = false,
) {
let primaryBucket;
let secondaryBucket;
if (Array.isArray(target)) {
primaryBucket = target;
secondaryBucket = target;
} else {
primaryBucket = target.primary;
secondaryBucket = target.secondary;
}
const submenuInfo = new Set();
for (const [group, actions] of groups) {
let target;
if (isPrimaryAction(group)) {
target = primaryBucket;
if (target.length > 0 && useSeparatorsInPrimaryActions) {
target.push(new Separator());
}
} else {
target = secondaryBucket;
if (target.length > 0) {
target.push(new Separator());
}
}
for (let action of actions) {
if (useAlternativeActions) {
action = action instanceof MenuItemAction && action.alt ? action.alt : action;
}
const newLen = target.push(action);
// keep submenu info for later inlining
if (action instanceof SubmenuAction) {
submenuInfo.add({ group, action, index: newLen - 1 });
}
}
}
// ask the outside if submenu should be inlined or not. only ask when
// there would be enough space
for (const { group, action, index } of submenuInfo) {
const target = isPrimaryAction(group) ? primaryBucket : secondaryBucket;
// inlining submenus with length 0 or 1 is easy,
// larger submenus need to be checked with the overall limit
const submenuActions = action.actions;
if (submenuActions.length <= 1 && shouldInlineSubmenu(action, group, target.length)) {
target.splice(index, 1, ...submenuActions);
}
}
}
let MenuEntryActionViewItem = class MenuEntryActionViewItem extends ActionViewItem {
_keybindingService;
_notificationService;
_contextKeyService;
_themeService;
_contextMenuService;
_wantsAltCommand = false;
_itemClassDispose = this._register(new MutableDisposable());
_altKey;
constructor(
action,
options,
_keybindingService,
_notificationService,
_contextKeyService,
_themeService,
_contextMenuService,
) {
super(undefined, action, {
icon: !!(action.class || action.item.icon),
label: !action.class && !action.item.icon,
draggable: options?.draggable,
keybinding: options?.keybinding,
hoverDelegate: options?.hoverDelegate,
});
this._keybindingService = _keybindingService;
this._notificationService = _notificationService;
this._contextKeyService = _contextKeyService;
this._themeService = _themeService;
this._contextMenuService = _contextMenuService;
this._altKey = ModifierKeyEmitter.getInstance();
}
get _menuItemAction() {
return this._action;
}
get _commandAction() {
return (this._wantsAltCommand && this._menuItemAction.alt) || this._menuItemAction;
}
async onClick(event) {
event.preventDefault();
event.stopPropagation();
try {
await this.actionRunner.run(this._commandAction, this._context);
} catch (err) {
this._notificationService.error(err);
}
}
render(container) {
super.render(container);
container.classList.add('menu-entry');
this._updateItemClass(this._menuItemAction.item);
let mouseOver = false;
let alternativeKeyDown =
this._altKey.keyStatus.altKey || ((isWindows || isLinux) && this._altKey.keyStatus.shiftKey);
const updateAltState = () => {
const wantsAltCommand = mouseOver && alternativeKeyDown && !!this._commandAction.alt?.enabled;
if (wantsAltCommand !== this._wantsAltCommand) {
this._wantsAltCommand = wantsAltCommand;
this.updateLabel();
this.updateTooltip();
this.updateClass();
}
};
if (this._menuItemAction.alt) {
this._register(
this._altKey.event((value) => {
alternativeKeyDown = value.altKey || ((isWindows || isLinux) && value.shiftKey);
updateAltState();
}),
);
}
this._register(
addDisposableListener(container, 'mouseleave', (_) => {
mouseOver = false;
updateAltState();
}),
);
this._register(
addDisposableListener(container, 'mouseenter', (_) => {
mouseOver = true;
updateAltState();
}),
);
}
updateLabel() {
if (this.options.label && this.label) {
this.label.textContent = this._commandAction.label;
}
}
getTooltip() {
const keybinding = this._keybindingService.lookupKeybinding(this._commandAction.id, this._contextKeyService);
const keybindingLabel = keybinding && keybinding.getLabel();
const tooltip = this._commandAction.tooltip || this._commandAction.label;
let title = keybindingLabel ? localize('titleAndKb', '{0} ({1})', tooltip, keybindingLabel) : tooltip;
if (!this._wantsAltCommand && this._menuItemAction.alt?.enabled) {
const altTooltip = this._menuItemAction.alt.tooltip || this._menuItemAction.alt.label;
const altKeybinding = this._keybindingService.lookupKeybinding(
this._menuItemAction.alt.id,
this._contextKeyService,
);
const altKeybindingLabel = altKeybinding && altKeybinding.getLabel();
const altTitleSection = altKeybindingLabel
? localize('titleAndKb', '{0} ({1})', altTooltip, altKeybindingLabel)
: altTooltip;
title = localize(
'titleAndKbAndAlt',
'{0}\n[{1}] {2}',
title,
UILabelProvider.modifierLabels[OS].altKey,
altTitleSection,
);
}
return title;
}
updateClass() {
if (this.options.icon) {
if (this._commandAction !== this._menuItemAction) {
if (this._menuItemAction.alt) {
this._updateItemClass(this._menuItemAction.alt.item);
}
} else {
this._updateItemClass(this._menuItemAction.item);
}
}
}
_updateItemClass(item) {
this._itemClassDispose.value = undefined;
const { element, label } = this;
if (!element || !label) {
return;
}
const icon =
this._commandAction.checked && isICommandActionToggleInfo(item.toggled) && item.toggled.icon
? item.toggled.icon
: item.icon;
if (!icon) {
return;
}
if (ThemeIcon.isThemeIcon(icon)) {
// theme icons
const iconClasses = ThemeIcon.asClassNameArray(icon);
label.classList.add(...iconClasses);
this._itemClassDispose.value = toDisposable(() => {
label.classList.remove(...iconClasses);
});
} else {
// icon path/url
label.style.backgroundImage = isDark(this._themeService.getColorTheme().type)
? asCSSUrl(icon.dark)
: asCSSUrl(icon.light);
label.classList.add('icon');
this._itemClassDispose.value = combinedDisposable(
toDisposable(() => {
label.style.backgroundImage = '';
label.classList.remove('icon');
}),
this._themeService.onDidColorThemeChange(() => {
// refresh when the theme changes in case we go between dark <-> light
this.updateClass();
}),
);
}
}
};
MenuEntryActionViewItem = __decorate(
[
__param(2, IKeybindingService),
__param(3, INotificationService),
__param(4, IContextKeyService),
__param(5, IThemeService),
__param(6, IContextMenuService),
],
MenuEntryActionViewItem,
);
export { MenuEntryActionViewItem };
let SubmenuEntryActionViewItem = class SubmenuEntryActionViewItem extends DropdownMenuActionViewItem {
_contextMenuService;
_themeService;
constructor(action, options, _contextMenuService, _themeService) {
const dropdownOptions = Object.assign({}, options ?? Object.create(null), {
menuAsChild: options?.menuAsChild ?? false,
classNames:
options?.classNames ??
(ThemeIcon.isThemeIcon(action.item.icon) ? ThemeIcon.asClassName(action.item.icon) : undefined),
});
super(action, { getActions: () => action.actions }, _contextMenuService, dropdownOptions);
this._contextMenuService = _contextMenuService;
this._themeService = _themeService;
}
render(container) {
super.render(container);
assertType(this.element);
container.classList.add('menu-entry');
const action = this._action;
const { icon } = action.item;
if (icon && !ThemeIcon.isThemeIcon(icon)) {
this.element.classList.add('icon');
const setBackgroundImage = () => {
if (this.element) {
this.element.style.backgroundImage = isDark(this._themeService.getColorTheme().type)
? asCSSUrl(icon.dark)
: asCSSUrl(icon.light);
}
};
setBackgroundImage();
this._register(
this._themeService.onDidColorThemeChange(() => {
// refresh when the theme changes in case we go between dark <-> light
setBackgroundImage();
}),
);
}
}
};
SubmenuEntryActionViewItem = __decorate(
[__param(2, IContextMenuService), __param(3, IThemeService)],
SubmenuEntryActionViewItem,
);
export { SubmenuEntryActionViewItem };
let DropdownWithDefaultActionViewItem = class DropdownWithDefaultActionViewItem extends BaseActionViewItem {
_keybindingService;
_notificationService;
_contextMenuService;
_menuService;
_instaService;
_storageService;
_options;
_defaultAction;
_dropdown;
_container = null;
_storageKey;
get onDidChangeDropdownVisibility() {
return this._dropdown.onDidChangeVisibility;
}
constructor(
submenuAction,
options,
_keybindingService,
_notificationService,
_contextMenuService,
_menuService,
_instaService,
_storageService,
) {
super(null, submenuAction);
this._keybindingService = _keybindingService;
this._notificationService = _notificationService;
this._contextMenuService = _contextMenuService;
this._menuService = _menuService;
this._instaService = _instaService;
this._storageService = _storageService;
this._options = options;
this._storageKey = `${submenuAction.item.submenu.id}_lastActionId`;
// determine default action
let defaultAction;
const defaultActionId = _storageService.get(this._storageKey, 1 /* StorageScope.WORKSPACE */);
if (defaultActionId) {
defaultAction = submenuAction.actions.find((a) => defaultActionId === a.id);
}
if (!defaultAction) {
defaultAction = submenuAction.actions[0];
}
this._defaultAction = this._instaService.createInstance(MenuEntryActionViewItem, defaultAction, {
keybinding: this._getDefaultActionKeybindingLabel(defaultAction),
});
const dropdownOptions = Object.assign({}, options ?? Object.create(null), {
menuAsChild: options?.menuAsChild ?? true,
classNames: options?.classNames ?? ['codicon', 'codicon-chevron-down'],
actionRunner: options?.actionRunner ?? new ActionRunner(),
});
this._dropdown = new DropdownMenuActionViewItem(
submenuAction,
submenuAction.actions,
this._contextMenuService,
dropdownOptions,
);
this._dropdown.actionRunner.onDidRun((e) => {
if (e.action instanceof MenuItemAction) {
this.update(e.action);
}
});
}
update(lastAction) {
this._storageService.store(
this._storageKey,
lastAction.id,
1 /* StorageScope.WORKSPACE */,
0 /* StorageTarget.USER */,
);
this._defaultAction.dispose();
this._defaultAction = this._instaService.createInstance(MenuEntryActionViewItem, lastAction, {
keybinding: this._getDefaultActionKeybindingLabel(lastAction),
});
this._defaultAction.actionRunner = new (class extends ActionRunner {
async runAction(action, context) {
await action.run(undefined);
}
})();
if (this._container) {
this._defaultAction.render(prepend(this._container, $('.action-container')));
}
}
_getDefaultActionKeybindingLabel(defaultAction) {
let defaultActionKeybinding;
if (this._options?.renderKeybindingWithDefaultActionLabel) {
const kb = this._keybindingService.lookupKeybinding(defaultAction.id);
if (kb) {
defaultActionKeybinding = `(${kb.getLabel()})`;
}
}
return defaultActionKeybinding;
}
setActionContext(newContext) {
super.setActionContext(newContext);
this._defaultAction.setActionContext(newContext);
this._dropdown.setActionContext(newContext);
}
render(container) {
this._container = container;
super.render(this._container);
this._container.classList.add('monaco-dropdown-with-default');
const primaryContainer = $('.action-container');
this._defaultAction.render(append(this._container, primaryContainer));
this._register(
addDisposableListener(primaryContainer, EventType.KEY_DOWN, (e) => {
const event = new StandardKeyboardEvent(e);
if (event.equals(17 /* KeyCode.RightArrow */)) {
this._defaultAction.element.tabIndex = -1;
this._dropdown.focus();
event.stopPropagation();
}
}),
);
const dropdownContainer = $('.dropdown-action-container');
this._dropdown.render(append(this._container, dropdownContainer));
this._register(
addDisposableListener(dropdownContainer, EventType.KEY_DOWN, (e) => {
const event = new StandardKeyboardEvent(e);
if (event.equals(15 /* KeyCode.LeftArrow */)) {
this._defaultAction.element.tabIndex = 0;
this._dropdown.setFocusable(false);
this._defaultAction.element?.focus();
event.stopPropagation();
}
}),
);
}
focus(fromRight) {
if (fromRight) {
this._dropdown.focus();
} else {
this._defaultAction.element.tabIndex = 0;
this._defaultAction.element.focus();
}
}
blur() {
this._defaultAction.element.tabIndex = -1;
this._dropdown.blur();
this._container.blur();
}
setFocusable(focusable) {
if (focusable) {
this._defaultAction.element.tabIndex = 0;
} else {
this._defaultAction.element.tabIndex = -1;
this._dropdown.setFocusable(false);
}
}
dispose() {
this._defaultAction.dispose();
this._dropdown.dispose();
super.dispose();
}
};
DropdownWithDefaultActionViewItem = __decorate(
[
__param(2, IKeybindingService),
__param(3, INotificationService),
__param(4, IContextMenuService),
__param(5, IMenuService),
__param(6, IInstantiationService),
__param(7, IStorageService),
],
DropdownWithDefaultActionViewItem,
);
export { DropdownWithDefaultActionViewItem };
let SubmenuEntrySelectActionViewItem = class SubmenuEntrySelectActionViewItem extends SelectActionViewItem {
themeService;
constructor(action, themeService, contextViewService) {
super(
null,
action,
action.actions.map((a) => ({
text: a.id === Separator.ID ? '\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500' : a.label,
isDisabled: !a.enabled,
})),
0,
contextViewService,
{ ariaLabel: action.tooltip, optionsAsChildren: true },
);
this.themeService = themeService;
this._register(attachSelectBoxStyler(this.selectBox, themeService));
this.select(
Math.max(
0,
action.actions.findIndex((a) => a.checked),
),
);
}
render(container) {
super.render(container);
this._register(
attachStylerCallback(this.themeService, { selectBorder }, (colors) => {
container.style.borderColor = colors.selectBorder ? `${colors.selectBorder}` : '';
}),
);
}
runAction(option, index) {
const action = this.action.actions[index];
if (action) {
this.actionRunner.run(action);
}
}
};
SubmenuEntrySelectActionViewItem = __decorate(
[__param(1, IThemeService), __param(2, IContextViewService)],
SubmenuEntrySelectActionViewItem,
);
/**
* Creates action view items for menu actions or submenu actions.
*/
export function createActionViewItem(instaService, action, options) {
if (action instanceof MenuItemAction) {
return instaService.createInstance(MenuEntryActionViewItem, action, options);
} else if (action instanceof SubmenuItemAction) {
if (action.item.isSelection) {
return instaService.createInstance(SubmenuEntrySelectActionViewItem, action);
} else {
if (action.item.rememberDefaultAction) {
return instaService.createInstance(DropdownWithDefaultActionViewItem, action, options);
} else {
return instaService.createInstance(SubmenuEntryActionViewItem, action, options);
}
}
} else {
return undefined;
}
}