10860775681

Committed 14 Sep 2024 07:59AM UTC coverage: 91.47% (-0.004%) from 91.474%

Build Type

push

github

Committed by antv

Commit Message

chore: update version

Run Details

3296 of 4033 branches covered (81.73%)

Branch coverage included in aggregate %.

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

1 existing line in 1 file now uncovered.

7266 of 7514 relevant lines covered (96.7%)

8383.8 hits per line

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

83.66

/packages/g6/src/behaviors/drag-element.ts

import type { BaseStyleProps, Cursor } from '@antv/g';
import { Rect } from '@antv/g';
import { isFunction } from '@antv/util';
import { COMBO_KEY, CanvasEvent, ComboEvent, CommonEvent } from '../constants';
import type { RuntimeContext } from '../runtime/types';
import type { EdgeDirection, ID, IElementDragEvent, IPointerEvent, Point, Prefix, State } from '../types';
import { getBBoxSize, getCombinedBBox } from '../utils/bbox';
import { idOf } from '../utils/id';
import { subStyleProps } from '../utils/prefix';
import { divide, subtract } from '../utils/vector';
import type { BaseBehaviorOptions } from './base-behavior';
import { BaseBehavior } from './base-behavior';

/**
 * <zh/> 拖拽元素交互配置项
 *
 * <en/> Drag element behavior options
 */
export interface DragElementOptions extends BaseBehaviorOptions, Prefix<'shadow', BaseStyleProps> {
  /**
   * <zh/> 是否启用拖拽动画
   *
   * <en/> Whether to enable drag animation
   * @defaultValue true
   */
  animation?: boolean;
  /**
   * <zh/> 是否启用拖拽节点的功能，默认可以拖拽 node 和 combo
   *
   * <en/> Whether to enable the function of dragging the node，default can drag node and combo
   * @defaultValue ['node', 'combo'].includes(event.targetType)
   */
  enable?: boolean | ((event: IElementDragEvent) => boolean);
  /**
   * <zh/> 拖拽操作效果
   * - `'link'`: 将拖拽元素置入为目标元素的子元素
   * - `'move'`: 移动元素并更新父元素尺寸
   * - `'none'`: 仅更新拖拽目标位置，不做任何额外操作
   *
   * <en/> Drag operation effect
   * - `'link'`: Place the drag element as a child element of the target element
   * - `'move'`: Move the element and update the parent element size
   * - `'none'`: Only update the drag target position, no additional operations
   * @remarks
   * <zh/> combo 元素可作为元素容器置入 node 或 combo 元素
   *
   * <en/> The combo element can be placed as an element container into the node or combo element
   * @defaultValue 'move'
   */
  dropEffect?: 'link' | 'move' | 'none';
  /**
   * <zh/> 节点选中的状态，启用多选时会基于该状态查找选中的节点
   *
   * <en/> The state name of the selected node, when multi-selection is enabled, the selected nodes will be found based on this state
   * @defaultValue 'selected'
   */
  state?: State;
  /**
   * <zh/> 拖拽时隐藏的边
   * - `'none'`: 不隐藏
   * - `'out'`: 隐藏以节点为源节点的边
   * - `'in'`: 隐藏以节点为目标节点的边
   * - `'both'`: 隐藏与节点相关的所有边
   * - `'all'`: 隐藏图中所有边
   *
   * <en/> Edges hidden during dragging
   * - `'none'`: do not hide
   * - `'out'`: hide the edges with the node as the source node
   * - `'in'`: hide the edges with the node as the target node
   * - `'both'`: hide all edges related to the node
   * - `'all'`: hide all edges in the graph
   * @remarks
   * <zh/> 使用幽灵节点时不会隐藏边
   *
   * <en/> Edges will not be hidden when using the drag shadow
   * @defaultValue 'none'
   */
  hideEdge?: 'none' | 'all' | EdgeDirection;
  /**
   * <zh/> 是否启用幽灵节点，即用一个图形代替节点跟随鼠标移动
   *
   * <en/> Whether to enable the drag shadow, that is, use a shape to replace the node to follow the mouse movement
   */
  shadow?: boolean;
  /**
   * <zh/> 完成拖拽时的回调
   *
   * <en/> Callback when dragging is completed
   */
  onFinish?: (ids: ID[]) => void;
  /**
   * <zh/> 指针样式
   *
   * <en/> Cursor style
   */
  cursor?: {
    /**
     * <zh/> 默认指针样式
     *
     * <en/> Default cursor style
     */
    default?: Cursor;
    /**
     * <zh/> 可抓取指针样式
     *
     * <en/> Cursor style that can be grabbed
     */
    grab: Cursor;
    /**
     * <zh/> 抓取中指针样式
     *
     * <en/> Cursor style when grabbing
     */
    grabbing: Cursor;
  };
}

/**
 * <zh/> 拖拽元素交互
 *
 * <en/> Drag element behavior
 */
export class DragElement extends BaseBehavior<DragElementOptions> {
  static defaultOptions: Partial<DragElementOptions> = {
    animation: true,
    enable: (event) => ['node', 'combo'].includes(event.targetType),
    dropEffect: 'move',
    state: 'selected',
    hideEdge: 'none',
    shadow: false,
    shadowZIndex: 100,
    shadowFill: '#F3F9FF',
    shadowFillOpacity: 0.5,
    shadowStroke: '#1890FF',
    shadowStrokeOpacity: 0.9,
    shadowLineDash: [5, 5],
    cursor: {
      default: 'default',
      grab: 'grab',
      grabbing: 'grabbing',
    },
  };

  protected enable: boolean = false;

  private enableElements = ['node', 'combo'];

  protected target: ID[] = [];

  private shadow?: Rect;

  private shadowOrigin: Point = [0, 0];

  private hiddenEdges: ID[] = [];

  private isDragging: boolean = false;

  constructor(context: RuntimeContext, options: DragElementOptions) {
    super(context, Object.assign({}, DragElement.defaultOptions, options));
    this.onDragStart = this.onDragStart.bind(this);
    this.onDrag = this.onDrag.bind(this);
    this.onDragEnd = this.onDragEnd.bind(this);
    this.onDrop = this.onDrop.bind(this);

    this.bindEvents();
  }
  /**
   * <zh/> 更新元素拖拽配置
   *
   * <en/> Update the element dragging configuration
   * @param options - <zh/> 配置项 | <en/> options
   * @internal
   */
  public update(options: Partial<DragElementOptions>): void {
    this.unbindEvents();
    super.update(options);
    this.bindEvents();
  }

  private bindEvents() {
    const { graph, canvas } = this.context;

    // @ts-expect-error internal property
    const $canvas: HTMLCanvasElement = canvas.getLayer().getContextService().$canvas;
    if ($canvas) {
      $canvas.addEventListener('blur', this.onDragEnd);
      $canvas.addEventListener('contextmenu', this.onDragEnd);
    }

    this.enableElements.forEach((type) => {
      graph.on(`${type}:${CommonEvent.DRAG_START}`, this.onDragStart);
      graph.on(`${type}:${CommonEvent.DRAG}`, this.onDrag);
      graph.on(`${type}:${CommonEvent.DRAG_END}`, this.onDragEnd);
      graph.on(`${type}:${CommonEvent.POINTER_ENTER}`, this.setCursor);
      graph.on(`${type}:${CommonEvent.POINTER_LEAVE}`, this.setCursor);
    });

    if (['link'].includes(this.options.dropEffect)) {
      graph.on(ComboEvent.DROP, this.onDrop);
      graph.on(CanvasEvent.DROP, this.onDrop);
    }
  }

  /**
   * <zh/> 获取当前选中的节点 id 集合
   *
   * <en/> Get the id collection of the currently selected node
   * @param currTarget - <zh/> 当前拖拽目标元素 id 集合 | <en/> The id collection of the current drag target element
   * @returns <zh/> 当前选中的节点 id 集合 | <en/> The id collection of the currently selected node
   * @internal
   */
  protected getSelectedNodeIDs(currTarget: ID[]) {
    return Array.from(
      new Set(
        this.context.graph
          .getElementDataByState('node', this.options.state)
          .map((node) => node.id)
          .concat(currTarget),
      ),
    );
  }

  /**
   * Get the delta of the drag
   * @param event - drag event object
   * @returns delta
   * @internal
   */
  protected getDelta(event: IElementDragEvent) {
    const zoom = this.context.graph.getZoom();
    return divide([event.dx, event.dy], zoom);
  }

  /**
   * <zh/> 拖拽开始时的回调
   *
   * <en/> Callback when dragging starts
   * @param event - <zh/> 拖拽事件对象 | <en/> drag event object
   * @internal
   */
  protected onDragStart(event: IElementDragEvent) {
    this.enable = this.validate(event);
    if (!this.enable) return;

    const { batch, canvas } = this.context;
    canvas.setCursor(this.options!.cursor?.grabbing || 'grabbing');
    this.isDragging = true;
    batch!.startBatch();
    this.target = this.getSelectedNodeIDs([event.target.id]);
    this.hideEdge();
    this.context.graph.frontElement(this.target);
    if (this.options.shadow) this.createShadow(this.target);
  }

  /**
   * <zh/> 拖拽过程中的回调
   *
   * <en/> Callback when dragging
   * @param event - <zh/> 拖拽事件对象 | <en/> drag event object
   * @internal
   */
  protected onDrag(event: IElementDragEvent) {
    if (!this.enable) return;
    const delta = this.getDelta(event);

    if (this.options.shadow) this.moveShadow(delta);
    else this.moveElement(this.target, delta);
  }

  /**
   * <zh/> 元素拖拽结束的回调
   *
   * <en/> Callback when dragging ends
   * @internal
   */
  protected onDragEnd() {
    this.enable = false;
    if (this.options.shadow) {
      if (!this.shadow) return;
      this.shadow.style.visibility = 'hidden';
      const { x = 0, y = 0 } = this.shadow.attributes;
      const [dx, dy] = subtract([+x, +y], this.shadowOrigin);
      this.moveElement(this.target, [dx, dy]);
    }
    this.showEdges();
    this.options.onFinish?.(this.target);
    const { batch, canvas } = this.context;
    batch!.endBatch();
    canvas.setCursor(this.options!.cursor?.grab || 'grab');
    this.isDragging = false;
    this.target = [];
  }

  /**
   * <zh/> 拖拽放下的回调
   *
   * <en/> Callback when dragging is released
   * @param event - <zh/> 拖拽事件对象 | <en/> drag event object
   */
  private onDrop = async (event: IElementDragEvent) => {
    if (this.options.dropEffect !== 'link') return;
    const { model, element } = this.context;
    const modifiedParentId = event.target.id;
    this.target.forEach((id) => {
      const originalParent = model.getParentData(id, COMBO_KEY);
      // 如果是在原父 combo 内部拖拽，需要刷新 combo 数据
      // If it is a drag and drop within the original parent combo, you need to refresh the combo data
      if (originalParent && idOf(originalParent) === modifiedParentId) {
        model.refreshComboData(modifiedParentId);
      }
      model.setParent(id, modifiedParentId, COMBO_KEY);
    });
    await element?.draw({ animation: true })?.finished;
  };

  private setCursor = (event: IPointerEvent) => {
    if (this.isDragging) return;
    const { type } = event;
    const { canvas } = this.context;
    const { cursor } = this.options;

    if (type === CommonEvent.POINTER_ENTER) canvas.setCursor(cursor?.grab || 'grab');
    else canvas.setCursor(cursor?.default || 'default');
  };

  /**
   * <zh/> 验证元素是否允许拖拽
   *
   * <en/> Verify if the element is allowed to be dragged
   * @param event - <zh/> 拖拽事件对象 | <en/> drag event object
   * @returns <zh/> 是否允许拖拽 | <en/> Whether to allow dragging
   * @internal
   */
  protected validate(event: IElementDragEvent) {
    if (this.destroyed) return false;
    const { enable } = this.options;
    if (isFunction(enable)) return enable(event);
    return !!enable;
  }

  /**
   * <zh/> 移动元素
   *
   * <en/> Move the element
   * @param ids - <zh/> 元素 id 集合 | <en/> element id collection
   * @param offset <zh/> 偏移量 | <en/> offset
   * @internal
   */
  protected async moveElement(ids: ID[], offset: Point) {
    const { graph, model } = this.context;
    const { dropEffect } = this.options;

    if (dropEffect === 'move') ids.forEach((id) => model.refreshComboData(id));
    graph.translateElementBy(Object.fromEntries(ids.map((id) => [id, offset])), false);
  }

  private moveShadow(offset: Point) {
    if (!this.shadow) return;
    const { x = 0, y = 0 } = this.shadow.attributes;
    const [dx, dy] = offset;
    this.shadow.attr({ x: +x + dx, y: +y + dy });
  }

  private createShadow(target: ID[]) {
    const shadowStyle = subStyleProps(this.options, 'shadow');

    const bbox = getCombinedBBox(target.map((id) => this.context.element!.getElement(id)!.getBounds()));
    const [x, y] = bbox.min;
    this.shadowOrigin = [x, y];
    const [width, height] = getBBoxSize(bbox);
    const positionStyle = { width, height, x, y };

    if (this.shadow) {
      this.shadow.attr({
        ...shadowStyle,
        ...positionStyle,
        visibility: 'visible',
      });
    } else {
      this.shadow = new Rect({
        style: {
          // @ts-ignore $layer is not in the type definition
          $layer: 'transient',
          ...shadowStyle,
          ...positionStyle,
          pointerEvents: 'none',
        },
      });
      this.context.canvas.appendChild(this.shadow);
    }
  }

  private showEdges() {
    if (this.options.shadow || this.hiddenEdges.length === 0) return;
    this.context.graph.showElement(this.hiddenEdges);
    this.hiddenEdges = [];
  }

  /**
   * Hide the edge
   * @internal
   */
  protected hideEdge() {
    const { hideEdge, shadow } = this.options;
    if (hideEdge === 'none' || shadow) return;
    const { graph } = this.context;
    if (hideEdge === 'all') this.hiddenEdges = graph.getEdgeData().map(idOf);
    else {
      this.hiddenEdges = Array.from(
        new Set(this.target.map((id) => graph.getRelatedEdgesData(id, hideEdge).map(idOf)).flat()),
      );
    }
    graph.hideElement(this.hiddenEdges);
  }

  private unbindEvents() {
    const { graph, canvas } = this.context;

    // @ts-expect-error internal property
    const $canvas: HTMLCanvasElement = canvas.getLayer().getContextService().$canvas;
    if ($canvas) {
      $canvas.removeEventListener('blur', this.onDragEnd);
      $canvas.removeEventListener('contextmenu', this.onDragEnd);
    }

    this.enableElements.forEach((type) => {
      graph.off(`${type}:${CommonEvent.DRAG_START}`, this.onDragStart);
      graph.off(`${type}:${CommonEvent.DRAG}`, this.onDrag);
      graph.off(`${type}:${CommonEvent.DRAG_END}`, this.onDragEnd);
      graph.off(`${type}:${CommonEvent.POINTER_ENTER}`, this.setCursor);
      graph.off(`${type}:${CommonEvent.POINTER_LEAVE}`, this.setCursor);
    });

    graph.off(`combo:${CommonEvent.DROP}`, this.onDrop);
    graph.off(`canvas:${CommonEvent.DROP}`, this.onDrop);
  }

  public destroy() {
    this.unbindEvents();
    this.shadow?.destroy();
    super.destroy();
  }
}

1	import type { BaseStyleProps, Cursor } from '@antv/g';
2	import { Rect } from '@antv/g';	288✔
3	import { isFunction } from '@antv/util';	288✔
4	import { COMBO_KEY, CanvasEvent, ComboEvent, CommonEvent } from '../constants';	288✔
5	import type { RuntimeContext } from '../runtime/types';
6	import type { EdgeDirection, ID, IElementDragEvent, IPointerEvent, Point, Prefix, State } from '../types';
7	import { getBBoxSize, getCombinedBBox } from '../utils/bbox';	288✔
8	import { idOf } from '../utils/id';	288✔
9	import { subStyleProps } from '../utils/prefix';	288✔
10	import { divide, subtract } from '../utils/vector';	288✔
11	import type { BaseBehaviorOptions } from './base-behavior';
12	import { BaseBehavior } from './base-behavior';	288✔
13
14	/**
15	* <zh/> 拖拽元素交互配置项
16	*
17	* <en/> Drag element behavior options
18	*/
19	export interface DragElementOptions extends BaseBehaviorOptions, Prefix<'shadow', BaseStyleProps> {
20	/**
21	* <zh/> 是否启用拖拽动画
22	*
23	* <en/> Whether to enable drag animation
24	* @defaultValue true
25	*/
26	animation?: boolean;
27	/**
28	* <zh/> 是否启用拖拽节点的功能，默认可以拖拽 node 和 combo
29	*
30	* <en/> Whether to enable the function of dragging the node，default can drag node and combo
31	* @defaultValue ['node', 'combo'].includes(event.targetType)
32	*/
33	enable?: boolean \| ((event: IElementDragEvent) => boolean);
34	/**
35	* <zh/> 拖拽操作效果
36	* - `'link'`: 将拖拽元素置入为目标元素的子元素
37	* - `'move'`: 移动元素并更新父元素尺寸
38	* - `'none'`: 仅更新拖拽目标位置，不做任何额外操作
39	*
40	* <en/> Drag operation effect
41	* - `'link'`: Place the drag element as a child element of the target element
42	* - `'move'`: Move the element and update the parent element size
43	* - `'none'`: Only update the drag target position, no additional operations
44	* @remarks
45	* <zh/> combo 元素可作为元素容器置入 node 或 combo 元素
46	*
47	* <en/> The combo element can be placed as an element container into the node or combo element
48	* @defaultValue 'move'
49	*/
50	dropEffect?: 'link' \| 'move' \| 'none';
51	/**
52	* <zh/> 节点选中的状态，启用多选时会基于该状态查找选中的节点
53	*
54	* <en/> The state name of the selected node, when multi-selection is enabled, the selected nodes will be found based on this state
55	* @defaultValue 'selected'
56	*/
57	state?: State;
58	/**
59	* <zh/> 拖拽时隐藏的边
60	* - `'none'`: 不隐藏
61	* - `'out'`: 隐藏以节点为源节点的边
62	* - `'in'`: 隐藏以节点为目标节点的边
63	* - `'both'`: 隐藏与节点相关的所有边
64	* - `'all'`: 隐藏图中所有边
65	*
66	* <en/> Edges hidden during dragging
67	* - `'none'`: do not hide
68	* - `'out'`: hide the edges with the node as the source node
69	* - `'in'`: hide the edges with the node as the target node
70	* - `'both'`: hide all edges related to the node
71	* - `'all'`: hide all edges in the graph
72	* @remarks
73	* <zh/> 使用幽灵节点时不会隐藏边
74	*
75	* <en/> Edges will not be hidden when using the drag shadow
76	* @defaultValue 'none'
77	*/
78	hideEdge?: 'none' \| 'all' \| EdgeDirection;
79	/**
80	* <zh/> 是否启用幽灵节点，即用一个图形代替节点跟随鼠标移动
81	*
82	* <en/> Whether to enable the drag shadow, that is, use a shape to replace the node to follow the mouse movement
83	*/
84	shadow?: boolean;
85	/**
86	* <zh/> 完成拖拽时的回调
87	*
88	* <en/> Callback when dragging is completed
89	*/
90	onFinish?: (ids: ID[]) => void;
91	/**
92	* <zh/> 指针样式
93	*
94	* <en/> Cursor style
95	*/
96	cursor?: {
97	/**
98	* <zh/> 默认指针样式
99	*
100	* <en/> Default cursor style
101	*/
102	default?: Cursor;
103	/**
104	* <zh/> 可抓取指针样式
105	*
106	* <en/> Cursor style that can be grabbed
107	*/
108	grab: Cursor;
109	/**
110	* <zh/> 抓取中指针样式
111	*
112	* <en/> Cursor style when grabbing
113	*/
114	grabbing: Cursor;
115	};
116	}
117
118	/**
119	* <zh/> 拖拽元素交互
120	*
121	* <en/> Drag element behavior
122	*/
123	export class DragElement extends BaseBehavior<DragElementOptions> {	578✔
124	static defaultOptions: Partial<DragElementOptions> = {	288✔
125	animation: true,
126	enable: (event) => ['node', 'combo'].includes(event.targetType),	122✔
127	dropEffect: 'move',
128	state: 'selected',
129	hideEdge: 'none',
130	shadow: false,
131	shadowZIndex: 100,
132	shadowFill: '#F3F9FF',
133	shadowFillOpacity: 0.5,
134	shadowStroke: '#1890FF',
135	shadowStrokeOpacity: 0.9,
136	shadowLineDash: [5, 5],
137	cursor: {
138	default: 'default',
139	grab: 'grab',
140	grabbing: 'grabbing',
141	},
142	};
143
144	protected enable: boolean = false;	128✔
145
146	private enableElements = ['node', 'combo'];	128✔
147
148	protected target: ID[] = [];	128✔
149
150	private shadow?: Rect;
151
152	private shadowOrigin: Point = [0, 0];	128✔
153
154	private hiddenEdges: ID[] = [];	128✔
155
156	private isDragging: boolean = false;	128✔
157
158	constructor(context: RuntimeContext, options: DragElementOptions) {
159	super(context, Object.assign({}, DragElement.defaultOptions, options));	128✔
160	this.onDragStart = this.onDragStart.bind(this);	128✔
161	this.onDrag = this.onDrag.bind(this);	128✔
162	this.onDragEnd = this.onDragEnd.bind(this);	128✔
163	this.onDrop = this.onDrop.bind(this);	128✔
164
165	this.bindEvents();	128✔
166	}
167	/**
168	* <zh/> 更新元素拖拽配置
169	*
170	* <en/> Update the element dragging configuration
171	* @param options - <zh/> 配置项 \| <en/> options
172	* @internal
173	*/
174	public update(options: Partial<DragElementOptions>): void {
175	this.unbindEvents();	18✔
176	super.update(options);	18✔
177	this.bindEvents();	18✔
178	}
179
180	private bindEvents() {
181	const { graph, canvas } = this.context;	146✔
182
183	// @ts-expect-error internal property
184	const $canvas: HTMLCanvasElement = canvas.getLayer().getContextService().$canvas;	146✔
185	if ($canvas) {	146!
186	$canvas.addEventListener('blur', this.onDragEnd);	×
187	$canvas.addEventListener('contextmenu', this.onDragEnd);	×
188	}
189
190	this.enableElements.forEach((type) => {	146✔
191	graph.on(`${type}:${CommonEvent.DRAG_START}`, this.onDragStart);	292✔
192	graph.on(`${type}:${CommonEvent.DRAG}`, this.onDrag);	292✔
193	graph.on(`${type}:${CommonEvent.DRAG_END}`, this.onDragEnd);	292✔
194	graph.on(`${type}:${CommonEvent.POINTER_ENTER}`, this.setCursor);	292✔
195	graph.on(`${type}:${CommonEvent.POINTER_LEAVE}`, this.setCursor);	292✔
196	});
197
198	if (['link'].includes(this.options.dropEffect)) {	146✔
199	graph.on(ComboEvent.DROP, this.onDrop);	2✔
200	graph.on(CanvasEvent.DROP, this.onDrop);	2✔
201	}
202	}
203
204	/**
205	* <zh/> 获取当前选中的节点 id 集合
206	*
207	* <en/> Get the id collection of the currently selected node
208	* @param currTarget - <zh/> 当前拖拽目标元素 id 集合 \| <en/> The id collection of the current drag target element
209	* @returns <zh/> 当前选中的节点 id 集合 \| <en/> The id collection of the currently selected node
210	* @internal
211	*/
212	protected getSelectedNodeIDs(currTarget: ID[]) {
213	return Array.from(	122✔
214	new Set(
215	this.context.graph
216	.getElementDataByState('node', this.options.state)
217	.map((node) => node.id)	×
218	.concat(currTarget),
219	),
220	);
221	}
222
223	/**
224	* Get the delta of the drag
225	* @param event - drag event object
226	* @returns delta
227	* @internal
228	*/
229	protected getDelta(event: IElementDragEvent) {
230	const zoom = this.context.graph.getZoom();	122✔
231	return divide([event.dx, event.dy], zoom);	122✔
232	}
233
234	/**
235	* <zh/> 拖拽开始时的回调
236	*
237	* <en/> Callback when dragging starts
238	* @param event - <zh/> 拖拽事件对象 \| <en/> drag event object
239	* @internal
240	*/
241	protected onDragStart(event: IElementDragEvent) {
242	this.enable = this.validate(event);	122✔
243	if (!this.enable) return;	122!
244
245	const { batch, canvas } = this.context;	122✔
246	canvas.setCursor(this.options!.cursor?.grabbing \|\| 'grabbing');	122!
247	this.isDragging = true;	122✔
248	batch!.startBatch();	122✔
249	this.target = this.getSelectedNodeIDs([event.target.id]);	122✔
250	this.hideEdge();	122✔
251	this.context.graph.frontElement(this.target);	122✔
252	if (this.options.shadow) this.createShadow(this.target);	122✔
253	}
254
255	/**
256	* <zh/> 拖拽过程中的回调
257	*
258	* <en/> Callback when dragging
259	* @param event - <zh/> 拖拽事件对象 \| <en/> drag event object
260	* @internal
261	*/
262	protected onDrag(event: IElementDragEvent) {
263	if (!this.enable) return;	122!
264	const delta = this.getDelta(event);	122✔
265
266	if (this.options.shadow) this.moveShadow(delta);	122✔
267	else this.moveElement(this.target, delta);	116✔
268	}
269
270	/**
271	* <zh/> 元素拖拽结束的回调
272	*
273	* <en/> Callback when dragging ends
274	* @internal
275	*/
276	protected onDragEnd() {
277	this.enable = false;	108✔
278	if (this.options.shadow) {	108✔
279	if (!this.shadow) return;	6!
280	this.shadow.style.visibility = 'hidden';	6✔
281	const { x = 0, y = 0 } = this.shadow.attributes;	6!
282	const [dx, dy] = subtract([+x, +y], this.shadowOrigin);	6✔
283	this.moveElement(this.target, [dx, dy]);	6✔
284	}
285	this.showEdges();	108✔
286	this.options.onFinish?.(this.target);	108✔
287	const { batch, canvas } = this.context;	108✔
288	batch!.endBatch();	108✔
289	canvas.setCursor(this.options!.cursor?.grab \|\| 'grab');	108!
290	this.isDragging = false;	108✔
291	this.target = [];	108✔
292	}
293
294	/**
295	* <zh/> 拖拽放下的回调
296	*
297	* <en/> Callback when dragging is released
298	* @param event - <zh/> 拖拽事件对象 \| <en/> drag event object
299	*/
300	private onDrop = async (event: IElementDragEvent) => {	128✔
301	if (this.options.dropEffect !== 'link') return;	14!
302	const { model, element } = this.context;	14✔
303	const modifiedParentId = event.target.id;	14✔
304	this.target.forEach((id) => {	14✔
305	const originalParent = model.getParentData(id, COMBO_KEY);	14✔
306	// 如果是在原父 combo 内部拖拽，需要刷新 combo 数据
307	// If it is a drag and drop within the original parent combo, you need to refresh the combo data
308	if (originalParent && idOf(originalParent) === modifiedParentId) {	14✔
309	model.refreshComboData(modifiedParentId);	4✔
310	}
311	model.setParent(id, modifiedParentId, COMBO_KEY);	14✔
312	});
313	await element?.draw({ animation: true })?.finished;	14✔
314	};
315
316	private setCursor = (event: IPointerEvent) => {	128✔
317	if (this.isDragging) return;	6!
318	const { type } = event;	6✔
319	const { canvas } = this.context;	6✔
320	const { cursor } = this.options;	6✔
321
322	if (type === CommonEvent.POINTER_ENTER) canvas.setCursor(cursor?.grab \|\| 'grab');	6!
323	else canvas.setCursor(cursor?.default \|\| 'default');	4!
324	};
325
326	/**
327	* <zh/> 验证元素是否允许拖拽
328	*
329	* <en/> Verify if the element is allowed to be dragged
330	* @param event - <zh/> 拖拽事件对象 \| <en/> drag event object
331	* @returns <zh/> 是否允许拖拽 \| <en/> Whether to allow dragging
332	* @internal
333	*/
334	protected validate(event: IElementDragEvent) {
335	if (this.destroyed) return false;	122!
336	const { enable } = this.options;	122✔
337	if (isFunction(enable)) return enable(event);	122✔
338	return !!enable;	×
339	}
340
341	/**
342	* <zh/> 移动元素
343	*
344	* <en/> Move the element
345	* @param ids - <zh/> 元素 id 集合 \| <en/> element id collection
346	* @param offset <zh/> 偏移量 \| <en/> offset
347	* @internal
348	*/
349	protected async moveElement(ids: ID[], offset: Point) {
350	const { graph, model } = this.context;	122✔
351	const { dropEffect } = this.options;	122✔
352
353	if (dropEffect === 'move') ids.forEach((id) => model.refreshComboData(id));	122✔
354	graph.translateElementBy(Object.fromEntries(ids.map((id) => [id, offset])), false);	122✔
355	}
356
357	private moveShadow(offset: Point) {
358	if (!this.shadow) return;	6!
359	const { x = 0, y = 0 } = this.shadow.attributes;	6!
360	const [dx, dy] = offset;	6✔
361	this.shadow.attr({ x: +x + dx, y: +y + dy });	6✔
362	}
363
364	private createShadow(target: ID[]) {
365	const shadowStyle = subStyleProps(this.options, 'shadow');	6✔
366
367	const bbox = getCombinedBBox(target.map((id) => this.context.element!.getElement(id)!.getBounds()));	6✔
368	const [x, y] = bbox.min;	6✔
369	this.shadowOrigin = [x, y];	6✔
370	const [width, height] = getBBoxSize(bbox);	6✔
371	const positionStyle = { width, height, x, y };	6✔
372
373	if (this.shadow) {	6✔
374	this.shadow.attr({	4✔
375	...shadowStyle,
376	...positionStyle,
377	visibility: 'visible',
378	});
379	} else {
380	this.shadow = new Rect({	2✔
381	style: {
382	// @ts-ignore $layer is not in the type definition
383	$layer: 'transient',
384	...shadowStyle,
385	...positionStyle,
386	pointerEvents: 'none',
387	},
388	});
389	this.context.canvas.appendChild(this.shadow);	2✔
390	}
391	}
392
393	private showEdges() {
394	if (this.options.shadow \|\| this.hiddenEdges.length === 0) return;	108✔
395	this.context.graph.showElement(this.hiddenEdges);	6✔
396	this.hiddenEdges = [];	6✔
397	}
398
399	/**
400	* Hide the edge
401	* @internal
402	*/
403	protected hideEdge() {
404	const { hideEdge, shadow } = this.options;	122✔
405	if (hideEdge === 'none' \|\| shadow) return;	122✔
406	const { graph } = this.context;	6✔
407	if (hideEdge === 'all') this.hiddenEdges = graph.getEdgeData().map(idOf);	6!
408	else {
409	this.hiddenEdges = Array.from(	6✔
410	new Set(this.target.map((id) => graph.getRelatedEdgesData(id, hideEdge).map(idOf)).flat()),	6✔
411	);
412	}
413	graph.hideElement(this.hiddenEdges);	6✔
414	}
415
416	private unbindEvents() {
417	const { graph, canvas } = this.context;	130✔
418
419	// @ts-expect-error internal property
420	const $canvas: HTMLCanvasElement = canvas.getLayer().getContextService().$canvas;	130✔
421	if ($canvas) {	130!
422	$canvas.removeEventListener('blur', this.onDragEnd);	×
UNCOV 423	$canvas.removeEventListener('contextmenu', this.onDragEnd);	×
424	}
425
426	this.enableElements.forEach((type) => {	130✔
427	graph.off(`${type}:${CommonEvent.DRAG_START}`, this.onDragStart);	260✔
428	graph.off(`${type}:${CommonEvent.DRAG}`, this.onDrag);	260✔
429	graph.off(`${type}:${CommonEvent.DRAG_END}`, this.onDragEnd);	260✔
430	graph.off(`${type}:${CommonEvent.POINTER_ENTER}`, this.setCursor);	260✔
431	graph.off(`${type}:${CommonEvent.POINTER_LEAVE}`, this.setCursor);	260✔
432	});
433
434	graph.off(`combo:${CommonEvent.DROP}`, this.onDrop);	130✔
435	graph.off(`canvas:${CommonEvent.DROP}`, this.onDrop);	130✔
436	}
437
438	public destroy() {
439	this.unbindEvents();	112✔
440	this.shadow?.destroy();	112✔
441	super.destroy();	112✔
442	}
443	}

antvis / G6 / 10860775681

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