@netless/slide 0.6.4 → 0.6.5

package/README.md

@@ -625,3 +625,9 @@ const slide = new Slide({
 #### 0.6.3
 
 * 修复切页动画显示不正确的问题
+
+#### 0.6.5
+
+* 修复触发器动画同步状态不一致问题
+* 改善切页动画性能
+* 修改默认渲染分辨率为 1

package/lib/PlayerController.d.ts

@@ -1,20 +1,36 @@
-import { IPPTPlayerConfig, PPTPlayer } from "@netless/ppt-player";
-export interface PlayerControllerProps {
-    player: PPTPlayer;
-    params: IPPTPlayerConfig;
-    target: HTMLDivElement;
+import { PPTPlayer } from "@netless/ppt-player";
+export declare class PlayerConfig {
+    private player;
+    constructor(player: PPTPlayer);
+    get frameRate(): any;
+    set frameRate(_: any);
+    get drawFrames(): number;
+    set drawFrames(_: number);
+    get drawCall(): number;
+    set drawCall(_: number);
+    get resolution(): number;
+    set resolution(value: number);
+    get size(): any;
+    set size(_: any);
+    get minFPS(): number;
+    set minFPS(value: number);
+    get maxFPS(): number;
+    set maxFPS(value: number);
+    get autoResolution(): boolean;
+    set autoResolution(value: boolean);
+    get autoFPS(): boolean;
+    set autoFPS(value: boolean);
+    get backgroundColor(): any;
+    set backgroundColor(value: any);
 }
 export declare class PlayerController {
     private stateId;
-    private target;
-    private data;
-    private player;
+    private anchor;
     private gui;
     private controller;
-    private runTime;
-    constructor(props: PlayerControllerProps);
+    private config;
+    constructor(player: PPTPlayer, anchor: HTMLDivElement);
     private createStats;
     private createControllerGUI;
-    private addEventListener;
     destroy(): void;
 }

package/lib/PlayerController.js

@@ -1,113 +1,158 @@
 import { GUI } from "dat.gui";
-import md5 from "blueimp-md5";
+var PlayerConfig = /** @class */ (function () {
+    function PlayerConfig(player) {
+        this.player = player;
+    }
+    ;
+    Object.defineProperty(PlayerConfig.prototype, "frameRate", {
+        get: function () {
+            return this.player.fps.value;
+        },
+        set: function (_) { },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PlayerConfig.prototype, "drawFrames", {
+        get: function () {
+            return this.player.runtime.fps;
+        },
+        set: function (_) { },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PlayerConfig.prototype, "drawCall", {
+        get: function () {
+            return this.player.runtime.drawCall;
+        },
+        set: function (_) { },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PlayerConfig.prototype, "resolution", {
+        get: function () {
+            return this.player.config.resolution;
+        },
+        set: function (value) {
+            this.player.updateConfig({ resolution: value });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PlayerConfig.prototype, "size", {
+        get: function () {
+            var _a, _b;
+            return "".concat((_a = this.player.view) === null || _a === void 0 ? void 0 : _a.width, "*").concat((_b = this.player.view) === null || _b === void 0 ? void 0 : _b.height);
+        },
+        set: function (_) { },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PlayerConfig.prototype, "minFPS", {
+        get: function () {
+            return this.player.config.minFPS;
+        },
+        set: function (value) {
+            this.player.updateConfig({ minFPS: value });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PlayerConfig.prototype, "maxFPS", {
+        get: function () {
+            return this.player.config.maxFPS;
+        },
+        set: function (value) {
+            this.player.updateConfig({ maxFPS: value });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PlayerConfig.prototype, "autoResolution", {
+        get: function () {
+            return this.player.config.autoResolution;
+        },
+        set: function (value) {
+            this.player.updateConfig({ autoResolution: value });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PlayerConfig.prototype, "autoFPS", {
+        get: function () {
+            return this.player.config.autoFPS;
+        },
+        set: function (value) {
+            this.player.updateConfig({ autoFPS: value });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PlayerConfig.prototype, "backgroundColor", {
+        get: function () {
+            return this.player.config.transactionBgColor;
+        },
+        set: function (value) {
+            this.player.updateConfig({ transactionBgColor: value });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return PlayerConfig;
+}());
+export { PlayerConfig };
 var PlayerController = /** @class */ (function () {
-    function PlayerController(props) {
-        this.runTime = {
-            fps: 0,
-            resolution: "",
-        };
-        this.target = props.target;
-        this.data = props.params;
-        this.player = props.player;
-        this.gui = this.createControllerGUI();
+    function PlayerController(player, anchor) {
+        var _a;
+        this.config = new PlayerConfig(player);
+        this.anchor = anchor;
+        _a = this.createControllerGUI(), this.gui = _a[0], this.controller = _a[1];
         this.createStats();
-        this.addEventListener();
     }
     PlayerController.prototype.createStats = function () {
         var _this = this;
         this.stateId = setInterval(function () {
-            if (_this.player.view) {
-                _this.controller.runTimeFps.setValue(_this.player.fps.value);
-                _this.controller.drawCall.setValue(_this.player.runtime.drawCall);
-                _this.controller.runTimeResolution.setValue(_this.player.view.width + "*" + _this.player.view.height);
-            }
-        }, 500);
+            _this.controller.frameRate.updateDisplay();
+            _this.controller.size.updateDisplay();
+            _this.controller.minFPS.updateDisplay();
+            _this.controller.drawFrames.updateDisplay();
+            _this.controller.maxFPS.updateDisplay();
+            _this.controller.resolution.updateDisplay();
+            _this.controller.autoFps.updateDisplay();
+            _this.controller.autoResolution.updateDisplay();
+            _this.controller.drawCall.updateDisplay();
+        }, 16);
     };
     PlayerController.prototype.createControllerGUI = function () {
-        var _a, _b, _c, _d, _e;
         var gui = new GUI({
             autoPlace: true,
-            closed: true,
+            closed: false,
         });
         gui.domElement.style.opacity = ".6";
         gui.domElement.style.transformOrigin = "100% 0";
         gui.domElement.style.transform = "scale(1)";
-        this.target.appendChild(gui.domElement);
+        this.anchor.appendChild(gui.domElement);
         gui.domElement.style.position = "absolute";
         gui.domElement.style.right = "0";
         gui.domElement.style.top = "0";
         gui.domElement.style.zIndex = "2";
-        var runTimeFps = gui.add({ "FPS": 0 }, "FPS", 0);
-        var drawCall = gui.add({ "drawCall": 0 }, "drawCall", 0);
-        var runTimeResolution = gui.add({ "分辨率": "" }, "分辨率", "");
-        var moreCalculation = gui.add({ "额外计算": 0 }, "额外计算", 0, 200);
-        var renderOptions = gui.addFolder("renderOptions");
-        this.controller = {
-            runTimeResolution: runTimeResolution,
-            runTimeFps: runTimeFps,
-            drawCall: drawCall,
-            moreCalculation: moreCalculation,
-            minFPS: renderOptions.add({ "最低fps": (_a = this.data.minFPS) !== null && _a !== void 0 ? _a : 40 }, "最低fps", 0, 60),
-            maxFPS: renderOptions.add({ "最高fps": (_b = this.data.maxFPS) !== null && _b !== void 0 ? _b : 50 }, "最高fps", 0, 60),
-            resolution: renderOptions.add({ "目标分辨倍率": (_c = this.data.resolution) !== null && _c !== void 0 ? _c : window.devicePixelRatio }, "目标分辨倍率", 0.5, 6),
-            autoResolution: renderOptions.add({ "自动分辨率": (_d = this.data.autoResolution) !== null && _d !== void 0 ? _d : false }, "自动分辨率", true),
-            autoFps: renderOptions.add({ "自动fps": (_e = this.data.autoFPS) !== null && _e !== void 0 ? _e : true }, "自动fps", true),
-            transactionBgColor: renderOptions.addColor({ "切页背景色": this.data.transactionBgColor }, "切页背景色"),
+        var controller = {
+            frameRate: gui.add(this.config, "frameRate"),
+            drawFrames: gui.add(this.config, "drawFrames"),
+            drawCall: gui.add(this.config, "drawCall"),
+            size: gui.add(this.config, "size"),
+            minFPS: gui.add(this.config, "minFPS", 0, 60),
+            maxFPS: gui.add(this.config, "maxFPS", 0, 60),
+            resolution: gui.add(this.config, "resolution", 0.5, 8, 0.5),
+            autoResolution: gui.add(this.config, "autoResolution"),
+            autoFps: gui.add(this.config, "autoFPS"),
+            transactionBgColor: gui.addColor(this.config, "backgroundColor"),
         };
-        this.controller.runTimeFps.disabled = true;
-        this.controller.runTimeResolution.disabled = true;
-        return gui;
-    };
-    PlayerController.prototype.addEventListener = function () {
-        var _this = this;
-        this.controller.autoFps.onChange(function (value) {
-            _this.data.autoFPS = value;
-            _this.player.updateConfig(_this.data);
-        });
-        this.controller.maxFPS.onChange(function (value) {
-            _this.data.maxFPS = value;
-            _this.player.updateConfig(_this.data);
-        });
-        this.controller.minFPS.onChange(function (value) {
-            _this.data.minFPS = value;
-            _this.player.updateConfig(_this.data);
-        });
-        this.controller.autoResolution.onChange(function (value) {
-            _this.data.autoResolution = value;
-            _this.player.updateConfig(_this.data);
-        });
-        this.controller.resolution.onChange(function (value) {
-            _this.data.resolution = value;
-            _this.player.updateConfig(_this.data);
-        });
-        this.controller.transactionBgColor.onChange(function (value) {
-            _this.data.transactionBgColor = value;
-            _this.player.updateConfig(_this.data);
-        });
-        var md5Value;
-        this.controller.moreCalculation.onChange(function (value) {
-            var calc = function () {
-                var str = "";
-                while (str.length < value * 8000) {
-                    str += Math.random().toString(32).substr(2);
-                }
-                md5(str);
-            };
-            if (md5Value) {
-                // @ts-ignore
-                _this.player.app.ticker.remove(md5Value);
-            }
-            if (value > 0) {
-                md5Value = calc;
-                // @ts-ignore
-                _this.player.app.ticker.add(md5Value);
-            }
-        });
+        return [gui, controller];
     };
     PlayerController.prototype.destroy = function () {
         try {
             window.clearInterval(this.stateId);
-            this.target.removeChild(this.gui.domElement);
+            this.anchor.removeChild(this.gui.domElement);
             this.gui.destroy();
         }
         catch (_a) {

package/lib/RenderingTaskManager.js

@@ -95,7 +95,7 @@ var RenderingTaskManager = /** @class */ (function () {
                 _this.tasks.splice(selfIndex, 1);
                 _this.replaceIdleTask();
             }
-            _this.eventHub.emit("task-end-" + task.id);
+            _this.eventHub.emit("task-end-".concat(task.id));
         });
         this.eventHub.on("task-error", function (_a) {
             var task = _a.task;

package/lib/Slide.d.ts

@@ -323,6 +323,7 @@ export declare class Slide extends Slide_base {
     private frameWidth;
     private frameHeight;
     private frame;
+    private canvasContainer;
     private medianController;
     private frameResizeObserver;
     private timestamp;