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: click element behavior support setting neighborSelectedState #5798

Merged
merged 2 commits into from
Jun 3, 2024

Conversation

yvonneyx
Copy link
Contributor

@yvonneyx yvonneyx commented May 31, 2024

  • click-element 交互新增 neighborSelectedStateonClick 配置项
  • rename click-element to click-select; hover-element to hover-activate
{
 /**
   * <zh/> 当元素被选中时应用的状态
   *
   * <en/> The state to be applied when an element is selected
   * @defaultValue 'selected'
   */
  selectedState?: State;
  /**
   * <zh/> 当有元素选中时,其相邻 n 度关系的元素应用的状态。n 的值由属性 degree 控制,例如 degree 为 1 时表示直接相邻的元素
   *
   * <en/> The state to be applied to the neighboring elements within n degrees when an element is selected. The value of n is controlled by the degree property, for instance, a degree of 1 indicates direct neighbors
   * @defaultValue 'selected'
   */
  neighborSelectedState?: State;
  /**
   * <zh/> 当有元素被选中时,除了选中元素及其受影响的邻居元素外,其他所有元素应用的状态。
   *
   * <en/> The state to be applied to all unselected elements when some elements are selected, excluding the selected element and its affected neighbors
   * @defaultValue undefined
   */
  unselectedState?: State;
  /**
   * <zh/> 选中元素的度,即决定了影响范围
   *
   * <en/> The degree to determine the scope of influence
   * @defaultValue 0
   * @remarks
   * <zh/> 对于节点来说,`0` 表示只选中当前节点,`1` 表示选中当前节点及其直接相邻的节点和边,以此类推。
   *
   * <zh/> 对于边来说,`0` 表示只选中当前边,`1` 表示选中当前边及其直接相邻的节点,以此类推。
   *
   * <en/> For nodes, `0` means only the current node is selected, `1` means the current node and its directly adjacent nodes and edges are selected, etc.
   *
   * <en/> For edges, `0 `means only the current edge is selected,`1` means the current edge and its directly adjacent nodes are selected, etc.
   */
  degree?: number | ((event: IPointerEvent) => number);
  /**
   * <zh/> 点击元素时的回调
   *
   * <en/> Callback when the element is clicked
   * @param event - <zh/> 点击事件 | <en/> click event
   */
  onClick?: (event: IPointerEvent) => void;
}

例如:

 graph.setBehaviors([
      {
        type: 'click-element',
        selectedState: 'selected',
        neighborSelectedState: 'active',
        unselectedState: 'inactive',
        degree: 1,
      },
    ]);

image

@Aarebecca
Copy link
Contributor

这个插件叫 click-select 或者 click-select-element 会更合适一点, click-element 表意并不是很清楚

@yvonneyx
Copy link
Contributor Author

yvonneyx commented Jun 3, 2024

这个插件叫 click-select 或者 click-select-element 会更合适一点, click-element 表意并不是很清楚

那还是沿用之前的命名 click-element => click-select hover-element => hover-activate

@yvonneyx yvonneyx force-pushed the feat/upgrade-click-element branch from 8827181 to 0255150 Compare June 3, 2024 06:08
@yvonneyx yvonneyx requested a review from Aarebecca June 3, 2024 06:47
@yvonneyx yvonneyx force-pushed the feat/upgrade-click-element branch from 0255150 to c8798c6 Compare June 3, 2024 09:15
@Aarebecca Aarebecca merged commit 3d1350b into v5 Jun 3, 2024
3 checks passed
@Aarebecca Aarebecca deleted the feat/upgrade-click-element branch June 3, 2024 09:21
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.

2 participants