9949610745

Committed 16 Jul 2024 02:12AM UTC coverage: 90.541% (-0.01%) from 90.551%

Build # 9949610745

Build Type

push

github

Committed by

web-flow

Commit Message

docs: add level of detail demo (#6038)

* docs: add level of detail demo

Run Details

2675 of 3288 branches covered (81.36%)

Branch coverage included in aggregate %.

1 of 2 new or added lines in 1 file covered. (50.0%)

1 existing line in 1 file now uncovered.

6016 of 6311 relevant lines covered (95.33%)

11947.33 hits per line

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

84.83

/packages/g6/src/runtime/viewport.ts

import { AABB } from '@antv/g';
import { clamp, isNumber, pick } from '@antv/util';
import { AnimationType, GraphEvent } from '../constants';
import type { FitViewOptions, ID, Point, TransformOptions, Vector2, ViewportAnimationEffectTiming } from '../types';
import { getAnimationOptions } from '../utils/animation';
import { getBBoxSize, getCombinedBBox } from '../utils/bbox';
import { AnimateEvent, ViewportEvent, emit } from '../utils/event';
import { parsePadding } from '../utils/padding';
import { add, divide, subtract } from '../utils/vector';
import type { RuntimeContext } from './types';

export class ViewportController {
  private context: RuntimeContext;

  private get padding() {
    return parsePadding(this.context.options.padding);
  }

  private get paddingOffset(): Point {
    const [top, right, bottom, left] = this.padding;
    const [offsetX, offsetY, offsetZ] = [(left - right) / 2, (top - bottom) / 2, 0];
    return [offsetX, offsetY, offsetZ];
  }

  constructor(context: RuntimeContext) {
    this.context = context;
    const [px, py] = this.paddingOffset;
    const { zoom, rotation, x = px, y = py } = context.options;
    this.transform({ mode: 'absolute', scale: zoom, translate: [x, y], rotate: rotation }, false);
  }

  private get camera() {
    return this.context.canvas.getCamera();
  }

  private landmarkCounter = 0;

  private createLandmark(options: Parameters<typeof this.camera.createLandmark>[1]) {
    return this.camera.createLandmark(`landmark-${this.landmarkCounter++}`, options);
  }

  private getAnimation(animation?: ViewportAnimationEffectTiming) {
    const finalAnimation = getAnimationOptions(this.context.options, animation);
    if (!finalAnimation) return false;
    return pick({ ...finalAnimation }, ['easing', 'duration']) as Exclude<ViewportAnimationEffectTiming, boolean>;
  }

  public getCanvasSize(): [number, number] {
    const { canvas } = this.context;
    const { width = 0, height = 0 } = canvas.getConfig();
    return [width, height];
  }

  /**
   * <zh/> 获取画布中心坐标
   *
   * <en/> Get the center coordinates of the canvas
   * @returns - <zh/> 画布中心坐标 | <en/> Center coordinates of the canvas
   * @remarks
   * <zh/> 基于画布的宽高计算中心坐标，不受视口变换影响
   *
   * <en/> Calculate the center coordinates based on the width and height of the canvas, not affected by the viewport transformation
   */
  public getCanvasCenter(): Point {
    const { canvas } = this.context;
    const { width = 0, height = 0 } = canvas.getConfig();
    return [width / 2, height / 2, 0];
  }

  /**
   * <zh/> 当前视口中心坐标
   *
   * <en/> Current viewport center coordinates
   * @returns - <zh/> 视口中心坐标 | <en/> Viewport center coordinates
   * @remarks
   * <zh/> 以画布原点为原点，受到视口变换影响
   *
   * <en/> With the origin of the canvas as the origin, affected by the viewport transformation
   */
  public getViewportCenter(): Point {
    // 理论上应该通过 camera.getFocalPoint() 获取
    // 但在 2D 场景下，通过 pan 操作时，focalPoint 不会变化
    const [x, y] = this.camera.getPosition();
    return [x, y, 0];
  }

  public getGraphCenter(): Point {
    return this.context.graph.getViewportByCanvas(this.getCanvasCenter());
  }

  public getZoom() {
    return this.camera.getZoom();
  }

  public getRotation() {
    return this.camera.getRoll();
  }

  private getTranslateOptions(options: TransformOptions) {
    const { camera } = this;
    const { mode, translate = [] } = options;
    const currentZoom = this.getZoom();

    const position = camera.getPosition();
    const focalPoint = camera.getFocalPoint();
    const [cx, cy] = this.getCanvasCenter();

    const [x = 0, y = 0, z = 0] = translate;

    const delta = divide([-x, -y, -z], currentZoom);

    return mode === 'relative'
      ? {
          position: add(position, delta),
          focalPoint: add(focalPoint, delta),
        }
      : {
          position: add([cx, cy, position[2]], delta),
          focalPoint: add([cx, cy, focalPoint[2]], delta),
        };
  }

  private getRotateOptions(options: TransformOptions) {
    const { mode, rotate = 0 } = options;
    const roll = mode === 'relative' ? this.camera.getRoll() + rotate : rotate;
    return { roll };
  }

  private getZoomOptions(options: TransformOptions) {
    const { zoomRange } = this.context.options;
    const currentZoom = this.camera.getZoom();
    const { mode, scale = 1 } = options;
    return clamp(mode === 'relative' ? currentZoom * scale : scale, ...zoomRange!);
  }

  private transformResolver?: () => void;

  public async transform(options: TransformOptions, animation?: ViewportAnimationEffectTiming): Promise<void> {
    const { graph } = this.context;
    const { translate, rotate, scale, origin } = options;
    this.cancelAnimation();

    const _animation = this.getAnimation(animation);

    emit(graph, new ViewportEvent(GraphEvent.BEFORE_TRANSFORM, options));

    // 针对缩放操作，且不涉及平移、旋转、中心点、动画时，直接调用 setZoomByViewportPoint
    // For zoom operations, and no translation, rotation, center point, and animation involved, call setZoomByViewportPoint directly
    if (!rotate && scale && !translate && origin && !_animation) {
      this.camera.setZoomByViewportPoint(this.getZoomOptions(options), origin as Vector2);
      emit(graph, new ViewportEvent(GraphEvent.AFTER_TRANSFORM, options));
      return;
    }

    const landmarkOptions: Parameters<typeof this.camera.createLandmark>[1] = {};
    if (translate) Object.assign(landmarkOptions, this.getTranslateOptions(options));
    if (isNumber(rotate)) Object.assign(landmarkOptions, this.getRotateOptions(options));
    if (isNumber(scale)) Object.assign(landmarkOptions, { zoom: this.getZoomOptions(options) });

    if (_animation) {
      emit(graph, new AnimateEvent(GraphEvent.BEFORE_ANIMATE, AnimationType.TRANSFORM, null, options));

      return new Promise<void>((resolve) => {
        this.transformResolver = resolve;
        this.camera.gotoLandmark(this.createLandmark(landmarkOptions), {
          ..._animation,
          onfinish: () => {
            emit(graph, new AnimateEvent(GraphEvent.AFTER_ANIMATE, AnimationType.TRANSFORM, null, options));
            emit(graph, new ViewportEvent(GraphEvent.AFTER_TRANSFORM, options));
            this.transformResolver = undefined;
            resolve();
          },
        });
      });
    } else {
      this.camera.gotoLandmark(this.createLandmark(landmarkOptions), {
        duration: 0,
      });

      emit(graph, new ViewportEvent(GraphEvent.AFTER_TRANSFORM, options));
    }
  }

  public async fitView(options?: FitViewOptions, animation?: ViewportAnimationEffectTiming): Promise<void> {
    const [top, right, bottom, left] = this.padding;
    const { when = 'always', direction = 'both' } = options || {};

    const [width, height] = this.context.canvas.getSize();
    const innerWidth = width - left - right;
    const innerHeight = height - top - bottom;

    const canvasBounds = this.context.canvas.getBounds();
    const bboxInViewPort = this.getBBoxInViewport(canvasBounds);
    const [contentWidth, contentHeight] = getBBoxSize(bboxInViewPort);

    const isOverflow =
      (direction === 'x' && contentWidth >= innerWidth) ||
      (direction === 'y' && contentHeight >= innerHeight) ||
      (direction === 'both' && contentWidth >= innerWidth && contentHeight >= innerHeight);

    if (when === 'overflow' && !isOverflow) return await this.fitCenter(animation);

    const scaleX = innerWidth / contentWidth;
    const scaleY = innerHeight / contentHeight;
    const scale = direction === 'x' ? scaleX : direction === 'y' ? scaleY : Math.min(scaleX, scaleY);

    const _animation = this.getAnimation(animation);
    await this.transform(
      {
        mode: 'relative',
        scale,
        translate: add(
          subtract(this.getCanvasCenter(), this.getBBoxInViewport(canvasBounds).center),
          divide(this.paddingOffset, scale),
        ),
      },
      _animation,
    );
  }

  public async fitCenter(animation?: ViewportAnimationEffectTiming): Promise<void> {
    const canvasBounds = this.context.canvas.getBounds();
    await this.focus(canvasBounds, animation);
  }

  public async focusElements(ids: ID[], animation?: ViewportAnimationEffectTiming): Promise<void> {
    const { element } = this.context;
    if (!element) return;
    const elementsBounds = getCombinedBBox(ids.map((id) => element.getElement(id)!.getRenderBounds()));
    await this.focus(elementsBounds, animation);
  }

  private async focus(bbox: AABB, animation?: ViewportAnimationEffectTiming) {
    const center = this.context.graph.getViewportByCanvas(bbox.center);
    const canvasCenter = this.getCanvasCenter();
    const delta = subtract(canvasCenter, center);
    await this.transform({ mode: 'relative', translate: add(delta, this.paddingOffset) }, animation);
  }

  /**
   * <zh/> 获取画布元素在视口中的包围盒
   *
   * <en/> Get the bounding box of the canvas element in the viewport
   * @param bbox - <zh/> 画布元素包围盒 | <en/> Canvas element bounding box
   * @returns - <zh/> 视口中的包围盒 | <en/> Bounding box in the viewport
   */
  public getBBoxInViewport(bbox: AABB) {
    const { min, max } = bbox;
    const { graph } = this.context;
    const [x1, y1] = graph.getViewportByCanvas(min);
    const [x2, y2] = graph.getViewportByCanvas(max);

    const bboxInViewport = new AABB();
    bboxInViewport.setMinMax([x1, y1, 0], [x2, y2, 0]);
    return bboxInViewport;
  }

  public cancelAnimation() {
    // @ts-expect-error landmarks is private
    if (this.camera.landmarks?.length) {
      this.camera.cancelLandmarkAnimation();
    }
    this.transformResolver?.();
  }
}

1	import { AABB } from '@antv/g';	254✔
2	import { clamp, isNumber, pick } from '@antv/util';	254✔
3	import { AnimationType, GraphEvent } from '../constants';	254✔
4	import type { FitViewOptions, ID, Point, TransformOptions, Vector2, ViewportAnimationEffectTiming } from '../types';
5	import { getAnimationOptions } from '../utils/animation';	254✔
6	import { getBBoxSize, getCombinedBBox } from '../utils/bbox';	254✔
7	import { AnimateEvent, ViewportEvent, emit } from '../utils/event';	254✔
8	import { parsePadding } from '../utils/padding';	254✔
9	import { add, divide, subtract } from '../utils/vector';	254✔
10	import type { RuntimeContext } from './types';
11
12	export class ViewportController {	288✔
13	private context: RuntimeContext;
14
15	private get padding() {
16	return parsePadding(this.context.options.padding);	564✔
17	}
18
19	private get paddingOffset(): Point {
20	const [top, right, bottom, left] = this.padding;	446✔
21	const [offsetX, offsetY, offsetZ] = [(left - right) / 2, (top - bottom) / 2, 0];	446✔
22	return [offsetX, offsetY, offsetZ];	446✔
23	}
24
25	constructor(context: RuntimeContext) {
26	this.context = context;	288✔
27	const [px, py] = this.paddingOffset;	288✔
28	const { zoom, rotation, x = px, y = py } = context.options;	288✔
29	this.transform({ mode: 'absolute', scale: zoom, translate: [x, y], rotate: rotation }, false);	288✔
30	}
31
32	private get camera() {
33	return this.context.canvas.getCamera();	3,526✔
34	}
35
36	private landmarkCounter = 0;	288✔
37
38	private createLandmark(options: Parameters<typeof this.camera.createLandmark>[1]) {
39	return this.camera.createLandmark(`landmark-${this.landmarkCounter++}`, options);	552✔
40	}
41
42	private getAnimation(animation?: ViewportAnimationEffectTiming) {
43	const finalAnimation = getAnimationOptions(this.context.options, animation);	670✔
44	if (!finalAnimation) return false;	670✔
45	return pick({ ...finalAnimation }, ['easing', 'duration']) as Exclude<ViewportAnimationEffectTiming, boolean>;	20✔
46	}
47
48	public getCanvasSize(): [number, number] {
49	const { canvas } = this.context;	164✔
50	const { width = 0, height = 0 } = canvas.getConfig();	164!
51	return [width, height];	164✔
52	}
53
54	/**
55	* <zh/> 获取画布中心坐标
56	*
57	* <en/> Get the center coordinates of the canvas
58	* @returns - <zh/> 画布中心坐标 \| <en/> Center coordinates of the canvas
59	* @remarks
60	* <zh/> 基于画布的宽高计算中心坐标，不受视口变换影响
61	*
62	* <en/> Calculate the center coordinates based on the width and height of the canvas, not affected by the viewport transformation
63	*/
64	public getCanvasCenter(): Point {
65	const { canvas } = this.context;	660✔
66	const { width = 0, height = 0 } = canvas.getConfig();	660!
67	return [width / 2, height / 2, 0];	660✔
68	}
69
70	/**
71	* <zh/> 当前视口中心坐标
72	*
73	* <en/> Current viewport center coordinates
74	* @returns - <zh/> 视口中心坐标 \| <en/> Viewport center coordinates
75	* @remarks
76	* <zh/> 以画布原点为原点，受到视口变换影响
77	*
78	* <en/> With the origin of the canvas as the origin, affected by the viewport transformation
79	*/
80	public getViewportCenter(): Point {
81	// 理论上应该通过 camera.getFocalPoint() 获取
82	// 但在 2D 场景下，通过 pan 操作时，focalPoint 不会变化
83	const [x, y] = this.camera.getPosition();	8✔
84	return [x, y, 0];	8✔
85	}
86
87	public getGraphCenter(): Point {
88	return this.context.graph.getViewportByCanvas(this.getCanvasCenter());	×
89	}
90
91	public getZoom() {
92	return this.camera.getZoom();	634✔
93	}
94
95	public getRotation() {
96	return this.camera.getRoll();	12✔
97	}
98
99	private getTranslateOptions(options: TransformOptions) {
100	const { camera } = this;	498✔
101	const { mode, translate = [] } = options;	498!
102	const currentZoom = this.getZoom();	498✔
103
104	const position = camera.getPosition();	498✔
105	const focalPoint = camera.getFocalPoint();	498✔
106	const [cx, cy] = this.getCanvasCenter();	498✔
107
108	const [x = 0, y = 0, z = 0] = translate;	498!
109
110	const delta = divide([-x, -y, -z], currentZoom);	498✔
111
112	return mode === 'relative'	498✔
113	? {
114	position: add(position, delta),
115	focalPoint: add(focalPoint, delta),
116	}
117	: {
118	position: add([cx, cy, position[2]], delta),
119	focalPoint: add([cx, cy, focalPoint[2]], delta),
120	};
121	}
122
123	private getRotateOptions(options: TransformOptions) {
124	const { mode, rotate = 0 } = options;	300!
125	const roll = mode === 'relative' ? this.camera.getRoll() + rotate : rotate;	300✔
126	return { roll };	300✔
127	}
128
129	private getZoomOptions(options: TransformOptions) {
130	const { zoomRange } = this.context.options;	448✔
131	const currentZoom = this.camera.getZoom();	448✔
132	const { mode, scale = 1 } = options;	448!
133	return clamp(mode === 'relative' ? currentZoom * scale : scale, ...zoomRange!);	448✔
134	}
135
136	private transformResolver?: () => void;
137
138	public async transform(options: TransformOptions, animation?: ViewportAnimationEffectTiming): Promise<void> {
139	const { graph } = this.context;	552✔
140	const { translate, rotate, scale, origin } = options;	552✔
141	this.cancelAnimation();	552✔
142
143	const _animation = this.getAnimation(animation);	552✔
144
145	emit(graph, new ViewportEvent(GraphEvent.BEFORE_TRANSFORM, options));	552✔
146
147	// 针对缩放操作，且不涉及平移、旋转、中心点、动画时，直接调用 setZoomByViewportPoint
148	// For zoom operations, and no translation, rotation, center point, and animation involved, call setZoomByViewportPoint directly
149	if (!rotate && scale && !translate && origin && !_animation) {	552!
150	this.camera.setZoomByViewportPoint(this.getZoomOptions(options), origin as Vector2);	×
NEW 151	emit(graph, new ViewportEvent(GraphEvent.AFTER_TRANSFORM, options));	×
UNCOV 152	return;	×
153	}
154
155	const landmarkOptions: Parameters<typeof this.camera.createLandmark>[1] = {};	552✔
156	if (translate) Object.assign(landmarkOptions, this.getTranslateOptions(options));	552✔
157	if (isNumber(rotate)) Object.assign(landmarkOptions, this.getRotateOptions(options));	552✔
158	if (isNumber(scale)) Object.assign(landmarkOptions, { zoom: this.getZoomOptions(options) });	552✔
159
160	if (_animation) {	552✔
161	emit(graph, new AnimateEvent(GraphEvent.BEFORE_ANIMATE, AnimationType.TRANSFORM, null, options));	14✔
162
163	return new Promise<void>((resolve) => {	14✔
164	this.transformResolver = resolve;	14✔
165	this.camera.gotoLandmark(this.createLandmark(landmarkOptions), {	14✔
166	..._animation,
167	onfinish: () => {
168	emit(graph, new AnimateEvent(GraphEvent.AFTER_ANIMATE, AnimationType.TRANSFORM, null, options));	14✔
169	emit(graph, new ViewportEvent(GraphEvent.AFTER_TRANSFORM, options));	14✔
170	this.transformResolver = undefined;	14✔
171	resolve();	14✔
172	},
173	});
174	});
175	} else {
176	this.camera.gotoLandmark(this.createLandmark(landmarkOptions), {	538✔
177	duration: 0,
178	});
179
180	emit(graph, new ViewportEvent(GraphEvent.AFTER_TRANSFORM, options));	538✔
181	}
182	}
183
184	public async fitView(options?: FitViewOptions, animation?: ViewportAnimationEffectTiming): Promise<void> {
185	const [top, right, bottom, left] = this.padding;	118✔
186	const { when = 'always', direction = 'both' } = options \|\| {};	118✔
187
188	const [width, height] = this.context.canvas.getSize();	118✔
189	const innerWidth = width - left - right;	118✔
190	const innerHeight = height - top - bottom;	118✔
191
192	const canvasBounds = this.context.canvas.getBounds();	118✔
193	const bboxInViewPort = this.getBBoxInViewport(canvasBounds);	118✔
194	const [contentWidth, contentHeight] = getBBoxSize(bboxInViewPort);	118✔
195
196	const isOverflow =
197	(direction === 'x' && contentWidth >= innerWidth) \|\|	118!
198	(direction === 'y' && contentHeight >= innerHeight) \|\|
199	(direction === 'both' && contentWidth >= innerWidth && contentHeight >= innerHeight);
200
201	if (when === 'overflow' && !isOverflow) return await this.fitCenter(animation);	118!
202
203	const scaleX = innerWidth / contentWidth;	118✔
204	const scaleY = innerHeight / contentHeight;	118✔
205	const scale = direction === 'x' ? scaleX : direction === 'y' ? scaleY : Math.min(scaleX, scaleY);	118!
206
207	const _animation = this.getAnimation(animation);	118✔
208	await this.transform(	118✔
209	{
210	mode: 'relative',
211	scale,
212	translate: add(
213	subtract(this.getCanvasCenter(), this.getBBoxInViewport(canvasBounds).center),
214	divide(this.paddingOffset, scale),
215	),
216	},
217	_animation,
218	);
219	}
220
221	public async fitCenter(animation?: ViewportAnimationEffectTiming): Promise<void> {
222	const canvasBounds = this.context.canvas.getBounds();	18✔
223	await this.focus(canvasBounds, animation);	18✔
224	}
225
226	public async focusElements(ids: ID[], animation?: ViewportAnimationEffectTiming): Promise<void> {
227	const { element } = this.context;	22✔
228	if (!element) return;	22!
229	const elementsBounds = getCombinedBBox(ids.map((id) => element.getElement(id)!.getRenderBounds()));	22✔
230	await this.focus(elementsBounds, animation);	22✔
231	}
232
233	private async focus(bbox: AABB, animation?: ViewportAnimationEffectTiming) {
234	const center = this.context.graph.getViewportByCanvas(bbox.center);	40✔
235	const canvasCenter = this.getCanvasCenter();	40✔
236	const delta = subtract(canvasCenter, center);	40✔
237	await this.transform({ mode: 'relative', translate: add(delta, this.paddingOffset) }, animation);	40✔
238	}
239
240	/**
241	* <zh/> 获取画布元素在视口中的包围盒
242	*
243	* <en/> Get the bounding box of the canvas element in the viewport
244	* @param bbox - <zh/> 画布元素包围盒 \| <en/> Canvas element bounding box
245	* @returns - <zh/> 视口中的包围盒 \| <en/> Bounding box in the viewport
246	*/
247	public getBBoxInViewport(bbox: AABB) {
248	const { min, max } = bbox;	242✔
249	const { graph } = this.context;	242✔
250	const [x1, y1] = graph.getViewportByCanvas(min);	242✔
251	const [x2, y2] = graph.getViewportByCanvas(max);	242✔
252
253	const bboxInViewport = new AABB();	242✔
254	bboxInViewport.setMinMax([x1, y1, 0], [x2, y2, 0]);	242✔
255	return bboxInViewport;	242✔
256	}
257
258	public cancelAnimation() {
259	// @ts-expect-error landmarks is private
260	if (this.camera.landmarks?.length) {	552✔
261	this.camera.cancelLandmarkAnimation();	264✔
262	}
263	this.transformResolver?.();	552✔
264	}
265	}

antvis / G6 / 9949610745

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