Remove support for passing a canvas ID to PAGView.init() in miniprograms. (#2824)

Co-authored-by: billyjin <[email protected]>
(cherry picked from commit d7532ff)

Author: 2 people

web/demo/wechat-miniprogram/pages/benchmark/benchmark.js

@@ -20,7 +20,7 @@ Page({
             const canvas = res[0].node;
             const buffer = await loadFileByRequest(`${origin}${this.data.pagMap[index]}`);
             const pagFile = await this.PAG.PAGFile.load(buffer);
-            const pagView = await this.PAG.PAGView.init(pagFile, canvas, { firstFrame: true }); // 自v4.4.29开始建议传入wxml中定义的canvasId
+            const pagView = await this.PAG.PAGView.init(pagFile, canvas, { firstFrame: true });
             pagView.setRepeatCount(0);
             pagView.addListener('onAnimationUpdate', () => {
               wx.createSelectorQuery()

web/demo/wechat-miniprogram/pages/index/index.js

@@ -53,7 +53,7 @@ Page({
     const time = wx.getPerformance().now();
     this.pagFile = await this.PAG.PAGFile.load(buffer);
     debugData = { ...debugData, decodeTime: wx.getPerformance().now() - time };
-    this.pagView = await this.PAG.PAGView.init(this.pagFile, canvas); // 自v4.4.29开始建议传入wxml中定义的canvasId
+    this.pagView = await this.PAG.PAGView.init(this.pagFile, canvas);
     this.updateDebugData(this.pagView);
     this.pagView.addListener('onAnimationUpdate', () => {
       this.updateDebugData(this.pagView);

web/src/wechat/interfaces.ts

@@ -13,7 +13,6 @@ export interface wx {
     compInst?: any,
   ) => OffscreenCanvas;
   getPerformance: () => Performance;
-  createSelectorQuery: () => SelectorQuery;
 }
 
 export interface FileSystemManager {
@@ -80,19 +79,3 @@ export interface SystemInfo {
   /** 设备像素比 */
   pixelRatio: number;
 }
-
-interface Fields {
-  node?: boolean;
-  size?: boolean;
-}
-
-interface NodesRef {
-  id: string;
-  fields: (fields: Fields) => SelectorQuery;
-}
-
-export interface SelectorQuery {
-  select: (selector: string) => NodesRef;
-  selectAll: (selector: string) => NodesRef;
-  exec: (callback?: (...args: any[]) => any) => NodesRef;
-}

web/src/wechat/pag-view.ts

@@ -34,38 +34,9 @@ function isOffscreenCanvas(canvas: any): boolean {
   return false;
 }
 
-interface CanvasSize {
-  width: number;
-  height: number;
-}
-
 @destroyVerify
 @wasmAwaitRewind
 export class PAGView extends NativePAGView {
-  /**
-   * Get canvas element by canvas ID
-   *
-   * @param {string} canvasId - The ID of the canvas element to find
-   *
-   * @returns {Promise<HTMLCanvasElement | OffscreenCanvas | null>}
-   *          - Returns the found canvas element, or null if not found
-   */
-  public static getCanvasElementByCanvasId(canvasId: string): Promise<HTMLCanvasElement | OffscreenCanvas> {
-    return new Promise((resolve, reject) => {
-      const query = wx.createSelectorQuery();
-      query
-        .select(`#${canvasId}`)
-        .fields({ node: true, size: true })
-        .exec((res) => {
-          if (res[0] && res[0].node) {
-            resolve(res[0].node);
-          } else {
-            reject(new Error(`Cannot find Canvas element with ID ${canvasId}`));
-          }
-        });
-    });
-  }
-
   /**
    * Create pag view.
    * @param file pag file.
@@ -75,29 +46,18 @@ export class PAGView extends NativePAGView {
    */
   public static async init(
     file: PAGComposition,
-    canvas: HTMLCanvasElement | OffscreenCanvas | string,
+    canvas: HTMLCanvasElement | OffscreenCanvas,
     initOptions: PAGViewOptions = {},
   ): Promise<PAGView> {
-    let canvasElement: HTMLCanvasElement | OffscreenCanvas | null = null;
-    if (typeof canvas === 'string') {
-      canvasElement = await this.getCanvasElementByCanvasId(canvas);
-    } else {
-      canvasElement = canvas;
-    }
-    if (!canvasElement) throw new Error('Canvas is not found!');
-
     const pagPlayer = PAGModule.PAGPlayer.create();
-    const pagView = new PAGView(pagPlayer, canvasElement);
-    if (typeof canvas === 'string') {
-      pagView.canvasId = canvas;
-    }
+    const pagView = new PAGView(pagPlayer, canvas);
     pagView.pagViewOptions = { ...pagView.pagViewOptions, ...initOptions };
-    await pagView.resetSize(pagView.pagViewOptions.useScale);
-    pagView.renderCanvas = RenderCanvas.from(canvasElement, { alpha: true });
+    pagView.resetSize(pagView.pagViewOptions.useScale);
+    pagView.renderCanvas = RenderCanvas.from(canvas, { alpha: true });
     pagView.renderCanvas.retain();
     pagView.pagGlContext = BackendContext.from(pagView.renderCanvas.glContext as BackendContext);
     pagView.frameRate = file.frameRate();
-    pagView.pagSurface = this.makePAGSurface(pagView.pagGlContext, canvasElement.width, canvasElement.height);
+    pagView.pagSurface = this.makePAGSurface(pagView.pagGlContext, canvas.width, canvas.height);
     pagView.player.setSurface(pagView.pagSurface);
     pagView.player.setComposition(file);
     pagView.setProgress(0);
@@ -113,8 +73,6 @@ export class PAGView extends NativePAGView {
     useScale: true,
   };
 
-  private canvasId = '';
-
   /**
    * Update size when changed canvas size.
    */
@@ -129,27 +87,7 @@ export class PAGView extends NativePAGView {
     this.pagSurface = pagSurface;
   }
 
-  public getCanvasCssSize(canvasId: string): Promise<CanvasSize> {
-    return new Promise((resolve) => {
-      wx.createSelectorQuery()
-        .select(`#${canvasId}`)
-        .fields({ node: true, size: true })
-        .exec((res) => {
-          resolve({
-            width: res[0]?.width || 0,
-            height: res[0]?.height || 0,
-          });
-        });
-    });
-  }
-
-  public async calculateDisplaySize(canvas: any) {
-    if (this.canvasId !== undefined && this.canvasId !== '') {
-      const canvasSize = await this.getCanvasCssSize(this.canvasId);
-      if (canvasSize.width !== 0 && canvasSize.height !== 0) {
-        return canvasSize;
-      }
-    }
+  public calculateDisplaySize(canvas: any) {
     if (canvas.displayWidth === undefined && canvas.displayHeight === undefined) {
       canvas.displayWidth = canvas.width;
       canvas.displayHeight = canvas.height;
@@ -219,14 +157,14 @@ export class PAGView extends NativePAGView {
     }
   }
 
-  protected override async resetSize(useScale = true) {
+  protected override resetSize(useScale = true) {
     if (!this.canvasElement) {
       throw new Error('Canvas element is not found!');
     }
     if (!useScale || isOffscreenCanvas(this.canvasElement)) {
       return;
     }
-    const displaySize = await this.calculateDisplaySize(this.canvasElement);
+    const displaySize = this.calculateDisplaySize(this.canvasElement);
     const dpr = wx.getSystemInfoSync().pixelRatio;
     this.canvasElement!.width = displaySize.width * dpr;
     this.canvasElement!.height = displaySize.height * dpr;

web/wechat/README.md

@@ -53,7 +53,7 @@ wx.createSelectorQuery()
     const canvas = res[0].node;
     const buffer = await loadFileByRequest('https://pag.io/file/test.pag');
     const pagFile = await this.PAG.PAGFile.load(buffer);
-    const pagView = await this.PAG.PAGView.init(pagFile, canvas); // 自v4.4.29开始建议传入wxml中定义的canvasId
+    const pagView = await this.PAG.PAGView.init(pagFile, canvas);
     pagView.play();
   });