feat: update whiteboard

dist/cjs/board/Drawboard/index.js

@@ -46,7 +46,7 @@ var Drawboard = (function (_super) {
             if (_this.source.imgSrc) {
                 _this.target.style.display = 'none';
             }
-            _this.boardHolder.style.opacity = '0';
+            _this.boardHolder.style.visibility = 'hidden';
             _this.boardHolder.style.zIndex = '-1';
             if (_this.toolbar) {
                 _this.toolbar.hide();
@@ -56,7 +56,7 @@ var Drawboard = (function (_super) {
             if (_this.source.imgSrc) {
                 _this.target.style.display = 'block';
             }
-            _this.boardHolder.style.opacity = '1';
+            _this.boardHolder.style.opacity = 'visible';
             _this.boardHolder.style.zIndex = '9999';
             if (_this.toolbar) {
                 _this.toolbar.show();

dist/cjs/board/Whiteboard/index.js

@@ -47,6 +47,13 @@ var Whiteboard = (function () {
         }
         this.init();
     }
+    Object.defineProperty(Whiteboard.prototype, "activePage", {
+        get: function () {
+            return this.pages[this.visiblePageIndex];
+        },
+        enumerable: true,
+        configurable: true
+    });
     Whiteboard.prototype.open = function () {
         var _this = this;
         this.pages.forEach(function (page, i) {
@@ -61,6 +68,12 @@ var Whiteboard = (function () {
             clearInterval(this.emitInterval);
         }
     };
+    Whiteboard.prototype.show = function () {
+        this.activePage.show();
+    };
+    Whiteboard.prototype.hide = function () {
+        this.activePage.hide();
+    };
     Whiteboard.prototype.snap = function () {
         return {
             id: this.id,
@@ -88,7 +101,7 @@ var Whiteboard = (function () {
                 eventHub: _this.eventHub,
                 parentContainer: _this.pagesContainer
             });
-            page.container.style.opacity = '0';
+            page.container.style.visibility = 'hidden';
             _this.pages.push(page);
         });
         this.initSiema();
@@ -201,7 +214,7 @@ var Whiteboard = (function () {
                     parentContainer: _this.pagesContainer
                 });
                 page.id = pageIds[i];
-                page.container.style.opacity = '0';
+                page.container.style.opacity = 'hidden';
                 _this.pages.push(page);
                 page.open();
             });

dist/cjs/toolbar/Toolbar.js

@@ -21,11 +21,11 @@ var Toolbar = (function () {
         this.clickHandler = clickHandler;
     }
     Toolbar.prototype.hide = function () {
-        this.toolbarUI.style.opacity = '0';
+        this.toolbarUI.style.visibility = 'hidden';
         this.toolbarUI.style.zIndex = '-1';
     };
     Toolbar.prototype.show = function () {
-        this.toolbarUI.style.opacity = '1';
+        this.toolbarUI.style.visibility = 'visible';
         this.toolbarUI.style.zIndex = '999';
     };
     return Toolbar;

dist/types/board/Whiteboard/index.d.ts

@@ -18,6 +18,7 @@ export declare class Whiteboard {
     mode: WhiteboardMode;
     isFullscreen: boolean;
     pages: WhitePage[];
+    readonly activePage: WhitePage;
     siema: any;
     isInitialized: boolean;
     visiblePageIndex: number;
@@ -30,6 +31,8 @@ export declare class Whiteboard {
     });
     open(): void;
     close(): void;
+    show(): void;
+    hide(): void;
     snap(): SerializableWhiteboard;
     private init;
     private initMaster;

src/board/Drawboard/index.ts

@@ -85,7 +85,7 @@ export class Drawboard extends Baseboard {
       this.target.style.display = 'none';
     }
     // 这里不使用 display:none，是为了保证在隐藏时候仍然可以执行更新
-    this.boardHolder.style.opacity = '0';
+    this.boardHolder.style.visibility = 'hidden';
     this.boardHolder.style.zIndex = '-1';
 
     if (this.toolbar) {
@@ -98,7 +98,7 @@ export class Drawboard extends Baseboard {
       this.target.style.display = 'block';
     }
 
-    this.boardHolder.style.opacity = '1';
+    this.boardHolder.style.opacity = 'visible';
     this.boardHolder.style.zIndex = '9999';
 
     if (this.toolbar) {

src/board/Whiteboard/index.ts

@@ -41,6 +41,9 @@ export class Whiteboard {
 
   /** 句柄 */
   pages: WhitePage[] = [];
+  get activePage() {
+    return this.pages[this.visiblePageIndex];
+  }
   siema: any;
 
   /** State | 内部状态 */
@@ -113,6 +116,15 @@ export class Whiteboard {
     }
   }
 
+  /** 展示当前的 WhitePage */
+  public show() {
+    this.activePage.show();
+  }
+
+  public hide() {
+    this.activePage.hide();
+  }
+
   /** 获取当前快照 */
   public snap(): SerializableWhiteboard {
     return {
@@ -155,7 +167,7 @@ export class Whiteboard {
       );
 
       // 这里隐藏 Dashboard 的图片源，Siema 切换的是占位图片
-      page.container.style.opacity = '0';
+      page.container.style.visibility = 'hidden';
 
       this.pages.push(page);
     });
@@ -306,7 +318,7 @@ export class Whiteboard {
         page.id = pageIds[i];
 
         // 这里隐藏 Dashboard 的图片源，Siema 切换的是占位图片
-        page.container.style.opacity = '0';
+        page.container.style.opacity = 'hidden';
 
         this.pages.push(page);
 

src/toolbar/Toolbar.ts

@@ -33,12 +33,12 @@ export class Toolbar {
   };
 
   public hide() {
-    this.toolbarUI.style.opacity = '0';
+    this.toolbarUI.style.visibility = 'hidden';
     this.toolbarUI.style.zIndex = '-1';
   }
 
   public show() {
-    this.toolbarUI.style.opacity = '1';
+    this.toolbarUI.style.visibility = 'visible';
     this.toolbarUI.style.zIndex = '999';
   }
 }