Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add plugin contextmenu #5577

Merged
merged 9 commits into from Mar 22, 2024
Merged

feat: add plugin contextmenu #5577

merged 9 commits into from Mar 22, 2024

Conversation

hustcc
Copy link
Member

@hustcc hustcc commented Mar 21, 2024

  • context menu
  • demo
  • test case

image

之前的配置项见这里,新的配置项如下:

type Options = {
  /**
   * <zh/> 给菜单的 DOM 追加的 classname,便于自定义样式。默认是包含 `g6-contextmenu`。
   * <en/> The classname appended to the menu DOM for custom styles. The default is `g6-contextmenu`.
   */
  className?: string;
  /**
   * <zh/> 如何触发右键菜单,可以是 'click' 或者 'contextmenu',默认是 'contextmenu'。
   * <en/> How to trigger the context menu, default is 'contextmenu'.
   */
  trigger?: 'click' | 'contextmenu';
  /**
   * <zh/> 菜单显式 X、Y 方向的偏移量,默认是 [4, 4]。
   * <en/> The offset X, y direction of the menu, default is [4, 4].
   */
  offset?: [number, number];
  /**
   * <zh/> 当菜单被点击后,出发的回调方法。
   * <en/> The callback method triggered when the menu is clicked.
   */
  onClick?: (v: string, target: HTMLElement) => void;
  /**
   * <zh/> 返回菜单的项目列表,支持 `Promise` 类型的返回值。是 `getContent` 的快捷配置。
   * <en/> Return the list of menu items, support the `Promise` type return value. It is a shortcut configuration of `getContent`.
   */
  getItems?: (event: ElementEvent) => Item[] | Promise<Item[]>;
  /**
   * <zh/> 返回菜单的内容,支持 `Promise` 类型的返回值,也可以使用 `getItems` 来快捷配置。
   * <en/> Return the content of menu, support the `Promise` type return value, you can also use `getItems` for shortcut configuration.
   */
  getContent?: (event: ElementEvent) => HTMLElement | string | Promise<HTMLElement | string>;
  /**
   * <zh/> Loading 时候的菜单内容,用于 getContent 返回 Promise 的时候。
   * <en/> The menu content when loading is used when getContent returns a Promise.
   */
  loadingContent: HTMLElement | string;
  /**
   * <zh/> 插件是否可用,通过参数来判断是否支持右键菜单,默认全部可用。
   * <en/> Whether the plugin is available, determine whether the right-click menu is supported through parameters, The default is all available.
   */
  enable?: boolean | ((event: ElementEvent) => boolean);
}

主要改动点:

  1. shoudBegin + itemType 合并为 enable
  2. handleMenuClick 改成 onClick
  3. liHoverStyle 去除,改用自定义 classname,外置写 css
  4. onHide 暂时移除

@Aarebecca
Copy link
Contributor

  • offsetX 和 offsetY 可以合成 offset: number | [number, number]
  • enable 类型可以参考 CollapseExpand 的

packages/g6/src/plugins/contextmenu.ts Outdated Show resolved Hide resolved
packages/g6/src/utils/contextmenu.ts Outdated Show resolved Hide resolved
@@ -0,0 +1,62 @@
/**
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我在想后面类似的方法放到所在的模块里就可以了, utils 里放多个模块都会用到的方法。目前都是放在 utils 里后面可能会很大。类型定义也同理

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

嗯,是的,或者跟之前一样,把一个插件做成目录而不是一个文件,然后里面就可以自己组织了。

@hustcc
Copy link
Member Author

hustcc commented Mar 22, 2024

todo

  • 超长的 contextmenu 需要做自动碰撞调整。

@Aarebecca Aarebecca merged commit b9d81ec into v5 Mar 22, 2024
3 of 5 checks passed
@Aarebecca Aarebecca deleted the feat-plugin-context-menu branch March 22, 2024 11:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants