Add some PAGPlayer bindings on Web env.

Author: zenoslin

Diff for: web/demo/index.html

@@ -76,7 +76,7 @@
                   <button class="mt-24" id="btn-setVideoEnabled">Set videoEnabled</button>
                   <button class="mt-24" id="btn-cacheEnabled">CacheEnabled status</button>
                   <button class="mt-24" id="btn-setCacheEnabled">Set cacheEnabled</button>
-                  <!-- <button class="mt-24" id="btn-freeCache">FreeCache</button> -->
+                  <button class="mt-24" id="btn-freeCache">FreeCache</button>
                   <div class="mt-24">
                     <button id="btn-cacheScale">CacheScale status</button>
                     CacheScale

Diff for: web/demo/index.ts

@@ -228,9 +228,9 @@ window.onload = async () => {
   });
 
   // freeCache
-  // document.getElementById('btn-freeCache').addEventListener('click', () => {
-  //   pagView.freeCache();
-  // });
+  document.getElementById('btn-freeCache').addEventListener('click', () => {
+    pagView.freeCache();
+  });
 
   // cacheScale
   globalCacheScale = 1;

Diff for: web/src/core/scaler-context.ts

@@ -1,13 +1,7 @@
 import { NativeImage } from './native-image';
 import { measureText } from '../utils/measure-text';
 import { defaultFontNames } from '../utils/font-family';
-
-export interface Bounds {
-  top: number;
-  left: number;
-  bottom: number;
-  right: number;
-}
+import { Rect } from '../types';
 
 const canvas = ((): HTMLCanvasElement | OffscreenCanvas => {
   try {
@@ -47,7 +41,7 @@ export class ScalerContext {
   private readonly fauxBold: boolean;
   private readonly fauxItalic: boolean;
 
-  private fontBoundingBoxMap: { key: string; value: Bounds }[] = [];
+  private fontBoundingBoxMap: { key: string; value: Rect }[] = [];
 
   public constructor(fontName: string, size: number, fauxBold = false, fauxItalic = false) {
     this.fontName = fontName;
@@ -82,7 +76,7 @@ export class ScalerContext {
     context.font = this.fontString();
     const metrics = this.measureText(context, text);
 
-    const bounds: Bounds = {
+    const bounds: Rect = {
       left: Math.floor(-metrics.actualBoundingBoxLeft),
       top: Math.floor(-metrics.actualBoundingBoxAscent),
       right: Math.ceil(metrics.actualBoundingBoxRight),
@@ -106,7 +100,7 @@ export class ScalerContext {
     };
   }
 
-  public generateImage(text: string, bounds): NativeImage {
+  public generateImage(text: string, bounds: Rect): NativeImage {
     const canvas = document.createElement('canvas');
     canvas.width = bounds.right - bounds.left;
     canvas.height = bounds.bottom - bounds.top;
@@ -129,7 +123,7 @@ export class ScalerContext {
     const { left, top, right, bottom } = measureText(imageData);
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 
-    let fontMeasure: Bounds;
+    let fontMeasure: Rect;
     const fontBoundingBox = this.fontBoundingBoxMap.find((item) => item.key === this.fontName);
     if (fontBoundingBox) {
       fontMeasure = fontBoundingBox.value;

Diff for: web/src/core/web-mask.ts

@@ -1,3 +1,4 @@
+import { Matrix } from '../types';
 import { ScalerContext } from './scaler-context';
 
 export class WebMask {
@@ -46,7 +47,15 @@ export class WebMask {
     }
   }
 
-  public fillText(size: number, fauxBold: boolean, fauxItalic: boolean, fontName: string, texts, positions, matrix) {
+  public fillText(
+    size: number,
+    fauxBold: boolean,
+    fauxItalic: boolean,
+    fontName: string,
+    texts,
+    positions,
+    matrix: Matrix,
+  ) {
     const scalerContext = new ScalerContext(fontName, size, fauxBold, fauxItalic);
     const context = this.canvas.getContext('2d');
     context.transform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty);
@@ -65,7 +74,7 @@ export class WebMask {
     stroke,
     texts,
     positions,
-    matrix,
+    matrix: Matrix,
   ) {
     if (stroke.width < 0.5) {
       return;

Diff for: web/src/pag-player.ts

@@ -1,6 +1,8 @@
+import { PAGComposition } from './pag-composition';
 import { PAGFile } from './pag-file';
+import { PAGLayer } from './pag-layer';
 import { PAGSurface } from './pag-surface';
-import { PAG, PAGScaleMode } from './types';
+import { Matrix, PAG, PAGScaleMode, Rect, Vector } from './types';
 import { wasmAwaitRewind, wasmAsyncMethod } from './utils/decorators';
 
 @wasmAwaitRewind
@@ -121,14 +123,108 @@ export class PAGPlayer {
    * Returns the current PAGComposition for PAGPlayer to render as content.
    */
   public getComposition(): PAGFile {
-    const wasmIns = this.wasmIns._getComposition();
-    return new PAGFile(wasmIns);
+    return new PAGFile(this.wasmIns._getComposition());
   }
   /**
    * Sets a new PAGComposition for PAGPlayer to render as content.
    */
-  public setComposition(pagFile: PAGFile) {
-    this.wasmIns._setComposition(pagFile.wasmIns);
+  public setComposition(pagComposition: PAGComposition) {
+    this.wasmIns._setComposition(pagComposition.wasmIns);
+  }
+  /**
+   * Returns the PAGSurface object for PAGPlayer to render onto.
+   */
+  public getSurface(): PAGSurface {
+    return new PAGSurface(this.wasmIns._getSurface());
+  }
+  /**
+   * Returns a copy of current matrix.
+   */
+  public matrix(): Matrix {
+    return this.wasmIns._matrix() as Matrix;
+  }
+  /**
+   * Set the transformation which will be applied to the composition. The scaleMode property
+   * will be set to PAGScaleMode::None when this method is called.
+   */
+  public setMatrix(matrix: Matrix) {
+    this.wasmIns._setMatrix(matrix);
+  }
+  /**
+   * Set the progress of play position to next frame. It is applied only when the composition is not
+   * null.
+   */
+  public nextFrame() {
+    this.wasmIns._nextFrame();
+  }
+  /**
+   * Set the progress of play position to previous frame. It is applied only when the composition is
+   * not null.
+   */
+  public preFrame() {
+    this.wasmIns._preFrame();
+  }
+  /**
+   * If true, PAGPlayer clears the whole content of PAGSurface before drawing anything new to it.
+   * The default value is true.
+   */
+  public autoClear(): boolean {
+    return this.wasmIns._autoClear() as boolean;
+  }
+  /**
+   * Sets the autoClear property.
+   */
+  public setAutoClear(value: boolean) {
+    this.wasmIns._setAutoClear(value);
+  }
+  /**
+   * Returns a rectangle that defines the original area of the layer, which is not transformed by
+   * the matrix.
+   */
+  public getBounds(pagLayer: PAGLayer): Rect {
+    return this.wasmIns._getBounds(pagLayer.wasmIns) as Rect;
+  }
+  /**
+   * Returns an array of layers that lie under the specified point. The point is in pixels and from
+   * this PAGComposition's local coordinates.
+   */
+  public getLayersUnderPoint(): Vector<any> {
+    return this.wasmIns._getLayersUnderPoint();
+  }
+  /**
+   * Evaluates the PAGLayer to see if it overlaps or intersects with the specified point. The point
+   * is in the coordinate space of the PAGSurface, not the PAGComposition that contains the
+   * PAGLayer. It always returns false if the PAGLayer or its parent (or parent's parent...) has not
+   * been added to this PAGPlayer. The pixelHitTest parameter indicates whether or not to check
+   * against the actual pixels of the object (true) or the bounding box (false). Returns true if the
+   * PAGLayer overlaps or intersects with the specified point.
+   */
+  public hitTestPoint(pagLayer: PAGLayer, surfaceX: number, surfaceY: number, pixelHitTest = false): boolean {
+    return this.wasmIns._hitTestPoint(pagLayer.wasmIns, surfaceX, surfaceY, pixelHitTest) as boolean;
+  }
+  /**
+   * The time cost by rendering in microseconds.
+   */
+  public renderingTime(): number {
+    return this.wasmIns._renderingTime() as number;
+  }
+  /**
+   * The time cost by image decoding in microseconds.
+   */
+  public imageDecodingTime(): number {
+    return this.wasmIns._imageDecodingTime() as number;
+  }
+  /**
+   * The time cost by presenting in microseconds.
+   */
+  public presentingTime(): number {
+    return this.wasmIns._presentingTime() as number;
+  }
+  /**
+   * The memory cost by graphics in bytes.
+   */
+  public graphicsMemory(): number {
+    return this.wasmIns._graphicsMemory() as number;
   }
 
   public destroy() {

Diff for: web/src/pag-surface.ts

@@ -43,6 +43,34 @@ export class PAGSurface {
   public updateSize(): void {
     this.wasmIns._updateSize();
   }
+  /**
+   * Erases all pixels of this surface with transparent color. Returns true if the content has
+   * changed.
+   */
+  public clearAll(): boolean {
+    return this.wasmIns._clearAll() as boolean;
+  }
+  /**
+   * Free the cache created by the surface immediately. Can be called to reduce memory pressure.
+   */
+  public freeCache(): void {
+    this.wasmIns._freeCache();
+  }
+  /**
+   * Copies pixels from current PAGSurface to dstPixels with specified color type, alpha type and
+   * row bytes. Returns true if pixels are copied to dstPixels.
+   */
+  // TODO(zenoslin) binding PAGSurface::readPixels
+  // public readPixels(colorType, alphaType, buffer): boolean {
+  //   const dataUint8Array = new Uint8Array(buffer);
+  //   const numBytes = dataUint8Array.byteLength * dataUint8Array.BYTES_PER_ELEMENT;
+  //   const dataPtr = PAGSurface.module._malloc(numBytes);
+  //   const dataOnHeap = new Uint8Array(PAGSurface.module.HEAPU8.buffer, dataPtr, numBytes);
+  //   dataOnHeap.set(dataUint8Array);
+  //   const res = this.wasmIns._readPixels(colorType, alphaType, dataOnHeap.byteOffset, dataOnHeap.length);
+  //   PAGSurface.module._free(dataPtr);
+  //   return res;
+  // }
 
   public destroy(): void {
     this.wasmIns.delete();

Diff for: web/src/pag-view.ts

@@ -219,7 +219,7 @@ export class PAGView {
    * Free the cache created by the pag view immediately. Can be called to reduce memory pressure.
    */
   public freeCache() {
-    // TODO(akazenoslin): PAGSurface freeCache
+    this.pagSurface.freeCache();
   }
   /**
    * Returns the current PAGComposition for PAGView to render as content.

Diff for: web/src/pag_wasm_bindings.cpp

@@ -18,6 +18,7 @@
 
 #include <emscripten/bind.h>
 #include <emscripten/val.h>
+#include "base/utils/TGFXCast.h"
 #include "core/FontMetrics.h"
 #include "core/ImageInfo.h"
 #include "core/PathTypes.h"
@@ -135,7 +136,9 @@ EMSCRIPTEN_BINDINGS(pag) {
                       }))
       .function("_width", &PAGSurface::width)
       .function("_height", &PAGSurface::height)
-      .function("_updateSize", &PAGSurface::updateSize);
+      .function("_updateSize", &PAGSurface::updateSize)
+      .function("_clearAll", &PAGSurface::clearAll)
+      .function("_freeCache", &PAGSurface::freeCache);
 
   class_<PAGImage>("_PAGImage")
       .smart_ptr<std::shared_ptr<PAGImage>>("_PAGImage")
@@ -168,12 +171,35 @@ EMSCRIPTEN_BINDINGS(pag) {
       .function("_scaleMode", &PAGPlayer::scaleMode)
       .function("_setScaleMode", &PAGPlayer::setScaleMode)
       .function("_setSurface", &PAGPlayer::setSurface)
-      .function("_getComposition", optional_override([](PAGPlayer& pagPlayer) {
-                  return std::static_pointer_cast<PAGFile>(pagPlayer.getComposition());
+      .function("_getComposition", &PAGPlayer::getComposition)
+      .function("_setComposition", &PAGPlayer::setComposition)
+      .function("_getSurface", &PAGPlayer::getSurface)
+      .function("_matrix",
+                optional_override([](PAGPlayer& pagPlayer) { return ToTGFX(pagPlayer.matrix()); }))
+      .function("_setMatrix", optional_override([](PAGPlayer& pagPlayer, tgfx::Matrix matrix) {
+                  pagPlayer.setMatrix(ToPAG(matrix));
                 }))
-      .function("_setComposition",
-                optional_override([](PAGPlayer& pagPlayer, std::shared_ptr<PAGFile>& pagFile) {
-                  pagPlayer.setComposition(std::move(pagFile));
+      .function("_nextFrame", &PAGPlayer::nextFrame)
+      .function("_preFrame", &PAGPlayer::preFrame)
+      .function("_autoClear", &PAGPlayer::autoClear)
+      .function("_setAutoClear", &PAGPlayer::setAutoClear)
+      .function("_getBounds",
+                optional_override([](PAGPlayer& pagPlayer, std::shared_ptr<PAGLayer> pagLayer) {
+                  return ToTGFX(pagPlayer.getBounds(pagLayer));
+                }))
+      .function("_getLayersUnderPoint", &PAGPlayer::getLayersUnderPoint)
+      .function("_hitTestPoint", &PAGPlayer::hitTestPoint)
+      .function("_renderingTime", optional_override([](PAGPlayer& pagPlayer) {
+                  return static_cast<int>(pagPlayer.renderingTime());
+                }))
+      .function("_imageDecodingTime", optional_override([](PAGPlayer& pagPlayer) {
+                  return static_cast<int>(pagPlayer.imageDecodingTime());
+                }))
+      .function("_presentingTime", optional_override([](PAGPlayer& pagPlayer) {
+                  return static_cast<int>(pagPlayer.presentingTime());
+                }))
+      .function("_graphicsMemory", optional_override([](PAGPlayer& pagPlayer) {
+                  return static_cast<int>(pagPlayer.graphicsMemory());
                 }));
 
   class_<tgfx::ImageInfo>("ImageInfo")

Diff for: web/src/types.ts

@@ -182,6 +182,54 @@ export interface Color {
   blue: number;
 }
 
+export declare class Matrix {
+  /**
+   * The entry at position [1,1] in the matrix.
+   */
+  public a: number;
+  /**
+   * The entry at position [1,2] in the matrix.
+   */
+  public b: number;
+  /**
+   * The entry at position [2,1] in the matrix.
+   */
+  public c: number;
+  /**
+   * The entry at position [2,2] in the matrix.
+   */
+  public d: number;
+  /**
+   * The entry at position [3,1] in the matrix.
+   */
+  public tx: number;
+  /**
+   * The entry at position [3,2] in the matrix.
+   */
+  public ty: number;
+  private constructor();
+}
+
+export declare class Rect {
+  /**
+   * smaller x-axis bounds.
+   */
+  public left: number;
+  /**
+   * smaller y-axis bounds.
+   */
+  public top: number;
+  /**
+   * larger x-axis bounds.
+   */
+  public right: number;
+  /**
+   * larger y-axis bounds.
+   */
+  public bottom: number;
+  private constructor();
+}
+
 export declare class TextDocument {
   /**
    * When true, the text layer shows a fill.