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(plugin): add edge filter lens plugin #6224

Merged
merged 6 commits into from
Aug 22, 2024
Merged

Conversation

yvonneyx
Copy link
Contributor

Kapture 2024-08-22 at 15 47 42

 interface EdgeFilterLensOptions extends BasePluginOptions {
  /**
   * <zh/> 移动透镜的方式
   * - `'pointermove'`:始终跟随鼠标移动
   * - `'click'`:鼠标点击时透镜移动
   * - `'drag'`:拖拽透镜
   *
   * <en/> The way to move the lens
   * - `'pointermove'`: always follow the mouse movement
   * - `'click'`: move the lens when the mouse clicks
   * - `'drag'`: drag the lens
   */
  trigger?: 'pointermove' | 'click' | 'drag';
  /**
   * <zh/> 透镜的半径
   *
   * <en/> The radius of the lens
   * @defaultValue 60
   */
  r?: number;
  /**
   * <zh/> 透镜的最大半径。只有在开启 `scaleRByWheel` 时生效
   *
   * <en/> The maximum radius of the lens. Only valid when `scaleRByWheel` is enabled
   * @defaultValue canvas 宽高最小值的一半
   */
  maxR?: number;
  /**
   * <zh/> 透镜的最小半径。只有在开启 `scaleRByWheel` 时生效
   *
   * <en/> The minimum radius of the lens. Only valid when `scaleRByWheel` is enabled
   * @defaultValue 0
   */
  minR?: number;
  /**
   * <zh/> 是否通过滚轮缩放透镜的半径
   *
   * <en/> Whether to scale the radius of the lens by wheel
   * @defaultValue true
   */
  scaleRByWheel?: boolean;
  /**
   * <zh/> 边显示的条件
   * - `'both'`:只有起始节点和目标节点都在透镜中时,边才会显示
   * - `'source'`:只有起始节点在透镜中时,边才会显示
   * - `'target'`:只有目标节点在透镜中时,边才会显示
   * - `'either'`:只要起始节点或目标节点有一个在透镜中时,边就会显示
   */
  nodeType?: 'both' | 'source' | 'target' | 'either';
  /**
   * <zh/> 过滤出始终不在透镜中显示的元素
   *
   * <en/> Filter elements that are never displayed in the lens
   * @param id - <zh/> 元素的 id | <en/> The id of the element
   * @param elementType - <zh/> 元素的类型 | <en/> The type of the element
   * @returns <zh/> 是否显示 | <en/> Whether to display
   */
  filter?: (id: ID, elementType: ElementType) => boolean;
  /**
   * <zh/> 透镜的样式
   *
   * <en/> The style of the lens
   */
  style?: BaseStyleProps;
  /**
   * <zh/> 在透镜中显示的元素的样式
   *
   * <en/> The style of the elements displayed in the lens
   */
  elementStyle?:
    | BaseNodeStyleProps
    | BaseEdgeStyleProps
    | ((elementType: ElementType, datum: ElementDatum) => BaseNodeStyleProps | BaseEdgeStyleProps);
}


const { elementStyle } = this.options;

const iterate = (datum: ElementDatum) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

这里是把滤镜范围内的边拷贝到临时交互层吗

Copy link
Contributor Author

Choose a reason for hiding this comment

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

是的

packages/g6/src/plugins/edge-filter-lens/index.ts Outdated Show resolved Hide resolved
@Aarebecca Aarebecca merged commit 835f7fe into v5 Aug 22, 2024
5 checks passed
@Aarebecca Aarebecca deleted the plugin-edgeFilterLens branch August 22, 2024 12:32
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