test: add test case

antvis · Feb 4, 2024 · f63e120 · f63e120
1 parent c815eaa
commit f63e120
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 37 deletions.
diff --git a/packages/g6/__tests__/demo/static/controller-viewport.ts b/packages/g6/__tests__/demo/static/controller-viewport.ts
@@ -43,26 +43,35 @@ export const controllerViewport: StaticTestCase = async (context) => {
  assert(viewportController.getViewportCenter()).toCloseTo([250, 250]);
  // 起始中心坐标 [250, 250]
 
- const effectTiming = undefined; // { duration: 500 };
-
- await viewportController.translate({ mode: 'absolute', value: [25, 25] }, effectTiming); // 当前坐标 [275, 275]
+ viewportController.translate({ mode: 'absolute', value: [25, 25] }); // 当前坐标 [275, 275]
  assert(viewportController.getViewportCenter()).toCloseTo([275, 275]);
 
- await viewportController.translate({ mode: 'relative', value: [25, 25] }, effectTiming); // 当前坐标 [300, 300]
+ viewportController.translate({ mode: 'relative', value: [25, 25] }); // 当前坐标 [300, 300]
  assert(viewportController.getViewportCenter()).toCloseTo([300, 300]);
 
- await viewportController.rotate({ mode: 'absolute', value: 45, origin: [300, 300] }, effectTiming); // 沿 [300, 300] 旋转 45 度，当前坐标 [300, 300]
+ viewportController.rotate({ mode: 'absolute', value: 45, origin: [300, 300] }); // 沿 [300, 300] 旋转 45 度，当前坐标 [300, 300]
 
- await viewportController.rotate({ mode: 'relative', value: 45 }, effectTiming); // 沿 [250, 250] 旋转 45 度，当前坐标 [250 + 50 * 2**0.5, 250]
+ viewportController.rotate({ mode: 'relative', value: 45 }); // 沿 [250, 250] 旋转 45 度，当前坐标 [250 + 50 * 2**0.5, 250]
 
  assert(viewportController.getViewportCenter()).toCloseTo([250 + 50 * 2 ** 0.5, 250]);
 
  // 以当前坐标系为基准，缩放比例为 1.2，缩放中心点为 [250 + 50 * 2**0.5, 250]
- await viewportController.zoom({ mode: 'absolute', value: 1.2, origin: [250 + 50 * 2 ** 0.5, 250] }, effectTiming);
+ viewportController.zoom({ mode: 'absolute', value: 1.2, origin: [250 + 50 * 2 ** 0.5, 250] });
 
  // 继续沿当前点缩放 1.2 倍
- await viewportController.zoom({ mode: 'relative', value: 1.2, origin: [250 + 50 * 2 ** 0.5, 250] }, effectTiming);
+ viewportController.zoom({ mode: 'relative', value: 1.2, origin: [250 + 50 * 2 ** 0.5, 250] });
 
  // 此时边长度为：100 * 1.2 * 1.2 = 144，坐标为 [250 + 50 * 2**0.5, 250]
- assert(viewportController.getZoom()).toBe(1.44);
+ assert(viewportController.getZoom()).toCloseTo(1.44);
+
+ const effectTiming = { duration: 500 };
+
+ await viewportController.zoom({ mode: 'absolute', value: 1, origin: [250 + 50 * 2 ** 0.5, 250] }, effectTiming);
+
+ assert(viewportController.getZoom()).toCloseTo(1);
+
+ await viewportController.rotate({ mode: 'absolute', value: 0, origin: [250 + 50 * 2 ** 0.5, 250] }, effectTiming);
+
+ await viewportController.translate({ mode: 'absolute', value: [0, 0] }, effectTiming);
+ assert(viewportController.getViewportCenter()).toCloseTo([250, 250]);
 };
diff --git a/packages/g6/__tests__/integration/snapshots/static/controller-viewport.svg b/packages/g6/__tests__/integration/snapshots/static/controller-viewport.svg
diff --git a/packages/g6/src/runtime/viewport.ts b/packages/g6/src/runtime/viewport.ts
@@ -83,7 +83,11 @@ export class ViewportController {
  this.context.graph.emit(GraphEvent.BEFORE_VIEWPORT_ANIMATION, options);
 
  return new Promise<void>((resolve) => {
- resolveWhenTimeout(resolve, effectTiming.duration);
+ const onfinish = () => {
+ this.context.graph.emit(GraphEvent.AFTER_VIEWPORT_ANIMATION, options);
+ resolve();
+ };
+ resolveWhenTimeout(onfinish, effectTiming.duration);
 
  this.camera.gotoLandmark(
  this.createLandmark(
@@ -97,13 +101,7 @@ export class ViewportController {
  focalPoint: [ox - x, oy - y, z ?? fz - z],
  },
  ),
- {
- ...effectTiming,
- onfinish: () => {
- this.context.graph.emit(GraphEvent.AFTER_VIEWPORT_ANIMATION, options);
- resolve();
- },
- },
+ { ...effectTiming, onfinish },
  );
  });
  } else {
@@ -121,17 +119,15 @@ export class ViewportController {
  this.context.graph.emit(GraphEvent.BEFORE_VIEWPORT_ANIMATION, options);
 
  return new Promise<void>((resolve) => {
- resolveWhenTimeout(resolve, effectTiming.duration);
+ const onfinish = () => {
+ this.context.graph.emit(GraphEvent.AFTER_VIEWPORT_ANIMATION, options);
+ resolve();
+ };
+ resolveWhenTimeout(onfinish, effectTiming.duration);
 
  this.camera.gotoLandmark(
  this.createLandmark({ roll: mode === 'relative' ? camera.getRoll() + angle : angle }),
- {
- ...effectTiming,
- onfinish: () => {
- this.context.graph.emit(GraphEvent.AFTER_VIEWPORT_ANIMATION, options);
- resolve();
- },
- },
+ { ...effectTiming, onfinish },
  );
  });
  } else {
@@ -157,14 +153,13 @@ export class ViewportController {
  this.context.graph.emit(GraphEvent.BEFORE_VIEWPORT_ANIMATION, options);
 
  return new Promise<void>((resolve) => {
- resolveWhenTimeout(resolve, effectTiming.duration);
- this.camera.gotoLandmark(this.createLandmark({ zoom: targetRatio }), {
- ...effectTiming,
- onfinish: () => {
- this.context.graph.emit(GraphEvent.AFTER_VIEWPORT_ANIMATION, options);
- resolve();
- },
- });
+ const onfinish = () => {
+ this.context.graph.emit(GraphEvent.AFTER_VIEWPORT_ANIMATION, options);
+ resolve();
+ };
+ resolveWhenTimeout(onfinish, effectTiming.duration);
+
+ this.camera.gotoLandmark(this.createLandmark({ zoom: targetRatio }), { ...effectTiming, onfinish });
  });
  } else {
  camera.setZoomByViewportPoint(targetRatio, [origin[0], origin[1]]);