@opensumi/ide-core-browser 2.21.13 → 2.22.0

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

@@ -0,0 +1,253 @@
+import { Autowired, Injectable, Optional } from '@opensumi/di';
+import { CommandRegistry, CommandService, Command, IDisposable, isMacintosh, Event } from '@opensumi/ide-core-common';
+
+import { IContextKeyService } from '../../context-key';
+import { KeybindingRegistry } from '../../keybinding';
+
+import { ISubmenuItem, MenuNode, IMenuActionDisplayType, IComponentMenuItem, IComponentMenuItemProps } from './base';
+import { MenuId } from './menu-id';
+import { ICtxMenuRenderer } from './renderer/ctxmenu/base';
+
+export type TupleMenuNodeResult = [MenuNode[], MenuNode[]];
+
+export interface IMenuNodeOptions {
+  /**
+   * 固定参数可从这里传入
+   */
+  args?: any[];
+  contextDom?: HTMLElement;
+}
+
+export type IMenuSeparator = 'navigation' | 'inline';
+
+export interface IMenuConfig extends IMenuNodeOptions {
+  separator?: IMenuSeparator;
+  withAlt?: boolean; // 尚未支持
+}
+
+@Injectable()
+export class MenuItemNode extends MenuNode {
+  readonly item: Command;
+  private _options: IMenuNodeOptions;
+
+  @Autowired(CommandService)
+  protected readonly commandService: CommandService;
+
+  @Autowired(KeybindingRegistry)
+  protected readonly keybindings: KeybindingRegistry;
+
+  @Autowired(CommandRegistry)
+  protected readonly commandRegistry: CommandRegistry;
+
+  constructor(
+    @Optional() item: Command,
+    @Optional() icon: string | undefined,
+    @Optional() options: IMenuNodeOptions = {},
+    @Optional() disabled: boolean,
+    @Optional() checked: boolean,
+    @Optional() type?: IMenuActionDisplayType,
+    @Optional() nativeRole?: string,
+    @Optional() extraDesc?: string,
+    @Optional() private extraTailArgs?: any[],
+    @Optional() private argsTransformer?: (...args: any[]) => any[],
+  ) {
+    super({
+      id: item.id,
+      icon,
+      label: item.label!,
+      type,
+      checked,
+      disabled,
+      nativeRole,
+      extraDesc,
+    });
+
+    this.className = undefined;
+
+    const shortcutDesc = this.getShortcut(item.id);
+
+    this.keybinding = (shortcutDesc && shortcutDesc.keybinding) || '';
+    this.rawKeybinding = (shortcutDesc && shortcutDesc.rawKeybinding) || '';
+    this.isKeyCombination = !!(shortcutDesc && shortcutDesc.isKeyCombination);
+    this._options = options;
+
+    this.item = item;
+  }
+
+  getExecuteArgs(args: any[] = []): any[] {
+    let runArgs = [...(this._options.args || []), ...(args || []), ...(this.extraTailArgs || [])];
+    // args 为 createMenu 时提供，同一个 menu 所有的都是同一 args
+    // argsTransformer 每个 action 不同，所以先合并 args，然后再经过 transformer
+    if (this.argsTransformer) {
+      runArgs = this.argsTransformer(...runArgs);
+    }
+
+    return runArgs;
+  }
+
+  execute(args: any[] = []): Promise<any> {
+    return this.commandService.executeCommand(this.item.id, ...this.getExecuteArgs(args));
+  }
+
+  private getShortcut(commandId: string) {
+    if (commandId) {
+      const keybindings = this.keybindings.getKeybindingsForCommand(commandId);
+      if (keybindings.length > 0) {
+        // 取 priority 最高的 keybinding 作展示
+        const highPriorityKeybinding = keybindings.reduce((a, b) => ((a.priority || 0) > (b.priority || 0) ? a : b));
+
+        const isKeyCombination =
+          Array.isArray(highPriorityKeybinding.resolved) && highPriorityKeybinding.resolved.length > 1;
+        let keybinding = this.keybindings.acceleratorFor(highPriorityKeybinding, isMacintosh ? '' : '+').join(' ');
+        if (isKeyCombination) {
+          keybinding = `[${keybinding}]`;
+        }
+        return {
+          keybinding,
+          rawKeybinding: highPriorityKeybinding.keybinding,
+          isKeyCombination,
+        };
+      }
+    }
+    return null;
+  }
+}
+
+@Injectable({ multiple: true })
+export class SubmenuItemNode extends MenuNode {
+  static readonly ID = 'menu.item.node.submenu';
+
+  @Autowired(ICtxMenuRenderer)
+  protected readonly ctxMenuRenderer: ICtxMenuRenderer;
+
+  readonly item: ISubmenuItem;
+  readonly submenuId: string;
+  readonly icon: string;
+
+  constructor(@Optional() item: ISubmenuItem) {
+    super({
+      id: SubmenuItemNode.ID,
+      label: item.label!,
+      type: item.type,
+    });
+    this.submenuId = item.submenu;
+    this.icon = item.iconClass!;
+    this.item = item;
+  }
+
+  // 支持 submenu 点击展开
+  execute(args: any[]): void {
+    const [anchor, ...restArgs] = args;
+    if (!anchor) {
+      return;
+    }
+
+    this.ctxMenuRenderer.show({
+      anchor,
+      menuNodes: this.children || this.submenuId,
+      args: restArgs,
+    });
+  }
+}
+
+@Injectable({ multiple: true })
+export class ComponentMenuItemNode extends MenuNode {
+  static readonly ID = 'menu.item.node.component';
+  static nodeIndex = -1;
+
+  readonly item: IComponentMenuItem;
+  private _options: IMenuNodeOptions;
+  readonly component: React.ComponentType<IComponentMenuItemProps>;
+  readonly nodeId: string;
+
+  constructor(
+    @Optional() item: IComponentMenuItem,
+    @Optional() options: IMenuNodeOptions = {},
+    @Optional() private extraTailArgs?: any[],
+    @Optional() private argsTransformer?: (...args: any[]) => any[],
+  ) {
+    super({
+      id: ComponentMenuItemNode.ID,
+      label: '',
+    });
+    ComponentMenuItemNode.nodeIndex++;
+    this.nodeId = String(ComponentMenuItemNode.nodeIndex);
+    this.item = item;
+    this.component = item.component;
+    this._options = options;
+  }
+
+  getExecuteArgs(args: any[] = []): any[] {
+    let runArgs = [...(this._options.args || []), ...(args || []), ...(this.extraTailArgs || [])];
+    // args 为 createMenu 时提供，同一个 menu 所有的都是同一 args
+    // argsTransformer 每个 action 不同，所以先合并 args，然后再经过 transformer
+    if (this.argsTransformer) {
+      runArgs = this.argsTransformer(...runArgs);
+    }
+
+    return runArgs;
+  }
+}
+
+// 分隔符
+export class SeparatorMenuItemNode extends MenuNode {
+  static readonly ID = 'menu.item.node.separator';
+
+  constructor(id?: string, label?: string) {
+    super({
+      id: id || SeparatorMenuItemNode.ID,
+      label: label || 'separator',
+    });
+  }
+}
+
+export interface IMenu extends IDisposable {
+  /**
+   * menu-id
+   */
+  menuId: string | MenuId;
+  readonly onDidChange: Event<IMenu | undefined>;
+  getMenuNodes(
+    options?: IMenuNodeOptions,
+  ): Array<[string, Array<MenuItemNode | SubmenuItemNode | ComponentMenuItemNode>]>;
+  onDispose: Event<void>;
+}
+
+export function isIMenu(menus: IMenu | IContextMenu): menus is IMenu {
+  return 'getMenuNodes' in menus && typeof menus.getMenuNodes === 'function';
+}
+
+export interface IContextMenu extends IDisposable {
+  /**
+   * menu-id
+   */
+  menuId: string | MenuId;
+  /**
+   * menu 重新生成后事件，监听即可拿到最新的 menu
+   */
+  readonly onDidChange: Event<string>;
+
+  /**
+   * 获得已分好组并合并的 MenuNodes 列表
+   */
+  getMergedMenuNodes(): MenuNode[];
+
+  /**
+   * 获得已分好组的 MenuNodes 列表
+   */
+  getGroupedMenuNodes(): TupleMenuNodeResult;
+}
+
+export abstract class AbstractMenuService {
+  public abstract createMenu(id: MenuId | string, contextKeyService?: IContextKeyService): IMenu;
+}
+
+export interface CreateMenuPayload {
+  id: MenuId | string;
+  config?: IMenuConfig;
+  contextKeyService?: IContextKeyService;
+}
+
+export abstract class AbstractContextMenuService {
+  public abstract createMenu(payload: CreateMenuPayload): IContextMenu;
+}

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

@@ -0,0 +1,211 @@
+import { Injectable, Autowired } from '@opensumi/di';
+import { IDisposable, Disposable, Event, Emitter } from '@opensumi/ide-core-common';
+
+import { IMenubarItem, IMenuRegistry, MenuNode } from './base';
+import { generateMergedCtxMenu } from './menu-util';
+import { AbstractMenuService, IMenu, SubmenuItemNode } from './menu.interface';
+
+export abstract class AbstractMenubarService extends Disposable {
+  readonly onDidMenubarChange: Event<void>;
+  abstract getMenubarItems(): IMenubarItem[];
+  abstract getMenubarItem(menuId: string): IMenubarItem | undefined;
+
+  readonly onDidMenuChange: Event<string>;
+  abstract getMenuNodes(menuId: string): MenuNode[];
+  abstract rebuildMenuNodes(menuId: string): void;
+}
+
+@Injectable()
+export class MenubarServiceImpl extends Disposable implements AbstractMenubarService {
+  @Autowired(AbstractMenuService)
+  private readonly menuService: AbstractMenuService;
+
+  @Autowired(IMenuRegistry)
+  private readonly menuRegistry: IMenuRegistry;
+
+  /**
+   * Menubar 本身发生变化时的事件
+   * undefined 表示整个都需要刷新
+   * 带了 menuId 只需要刷新单个 MenuBarItem
+   */
+  private readonly _onDidMenuBarChange = new Emitter<void>();
+  public get onDidMenubarChange(): Event<void> {
+    return this._onDidMenuBarChange.event;
+  }
+
+  private readonly _onDidMenuChange = new Emitter<string>();
+  public get onDidMenuChange(): Event<string> {
+    return this._onDidMenuChange.event;
+  }
+
+  private readonly _onMenuChange = new Emitter<string>();
+  // internal 的 MenuChange 监听器，监听 menu/submenu 的变化
+  private get onMenuChange(): Event<string | undefined> {
+    return this._onMenuChange.event;
+  }
+
+  private _menubarIds: Set<string> = new Set();
+  private _menus: Map<string, IMenu> = new Map();
+
+  private _menubarItems: IMenubarItem[] = [];
+  private _menuItems: Map<string, MenuNode[]> = new Map();
+
+  private _menusListener: Map<string, IDisposable> = new Map();
+
+  constructor() {
+    super();
+    this._build();
+
+    // 监听 menubar 刷新事件
+    this.addDispose(Event.debounce(this.menuRegistry.onDidChangeMenubar, () => {}, 50)(this._build, this));
+
+    // 监听内部的 onMenuChange 刷新单个 menubarItem 下的所有节点
+    this.addDispose(
+      Event.debounce(this.onMenuChange, (l, menuId: string) => menuId, 50)(this._rebuildSingleRootMenus, this),
+    );
+
+    this.addDispose(this._onDidMenuBarChange);
+    this.addDispose(this._onDidMenuChange);
+  }
+
+  // 构建完整的 menubarIds/_menubarItems/_menubarMenus
+  private _build() {
+    // reset
+    this._menubarItems = [];
+    this._menubarIds = new Set();
+    this._menuItems.clear();
+
+    let menubarItems = this.menuRegistry.getMenubarItems();
+    menubarItems = menubarItems.sort(menubarItemsSorter);
+
+    menubarItems.forEach((menubarItem) => {
+      const menubarId = menubarItem.id;
+      this._menubarItems.push(menubarItem);
+      // keep menuId for event listener
+      this._menubarIds.add(menubarId);
+      // build mens for Menubar
+      this._buildMenus(menubarId);
+    });
+
+    this._onDidMenuBarChange.fire();
+  }
+
+  // 根据事件监听结果更新单个 root menuId 下的 menus
+  private _rebuildSingleRootMenus(menuId: string) {
+    this._buildMenus(menuId);
+    this._onDidMenuChange.fire(menuId);
+  }
+
+  /**
+   * 构建产生每个 menubar item 下方点击展开的 menus
+   * 包括递归产生多层级结构
+   * @param menubarId [string]
+   */
+  private _buildMenus(menubarId: string) {
+    const menus = this.menuService.createMenu(menubarId);
+
+    // clean up for IMenu
+    const oldMenus = this._menus.get(menubarId);
+    if (oldMenus) {
+      oldMenus.dispose();
+      this._menus.delete(menubarId);
+    }
+
+    // clean up for menu.onDidChange
+    const oldMenusListener = this._menusListener.get(menubarId);
+    if (oldMenusListener) {
+      oldMenusListener.dispose();
+      this._menusListener.delete(menubarId);
+    }
+
+    this._menus.set(menubarId, menus);
+    this._menusListener.set(
+      menubarId,
+      menus.onDidChange(() => this._onMenuChange.fire(menubarId), this, this.disposables),
+    );
+
+    const menubarMenu = [] as MenuNode[];
+    this._traverseMenuItems(menus, menubarMenu, menubarId);
+    this._menuItems.set(menubarId, menubarMenu);
+  }
+
+  /**
+   * 递归构建生成单个 Menubar 下所有层级菜单的数据结构的函数
+   * @param menus IMenu 实例, menuService.createMenu 返回值
+   * @param menuToPopulate 递归中用来收集数结果
+   * @param rootMenuId 顶级的 menuId, 下方所有 submenuId 的 onDidChange 都触发顶层 menuId 事件以刷新该 menuId 下所有的数据
+   */
+  private _traverseMenuItems(menus: IMenu, menuToPopulate: MenuNode[], rootMenuId: string) {
+    const menuItems = generateMergedCtxMenu({ menus });
+    menuItems.forEach((menuItem) => {
+      if (menuItem instanceof SubmenuItemNode) {
+        const submenuItems = [] as MenuNode[];
+
+        const submenuId = menuItem.item.submenu;
+        if (!this._menus.has(submenuId)) {
+          const menus = this.registerDispose(this.menuService.createMenu(submenuId));
+          this._menus.set(submenuId, menus);
+          this.registerDispose(
+            menus.onDidChange(() => {
+              // 通知外部 顶层 menuId 下所有结构变了, 需要重新生成数据结构
+              this._onMenuChange.fire(rootMenuId);
+            }),
+          );
+        }
+
+        const menuToDispose = this.menuService.createMenu(submenuId);
+        this._traverseMenuItems(menuToDispose, submenuItems, rootMenuId);
+
+        // 挂载 submenu 下的子级 menuItems
+        menuItem.children = submenuItems;
+
+        menuToPopulate.push(menuItem);
+        menuToDispose.dispose();
+      } else {
+        menuToPopulate.push(menuItem);
+      }
+    });
+  }
+
+  public dispose() {
+    this._menusListener.forEach((disposable) => disposable.dispose());
+    this._menusListener.clear();
+    this._menus.forEach((menu) => menu.dispose());
+    this._menus.clear();
+    super.dispose();
+  }
+
+  public getMenubarItems() {
+    return this._menubarItems;
+  }
+
+  public getMenubarItem(menuId: string) {
+    if (!this._menubarIds.has(menuId)) {
+      return undefined;
+    }
+
+    return this.menuRegistry.getMenubarItem(menuId);
+  }
+
+  public getMenuNodes(menuId: string) {
+    return this._menuItems.get(menuId) || [];
+  }
+
+  // 由于现在的 command 无法通知 isEnable/isVisible/isToggle
+  // 所以 web 版本 menubar 每次需要强制重新计算
+  public rebuildMenuNodes(menuId: string) {
+    this._buildMenus(menuId);
+  }
+}
+
+function menubarItemsSorter(a: IMenubarItem, b: IMenubarItem): number {
+  // 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/renderer/ctxmenu/base.ts

@@ -0,0 +1,18 @@
+import { IContextKeyService } from '../../../../context-key';
+import { MenuNode } from '../../base';
+import { MenuId } from '../../menu-id';
+import { IMenuNodeOptions } from '../../menu.interface';
+
+export interface CtxMenuParams extends IMenuNodeOptions {
+  menuNodes: MenuNode[] | MenuId | string;
+  contextKeyService?: IContextKeyService; // 直接传递 MenuId 时可传递 scopedContextKeyService
+}
+
+export interface CtxMenuRenderParams extends CtxMenuParams {
+  anchor: MouseEvent | { x: number; y: number };
+  onHide?: (canceled: boolean) => void;
+}
+
+export abstract class ICtxMenuRenderer {
+  abstract show(payload: CtxMenuRenderParams): void;
+}

package/src/menu/next/renderer/ctxmenu/browser.ts

@@ -0,0 +1,45 @@
+import omit from 'lodash/omit';
+
+import { Injectable, Autowired } from '@opensumi/di';
+
+import { MenuNode } from '../../base';
+import { AbstractContextMenuService } from '../../menu.interface';
+
+import { ICtxMenuRenderer, CtxMenuRenderParams } from './base';
+
+export abstract class IBrowserCtxMenu extends ICtxMenuRenderer {
+  visible: boolean;
+  onHide: ((canceled: boolean) => void) | undefined;
+  point?: {
+    pageX: number;
+    pageY: number;
+  };
+  context: any;
+  menuNodes: MenuNode[];
+  abstract hide(canceled: boolean): void;
+}
+
+@Injectable()
+export class BrowserCtxMenuRenderer implements ICtxMenuRenderer {
+  @Autowired(IBrowserCtxMenu)
+  protected readonly browserCtxMenu: IBrowserCtxMenu;
+
+  @Autowired(AbstractContextMenuService)
+  private readonly menuService: AbstractContextMenuService;
+
+  public show(payload: CtxMenuRenderParams): void {
+    if (typeof payload.menuNodes === 'string') {
+      const menus = this.menuService.createMenu({
+        id: payload.menuNodes,
+        config: {
+          args: payload.args,
+        },
+        contextKeyService: payload.contextKeyService,
+      });
+      payload.menuNodes = menus.getMergedMenuNodes();
+      menus.dispose();
+    }
+
+    this.browserCtxMenu.show(omit(payload, ['contextKeyService']));
+  }
+}