10522143127

Committed 23 Aug 2024 08:01AM UTC coverage: 91.443% (-0.002%) from 91.445%

Build # 10522143127

Build Type

Pull #6236

github

Committed by

yvonneyx

Commit Message

refactor: adjust edge filter lens plugin options

Pull Request Pull Request #6236: refactor: adjust edge filter lens plugin options

Run Details

3047 of 3726 branches covered (81.78%)

Branch coverage included in aggregate %.

6 of 6 new or added lines in 1 file covered. (100.0%)

2 existing lines in 1 file now uncovered.

6880 of 7130 relevant lines covered (96.49%)

11727.25 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

95.41

/packages/g6/src/plugins/edge-filter-lens/index.ts

import type { BaseStyleProps } from '@antv/g';
import { CommonEvent } from '../../constants';
import { Circle } from '../../elements';
import type { RuntimeContext } from '../../runtime/types';
import type { EdgeData, GraphData, NodeData } from '../../spec';
import type { EdgeStyle } from '../../spec/element/edge';
import type { NodeStyle } from '../../spec/element/node';
import type {
  Element,
  ElementDatum,
  ElementType,
  ID,
  IDragEvent,
  IPointerEvent,
  Point,
  PointObject,
} from '../../types';
import { idOf } from '../../utils/id';
import { parsePoint, toPointObject } from '../../utils/point';
import { positionOf } from '../../utils/position';
import { distance } from '../../utils/vector';
import type { BasePluginOptions } from '../base-plugin';
import { BasePlugin } from '../base-plugin';

/**
 * <zh/> 边过滤镜插件配置项
 *
 * <en/> Edge filter lens plugin options
 */
export 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
   * @defaultValue 'pointermove'
   */
  trigger?: 'pointermove' | 'click' | 'drag';
  /**
   * <zh/> 透镜的半径
   *
   * <en/> The radius of the lens
   * @defaultValue 60
   */
  r?: number;
  /**
   * <zh/> 透镜的最大半径。只有在 `scaleRBy` 为 `wheel` 时生效
   *
   * <en/> The maximum radius of the lens. Only valid when `scaleRBy` is `wheel`
   * @defaultValue canvas 宽高最小值的一半
   */
  maxR?: number;
  /**
   * <zh/> 透镜的最小半径。只有在 `scaleRBy` 为 `wheel` 时生效
   *
   * <en/> The minimum radius of the lens. Only valid when `scaleRBy` is `wheel`
   * @defaultValue 0
   */
  minR?: number;
  /**
   * <zh/> 是否通过滚轮缩放透镜的半径
   *
   * <en/> Whether to scale the radius of the lens by wheel
   * @defaultValue true
   */
  scaleRBy?: 'wheel' | 'unset';
  /**
   * <zh/> 边显示的条件
   * - `'both'`：只有起始节点和目标节点都在透镜中时，边才会显示
   * - `'source'`：只有起始节点在透镜中时，边才会显示
   * - `'target'`：只有目标节点在透镜中时，边才会显示
   * - `'either'`：只要起始节点或目标节点有一个在透镜中时，边就会显示
   *
   * <en/> The condition for displaying the edge
   * - `'both'`: The edge is displayed only when both the source node and the target node are in the lens
   * - `'source'`: The edge is displayed only when the source node is in the lens
   * - `'target'`: The edge is displayed only when the target node is in the lens
   * - `'either'`: The edge is displayed when either the source node or the target node is in the lens
   * @defaultValue 'both'
   */
  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 nodes displayed in the lens
   */
  nodeStyle?: NodeStyle | ((datum: NodeData) => NodeStyle);
  /**
   * <zh/> 在透镜中边的样式
   *
   * <en/> The style of the edges displayed in the lens
   */
  edgeStyle?: EdgeStyle | ((datum: EdgeData) => EdgeStyle);
  /**
   * <zh/> 是否阻止默认事件
   *
   * <en/> Whether to prevent the default event
   * @defaultValue true
   */
  preventDefault?: boolean;
}

const defaultLensStyle: BaseStyleProps = {
  fill: '#fff',
  fillOpacity: 1,
  lineWidth: 1,
  stroke: '#000',
  strokeOpacity: 0.8,
};

const DELTA = 0.05;

/**
 * <zh/> 边过滤镜插件
 *
 * <en/> Edge filter lens plugin
 * @remarks
 * <zh/> 边过滤镜可以将关注的边保留在过滤镜范围内，其他边将在该范围内不显示。
 *
 * <en/> EdgeFilterLens can keep the focused edges within the lens range, while other edges will not be displayed within that range.
 */
export class EdgeFilterLens extends BasePlugin<EdgeFilterLensOptions> {
  static defaultOptions: Partial<EdgeFilterLensOptions> = {
    trigger: 'pointermove',
    r: 60,
    nodeType: 'both',
    filter: () => true,
    style: { lineWidth: 2 },
    nodeStyle: { label: false },
    edgeStyle: { label: true },
    scaleRBy: 'wheel',
    preventDefault: true,
  };

  constructor(context: RuntimeContext, options: EdgeFilterLensOptions) {
    super(context, Object.assign({}, EdgeFilterLens.defaultOptions, options));
    this.bindEvents();
  }

  private lens!: Circle;

  private shapes = new Map<ID, Element>();

  private r = this.options.r;

  private get canvas() {
    return this.context.canvas.getLayer('transient');
  }

  private get isLensOn() {
    return this.lens && !this.lens.destroyed;
  }

  protected onEdgeFilter = (event: IPointerEvent) => {
    if (this.options.trigger === 'drag' && this.isLensOn) return;

    const origin = parsePoint(event.canvas as PointObject);
    this.renderLens(origin);
    this.renderFocusElements();
  };

  private renderLens = (origin: Point) => {
    const style = Object.assign({}, defaultLensStyle, this.options.style);

    if (!this.isLensOn) {
      this.lens = new Circle({ style });
      this.canvas.appendChild(this.lens);
    }

    Object.assign(style, toPointObject(origin), { size: this.r * 2 });

    this.lens.update(style);
  };

  private getFilterData = (): Required<GraphData> => {
    const { filter } = this.options;
    const { model } = this.context;
    const data = model.getData();

    if (!filter) return data;

    const { nodes, edges, combos } = data;

    return {
      nodes: nodes.filter((node) => filter(idOf(node), 'node')),
      edges: edges.filter((edge) => filter(idOf(edge), 'edge')),
      combos: combos.filter((combo) => filter(idOf(combo), 'combo')),
    };
  };

  private getFocusElements = (origin: Point) => {
    const { nodes, edges } = this.getFilterData();

    const focusNodes = nodes.filter((datum) => distance(positionOf(datum), origin) < this.r);
    const focusNodeIds = focusNodes.map((node) => idOf(node));

    const focusEdges = edges.filter((datum) => {
      const { source, target } = datum;
      const isSourceFocus = focusNodeIds.includes(source);
      const isTargetFocus = focusNodeIds.includes(target);

      switch (this.options.nodeType) {
        case 'both':
          return isSourceFocus && isTargetFocus;
        case 'either':
          return isSourceFocus !== isTargetFocus;
        case 'source':
          return isSourceFocus && !isTargetFocus;
        case 'target':
          return !isSourceFocus && isTargetFocus;
        default:
          return false;
      }
    });

    return { nodes: focusNodes, edges: focusEdges };
  };

  private renderFocusElements = () => {
    const { element, graph } = this.context;
    if (!this.isLensOn) return;

    const origin = this.lens.getCenter();
    const { nodes, edges } = this.getFocusElements(origin);

    const ids = new Set<ID>();

    const iterate = (datum: ElementDatum) => {
      const id = idOf(datum);
      ids.add(id);

      const shape = element!.getElement(id);
      if (!shape) return;

      const cloneShape = this.shapes.get(id) || shape.cloneNode();

      cloneShape.setPosition(shape.getPosition());
      cloneShape.id = shape.id;

      if (!this.shapes.has(id)) {
        this.canvas.appendChild(cloneShape);
        this.shapes.set(id, cloneShape);
      } else {
        Object.entries(shape.attributes).forEach(([key, value]) => {
          if (cloneShape.style[key] !== value) cloneShape.style[key] = value;
        });
      }

      const elementType = graph.getElementType(id) as Exclude<ElementType, 'combo'>;
      const style = this.getElementStyle(elementType, datum);

      // @ts-ignore
      cloneShape.update(style);
    };

    nodes.forEach(iterate);
    edges.forEach(iterate);

    this.shapes.forEach((shape, id) => {
      if (!ids.has(id)) {
        shape.destroy();
        this.shapes.delete(id);
      }
    });
  };

  private getElementStyle(elementType: ElementType, datum: ElementDatum) {
    const styler = elementType === 'node' ? this.options.nodeStyle : this.options.edgeStyle;
    if (typeof styler === 'function') return styler(datum as any);
    return styler;
  }

  private scaleRByWheel = (event: WheelEvent) => {
    if (this.options.preventDefault) event.preventDefault();
    const { clientX, clientY, deltaX, deltaY } = event;
    const { graph, canvas } = this.context;
    const scaleOrigin = graph.getCanvasByClient([clientX, clientY]);
    const origin = this.lens?.getCenter();

    if (!this.isLensOn || distance(scaleOrigin, origin) > this.r) {
      return;
    }

    const { maxR, minR } = this.options;
    const ratio = deltaX + deltaY > 0 ? 1 / (1 - DELTA) : 1 - DELTA;
    const canvasR = Math.min(...canvas.getSize()) / 2;
    this.r = Math.max(minR || 0, Math.min(maxR || canvasR, this.r * ratio));

    this.renderLens(origin);
    this.renderFocusElements();
  };

  get graphDom() {
    return this.context.graph.getCanvas().getContextService().getDomElement();
  }

  private isLensDragging = false;

  private onDragStart = (event: IDragEvent) => {
    const dragOrigin = parsePoint(event.canvas as PointObject);
    const origin = this.lens?.getCenter();

    if (!this.isLensOn || distance(dragOrigin, origin) > this.r) return;

    this.isLensDragging = true;
  };

  private onDrag = (event: IDragEvent) => {
    if (!this.isLensDragging) return;

    const dragOrigin = parsePoint(event.canvas as PointObject);
    this.renderLens(dragOrigin);
    this.renderFocusElements();
  };

  private onDragEnd = () => {
    this.isLensDragging = false;
  };

  private bindEvents() {
    const { graph } = this.context;
    const { trigger, scaleRBy } = this.options;

    const canvas = graph.getCanvas().getLayer();

    if (['click', 'drag'].includes(trigger)) {
      canvas.addEventListener(CommonEvent.CLICK, this.onEdgeFilter);
    }

    if (trigger === 'pointermove') {
      canvas.addEventListener(CommonEvent.POINTER_MOVE, this.onEdgeFilter);
    } else if (trigger === 'drag') {
      canvas.addEventListener(CommonEvent.DRAG_START, this.onDragStart);
      canvas.addEventListener(CommonEvent.DRAG, this.onDrag);
      canvas.addEventListener(CommonEvent.DRAG_END, this.onDragEnd);
    }

    if (scaleRBy === 'wheel') {
      this.graphDom?.addEventListener(CommonEvent.WHEEL, this.scaleRByWheel, { passive: false });
    }
  }

  private unbindEvents() {
    const { graph } = this.context;
    const { trigger, scaleRBy } = this.options;
    const canvas = graph.getCanvas().getLayer();

    if (['click', 'drag'].includes(trigger)) {
      canvas.removeEventListener(CommonEvent.CLICK, this.onEdgeFilter);
    }

    if (trigger === 'pointermove') {
      canvas.removeEventListener(CommonEvent.POINTER_MOVE, this.onEdgeFilter);
    } else if (trigger === 'drag') {
      canvas.removeEventListener(CommonEvent.DRAG_START, this.onDragStart);
      canvas.removeEventListener(CommonEvent.DRAG, this.onDrag);
      canvas.removeEventListener(CommonEvent.DRAG_END, this.onDragEnd);
    }

    if (scaleRBy === 'wheel') {
      this.graphDom?.removeEventListener(CommonEvent.WHEEL, this.scaleRByWheel);
    }
  }

  public update(options: Partial<EdgeFilterLensOptions>) {
    this.unbindEvents();
    super.update(options);
    this.bindEvents();
  }

  public destroy() {
    this.unbindEvents();
    if (this.isLensOn) {
      this.lens.destroy();
    }
    this.shapes.forEach((shape, id) => {
      shape.destroy();
      this.shapes.delete(id);
    });
    super.destroy();
  }
}

1	import type { BaseStyleProps } from '@antv/g';
2	import { CommonEvent } from '../../constants';	274✔
3	import { Circle } from '../../elements';	274✔
4	import type { RuntimeContext } from '../../runtime/types';
5	import type { EdgeData, GraphData, NodeData } from '../../spec';
6	import type { EdgeStyle } from '../../spec/element/edge';
7	import type { NodeStyle } from '../../spec/element/node';
8	import type {
9	Element,
10	ElementDatum,
11	ElementType,
12	ID,
13	IDragEvent,
14	IPointerEvent,
15	Point,
16	PointObject,
17	} from '../../types';
18	import { idOf } from '../../utils/id';	274✔
19	import { parsePoint, toPointObject } from '../../utils/point';	274✔
20	import { positionOf } from '../../utils/position';	274✔
21	import { distance } from '../../utils/vector';	274✔
22	import type { BasePluginOptions } from '../base-plugin';
23	import { BasePlugin } from '../base-plugin';	274✔
24
25	/**
26	* <zh/> 边过滤镜插件配置项
27	*
28	* <en/> Edge filter lens plugin options
29	*/
30	export interface EdgeFilterLensOptions extends BasePluginOptions {
31	/**
32	* <zh/> 移动透镜的方式
33	* - `'pointermove'`：始终跟随鼠标移动
34	* - `'click'`：鼠标点击时透镜移动
35	* - `'drag'`：拖拽透镜
36	*
37	* <en/> The way to move the lens
38	* - `'pointermove'`: always follow the mouse movement
39	* - `'click'`: move the lens when the mouse clicks
40	* - `'drag'`: drag the lens
41	* @defaultValue 'pointermove'
42	*/
43	trigger?: 'pointermove' \| 'click' \| 'drag';
44	/**
45	* <zh/> 透镜的半径
46	*
47	* <en/> The radius of the lens
48	* @defaultValue 60
49	*/
50	r?: number;
51	/**
52	* <zh/> 透镜的最大半径。只有在 `scaleRBy` 为 `wheel` 时生效
53	*
54	* <en/> The maximum radius of the lens. Only valid when `scaleRBy` is `wheel`
55	* @defaultValue canvas 宽高最小值的一半
56	*/
57	maxR?: number;
58	/**
59	* <zh/> 透镜的最小半径。只有在 `scaleRBy` 为 `wheel` 时生效
60	*
61	* <en/> The minimum radius of the lens. Only valid when `scaleRBy` is `wheel`
62	* @defaultValue 0
63	*/
64	minR?: number;
65	/**
66	* <zh/> 是否通过滚轮缩放透镜的半径
67	*
68	* <en/> Whether to scale the radius of the lens by wheel
69	* @defaultValue true
70	*/
71	scaleRBy?: 'wheel' \| 'unset';
72	/**
73	* <zh/> 边显示的条件
74	* - `'both'`：只有起始节点和目标节点都在透镜中时，边才会显示
75	* - `'source'`：只有起始节点在透镜中时，边才会显示
76	* - `'target'`：只有目标节点在透镜中时，边才会显示
77	* - `'either'`：只要起始节点或目标节点有一个在透镜中时，边就会显示
78	*
79	* <en/> The condition for displaying the edge
80	* - `'both'`: The edge is displayed only when both the source node and the target node are in the lens
81	* - `'source'`: The edge is displayed only when the source node is in the lens
82	* - `'target'`: The edge is displayed only when the target node is in the lens
83	* - `'either'`: The edge is displayed when either the source node or the target node is in the lens
84	* @defaultValue 'both'
85	*/
86	nodeType?: 'both' \| 'source' \| 'target' \| 'either';
87	/**
88	* <zh/> 过滤出始终不在透镜中显示的元素
89	*
90	* <en/> Filter elements that are never displayed in the lens
91	* @param id - <zh/> 元素的 id \| <en/> The id of the element
92	* @param elementType - <zh/> 元素的类型 \| <en/> The type of the element
93	* @returns <zh/> 是否显示 \| <en/> Whether to display
94	*/
95	filter?: (id: ID, elementType: ElementType) => boolean;
96	/**
97	* <zh/> 透镜的样式
98	*
99	* <en/> The style of the lens
100	*/
101	style?: BaseStyleProps;
102	/**
103	* <zh/> 在透镜中节点的样式
104	*
105	* <en/> The style of the nodes displayed in the lens
106	*/
107	nodeStyle?: NodeStyle \| ((datum: NodeData) => NodeStyle);
108	/**
109	* <zh/> 在透镜中边的样式
110	*
111	* <en/> The style of the edges displayed in the lens
112	*/
113	edgeStyle?: EdgeStyle \| ((datum: EdgeData) => EdgeStyle);
114	/**
115	* <zh/> 是否阻止默认事件
116	*
117	* <en/> Whether to prevent the default event
118	* @defaultValue true
119	*/
120	preventDefault?: boolean;
121	}
122
123	const defaultLensStyle: BaseStyleProps = {	274✔
124	fill: '#fff',
125	fillOpacity: 1,
126	lineWidth: 1,
127	stroke: '#000',
128	strokeOpacity: 0.8,
129	};
130
131	const DELTA = 0.05;	274✔
132
133	/**
134	* <zh/> 边过滤镜插件
135	*
136	* <en/> Edge filter lens plugin
137	* @remarks
138	* <zh/> 边过滤镜可以将关注的边保留在过滤镜范围内，其他边将在该范围内不显示。
139	*
140	* <en/> EdgeFilterLens can keep the focused edges within the lens range, while other edges will not be displayed within that range.
141	*/
142	export class EdgeFilterLens extends BasePlugin<EdgeFilterLensOptions> {	276✔
143	static defaultOptions: Partial<EdgeFilterLensOptions> = {	274✔
144	trigger: 'pointermove',
145	r: 60,
146	nodeType: 'both',
147	filter: () => true,	7,944✔
148	style: { lineWidth: 2 },
149	nodeStyle: { label: false },
150	edgeStyle: { label: true },
151	scaleRBy: 'wheel',
152	preventDefault: true,
153	};
154
155	constructor(context: RuntimeContext, options: EdgeFilterLensOptions) {
156	super(context, Object.assign({}, EdgeFilterLens.defaultOptions, options));	2✔
157	this.bindEvents();	2✔
158	}
159
160	private lens!: Circle;
161
162	private shapes = new Map<ID, Element>();	2✔
163
164	private r = this.options.r;	2✔
165
166	private get canvas() {
167	return this.context.canvas.getLayer('transient');	32✔
168	}
169
170	private get isLensOn() {
171	return this.lens && !this.lens.destroyed;	66✔
172	}
173
174	protected onEdgeFilter = (event: IPointerEvent) => {	2✔
175	if (this.options.trigger === 'drag' && this.isLensOn) return;	14✔
176
177	const origin = parsePoint(event.canvas as PointObject);	12✔
178	this.renderLens(origin);	12✔
179	this.renderFocusElements();	12✔
180	};
181
182	private renderLens = (origin: Point) => {	2✔
183	const style = Object.assign({}, defaultLensStyle, this.options.style);	24✔
184
185	if (!this.isLensOn) {	24✔
186	this.lens = new Circle({ style });	2✔
187	this.canvas.appendChild(this.lens);	2✔
188	}
189
190	Object.assign(style, toPointObject(origin), { size: this.r * 2 });	24✔
191
192	this.lens.update(style);	24✔
193	};
194
195	private getFilterData = (): Required<GraphData> => {	2✔
196	const { filter } = this.options;	24✔
197	const { model } = this.context;	24✔
198	const data = model.getData();	24✔
199
200	if (!filter) return data;	24!
201
202	const { nodes, edges, combos } = data;	24✔
203
204	return {	24✔
205	nodes: nodes.filter((node) => filter(idOf(node), 'node')),	1,848✔
206	edges: edges.filter((edge) => filter(idOf(edge), 'edge')),	6,096✔
UNCOV 207	combos: combos.filter((combo) => filter(idOf(combo), 'combo')),	×
208	};
209	};
210
211	private getFocusElements = (origin: Point) => {	2✔
212	const { nodes, edges } = this.getFilterData();	24✔
213
214	const focusNodes = nodes.filter((datum) => distance(positionOf(datum), origin) < this.r);	1,848✔
215	const focusNodeIds = focusNodes.map((node) => idOf(node));	56✔
216
217	const focusEdges = edges.filter((datum) => {	24✔
218	const { source, target } = datum;	6,096✔
219	const isSourceFocus = focusNodeIds.includes(source);	6,096✔
220	const isTargetFocus = focusNodeIds.includes(target);	6,096✔
221
222	switch (this.options.nodeType) {	6,096!
223	case 'both':
224	return isSourceFocus && isTargetFocus;	4,572✔
225	case 'either':
226	return isSourceFocus !== isTargetFocus;	508✔
227	case 'source':
228	return isSourceFocus && !isTargetFocus;	508✔
229	case 'target':
230	return !isSourceFocus && isTargetFocus;	508✔
231	default:
UNCOV 232	return false;	×
233	}
234	});
235
236	return { nodes: focusNodes, edges: focusEdges };	24✔
237	};
238
239	private renderFocusElements = () => {	2✔
240	const { element, graph } = this.context;	24✔
241	if (!this.isLensOn) return;	24!
242
243	const origin = this.lens.getCenter();	24✔
244	const { nodes, edges } = this.getFocusElements(origin);	24✔
245
246	const ids = new Set<ID>();	24✔
247
248	const iterate = (datum: ElementDatum) => {	24✔
249	const id = idOf(datum);	112✔
250	ids.add(id);	112✔
251
252	const shape = element!.getElement(id);	112✔
253	if (!shape) return;	112!
254
255	const cloneShape = this.shapes.get(id) \|\| shape.cloneNode();	112✔
256
257	cloneShape.setPosition(shape.getPosition());	112✔
258	cloneShape.id = shape.id;	112✔
259
260	if (!this.shapes.has(id)) {	112✔
261	this.canvas.appendChild(cloneShape);	30✔
262	this.shapes.set(id, cloneShape);	30✔
263	} else {
264	Object.entries(shape.attributes).forEach(([key, value]) => {	82✔
265	if (cloneShape.style[key] !== value) cloneShape.style[key] = value;	4,800✔
266	});
267	}
268
269	const elementType = graph.getElementType(id) as Exclude<ElementType, 'combo'>;	112✔
270	const style = this.getElementStyle(elementType, datum);	112✔
271
272	// @ts-ignore
273	cloneShape.update(style);	112✔
274	};
275
276	nodes.forEach(iterate);	24✔
277	edges.forEach(iterate);	24✔
278
279	this.shapes.forEach((shape, id) => {	24✔
280	if (!ids.has(id)) {	136✔
281	shape.destroy();	24✔
282	this.shapes.delete(id);	24✔
283	}
284	});
285	};
286
287	private getElementStyle(elementType: ElementType, datum: ElementDatum) {
288	const styler = elementType === 'node' ? this.options.nodeStyle : this.options.edgeStyle;	112✔
289	if (typeof styler === 'function') return styler(datum as any);	112!
290	return styler;	112✔
291	}
292
293	private scaleRByWheel = (event: WheelEvent) => {	2✔
294	if (this.options.preventDefault) event.preventDefault();	12✔
295	const { clientX, clientY, deltaX, deltaY } = event;	12✔
296	const { graph, canvas } = this.context;	12✔
297	const scaleOrigin = graph.getCanvasByClient([clientX, clientY]);	12✔
298	const origin = this.lens?.getCenter();	12✔
299
300	if (!this.isLensOn \|\| distance(scaleOrigin, origin) > this.r) {	12✔
301	return;	2✔
302	}
303
304	const { maxR, minR } = this.options;	10✔
305	const ratio = deltaX + deltaY > 0 ? 1 / (1 - DELTA) : 1 - DELTA;	10✔
306	const canvasR = Math.min(...canvas.getSize()) / 2;	10✔
307	this.r = Math.max(minR \|\| 0, Math.min(maxR \|\| canvasR, this.r * ratio));	10✔
308
309	this.renderLens(origin);	10✔
310	this.renderFocusElements();	10✔
311	};
312
313	get graphDom() {
314	return this.context.graph.getCanvas().getContextService().getDomElement();	24✔
315	}
316
317	private isLensDragging = false;	2✔
318
319	private onDragStart = (event: IDragEvent) => {	2✔
320	const dragOrigin = parsePoint(event.canvas as PointObject);	2✔
321	const origin = this.lens?.getCenter();	2✔
322
323	if (!this.isLensOn \|\| distance(dragOrigin, origin) > this.r) return;	2!
324
325	this.isLensDragging = true;	2✔
326	};
327
328	private onDrag = (event: IDragEvent) => {	2✔
329	if (!this.isLensDragging) return;	2!
330
331	const dragOrigin = parsePoint(event.canvas as PointObject);	2✔
332	this.renderLens(dragOrigin);	2✔
333	this.renderFocusElements();	2✔
334	};
335
336	private onDragEnd = () => {	2✔
337	this.isLensDragging = false;	2✔
338	};
339
340	private bindEvents() {
341	const { graph } = this.context;	12✔
342	const { trigger, scaleRBy } = this.options;	12✔
343
344	const canvas = graph.getCanvas().getLayer();	12✔
345
346	if (['click', 'drag'].includes(trigger)) {	12✔
347	canvas.addEventListener(CommonEvent.CLICK, this.onEdgeFilter);	10✔
348	}
349
350	if (trigger === 'pointermove') {	12✔
351	canvas.addEventListener(CommonEvent.POINTER_MOVE, this.onEdgeFilter);	2✔
352	} else if (trigger === 'drag') {	10✔
353	canvas.addEventListener(CommonEvent.DRAG_START, this.onDragStart);	2✔
354	canvas.addEventListener(CommonEvent.DRAG, this.onDrag);	2✔
355	canvas.addEventListener(CommonEvent.DRAG_END, this.onDragEnd);	2✔
356	}
357
358	if (scaleRBy === 'wheel') {	12✔
359	this.graphDom?.addEventListener(CommonEvent.WHEEL, this.scaleRByWheel, { passive: false });	12✔
360	}
361	}
362
363	private unbindEvents() {
364	const { graph } = this.context;	12✔
365	const { trigger, scaleRBy } = this.options;	12✔
366	const canvas = graph.getCanvas().getLayer();	12✔
367
368	if (['click', 'drag'].includes(trigger)) {	12✔
369	canvas.removeEventListener(CommonEvent.CLICK, this.onEdgeFilter);	10✔
370	}
371
372	if (trigger === 'pointermove') {	12✔
373	canvas.removeEventListener(CommonEvent.POINTER_MOVE, this.onEdgeFilter);	2✔
374	} else if (trigger === 'drag') {	10✔
375	canvas.removeEventListener(CommonEvent.DRAG_START, this.onDragStart);	2✔
376	canvas.removeEventListener(CommonEvent.DRAG, this.onDrag);	2✔
377	canvas.removeEventListener(CommonEvent.DRAG_END, this.onDragEnd);	2✔
378	}
379
380	if (scaleRBy === 'wheel') {	12✔
381	this.graphDom?.removeEventListener(CommonEvent.WHEEL, this.scaleRByWheel);	12✔
382	}
383	}
384
385	public update(options: Partial<EdgeFilterLensOptions>) {
386	this.unbindEvents();	10✔
387	super.update(options);	10✔
388	this.bindEvents();	10✔
389	}
390
391	public destroy() {
392	this.unbindEvents();	2✔
393	if (this.isLensOn) {	2✔
394	this.lens.destroy();	2✔
395	}
396	this.shapes.forEach((shape, id) => {	2✔
397	shape.destroy();	6✔
398	this.shapes.delete(id);	6✔
399	});
400	super.destroy();	2✔
401	}
402	}

antvis / G6 / 10522143127

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous