@opensumi/ide-core-browser 2.21.13 → 2.22.0

package/src/menu/next/menu-id.ts

@@ -0,0 +1,86 @@
+// menu id 枚举值列表
+export enum MenuId {
+  AccountsContext = 'accounts/context',
+  ActivityBarContext = 'activityBar/context',
+  ActivityBarExtra = 'activityBar/extra',
+  CommandPalette = 'commandPalette',
+  DebugBreakpointsContext = 'debug/breakpoints/context',
+  DebugCallStackContext = 'debug/callstack/context',
+  DebugConsoleContext = 'debug/console/context',
+  DebugVariablesContext = 'debug/variables/context',
+  DebugWatchContext = 'debug/watch/context',
+  DebugToolBar = 'debug/toolbar',
+  EditorContext = 'editor/context',
+  EditorTitle = 'editor/title',
+  EditorTitleRun = 'editor/title/run',
+  EditorTitleContext = 'editor/title/context',
+  EmptyEditorGroupContext = 'empty/editor/group/context',
+  ExplorerContext = 'explorer/context',
+  MenubarAppearanceMenu = 'menubar/appearance',
+  MenubarAppMenu = 'menubar/app',
+  MenubarDebugMenu = 'menubar/debug',
+  MenubarEditMenu = 'menubar/edit',
+  MenubarFileMenu = 'menubar/file/menu',
+  MenubarGoMenu = 'menubar/go',
+  MenubarHelpMenu = 'menubar/help',
+  MenubarLayoutMenu = 'menubar/layout',
+  MenubarNewBreakpointMenu = 'menubar/new/breakpoint',
+  MenubarPreferencesMenu = 'menubar/preferences',
+  MenubarRecentMenu = 'menubar/recent',
+  MenubarSelectionMenu = 'menubar/selection',
+  MenubarSwitchEditorMenu = 'menubar/switch/editor',
+  MenubarSwitchGroupMenu = 'menubar/switch/group',
+  MenubarTerminalMenu = 'menubar/terminal',
+  MenubarViewMenu = 'menubar/view',
+  TerminalInstanceContext = 'terminal/instance/context',
+  TerminalNewDropdownContext = 'terminal/newDropdown/context',
+  TerminalTabContext = 'terminal/tab/context',
+  TerminalPanelContext = 'terminal/panel/context',
+  TerminalDefaultTypeMenu = 'terminal/menu/context',
+  OpenEditorsContext = 'open/editors/context',
+  ProblemsPanelContext = 'problems/panel/context',
+  SCMChangeTitle = 'scm/change/title',
+  SCMResourceContext = 'scm/resourceState/context',
+  SCMResourceGroupContext = 'scm/resourceGroup/context',
+  SCMResourceFolderContext = 'scm/resourceFolder/context',
+  SCMSourceControl = 'scm/sourceControl',
+  SCMTitle = 'scm/title',
+  SCMInput = 'scm/input',
+  SearchContext = 'search/context',
+  StatusBarContext = 'statusbar/context',
+  StatusBarWindowIndicatorMenu = 'statusbar/windowIndicator',
+  TouchBarContext = 'touchBar/context' /* 并未实现 */,
+  ViewItemContext = 'view/item/context',
+  ViewTitle = 'view/title',
+  GlobalActivity = 'global/activity',
+  ExtensionContext = 'extension/context', // 插件市场 item
+  SettingsIconMenu = 'settings/icon/menu', // 右下角 setting menu
+  // The contributed comment thread context menu, rendered as buttons below the comment editor
+  CommentsCommentThreadContext = 'comments/commentThread/context',
+  // The contributed comment thread title menu
+  CommentsCommentThreadTitle = 'comments/commentThread/title',
+  // The contributed comment title menu
+  CommentsCommentTitle = 'comments/comment/title',
+  // The contributed comment context menu, rendered as buttons below the comment editor
+  CommentsCommentContext = 'comments/comment/context',
+  CommentReactionSwitcherMenu = 'comment/reaction/switcher/menu',
+  CommentReactionSwitcherSubmenu = 'comment/reaction/switcher/submenu',
+  // ToolbarLocation
+  KTToolbarLocationContext = 'kt/toolbar/context',
+  // 插件市场未搜索到结果
+  MarketplaceNoResultsContext = 'marketplace/noResults/context',
+  // Testing glyph margin
+  TestingGlyphMarginContext = 'testing/glyphMargin/context',
+  TestPeekTitleContext = 'testing/outputPeek/title/context',
+  // OpenType
+  OpenTypeSubmenuContext = 'editor/openType/submenu',
+  // accordion
+  AccordionContext = 'accordion',
+  // setting.json
+  SettingJSONGlyphMarginContext = 'settingJson/glyphMargin/context',
+  SubSettingJSONGlyphMarginContext = 'sub/settingJson/glyphMargin/context',
+}
+
+export function getTabbarCommonMenuId(location: string) {
+  return `tabbar/${location}/common`;
+}

package/src/menu/next/menu-service.ts

@@ -0,0 +1,252 @@
+import { Autowired, Injectable, Optional, INJECTOR_TOKEN, Injector } from '@opensumi/di';
+import { CommandRegistry, Disposable, Event, Emitter } from '@opensumi/ide-core-common';
+import { ContextKeyExpr } from '@opensumi/monaco-editor-core/esm/vs/platform/contextkey/common/contextkey';
+
+import { ContextKeyChangeEvent, IContextKeyService } from '../../context-key';
+
+import { IMenuItem, isIMenuItem, ISubmenuItem, IComponentMenuItem, isIComponentMenuItem, IMenuRegistry } from './base';
+import { MenuId } from './menu-id';
+import {
+  AbstractMenuService,
+  IMenu,
+  IMenuNodeOptions,
+  SubmenuItemNode,
+  ComponentMenuItemNode,
+  MenuItemNode,
+} from './menu.interface';
+
+type MenuItemGroup = [string, Array<IMenuItem | ISubmenuItem | IComponentMenuItem>];
+
+@Injectable()
+export class MenuServiceImpl implements AbstractMenuService {
+  @Autowired(INJECTOR_TOKEN)
+  private readonly injector: Injector;
+
+  @Autowired(IContextKeyService)
+  private readonly globalCtxKeyService: IContextKeyService;
+
+  public createMenu(id: MenuId | string, contextKeyService?: IContextKeyService): IMenu {
+    return this.injector.get(Menu, [id, contextKeyService || this.globalCtxKeyService]);
+  }
+}
+
+@Injectable()
+class Menu extends Disposable implements IMenu {
+  private readonly _onDidChange = new Emitter<IMenu | undefined>();
+  public get onDidChange(): Event<IMenu | undefined> {
+    return this._onDidChange.event;
+  }
+
+  private _menuGroups: MenuItemGroup[];
+  private _contextKeys: Set<string>;
+
+  @Autowired(IMenuRegistry)
+  private readonly menuRegistry: IMenuRegistry;
+
+  @Autowired(CommandRegistry)
+  private readonly commandRegistry: CommandRegistry;
+
+  @Autowired(INJECTOR_TOKEN)
+  private readonly injector: Injector;
+
+  public get menuId() {
+    return this.id;
+  }
+
+  constructor(
+    @Optional() private readonly id: MenuId | string,
+    @Optional() private readonly contextKeyService: IContextKeyService,
+  ) {
+    super();
+    this._build();
+
+    // rebuild this menu whenever the menu registry reports an event for this MenuId
+    this.addDispose(
+      Event.debounce(
+        Event.filter(this.menuRegistry.onDidChangeMenu, (menuId) => menuId === this.id),
+        () => {},
+        50,
+      )(this._build, this),
+    );
+
+    // when context keys change we need to check if the menu also has changed
+    this.addDispose(
+      Event.debounce<ContextKeyChangeEvent, boolean>(
+        this.contextKeyService.onDidChangeContext,
+        (last, event) => last || event.payload.affectsSome(this._contextKeys),
+        50,
+      )((e) => e && this._onDidChange.fire(undefined), this),
+    );
+
+    this.addDispose(this._onDidChange);
+  }
+
+  private _build(): void {
+    // reset
+    this._menuGroups = [];
+    this._contextKeys = new Set();
+
+    let menuItems = this.menuRegistry.getMenuItems(this.id);
+
+    let group: MenuItemGroup | undefined;
+    menuItems = menuItems.sort(menuItemsSorter);
+
+    for (const item of menuItems) {
+      // group by groupId
+      const groupName = item.group || '';
+      if (!group || group[0] !== groupName) {
+        group = [groupName, []];
+        this._menuGroups.push(group);
+      }
+      group![1].push(item);
+
+      // keep keys for eventing
+      this.fillKeysInWhenExpr(this._contextKeys, item.when);
+
+      // 收集 toggledWhen
+      if (isIMenuItem(item)) {
+        this.fillKeysInWhenExpr(this._contextKeys, item.toggledWhen);
+      }
+
+      // 收集 enabledWhen
+      if (isIMenuItem(item)) {
+        if (item.enabledWhen) {
+          this.fillKeysInWhenExpr(this._contextKeys, item.enabledWhen);
+        }
+      }
+    }
+    this._onDidChange.fire(this);
+  }
+
+  public getMenuNodes(
+    config: IMenuNodeOptions = {},
+  ): Array<[MenuId | string, Array<MenuItemNode | SubmenuItemNode | ComponentMenuItemNode>]> {
+    const result: [MenuId | string, Array<MenuItemNode | SubmenuItemNode | ComponentMenuItemNode>][] = [];
+    for (const group of this._menuGroups) {
+      const [id, items] = group;
+      const activeActions: Array<MenuItemNode | SubmenuItemNode | ComponentMenuItemNode> = [];
+      for (const item of items) {
+        const activeAction = this._getActiveAction(item, config);
+        if (activeAction) {
+          activeActions.push(activeAction);
+        }
+      }
+      if (activeActions.length > 0) {
+        result.push([id, activeActions]);
+      }
+    }
+    return result;
+  }
+
+  private _getActiveAction(item: IMenuItem | ISubmenuItem | IComponentMenuItem, options: IMenuNodeOptions) {
+    if (this.contextKeyService.match(item.when, options.contextDom)) {
+      if (isIMenuItem(item)) {
+        // 兼容现有的 Command#isVisible
+        const { args = [] } = options;
+        const menuCommandDesc = this.menuRegistry.getMenuCommand(item.command);
+        const command = this.commandRegistry.getCommand(menuCommandDesc.id);
+
+        const menuCommand = { ...(command || {}), ...menuCommandDesc };
+        // 没有 desc 的 command 不展示在 menu 中
+        if (!menuCommand.label) {
+          return;
+        }
+
+        // command 存在但是 isVisible 为 false 则跳过
+        if (command && !this.commandRegistry.isVisible(menuCommand.id, ...args)) {
+          return;
+        }
+
+        // 默认为 true, 此项状态皆来自于 Command
+        // menu.enabledWhen 的优先级高于 Command.isEnabled
+        // 若设置了 menu.enabledWhen 则忽略 Command.isEnabled
+        const commandEnablement = command ? this.commandRegistry.isEnabled(menuCommand.id, ...args) : true;
+        const disabled =
+          item.enabledWhen !== undefined
+            ? !this.contextKeyService.match(item.enabledWhen, options.contextDom)
+            : !commandEnablement;
+
+        // menu.toggledWhen 的优先级高于 Command.isToggled
+        // 若设置了 menu.toggledWhen 则忽略 Command.isToggled
+        const commandToggle = Boolean(command && this.commandRegistry.isToggled(menuCommand.id, ...args));
+        const checked =
+          item.toggledWhen !== undefined
+            ? this.contextKeyService.match(item.toggledWhen, options.contextDom)
+            : commandToggle;
+
+        const action = this.injector.get(MenuItemNode, [
+          menuCommand,
+          item.iconClass || command?.iconClass,
+          options,
+          disabled,
+          checked,
+          item.type,
+          item.nativeRole,
+          item.extraDesc,
+          item.extraTailArgs,
+          item.argsTransformer,
+        ]);
+        return action;
+      } else if (isIComponentMenuItem(item)) {
+        const action = this.injector.get(ComponentMenuItemNode, [
+          item,
+          options,
+          item.extraTailArgs,
+          item.argsTransformer,
+        ]);
+        return action;
+      } else {
+        // 只有 label 存在值的时候才渲染
+        if (item.label) {
+          const action = this.injector.get(SubmenuItemNode, [item]);
+          return action;
+        }
+      }
+    }
+  }
+
+  private fillKeysInWhenExpr(set: Set<string>, when?: string | ContextKeyExpr) {
+    const keys = this.contextKeyService.getKeysInWhen(when);
+    keys.forEach((key) => {
+      set.add(key);
+    });
+  }
+}
+
+function menuItemsSorter(a: IMenuItem, b: IMenuItem): number {
+  const aGroup = a.group;
+  const bGroup = b.group;
+
+  if (aGroup !== bGroup) {
+    // Falsy groups come last
+    if (!aGroup) {
+      return 1;
+    } else if (!bGroup) {
+      return -1;
+    }
+
+    // 'navigation' group comes first
+    if (aGroup === 'navigation') {
+      return -1;
+    } else if (bGroup === 'navigation') {
+      return 1;
+    }
+
+    // lexical sort for groups
+    const value = aGroup.localeCompare(bGroup);
+    if (value !== 0) {
+      return value;
+    }
+  }
+
+  // sort on priority - default is 0
+  const aPrio = a.order || 0;
+  const bPrio = b.order || 0;
+  if (aPrio < bPrio) {
+    return -1;
+  } else if (aPrio > bPrio) {
+    return 1;
+  }
+
+  return 0;
+}

package/src/menu/next/menu-util.ts

@@ -0,0 +1,77 @@
+import {
+  MenuItemNode,
+  SubmenuItemNode,
+  SeparatorMenuItemNode,
+  TupleMenuNodeResult,
+  IMenu,
+  IMenuSeparator,
+  IMenuConfig,
+  ComponentMenuItemNode,
+} from './menu.interface';
+
+export const isPrimaryGroup = (group: string) => group === 'navigation';
+export const isInlineGroup = (group: string) => /^inline/.test(group);
+
+/**
+ * 将 menuItems 按照 separator 分成两个 group
+ * todo: 支持返回结果合并成一个 group
+ */
+export function splitMenuItems(
+  groups: Array<[string, Array<MenuItemNode | SubmenuItemNode | ComponentMenuItemNode>]>,
+  separator: IMenuSeparator = 'navigation',
+): TupleMenuNodeResult {
+  const result: TupleMenuNodeResult = [[], []];
+  for (const tuple of groups) {
+    const [groupIdentity, menuNodes] = tuple;
+
+    const splitFn = separator === 'inline' ? isInlineGroup : isPrimaryGroup;
+
+    if (splitFn(groupIdentity)) {
+      result[0].push(...menuNodes);
+    } else {
+      if (result[1].length > 0) {
+        result[1].push(new SeparatorMenuItemNode());
+      }
+
+      result[1].push(...menuNodes);
+    }
+  }
+  return result;
+}
+
+interface IExtendMenuConfig extends IMenuConfig {
+  menus: IMenu;
+}
+
+export function mergeTupleMenuNodeResult(payload: TupleMenuNodeResult) {
+  const [primary, secondary] = payload;
+  const result = [...primary];
+  if (result.length > 0 && secondary.length > 0) {
+    result.push(new SeparatorMenuItemNode());
+  }
+
+  return result.concat(secondary);
+}
+
+export function generateMergedCtxMenu(payload: IExtendMenuConfig) {
+  return mergeTupleMenuNodeResult(generateCtxMenu(payload));
+}
+
+export function generateCtxMenu(payload: IExtendMenuConfig) {
+  const { menus, separator = 'navigation', ...options } = payload;
+  const menuNodes = menus.getMenuNodes(options);
+  const menuItems = splitMenuItems(menuNodes, separator);
+  return menuItems;
+}
+
+export function generateMergedInlineActions(payload: IExtendMenuConfig) {
+  const result = generateInlineActions(payload);
+  return [...result[0], ...result[1]];
+}
+
+export function generateInlineActions(payload: Omit<IExtendMenuConfig, 'withAlt'>) {
+  const { menus, separator, ...options } = payload;
+  const menuNodes = menus.getMenuNodes(options);
+  const menuItems = splitMenuItems(menuNodes, separator);
+  return menuItems;
+}

package/src/menu/next/menu.contrib.interface.ts

@@ -0,0 +1,79 @@
+import type vscode from 'vscode';
+
+import { URI } from '@opensumi/ide-core-common';
+import type { IChange } from '@opensumi/monaco-editor-core/esm/vs/editor/common/diff/smartLinesDiffComputer';
+
+// explorer/context
+// 资源管理器 ctxmenu
+// 第一个参数是当前 ctx-menu 出现在的那个 ExplorerItem 的 URI
+// 第二个参数是多选时 ExplorerItem 列表的 URI
+// 经过进程通信后 URI -- transform --> Uri
+export type ExplorerContextParams = [URI, URI[]];
+
+export type ExplorerContextCallback = (...args: ExplorerContextParams) => void;
+
+// editor/context
+export type EditorContextArgs = [URI, URI[]];
+export type EditorContextCallback = (...args: [URI]) => void;
+
+type GroupId = number; // vscode.IEditorGroupView['id'];
+// editor/title
+// editor tab group 最右侧 ellipsis 图标点击 dropdown
+// type EditorTitleCallback = (...args: [URI, { groupId: GroupId }]) => void;
+
+// editor/title/context
+// editor tab ctxmenu
+interface EditorTitleExtraArgs {
+  groupId: GroupId;
+  editorIndex: number;
+}
+// 参考 src/vs/workbench/browser/parts/editor/titleControl.ts#304,310
+export type EditorTitleContextCallback = (...args: [URI, EditorTitleExtraArgs]) => void;
+
+// debug/callstack/context
+// debug 时 callstack list item 的 ctxmenu
+// arg.0:"file:///Users/vagusx/Project/ide-test-workspace/aa/aaa.js"
+// arg.1:"stackframe:thread:a0f28e52-6237-40ce-a0d9-11fe2a2de819:1:1001:0"
+export type DebugCallstackContextCallbak = (...args: [string, string]) => void;
+
+// debug/toolbar
+// debug toolbar 上
+export type DebugToolbarCallbak = (...args: []) => void;
+
+// scm/title
+// scm titlebar 的 inline actions/more actions
+// 此处是 hosted object
+export type ScmTitleCallback = (...args: [vscode.SourceControl]) => void; // 实际为拓展后的 ExtHostSourceControl
+
+// scm/resourceGroup/context
+// scm resource list 的 group 的 ctxmenu
+// 此处是 hosted object
+export type ScmResourceGroupContextCallback = (...args: [vscode.SourceControlResourceGroup]) => void; // 实际为拓展后的 ExtHostSourceControlResourceGroup
+
+// scm/resourceState/context // 老版本是 scm/resource/context
+// scm resource list 的 item 的 ctxmenu
+// 此处是 hosted object
+export type ScmResourceStateContextCallback = (...args: [vscode.SourceControlResourceState]) => void;
+
+// scm/change/title
+// diff editor 的最右侧 ellipsis 图标点击 dropdown
+// 此处 Uri 是 git scheme 的
+// todo: scm/change/title 是 diff widget 的菜单，这里不对待更新
+export type ScmChangeTitleCallback = (...args: [URI, IChange[], number]) => void;
+
+// view/title
+// 自定义 contributed view 的 inline actions/more actions
+// 此处参数应该是各个 view 自行定义的
+export type ViewTitleCallback = (...args: []) => void;
+
+// view/item/context
+// 自定义 contributed view 中 list item 的 ctx menu
+// 此处参数应该是各个 view 自行定义的
+export type ViewItemCallback = (...args: []) => void;
+
+// 目前我们没有实现 comment 相关 API
+// comment 相关可参见 https://github.com/microsoft/vscode/issues/77663
+// comments/commentThread/title
+// comments/commentThread/context
+// comments/comment/title
+// comments/comment/context