libpag 4.5.0 → 4.5.2

package/package.json

@@ -1,30 +1,36 @@
 {
   "name": "libpag",
-  "version": "4.5.0",
+  "version": "4.5.2",
   "description": "Portable Animated Graphics",
   "main": "lib/libpag.cjs.js",
   "module": "lib/libpag.esm.js",
   "browser": "lib/libpag.umd.js",
   "typings": "types/web/pag.d.ts",
   "scripts": {
-    "build:js": "rimraf --glob lib/*.js lib/*.map types/* && rollup -c ./script/rollup.config.js && tsc -p ./tsconfig.type.json",
-    "build:wx:js": "rimraf --glob wechat/lib/*.js wechat/lib/*.map wechat/lib/*.br wechat/types/* && rollup -c ./script/rollup.config.wx.js && tsc -p ./wechat/tsconfig.type.json && brotli ./wechat/lib/libpag.wasm",
-    "build": "node script/cmake.demo.js && npm run build:js",
+    "build:js:mt": "rimraf --glob lib-mt/*.js lib-mt/*.map types/* && rollup -c ./script/rollup.config.js --environment ARCH:wasm-mt && tsc -p ./tsconfig.type.json && cp -r ./tsconfig.json ./types/web/ && node script/restore.replace.js -a wasm-mt",
+    "build:js:st": "rimraf --glob lib/*.js lib/*.map types/* && rollup -c ./script/rollup.config.js --environment ARCH:wasm && tsc -p ./tsconfig.type.json && cp -r ./tsconfig.json ./types/web/ && node script/restore.replace.js -a wasm",
+    "build:wx:js": "rimraf --glob wechat/lib/*.js wechat/lib/*.map wechat/lib/*.br wechat/types/* && rollup -c ./script/rollup.config.wx.js && tsc -p ./wechat/tsconfig.type.json && cp -r ./tsconfig.json ./wechat/types/web/ && brotli ./wechat/lib/libpag.wasm",
+    "build:mt": "node script/cmake.demo.js -a wasm-mt && npm run build:js:mt",
+    "build:st": "node script/cmake.demo.js -a wasm && npm run build:js:st",
     "build:wx": "node script/cmake.demo.wx.js && npm run build:wx:js",
-    "build:debug": "node script/cmake.demo.js --debug && npm run build:js",
+    "build:debug:mt": "node script/cmake.demo.js -a wasm-mt --debug && npm run build:js:mt",
+    "build:debug:st": "node script/cmake.demo.js -a wasm --debug && npm run build:js:st",
     "build:wx:debug": "node script/cmake.demo.wx.js --debug && npm run build:wx:js",
-    "dev": "rollup -c ./script/rollup.config.dev.js -w",
+    "dev:mt": "rollup -c ./script/rollup.config.dev.js -w --environment ARCH:wasm-mt",
+    "dev:st": "rollup -c ./script/rollup.config.dev.js -w --environment ARCH:wasm",
     "dev:wx": "rollup -c ./script/rollup.config.wx.dev.js -w",
     "dev:wx:brotli": "./script/brotli.sh",
     "eslint": "eslint --ext .ts src/ --config .eslintrc.js",
     "eslint:fix": "eslint --ext .ts src/ --fix",
     "prettier": "prettier --check \"src/**/*.ts\"",
     "prettier:fix": "prettier --write \"src/**/*.ts\"",
-    "test": "node ./script/test.js",
-    "cypress": "cypress run --browser chrome",
-    "server": "http-server -p 8080 . -c-1 --cors -o demo",
+    "UnitTest": "node ./script/UnitTest.js",
+    "cypress": "cypress run --browser electron --headless ",
     "doc": "rimraf api-docs && typedoc --entryPointStrategy expand ./src --tsconfig ./tsconfig.doc.json",
-    "brotli": "brotli ./lib/libpag.wasm"
+    "brotli": "brotli ./lib/libpag.wasm",
+    "server:mt": "node server.js wasm-mt",
+    "server:st": "node server.js wasm",
+    "server:cypress": "http-server -p 8080"
   },
   "repository": {
     "type": "git",
@@ -47,6 +53,7 @@
     "eslint": "~9.22.0",
     "eslint-config-alloy": "~5.1.2",
     "http-server": "~14.1.1",
+    "minimist": "^1.2.8",
     "prettier": "~2.7.1",
     "rimraf": "~5.0.10",
     "rollup": "~2.79.1",
@@ -72,5 +79,10 @@
     "zenoslin",
     "lvpengwei"
   ],
-  "author": "libpag"
+  "author": "libpag",
+  "dependencies": {
+    "abort-controller": "^3.0.0",
+    "cross-spawn": "^7.0.6",
+    "express": "^5.1.0"
+  }
 }

package/src/.pag.wasm-mt.md5

@@ -0,0 +1 @@
+53d489bb760a7dc7b27cb35553a623dc

package/src/.pag.wasm.md5

@@ -1 +1 @@
-9f603d49b2d0761f6c6f617228d6bed8
+7374d597974e20c8dac8212554df8937

package/src/core/matrix.ts

@@ -1,9 +1,8 @@
 import { PAGModule } from '../pag-module';
-import { destroyVerify, wasmAwaitRewind } from '../utils/decorators';
+import { destroyVerify } from '../utils/decorators';
 import { MatrixIndex } from '../types';
 
 @destroyVerify
-@wasmAwaitRewind
 export class Matrix {
   /**
    * Sets Matrix to:

package/src/core/video-reader.ts

@@ -5,11 +5,8 @@ import {
   VIDEO_PLAYBACK_RATE_MIN,
 } from '../constant';
 import { addListener, removeListener, removeAllListeners } from '../utils/video-listener';
-import { IPHONE, WECHAT, SAFARI_OR_IOS_WEBVIEW, WORKER } from '../utils/ua';
+import { IPHONE, WECHAT, SAFARI_OR_IOS_WEBVIEW } from '../utils/ua';
 import { PAGModule } from '../pag-module';
-import { WorkerMessageType } from '../worker/events';
-import { WorkerVideoReader } from '../worker/video-reader';
-import { postMessage } from '../worker/utils';
 
 import type { TimeRange, VideoReader as VideoReaderInterfaces } from '../interfaces';
 import type { PAGPlayer } from '../pag-player';
@@ -49,34 +46,13 @@ const waitVideoCanPlay = (videoElement: HTMLVideoElement) => {
 };
 
 export class VideoReader {
-  public static async create(
+  public static create(
     source: Uint8Array | HTMLVideoElement,
     width: number,
     height: number,
     frameRate: number,
     staticTimeRanges: TimeRange[],
-  ): Promise<VideoReaderInterfaces> {
-    if (WORKER) {
-      const proxyId = await new Promise<number>((resolve) => {
-        // TODO: source as HTMLVideoElement in WebWorker version.
-        const uint8Array = source as Uint8Array;
-        const buffer = uint8Array.buffer.slice(uint8Array.byteOffset, uint8Array.byteOffset + uint8Array.byteLength);
-        postMessage(
-          self,
-          {
-            name: WorkerMessageType.VideoReader_constructor,
-            args: [buffer, width, height, frameRate, staticTimeRanges, true],
-          },
-          (res) => {
-            resolve(res);
-          },
-          [buffer],
-        );
-      });
-      const videoReader = new WorkerVideoReader(proxyId);
-      PAGModule.currentPlayer?.linkVideoReader(videoReader);
-      return videoReader;
-    }
+  ): VideoReaderInterfaces {
     return new VideoReader(source, width, height, frameRate, staticTimeRanges);
   }
 
@@ -95,6 +71,7 @@ export class VideoReader {
   private height = 0;
   private bitmapCanvas: OffscreenCanvas | null = null;
   private bitmapCtx: OffscreenCanvasRenderingContext2D | null = null;
+  private currentFrame: number=0;
 
   public constructor(
     source: Uint8Array | HTMLVideoElement,
@@ -102,7 +79,6 @@ export class VideoReader {
     height: number,
     frameRate: number,
     staticTimeRanges: TimeRange[],
-    isWorker = false,
   ) {
     if (isInstanceOf(source, globalThis.HTMLVideoElement)) {
       this.videoEl = source as HTMLVideoElement;
@@ -118,7 +94,8 @@ export class VideoReader {
       waitVideoCanPlay(this.videoEl).then(() => {
         this.canplay = true;
       });
-      const blob = new Blob([source as Uint8Array], { type: 'video/mp4' });
+      const buffer = (source as Uint8Array).slice();
+      const blob = new Blob([buffer], { type: 'video/mp4' });
       this.videoEl.src = URL.createObjectURL(blob);
       if (IPHONE) {
         // use load() will make a bug on Chrome.
@@ -132,80 +109,82 @@ export class VideoReader {
     if (UHD_RESOLUTION < width || UHD_RESOLUTION < height) {
       this.disablePlaybackRate = true;
     }
-    if (!isWorker) {
-      this.linkPlayer(PAGModule.currentPlayer);
-    }
   }
 
-  public async prepare(targetFrame: number, playbackRate: number) {
-    this.setError(null); // reset error
-    this.isSought = false; // reset seek status
-    const { currentTime } = this.videoEl!;
-    const targetTime = targetFrame / this.frameRate;
-    if (currentTime === 0 && targetTime === 0) {
-      if (!this.canplay && !SAFARI_OR_IOS_WEBVIEW) {
-        await waitVideoCanPlay(this.videoEl!);
-      } else {
-        try {
-          await this.play();
-        } catch (e) {
-          this.setError(e);
-        }
-        await new Promise<void>((resolve) => {
-          requestAnimationFrame(() => {
-            this.pause();
+  public async prepare(targetFrame: number, playbackRate: number): Promise<void> {
+    const promise =new Promise<void>(async (resolve, reject) => {
+        this.setError(null); // reset error
+        this.isSought = false; // reset seek status
+        const { currentTime } = this.videoEl!;
+        const targetTime = targetFrame / this.frameRate;
+
+        if (currentTime === 0 && targetTime === 0) {
+          if (!this.canplay && !SAFARI_OR_IOS_WEBVIEW) {
+            await waitVideoCanPlay(this.videoEl!);
+          } else {
+            try {
+              await this.play();
+            } catch (e) {
+              this.setError(e);
+              this.currentFrame = targetFrame;
+              reject(e);
+              return;
+            }
+            await new Promise<void>((resolveInner) => {
+              requestAnimationFrame(() => {
+                this.pause();
+                resolveInner();
+              });
+            });
+          }
+        } else {
+          if (Math.round(targetTime * this.frameRate) === Math.round(currentTime * this.frameRate)) {
+            // Current frame
+          } else if (this.staticTimeRanges?.contains(targetFrame)) {
+            // Static frame
+            await this.seek(targetTime, false);
+            this.currentFrame = targetFrame;
+            resolve();  // Ensure promise resolves
+            return;
+          } else if (Math.abs(currentTime - targetTime) < (1 / this.frameRate) * VIDEO_DECODE_WAIT_FRAME) {
+            // Within tolerable frame rate deviation
+          } else {
+            // Seek and play
+            this.isSought = true;
+            await this.seek(targetTime);
+            this.currentFrame = targetFrame;
             resolve();
-          });
-        });
-      }
-    } else {
-      if (Math.round(targetTime * this.frameRate) === Math.round(currentTime * this.frameRate)) {
-        // Current frame
-      } else if (this.staticTimeRanges?.contains(targetFrame)) {
-        // Static frame
-        await this.seek(targetTime, false);
-        return;
-      } else if (Math.abs(currentTime - targetTime) < (1 / this.frameRate) * VIDEO_DECODE_WAIT_FRAME) {
-        // Within tolerable frame rate deviation
-      } else {
-        // Seek and play
-        this.isSought = true;
-        await this.seek(targetTime);
-        return;
-      }
-    }
+            return;
+          }
+        }
 
-    const targetPlaybackRate = Math.min(Math.max(playbackRate, VIDEO_PLAYBACK_RATE_MIN), VIDEO_PLAYBACK_RATE_MAX);
-    if (!this.disablePlaybackRate && this.videoEl!.playbackRate !== targetPlaybackRate) {
-      this.videoEl!.playbackRate = targetPlaybackRate;
-    }
+        const targetPlaybackRate = Math.min(Math.max(playbackRate, VIDEO_PLAYBACK_RATE_MIN), VIDEO_PLAYBACK_RATE_MAX);
+        if (!this.disablePlaybackRate && this.videoEl!.playbackRate !== targetPlaybackRate) {
+          this.videoEl!.playbackRate = targetPlaybackRate;
+        }
 
-    if (this.isPlaying && this.videoEl!.paused) {
-      try {
-        await this.play();
-      } catch (e) {
-        this.setError(e);
-      }
-    }
+        if (this.isPlaying && this.videoEl!.paused) {
+          try {
+            await this.play();
+          } catch (e) {
+            this.setError(e);
+            this.currentFrame = targetFrame;
+            reject(e);
+            return;
+          }
+        }
+        this.currentFrame = targetFrame;
+        resolve();
+    });
+    await promise;
   }
 
-  public getVideo() {
-    return this.videoEl;
+  public getCurrentFrame(): number {
+    return this.currentFrame;
   }
 
-  // Only work in web worker version
-  public async generateBitmap() {
-    // Batter than createImageBitmap from video element in benchmark
-    if (!this.bitmapCanvas) {
-      this.bitmapCanvas = new OffscreenCanvas(this.width, this.height);
-      this.bitmapCanvas!.width = this.width;
-      this.bitmapCanvas!.height = this.height;
-      this.bitmapCtx = this.bitmapCanvas.getContext('2d') as OffscreenCanvasRenderingContext2D | null;
-    }
-    this.bitmapCtx?.fillRect(0, 0, this.width, this.height);
-    this.bitmapCtx?.drawImage(this.videoEl as HTMLVideoElement, 0, 0, this.width, this.height);
-    this.bitmap = await createImageBitmap(this.bitmapCanvas);
-    return this.bitmap;
+  public getVideo() {
+    return this.videoEl;
   }
 
   public async play() {

package/src/interfaces.ts

@@ -1,4 +1,3 @@
-import type { WebFont } from '@tgfx/core/web-mask';
 import type { ctor, Point, Rect, Vector } from './types';
 
 export interface TimeRange {
@@ -32,30 +31,22 @@ export interface FontMetrics {
   capHeight: number;
 }
 
+export interface Stroke {
+  width: number;
+  cap: ctor;
+  join: ctor;
+  miterLimit: number;
+}
+
 export interface ScalerContext {
   fontString: (fauxBold: boolean, fauxItalic: boolean) => string;
   getAdvance: (text: string) => number;
   getBounds: (text: string, fauxBold: boolean, fauxItalic: boolean) => Rect;
   getFontMetrics: () => FontMetrics;
-  generateImage: (text: string, bounds: Rect) => TexImageSource | OffscreenCanvas;
+  readPixels: (text: string, bounds: Rect, fauxBold: boolean, stroke?: Stroke) => Uint8Array | null;
 }
 
 export interface ScalerContextConstructor {
   isEmoji: (text: string) => boolean;
   new (fontName: string, fontStyle: string, size: number, fauxBold: boolean, fauxItalic: boolean): ScalerContext;
 }
-
-export interface WebMask {
-  fillPath: (path: Path2D, fillType: ctor) => void;
-  fillText: (webFont: WebFont, texts: Vector<string>, positions: Vector<Point>, matrixWasmIns: any) => void;
-  strokeText: (
-    webFont: WebFont,
-    stroke: { width: number; cap: ctor; join: ctor; miterLimit: number },
-    texts: Vector<string>,
-    positions: Vector<Point>,
-    matrixWasmIns: any,
-  ) => void;
-  clear: () => void;
-}
-
-export type WebMaskConstructor = new (canvas: HTMLCanvasElement | OffscreenCanvas) => WebMask;

package/src/pag-composition.ts

@@ -1,12 +1,11 @@
 import { PAGModule } from './pag-module';
 import { PAGLayer } from './pag-layer';
-import { destroyVerify, wasmAwaitRewind } from './utils/decorators';
+import { destroyVerify } from './utils/decorators';
 import { layer2typeLayer, proxyVector } from './utils/type-utils';
 
-import type { Marker } from './types';
+import  {type Marker,VecArray } from './types';
 
 @destroyVerify
-@wasmAwaitRewind
 export class PAGComposition extends PAGLayer {
   /**
    * Make a empty PAGComposition with specified size.
@@ -149,7 +148,11 @@ export class PAGComposition extends PAGLayer {
   public getLayersByName(layerName: string) {
     const wasmIns = this.wasmIns._getLayersByName(layerName);
     if (!wasmIns) throw new Error(`Get layers by ${layerName} fail!`);
-    return proxyVector(wasmIns, layer2typeLayer);
+    const layerArray = VecArray.create();
+    for (const wasmIn of wasmIns) {
+      layerArray.push(layer2typeLayer(wasmIn));
+    }
+    return layerArray;
   }
   /**
    * Returns an array of layers that lie under the specified point. The point is in pixels and from
@@ -158,6 +161,10 @@ export class PAGComposition extends PAGLayer {
   public getLayersUnderPoint(localX: number, localY: number) {
     const wasmIns = this.wasmIns._getLayersUnderPoint(localX, localY);
     if (!wasmIns) throw new Error(`Get layers under point ${localX},${localY} fail!`);
-    return proxyVector(wasmIns, layer2typeLayer);
+    const layerArray = VecArray.create();
+    for (const wasmIn of wasmIns) {
+      layerArray.push(layer2typeLayer(wasmIn));
+    }
+    return layerArray;
   }
 }