fix(runtime): wait for the next tick to finish rendering (close: #4771)…

… (#4855) * fix(runtime): wait for the next tick to finish rendering (close: #4771) * fix: cr
antvis · May 16, 2023 · 9fb0b08 · 9fb0b08
1 parent aee3df2
commit 9fb0b08
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/__tests__/integration/snapshots/interaction/penguins-point-highlight/step0.png b/__tests__/integration/snapshots/interaction/penguins-point-highlight/step0.png
diff --git a/__tests__/integration/utils/renderSpec.ts b/__tests__/integration/utils/renderSpec.ts
@@ -19,7 +19,5 @@ export async function renderSpec(
     // @ts-ignore
     renderFunction({ theme: 'classic', ...options }, context, resolve),
   );
-  // Wait for the next tick.
-  await sleep(20);
   return gCanvas;
 }
diff --git a/src/runtime/render.ts b/src/runtime/render.ts
@@ -94,8 +94,11 @@ export function render<T extends G2ViewTree = G2ViewTree>(
       plot<T>({ ...keyed, width, height }, selection, library, context),
     )
     .then(() => {
-      emitter.emit(ChartEvent.AFTER_RENDER);
-      resolve?.();
+      // Wait for the next tick.
+      canvas.requestAnimationFrame(() => {
+        emitter.emit(ChartEvent.AFTER_RENDER);
+        resolve?.();
+      });
     })
     .catch((e) => {
       reject?.(e);
@@ -108,7 +111,8 @@ export function render<T extends G2ViewTree = G2ViewTree>(
 export function renderToMountedElement<T extends G2ViewTree = G2ViewTree>(
   options: T,
   context: G2Context = {},
-  callback?: () => void,
+  resolve?: () => void,
+  reject?: (e: Error) => void,
 ): DisplayObject {
   // Initialize the context if it is not provided.
   const { width = 640, height = 480, on } = options;
@@ -133,10 +137,17 @@ export function renderToMountedElement<T extends G2ViewTree = G2ViewTree>(
   emitter.emit(ChartEvent.BEFORE_RENDER);
   // Plot the chart and mutate context.
   // Make sure that plot chart after container is ready for every time.
-  plot<T>({ ...keyed, width, height }, selection, library, context).then(() => {
-    emitter.emit(ChartEvent.AFTER_RENDER);
-    callback?.();
-  });
+  plot<T>({ ...keyed, width, height }, selection, library, context)
+    .then(() => {
+      const canvas = group.ownerDocument.defaultView;
+      canvas.requestAnimationFrame(() => {
+        emitter.emit(ChartEvent.AFTER_RENDER);
+        resolve?.();
+      });
+    })
+    .catch((e) => {
+      reject?.(e);
+    });
 
   // Return the Group wraps the canvas or svg element.
   return group;