fix: change canvas' init hook frin async to sync #1117 (#1368)

* fix: change canvas' init hook frin async to sync #1117 * Publish - @antv/g-canvas@1.9.47 - @antv/g-canvaskit@0.8.44 - @antv/g-gesture@0.0.82 - @antv/g-lite@1.0.69 - @antv/g-mobile-canvas@0.8.55 - @antv/g-mobile-svg@0.8.59 - @antv/g-mobile-webgl@0.7.73 - @antv/g-plugin-3d@1.7.56 - @antv/g-plugin-a11y@0.4.51 - @antv/g-plugin-annotation@0.2.68 - @antv/g-plugin-box2d@1.7.52 - @antv/g-plugin-canvas-renderer@1.7.59 - @antv/g-plugin-canvaskit-renderer@1.1.53 - @antv/g-plugin-control@1.7.53 - @antv/g-plugin-device-renderer@1.7.69 - @antv/g-plugin-dom-interaction@1.7.51 - @antv/g-plugin-dragndrop@1.6.50 - @antv/g-plugin-html-renderer@1.7.55 - @antv/g-plugin-image-loader@1.1.53 - @antv/g-plugin-matterjs@1.7.52 - @antv/g-plugin-mobile-interaction@0.7.50 - @antv/g-plugin-physx@1.7.53 - @antv/g-plugin-rough-canvas-renderer@1.7.53 - @antv/g-plugin-rough-svg-renderer@1.7.55 - @antv/g-plugin-svg-renderer@1.8.59 - @antv/g-plugin-webgl-device@1.7.53 - @antv/g-plugin-yoga@1.7.50 - @antv/g-plugin-zdog-canvas-renderer@1.0.18 - @antv/g-plugin-zdog-svg-renderer@1.0.17 - @antv/g-shader-components@1.7.54 - @antv/g-svg@1.8.59 - @antv/g-webgl@1.7.73 - @antv/g-webgpu@1.7.72 - @antv/g@5.16.32 - @antv/react-g@1.8.78
antvis · Jun 12, 2023 · 037f76e · 037f76e
1 parent e8fe6ec
commit 037f76e
Show file tree

Hide file tree

Showing 76 changed files with 528 additions and 383 deletions.
diff --git a/packages/g-canvas/package.json b/packages/g-canvas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-canvas",
-  "version": "1.9.46",
+  "version": "1.9.47",
   "description": "A renderer implemented by Canvas 2D API",
   "keywords": [
     "antv",
@@ -34,10 +34,10 @@
   "dependencies": {
     "@antv/g-plugin-canvas-path-generator": "^1.1.51",
     "@antv/g-plugin-canvas-picker": "^1.8.50",
-    "@antv/g-plugin-canvas-renderer": "^1.7.58",
-    "@antv/g-plugin-dom-interaction": "^1.7.50",
-    "@antv/g-plugin-html-renderer": "^1.7.54",
-    "@antv/g-plugin-image-loader": "^1.1.52",
+    "@antv/g-plugin-canvas-renderer": "^1.7.59",
+    "@antv/g-plugin-dom-interaction": "^1.7.51",
+    "@antv/g-plugin-html-renderer": "^1.7.55",
+    "@antv/g-plugin-image-loader": "^1.1.53",
     "@antv/util": "^3.3.1",
     "@types/offscreencanvas": "^2019.6.4",
     "tslib": "^2.3.1"

diff --git a/packages/g-canvas/src/Canvas2DContextService.ts b/packages/g-canvas/src/Canvas2DContextService.ts
@@ -28,7 +28,7 @@ export class Canvas2DContextService
     this.canvasConfig = context.config;
   }
 
-  async init() {
+  init() {
     const { container, canvas } = this.canvasConfig;
 
     if (canvas) {

diff --git a/packages/g-canvaskit/package.json b/packages/g-canvaskit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-canvaskit",
-  "version": "0.8.43",
+  "version": "0.8.44",
   "description": "A renderer implemented by CanvasKit",
   "keywords": [
     "antv",
@@ -34,10 +34,10 @@
   "dependencies": {
     "@antv/g-plugin-canvas-path-generator": "^1.1.51",
     "@antv/g-plugin-canvas-picker": "^1.8.50",
-    "@antv/g-plugin-canvaskit-renderer": "^1.1.52",
-    "@antv/g-plugin-dom-interaction": "^1.7.50",
-    "@antv/g-plugin-html-renderer": "^1.7.54",
-    "@antv/g-plugin-image-loader": "^1.1.52",
+    "@antv/g-plugin-canvaskit-renderer": "^1.1.53",
+    "@antv/g-plugin-dom-interaction": "^1.7.51",
+    "@antv/g-plugin-html-renderer": "^1.7.55",
+    "@antv/g-plugin-image-loader": "^1.1.53",
     "@antv/util": "^3.3.1",
     "canvaskit-wasm": "^0.34.0",
     "tslib": "^2.3.1"

diff --git a/packages/g-canvaskit/src/CanvasKitContextService.ts b/packages/g-canvaskit/src/CanvasKitContextService.ts
@@ -20,7 +20,9 @@ export interface ContextRegisterPluginOptions {
 /**
  * @see https://skia.org/docs/user/modules/quickstart/
  */
-export class CanvasKitContextService implements ContextService<CanvasKitContext> {
+export class CanvasKitContextService
+  implements ContextService<CanvasKitContext>
+{
   private $container: HTMLElement | null;
   private $canvas: CanvasLike | null;
   private dpr: number;
@@ -35,21 +37,26 @@ export class CanvasKitContextService implements ContextService<CanvasKitContext>
     this.contextRegisterPluginOptions = context.contextRegisterPluginOptions;
   }
 
-  async init() {
+  async initAsync() {
     const { container, canvas, devicePixelRatio } = this.canvasConfig;
 
     if (canvas) {
       this.$canvas = canvas;
 
-      if (container && (canvas as HTMLCanvasElement).parentElement !== container) {
+      if (
+        container &&
+        (canvas as HTMLCanvasElement).parentElement !== container
+      ) {
         (container as HTMLElement).appendChild(canvas as HTMLCanvasElement);
       }
 
       this.$container = (canvas as HTMLCanvasElement).parentElement;
       this.canvasConfig.container = this.$container;
     } else if (container) {
       // create container
-      this.$container = isString(container) ? document.getElementById(container) : container;
+      this.$container = isString(container)
+        ? document.getElementById(container)
+        : container;
       if (this.$container) {
         // create canvas
         const $canvas = document.createElement('canvas');
@@ -70,7 +77,9 @@ export class CanvasKitContextService implements ContextService<CanvasKitContext>
 
     // making surface must after canvas init
     const CanvasKit = await this.loadCanvaskit();
-    const surface = CanvasKit.MakeWebGLCanvasSurface(this.$canvas as HTMLCanvasElement);
+    const surface = CanvasKit.MakeWebGLCanvasSurface(
+      this.$canvas as HTMLCanvasElement,
+    );
     this.context = {
       surface,
       CanvasKit,
@@ -96,11 +105,13 @@ export class CanvasKitContextService implements ContextService<CanvasKitContext>
   }
 
   destroy() {
-    // @ts-ignore
-    if (this.$container && this.$canvas && this.$canvas.parentNode) {
+    if (
+      this.$container &&
+      this.$canvas &&
+      (this.$canvas as HTMLCanvasElement).parentNode
+    ) {
       // destroy context
-      // @ts-ignore
-      this.$container.removeChild(this.$canvas);
+      this.$container.removeChild(this.$canvas as HTMLCanvasElement);
     }
   }
 
@@ -122,12 +133,15 @@ export class CanvasKitContextService implements ContextService<CanvasKitContext>
   }
 
   async toDataURL(options: Partial<DataURLOptions>) {
-    return this.contextRegisterPluginOptions.canvaskitRendererPlugin.toDataURL(options);
+    return this.contextRegisterPluginOptions.canvaskitRendererPlugin.toDataURL(
+      options,
+    );
   }
 
   private loadCanvaskit(): Promise<CanvasKit> {
     return CanvasKitInit({
-      locateFile: (file: string) => this.contextRegisterPluginOptions.wasmDir + file,
+      locateFile: (file: string) =>
+        this.contextRegisterPluginOptions.wasmDir + file,
     });
   }
 }
diff --git a/packages/g-gesture/package.json b/packages/g-gesture/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-gesture",
-  "version": "0.0.81",
+  "version": "0.0.82",
   "description": "G Gesture",
   "keywords": [
     "antv",
@@ -34,7 +34,7 @@
     "eventemitter3": "^4.0.0"
   },
   "devDependencies": {
-    "@antv/g-mobile-canvas": "^0.8.54",
+    "@antv/g-mobile-canvas": "^0.8.55",
     "@antv/g-mobile-canvas-element": "^0.6.49"
   },
   "peerDependencies": {

diff --git a/packages/g-lite/package.json b/packages/g-lite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-lite",
-  "version": "1.0.68",
+  "version": "1.0.69",
   "description": "A core module for rendering engine implements DOM API.",
   "keywords": [
     "antv",

diff --git a/packages/g-lite/src/Canvas.ts b/packages/g-lite/src/Canvas.ts
@@ -44,6 +44,7 @@ export enum CanvasEvent {
   AFTER_DESTROY = 'afterdestroy',
   RESIZE = 'resize',
   DIRTY_RECTANGLE = 'dirtyrectangle',
+  RENDERER_CHANGED = 'rendererchanged',
 }
 
 const DEFAULT_CAMERA_Z = 500;
@@ -228,15 +229,7 @@ export class Canvas extends EventTarget implements ICanvas {
 
     this.initDefaultCamera(canvasWidth, canvasHeight);
 
-    (async () => {
-      await this.initRenderer(renderer);
-
-      this.dispatchEvent(new CustomEvent(CanvasEvent.READY));
-
-      if (this.readyPromise) {
-        this.resolveReadyPromise();
-      }
-    })();
+    this.initRenderer(renderer, true);
   }
 
   private initRenderingContext(mergedConfig: CanvasConfig) {
@@ -473,12 +466,12 @@ export class Canvas extends EventTarget implements ICanvas {
   private run() {
     const tick = () => {
       this.render();
-      this.frameId = requestAnimationFrame(tick);
+      this.frameId = this.requestAnimationFrame(tick);
     };
     tick();
   }
 
-  private async initRenderer(renderer: IRenderer) {
+  private initRenderer(renderer: IRenderer, firstContentfullPaint = false) {
     if (!renderer) {
       throw new Error('Renderer is required.');
     }
@@ -514,19 +507,53 @@ export class Canvas extends EventTarget implements ICanvas {
     // init event service
     this.context.eventService = new EventService(runtime, this.context);
     this.context.eventService.init();
-    await this.context.contextService.init();
-    await this.context.renderingService.init();
+
+    if (this.context.contextService.init) {
+      this.context.contextService.init();
+      this.initRenderingService(renderer, firstContentfullPaint);
+      if (firstContentfullPaint) {
+        this.requestAnimationFrame(() => {
+          this.dispatchEvent(new CustomEvent(CanvasEvent.READY));
+        });
+        if (this.readyPromise) {
+          this.resolveReadyPromise();
+        }
+      } else {
+        this.dispatchEvent(new CustomEvent(CanvasEvent.RENDERER_CHANGED));
+      }
+    } else {
+      this.context.contextService.initAsync().then(() => {
+        this.initRenderingService(renderer, firstContentfullPaint);
+        if (firstContentfullPaint) {
+          this.dispatchEvent(new CustomEvent(CanvasEvent.READY));
+          if (this.readyPromise) {
+            this.resolveReadyPromise();
+          }
+        } else {
+          this.dispatchEvent(new CustomEvent(CanvasEvent.RENDERER_CHANGED));
+        }
+      });
+    }
+  }
+
+  private initRenderingService(
+    renderer: IRenderer,
+    firstContentfullPaint = false,
+  ) {
+    this.context.renderingService.init();
 
     this.inited = true;
 
-    this.getRoot().forEach((node) => {
-      const renderable = (node as Element).renderable;
-      if (renderable) {
-        renderable.renderBoundsDirty = true;
-        renderable.boundsDirty = true;
-        renderable.dirty = true;
-      }
-    });
+    if (!firstContentfullPaint) {
+      this.getRoot().forEach((node) => {
+        const renderable = (node as Element).renderable;
+        if (renderable) {
+          renderable.renderBoundsDirty = true;
+          renderable.boundsDirty = true;
+          renderable.dirty = true;
+        }
+      });
+    }
 
     // keep current scenegraph unchanged, just trigger mounted event
     this.mountChildren(this.getRoot());
@@ -545,7 +572,7 @@ export class Canvas extends EventTarget implements ICanvas {
     });
   }
 
-  async setRenderer(renderer: IRenderer) {
+  setRenderer(renderer: IRenderer) {
     // update canvas' config
     const canvasConfig = this.getConfig();
     if (canvasConfig.renderer === renderer) {
@@ -563,7 +590,7 @@ export class Canvas extends EventTarget implements ICanvas {
       plugin.destroy(runtime);
     });
 
-    await this.initRenderer(renderer);
+    this.initRenderer(renderer);
   }
 
   setCursor(cursor: Cursor) {

diff --git a/packages/g-lite/src/plugins/PrepareRendererPlugin.ts b/packages/g-lite/src/plugins/PrepareRendererPlugin.ts
@@ -76,21 +76,15 @@ export class PrepareRendererPlugin implements RenderingPlugin {
       renderingService.dirtify();
     };
 
-    renderingService.hooks.init.tapPromise(
-      PrepareRendererPlugin.tag,
-      async () => {
-        canvas.addEventListener(ElementEvent.MOUNTED, handleMounted);
-        canvas.addEventListener(ElementEvent.UNMOUNTED, handleUnmounted);
-        canvas.addEventListener(
-          ElementEvent.ATTR_MODIFIED,
-          handleAttributeChanged,
-        );
-        canvas.addEventListener(
-          ElementEvent.BOUNDS_CHANGED,
-          handleBoundsChanged,
-        );
-      },
-    );
+    renderingService.hooks.init.tap(PrepareRendererPlugin.tag, () => {
+      canvas.addEventListener(ElementEvent.MOUNTED, handleMounted);
+      canvas.addEventListener(ElementEvent.UNMOUNTED, handleUnmounted);
+      canvas.addEventListener(
+        ElementEvent.ATTR_MODIFIED,
+        handleAttributeChanged,
+      );
+      canvas.addEventListener(ElementEvent.BOUNDS_CHANGED, handleBoundsChanged);
+    });
 
     renderingService.hooks.destroy.tap(PrepareRendererPlugin.tag, () => {
       canvas.removeEventListener(ElementEvent.MOUNTED, handleMounted);

diff --git a/packages/g-lite/src/services/ContextService.ts b/packages/g-lite/src/services/ContextService.ts
@@ -1,6 +1,10 @@
 import type { CanvasLike } from '../types';
 
-export type DataURLType = 'image/png' | 'image/jpeg' | 'image/webp' | 'image/bmp';
+export type DataURLType =
+  | 'image/png'
+  | 'image/jpeg'
+  | 'image/webp'
+  | 'image/bmp';
 /**
  * The created image data will have a resolution of 96dpi.
  * @see https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL#%E5%8F%82%E6%95%B0
@@ -18,7 +22,8 @@ export interface DataURLOptions {
 
 // 1 of 1 in each Canvas
 export interface ContextService<Context> {
-  init: () => Promise<void>;
+  init?: () => void;
+  initAsync?: () => Promise<void>;
   destroy: () => void;
   getContext: () => Context | null;
   getDomElement: () => CanvasLike | null;

diff --git a/packages/g-lite/src/services/RenderingService.ts b/packages/g-lite/src/services/RenderingService.ts
@@ -9,7 +9,6 @@ import type {
   CanvasConfig,
 } from '../types';
 import {
-  AsyncParallelHook,
   AsyncSeriesWaterfallHook,
   sortByZIndex,
   sortedIndex,
@@ -72,7 +71,7 @@ export class RenderingService {
     /**
      * called before any frame rendered
      */
-    init: new AsyncParallelHook<[]>(),
+    init: new SyncHook<[]>(),
     /**
      * only dirty object which has sth changed will be rendered
      */
@@ -121,15 +120,14 @@ export class RenderingService {
     click: new SyncHook<[InteractivePointerEvent]>(),
   };
 
-  async init() {
+  init() {
     const context = { ...this.globalRuntime, ...this.context };
 
     // register rendering plugins
     this.context.renderingPlugins.forEach((plugin) => {
       plugin.apply(context, runtime);
     });
-    // await this.hooks.init.callPromise();
-    await this.hooks.init.promise();
+    this.hooks.init.call();
     this.inited = true;
   }
 

diff --git a/packages/g-lite/src/types.ts b/packages/g-lite/src/types.ts
@@ -1,5 +1,4 @@
 import type { vec2, vec3 } from 'gl-matrix';
-import type { IEventTarget } from '.';
 import type { IRenderer } from './AbstractRenderer';
 import type {
   CSSGlobalKeywords,
@@ -363,7 +362,7 @@ export interface RendererConfig {
 /**
  * eg. NodeCanvas, OffscreenCanvas, HTMLCanvasElement
  */
-export interface CanvasLike extends IEventTarget {
+export interface CanvasLike extends EventTarget {
   width: number;
   height: number;