@netless/slide 1.4.55-alpha.0 → 1.4.55-alpha.2

package/lib/SyncTaskManager.d.ts

@@ -1,11 +1,51 @@
-import { SyncEvent } from "./Slide";
+import type { SyncEvent } from "./Slide";
+export declare type SyncEventQueuePolicy = "fifo" | "latest-pending-render";
+export declare type SyncEventQueueMode = "interactive" | "sync" | "local" | "addLink";
+export interface SyncTaskCompactInfo {
+    policy: "latest-pending-render";
+    droppedEventCount: number;
+    droppedRenderCount: number;
+    droppedStepCount: number;
+    droppedAnimationCount: number;
+    droppedMediaCount: number;
+    droppedOperationCount: number;
+    droppedEventTypes: {
+        [eventType: string]: number;
+    };
+    retainedSlideIndex: number;
+    retainedRenderReceivedAt: number;
+    hasRunningTask: boolean;
+    hardBoundaryType?: string;
+}
+export interface SyncTaskManagerOptions {
+    policy?: SyncEventQueuePolicy;
+    onCompact?: (info: SyncTaskCompactInfo) => void;
+    onCompactedRenderComplete?: (info: SyncTaskCompactInfo, renderEndAt: number) => void;
+    onCatchUpStateChange?: (isCatchingUp: boolean) => void;
+    shouldTrackCatchUpEvent?: (event: SyncEvent) => boolean;
+}
+export declare function resolveSyncEventQueuePolicy(mode: SyncEventQueueMode, policy?: SyncEventQueuePolicy): SyncEventQueuePolicy;
 export declare class SyncTaskManager {
     private fn;
     private tasks;
     private isDestroy;
     private isScheduling;
-    constructor(fn: (arg: SyncEvent) => Promise<void>);
+    private isTaskRunning;
+    private isCatchingUp;
+    private runningTask?;
+    private policy;
+    private onCompact?;
+    private onCompactedRenderComplete?;
+    private onCatchUpStateChange?;
+    private shouldTrackCatchUpEvent?;
+    private compactedTasks;
+    constructor(fn: (arg: SyncEvent) => Promise<void>, options?: SyncTaskManagerOptions);
     destroy(): void;
+    setPolicy(policy: SyncEventQueuePolicy): void;
+    private setCatchUpState;
+    private isCatchUpEvent;
+    private finishTask;
     private schedule;
-    addTask(evt: SyncEvent): void;
+    private compactForRender;
+    addTask(event: SyncEvent): SyncTaskCompactInfo | undefined;
 }

package/lib/SyncTaskManager.js

@@ -1,33 +1,205 @@
+function assertSyncEventQueuePolicy(policy) {
+    if (policy !== "fifo" && policy !== "latest-pending-render") {
+        throw new Error("Invalid sync event queue policy: " + policy);
+    }
+}
+export function resolveSyncEventQueuePolicy(mode, policy) {
+    if (policy === void 0) { policy = "fifo"; }
+    assertSyncEventQueuePolicy(policy);
+    return mode === "interactive" ? policy : "fifo";
+}
+function isPageScopedEvent(event) {
+    switch (event.type) {
+        case "renderSlide":
+        case "nextStep":
+        case "prevStep":
+        case "interactiveAnim":
+        case "mediaPlay":
+        case "mediaPause":
+        case "mediaSeek":
+        case "mediaFullscreen":
+            return true;
+        default:
+            return false;
+    }
+}
 var SyncTaskManager = /** @class */ (function () {
-    function SyncTaskManager(fn) {
+    function SyncTaskManager(fn, options) {
         var _this = this;
+        if (options === void 0) { options = {}; }
         this.tasks = [];
         this.isDestroy = false;
         this.isScheduling = false;
+        this.isTaskRunning = false;
+        this.isCatchingUp = false;
+        this.compactedTasks = new WeakMap();
+        this.finishTask = function () {
+            _this.isTaskRunning = false;
+            _this.runningTask = undefined;
+            if (_this.isDestroy) {
+                _this.tasks.length = 0;
+                _this.isScheduling = false;
+            }
+            else if (_this.tasks.length > 0) {
+                window.requestAnimationFrame(_this.schedule);
+            }
+            else {
+                _this.isScheduling = false;
+                _this.setCatchUpState(false);
+            }
+        };
         this.schedule = function () {
+            if (_this.isDestroy) {
+                _this.tasks.length = 0;
+                _this.isScheduling = false;
+                return;
+            }
             _this.isScheduling = true;
             var task = _this.tasks.shift();
-            if (task && !_this.isDestroy) {
-                _this.fn(task).finally(function () {
-                    if (_this.tasks.length > 0) {
-                        window.requestAnimationFrame(_this.schedule);
-                    }
-                    else {
-                        _this.isScheduling = false;
+            if (!task) {
+                _this.isScheduling = false;
+                return;
+            }
+            _this.isTaskRunning = true;
+            _this.runningTask = task;
+            var compactInfo = _this.compactedTasks.get(task);
+            try {
+                _this.fn(task).then(function () {
+                    var _a;
+                    _this.compactedTasks.delete(task);
+                    if (compactInfo && !_this.isDestroy) {
+                        try {
+                            (_a = _this.onCompactedRenderComplete) === null || _a === void 0 ? void 0 : _a.call(_this, compactInfo, Date.now());
+                        }
+                        catch ( /* Observability must not interrupt synchronization. */_b) { /* Observability must not interrupt synchronization. */ }
                     }
+                    _this.finishTask();
+                }, function () {
+                    _this.compactedTasks.delete(task);
+                    _this.finishTask();
                 });
             }
+            catch (_a) {
+                _this.compactedTasks.delete(task);
+                _this.finishTask();
+            }
         };
         this.fn = fn;
+        this.policy = options.policy || "fifo";
+        this.onCompact = options.onCompact;
+        this.onCompactedRenderComplete = options.onCompactedRenderComplete;
+        this.onCatchUpStateChange = options.onCatchUpStateChange;
+        this.shouldTrackCatchUpEvent = options.shouldTrackCatchUpEvent;
+        assertSyncEventQueuePolicy(this.policy);
     }
     SyncTaskManager.prototype.destroy = function () {
         this.isDestroy = true;
+        this.isCatchingUp = false;
+        this.runningTask = undefined;
+        this.tasks.length = 0;
+    };
+    SyncTaskManager.prototype.setPolicy = function (policy) {
+        assertSyncEventQueuePolicy(policy);
+        this.policy = policy;
+    };
+    SyncTaskManager.prototype.setCatchUpState = function (isCatchingUp) {
+        var _a;
+        if (this.isCatchingUp === isCatchingUp) {
+            return;
+        }
+        this.isCatchingUp = isCatchingUp;
+        try {
+            (_a = this.onCatchUpStateChange) === null || _a === void 0 ? void 0 : _a.call(this, isCatchingUp);
+        }
+        catch ( /* Observability must not interrupt synchronization. */_b) { /* Observability must not interrupt synchronization. */ }
     };
-    SyncTaskManager.prototype.addTask = function (evt) {
-        this.tasks.push(evt);
+    SyncTaskManager.prototype.isCatchUpEvent = function (event) {
+        var _a, _b;
+        try {
+            return (_b = (_a = this.shouldTrackCatchUpEvent) === null || _a === void 0 ? void 0 : _a.call(this, event)) !== null && _b !== void 0 ? _b : true;
+        }
+        catch (_c) {
+            return true;
+        }
+    };
+    SyncTaskManager.prototype.compactForRender = function (event) {
+        var droppedEventTypes = {};
+        var droppedEventCount = 0;
+        var droppedRenderCount = 0;
+        var droppedStepCount = 0;
+        var droppedAnimationCount = 0;
+        var droppedMediaCount = 0;
+        while (this.tasks.length > 0) {
+            var pendingEvent = this.tasks[this.tasks.length - 1];
+            if (!isPageScopedEvent(pendingEvent)) {
+                break;
+            }
+            this.tasks.pop();
+            this.compactedTasks.delete(pendingEvent);
+            droppedEventCount += 1;
+            droppedEventTypes[pendingEvent.type] = (droppedEventTypes[pendingEvent.type] || 0) + 1;
+            if (pendingEvent.type === "renderSlide") {
+                droppedRenderCount += 1;
+            }
+            else if (pendingEvent.type === "nextStep" || pendingEvent.type === "prevStep") {
+                droppedStepCount += 1;
+            }
+            else if (pendingEvent.type === "interactiveAnim") {
+                droppedAnimationCount += 1;
+            }
+            else {
+                droppedMediaCount += 1;
+            }
+        }
+        if (droppedEventCount === 0) {
+            return undefined;
+        }
+        var boundaryEvent = this.tasks[this.tasks.length - 1];
+        return {
+            policy: "latest-pending-render",
+            droppedEventCount: droppedEventCount,
+            droppedRenderCount: droppedRenderCount,
+            droppedStepCount: droppedStepCount,
+            droppedAnimationCount: droppedAnimationCount,
+            droppedMediaCount: droppedMediaCount,
+            droppedOperationCount: droppedEventCount - droppedRenderCount,
+            droppedEventTypes: droppedEventTypes,
+            retainedSlideIndex: event.index,
+            retainedRenderReceivedAt: Date.now(),
+            hasRunningTask: this.isTaskRunning,
+            hardBoundaryType: boundaryEvent === null || boundaryEvent === void 0 ? void 0 : boundaryEvent.type,
+        };
+    };
+    SyncTaskManager.prototype.addTask = function (event) {
+        var _this = this;
+        var _a;
+        if (this.isDestroy) {
+            return undefined;
+        }
+        var hasPendingWork = this.isTaskRunning || this.tasks.length > 0;
+        var isIncomingCatchUpEvent = this.policy === "latest-pending-render" && this.isCatchUpEvent(event);
+        var hasCatchUpEvent = this.policy === "latest-pending-render" && (isIncomingCatchUpEvent ||
+            (!!this.runningTask && this.isCatchUpEvent(this.runningTask)) ||
+            this.tasks.some(function (pendingEvent) { return _this.isCatchUpEvent(pendingEvent); }));
+        var compactInfo = this.policy === "latest-pending-render" && event.type === "renderSlide" ?
+            this.compactForRender(event) :
+            undefined;
+        this.tasks.push(event);
+        var shouldStartCatchUp = hasCatchUpEvent && (hasPendingWork || (isIncomingCatchUpEvent && event.type === "renderSlide"));
+        if (shouldStartCatchUp) {
+            this.setCatchUpState(true);
+        }
+        if (compactInfo) {
+            this.compactedTasks.set(event, compactInfo);
+            try {
+                (_a = this.onCompact) === null || _a === void 0 ? void 0 : _a.call(this, compactInfo);
+            }
+            catch ( /* Observability must not interrupt synchronization. */_b) { /* Observability must not interrupt synchronization. */ }
+        }
         if (!this.isScheduling) {
             this.schedule();
         }
+        return compactInfo;
     };
     return SyncTaskManager;
 }());

package/lib/global.js

@@ -57,7 +57,7 @@ export function preloadResource(taskId, prefix, maxResolutionLevel, onProgress,
                             maxFPS: 1,
                             resolution: 1,
                             maxResolutionLevel: maxResolutionLevel,
-                            forceCanvas: false,
+                            forceCanvas: true,
                         },
                         mode: "local",
                         interactive: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/slide",
-  "version": "1.4.55-alpha.0",
+  "version": "1.4.55-alpha.2",
   "description": "> TODO: description",
   "author": "huaguzheng <huaguzheng2007@126.com>",
   "homepage": "https://github.com/netless-io/netless-slide-demo",
@@ -16,7 +16,7 @@
   ],
   "scripts": {
     "dev": "tsc",
-    "test": "jest",
+    "test": "node __tests__/SyncTaskManager.test.js",
     "build": "webpack --config webpack.config.js",
     "watch": "webpack --config webpack.config.js --watch"
   },
@@ -31,7 +31,8 @@
   "devDependencies": {
     "@types/dat.gui": "^0.7.7",
     "glsl-shader-loader": "^0.1.6",
-    "ts-loader": "8.3.0"
+    "ts-loader": "8.3.0",
+    "typescript": "4.4.4"
   },
   "publishConfig": {
     "access": "public"