From 24352cdfb462157d92d6a41ed6dd733b846e8380 Mon Sep 17 00:00:00 2001 From: "yuqi.pyq" Date: Mon, 12 Jun 2023 14:48:05 +0800 Subject: [PATCH] fix: change canvas' init hook frin async to sync #1117 --- .../g-canvas/src/Canvas2DContextService.ts | 2 +- .../src/CanvasKitContextService.ts | 36 +++++-- packages/g-lite/src/Canvas.ts | 73 +++++++++---- .../src/plugins/PrepareRendererPlugin.ts | 24 ++--- .../g-lite/src/services/ContextService.ts | 9 +- .../g-lite/src/services/RenderingService.ts | 8 +- packages/g-lite/src/types.ts | 3 +- packages/g-plugin-a11y/src/A11yPlugin.ts | 22 +++- .../src/AnnotationPlugin.ts | 2 +- .../src/SelectablePlugin.ts | 2 +- packages/g-plugin-box2d/src/Box2DPlugin.ts | 61 +++++++---- .../src/CanvasRendererPlugin.ts | 37 +++---- .../src/CanvaskitRendererPlugin.ts | 20 ++-- .../g-plugin-control/src/ControlPlugin.ts | 2 +- .../src/PickingPlugin.ts | 2 +- .../src/RenderGraphPlugin.ts | 100 +++++++++++------- .../src/DOMInteractionPlugin.ts | 69 ++++++------ .../g-plugin-dragndrop/src/DragndropPlugin.ts | 2 +- .../src/HTMLRenderingPlugin.ts | 26 ++--- .../src/LoadImagePlugin.ts | 12 ++- .../g-plugin-matterjs/src/MatterJSPlugin.ts | 2 +- .../src/MobileInteractionPlugin.ts | 37 +++---- packages/g-plugin-physx/src/PhysXPlugin.ts | 64 +++++------ .../src/RoughRendererPlugin.ts | 6 +- .../src/RoughRendererPlugin.ts | 2 +- .../src/SVGRendererPlugin.ts | 2 +- packages/g-plugin-yoga/src/YogaPlugin.ts | 84 ++++++++++++--- .../src/ZdogRendererPlugin.ts | 2 +- .../src/ZdogRendererPlugin.ts | 2 +- packages/g-svg/src/SVGContextService.ts | 2 +- packages/g-webgl/src/WebGLContextService.ts | 15 ++- packages/g-webgpu/src/WebGPUContextService.ts | 17 ++- site/examples/event/picking/demo/shapes.js | 2 +- site/examples/perf/basic/demo/texts.js | 2 +- .../canvaskit/demo/canvaskit-paragraph.js | 2 +- .../demo/canvaskit-text-along-path.js | 2 +- .../examples/shape/text/demo/d3-word-cloud.js | 2 +- .../examples/shape/text/demo/text-baseline.js | 2 +- .../examples/shape/text/demo/text-overflow.js | 2 +- site/examples/shape/text/demo/text.js | 2 +- .../shape/text/demo/web-font-loader.js | 2 +- 41 files changed, 455 insertions(+), 310 deletions(-) diff --git a/packages/g-canvas/src/Canvas2DContextService.ts b/packages/g-canvas/src/Canvas2DContextService.ts index 031e8f716..860f504a1 100644 --- 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/src/CanvasKitContextService.ts b/packages/g-canvaskit/src/CanvasKitContextService.ts index 59385b0f7..626e036a1 100644 --- 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 { +export class CanvasKitContextService + implements ContextService +{ private $container: HTMLElement | null; private $canvas: CanvasLike | null; private dpr: number; @@ -35,13 +37,16 @@ export class CanvasKitContextService implements ContextService 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); } @@ -49,7 +54,9 @@ export class CanvasKitContextService implements ContextService 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 // 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 } 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 } async toDataURL(options: Partial) { - return this.contextRegisterPluginOptions.canvaskitRendererPlugin.toDataURL(options); + return this.contextRegisterPluginOptions.canvaskitRendererPlugin.toDataURL( + options, + ); } private loadCanvaskit(): Promise { return CanvasKitInit({ - locateFile: (file: string) => this.contextRegisterPluginOptions.wasmDir + file, + locateFile: (file: string) => + this.contextRegisterPluginOptions.wasmDir + file, }); } } diff --git a/packages/g-lite/src/Canvas.ts b/packages/g-lite/src/Canvas.ts index fdc56df26..2b23eb6e8 100644 --- 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 index 68feb93fb..8b9a62433 100644 --- 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 index 4a49b9df2..2bdc256f7 100644 --- 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 { - init: () => Promise; + init?: () => void; + initAsync?: () => Promise; 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 index 7c64770a2..84770476c 100644 --- 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 index 5b50a192e..b2b49fc17 100644 --- 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; diff --git a/packages/g-plugin-a11y/src/A11yPlugin.ts b/packages/g-plugin-a11y/src/A11yPlugin.ts index 46b3a8b6b..dad2839c4 100644 --- a/packages/g-plugin-a11y/src/A11yPlugin.ts +++ b/packages/g-plugin-a11y/src/A11yPlugin.ts @@ -82,7 +82,7 @@ export class A11yPlugin implements RenderingPlugin { } }; - renderingService.hooks.init.tapPromise(A11yPlugin.tag, async () => { + renderingService.hooks.init.tap(A11yPlugin.tag, () => { if (enableExtractingText && !this.isSVG()) { this.textExtractor.activate(); } @@ -93,7 +93,10 @@ export class A11yPlugin implements RenderingPlugin { canvas.addEventListener(ElementEvent.MOUNTED, handleMounted); canvas.addEventListener(ElementEvent.UNMOUNTED, handleUnmounted); - canvas.addEventListener(ElementEvent.ATTR_MODIFIED, handleAttributeChanged); + canvas.addEventListener( + ElementEvent.ATTR_MODIFIED, + handleAttributeChanged, + ); canvas.addEventListener(ElementEvent.BOUNDS_CHANGED, handleBoundsChanged); }); @@ -108,12 +111,21 @@ export class A11yPlugin implements RenderingPlugin { canvas.removeEventListener(ElementEvent.MOUNTED, handleMounted); canvas.removeEventListener(ElementEvent.UNMOUNTED, handleUnmounted); - canvas.removeEventListener(ElementEvent.ATTR_MODIFIED, handleAttributeChanged); - canvas.removeEventListener(ElementEvent.BOUNDS_CHANGED, handleBoundsChanged); + canvas.removeEventListener( + ElementEvent.ATTR_MODIFIED, + handleAttributeChanged, + ); + canvas.removeEventListener( + ElementEvent.BOUNDS_CHANGED, + handleBoundsChanged, + ); }); } private isSVG() { - return isBrowser && this.context.contextService.getDomElement() instanceof SVGSVGElement; + return ( + isBrowser && + this.context.contextService.getDomElement() instanceof SVGSVGElement + ); } } diff --git a/packages/g-plugin-annotation/src/AnnotationPlugin.ts b/packages/g-plugin-annotation/src/AnnotationPlugin.ts index 31b13876d..51fce3b88 100644 --- a/packages/g-plugin-annotation/src/AnnotationPlugin.ts +++ b/packages/g-plugin-annotation/src/AnnotationPlugin.ts @@ -267,7 +267,7 @@ export class AnnotationPlugin implements RenderingPlugin { this.hotkeyActive = false; }; - renderingService.hooks.init.tapPromise(AnnotationPlugin.tag, async () => { + renderingService.hooks.init.tap(AnnotationPlugin.tag, () => { canvas.addEventListener('click', handleClick); canvas.addEventListener('pointerdown', handleMouseDown); canvas.addEventListener('pointermove', handleMouseMove); diff --git a/packages/g-plugin-annotation/src/SelectablePlugin.ts b/packages/g-plugin-annotation/src/SelectablePlugin.ts index 6bc31c433..19b783481 100644 --- a/packages/g-plugin-annotation/src/SelectablePlugin.ts +++ b/packages/g-plugin-annotation/src/SelectablePlugin.ts @@ -726,7 +726,7 @@ export class SelectablePlugin implements RenderingPlugin { } }; - renderingService.hooks.init.tapPromise(SelectablePlugin.tag, async () => { + renderingService.hooks.init.tap(SelectablePlugin.tag, () => { canvas.addEventListener('pointerdown', handleClick); canvas.addEventListener('pointerdown', handleMouseDown); canvas.addEventListener('pointermove', handleMouseMove); diff --git a/packages/g-plugin-box2d/src/Box2DPlugin.ts b/packages/g-plugin-box2d/src/Box2DPlugin.ts index b1455ce81..ff646f60c 100644 --- a/packages/g-plugin-box2d/src/Box2DPlugin.ts +++ b/packages/g-plugin-box2d/src/Box2DPlugin.ts @@ -155,7 +155,7 @@ export class Box2DPlugin implements RenderingPlugin { } }; - renderingService.hooks.init.tapPromise(Box2DPlugin.tag, async () => { + renderingService.hooks.init.tap(Box2DPlugin.tag, () => { canvas.addEventListener(ElementEvent.MOUNTED, handleMounted); canvas.addEventListener(ElementEvent.UNMOUNTED, handleUnmounted); canvas.addEventListener( @@ -163,15 +163,17 @@ export class Box2DPlugin implements RenderingPlugin { handleAttributeChanged, ); - this.Box2D = await this.loadBox2D(); + (async () => { + this.Box2D = await this.loadBox2D(); - this.temp = new this.Box2D.b2Vec2(0, 0); - this.temp2 = new this.Box2D.b2Vec2(0, 0); - this.createScene(); - this.handlePendingDisplayObjects(); + this.temp = new this.Box2D.b2Vec2(0, 0); + this.temp2 = new this.Box2D.b2Vec2(0, 0); + this.createScene(); + this.handlePendingDisplayObjects(); - // do simulation each frame - canvas.addEventListener(CanvasEvent.BEFORE_RENDER, simulate); + // do simulation each frame + canvas.addEventListener(CanvasEvent.BEFORE_RENDER, simulate); + })(); }); renderingService.hooks.destroy.tap(Box2DPlugin.tag, () => { @@ -412,22 +414,35 @@ export class Box2DPlugin implements RenderingPlugin { this.pendingDisplayObjects = []; } - private loadBox2D(): Promise { - const scriptPromise = new Promise((resolve) => { - const script = document.createElement('script'); - script.setAttribute('data-box2d-dir', BOX2D_UMD_DIR); - document.body.appendChild(script); - script.async = true; - script.onload = resolve; - script.src = `${BOX2D_UMD_DIR}entry.js`; + private async loadBox2D(): Promise { + const hasSIMD = WebAssembly.validate( + new Uint8Array([ + 0, 97, 115, 109, 1, 0, 0, 0, 1, 5, 1, 96, 0, 1, 123, 3, 2, 1, 0, 10, 10, + 1, 8, 0, 65, 0, 253, 15, 253, 98, 11, + ]), + ); + const moduleName = hasSIMD ? './Box2D.simd' : './Box2D'; + + // awaiting gives us a better stack trace (at the cost of an extra microtask) + const modulePromise = await new Promise((resolve, reject) => { + const tag = document.createElement('script'); + tag.onload = () => { + resolve(window.Box2D); + return false; + }; + tag.onerror = () => { + reject( + new Error( + `Failed to load Box2D. Check your browser console for network errors.`, + ), + ); + return false; + }; + tag.src = `${BOX2D_UMD_DIR}/${moduleName}.js`; + document.getElementsByTagName('head')[0].appendChild(tag); }); - return new Promise((resolve) => { - scriptPromise.then(() => { - (window).Box2D().then((Box2D: any) => { - resolve(Box2D); - }); - }); - }); + const Box2DFactory = await modulePromise; + return await Box2DFactory(); } } diff --git a/packages/g-plugin-canvas-renderer/src/CanvasRendererPlugin.ts b/packages/g-plugin-canvas-renderer/src/CanvasRendererPlugin.ts index 1fe110970..e05687b27 100644 --- a/packages/g-plugin-canvas-renderer/src/CanvasRendererPlugin.ts +++ b/packages/g-plugin-canvas-renderer/src/CanvasRendererPlugin.ts @@ -116,26 +116,23 @@ export class CanvasRendererPlugin implements RenderingPlugin { } }; - renderingService.hooks.init.tapPromise( - CanvasRendererPlugin.tag, - async () => { - canvas.addEventListener(ElementEvent.UNMOUNTED, handleUnmounted); - canvas.addEventListener(ElementEvent.CULLED, handleCulled); - - // clear fullscreen - const dpr = contextService.getDPR(); - const { width, height } = config; - const context = contextService.getContext(); - this.clearRect( - context, - 0, - 0, - width * dpr, - height * dpr, - config.background, - ); - }, - ); + renderingService.hooks.init.tap(CanvasRendererPlugin.tag, () => { + canvas.addEventListener(ElementEvent.UNMOUNTED, handleUnmounted); + canvas.addEventListener(ElementEvent.CULLED, handleCulled); + + // clear fullscreen + const dpr = contextService.getDPR(); + const { width, height } = config; + const context = contextService.getContext(); + this.clearRect( + context, + 0, + 0, + width * dpr, + height * dpr, + config.background, + ); + }); renderingService.hooks.destroy.tap(CanvasRendererPlugin.tag, () => { canvas.removeEventListener(ElementEvent.UNMOUNTED, handleUnmounted); diff --git a/packages/g-plugin-canvaskit-renderer/src/CanvaskitRendererPlugin.ts b/packages/g-plugin-canvaskit-renderer/src/CanvaskitRendererPlugin.ts index 517bf79fc..f3d0f4d43 100644 --- a/packages/g-plugin-canvaskit-renderer/src/CanvaskitRendererPlugin.ts +++ b/packages/g-plugin-canvaskit-renderer/src/CanvaskitRendererPlugin.ts @@ -136,15 +136,15 @@ export class CanvaskitRendererPlugin implements RenderingPlugin { this.context = context; const { renderingService, renderingContext } = context; - renderingService.hooks.init.tapPromise( - CanvaskitRendererPlugin.tag, - async () => { - const canvasKitContext = ( - this.context.contextService as ContextService - ).getContext(); - const { surface, CanvasKit } = canvasKitContext; - const { fonts } = this.canvaskitRendererPluginOptions; + renderingService.hooks.init.tap(CanvaskitRendererPlugin.tag, () => { + const canvasKitContext = ( + this.context.contextService as ContextService + ).getContext(); + const { surface, CanvasKit } = canvasKitContext; + const { fonts } = this.canvaskitRendererPluginOptions; + + (async () => { // load default fonts 'sans-serif', 'NotoSansCJK-Regular.ttf' await Promise.all( fonts.map(({ name, url }) => @@ -220,8 +220,8 @@ export class CanvaskitRendererPlugin implements RenderingPlugin { surface.requestAnimationFrame(drawFrame); }; surface.requestAnimationFrame(drawFrame); - }, - ); + })(); + }); renderingService.hooks.destroy.tap(CanvaskitRendererPlugin.tag, () => { const canvasKitContext = ( diff --git a/packages/g-plugin-control/src/ControlPlugin.ts b/packages/g-plugin-control/src/ControlPlugin.ts index 8ac72def7..20b02c332 100644 --- a/packages/g-plugin-control/src/ControlPlugin.ts +++ b/packages/g-plugin-control/src/ControlPlugin.ts @@ -33,7 +33,7 @@ export class ControlPlugin implements RenderingPlugin { this.canvasConfig = config; this.camera = camera; - renderingService.hooks.init.tapPromise(ControlPlugin.tag, async () => { + renderingService.hooks.init.tap(ControlPlugin.tag, () => { const root = renderingContext.root.ownerDocument.defaultView; // @ts-ignore this.hammertime = new Hammer(root); diff --git a/packages/g-plugin-device-renderer/src/PickingPlugin.ts b/packages/g-plugin-device-renderer/src/PickingPlugin.ts index 2221df370..1e64c487e 100644 --- a/packages/g-plugin-device-renderer/src/PickingPlugin.ts +++ b/packages/g-plugin-device-renderer/src/PickingPlugin.ts @@ -64,7 +64,7 @@ export class PickingPlugin implements RenderingPlugin { } }; - renderingService.hooks.init.tapPromise(PickingPlugin.tag, async () => { + renderingService.hooks.init.tap(PickingPlugin.tag, () => { canvas.addEventListener(ElementEvent.MOUNTED, handleMounted); }); diff --git a/packages/g-plugin-device-renderer/src/RenderGraphPlugin.ts b/packages/g-plugin-device-renderer/src/RenderGraphPlugin.ts index 353c036e3..749143faa 100644 --- a/packages/g-plugin-device-renderer/src/RenderGraphPlugin.ts +++ b/packages/g-plugin-device-renderer/src/RenderGraphPlugin.ts @@ -78,6 +78,8 @@ export class RenderGraphPlugin implements RenderingPlugin { */ private builder: RGGraphBuilder; + private pendingDisplayObjects: DisplayObject[] = []; + private enableCapture: boolean; private captureOptions: Partial; private capturePromise: Promise | undefined; @@ -120,7 +122,11 @@ export class RenderGraphPlugin implements RenderingPlugin { // @ts-ignore object.renderable3D = renderable3D; - this.batchManager.add(object); + if (this.swapChain) { + this.batchManager.add(object); + } else { + this.pendingDisplayObjects.push(object); + } }; const handleUnmounted = (e: FederatedEvent) => { @@ -134,7 +140,9 @@ export class RenderGraphPlugin implements RenderingPlugin { return; } - this.batchManager.remove(object); + if (this.swapChain) { + this.batchManager.remove(object); + } // @ts-ignore delete object.renderable3D; @@ -145,27 +153,31 @@ export class RenderGraphPlugin implements RenderingPlugin { }; const handleAttributeChanged = (e: MutationEvent) => { - const object = e.target as DisplayObject; - const { attrName, newValue } = e; - - if (attrName === 'zIndex') { - object.parentNode.forEach((child: DisplayObject) => { - this.batchManager.changeRenderOrder( - child, - child.sortable.renderOrder, - ); - }); - } else { - this.batchManager.updateAttribute(object, attrName, newValue); + if (this.swapChain) { + const object = e.target as DisplayObject; + const { attrName, newValue } = e; + + if (attrName === 'zIndex') { + object.parentNode.forEach((child: DisplayObject) => { + this.batchManager.changeRenderOrder( + child, + child.sortable.renderOrder, + ); + }); + } else { + this.batchManager.updateAttribute(object, attrName, newValue); + } } }; const handleBoundsChanged = (e: MutationEvent) => { - const object = e.target as DisplayObject; - this.batchManager.updateAttribute(object, 'modelMatrix', null); + if (this.swapChain) { + const object = e.target as DisplayObject; + this.batchManager.updateAttribute(object, 'modelMatrix', null); + } }; - renderingService.hooks.init.tapPromise(RenderGraphPlugin.tag, async () => { + renderingService.hooks.init.tap(RenderGraphPlugin.tag, () => { canvas.addEventListener(ElementEvent.MOUNTED, handleMounted); canvas.addEventListener(ElementEvent.UNMOUNTED, handleUnmounted); canvas.addEventListener( @@ -182,24 +194,34 @@ export class RenderGraphPlugin implements RenderingPlugin { const { width, height } = this.context.config; this.context.contextService.resize(width, height); - // create swap chain and get device - // @ts-ignore - this.swapChain = await this.context.deviceContribution.createSwapChain( - $canvas, - ); - this.device = this.swapChain.getDevice(); - this.renderHelper.setDevice(this.device); - this.renderHelper.renderInstManager.disableSimpleMode(); - this.swapChain.configureSwapChain($canvas.width, $canvas.height); - - canvas.addEventListener(CanvasEvent.RESIZE, () => { + (async () => { + // create swap chain and get device + // @ts-ignore + this.swapChain = await this.context.deviceContribution.createSwapChain( + $canvas, + ); + this.device = this.swapChain.getDevice(); + this.renderHelper.setDevice(this.device); + this.renderHelper.renderInstManager.disableSimpleMode(); this.swapChain.configureSwapChain($canvas.width, $canvas.height); - }); - this.batchManager.attach({ - device: this.device, - ...context, - }); + canvas.addEventListener(CanvasEvent.RESIZE, () => { + this.swapChain.configureSwapChain($canvas.width, $canvas.height); + }); + + this.batchManager.attach({ + device: this.device, + ...context, + }); + + this.pendingDisplayObjects.forEach((object) => { + this.batchManager.add(object); + }); + this.pendingDisplayObjects = []; + + // trigger rerender + this.context.renderingService.dirtify(); + })(); }); renderingService.hooks.destroy.tap(RenderGraphPlugin.tag, () => { @@ -221,9 +243,9 @@ export class RenderGraphPlugin implements RenderingPlugin { * build frame graph at the beginning of each frame */ renderingService.hooks.beginFrame.tap(RenderGraphPlugin.tag, () => { - // if (renderingContext.renderListCurrentFrame.length === 0) { - // return; - // } + if (!this.swapChain) { + return; + } const canvas = this.swapChain.getCanvas() as HTMLCanvasElement; const renderInstManager = this.renderHelper.renderInstManager; @@ -299,9 +321,9 @@ export class RenderGraphPlugin implements RenderingPlugin { }); renderingService.hooks.endFrame.tap(RenderGraphPlugin.tag, () => { - // if (renderingContext.renderListCurrentFrame.length === 0) { - // return; - // } + if (!this.swapChain) { + return; + } const renderInstManager = this.renderHelper.renderInstManager; diff --git a/packages/g-plugin-dom-interaction/src/DOMInteractionPlugin.ts b/packages/g-plugin-dom-interaction/src/DOMInteractionPlugin.ts index 707268ba8..85d02fce3 100644 --- a/packages/g-plugin-dom-interaction/src/DOMInteractionPlugin.ts +++ b/packages/g-plugin-dom-interaction/src/DOMInteractionPlugin.ts @@ -121,44 +121,41 @@ export class DOMInteractionPlugin implements RenderingPlugin { runtime.globalThis.removeEventListener('mouseup', onPointerUp, true); }; - renderingService.hooks.init.tapPromise( - DOMInteractionPlugin.tag, - async () => { - const $el = - this.context.contextService.getDomElement() as unknown as HTMLElement; + renderingService.hooks.init.tap(DOMInteractionPlugin.tag, () => { + const $el = + this.context.contextService.getDomElement() as unknown as HTMLElement; + // @ts-ignore + if (runtime.globalThis.navigator.msPointerEnabled) { + // @ts-ignore + $el.style.msContentZooming = 'none'; // @ts-ignore - if (runtime.globalThis.navigator.msPointerEnabled) { - // @ts-ignore - $el.style.msContentZooming = 'none'; - // @ts-ignore - $el.style.msTouchAction = 'none'; - } else if (canvas.supportsPointerEvents) { - $el.style.touchAction = 'none'; - } - - if (canvas.supportsPointerEvents) { - addPointerEventListener($el); - } else { - addMouseEventListener($el); - } - - if (canvas.supportsTouchEvents) { - addTouchEventListener($el); - } - - if (config.useNativeClickEvent) { - $el.addEventListener('click', onClick, true); - } - - // use passive event listeners - // @see https://zhuanlan.zhihu.com/p/24555031 - $el.addEventListener('wheel', onPointerWheel, { - passive: true, - capture: true, - }); - }, - ); + $el.style.msTouchAction = 'none'; + } else if (canvas.supportsPointerEvents) { + $el.style.touchAction = 'none'; + } + + if (canvas.supportsPointerEvents) { + addPointerEventListener($el); + } else { + addMouseEventListener($el); + } + + if (canvas.supportsTouchEvents) { + addTouchEventListener($el); + } + + if (config.useNativeClickEvent) { + $el.addEventListener('click', onClick, true); + } + + // use passive event listeners + // @see https://zhuanlan.zhihu.com/p/24555031 + $el.addEventListener('wheel', onPointerWheel, { + passive: true, + capture: true, + }); + }); renderingService.hooks.destroy.tap(DOMInteractionPlugin.tag, () => { const $el = diff --git a/packages/g-plugin-dragndrop/src/DragndropPlugin.ts b/packages/g-plugin-dragndrop/src/DragndropPlugin.ts index 7a98366ef..b6e70d6e9 100644 --- a/packages/g-plugin-dragndrop/src/DragndropPlugin.ts +++ b/packages/g-plugin-dragndrop/src/DragndropPlugin.ts @@ -166,7 +166,7 @@ export class DragndropPlugin implements RenderingPlugin { } }; - renderingService.hooks.init.tapPromise(DragndropPlugin.tag, async () => { + renderingService.hooks.init.tap(DragndropPlugin.tag, () => { canvas.addEventListener('pointerdown', handlePointerdown); }); diff --git a/packages/g-plugin-html-renderer/src/HTMLRenderingPlugin.ts b/packages/g-plugin-html-renderer/src/HTMLRenderingPlugin.ts index 730f493c3..4ec7200ce 100644 --- a/packages/g-plugin-html-renderer/src/HTMLRenderingPlugin.ts +++ b/packages/g-plugin-html-renderer/src/HTMLRenderingPlugin.ts @@ -122,22 +122,16 @@ export class HTMLRenderingPlugin implements RenderingPlugin { } }; - renderingService.hooks.init.tapPromise( - HTMLRenderingPlugin.tag, - async () => { - canvas.addEventListener(CanvasEvent.RESIZE, handleCanvasResize); - 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(HTMLRenderingPlugin.tag, () => { + canvas.addEventListener(CanvasEvent.RESIZE, handleCanvasResize); + canvas.addEventListener(ElementEvent.MOUNTED, handleMounted); + canvas.addEventListener(ElementEvent.UNMOUNTED, handleUnmounted); + canvas.addEventListener( + ElementEvent.ATTR_MODIFIED, + handleAttributeChanged, + ); + canvas.addEventListener(ElementEvent.BOUNDS_CHANGED, handleBoundsChanged); + }); renderingService.hooks.endFrame.tap(HTMLRenderingPlugin.tag, () => { if ( diff --git a/packages/g-plugin-image-loader/src/LoadImagePlugin.ts b/packages/g-plugin-image-loader/src/LoadImagePlugin.ts index ed548e4ee..196d3eb31 100644 --- a/packages/g-plugin-image-loader/src/LoadImagePlugin.ts +++ b/packages/g-plugin-image-loader/src/LoadImagePlugin.ts @@ -48,14 +48,20 @@ export class LoadImagePlugin implements RenderingPlugin { } }; - renderingService.hooks.init.tapPromise(LoadImagePlugin.tag, async () => { + renderingService.hooks.init.tap(LoadImagePlugin.tag, () => { canvas.addEventListener(ElementEvent.MOUNTED, handleMounted); - canvas.addEventListener(ElementEvent.ATTR_MODIFIED, handleAttributeChanged); + canvas.addEventListener( + ElementEvent.ATTR_MODIFIED, + handleAttributeChanged, + ); }); renderingService.hooks.destroy.tap(LoadImagePlugin.tag, () => { canvas.removeEventListener(ElementEvent.MOUNTED, handleMounted); - canvas.removeEventListener(ElementEvent.ATTR_MODIFIED, handleAttributeChanged); + canvas.removeEventListener( + ElementEvent.ATTR_MODIFIED, + handleAttributeChanged, + ); }); } } diff --git a/packages/g-plugin-matterjs/src/MatterJSPlugin.ts b/packages/g-plugin-matterjs/src/MatterJSPlugin.ts index 8e173d973..e8d36a0e2 100644 --- a/packages/g-plugin-matterjs/src/MatterJSPlugin.ts +++ b/packages/g-plugin-matterjs/src/MatterJSPlugin.ts @@ -122,7 +122,7 @@ export class MatterJSPlugin implements RenderingPlugin { } }; - renderingService.hooks.init.tapPromise(MatterJSPlugin.tag, async () => { + renderingService.hooks.init.tap(MatterJSPlugin.tag, () => { canvas.addEventListener(ElementEvent.MOUNTED, handleMounted); canvas.addEventListener(ElementEvent.UNMOUNTED, handleUnmounted); canvas.addEventListener( diff --git a/packages/g-plugin-mobile-interaction/src/MobileInteractionPlugin.ts b/packages/g-plugin-mobile-interaction/src/MobileInteractionPlugin.ts index 53b2a04ec..aa19ac774 100644 --- a/packages/g-plugin-mobile-interaction/src/MobileInteractionPlugin.ts +++ b/packages/g-plugin-mobile-interaction/src/MobileInteractionPlugin.ts @@ -43,27 +43,24 @@ export class MobileInteractionPlugin implements RenderingPlugin { renderingService.hooks.pointerCancel.call(ev); }; - renderingService.hooks.init.tapPromise( - MobileInteractionPlugin.tag, - async () => { - // 基于小程序上下文的事件监听方式，绑定事件监听，可以参考下面基于 DOM 的方式 - canvasEl.addEventListener('touchstart', onPointerDown, true); - canvasEl.addEventListener('touchend', onPointerUp, true); - canvasEl.addEventListener('touchmove', onPointerMove, true); - canvasEl.addEventListener('touchcancel', onPointerCancel, true); - // FIXME: 这里不应该只在 canvasEl 上监听 mousemove 和 mouseup，而应该在更高层级的节点上例如 document 监听。 - // 否则无法判断是否移出了 canvasEl - // canvasEl.addEventListener('mousemove', onPointerMove, true); - // canvasEl.addEventListener('mousedown', onPointerDown, true); - canvasEl.addEventListener('mouseout', onPointerOut, true); - canvasEl.addEventListener('mouseover', onPointerOver, true); - // canvasEl.addEventListener('mouseup', onPointerUp, true); + renderingService.hooks.init.tap(MobileInteractionPlugin.tag, () => { + // 基于小程序上下文的事件监听方式，绑定事件监听，可以参考下面基于 DOM 的方式 + canvasEl.addEventListener('touchstart', onPointerDown, true); + canvasEl.addEventListener('touchend', onPointerUp, true); + canvasEl.addEventListener('touchmove', onPointerMove, true); + canvasEl.addEventListener('touchcancel', onPointerCancel, true); + // FIXME: 这里不应该只在 canvasEl 上监听 mousemove 和 mouseup，而应该在更高层级的节点上例如 document 监听。 + // 否则无法判断是否移出了 canvasEl + // canvasEl.addEventListener('mousemove', onPointerMove, true); + // canvasEl.addEventListener('mousedown', onPointerDown, true); + canvasEl.addEventListener('mouseout', onPointerOut, true); + canvasEl.addEventListener('mouseover', onPointerOver, true); + // canvasEl.addEventListener('mouseup', onPointerUp, true); - if (config.useNativeClickEvent) { - canvasEl.addEventListener('click', onClick, true); - } - }, - ); + if (config.useNativeClickEvent) { + canvasEl.addEventListener('click', onClick, true); + } + }); renderingService.hooks.destroy.tap(MobileInteractionPlugin.tag, () => { // 基于小程序上下文的事件监听方式，移除事件监听 diff --git a/packages/g-plugin-physx/src/PhysXPlugin.ts b/packages/g-plugin-physx/src/PhysXPlugin.ts index 4f9cc727d..307ad7119 100644 --- a/packages/g-plugin-physx/src/PhysXPlugin.ts +++ b/packages/g-plugin-physx/src/PhysXPlugin.ts @@ -43,39 +43,41 @@ export class PhysXPlugin implements RenderingPlugin { } }; - renderingService.hooks.init.tapPromise(PhysXPlugin.tag, async () => { + renderingService.hooks.init.tap(PhysXPlugin.tag, () => { canvas.addEventListener(ElementEvent.MOUNTED, handleMounted); - this.PhysX = (await this.initPhysX()) as any; - this.createScene(); - this.handlePendingDisplayObjects(); - - // do simulation each frame - renderingContext.root.ownerDocument.defaultView.addEventListener( - CanvasEvent.BEFORE_RENDER, - () => { - if (this.scene) { - this.scene.simulate(1 / 60, true); - this.scene.fetchResults(true); - - this.bodies.forEach(({ body, displayObject }) => { - const transform = body.getGlobalPose(); - const { translation, rotation } = transform; - displayObject.setPosition( - translation.x, - translation.y, - translation.z, - ); - displayObject.setRotation( - rotation.x, - rotation.y, - rotation.z, - rotation.w, - ); - }); - } - }, - ); + (async () => { + this.PhysX = (await this.initPhysX()) as any; + this.createScene(); + this.handlePendingDisplayObjects(); + + // do simulation each frame + renderingContext.root.ownerDocument.defaultView.addEventListener( + CanvasEvent.BEFORE_RENDER, + () => { + if (this.scene) { + this.scene.simulate(1 / 60, true); + this.scene.fetchResults(true); + + this.bodies.forEach(({ body, displayObject }) => { + const transform = body.getGlobalPose(); + const { translation, rotation } = transform; + displayObject.setPosition( + translation.x, + translation.y, + translation.z, + ); + displayObject.setRotation( + rotation.x, + rotation.y, + rotation.z, + rotation.w, + ); + }); + } + }, + ); + })(); }); renderingService.hooks.destroy.tap(PhysXPlugin.tag, () => { diff --git a/packages/g-plugin-rough-canvas-renderer/src/RoughRendererPlugin.ts b/packages/g-plugin-rough-canvas-renderer/src/RoughRendererPlugin.ts index c38d325eb..6441341ec 100644 --- a/packages/g-plugin-rough-canvas-renderer/src/RoughRendererPlugin.ts +++ b/packages/g-plugin-rough-canvas-renderer/src/RoughRendererPlugin.ts @@ -7,7 +7,7 @@ export class RoughRendererPlugin implements RenderingPlugin { apply(context: RenderingPluginContext) { const { config, contextService, renderingService } = context; - renderingService.hooks.init.tapPromise(RoughRendererPlugin.tag, async () => { + renderingService.hooks.init.tap(RoughRendererPlugin.tag, () => { /** * disable dirtycheck & dirty rectangle rendering */ @@ -17,7 +17,9 @@ export class RoughRendererPlugin implements RenderingPlugin { const context = contextService.getContext(); // @see https://github.com/rough-stuff/rough/wiki#roughcanvas-canvaselement--config // @ts-ignore - context.roughCanvas = rough.canvas(contextService.getDomElement() as HTMLCanvasElement); + context.roughCanvas = rough.canvas( + contextService.getDomElement() as HTMLCanvasElement, + ); }); renderingService.hooks.destroy.tap(RoughRendererPlugin.tag, () => {}); diff --git a/packages/g-plugin-rough-svg-renderer/src/RoughRendererPlugin.ts b/packages/g-plugin-rough-svg-renderer/src/RoughRendererPlugin.ts index 64775d849..f95f5aac2 100644 --- a/packages/g-plugin-rough-svg-renderer/src/RoughRendererPlugin.ts +++ b/packages/g-plugin-rough-svg-renderer/src/RoughRendererPlugin.ts @@ -7,7 +7,7 @@ export class RoughRendererPlugin implements RenderingPlugin { apply(context: RenderingPluginContext) { const { contextService, renderingService } = context; - renderingService.hooks.init.tapPromise(RoughRendererPlugin.tag, async () => { + renderingService.hooks.init.tap(RoughRendererPlugin.tag, () => { /** * disable dirtycheck & dirty rectangle rendering */ diff --git a/packages/g-plugin-svg-renderer/src/SVGRendererPlugin.ts b/packages/g-plugin-svg-renderer/src/SVGRendererPlugin.ts index af461ebfa..10e430d78 100644 --- a/packages/g-plugin-svg-renderer/src/SVGRendererPlugin.ts +++ b/packages/g-plugin-svg-renderer/src/SVGRendererPlugin.ts @@ -272,7 +272,7 @@ export class SVGRendererPlugin implements RenderingPlugin { } }; - renderingService.hooks.init.tapPromise(SVGRendererPlugin.tag, async () => { + renderingService.hooks.init.tap(SVGRendererPlugin.tag, () => { const { background, document } = this.context.config; // diff --git a/packages/g-plugin-yoga/src/YogaPlugin.ts b/packages/g-plugin-yoga/src/YogaPlugin.ts index c32aa94c4..4dda0f6df 100644 --- a/packages/g-plugin-yoga/src/YogaPlugin.ts +++ b/packages/g-plugin-yoga/src/YogaPlugin.ts @@ -7,7 +7,13 @@ import type { RenderingPlugin, RenderingPluginContext, } from '@antv/g-lite'; -import { AABB, CSSKeywordValue, ElementEvent, Shape, UnitType } from '@antv/g-lite'; +import { + AABB, + CSSKeywordValue, + ElementEvent, + Shape, + UnitType, +} from '@antv/g-lite'; import type { YogaAlign, YogaDisplay, @@ -144,13 +150,16 @@ export class YogaPlugin implements RenderingPlugin { this.needRecalculateLayout = true; }; - renderingService.hooks.init.tapPromise(YogaPlugin.tag, async () => { + renderingService.hooks.init.tap(YogaPlugin.tag, () => { canvas.addEventListener(ElementEvent.MOUNTED, handleMounted); canvas.addEventListener(ElementEvent.UNMOUNTED, handleUnmounted); canvas.addEventListener(ElementEvent.INSERTED, handleInserted); canvas.addEventListener(ElementEvent.REMOVED, handleRemoved); canvas.addEventListener(ElementEvent.BOUNDS_CHANGED, handleBoundsChanged); - canvas.addEventListener(ElementEvent.ATTR_MODIFIED, handleAttributeChanged); + canvas.addEventListener( + ElementEvent.ATTR_MODIFIED, + handleAttributeChanged, + ); }); renderingService.hooks.destroy.tap(YogaPlugin.tag, () => { @@ -158,8 +167,14 @@ export class YogaPlugin implements RenderingPlugin { canvas.removeEventListener(ElementEvent.UNMOUNTED, handleUnmounted); canvas.removeEventListener(ElementEvent.INSERTED, handleInserted); canvas.removeEventListener(ElementEvent.REMOVED, handleRemoved); - canvas.removeEventListener(ElementEvent.BOUNDS_CHANGED, handleBoundsChanged); - canvas.removeEventListener(ElementEvent.ATTR_MODIFIED, handleAttributeChanged); + canvas.removeEventListener( + ElementEvent.BOUNDS_CHANGED, + handleBoundsChanged, + ); + canvas.removeEventListener( + ElementEvent.ATTR_MODIFIED, + handleAttributeChanged, + ); }); // const printYogaTree = (node: YogaNode) => { @@ -232,7 +247,10 @@ export class YogaPlugin implements RenderingPlugin { /** * sync YogaNode */ - private syncAttributes(object: DisplayObject, parsed: Record): boolean { + private syncAttributes( + object: DisplayObject, + parsed: Record, + ): boolean { const node = this.nodes[object.entity]; const { yogaUpdatingFlag } = object.style; @@ -243,25 +261,41 @@ export class YogaPlugin implements RenderingPlugin { const newValue = parsed[attributeName]; if (attributeName === 'flexDirection') { node.setFlexDirection( - YogaConstants.FlexDirection[newValue as keyof typeof FlexDirection], + ( + YogaConstants.FlexDirection[newValue as keyof typeof FlexDirection] + ), ); needRecalculateLayout = true; } else if (attributeName === 'justifyContent') { node.setJustifyContent( - YogaConstants.JustifyContent[newValue as keyof typeof JustifyContent], + ( + YogaConstants.JustifyContent[ + newValue as keyof typeof JustifyContent + ] + ), ); needRecalculateLayout = true; } else if (attributeName === 'alignContent') { - node.setAlignContent(YogaConstants.Align[newValue as keyof typeof Align]); + node.setAlignContent( + YogaConstants.Align[newValue as keyof typeof Align], + ); needRecalculateLayout = true; } else if (attributeName === 'alignItems') { - node.setAlignItems(YogaConstants.Align[newValue as keyof typeof Align]); + node.setAlignItems( + YogaConstants.Align[newValue as keyof typeof Align], + ); needRecalculateLayout = true; } else if (attributeName === 'alignSelf') { - node.setAlignSelf(YogaConstants.Align[newValue as keyof typeof Align]); + node.setAlignSelf( + YogaConstants.Align[newValue as keyof typeof Align], + ); needRecalculateLayout = true; } else if (attributeName === 'flexWrap') { - node.setFlexWrap(YogaConstants.FlexWrap[newValue as keyof typeof FlexWrap]); + node.setFlexWrap( + ( + YogaConstants.FlexWrap[newValue as keyof typeof FlexWrap] + ), + ); needRecalculateLayout = true; } else if (attributeName === 'flexGrow') { node.setFlexGrow((newValue as CSSUnitValue).value); @@ -274,11 +308,18 @@ export class YogaPlugin implements RenderingPlugin { needRecalculateLayout = true; } else if (attributeName === 'position') { node.setPositionType( - YogaConstants.PositionType[newValue as keyof typeof PositionType], + ( + YogaConstants.PositionType[newValue as keyof typeof PositionType] + ), ); needRecalculateLayout = true; } else if (attributeName === 'padding') { - const margin = newValue as [CSSUnitValue, CSSUnitValue, CSSUnitValue, CSSUnitValue]; + const margin = newValue as [ + CSSUnitValue, + CSSUnitValue, + CSSUnitValue, + CSSUnitValue, + ]; YogaEdges.forEach((edge, index) => { const value = margin[index]; this.setPadding(node, edge, value); @@ -309,7 +350,12 @@ export class YogaPlugin implements RenderingPlugin { this.setPadding(node, EDGE_LEFT, newValue as CSSUnitValue); needRecalculateLayout = true; } else if (attributeName === 'margin') { - const margin = newValue as [CSSUnitValue, CSSUnitValue, CSSUnitValue, CSSUnitValue]; + const margin = newValue as [ + CSSUnitValue, + CSSUnitValue, + CSSUnitValue, + CSSUnitValue, + ]; YogaEdges.forEach((edge, index) => { const value = margin[index]; this.setMargin(node, edge, value); @@ -364,7 +410,9 @@ export class YogaPlugin implements RenderingPlugin { this.setMaxHeight(node, newValue as CSSUnitValue); needRecalculateLayout = true; } else if (attributeName === 'display') { - node.setDisplay(YogaConstants.Display[newValue as keyof typeof Display]); + node.setDisplay( + YogaConstants.Display[newValue as keyof typeof Display], + ); needRecalculateLayout = true; } else if (attributeName === 'width' && !yogaUpdatingFlag) { this.setWidth(node, newValue as CSSUnitValue | CSSKeywordValue); @@ -500,7 +548,9 @@ export class YogaPlugin implements RenderingPlugin { } private updateDisplayObjectPosition(object: DisplayObject, node: YogaNode) { - const isInFlexContainer = this.isFlex(object?.parentElement as DisplayObject); + const isInFlexContainer = this.isFlex( + object?.parentElement as DisplayObject, + ); if (isInFlexContainer) { const layout = node.getComputedLayout(); let { top, left } = layout; diff --git a/packages/g-plugin-zdog-canvas-renderer/src/ZdogRendererPlugin.ts b/packages/g-plugin-zdog-canvas-renderer/src/ZdogRendererPlugin.ts index dd858fdb8..2702c6400 100644 --- a/packages/g-plugin-zdog-canvas-renderer/src/ZdogRendererPlugin.ts +++ b/packages/g-plugin-zdog-canvas-renderer/src/ZdogRendererPlugin.ts @@ -11,7 +11,7 @@ export class ZdogRendererPlugin implements RenderingPlugin { apply(context: RenderingPluginContext) { const { config, contextService, renderingService } = context; - renderingService.hooks.init.tapPromise(ZdogRendererPlugin.tag, async () => { + renderingService.hooks.init.tap(ZdogRendererPlugin.tag, () => { /** * disable dirtycheck & dirty rectangle rendering */ diff --git a/packages/g-plugin-zdog-svg-renderer/src/ZdogRendererPlugin.ts b/packages/g-plugin-zdog-svg-renderer/src/ZdogRendererPlugin.ts index abf876a8c..221e0be96 100644 --- a/packages/g-plugin-zdog-svg-renderer/src/ZdogRendererPlugin.ts +++ b/packages/g-plugin-zdog-svg-renderer/src/ZdogRendererPlugin.ts @@ -58,7 +58,7 @@ export class ZdogRendererPlugin implements RenderingPlugin { } }; - renderingService.hooks.init.tapPromise(ZdogRendererPlugin.tag, async () => { + renderingService.hooks.init.tap(ZdogRendererPlugin.tag, () => { this.scene = new Anchor(); const $svg = contextService.getContext() as SVGSVGElement; diff --git a/packages/g-svg/src/SVGContextService.ts b/packages/g-svg/src/SVGContextService.ts index 46999cb2d..44ac1025e 100644 --- a/packages/g-svg/src/SVGContextService.ts +++ b/packages/g-svg/src/SVGContextService.ts @@ -21,7 +21,7 @@ export class SVGContextService implements ContextService { this.canvasConfig = context.config; } - async init() { + init() { const { container, document: doc, devicePixelRatio } = this.canvasConfig; // create container diff --git a/packages/g-webgl/src/WebGLContextService.ts b/packages/g-webgl/src/WebGLContextService.ts index f16ef7845..945e261f6 100644 --- a/packages/g-webgl/src/WebGLContextService.ts +++ b/packages/g-webgl/src/WebGLContextService.ts @@ -10,7 +10,9 @@ import { isBrowser, setDOMSize } from '@antv/g-lite'; import type * as DeviceRenderer from '@antv/g-plugin-device-renderer'; import { isString } from '@antv/util'; -export class WebGLContextService implements ContextService { +export class WebGLContextService + implements ContextService +{ private $container: HTMLElement | null; private $canvas: CanvasLike | null; private dpr: number; @@ -24,13 +26,16 @@ export class WebGLContextService implements ContextService { this.deviceRendererPlugin = context.deviceRendererPlugin; } - async init() { + init() { const { container, canvas } = 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); } @@ -38,7 +41,9 @@ export class WebGPUContextService implements ContextService { 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'); @@ -58,8 +63,10 @@ export class WebGPUContextService implements ContextService { } getContext() { - // @ts-ignore - return this.deviceRendererPlugin.getDevice().canvasContext as GPUCanvasContext; + return ( + // @ts-ignore + this.deviceRendererPlugin.getDevice().canvasContext as GPUCanvasContext + ); } getBoundingClientRect() { diff --git a/site/examples/event/picking/demo/shapes.js b/site/examples/event/picking/demo/shapes.js index a78cadd1b..c109cce84 100644 --- a/site/examples/event/picking/demo/shapes.js +++ b/site/examples/event/picking/demo/shapes.js @@ -33,7 +33,7 @@ const canvaskitRenderer = new CanvaskitRenderer({ }, { name: 'sans-serif', - url: '/NotoSansCJKsc-VF.ttf', + url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*064aSK2LUPEAAAAAAAAAAAAADmJ7AQ/NotoSansCJKsc-VF.ttf', }, ], }); diff --git a/site/examples/perf/basic/demo/texts.js b/site/examples/perf/basic/demo/texts.js index f2d8b1358..d07ad3520 100644 --- a/site/examples/perf/basic/demo/texts.js +++ b/site/examples/perf/basic/demo/texts.js @@ -16,7 +16,7 @@ const canvaskitRenderer = new CanvaskitRenderer({ fonts: [ { name: 'sans-serif', - url: '/NotoSansCJKsc-VF.ttf', + url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*064aSK2LUPEAAAAAAAAAAAAADmJ7AQ/NotoSansCJKsc-VF.ttf', }, ], }); diff --git a/site/examples/plugins/canvaskit/demo/canvaskit-paragraph.js b/site/examples/plugins/canvaskit/demo/canvaskit-paragraph.js index 3711e3511..daaefee70 100644 --- a/site/examples/plugins/canvaskit/demo/canvaskit-paragraph.js +++ b/site/examples/plugins/canvaskit/demo/canvaskit-paragraph.js @@ -23,7 +23,7 @@ const canvaskitRenderer = new CanvaskitRenderer({ }, { name: 'sans-serif', - url: '/NotoSansCJKsc-VF.ttf', + url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*064aSK2LUPEAAAAAAAAAAAAADmJ7AQ/NotoSansCJKsc-VF.ttf', }, ], }); diff --git a/site/examples/plugins/canvaskit/demo/canvaskit-text-along-path.js b/site/examples/plugins/canvaskit/demo/canvaskit-text-along-path.js index 6171df2b8..d66346f5a 100644 --- a/site/examples/plugins/canvaskit/demo/canvaskit-text-along-path.js +++ b/site/examples/plugins/canvaskit/demo/canvaskit-text-along-path.js @@ -14,7 +14,7 @@ const canvaskitRenderer = new CanvaskitRenderer({ fonts: [ { name: 'sans-serif', - url: '/NotoSansCJKsc-VF.ttf', + url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*064aSK2LUPEAAAAAAAAAAAAADmJ7AQ/NotoSansCJKsc-VF.ttf', }, ], }); diff --git a/site/examples/shape/text/demo/d3-word-cloud.js b/site/examples/shape/text/demo/d3-word-cloud.js index c8ee34d55..0bf2e4991 100644 --- a/site/examples/shape/text/demo/d3-word-cloud.js +++ b/site/examples/shape/text/demo/d3-word-cloud.js @@ -31,7 +31,7 @@ const canvaskitRenderer = new CanvaskitRenderer({ fonts: [ { name: 'sans-serif', - url: '/NotoSansCJKsc-VF.ttf', + url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*064aSK2LUPEAAAAAAAAAAAAADmJ7AQ/NotoSansCJKsc-VF.ttf', }, ], }); diff --git a/site/examples/shape/text/demo/text-baseline.js b/site/examples/shape/text/demo/text-baseline.js index f136d73d5..29a6ec073 100644 --- a/site/examples/shape/text/demo/text-baseline.js +++ b/site/examples/shape/text/demo/text-baseline.js @@ -18,7 +18,7 @@ const canvaskitRenderer = new CanvaskitRenderer({ fonts: [ { name: 'sans-serif', - url: '/NotoSansCJKsc-VF.ttf', + url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*064aSK2LUPEAAAAAAAAAAAAADmJ7AQ/NotoSansCJKsc-VF.ttf', }, ], }); diff --git a/site/examples/shape/text/demo/text-overflow.js b/site/examples/shape/text/demo/text-overflow.js index d944328f9..576454fbd 100644 --- a/site/examples/shape/text/demo/text-overflow.js +++ b/site/examples/shape/text/demo/text-overflow.js @@ -16,7 +16,7 @@ const canvaskitRenderer = new CanvaskitRenderer({ fonts: [ { name: 'sans-serif', - url: '/NotoSansCJKsc-VF.ttf', + url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*064aSK2LUPEAAAAAAAAAAAAADmJ7AQ/NotoSansCJKsc-VF.ttf', }, ], }); diff --git a/site/examples/shape/text/demo/text.js b/site/examples/shape/text/demo/text.js index af8918004..f9e5103a2 100644 --- a/site/examples/shape/text/demo/text.js +++ b/site/examples/shape/text/demo/text.js @@ -16,7 +16,7 @@ const canvaskitRenderer = new CanvaskitRenderer({ fonts: [ { name: 'sans-serif', - url: '/NotoSansCJKsc-VF.ttf', + url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*064aSK2LUPEAAAAAAAAAAAAADmJ7AQ/NotoSansCJKsc-VF.ttf', }, ], }); diff --git a/site/examples/shape/text/demo/web-font-loader.js b/site/examples/shape/text/demo/web-font-loader.js index f67ffad51..0b90339ff 100644 --- a/site/examples/shape/text/demo/web-font-loader.js +++ b/site/examples/shape/text/demo/web-font-loader.js @@ -17,7 +17,7 @@ const canvaskitRenderer = new CanvaskitRenderer({ fonts: [ { name: 'sans-serif', - url: '/NotoSansCJKsc-VF.ttf', + url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*064aSK2LUPEAAAAAAAAAAAAADmJ7AQ/NotoSansCJKsc-VF.ttf', }, ], });