fcr-ui-scene 3.4.0 → 3.4.2

package/lib/modules/whiteboard/index.js

@@ -51,7 +51,6 @@ require("core-js/modules/es.array.iterator.js");
 require("core-js/modules/es.array.push.js");
 require("core-js/modules/es.array.some.js");
 require("core-js/modules/es.function.bind.js");
-require("core-js/modules/es.object.assign.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.object.values.js");
 require("core-js/modules/es.set.js");
@@ -102,7 +101,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _type = require("./type");
-var _app = require("./app");
+var _view = require("./view");
 var _context3 = require("./context");
 var _mobx = require("mobx");
 var _utils = require("./utils");
@@ -120,9 +119,8 @@ var _fcrCore = require("fcr-core");
 var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
 var _libs = _interopRequireDefault(require("./components/switch-theme/libs"));
 var _types = require("fcr-core/lib/room-control/whiteboard-control/types");
-var _type3 = require("../layout/type");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _type4 = require("agora-ui-foundation/lib/components/icon/type");
+var _type3 = require("agora-ui-foundation/lib/components/icon/type");
 var _jsxRuntime = require("react/jsx-runtime");
 var _FcrWhiteboardUIModule;
 var _initProto, _init__lonelyWindowState, _init__ownerUser, _init__isHost, _init__boardBackground, _init__localUser, _onPropertiesUpdateDecs, _mountDecs, _unmountDecs, _unloadDecs, _boardUIEventsDecs, _createToolbarUIContextDecs, _repositionToolbarDecs, _updateRedoDecs, _updateUndoDecs, _setConnectionStateDecs, _getSnapshotImageDecs, _openLonelyWindowDecs, _setJoinSuccessedDecs, _ref;
@@ -147,17 +145,13 @@ var _D = /*#__PURE__*/new WeakMap();
 var _E = /*#__PURE__*/new WeakMap();
 _ref = (_onPropertiesUpdateDecs = [_mobx.action, _mobx.action.bound], _mountDecs = [_mobx.action, _mobx.action.bound], _unmountDecs = [_mobx.action, _mobx.action.bound], _unloadDecs = [_mobx.action, _mobx.action.bound], _boardUIEventsDecs = [_mobx.action, _mobx.action.bound], _createToolbarUIContextDecs = [_mobx.action, _mobx.action.bound], _repositionToolbarDecs = [_mobx.action, _mobx.action.bound], _updateRedoDecs = [_mobx.action, _mobx.action.bound], _updateUndoDecs = [_mobx.action, _mobx.action.bound], _setConnectionStateDecs = [_mobx.action, _mobx.action.bound], _getSnapshotImageDecs = [_mobx.action, _mobx.action.bound], _openLonelyWindowDecs = [_mobx.action, _mobx.action.bound], _setJoinSuccessedDecs = [_mobx.action, _mobx.action.bound], "_disposers");
 var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/function (_UIModule) {
-  function FcrWhiteboardUIModule(_ref2) {
+  function FcrWhiteboardUIModule() {
     var _this;
-    var uiEventStore = _ref2.uiEventStore,
-      userControl = _ref2.userControl,
-      roomControl = _ref2.roomControl,
-      whiteboardControl = _ref2.whiteboardControl,
-      streamControl = _ref2.streamControl,
-      securityStore = _ref2.securityStore;
     (0, _classCallCheck2["default"])(this, FcrWhiteboardUIModule);
-    _this = _callSuper(this, FcrWhiteboardUIModule);
-    //@ts-ignore
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, FcrWhiteboardUIModule, [].concat(args));
     (0, _defineProperty2["default"])(_this, _ref, (_initProto(_this), []));
     (0, _defineProperty2["default"])(_this, "_connectionState", _fcrCore.FcrConnectionState.DISCONNECTED);
     (0, _defineProperty2["default"])(_this, "_defaultBoardState", {
@@ -182,87 +176,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
     _classPrivateFieldInitSpec(_this, _B, _init__ownerUser(_this, undefined));
     _classPrivateFieldInitSpec(_this, _C, _init__isHost(_this, false));
     _classPrivateFieldInitSpec(_this, _D, _init__boardBackground(_this, '#ffffff'));
-    _classPrivateFieldInitSpec(_this, _E, _init__localUser(_this));
-    _this._uiEventStore = uiEventStore;
-    _this._userControl = userControl;
-    _this._roomControl = roomControl;
-    _this._securityStore = securityStore;
-    _this._whiteboardControl = whiteboardControl;
-    _this._whiteboardControl.addObserver(_this._boardObservble());
-    _this._toolbarStore = new _store.ToolbarStore();
-    _this._controlbarStore = new _store2.WhiteboardControlBarStore({
-      uiEventStore: uiEventStore,
-      streamControl: streamControl,
-      userControl: userControl,
-      securityStore: securityStore
-    });
-    whiteboardControl.addObserver({
-      onActive: function onActive(ownerId, operatorUser) {
-        _this.onPropertiesUpdate({
-          operatorUser: operatorUser
-        });
-      },
-      onInactive: function onInactive(reason, operatorUser) {
-        var _this$_ownerUser;
-        var currentUserId = _this._localUser.userId;
-        if (reason === _types.FcrBoardInactiveReason.SEIZE && (operatorUser === null || operatorUser === void 0 ? void 0 : operatorUser.userId) !== currentUserId && ((_this$_ownerUser = _this._ownerUser) === null || _this$_ownerUser === void 0 ? void 0 : _this$_ownerUser.userId) === currentUserId) {
-          _this._alertWhenReplace(operatorUser);
-          return;
-        }
-        _this.onDestroy({
-          operatorUser: operatorUser
-        });
-      },
-      onBackgroundColorUpdated: function onBackgroundColorUpdated(color) {
-        _this._setBackground(color);
-      }
-    });
-    streamControl.addObserver({
-      onStreamsRemoved: function onStreamsRemoved(roomId, events) {
-        var isReplaced = events.find(function (event) {
-          var _event$cause;
-          return ((_event$cause = event.cause) === null || _event$cause === void 0 ? void 0 : _event$cause.data.reason) === _types.FcrBoardInactiveReason.SEIZE;
-        });
-        var isMyStream = events.some(function (event) {
-          return event.modifiedStream.owner.userId === _this._localUser.userId;
-        });
-        if (isReplaced && isMyStream) {
-          _this._alertWhenReplace(isReplaced === null || isReplaced === void 0 ? void 0 : isReplaced.operatorUser);
-        }
-        if (isReplaced && !isMyStream) {
-          var _isReplaced$operatorU;
-          _this._uiEventStore.showToast({
-            type: 'info',
-            message: "".concat(isReplaced === null || isReplaced === void 0 || (_isReplaced$operatorU = isReplaced.operatorUser) === null || _isReplaced$operatorU === void 0 ? void 0 : _isReplaced$operatorU.userName, " ").concat((0, _i18n.transI18n)('fmt_screenshare_whiteboard_lables_newshare'))
-          });
-        }
-        if (isReplaced && isMyStream && !_this._isActive) {
-          _this._uiEventStore.sendEvent(_constant.UIAction.STOP_SCREEN_CAPTURE);
-        }
-      }
-    });
-    userControl.addObserver({
-      onUserInfoUpdated: function onUserInfoUpdated(_, event) {
-        if (event.modifiedUser.userId === _this._localUser.userId) {
-          _this._localUser = event.modifiedUser;
-          _this._isHost = [_type2.FcrUserRole.HOST, _type2.FcrUserRole.COHOST].includes(_this._localUser.userRole);
-        }
-      }
-    });
-    _this._uiEventStore.addObserver({
-      onEvent: _this.onEvent.bind(_this)
-    });
-    _this._boardStore = _this._createBoardUIContext();
-    _this._localUser = _this._userControl.getLocalUser();
-    _this._isHost = [_type2.FcrUserRole.HOST, _type2.FcrUserRole.COHOST].includes(_this._localUser.userRole);
-    window.addEventListener('resize', _this._resetCanvasPosition);
-    var activeInfo = whiteboardControl.getBoardActiveInfo();
-    _this._isActive = activeInfo.isActive;
-    if (_this._isActive) {
-      _this._checkBoard();
-      _this._ownerUser = _this._userControl.getUser(activeInfo.ownerUserId);
-      _this._boardBackground = whiteboardControl.getBackgroundColor();
-    }
+    _classPrivateFieldInitSpec(_this, _E, _init__localUser(_this, undefined));
     return _this;
   }
   (0, _inherits2["default"])(FcrWhiteboardUIModule, _UIModule);
@@ -309,7 +223,8 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "hasPrivilege",
     get: function get() {
-      return this._securityStore.hasWriteBoardPermission();
+      var _this$_securityStore;
+      return (_this$_securityStore = this._securityStore) === null || _this$_securityStore === void 0 ? void 0 : _this$_securityStore.hasWriteBoardPermission();
     }
   }, {
     key: "contentAreaSize",
@@ -334,6 +249,102 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       }
       return contentAreaSize;
     }
+  }, {
+    key: "onNodeWillActive",
+    value: function onNodeWillActive() {
+      var _this$currentRoomCont,
+        _this2 = this,
+        _this$_uiEventStore;
+      this._uiEventStore = this.eventProvider;
+      this._roomControl = (_this$currentRoomCont = this.currentRoomControlProvider) === null || _this$currentRoomCont === void 0 ? void 0 : _this$currentRoomCont.currentRoomControl;
+      this._securityStore = this.privilegeProvider;
+      this._whiteboardControl = this._roomControl.getBoardControl();
+      this._whiteboardControl.addObserver(this._boardObservble());
+      this._toolbarStore = new _store.ToolbarStore();
+      var streamControl = this._roomControl.getStreamControl();
+      var userControl = this._roomControl.getUserControl();
+      this._userControl = userControl;
+      this._controlbarStore = new _store2.WhiteboardControlBarStore({
+        uiEventStore: this.eventProvider,
+        streamControl: streamControl,
+        userControl: userControl,
+        securityStore: this.privilegeProvider
+      });
+      this._whiteboardControl.addObserver({
+        onActive: function onActive(ownerId, operatorUser) {
+          _this2.onPropertiesUpdate({
+            operatorUser: operatorUser
+          });
+        },
+        onInactive: function onInactive(reason, operatorUser) {
+          var _this2$_localUser, _this2$_ownerUser;
+          var currentUserId = (_this2$_localUser = _this2._localUser) === null || _this2$_localUser === void 0 ? void 0 : _this2$_localUser.userId;
+          if (reason === _types.FcrBoardInactiveReason.SEIZE && (operatorUser === null || operatorUser === void 0 ? void 0 : operatorUser.userId) !== currentUserId && ((_this2$_ownerUser = _this2._ownerUser) === null || _this2$_ownerUser === void 0 ? void 0 : _this2$_ownerUser.userId) === currentUserId) {
+            _this2._alertWhenReplace(operatorUser);
+          }
+          _this2.onDestroy({
+            operatorUser: operatorUser
+          });
+        },
+        onBackgroundColorUpdated: function onBackgroundColorUpdated(color) {
+          _this2._setBackground(color);
+        }
+      });
+      streamControl.addObserver({
+        onStreamsRemoved: function onStreamsRemoved(roomId, events) {
+          var isReplaced = events.find(function (event) {
+            var _event$cause;
+            return ((_event$cause = event.cause) === null || _event$cause === void 0 ? void 0 : _event$cause.data.reason) === _types.FcrBoardInactiveReason.SEIZE;
+          });
+          var isMyStream = events.some(function (event) {
+            var _this2$_localUser2;
+            return event.modifiedStream.owner.userId === ((_this2$_localUser2 = _this2._localUser) === null || _this2$_localUser2 === void 0 ? void 0 : _this2$_localUser2.userId);
+          });
+          if (isReplaced && isMyStream) {
+            _this2._alertWhenReplace(isReplaced === null || isReplaced === void 0 ? void 0 : isReplaced.operatorUser);
+          }
+          if (isReplaced && !isMyStream) {
+            var _this2$_uiEventStore, _isReplaced$operatorU;
+            (_this2$_uiEventStore = _this2._uiEventStore) === null || _this2$_uiEventStore === void 0 || _this2$_uiEventStore.showToast({
+              type: 'info',
+              message: "".concat(isReplaced === null || isReplaced === void 0 || (_isReplaced$operatorU = isReplaced.operatorUser) === null || _isReplaced$operatorU === void 0 ? void 0 : _isReplaced$operatorU.userName, " ").concat((0, _i18n.transI18n)('fmt_screenshare_whiteboard_lables_newshare'))
+            });
+          }
+          if (isReplaced && isMyStream && !_this2._isActive) {
+            var _this2$_uiEventStore2;
+            (_this2$_uiEventStore2 = _this2._uiEventStore) === null || _this2$_uiEventStore2 === void 0 || _this2$_uiEventStore2.sendEvent(_constant.FcrUIAction.STOP_SCREEN_CAPTURE);
+          }
+        }
+      });
+      userControl.addObserver({
+        onUserInfoUpdated: function onUserInfoUpdated(_, event) {
+          var _this2$_localUser3;
+          if (event.modifiedUser.userId === ((_this2$_localUser3 = _this2._localUser) === null || _this2$_localUser3 === void 0 ? void 0 : _this2$_localUser3.userId)) {
+            _this2._localUser = event.modifiedUser;
+            _this2._isHost = [_type2.FcrUserRole.HOST, _type2.FcrUserRole.COHOST].includes(_this2._localUser.userRole);
+          }
+        }
+      });
+      (_this$_uiEventStore = this._uiEventStore) === null || _this$_uiEventStore === void 0 || _this$_uiEventStore.addObserver({
+        onEvent: this.onEvent.bind(this)
+      });
+      this._boardStore = this._createBoardUIContext();
+      this._localUser = this._userControl.getLocalUser();
+      this._isHost = [_type2.FcrUserRole.HOST, _type2.FcrUserRole.COHOST].includes(this._localUser.userRole);
+      window.addEventListener('resize', this._resetCanvasPosition);
+      var activeInfo = this._whiteboardControl.getBoardActiveInfo();
+      this._isActive = activeInfo.isActive;
+      if (this._isActive) {
+        this._checkBoard();
+        this._ownerUser = this._userControl.getUser(activeInfo.ownerUserId);
+        this._boardBackground = this._whiteboardControl.getBackgroundColor();
+      }
+    }
+  }, {
+    key: "onNodeWillInactive",
+    value: function onNodeWillInactive() {
+      this.onDestroy();
+    }
   }, {
     key: "getComponent",
     value: function getComponent(dom) {
@@ -344,7 +355,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_store2.WhiteboardControlBarUIContext.Provider, {
             value: this._controlbarStore,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_multiWindow.MultiWindowWidgetDialog, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_app.Whiteboard, {})
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.Whiteboard, {})
             })
           })
         })
@@ -364,16 +375,16 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
     value: function onEvent(event, payload) {
       var _this$_whiteboardCont2;
       switch (event) {
-        case _constant.UIAction.OPEN_WHITEBOARD:
+        case _constant.FcrUIAction.OPEN_WHITEBOARD:
           if (!this._isActive) {
             var _this$_whiteboardCont;
             (_this$_whiteboardCont = this._whiteboardControl) === null || _this$_whiteboardCont === void 0 || _this$_whiteboardCont.active();
           }
           break;
-        case _constant.UIAction.CLOSE_WHITEBOARD:
+        case _constant.FcrUIAction.CLOSE_WHITEBOARD:
           (_this$_whiteboardCont2 = this._whiteboardControl) === null || _this$_whiteboardCont2 === void 0 || _this$_whiteboardCont2.inactive();
           break;
-        case _constant.UIAction.WHITEBOARD_CHANGED:
+        case _constant.FcrUIAction.WHITEBOARD_CHANGED:
           this._setCanvasBound(payload.action);
           if (payload.action === _type.WhiteboardControlbarEvents.LONEYWINDOW) {
             this._lonelyWindowState = payload.payload ? _type.LonelyWindowState.OPEN : _type.LonelyWindowState.CLOSE;
@@ -387,22 +398,23 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
             break;
           }
           break;
-        case _constant.UIAction.TOGGLE_LAYOUT:
-          if (payload.layout === _type3.FcrUIVideoWindowLayoutType.Gallery) {
-            if (this._boardDom) {
-              var style = {
-                width: '100%',
-                height: '100%',
-                left: 0,
-                top: 0
-              };
-              Object.assign(this._boardDom.style, style);
-            }
-          } else {
-            this._resetCanvasPosition();
-          }
-          break;
-        case _constant.UIAction.CAROUSEL_COLLAPSED:
+        // TODO:
+        // case FcrUIAction.TOGGLE_LAYOUT:
+        //   if (payload.layout === FcrUIVideoWindowLayoutType.Gallery) {
+        //     if (this._boardDom) {
+        //       const style = {
+        //         width: '100%',
+        //         height: '100%',
+        //         left: 0,
+        //         top: 0,
+        //       };
+        //       Object.assign(this._boardDom.style, style);
+        //     }
+        //   } else {
+        //     this._resetCanvasPosition();
+        //   }
+        //   break;
+        case _constant.FcrUIAction.CAROUSEL_COLLAPSED:
           this._resetCanvasPosition();
           break;
       }
@@ -416,16 +428,15 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "onDestroy",
     value: function onDestroy(params) {
-      var _this$_ownerUser2;
-      var _ref3 = params || {},
-        operatorUser = _ref3.operatorUser;
-      if (this._securityStore.hasStartScreenSharePermission() && (operatorUser === null || operatorUser === void 0 ? void 0 : operatorUser.userId) !== this._localUser.userId) {
-        this._uiEventStore.showToast({
+      var _this$_securityStore2, _this$_localUser;
+      var _ref2 = params || {},
+        operatorUser = _ref2.operatorUser;
+      if ((_this$_securityStore2 = this._securityStore) !== null && _this$_securityStore2 !== void 0 && _this$_securityStore2.hasStartScreenSharePermission() && (operatorUser === null || operatorUser === void 0 ? void 0 : operatorUser.userId) !== ((_this$_localUser = this._localUser) === null || _this$_localUser === void 0 ? void 0 : _this$_localUser.userId)) {
+        var _this$_uiEventStore2;
+        (_this$_uiEventStore2 = this._uiEventStore) === null || _this$_uiEventStore2 === void 0 || _this$_uiEventStore2.showToast({
           message: this._isMyBoard ? (0, _i18n.transI18n)('fmt_screenshare_whiteboard_tips_stoppedboard') : (0, _i18n.transI18n)('fmt_screenshare_whiteboard_tips_stopped'),
           type: 'info'
         });
-      } else if (operatorUser && [(_type2.FcrUserRole.HOST, _type2.FcrUserRole.COHOST)].includes(operatorUser === null || operatorUser === void 0 ? void 0 : operatorUser.userRole) && operatorUser.userId !== ((_this$_ownerUser2 = this._ownerUser) === null || _this$_ownerUser2 === void 0 ? void 0 : _this$_ownerUser2.userId)) {
-        return;
       }
       if (!this._joined) return;
       this._isActive = false;
@@ -453,15 +464,15 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         this._resetToolIfNeed();
         this._repositionToolbar();
         if (this._boardMainWindow) {
-          var _this$_ownerUser3, _this$_localUser, _this$_boardStore2, _this$_boardStore3;
-          this._setBackground(this._whiteboardControl.getBackgroundColor() || this._boardBackground);
+          var _this$_whiteboardCont3, _this$_userControl, _this$_ownerUser, _this$_localUser2, _this$_boardStore2, _this$_boardStore3, _this$_uiEventStore3;
+          this._setBackground(((_this$_whiteboardCont3 = this._whiteboardControl) === null || _this$_whiteboardCont3 === void 0 ? void 0 : _this$_whiteboardCont3.getBackgroundColor()) || this._boardBackground);
           this._toolbarStore.observables.layoutReady = [_type.LonelyWindowState.CLOSE, _type.LonelyWindowState.DEFAULT].includes(this._lonelyWindowState);
           var activeInfo = this._whiteboardControl.getBoardActiveInfo();
-          this._ownerUser = this._userControl.getUser(activeInfo.ownerUserId);
-          this._isMyBoard = ((_this$_ownerUser3 = this._ownerUser) === null || _this$_ownerUser3 === void 0 ? void 0 : _this$_ownerUser3.userId) === ((_this$_localUser = this._localUser) === null || _this$_localUser === void 0 ? void 0 : _this$_localUser.userId);
+          this._ownerUser = (_this$_userControl = this._userControl) === null || _this$_userControl === void 0 ? void 0 : _this$_userControl.getUser(activeInfo.ownerUserId);
+          this._isMyBoard = ((_this$_ownerUser = this._ownerUser) === null || _this$_ownerUser === void 0 ? void 0 : _this$_ownerUser.userId) === ((_this$_localUser2 = this._localUser) === null || _this$_localUser2 === void 0 ? void 0 : _this$_localUser2.userId);
           (_this$_boardStore2 = this._boardStore) === null || _this$_boardStore2 === void 0 || _this$_boardStore2.setPrivilege(this._isMyBoard || this._isHost);
           (_this$_boardStore3 = this._boardStore) === null || _this$_boardStore3 === void 0 || _this$_boardStore3.setWriteEnable(this._isMyBoard || this._isHost);
-          this._uiEventStore.sendEvent(_constant.UIAction.WHITEBOARD_CHANGED, {
+          (_this$_uiEventStore3 = this._uiEventStore) === null || _this$_uiEventStore3 === void 0 || _this$_uiEventStore3.sendEvent(_constant.FcrUIAction.WHITEBOARD_CHANGED, {
             action: _type.WhiteboardBaseEvents.SET_OWNER_USER_ID,
             payload: activeInfo.ownerUserId
           });
@@ -472,7 +483,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
     key: "unmount",
     value: function unmount() {
       if (this._mounted && this._boardMainWindow) {
-        var _this$_boardDom;
+        var _this$_boardDom, _this$_uiEventStore4;
         (_this$_boardDom = this._boardDom) === null || _this$_boardDom === void 0 || _this$_boardDom.removeChild(this._boardMainWindow.getContentView());
         this._boardMainWindow = undefined;
         if (this._lonelyWindowState === _type.LonelyWindowState.OPEN) {
@@ -481,7 +492,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         if (this._lonelyWindowState === _type.LonelyWindowState.CLOSE) {
           this._open();
         }
-        this._uiEventStore.sendEvent(_constant.UIAction.WHITEBOARD_CHANGED, {
+        (_this$_uiEventStore4 = this._uiEventStore) === null || _this$_uiEventStore4 === void 0 || _this$_uiEventStore4.sendEvent(_constant.FcrUIAction.WHITEBOARD_CHANGED, {
           action: _type.WhiteboardBaseEvents.SET_OWNER_USER_ID,
           payload: null
         });
@@ -507,12 +518,12 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       if (this._boardMainWindow) {
         var _this$_boardMainWindo;
         var themes = (0, _libs["default"])(this._t);
-        var _ref4 = themes.find(function (theme) {
+        var _ref3 = themes.find(function (theme) {
             return theme.background === bgColor;
           }) || {
             colors: []
           },
-          colors = _ref4.colors;
+          colors = _ref3.colors;
         (_this$_boardMainWindo = this._boardMainWindow) === null || _this$_boardMainWindo === void 0 || _this$_boardMainWindo.setBackgroundColor(bgColor);
         if (colors && colors.length > 0) {
           this._toolbarStore.observables.colors = colors;
@@ -543,18 +554,18 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "_boardUIEvents",
     value: function _boardUIEvents(observables) {
-      var _this2 = this;
+      var _this3 = this;
       return {
         handleBoardDomLoad: function handleBoardDomLoad(ref) {
-          _this2._boardDom = ref;
-          if (_this2._boardDom) {
-            _this2.mount();
+          _this3._boardDom = ref;
+          if (_this3._boardDom) {
+            _this3.mount();
           } else {
-            _this2._mounted = false;
+            _this3._mounted = false;
           }
         },
         handleCollectorDomLoad: function handleCollectorDomLoad(ref) {
-          _this2._collectorDom = ref;
+          _this3._collectorDom = ref;
         },
         handleClose: function handleClose() {
           // this._close();
@@ -572,7 +583,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         setWriteEnable: function setWriteEnable(enable) {
           observables.writeEnabled = enable;
           observables.canOperate = enable;
-          _this2._repositionToolbar();
+          _this3._repositionToolbar();
         },
         setWhiteboardVisible: function setWhiteboardVisible(visible) {
           observables.whiteboardVisible = visible;
@@ -589,7 +600,8 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         var origin = this._initHeight / contianHeight;
         var thatStyle = this._boardDom.style;
         thatStyle.transition = 'transform ease .5s';
-        var scaleValue = this._controlbarStore.scaleValue;
+        var _ref4 = this._controlbarStore,
+          scaleValue = _ref4.scaleValue;
         if (_utils.ZOOM_IN_CANVAS) {
           // this._boardMainWindow.setViewMode(ViewMode.Freedom);
         }
@@ -598,7 +610,8 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
           if (scaleValue < this._initHeight / contianHeight) {
             var calcValue = scaleValue + ratio;
             this._controlbarStore.isMaxmum = false;
-            this._controlbarStore.scaleValue = calcValue > origin ? origin : calcValue;
+            var result = calcValue > origin ? origin : calcValue;
+            this._controlbarStore.scaleValue = result;
           } else {
             this._controlbarStore.isMaxmum = true;
           }
@@ -607,7 +620,8 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
           if (scaleValue > 1) {
             var _calcValue = scaleValue - ratio;
             this._controlbarStore.isMinimum = false;
-            this._controlbarStore.scaleValue = _calcValue > 1 ? _calcValue : 1;
+            var _result = _calcValue > 1 ? _calcValue : 1;
+            this._controlbarStore.scaleValue = _result;
           } else {
             this._controlbarStore.isMinimum = true;
           }
@@ -622,7 +636,16 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         }
         var value = this._controlbarStore.scaleValue;
         if (!_utils.ZOOM_IN_CANVAS) {
-          thatStyle.transform = "scale(".concat(value, ")");
+          // scale 无法监听到尺寸变化，会导致画笔位置偏移，所以使用改变宽高的方式进行计算
+          var width = this._initWidth * ratio * value;
+          var height = this._initHeight * ratio * value;
+          thatStyle.width = "".concat(width, "px");
+          thatStyle.height = "".concat(height, "px");
+          thatStyle.position = 'absolute';
+          thatStyle.left = "-".concat(width / 2, "px");
+          thatStyle.marginLeft = '50%';
+          thatStyle.top = "-".concat((height - contianHeight) / 2, "px");
+          // thatStyle.transform = `scale(${value})`;
         } else {
           // this._boardMainWindow.zoom(value);
         }
@@ -631,13 +654,13 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "_resetCanvasPosition",
     value: function _resetCanvasPosition() {
-      var _this3 = this;
+      var _this4 = this;
       if (this._timer) clearTimeout(this._timer);
       this._timer = setTimeout(function () {
-        if (!_this3._boardDom) return;
-        _this3._repositionToolbar();
-        var thatStyle = _this3._boardDom.style;
-        _this3._controlbarStore.scaleValue = 1;
+        if (!_this4._boardDom) return;
+        _this4._repositionToolbar();
+        var thatStyle = _this4._boardDom.style;
+        _this4._controlbarStore.scaleValue = 1;
         thatStyle.transform = "scale(1)";
       }, 300);
     }
@@ -669,24 +692,24 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "_createToolbarUIContext",
     value: function _createToolbarUIContext() {
-      var _this4 = this;
+      var _this5 = this;
       var observables = this._toolbarStore.observables;
       this._toolbarContext = {
         observables: observables,
         redo: function redo() {
-          var _this4$_boardMainWind;
-          return (_this4$_boardMainWind = _this4._boardMainWindow) === null || _this4$_boardMainWind === void 0 ? void 0 : _this4$_boardMainWind.redo();
+          var _this5$_boardMainWind;
+          return (_this5$_boardMainWind = _this5._boardMainWindow) === null || _this5$_boardMainWind === void 0 ? void 0 : _this5$_boardMainWind.redo();
         },
         undo: function undo() {
-          var _this4$_boardMainWind2;
-          return (_this4$_boardMainWind2 = _this4._boardMainWindow) === null || _this4$_boardMainWind2 === void 0 ? void 0 : _this4$_boardMainWind2.undo();
+          var _this5$_boardMainWind2;
+          return (_this5$_boardMainWind2 = _this5._boardMainWindow) === null || _this5$_boardMainWind2 === void 0 ? void 0 : _this5$_boardMainWind2.undo();
         },
         clean: function clean() {
-          var _this4$_boardMainWind3;
-          return (_this4$_boardMainWind3 = _this4._boardMainWindow) === null || _this4$_boardMainWind3 === void 0 ? void 0 : _this4$_boardMainWind3.clean();
+          var _this5$_boardMainWind3;
+          return (_this5$_boardMainWind3 = _this5._boardMainWindow) === null || _this5$_boardMainWind3 === void 0 ? void 0 : _this5$_boardMainWind3.clean();
         },
         saveDraft: function saveDraft() {
-          return _this4._getSnapshotImage();
+          return _this5._getSnapshotImage();
         },
         clickExpansionTool: function clickExpansionTool() {},
         setToolbarPosition: function setToolbarPosition(pos) {
@@ -696,43 +719,43 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
           return observables.toolbarReleased = false;
         },
         setTool: function setTool(tool) {
-          var _this4$_boardMainWind4;
+          var _this5$_boardMainWind4;
           observables.currentTool = tool;
           observables.currentShape = undefined;
-          (_this4$_boardMainWind4 = _this4._boardMainWindow) === null || _this4$_boardMainWind4 === void 0 || _this4$_boardMainWind4.setToolType(tool);
+          (_this5$_boardMainWind4 = _this5._boardMainWindow) === null || _this5$_boardMainWind4 === void 0 || _this5$_boardMainWind4.setToolType(tool);
         },
         setPen: function setPen(shape) {
-          var _this4$_boardMainWind5, _this4$_boardMainWind6, _this4$_boardMainWind7;
+          var _this5$_boardMainWind5, _this5$_boardMainWind6, _this5$_boardMainWind7;
           observables.currentShape = shape;
           observables.lastPen = shape;
           observables.currentTool = undefined;
-          (_this4$_boardMainWind5 = _this4._boardMainWindow) === null || _this4$_boardMainWind5 === void 0 || _this4$_boardMainWind5.setToolType(_this4._convertShapeToBoardToolType(shape));
-          (_this4$_boardMainWind6 = _this4._boardMainWindow) === null || _this4$_boardMainWind6 === void 0 || _this4$_boardMainWind6.setStrokeWidth(observables.currentStrokeWidth);
-          (_this4$_boardMainWind7 = _this4._boardMainWindow) === null || _this4$_boardMainWind7 === void 0 || _this4$_boardMainWind7.setStrokeColor((0, _tinycolor["default"])(observables.currentColor).toRgb());
+          (_this5$_boardMainWind5 = _this5._boardMainWindow) === null || _this5$_boardMainWind5 === void 0 || _this5$_boardMainWind5.setToolType(_this5._convertShapeToBoardToolType(shape));
+          (_this5$_boardMainWind6 = _this5._boardMainWindow) === null || _this5$_boardMainWind6 === void 0 || _this5$_boardMainWind6.setStrokeWidth(observables.currentStrokeWidth);
+          (_this5$_boardMainWind7 = _this5._boardMainWindow) === null || _this5$_boardMainWind7 === void 0 || _this5$_boardMainWind7.setStrokeColor((0, _tinycolor["default"])(observables.currentColor).toRgb());
         },
         setShape: function setShape(shape) {
-          var _this4$_boardMainWind8, _this4$_boardMainWind9, _this4$_boardMainWind10;
+          var _this5$_boardMainWind8, _this5$_boardMainWind9, _this5$_boardMainWind10;
           observables.currentShape = shape;
           observables.lastShape = shape;
           observables.currentTool = undefined;
-          (_this4$_boardMainWind8 = _this4._boardMainWindow) === null || _this4$_boardMainWind8 === void 0 || _this4$_boardMainWind8.setToolType(_this4._convertShapeToBoardToolType(shape));
-          (_this4$_boardMainWind9 = _this4._boardMainWindow) === null || _this4$_boardMainWind9 === void 0 || _this4$_boardMainWind9.setStrokeWidth(observables.currentStrokeWidth);
-          (_this4$_boardMainWind10 = _this4._boardMainWindow) === null || _this4$_boardMainWind10 === void 0 || _this4$_boardMainWind10.setStrokeColor((0, _tinycolor["default"])(observables.currentColor).toRgb());
+          (_this5$_boardMainWind8 = _this5._boardMainWindow) === null || _this5$_boardMainWind8 === void 0 || _this5$_boardMainWind8.setToolType(_this5._convertShapeToBoardToolType(shape));
+          (_this5$_boardMainWind9 = _this5._boardMainWindow) === null || _this5$_boardMainWind9 === void 0 || _this5$_boardMainWind9.setStrokeWidth(observables.currentStrokeWidth);
+          (_this5$_boardMainWind10 = _this5._boardMainWindow) === null || _this5$_boardMainWind10 === void 0 || _this5$_boardMainWind10.setStrokeColor((0, _tinycolor["default"])(observables.currentColor).toRgb());
         },
         setStrokeColor: function setStrokeColor(color) {
-          var _this4$_boardMainWind11;
+          var _this5$_boardMainWind11;
           observables.currentColor = color;
-          (_this4$_boardMainWind11 = _this4._boardMainWindow) === null || _this4$_boardMainWind11 === void 0 || _this4$_boardMainWind11.setStrokeColor((0, _tinycolor["default"])(color).toRgb());
+          (_this5$_boardMainWind11 = _this5._boardMainWindow) === null || _this5$_boardMainWind11 === void 0 || _this5$_boardMainWind11.setStrokeColor((0, _tinycolor["default"])(color).toRgb());
         },
         setStrokeWidth: function setStrokeWidth(strokeWidth) {
-          var _this4$_boardMainWind12;
+          var _this5$_boardMainWind12;
           observables.currentStrokeWidth = strokeWidth;
-          (_this4$_boardMainWind12 = _this4._boardMainWindow) === null || _this4$_boardMainWind12 === void 0 || _this4$_boardMainWind12.setStrokeWidth(strokeWidth);
+          (_this5$_boardMainWind12 = _this5._boardMainWindow) === null || _this5$_boardMainWind12 === void 0 || _this5$_boardMainWind12.setStrokeWidth(strokeWidth);
         },
         releaseToolbar: function releaseToolbar() {
           observables.toolbarReleased = true;
-          _this4._updateDockPlacement();
-          _this4._repositionToolbar();
+          _this5._updateDockPlacement();
+          _this5._repositionToolbar();
         },
         captureScreen: function captureScreen() {
           var hideWindow = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
@@ -741,7 +764,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
           });
         },
         setTheme: (0, _mobx.action)(function (theme) {
-          _this4._setBackgroundColor(theme.background);
+          _this5._setBackgroundColor(theme.background);
           observables.colors = theme.colors;
           observables.currentThemeType = theme;
         }),
@@ -771,7 +794,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
               // right
               toolbarContext.observables.toolbarDockPosition = {
                 x: containerClientRect.width - toolbarClientRect.width,
-                y: toolbarOffsetTop + _utils.sceneNavHeight / 2,
+                y: toolbarOffsetTop,
                 placement: 'right'
               };
             } else {
@@ -852,9 +875,9 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "_setBackgroundColor",
     value: function _setBackgroundColor(bgColor) {
-      var _this$_whiteboardCont3;
+      var _this$_whiteboardCont4;
       var color = bgColor || 'white';
-      (_this$_whiteboardCont3 = this._whiteboardControl) === null || _this$_whiteboardCont3 === void 0 || _this$_whiteboardCont3.setBackgroundColor(color);
+      (_this$_whiteboardCont4 = this._whiteboardControl) === null || _this$_whiteboardCont4 === void 0 || _this$_whiteboardCont4.setBackgroundColor(color);
     }
   }, {
     key: "_updateRedo",
@@ -881,10 +904,10 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "_open",
     value: function _open() {
-      var _this$_whiteboardCont4;
+      var _this$_whiteboardCont5;
       this._joined = true;
       this._initialized = true;
-      (_this$_whiteboardCont4 = this._whiteboardControl) === null || _this$_whiteboardCont4 === void 0 || _this$_whiteboardCont4.open();
+      (_this$_whiteboardCont5 = this._whiteboardControl) === null || _this$_whiteboardCont5 === void 0 || _this$_whiteboardCont5.open();
     }
   }, {
     key: "_close",
@@ -899,7 +922,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
     key: "_getSnapshotImage",
     value: function () {
       var _getSnapshotImage2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-        var _this5 = this;
+        var _this6 = this;
         var mainWindow, progress, imageData;
         return _regenerator["default"].wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -911,8 +934,8 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
                 break;
               }
               progress = setInterval(function () {
-                if (_this5._boardStore && _this5._boardStore.observables.progress < 100) {
-                  _this5._boardStore.observables.progress += 1;
+                if (_this6._boardStore && _this6._boardStore.observables.progress < 100) {
+                  _this6._boardStore.observables.progress += 1;
                 } else {
                   clearInterval(progress);
                 }
@@ -923,12 +946,12 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
               imageData = _context.sent;
               (0, _mobx.runInAction)(function () {
                 setTimeout(function () {
-                  var _this5$_roomControl$g;
-                  _this5._boardStore.observables.progress = 100;
+                  var _getRoomInfo, _this6$_uiEventStore;
+                  _this6._boardStore.observables.progress = 100;
                   clearInterval(progress);
-                  var fileName = "".concat((_this5$_roomControl$g = _this5._roomControl.getRoomInfo()) === null || _this5$_roomControl$g === void 0 ? void 0 : _this5$_roomControl$g.roomName, "_").concat((0, _dayjs["default"])().format('YYYYMMDD_HHmmSSS'), ".jpg");
+                  var fileName = "".concat((_getRoomInfo = _this6._roomControl.getRoomInfo()) === null || _getRoomInfo === void 0 ? void 0 : _getRoomInfo.roomName, "_").concat((0, _dayjs["default"])().format('YYYYMMDD_HHmmSSS'), ".jpg");
                   (0, _utils.downloadImageData)(imageData, fileName);
-                  _this5._uiEventStore.showToast({
+                  (_this6$_uiEventStore = _this6._uiEventStore) === null || _this6$_uiEventStore === void 0 || _this6$_uiEventStore.showToast({
                     type: 'info',
                     message: (0, _i18n.transI18n)('fmt_screenshare_whiteboard_tips_savedsuccessfully')
                   });
@@ -948,8 +971,9 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "_openLonelyWindow",
     value: function _openLonelyWindow() {
-      this._uiEventStore.openDialog(_constant.DialogKey.WHITEBOARD);
-      this._uiEventStore.openDialog(_constant.DialogKey.TOOLBAR);
+      var _this$_uiEventStore5, _this$_uiEventStore6;
+      (_this$_uiEventStore5 = this._uiEventStore) === null || _this$_uiEventStore5 === void 0 || _this$_uiEventStore5.openDialog(_constant.FcrUIDialogKey.WHITEBOARD);
+      (_this$_uiEventStore6 = this._uiEventStore) === null || _this$_uiEventStore6 === void 0 || _this$_uiEventStore6.openDialog(_constant.FcrUIDialogKey.TOOLBAR);
       this._toolbarStore.observables.layoutReady = false;
       this._open();
     }
@@ -963,39 +987,39 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "_boardObservble",
     value: function _boardObservble() {
-      var _this6 = this;
+      var _this7 = this;
       return {
         onConnectionStateUpdated: function () {
           var _onConnectionStateUpdated = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(state) {
-            var _this6$_whiteboardCon, mainWindow, _this6$_whiteboardCon2, ownerUserId, ownerUser;
+            var _this7$_whiteboardCon, _this7$_whiteboardCon2, mainWindow, _this7$_userControl, _this7$_whiteboardCon3, ownerUserId, ownerUser;
             return _regenerator["default"].wrap(function _callee2$(_context2) {
               while (1) switch (_context2.prev = _context2.next) {
                 case 0:
-                  _this6.logger.info('Fcr board connection state changed to', state);
-                  _this6._setConnectionState(state);
+                  _this7.logger.info('Fcr board connection state changed to', state);
+                  _this7._setConnectionState(state);
                   if (state === _fcrCore.FcrConnectionState.DISCONNECTED) {
-                    if (_this6._joined) {
-                      (_this6$_whiteboardCon = _this6._whiteboardControl) === null || _this6$_whiteboardCon === void 0 || _this6$_whiteboardCon.open();
+                    if (_this7._joined) {
+                      (_this7$_whiteboardCon = _this7._whiteboardControl) === null || _this7$_whiteboardCon === void 0 || _this7$_whiteboardCon.open();
                     } else {
-                      _this6.unmount();
-                      _this6.unload();
+                      _this7.unmount();
+                      _this7.unload();
                     }
                   }
                   if (state === _fcrCore.FcrConnectionState.CONNECTED) {
-                    _this6._setJoinSuccessed(true);
-                    mainWindow = _this6._whiteboardControl.getMainWindow();
-                    _this6.logger.info('Fcr board join success');
-                    if (_this6._whiteboardControl) {
-                      _this6$_whiteboardCon2 = _this6._whiteboardControl.getBoardActiveInfo(), ownerUserId = _this6$_whiteboardCon2.ownerUserId;
-                      ownerUser = _this6._userControl.getUser(ownerUserId);
-                      _this6._controlbarStore.ownerUser = ownerUser;
+                    _this7._setJoinSuccessed(true);
+                    mainWindow = (_this7$_whiteboardCon2 = _this7._whiteboardControl) === null || _this7$_whiteboardCon2 === void 0 ? void 0 : _this7$_whiteboardCon2.getMainWindow();
+                    _this7.logger.info('Fcr board join success');
+                    if (_this7._whiteboardControl) {
+                      _this7$_whiteboardCon3 = _this7._whiteboardControl.getBoardActiveInfo(), ownerUserId = _this7$_whiteboardCon3.ownerUserId;
+                      ownerUser = (_this7$_userControl = _this7._userControl) === null || _this7$_userControl === void 0 ? void 0 : _this7$_userControl.getUser(ownerUserId);
+                      _this7._controlbarStore.ownerUser = ownerUser;
                     }
                     mainWindow.addObserver({
-                      onRedoStateUpdated: _this6._updateRedo,
-                      onUndoStateUpdated: _this6._updateUndo
+                      onRedoStateUpdated: _this7._updateRedo,
+                      onUndoStateUpdated: _this7._updateUndo
                     });
-                    _this6._boardMainWindow = mainWindow;
-                    _this6.mount();
+                    _this7._boardMainWindow = mainWindow;
+                    _this7.mount();
                   }
                 case 4:
                 case "end":
@@ -1013,32 +1037,32 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "_addDisposers",
     value: function _addDisposers() {
-      var _this7 = this;
+      var _this8 = this;
       this._disposers.push((0, _mobx.reaction)(function () {
-        return _this7.hasPrivilege;
+        return _this8.hasPrivilege;
       }, function (privilege) {
-        var _this7$_boardStore, _this7$_boardStore2;
-        var p = privilege || _this7._isHost || _this7._isMyBoard;
-        (_this7$_boardStore = _this7._boardStore) === null || _this7$_boardStore === void 0 || _this7$_boardStore.setWriteEnable(_this7._isHost || _this7._isMyBoard);
-        (_this7$_boardStore2 = _this7._boardStore) === null || _this7$_boardStore2 === void 0 || _this7$_boardStore2.setPrivilege(p);
+        var _this8$_boardStore, _this8$_boardStore2;
+        var p = privilege || _this8._isHost || _this8._isMyBoard;
+        (_this8$_boardStore = _this8._boardStore) === null || _this8$_boardStore === void 0 || _this8$_boardStore.setWriteEnable(_this8._isHost || _this8._isMyBoard);
+        (_this8$_boardStore2 = _this8._boardStore) === null || _this8$_boardStore2 === void 0 || _this8$_boardStore2.setPrivilege(p);
       }), (0, _mobx.reaction)(function () {
-        return _this7._boardStore.observables.writeEnabled;
+        return _this8._boardStore.observables.writeEnabled;
       }, function (writeEnabled) {
-        if (writeEnabled) setTimeout(_this7._repositionToolbar, 0);
+        if (writeEnabled) setTimeout(_this8._repositionToolbar, 0);
       }), (0, _mobx.reaction)(function () {
-        return _this7._localUser;
+        return _this8._localUser;
       }, function (user) {
-        var _this7$_boardStore3;
-        _this7._isHost = [_type2.FcrUserRole.HOST, _type2.FcrUserRole.COHOST].includes(user.userRole);
-        var hasPrivilege = _this7.hasPrivilege || _this7._isHost || _this7._isMyBoard;
-        (_this7$_boardStore3 = _this7._boardStore) === null || _this7$_boardStore3 === void 0 || _this7$_boardStore3.setPrivilege(hasPrivilege);
-        _this7._boardStore.setWriteEnable(_this7._isHost || _this7._isMyBoard);
+        var _this8$_boardStore3;
+        _this8._isHost = [_type2.FcrUserRole.HOST, _type2.FcrUserRole.COHOST].includes(user.userRole);
+        var hasPrivilege = _this8.hasPrivilege || _this8._isHost || _this8._isMyBoard;
+        (_this8$_boardStore3 = _this8._boardStore) === null || _this8$_boardStore3 === void 0 || _this8$_boardStore3.setPrivilege(hasPrivilege);
+        _this8._boardStore.setWriteEnable(_this8._isHost || _this8._isMyBoard);
       }));
     }
   }, {
     key: "_alertWhenReplace",
     value: function _alertWhenReplace(userInfo) {
-      var _this8 = this;
+      var _this9 = this;
       var userRole = userInfo.userRole,
         userName = userInfo.userName;
       var dialogId = this._uiEventStore.openConfirmDialog({
@@ -1046,15 +1070,17 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         content: (_type2.FcrUserRole.HOST === userRole ? (0, _i18n.transI18n)('fmt_role_host') : _type2.FcrUserRole.COHOST === userRole ? (0, _i18n.transI18n)('fmt_role_cohost') : '') + "".concat(userName, " ").concat((0, _i18n.transI18n)('fmt_screenshare_whiteboard_lables_newshare')),
         okText: (0, _i18n.transI18n)('fmt_screenshare_whiteboard_button_gotit'),
         showCancel: false,
-        icon: _type4.FcrIconType.FCR_SCREENSHARING,
+        icon: _type3.FcrIconType.FCR_SCREENSHARING,
         onOk: function onOk() {
-          _this8._uiEventStore.closeConfirm(dialogId);
+          var _this9$_uiEventStore;
+          (_this9$_uiEventStore = _this9._uiEventStore) === null || _this9$_uiEventStore === void 0 || _this9$_uiEventStore.closeConfirm(dialogId);
         },
         onCancel: function onCancel() {
-          _this8._uiEventStore.closeConfirm(dialogId);
+          var _this9$_uiEventStore2;
+          (_this9$_uiEventStore2 = _this9._uiEventStore) === null || _this9$_uiEventStore2 === void 0 || _this9$_uiEventStore2.closeConfirm(dialogId);
         },
         width: 400,
-        height: 140
+        height: 160
       });
     }
   }, {