fcr-ui-scene 3.5.1 → 3.6.0

package/lib/modules/whiteboard/index.js

@@ -102,12 +102,10 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _type = require("./type");
 var _view = require("./view");
-var _context3 = require("./context");
+var _context2 = require("./context");
 var _mobx = require("mobx");
 var _utils = require("./utils");
 var _decorator = require("agora-foundation/lib/decorator");
-var _tinycolor = _interopRequireDefault(require("tinycolor2"));
-var _dayjs = _interopRequireDefault(require("dayjs"));
 var _multiWindow = require("./components/multi-window");
 var _constant = require("../../utilities/constant");
 var _store = require("./components/toolbar/store");
@@ -116,7 +114,6 @@ var _store2 = require("./components/control-bar/store");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _type2 = require("fcr-core/lib/type");
 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 _i18n = require("agora-ui-foundation/lib/i18n");
@@ -124,7 +121,7 @@ var _type3 = require("agora-ui-foundation/lib/components/icon/type");
 var _logger = require("../../utilities/logger");
 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;
+var _initProto, _init__lonelyWindowState, _init__ownerUser, _init__isHost, _init__boardBackground, _init__localUser, _onPropertiesUpdateDecs, _mountDecs, _unmountDecs, _unloadDecs, _setBackgroundDecs, _boardUIEventsDecs, _repositionToolbarDecs, _setConnectionStateDecs, _openLonelyWindowDecs, _setJoinSuccessedDecs, _ref;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
@@ -144,7 +141,7 @@ var _B = /*#__PURE__*/new WeakMap();
 var _C = /*#__PURE__*/new WeakMap();
 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");
+_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], _setBackgroundDecs = [_mobx.action, _mobx.action.bound], _boardUIEventsDecs = [_mobx.action, _mobx.action.bound], _repositionToolbarDecs = [_mobx.action, _mobx.action.bound], _setConnectionStateDecs = [_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() {
     var _this;
@@ -155,19 +152,72 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
     _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", {
-      tool: _enums.FcrBoardToolType.LASER_POINTER,
-      strokeColor: '#fed130',
-      strokeWidth: 2
-    });
     (0, _defineProperty2["default"])(_this, "_initWidth", 1920);
     (0, _defineProperty2["default"])(_this, "_initHeight", 1220);
     (0, _defineProperty2["default"])(_this, "_joinSuccessed", false);
     (0, _defineProperty2["default"])(_this, "_isActive", false);
     (0, _defineProperty2["default"])(_this, "_timer", null);
     (0, _defineProperty2["default"])(_this, "_isMyBoard", false);
-    (0, _defineProperty2["default"])(_this, "_t", function (t) {
-      return '';
+    (0, _defineProperty2["default"])(_this, "_boardObserver", {
+      onActive: function onActive(_, operatorUser) {
+        return _this.onPropertiesUpdate({
+          operatorUser: operatorUser
+        });
+      },
+      onInactive: function onInactive(reason, operatorUser) {
+        var _this$_localUser, _this$_ownerUser, _this$_ownerUser2;
+        var currentUserId = (_this$_localUser = _this._localUser) === null || _this$_localUser === void 0 ? void 0 : _this$_localUser.userId;
+        var isSeize = reason === _types.FcrBoardInactiveReason.SEIZE;
+        var isMeOperated = (operatorUser === null || operatorUser === void 0 ? void 0 : operatorUser.userId) === currentUserId;
+        var isMeOwner = ((_this$_ownerUser = _this._ownerUser) === null || _this$_ownerUser === void 0 ? void 0 : _this$_ownerUser.userId) === currentUserId;
+        _this.logger.info("Fcr board has inactive effect, the reason is ".concat(reason, ", the operator is ").concat(operatorUser === null || operatorUser === void 0 ? void 0 : operatorUser.userName, ", the owner is ").concat((_this$_ownerUser2 = _this._ownerUser) === null || _this$_ownerUser2 === void 0 ? void 0 : _this$_ownerUser2.userName));
+        isSeize && !isMeOperated && isMeOwner && _this._alertWhenReplace(operatorUser);
+        _this.onDestroy({
+          operatorUser: operatorUser
+        });
+      },
+      onBackgroundColorUpdated: _this._setBackground,
+      onConnectionStateUpdated: function () {
+        var _onConnectionStateUpdated = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(state) {
+          var _this$_whiteboardCont, _this$_whiteboardCont2, mainWindow, _this$_whiteboardCont3, ownerUserId, isActive, _this$_userControl, ownerUser;
+          return _regenerator["default"].wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                _this.logger.info('Fcr board connection state changed to', state);
+                _this._setConnectionState(state);
+                if (state === _fcrCore.FcrConnectionState.DISCONNECTED) {
+                  if (_this._joined) {
+                    (_this$_whiteboardCont = _this._whiteboardControl) === null || _this$_whiteboardCont === void 0 || _this$_whiteboardCont.open();
+                  } else {
+                    _this.unmount();
+                    _this.unload();
+                  }
+                }
+                if (state === _fcrCore.FcrConnectionState.CONNECTED) {
+                  _this._setJoinSuccessed(true);
+                  mainWindow = (_this$_whiteboardCont2 = _this._whiteboardControl) === null || _this$_whiteboardCont2 === void 0 ? void 0 : _this$_whiteboardCont2.getMainWindow();
+                  _this.logger.info('Fcr board join success');
+                  if (_this._whiteboardControl) {
+                    _this$_whiteboardCont3 = _this._whiteboardControl.getBoardActiveInfo(), ownerUserId = _this$_whiteboardCont3.ownerUserId, isActive = _this$_whiteboardCont3.isActive;
+                    if (isActive) {
+                      ownerUser = (_this$_userControl = _this._userControl) === null || _this$_userControl === void 0 ? void 0 : _this$_userControl.getUser(ownerUserId);
+                      _this._controlbarStore.ownerUser = ownerUser;
+                    }
+                  }
+                  _this._boardMainWindow = mainWindow;
+                  _this.mount();
+                }
+              case 4:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        function onConnectionStateUpdated(_x) {
+          return _onConnectionStateUpdated.apply(this, arguments);
+        }
+        return onConnectionStateUpdated;
+      }()
     });
     (0, _defineProperty2["default"])(_this, "logger", (0, _logger.createLogger)({
       prefix: 'FcrWhiteboardUIModule'
@@ -263,8 +313,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       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();
+      this._toolbarStore = new _store.ToolbarStore(this._whiteboardControl, this._roomControl);
       var streamControl = this._roomControl.getStreamControl();
       var userControl = this._roomControl.getUserControl();
       this._userControl = userControl;
@@ -274,26 +323,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         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);
-        }
-      });
+      this._whiteboardControl.addObserver(this._boardObserver);
       streamControl.addObserver({
         onStreamsRemoved: function onStreamsRemoved(roomId, events) {
           var isReplaced = events.find(function (event) {
@@ -301,8 +331,8 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
             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);
+            var _this2$_localUser;
+            return event.modifiedStream.owner.userId === ((_this2$_localUser = _this2._localUser) === null || _this2$_localUser === void 0 ? void 0 : _this2$_localUser.userId);
           });
           if (isReplaced && isMyStream) {
             _this2._alertWhenReplace(isReplaced === null || isReplaced === void 0 ? void 0 : isReplaced.operatorUser);
@@ -322,8 +352,8 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       });
       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)) {
+          var _this2$_localUser2;
+          if (event.modifiedUser.userId === ((_this2$_localUser2 = _this2._localUser) === null || _this2$_localUser2 === void 0 ? void 0 : _this2$_localUser2.userId)) {
             _this2._localUser = event.modifiedUser;
             _this2._isHost = [_type2.FcrUserRole.HOST, _type2.FcrUserRole.COHOST].includes(_this2._localUser.userRole);
           }
@@ -336,11 +366,13 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       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) {
+      var _this$_whiteboardCont4 = this._whiteboardControl.getBoardActiveInfo(),
+        ownerUserId = _this$_whiteboardCont4.ownerUserId,
+        isActive = _this$_whiteboardCont4.isActive;
+      this._isActive = isActive;
+      if (isActive) {
         this._checkBoard();
-        this._ownerUser = this._userControl.getUser(activeInfo.ownerUserId);
+        this._ownerUser = this._userControl.getUser(ownerUserId);
         this._boardBackground = this._whiteboardControl.getBackgroundColor();
       }
     }
@@ -352,10 +384,10 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "getComponent",
     value: function getComponent(dom) {
-      var component = /*#__PURE__*/(0, _jsxRuntime.jsx)(_context3.BoardUIContext.Provider, {
+      var component = /*#__PURE__*/(0, _jsxRuntime.jsx)(_context2.BoardUIContext.Provider, {
         value: this._boardStore,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.ToolbarContext.Provider, {
-          value: this._createToolbarUIContext(),
+          value: this._toolbarStore,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_store2.WhiteboardControlBarUIContext.Provider, {
             value: this._controlbarStore,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_multiWindow.MultiWindowWidgetDialog, {
@@ -377,16 +409,16 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "onEvent",
     value: function onEvent(event, payload) {
-      var _this$_whiteboardCont2;
+      var _this$_whiteboardCont6;
       switch (event) {
         case _constant.FcrUIAction.OPEN_WHITEBOARD:
           if (!this._isActive) {
-            var _this$_whiteboardCont;
-            (_this$_whiteboardCont = this._whiteboardControl) === null || _this$_whiteboardCont === void 0 || _this$_whiteboardCont.active();
+            var _this$_whiteboardCont5;
+            (_this$_whiteboardCont5 = this._whiteboardControl) === null || _this$_whiteboardCont5 === void 0 || _this$_whiteboardCont5.active();
           }
           break;
         case _constant.FcrUIAction.CLOSE_WHITEBOARD:
-          (_this$_whiteboardCont2 = this._whiteboardControl) === null || _this$_whiteboardCont2 === void 0 || _this$_whiteboardCont2.inactive();
+          (_this$_whiteboardCont6 = this._whiteboardControl) === null || _this$_whiteboardCont6 === void 0 || _this$_whiteboardCont6.inactive();
           break;
         case _constant.FcrUIAction.WHITEBOARD_CHANGED:
           this._setCanvasBound(payload.action);
@@ -398,7 +430,6 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
           if (payload.action === _type.WhiteboardControlbarEvents.ENABLE_CONTROL) {
             var _this$_boardStore;
             (_this$_boardStore = this._boardStore) === null || _this$_boardStore === void 0 || _this$_boardStore.setWriteEnable(payload.payload);
-            if (!payload.payload) this._resetToolIfNeed();
             break;
           }
           break;
@@ -432,10 +463,10 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "onDestroy",
     value: function onDestroy(params) {
-      var _this$_securityStore2, _this$_localUser;
+      var _this$_securityStore2, _this$_localUser2;
       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) && this._isActive) {
+      if ((_this$_securityStore2 = this._securityStore) !== null && _this$_securityStore2 !== void 0 && _this$_securityStore2.hasStartScreenSharePermission() && (operatorUser === null || operatorUser === void 0 ? void 0 : operatorUser.userId) !== ((_this$_localUser2 = this._localUser) === null || _this$_localUser2 === void 0 ? void 0 : _this$_localUser2.userId) && this._isActive) {
         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'),
@@ -465,21 +496,31 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         _boardDom.appendChild(view);
         _boardMainWindow.setContainerSizeRatio(aspectRatio);
         this._addDisposers();
-        this._resetToolIfNeed();
         this._repositionToolbar();
         if (this._boardMainWindow) {
-          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 = 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$_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
-          });
+          var _this$_whiteboardCont7;
+          this._setBackground(((_this$_whiteboardCont7 = this._whiteboardControl) === null || _this$_whiteboardCont7 === void 0 ? void 0 : _this$_whiteboardCont7.getBackgroundColor()) || this._boardBackground);
+          // this._toolbarStore!.observables.layoutReady = [
+          //   LonelyWindowState.CLOSE,
+          //   LonelyWindowState.DEFAULT,
+          // ].includes(this._lonelyWindowState);
+
+          var _getBoardActiveInfo = this._whiteboardControl.getBoardActiveInfo(),
+            ownerUserId = _getBoardActiveInfo.ownerUserId,
+            isActive = _getBoardActiveInfo.isActive;
+          if (isActive) {
+            var _this$_userControl2, _this$_ownerUser3, _this$_localUser3, _this$_boardStore2, _this$_boardStore3, _this$_uiEventStore3;
+            this._ownerUser = (_this$_userControl2 = this._userControl) === null || _this$_userControl2 === void 0 ? void 0 : _this$_userControl2.getUser(ownerUserId);
+            this._isMyBoard = ((_this$_ownerUser3 = this._ownerUser) === null || _this$_ownerUser3 === void 0 ? void 0 : _this$_ownerUser3.userId) === ((_this$_localUser3 = this._localUser) === null || _this$_localUser3 === void 0 ? void 0 : _this$_localUser3.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$_uiEventStore3 = this._uiEventStore) === null || _this$_uiEventStore3 === void 0 || _this$_uiEventStore3.sendEvent(_constant.FcrUIAction.WHITEBOARD_CHANGED, {
+              action: _type.WhiteboardBaseEvents.SET_OWNER_USER_ID,
+              payload: ownerUserId
+            });
+          } else {
+            this.logger.warn('whiteboard mount, getBoardActiveInfo activeInfo isActive is false , ownerUserId is null');
+          }
         }
       }
     }
@@ -521,7 +562,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       var bgColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '#ffffff';
       if (this._boardMainWindow) {
         var _this$_boardMainWindo;
-        var themes = (0, _libs["default"])(this._t);
+        var themes = (0, _libs["default"])();
         var _ref3 = themes.find(function (theme) {
             return theme.background === bgColor;
           }) || {
@@ -534,20 +575,6 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         }
       }
     }
-  }, {
-    key: "_resetToolIfNeed",
-    value: function _resetToolIfNeed() {
-      var _this$_toolbarContext, _this$_toolbarContext2, _this$_toolbarContext3;
-      // if (this._boardMainWindow?.mounted) {
-      var _this$_defaultBoardSt = this._defaultBoardState,
-        strokeColor = _this$_defaultBoardSt.strokeColor,
-        strokeWidth = _this$_defaultBoardSt.strokeWidth,
-        tool = _this$_defaultBoardSt.tool;
-      (_this$_toolbarContext = this._toolbarContext) === null || _this$_toolbarContext === void 0 || _this$_toolbarContext.setStrokeColor(strokeColor);
-      (_this$_toolbarContext2 = this._toolbarContext) === null || _this$_toolbarContext2 === void 0 || _this$_toolbarContext2.setStrokeWidth(strokeWidth);
-      (_this$_toolbarContext3 = this._toolbarContext) === null || _this$_toolbarContext3 === void 0 || _this$_toolbarContext3.setTool(tool);
-      // }
-    }
   }, {
     key: "_checkBoard",
     value: function _checkBoard() {
@@ -693,208 +720,10 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         observables: observables
       }, this._boardUIEvents(observables));
     }
-  }, {
-    key: "_createToolbarUIContext",
-    value: function _createToolbarUIContext() {
-      var _this5 = this;
-      var observables = this._toolbarStore.observables;
-      this._toolbarContext = {
-        observables: observables,
-        redo: function redo() {
-          var _this5$_boardMainWind;
-          return (_this5$_boardMainWind = _this5._boardMainWindow) === null || _this5$_boardMainWind === void 0 ? void 0 : _this5$_boardMainWind.redo();
-        },
-        undo: function undo() {
-          var _this5$_boardMainWind2;
-          return (_this5$_boardMainWind2 = _this5._boardMainWindow) === null || _this5$_boardMainWind2 === void 0 ? void 0 : _this5$_boardMainWind2.undo();
-        },
-        clean: function clean() {
-          var _this5$_boardMainWind3;
-          return (_this5$_boardMainWind3 = _this5._boardMainWindow) === null || _this5$_boardMainWind3 === void 0 ? void 0 : _this5$_boardMainWind3.clean();
-        },
-        saveDraft: function saveDraft() {
-          return _this5._getSnapshotImage();
-        },
-        clickExpansionTool: function clickExpansionTool() {},
-        setToolbarPosition: function setToolbarPosition(pos) {
-          return observables.toolbarPosition = pos;
-        },
-        dragToolbar: function dragToolbar() {
-          return observables.toolbarReleased = false;
-        },
-        setTool: function setTool(tool) {
-          var _this5$_boardMainWind4;
-          observables.currentTool = tool;
-          observables.currentShape = undefined;
-          (_this5$_boardMainWind4 = _this5._boardMainWindow) === null || _this5$_boardMainWind4 === void 0 || _this5$_boardMainWind4.setToolType(tool);
-        },
-        setPen: function setPen(shape) {
-          var _this5$_boardMainWind5, _this5$_boardMainWind6, _this5$_boardMainWind7;
-          observables.currentShape = shape;
-          observables.lastPen = shape;
-          observables.currentTool = undefined;
-          (_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 _this5$_boardMainWind8, _this5$_boardMainWind9, _this5$_boardMainWind10;
-          observables.currentShape = shape;
-          observables.lastShape = shape;
-          observables.currentTool = undefined;
-          (_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 _this5$_boardMainWind11;
-          observables.currentColor = color;
-          (_this5$_boardMainWind11 = _this5._boardMainWindow) === null || _this5$_boardMainWind11 === void 0 || _this5$_boardMainWind11.setStrokeColor((0, _tinycolor["default"])(color).toRgb());
-        },
-        setStrokeWidth: function setStrokeWidth(strokeWidth) {
-          var _this5$_boardMainWind12;
-          observables.currentStrokeWidth = strokeWidth;
-          (_this5$_boardMainWind12 = _this5._boardMainWindow) === null || _this5$_boardMainWind12 === void 0 || _this5$_boardMainWind12.setStrokeWidth(strokeWidth);
-        },
-        releaseToolbar: function releaseToolbar() {
-          observables.toolbarReleased = true;
-          _this5._updateDockPlacement();
-          _this5._repositionToolbar();
-        },
-        captureScreen: function captureScreen() {
-          var hideWindow = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-          window.runtime.captureScreen({
-            hideWindow: hideWindow
-          });
-        },
-        setTheme: (0, _mobx.action)(function (theme) {
-          _this5._setBackgroundColor(theme.background);
-          observables.colors = theme.colors;
-          observables.currentThemeType = theme;
-        }),
-        setCommonColor: (0, _mobx.action)(function (color) {
-          if (observables.commonColors.length < 2) observables.commonColors.push(color);
-          if (observables.commonColors.length === 2) {
-            observables.commonColors = [color, observables.commonColors[0]];
-          }
-        })
-      };
-      return this._toolbarContext;
-    }
-  }, {
-    key: "_updateDockPosition",
-    value: function _updateDockPosition() {
-      if (this._toolbarContext) {
-        var toolbarDom = document.querySelector(".".concat(_utils.toolbarClassName));
-        var containerDom = document.querySelector(".".concat(_utils.windowClassName));
-        if (containerDom && toolbarDom) {
-          var containerClientRect = containerDom.getBoundingClientRect();
-          var toolbarClientRect = toolbarDom.getBoundingClientRect();
-          var toolbarOffsetTop = 4;
-          var toolbarContext = this._toolbarContext;
-          (0, _mobx.runInAction)(function () {
-            if (toolbarContext.observables.toolbarDockPosition.placement === 'right') {
-              // right
-              toolbarContext.observables.toolbarDockPosition = {
-                x: containerClientRect.width - toolbarClientRect.width,
-                y: toolbarOffsetTop,
-                placement: 'right'
-              };
-            } else {
-              // left
-              toolbarContext.observables.toolbarDockPosition = {
-                x: 0,
-                y: toolbarOffsetTop,
-                placement: 'left'
-              };
-            }
-          });
-        }
-      }
-    }
-  }, {
-    key: "_updateDockPlacement",
-    value: function _updateDockPlacement() {
-      if (this._toolbarContext) {
-        var toolbarDom = document.querySelector(".".concat(_utils.toolbarClassName));
-        var containerDom = document.querySelector(".".concat(_utils.windowClassName));
-        if (containerDom && toolbarDom) {
-          var containerClientRect = containerDom.getBoundingClientRect();
-          var toolbarClientRect = toolbarDom.getBoundingClientRect();
-          var toolbarCenterPos = toolbarClientRect.left - containerClientRect.left + toolbarClientRect.width / 2;
-          var toolbarContext = this._toolbarContext;
-          (0, _mobx.runInAction)(function () {
-            if (toolbarCenterPos > containerClientRect.width / 2) {
-              // right
-              toolbarContext.observables.toolbarDockPosition.placement = 'right';
-            } else {
-              // left
-              toolbarContext.observables.toolbarDockPosition.placement = 'left';
-            }
-          });
-        }
-      }
-    }
   }, {
     key: "_repositionToolbar",
     value: function _repositionToolbar() {
-      if (this._toolbarContext) {
-        var toolbarDom = document.querySelector(".".concat(_utils.toolbarClassName));
-        var containerDom = document.querySelector(".".concat(_utils.windowClassName));
-        if (containerDom && toolbarDom) {
-          setTimeout(this._updateMaxVisibleTools);
-          // wait until the UI rerenders, then actual dimensions can be obtained
-          setTimeout(this._updateDockPosition);
-        }
-      }
-    }
-  }, {
-    key: "_updateMaxVisibleTools",
-    value: function _updateMaxVisibleTools() {
-      var containerDom = document.querySelector(".".concat(_utils.windowClassName));
-      if (this._toolbarContext && containerDom) {
-        var containerClientRect = containerDom.getBoundingClientRect();
-        var placement = this._toolbarContext.observables.toolbarDockPosition.placement;
-        var toolbarContext = this._toolbarContext;
-        (0, _mobx.runInAction)(function () {
-          if (placement === 'right') {
-            var availableHeight = containerClientRect.height - _utils.verticalPadding - _utils.defaultToolsRetain - _utils.sceneNavHeight;
-            toolbarContext.observables.maxCountVisibleTools = Math.floor(availableHeight / _utils.heightPerTool);
-            if (toolbarContext.observables.maxCountVisibleTools >= 9) {
-              var visibleTools = toolbarContext.observables.maxCountVisibleTools;
-              toolbarContext.observables.maxCountVisibleTools += Math.floor((availableHeight - visibleTools * _utils.heightPerTool) / _utils.heightPerColor);
-            }
-          } else {
-            var _availableHeight = containerClientRect.height - _utils.verticalPadding - _utils.defaultToolsRetain - _utils.sceneNavHeight;
-            toolbarContext.observables.maxCountVisibleTools = Math.floor(_availableHeight / _utils.heightPerTool);
-            if (toolbarContext.observables.maxCountVisibleTools >= 9) {
-              var _visibleTools = toolbarContext.observables.maxCountVisibleTools;
-              toolbarContext.observables.maxCountVisibleTools += Math.floor((_availableHeight - _visibleTools * _utils.heightPerTool) / _utils.heightPerColor);
-            }
-          }
-        });
-      }
-    }
-  }, {
-    key: "_setBackgroundColor",
-    value: function _setBackgroundColor(bgColor) {
-      var _this$_whiteboardCont4;
-      var color = bgColor || 'white';
-      (_this$_whiteboardCont4 = this._whiteboardControl) === null || _this$_whiteboardCont4 === void 0 || _this$_whiteboardCont4.setBackgroundColor(color);
-    }
-  }, {
-    key: "_updateRedo",
-    value: function _updateRedo(steps) {
-      if (this._toolbarContext) {
-        this._toolbarContext.observables.redoSteps = steps;
-      }
-    }
-  }, {
-    key: "_updateUndo",
-    value: function _updateUndo(steps) {
-      if (this._toolbarContext) {
-        this._toolbarContext.observables.undoSteps = steps;
-      }
+      this._toolbarStore.repositionToolbar();
     }
   }, {
     key: "_setConnectionState",
@@ -907,10 +736,10 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "_open",
     value: function _open() {
-      var _this$_whiteboardCont5;
+      var _this$_whiteboardCont8;
       this._joined = true;
       this._initialized = true;
-      (_this$_whiteboardCont5 = this._whiteboardControl) === null || _this$_whiteboardCont5 === void 0 || _this$_whiteboardCont5.open();
+      (_this$_whiteboardCont8 = this._whiteboardControl) === null || _this$_whiteboardCont8 === void 0 || _this$_whiteboardCont8.open();
     }
   }, {
     key: "_close",
@@ -921,63 +750,13 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         this._whiteboardControl.close();
       }
     }
-  }, {
-    key: "_getSnapshotImage",
-    value: function () {
-      var _getSnapshotImage2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-        var _this6 = this;
-        var mainWindow, progress, imageData;
-        return _regenerator["default"].wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              this._boardStore.observables.progress = 0;
-              mainWindow = this._boardMainWindow;
-              if (!mainWindow) {
-                _context.next = 8;
-                break;
-              }
-              progress = setInterval(function () {
-                if (_this6._boardStore && _this6._boardStore.observables.progress < 100) {
-                  _this6._boardStore.observables.progress += 1;
-                } else {
-                  clearInterval(progress);
-                }
-              }, 4);
-              _context.next = 6;
-              return mainWindow.getSnapshotImage();
-            case 6:
-              imageData = _context.sent;
-              (0, _mobx.runInAction)(function () {
-                setTimeout(function () {
-                  var _getRoomInfo, _this6$_uiEventStore;
-                  _this6._boardStore.observables.progress = 100;
-                  clearInterval(progress);
-                  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);
-                  (_this6$_uiEventStore = _this6._uiEventStore) === null || _this6$_uiEventStore === void 0 || _this6$_uiEventStore.showToast({
-                    type: 'info',
-                    message: (0, _i18n.transI18n)('fmt_screenshare_whiteboard_tips_savedsuccessfully')
-                  });
-                }, 400);
-              });
-            case 8:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, this);
-      }));
-      function _getSnapshotImage() {
-        return _getSnapshotImage2.apply(this, arguments);
-      }
-      return _getSnapshotImage;
-    }()
   }, {
     key: "_openLonelyWindow",
     value: function _openLonelyWindow() {
       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._toolbarStore!.observables.layoutReady = false;
       this._open();
     }
   }, {
@@ -987,85 +766,35 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         this._boardStore.observables.joinSuccessed = joinSuccessed;
       }
     }
-  }, {
-    key: "_boardObservble",
-    value: function _boardObservble() {
-      var _this7 = this;
-      return {
-        onConnectionStateUpdated: function () {
-          var _onConnectionStateUpdated = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(state) {
-            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:
-                  _this7.logger.info('Fcr board connection state changed to', state);
-                  _this7._setConnectionState(state);
-                  if (state === _fcrCore.FcrConnectionState.DISCONNECTED) {
-                    if (_this7._joined) {
-                      (_this7$_whiteboardCon = _this7._whiteboardControl) === null || _this7$_whiteboardCon === void 0 || _this7$_whiteboardCon.open();
-                    } else {
-                      _this7.unmount();
-                      _this7.unload();
-                    }
-                  }
-                  if (state === _fcrCore.FcrConnectionState.CONNECTED) {
-                    _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: _this7._updateRedo,
-                      onUndoStateUpdated: _this7._updateUndo
-                    });
-                    _this7._boardMainWindow = mainWindow;
-                    _this7.mount();
-                  }
-                case 4:
-                case "end":
-                  return _context2.stop();
-              }
-            }, _callee2);
-          }));
-          function onConnectionStateUpdated(_x) {
-            return _onConnectionStateUpdated.apply(this, arguments);
-          }
-          return onConnectionStateUpdated;
-        }()
-      };
-    }
   }, {
     key: "_addDisposers",
     value: function _addDisposers() {
-      var _this8 = this;
+      var _this5 = this;
       this._disposers.push((0, _mobx.reaction)(function () {
-        return _this8.hasPrivilege;
+        return _this5.hasPrivilege;
       }, function (privilege) {
-        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);
+        var _this5$_boardStore, _this5$_boardStore2;
+        var p = privilege || _this5._isHost || _this5._isMyBoard;
+        (_this5$_boardStore = _this5._boardStore) === null || _this5$_boardStore === void 0 || _this5$_boardStore.setWriteEnable(_this5._isHost || _this5._isMyBoard);
+        (_this5$_boardStore2 = _this5._boardStore) === null || _this5$_boardStore2 === void 0 || _this5$_boardStore2.setPrivilege(p);
       }), (0, _mobx.reaction)(function () {
-        return _this8._boardStore.observables.writeEnabled;
+        return _this5._boardStore.observables.writeEnabled;
       }, function (writeEnabled) {
-        if (writeEnabled) setTimeout(_this8._repositionToolbar, 0);
+        if (writeEnabled) setTimeout(_this5._repositionToolbar, 0);
       }), (0, _mobx.reaction)(function () {
-        return _this8._localUser;
+        return _this5._localUser;
       }, function (user) {
-        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);
+        var _this5$_boardStore3;
+        _this5._isHost = [_type2.FcrUserRole.HOST, _type2.FcrUserRole.COHOST].includes(user.userRole);
+        var hasPrivilege = _this5.hasPrivilege || _this5._isHost || _this5._isMyBoard;
+        (_this5$_boardStore3 = _this5._boardStore) === null || _this5$_boardStore3 === void 0 || _this5$_boardStore3.setPrivilege(hasPrivilege);
+        _this5._boardStore.setWriteEnable(_this5._isHost || _this5._isMyBoard);
       }));
     }
   }, {
     key: "_alertWhenReplace",
     value: function _alertWhenReplace(userInfo) {
-      var _this9 = this;
+      var _this6 = this;
       var userRole = userInfo.userRole,
         userName = userInfo.userName;
       var dialogId = this._uiEventStore.openConfirmDialog({
@@ -1075,45 +804,21 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         showCancel: false,
         icon: _type3.FcrIconType.FCR_SCREENSHARING,
         onOk: function onOk() {
-          var _this9$_uiEventStore;
-          (_this9$_uiEventStore = _this9._uiEventStore) === null || _this9$_uiEventStore === void 0 || _this9$_uiEventStore.closeConfirm(dialogId);
+          var _this6$_uiEventStore;
+          (_this6$_uiEventStore = _this6._uiEventStore) === null || _this6$_uiEventStore === void 0 || _this6$_uiEventStore.closeConfirm(dialogId);
         },
         onCancel: function onCancel() {
-          var _this9$_uiEventStore2;
-          (_this9$_uiEventStore2 = _this9._uiEventStore) === null || _this9$_uiEventStore2 === void 0 || _this9$_uiEventStore2.closeConfirm(dialogId);
+          var _this6$_uiEventStore2;
+          (_this6$_uiEventStore2 = _this6._uiEventStore) === null || _this6$_uiEventStore2 === void 0 || _this6$_uiEventStore2.closeConfirm(dialogId);
         },
         width: 400,
         height: 160
       });
     }
-  }, {
-    key: "_convertShapeToBoardToolType",
-    value: function _convertShapeToBoardToolType(shape) {
-      switch (shape) {
-        case _enums.FcrBoardShape.Arrow:
-          return _enums.FcrBoardToolType.ARROW;
-        case _enums.FcrBoardShape.Curve:
-          return _enums.FcrBoardToolType.CURVE;
-        case _enums.FcrBoardShape.Ellipse:
-          return _enums.FcrBoardToolType.ELLIPSE;
-        case _enums.FcrBoardShape.Pentagram:
-          return _enums.FcrBoardToolType.PENTAGRAM;
-        case _enums.FcrBoardShape.Rectangle:
-          return _enums.FcrBoardToolType.RECTANGLE;
-        case _enums.FcrBoardShape.Rhombus:
-          return _enums.FcrBoardToolType.RHOMBUS;
-        case _enums.FcrBoardShape.Straight:
-          return _enums.FcrBoardToolType.STRAIGHT;
-        case _enums.FcrBoardShape.Triangle:
-          return _enums.FcrBoardToolType.TRIANGLE;
-        default:
-          return _enums.FcrBoardToolType.NONE;
-      }
-    }
   }]);
 }(_base.UIModule);
 _FcrWhiteboardUIModule = FcrWhiteboardUIModule;
-var _applyDecs$e = _applyDecs(_FcrWhiteboardUIModule, [[_mobx.observable, 1, "_lonelyWindowState"], [_mobx.observable, 1, "_ownerUser"], [_mobx.observable, 1, "_isHost"], [_mobx.observable, 1, "_boardBackground"], [_mobx.observable, 1, "_localUser"], [_mobx.computed, 3, "hasPrivilege"], [_onPropertiesUpdateDecs, 18, "onPropertiesUpdate"], [_mountDecs, 18, "mount"], [_unmountDecs, 18, "unmount"], [_unloadDecs, 18, "unload"], [_boardUIEventsDecs, 18, "_boardUIEvents"], [_decorator.bound, 2, "_setCanvasBound"], [_decorator.bound, 2, "_resetCanvasPosition"], [_createToolbarUIContextDecs, 18, "_createToolbarUIContext"], [_decorator.bound, 2, "_updateDockPosition"], [_decorator.bound, 2, "_updateDockPlacement"], [_repositionToolbarDecs, 18, "_repositionToolbar"], [_decorator.bound, 2, "_updateMaxVisibleTools"], [_decorator.bound, 2, "_setBackgroundColor"], [_updateRedoDecs, 18, "_updateRedo"], [_updateUndoDecs, 18, "_updateUndo"], [_setConnectionStateDecs, 18, "_setConnectionState"], [_decorator.bound, 2, "_close"], [_getSnapshotImageDecs, 18, "_getSnapshotImage"], [_openLonelyWindowDecs, 18, "_openLonelyWindow"], [_setJoinSuccessedDecs, 18, "_setJoinSuccessed"]], [], 0, void 0, _base.UIModule).e;
+var _applyDecs$e = _applyDecs(_FcrWhiteboardUIModule, [[_mobx.observable, 1, "_lonelyWindowState"], [_mobx.observable, 1, "_ownerUser"], [_mobx.observable, 1, "_isHost"], [_mobx.observable, 1, "_boardBackground"], [_mobx.observable, 1, "_localUser"], [_mobx.computed, 3, "hasPrivilege"], [_onPropertiesUpdateDecs, 18, "onPropertiesUpdate"], [_mountDecs, 18, "mount"], [_unmountDecs, 18, "unmount"], [_unloadDecs, 18, "unload"], [_setBackgroundDecs, 18, "_setBackground"], [_boardUIEventsDecs, 18, "_boardUIEvents"], [_decorator.bound, 2, "_setCanvasBound"], [_decorator.bound, 2, "_resetCanvasPosition"], [_repositionToolbarDecs, 18, "_repositionToolbar"], [_setConnectionStateDecs, 18, "_setConnectionState"], [_decorator.bound, 2, "_close"], [_openLonelyWindowDecs, 18, "_openLonelyWindow"], [_setJoinSuccessedDecs, 18, "_setJoinSuccessed"]], [], 0, void 0, _base.UIModule).e;
 var _applyDecs$e2 = (0, _slicedToArray2["default"])(_applyDecs$e, 6);
 _init__lonelyWindowState = _applyDecs$e2[0];
 _init__ownerUser = _applyDecs$e2[1];