11327868527

Committed 14 Oct 2024 12:47PM UTC coverage: 91.475% (-0.05%) from 91.522%

Build # 11327868527

Build Type

Pull #6401

github

Committed by

yvonneyx

Commit Message

refactor: migrate syncToLabelSize

Pull Request Pull Request #6401: refactor: refactor fix-element-size behavior and add information density example

Run Details

3401 of 4181 branches covered (81.34%)

Branch coverage included in aggregate %.

121 of 127 new or added lines in 4 files covered. (95.28%)

4 existing lines in 1 file now uncovered.

7737 of 7995 relevant lines covered (96.77%)

15144.35 hits per line

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

86.73

/packages/g6/src/behaviors/fix-element-size.ts

import type { DisplayObject } from '@antv/g';
import { isEmpty, isFunction, isNumber } from '@antv/util';
import { GraphEvent } from '../constants';
import type { RuntimeContext } from '../runtime/types';
import type { EdgeData, NodeData } from '../spec';
import type { Combo, Edge, Element, ID, IViewportEvent, Node, NodeLikeData, State } from '../types';
import { idOf } from '../utils/id';
import { getDescendantShapes } from '../utils/shape';
import type { BaseBehaviorOptions } from './base-behavior';
import { BaseBehavior } from './base-behavior';

export type FixShapeConfig = {
  /**
   * <zh/> 指定要固定大小的图形，可以是图形的类名字，或者是一个函数，该函数接收构成元素的所有图形并返回目标图形
   *
   * <en/> Specifies the shape to be fixed in size. This can be a class name string of the shape, or a function that takes all shapes composing the element and returns the target shape
   */
  shape: string | ((shapes: DisplayObject[]) => DisplayObject);
  /**
   * <zh/> 指定要固定大小的图形属性字段。如果未指定，则默认固定整个图形的大小
   *
   * <en/> Specifies the fields of the shape to be fixed in size. If not specified, the entire shape's size will be fixed by default
   */
  fields?: string[];
};

/**
 * <zh/> 固定元素大小交互配置项
 *
 * <en/> Fix element size behavior options
 */
export interface FixElementSizeOptions extends BaseBehaviorOptions {
  /**
   * <zh/> 是否启用固定元素大小交互。默认在缩小画布时启用
   *
   * <en/> Whether to enable the fix element size behavior. Enabled by default when zooming out
   * @remarks
   * <zh/> 默认在缩小画布时启用，设置 `enable: (event) => event.data.scale < 1`；如果希望在放大画布时启用，设置 `enable: (event) => event.data.scale > 1`；如果希望在放大缩小画布时都启用，设置 `enable: true`
   *
   * <en/> Enabled by default when zooming out, set `enable: (event) => event.data.scale < 1`; If you want to enable it when zooming in, set `enable: (event) => event.data.scale > 1`; If you want to enable it when zooming in and out, set `enable: true`
   * @defaultValue (event) => Boolean(event.data.scale < 1)
   */
  enable?: boolean | ((event: IViewportEvent) => boolean);
  /**
   * <zh/> 指定要固定大小的元素状态
   *
   * <en/> Specify the state of elements to be fixed in size
   * @defaultValue `'selected'`
   */
  state?: State;
  /**
   * <zh/> 节点过滤器，用于过滤哪些节点在缩放过程中保持固定大小
   *
   * <en/> Node filter for filtering which nodes remain fixed in size during zooming
   * @defaultValue () => true
   */
  nodeFilter?: (datum: NodeData) => boolean;
  /**
   * <zh/> 边过滤器，用于过滤哪些边在缩放过程中保持固定大小
   *
   * <en/> Edge filter for filtering which edges remain fixed in size during zooming
   * @defaultValue () => true
   */
  edgeFilter?: (datum: EdgeData) => boolean;
  /**
   * <zh/> Combo 过滤器，用于过滤哪些 Combo 在缩放过程中保持固定大小
   *
   * <en/> Combo filter for filtering which combos remain fixed in size during zooming
   * @defaultValue () => true
   */
  comboFilter?: (datum: NodeData) => boolean;
  /**
   * <zh/> 节点配置项，用于定义哪些属性在视觉上保持固定大小。若未指定（即为 undefined），则整个节点将被固定
   *
   * <en/> Node configuration for defining which node attributes should remain fixed in size visually. If not specified (i.e., undefined), the entire node will be fixed in size.
   * @example
   * <zh/> 如果在缩放过程中希望固定节点主图形的 lineWidth，可以这样配置：
   *
   * <en/> If you want to fix the lineWidth of the key shape of the node during zooming, you can configure it like this:
   * ```ts
   * { node: [{ shape: 'key', fields: ['lineWidth'] }] }
   *```
   * <zh/> 如果在缩放过程中想保持元素标签大小不变，可以这样配置：
   *
   * <en/> If you want to keep the label size of the element unchanged during zooming, you can configure it like this:
   * ```ts
   *  { shape: 'label' }
   * ```
   */
  node?: FixShapeConfig | FixShapeConfig[];
  /**
   * <zh/> 边配置项，用于定义哪些属性在视觉上保持固定大小。默认固定 lineWidth、labelFontSize 属性
   *
   * <en/> Edge configuration for defining which edge attributes should remain fixed in size visually. By default, the lineWidth and labelFontSize attributes are fixed
   * @defaultValue [{ shape: 'key', fields: ['lineWidth'] }, { shape: 'halo', fields: ['lineWidth'] }, { shape: 'label' }]
   */
  edge?: FixShapeConfig | FixShapeConfig[];
  /**
   * <zh/> Combo 配置项，用于定义哪些属性在视觉上保持固定大小。默认整个 Combo 将被固定
   *
   * <en/> Combo configuration for defining which combo attributes should remain fixed in size visually. By default, the entire combo will be fixed
   */
  combo?: FixShapeConfig | FixShapeConfig[];
  /**
   * <zh/> 元素重绘时是否还原样式
   *
   * <en/> Whether to reset styles when elements are redrawn
   * @defaultValue false
   */
  reset?: boolean;
}

/**
 * <zh/> 缩放画布过程中固定元素大小
 *
 * <en/> Fix element size while zooming
 */
export class FixElementSize extends BaseBehavior<FixElementSizeOptions> {
  static defaultOptions: Partial<FixElementSizeOptions> = {
    enable: (event: IViewportEvent) => event.data.scale! < 1,
    nodeFilter: () => true,
    edgeFilter: () => true,
    comboFilter: () => true,
    edge: [{ shape: 'key', fields: ['lineWidth'] }, { shape: 'halo', fields: ['lineWidth'] }, { shape: 'label' }],
    reset: false,
  };

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

  private isZoomEvent = (event: IViewportEvent) => Boolean(event.data && 'scale' in event.data);

  private relatedEdgeToUpdate: Set<ID> = new Set();

  private zoom = this.context.graph.getZoom();

  private fixElementSize = async (event: IViewportEvent) => {
    if (!this.validate(event)) return;

    const { graph } = this.context;
    const { state, nodeFilter, edgeFilter, comboFilter } = this.options;

    const nodeData = (state ? graph.getElementDataByState('node', state) : graph.getNodeData()).filter(nodeFilter);
    const edgeData = (state ? graph.getElementDataByState('edge', state) : graph.getEdgeData()).filter(edgeFilter);
    const comboData = (state ? graph.getElementDataByState('combo', state) : graph.getComboData()).filter(comboFilter);

    // 设置阈值防止过大或过小时抖动 | Set the threshold to prevent jitter when too large or too small
    const currentScale = this.isZoomEvent(event)
      ? (this.zoom = Math.max(0.01, Math.min(event.data.scale!, 10)))
      : this.zoom;

    const nodeLikeData = [...nodeData, ...comboData];
    if (nodeLikeData.length > 0) {
      nodeLikeData.forEach((datum) => this.fixNodeLike(datum, currentScale));
    }

    this.updateRelatedEdges();

    if (edgeData.length > 0) {
      edgeData.forEach((datum) => this.fixEdge(datum, currentScale));
    }
  };

  private cachedStyles: Map<ID, { shape: DisplayObject; [field: string]: any }[]> = new Map();

  private getOriginalFieldValue = (id: ID, shape: DisplayObject, field: string) => {
    const shapesStyle = this.cachedStyles.get(id) || [];
    const shapeStyle = shapesStyle.find((style) => style.shape === shape)?.style || {};
    if (!(field in shapeStyle)) {
      shapeStyle[field] = shape.attributes[field];
      this.cachedStyles.set(id, [
        ...shapesStyle.filter((style) => style.shape !== shape),
        { shape, style: shapeStyle },
      ]);
    }
    return shapeStyle[field];
  };

  private scaleEntireElement = (id: ID, el: DisplayObject, currentScale: number) => {
    el.setLocalScale(1 / currentScale);
    const shapesStyle = this.cachedStyles.get(id) || [];
    shapesStyle.push({ shape: el });
    this.cachedStyles.set(id, shapesStyle);
  };

  private scaleSpecificShapes = (el: Element, currentScale: number, config: FixShapeConfig | FixShapeConfig[]) => {
    const descendantShapes = getDescendantShapes(el);
    const configs = Array.isArray(config) ? config : [config];

    configs.forEach((config: FixShapeConfig) => {
      const { shape: shapeFilter, fields } = config;
      const shape = typeof shapeFilter === 'function' ? shapeFilter(descendantShapes) : el.getShape(shapeFilter);

      if (!shape) return;
      if (!fields) {
        this.scaleEntireElement(el.id, shape, currentScale);
        return;
      }

      fields.forEach((field) => {
        const oriFieldValue = this.getOriginalFieldValue(el.id, shape, field);
        if (!isNumber(oriFieldValue)) return;
        shape.style[field] = oriFieldValue / currentScale;
      });
    });
  };

  private skipIfExceedViewport = (el: Element) => {
    const { viewport } = this.context;
    return !viewport?.isInViewport(el.getRenderBounds(), false, 30);
  };

  private fixNodeLike = (datum: NodeLikeData, currentScale: number) => {
    const id = idOf(datum);
    const { element, model } = this.context;
    const el = element!.getElement(id) as Node | Combo;

    if (this.skipIfExceedViewport(el)) return;

    const edges = model.getRelatedEdgesData(id);
    edges.forEach((edge) => this.relatedEdgeToUpdate.add(idOf(edge)));

    const config = this.options[(el as any).type];
    if (!config) {
      this.scaleEntireElement(id, el, currentScale);
      return;
    }
    this.scaleSpecificShapes(el, currentScale, config);
  };

  private fixEdge = (datum: EdgeData, currentScale: number) => {
    const id = idOf(datum);
    const el = this.context.element!.getElement(id) as Edge;

    if (this.skipIfExceedViewport(el)) return;

    const config = this.options.edge;
    if (!config) {
      el.style.transformOrigin = 'center';
      this.scaleEntireElement(id, el, currentScale);
      return;
    }
    this.scaleSpecificShapes(el, currentScale, config);
  };

  private updateRelatedEdges = () => {
    const { element } = this.context;
    if (this.relatedEdgeToUpdate.size > 0) {
      this.relatedEdgeToUpdate.forEach((id) => {
        const edge = element!.getElement(id) as Edge;
        edge?.update({});
      });
    }
    this.relatedEdgeToUpdate.clear();
  };

  private restoreCachedStyles() {
    if (this.cachedStyles.size > 0) {
      this.cachedStyles.forEach((shapesStyle) => {
        shapesStyle.forEach(({ shape, style }) => {
          if (isEmpty(style)) {
            shape.setLocalScale(1);
          } else {
            if (this.options.state) return;
            Object.entries(style).forEach(([field, value]) => (shape.style[field] = value));
          }
        });
      });
      const { graph, element } = this.context;
      const nodeIds = Object.keys(Object.fromEntries(this.cachedStyles)).filter(
        (id) => id && graph.getElementType(id) === 'node',
      );
      if (nodeIds.length > 0) {
        const edgeIds = new Set<ID>();
        nodeIds.forEach((id) => {
          graph.getRelatedEdgesData(id).forEach((edge) => edgeIds.add(idOf(edge)));
        });
        edgeIds.forEach((id) => {
          const edge = element?.getElement(id) as Edge;
          edge?.update({});
        });
      }
    }
    // this.cachedStyles.clear();
  }

  private resetTransform = async () => {
    if (this.options.reset) {
      this.restoreCachedStyles();
    } else {
      this.fixElementSize({ data: { scale: this.zoom } } as IViewportEvent);
    }
  };

  private bindEvents() {
    const { graph } = this.context;
    graph.on(GraphEvent.AFTER_DRAW, this.resetTransform);
    graph.on(GraphEvent.AFTER_TRANSFORM, this.fixElementSize);
  }

  private unbindEvents() {
    const { graph } = this.context;
    graph.off(GraphEvent.AFTER_DRAW, this.resetTransform);
    graph.off(GraphEvent.AFTER_TRANSFORM, this.fixElementSize);
  }

  private validate(event: IViewportEvent) {
    if (this.destroyed) return false;
    const { enable } = this.options;
    if (isFunction(enable)) return enable(event);
    return !!enable;
  }

  public destroy(): void {
    this.unbindEvents();
    super.destroy();
  }
}

1	import type { DisplayObject } from '@antv/g';
2	import { isEmpty, isFunction, isNumber } from '@antv/util';	294✔
3	import { GraphEvent } from '../constants';	294✔
4	import type { RuntimeContext } from '../runtime/types';
5	import type { EdgeData, NodeData } from '../spec';
6	import type { Combo, Edge, Element, ID, IViewportEvent, Node, NodeLikeData, State } from '../types';
7	import { idOf } from '../utils/id';	294✔
8	import { getDescendantShapes } from '../utils/shape';	294✔
9	import type { BaseBehaviorOptions } from './base-behavior';
10	import { BaseBehavior } from './base-behavior';	294✔
11
12	export type FixShapeConfig = {
13	/**
14	* <zh/> 指定要固定大小的图形，可以是图形的类名字，或者是一个函数，该函数接收构成元素的所有图形并返回目标图形
15	*
16	* <en/> Specifies the shape to be fixed in size. This can be a class name string of the shape, or a function that takes all shapes composing the element and returns the target shape
17	*/
18	shape: string \| ((shapes: DisplayObject[]) => DisplayObject);
19	/**
20	* <zh/> 指定要固定大小的图形属性字段。如果未指定，则默认固定整个图形的大小
21	*
22	* <en/> Specifies the fields of the shape to be fixed in size. If not specified, the entire shape's size will be fixed by default
23	*/
24	fields?: string[];
25	};
26
27	/**
28	* <zh/> 固定元素大小交互配置项
29	*
30	* <en/> Fix element size behavior options
31	*/
32	export interface FixElementSizeOptions extends BaseBehaviorOptions {
33	/**
34	* <zh/> 是否启用固定元素大小交互。默认在缩小画布时启用
35	*
36	* <en/> Whether to enable the fix element size behavior. Enabled by default when zooming out
37	* @remarks
38	* <zh/> 默认在缩小画布时启用，设置 `enable: (event) => event.data.scale < 1`；如果希望在放大画布时启用，设置 `enable: (event) => event.data.scale > 1`；如果希望在放大缩小画布时都启用，设置 `enable: true`
39	*
40	* <en/> Enabled by default when zooming out, set `enable: (event) => event.data.scale < 1`; If you want to enable it when zooming in, set `enable: (event) => event.data.scale > 1`; If you want to enable it when zooming in and out, set `enable: true`
41	* @defaultValue (event) => Boolean(event.data.scale < 1)
42	*/
43	enable?: boolean \| ((event: IViewportEvent) => boolean);
44	/**
45	* <zh/> 指定要固定大小的元素状态
46	*
47	* <en/> Specify the state of elements to be fixed in size
48	* @defaultValue `'selected'`
49	*/
50	state?: State;
51	/**
52	* <zh/> 节点过滤器，用于过滤哪些节点在缩放过程中保持固定大小
53	*
54	* <en/> Node filter for filtering which nodes remain fixed in size during zooming
55	* @defaultValue () => true
56	*/
57	nodeFilter?: (datum: NodeData) => boolean;
58	/**
59	* <zh/> 边过滤器，用于过滤哪些边在缩放过程中保持固定大小
60	*
61	* <en/> Edge filter for filtering which edges remain fixed in size during zooming
62	* @defaultValue () => true
63	*/
64	edgeFilter?: (datum: EdgeData) => boolean;
65	/**
66	* <zh/> Combo 过滤器，用于过滤哪些 Combo 在缩放过程中保持固定大小
67	*
68	* <en/> Combo filter for filtering which combos remain fixed in size during zooming
69	* @defaultValue () => true
70	*/
71	comboFilter?: (datum: NodeData) => boolean;
72	/**
73	* <zh/> 节点配置项，用于定义哪些属性在视觉上保持固定大小。若未指定（即为 undefined），则整个节点将被固定
74	*
75	* <en/> Node configuration for defining which node attributes should remain fixed in size visually. If not specified (i.e., undefined), the entire node will be fixed in size.
76	* @example
77	* <zh/> 如果在缩放过程中希望固定节点主图形的 lineWidth，可以这样配置：
78	*
79	* <en/> If you want to fix the lineWidth of the key shape of the node during zooming, you can configure it like this:
80	* ```ts
81	* { node: [{ shape: 'key', fields: ['lineWidth'] }] }
82	*```
83	* <zh/> 如果在缩放过程中想保持元素标签大小不变，可以这样配置：
84	*
85	* <en/> If you want to keep the label size of the element unchanged during zooming, you can configure it like this:
86	* ```ts
87	* { shape: 'label' }
88	* ```
89	*/
90	node?: FixShapeConfig \| FixShapeConfig[];
91	/**
92	* <zh/> 边配置项，用于定义哪些属性在视觉上保持固定大小。默认固定 lineWidth、labelFontSize 属性
93	*
94	* <en/> Edge configuration for defining which edge attributes should remain fixed in size visually. By default, the lineWidth and labelFontSize attributes are fixed
95	* @defaultValue [{ shape: 'key', fields: ['lineWidth'] }, { shape: 'halo', fields: ['lineWidth'] }, { shape: 'label' }]
96	*/
97	edge?: FixShapeConfig \| FixShapeConfig[];
98	/**
99	* <zh/> Combo 配置项，用于定义哪些属性在视觉上保持固定大小。默认整个 Combo 将被固定
100	*
101	* <en/> Combo configuration for defining which combo attributes should remain fixed in size visually. By default, the entire combo will be fixed
102	*/
103	combo?: FixShapeConfig \| FixShapeConfig[];
104	/**
105	* <zh/> 元素重绘时是否还原样式
106	*
107	* <en/> Whether to reset styles when elements are redrawn
108	* @defaultValue false
109	*/
110	reset?: boolean;
111	}
112
113	/**
114	* <zh/> 缩放画布过程中固定元素大小
115	*
116	* <en/> Fix element size while zooming
117	*/
118	export class FixElementSize extends BaseBehavior<FixElementSizeOptions> {	296✔
119	static defaultOptions: Partial<FixElementSizeOptions> = {	294✔
120	enable: (event: IViewportEvent) => event.data.scale! < 1,	16✔
121	nodeFilter: () => true,	16✔
122	edgeFilter: () => true,	8✔
NEW 123	comboFilter: () => true,	×
124	edge: [{ shape: 'key', fields: ['lineWidth'] }, { shape: 'halo', fields: ['lineWidth'] }, { shape: 'label' }],
125	reset: false,
126	};
127
128	constructor(context: RuntimeContext, options: FixElementSizeOptions) {
129	super(context, Object.assign({}, FixElementSize.defaultOptions, options));	2✔
130	this.bindEvents();	2✔
131	}
132
133	private isZoomEvent = (event: IViewportEvent) => Boolean(event.data && 'scale' in event.data);	8✔
134
135	private relatedEdgeToUpdate: Set<ID> = new Set();	2✔
136
137	private zoom = this.context.graph.getZoom();	2✔
138
139	private fixElementSize = async (event: IViewportEvent) => {	2✔
140	if (!this.validate(event)) return;	16✔
141
142	const { graph } = this.context;	8✔
143	const { state, nodeFilter, edgeFilter, comboFilter } = this.options;	8✔
144
145	const nodeData = (state ? graph.getElementDataByState('node', state) : graph.getNodeData()).filter(nodeFilter);	8!
146	const edgeData = (state ? graph.getElementDataByState('edge', state) : graph.getEdgeData()).filter(edgeFilter);	8!
147	const comboData = (state ? graph.getElementDataByState('combo', state) : graph.getComboData()).filter(comboFilter);	8!
148
149	// 设置阈值防止过大或过小时抖动 \| Set the threshold to prevent jitter when too large or too small
150	const currentScale = this.isZoomEvent(event)	8!
151	? (this.zoom = Math.max(0.01, Math.min(event.data.scale!, 10)))
152	: this.zoom;
153
154	const nodeLikeData = [...nodeData, ...comboData];	8✔
155	if (nodeLikeData.length > 0) {	8✔
156	nodeLikeData.forEach((datum) => this.fixNodeLike(datum, currentScale));	16✔
157	}
158
159	this.updateRelatedEdges();	8✔
160
161	if (edgeData.length > 0) {	8✔
162	edgeData.forEach((datum) => this.fixEdge(datum, currentScale));	8✔
163	}
164	};
165
166	private cachedStyles: Map<ID, { shape: DisplayObject; [field: string]: any }[]> = new Map();	2✔
167
168	private getOriginalFieldValue = (id: ID, shape: DisplayObject, field: string) => {	2✔
169	const shapesStyle = this.cachedStyles.get(id) \|\| [];	16✔
170	const shapeStyle = shapesStyle.find((style) => style.shape === shape)?.style \|\| {};	18✔
171	if (!(field in shapeStyle)) {	16✔
172	shapeStyle[field] = shape.attributes[field];	8✔
173	this.cachedStyles.set(id, [	8✔
174	...shapesStyle.filter((style) => style.shape !== shape),	6✔
175	{ shape, style: shapeStyle },
176	]);
177	}
178	return shapeStyle[field];	16✔
179	};
180
181	private scaleEntireElement = (id: ID, el: DisplayObject, currentScale: number) => {	2✔
182	el.setLocalScale(1 / currentScale);	18✔
183	const shapesStyle = this.cachedStyles.get(id) \|\| [];	18✔
184	shapesStyle.push({ shape: el });	18✔
185	this.cachedStyles.set(id, shapesStyle);	18✔
186	};
187
188	private scaleSpecificShapes = (el: Element, currentScale: number, config: FixShapeConfig \| FixShapeConfig[]) => {	2✔
189	const descendantShapes = getDescendantShapes(el);	20✔
190	const configs = Array.isArray(config) ? config : [config];	20!
191
192	configs.forEach((config: FixShapeConfig) => {	20✔
193	const { shape: shapeFilter, fields } = config;	30✔
194	const shape = typeof shapeFilter === 'function' ? shapeFilter(descendantShapes) : el.getShape(shapeFilter);	30!
195
196	if (!shape) return;	30!
197	if (!fields) {	30✔
198	this.scaleEntireElement(el.id, shape, currentScale);	14✔
199	return;	14✔
200	}
201
202	fields.forEach((field) => {	16✔
203	const oriFieldValue = this.getOriginalFieldValue(el.id, shape, field);	16✔
204	if (!isNumber(oriFieldValue)) return;	16!
205	shape.style[field] = oriFieldValue / currentScale;	16✔
206	});
207	});
208	};
209
210	private skipIfExceedViewport = (el: Element) => {	2✔
211	const { viewport } = this.context;	24✔
212	return !viewport?.isInViewport(el.getRenderBounds(), false, 30);	24✔
213	};
214
215	private fixNodeLike = (datum: NodeLikeData, currentScale: number) => {	2✔
216	const id = idOf(datum);	16✔
217	const { element, model } = this.context;	16✔
218	const el = element!.getElement(id) as Node \| Combo;	16✔
219
220	if (this.skipIfExceedViewport(el)) return;	16!
221
222	const edges = model.getRelatedEdgesData(id);	16✔
223	edges.forEach((edge) => this.relatedEdgeToUpdate.add(idOf(edge)));	64✔
224
225	const config = this.options[(el as any).type];	16✔
226	if (!config) {	16✔
227	this.scaleEntireElement(id, el, currentScale);	4✔
228	return;	4✔
229	}
230	this.scaleSpecificShapes(el, currentScale, config);	12✔
231	};
232
233	private fixEdge = (datum: EdgeData, currentScale: number) => {	2✔
234	const id = idOf(datum);	8✔
235	const el = this.context.element!.getElement(id) as Edge;	8✔
236
237	if (this.skipIfExceedViewport(el)) return;	8!
238
239	const config = this.options.edge;	8✔
240	if (!config) {	8!
NEW 241	el.style.transformOrigin = 'center';	×
NEW 242	this.scaleEntireElement(id, el, currentScale);	×
NEW 243	return;	×
244	}
245	this.scaleSpecificShapes(el, currentScale, config);	8✔
246	};
247
248	private updateRelatedEdges = () => {	2✔
249	const { element } = this.context;	8✔
250	if (this.relatedEdgeToUpdate.size > 0) {	8✔
251	this.relatedEdgeToUpdate.forEach((id) => {	8✔
252	const edge = element!.getElement(id) as Edge;	56✔
253	edge?.update({});	56✔
254	});
255	}
256	this.relatedEdgeToUpdate.clear();	8✔
257	};
258
259	private restoreCachedStyles() {
260	if (this.cachedStyles.size > 0) {	28✔
261	this.cachedStyles.forEach((shapesStyle) => {	26✔
262	shapesStyle.forEach(({ shape, style }) => {	78✔
263	if (isEmpty(style)) {	202✔
264	shape.setLocalScale(1);	114✔
265	} else {
266	if (this.options.state) return;	88✔
NEW 267	Object.entries(style).forEach(([field, value]) => (shape.style[field] = value));	×
268	}
269	});
270	});
271	const { graph, element } = this.context;	26✔
272	const nodeIds = Object.keys(Object.fromEntries(this.cachedStyles)).filter(	26✔
273	(id) => id && graph.getElementType(id) === 'node',	78✔
274	);
275	if (nodeIds.length > 0) {	26✔
276	const edgeIds = new Set<ID>();	26✔
277	nodeIds.forEach((id) => {	26✔
278	graph.getRelatedEdgesData(id).forEach((edge) => edgeIds.add(idOf(edge)));	208✔
279	});
280	edgeIds.forEach((id) => {	26✔
281	const edge = element?.getElement(id) as Edge;	182✔
282	edge?.update({});	182✔
283	});
284	}
285	}
286	// this.cachedStyles.clear();
287	}
288
289	private resetTransform = async () => {	2✔
290	if (this.options.reset) {	28!
291	this.restoreCachedStyles();	28✔
292	} else {
NEW 293	this.fixElementSize({ data: { scale: this.zoom } } as IViewportEvent);	×
294	}
295	};
296
297	private bindEvents() {
298	const { graph } = this.context;	2✔
299	graph.on(GraphEvent.AFTER_DRAW, this.resetTransform);	2✔
300	graph.on(GraphEvent.AFTER_TRANSFORM, this.fixElementSize);	2✔
301	}
302
303	private unbindEvents() {
304	const { graph } = this.context;	2✔
305	graph.off(GraphEvent.AFTER_DRAW, this.resetTransform);	2✔
306	graph.off(GraphEvent.AFTER_TRANSFORM, this.fixElementSize);	2✔
307	}
308
309	private validate(event: IViewportEvent) {
310	if (this.destroyed) return false;	16!
311	const { enable } = this.options;	16✔
312	if (isFunction(enable)) return enable(event);	16✔
313	return !!enable;	×
314	}
315
316	public destroy(): void {
317	this.unbindEvents();	2✔
318	super.destroy();	2✔
319	}
320	}

antvis / G6 / 11327868527

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