fcr-ui-scene 3.1.1 → 3.3.0

package/lib/modules/whiteboard/index.js

@@ -18,6 +18,24 @@ require("core-js/modules/es.object.get-own-property-descriptor.js");
 require("core-js/modules/es.object.get-own-property-descriptors.js");
 require("core-js/modules/es.object.keys.js");
 require("core-js/modules/es.reflect.construct.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.function.metadata.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.map.delete-all.js");
+require("core-js/modules/esnext.map.emplace.js");
+require("core-js/modules/esnext.map.every.js");
+require("core-js/modules/esnext.map.filter.js");
+require("core-js/modules/esnext.map.find.js");
+require("core-js/modules/esnext.map.find-key.js");
+require("core-js/modules/esnext.map.includes.js");
+require("core-js/modules/esnext.map.key-of.js");
+require("core-js/modules/esnext.map.map-keys.js");
+require("core-js/modules/esnext.map.map-values.js");
+require("core-js/modules/esnext.map.merge.js");
+require("core-js/modules/esnext.map.reduce.js");
+require("core-js/modules/esnext.map.some.js");
+require("core-js/modules/esnext.map.update.js");
+require("core-js/modules/esnext.symbol.metadata.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
@@ -40,6 +58,38 @@ require("core-js/modules/es.set.js");
 require("core-js/modules/es.string.includes.js");
 require("core-js/modules/es.string.iterator.js");
 require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.async-iterator.find.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.async-iterator.some.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.find.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/esnext.iterator.some.js");
+require("core-js/modules/esnext.set.add-all.js");
+require("core-js/modules/esnext.set.delete-all.js");
+require("core-js/modules/esnext.set.difference.v2.js");
+require("core-js/modules/esnext.set.difference.js");
+require("core-js/modules/esnext.set.every.js");
+require("core-js/modules/esnext.set.filter.js");
+require("core-js/modules/esnext.set.find.js");
+require("core-js/modules/esnext.set.intersection.v2.js");
+require("core-js/modules/esnext.set.intersection.js");
+require("core-js/modules/esnext.set.is-disjoint-from.v2.js");
+require("core-js/modules/esnext.set.is-disjoint-from.js");
+require("core-js/modules/esnext.set.is-subset-of.v2.js");
+require("core-js/modules/esnext.set.is-subset-of.js");
+require("core-js/modules/esnext.set.is-superset-of.v2.js");
+require("core-js/modules/esnext.set.is-superset-of.js");
+require("core-js/modules/esnext.set.join.js");
+require("core-js/modules/esnext.set.map.js");
+require("core-js/modules/esnext.set.reduce.js");
+require("core-js/modules/esnext.set.some.js");
+require("core-js/modules/esnext.set.symmetric-difference.v2.js");
+require("core-js/modules/esnext.set.symmetric-difference.js");
+require("core-js/modules/esnext.set.union.v2.js");
+require("core-js/modules/esnext.set.union.js");
+require("core-js/modules/esnext.weak-map.delete-all.js");
+require("core-js/modules/esnext.weak-map.emplace.js");
 require("core-js/modules/web.dom-collections.for-each.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 require("core-js/modules/web.timers.js");
@@ -67,19 +117,22 @@ var _base = require("../../base");
 var _store2 = require("./components/control-bar/store");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _type2 = require("agora-edu-core/lib/type");
+var _agoraEduCore = require("agora-edu-core");
 var _enums = require("agora-edu-core/lib/room-control/whiteboard-control/enums");
 var _libs = _interopRequireDefault(require("./components/switch-theme/libs"));
+var _types = require("agora-edu-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 _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, _MainWindowEventsDecs, _ref;
+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;
 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)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
+function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
 function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
 function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
 function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
@@ -93,7 +146,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], _MainWindowEventsDecs = [_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], _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) {
     var _this;
@@ -107,10 +160,9 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
     _this = _callSuper(this, FcrWhiteboardUIModule);
     //@ts-ignore
     (0, _defineProperty2["default"])(_this, _ref, (_initProto(_this), []));
-    (0, _defineProperty2["default"])(_this, "_whiteboardControl", null);
-    (0, _defineProperty2["default"])(_this, "_connectionState", _enums.FcrBoardRoomConnectionState.DISCONNECTED);
+    (0, _defineProperty2["default"])(_this, "_connectionState", _agoraEduCore.FcrConnectionState.DISCONNECTED);
     (0, _defineProperty2["default"])(_this, "_defaultBoardState", {
-      tool: _type.FcrBoardTool.Clicker,
+      tool: _enums.FcrBoardToolType.LASER_POINTER,
       strokeColor: '#fed130',
       strokeWidth: 2
     });
@@ -128,9 +180,9 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
     (0, _defineProperty2["default"])(_this, "_joined", false);
     (0, _defineProperty2["default"])(_this, "_grantedUsers", new Set());
     _classPrivateFieldInitSpec(_this, _A, _init__lonelyWindowState(_this, _type.LonelyWindowState.DEFAULT));
-    _classPrivateFieldInitSpec(_this, _B, _init__ownerUser(_this, null));
+    _classPrivateFieldInitSpec(_this, _B, _init__ownerUser(_this, undefined));
     _classPrivateFieldInitSpec(_this, _C, _init__isHost(_this, false));
-    _classPrivateFieldInitSpec(_this, _D, _init__boardBackground(_this, '#fff'));
+    _classPrivateFieldInitSpec(_this, _D, _init__boardBackground(_this, '#ffffff'));
     _classPrivateFieldInitSpec(_this, _E, _init__localUser(_this));
     _this._uiEventStore = uiEventStore;
     _this._userControl = userControl;
@@ -146,22 +198,23 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       securityStore: securityStore
     });
     whiteboardControl.addObserver({
-      onBoardActiveInfoUpdated: function onBoardActiveInfoUpdated(isActive, operatorUser, reason) {
+      onActive: function onActive(ownerId, operatorUser) {
+        _this.onPropertiesUpdate({
+          operatorUser: operatorUser
+        });
+      },
+      onInactive: function onInactive(reason, operatorUser) {
         var _this$_ownerUser;
-        _this.logger.info('onBoardActiveInfoUpdated', isActive, operatorUser);
         var currentUserId = _this._localUser.userId;
-        var userId = operatorUser.userId;
-        if (reason === _enums.FcrBoardActiveInfoReason.REPLACE && userId !== currentUserId && ((_this$_ownerUser = _this._ownerUser) === null || _this$_ownerUser === void 0 ? void 0 : _this$_ownerUser.userId) === currentUserId) {
+        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;
         }
-        isActive ? _this.onPropertiesUpdate({
-          operatorUser: operatorUser
-        }) : _this.onDestroy({
+        _this.onDestroy({
           operatorUser: operatorUser
         });
       },
-      onBoardBackgroundColorUpdated: function onBoardBackgroundColorUpdated(color) {
+      onBackgroundColorUpdated: function onBackgroundColorUpdated(color) {
         _this._setBackground(color);
       }
     });
@@ -169,7 +222,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       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) === _enums.FcrBoardActiveInfoReason.REPLACE;
+          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;
@@ -213,7 +266,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
     if (_this._isActive) {
       _this._checkBoard();
       _this._ownerUser = _this._userControl.getUser(activeInfo.ownerUserId);
-      _this._boardBackground = whiteboardControl.getBoardBackgroundColor();
+      _this._boardBackground = whiteboardControl.getBackgroundColor();
     }
     return _this;
   }
@@ -364,15 +417,15 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
     value: function onProcessEvent(event) {
       var action = event.action,
         payload = event.payload;
-      if (Object.values(_type.ToolbarEvents).includes(action)) {
-        this._caseToolbarEvents(action, payload);
-      }
-      if (Object.values(_type.WhiteboardRoomEvents).includes(action)) {
-        this._boardObservble()[action](payload);
-      }
-      if (Object.values(_type.WhiteboardUIEvents).includes(action)) {
-        this._boardUIEvents(payload)[action](payload);
-      }
+      // if (Object.values(ToolbarEvents).includes(action)) {
+      //   this._caseToolbarEvents(action as ToolbarEvents, payload);
+      // }
+      // if (Object.values(WhiteboardEvents).includes(action)) {
+      //   this._boardObservble()[action as WhiteboardEvents](payload);
+      // }
+      // if (Object.values(WhiteboardUIEvents).includes(action)) {
+      //   this._boardUIEvents(payload)[action as WhiteboardUIEvents](payload);
+      // }
       if (action === _constant.RendererEventAction.GET_LOCAL_USER) {
         (0, _rendererEvent.sendEvent)({
           action: _constant.RendererEventAction.SET_LOCAL_USER,
@@ -420,30 +473,61 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "mount",
     value: function mount() {
-      var _this2 = this;
       var _boardMainWindow = this._boardMainWindow,
         _boardDom = this._boardDom;
       if (_boardDom && _boardMainWindow && !this._mounted) {
-        var _this$_collectorDom;
         this._mounted = true;
         var aspectRatio = this._initHeight / this._initWidth;
-        // const aspectRatio = _boardDom.clientHeight / _boardDom.clientWidth;
-        _boardMainWindow.mount(_boardDom, {
-          containerSizeRatio: aspectRatio,
-          collectorContainer: (_this$_collectorDom = this._collectorDom) !== null && _this$_collectorDom !== void 0 ? _this$_collectorDom : undefined
-        }).then(function () {
-          _this2._addDisposers();
-        })["catch"](function () {
-          _this2._mounted = false;
-        });
+        var view = _boardMainWindow.getContentView();
+        _boardDom.appendChild(view);
+        _boardMainWindow.setContainerSizeRatio(aspectRatio);
+        this._addDisposers();
+        this._resetToolIfNeed();
+        this._repositionToolbar();
+        if (this._boardMainWindow) {
+          var _this$_ownerUser3, _this$_localUser, _this$_boardStore2, _this$_boardStore3;
+          this._setBackground(this._whiteboardControl.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$_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, {
+            action: _type.WhiteboardBaseEvents.SET_OWNER_USER_ID,
+            payload: activeInfo.ownerUserId
+          });
+          (0, _rendererEvent.sendEvent)({
+            action: _constant.RendererEventAction.SET_OWNER_USER,
+            payload: this._userControl.getUser(activeInfo.ownerUserId)
+          });
+        }
       }
     }
   }, {
     key: "unmount",
     value: function unmount() {
       if (this._mounted && this._boardMainWindow) {
-        this._boardMainWindow.destroy();
+        var _this$_boardDom;
+        (_this$_boardDom = this._boardDom) === null || _this$_boardDom === void 0 || _this$_boardDom.removeChild(this._boardMainWindow.getContentView());
         this._boardMainWindow = undefined;
+        if (this._lonelyWindowState === _type.LonelyWindowState.OPEN) {
+          this._openLonelyWindow();
+        }
+        if (this._lonelyWindowState === _type.LonelyWindowState.CLOSE) {
+          this._open();
+        }
+        this._uiEventStore.sendEvent(_constant.UIAction.WHITEBOARD_CHANGED, {
+          action: _type.WhiteboardBaseEvents.SET_OWNER_USER_ID,
+          payload: null
+        });
+        (0, _rendererEvent.sendEvent)({
+          action: _constant.RendererEventAction.SET_OWNER_USER,
+          payload: null
+        });
+        this._ownerUser = undefined;
+        this._initialized = false;
+        this._close();
       }
       this._mounted = false;
       if (this._timer) clearTimeout(this._timer);
@@ -459,10 +543,10 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "_setBackground",
     value: function _setBackground() {
-      var bgColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '#fff';
+      var bgColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '#ffffff';
       if (this._boardMainWindow) {
         var _this$_boardMainWindo;
-        var themes = _libs["default"];
+        var themes = (0, _libs["default"])(this._t);
         var _ref4 = themes.find(function (theme) {
             return theme.background === bgColor;
           }) || {
@@ -470,53 +554,57 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
           },
           colors = _ref4.colors;
         (_this$_boardMainWindo = this._boardMainWindow) === null || _this$_boardMainWindo === void 0 || _this$_boardMainWindo.setBackgroundColor(bgColor);
-        this._toolbarStore.observables.colors = colors;
+        if (colors && colors.length > 0) {
+          this._toolbarStore.observables.colors = colors;
+        }
       }
     }
   }, {
     key: "_resetToolIfNeed",
     value: function _resetToolIfNeed() {
-      var _this$_boardMainWindo2;
-      if ((_this$_boardMainWindo2 = this._boardMainWindow) !== null && _this$_boardMainWindo2 !== void 0 && _this$_boardMainWindo2.mounted) {
-        var _this$_toolbarContext, _this$_toolbarContext2, _this$_toolbarContext3;
-        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);
-      }
+      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() {
       if (!this._initialized) {
         this._open();
-        this._initialized = true;
       }
     }
   }, {
     key: "_boardUIEvents",
     value: function _boardUIEvents(observables) {
-      var _this3 = this;
+      var _this2 = this;
       return {
         handleBoardDomLoad: function handleBoardDomLoad(ref) {
-          _this3._boardDom = ref;
-          if (_this3._boardDom) {
-            _this3.mount();
+          _this2._boardDom = ref;
+          if (_this2._boardDom) {
+            _this2.mount();
+          } else {
+            _this2._mounted = false;
           }
         },
         handleCollectorDomLoad: function handleCollectorDomLoad(ref) {
-          _this3._collectorDom = ref;
+          _this2._collectorDom = ref;
         },
         handleClose: function handleClose() {
-          _this3._close();
-          _this3._isActive = false;
-          _this3.unmount();
+          // this._close();
+          // this._isActive = false;
+          // this.unmount();
+          // console.log('whiteboard close');
         },
         handleOpen: function handleOpen() {
-          _this3._open();
+          // console.log('whiteboard open');
+          // !this._initialized && this._open();
         },
         setPrivilege: function setPrivilege(canOperate) {
           observables.canOperate = canOperate;
@@ -524,7 +612,10 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         setWriteEnable: function setWriteEnable(enable) {
           observables.writeEnabled = enable;
           observables.canOperate = enable;
-          _this3._repositionToolbar();
+          _this2._repositionToolbar();
+        },
+        setWhiteboardVisible: function setWhiteboardVisible(visible) {
+          observables.whiteboardVisible = visible;
         }
       };
     }
@@ -550,7 +641,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         thatStyle.transition = 'transform ease .5s';
         var scaleValue = this._controlbarStore.scaleValue;
         if (_utils.ZOOM_IN_CANVAS) {
-          this._boardMainWindow.setViewMode(_enums.ViewMode.Freedom);
+          // this._boardMainWindow.setViewMode(ViewMode.Freedom);
         }
         this._resetScaleState();
         if (oprate === _type.WhiteboardControlbarEvents.ZOOMIN) {
@@ -583,20 +674,20 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         if (!_utils.ZOOM_IN_CANVAS) {
           thatStyle.transform = "scale(".concat(value, ")");
         } else {
-          this._boardMainWindow.zoom(value);
+          // this._boardMainWindow.zoom(value);
         }
       }
     }
   }, {
     key: "_resetCanvasPosition",
     value: function _resetCanvasPosition() {
-      var _this4 = this;
+      var _this3 = this;
       if (this._timer) clearTimeout(this._timer);
       this._timer = setTimeout(function () {
-        if (!_this4._boardDom) return;
-        _this4._repositionToolbar();
-        var thatStyle = _this4._boardDom.style;
-        _this4._controlbarStore.scaleValue = 1;
+        if (!_this3._boardDom) return;
+        _this3._repositionToolbar();
+        var thatStyle = _this3._boardDom.style;
+        _this3._controlbarStore.scaleValue = 1;
         thatStyle.transform = "scale(1)";
       }, 300);
     }
@@ -618,7 +709,8 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         connectionState: this._connectionState,
         joinSuccessed: this._joinSuccessed,
         progress: 0,
-        writeEnabled: this._isHost
+        writeEnabled: this._isHost,
+        whiteboardVisible: false
       });
       return _objectSpread({
         observables: observables
@@ -627,24 +719,24 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "_createToolbarUIContext",
     value: function _createToolbarUIContext() {
-      var _this5 = this;
+      var _this4 = 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();
+          var _this4$_boardMainWind;
+          return (_this4$_boardMainWind = _this4._boardMainWindow) === null || _this4$_boardMainWind === void 0 ? void 0 : _this4$_boardMainWind.redo();
         },
         undo: function undo() {
-          var _this5$_boardMainWind2;
-          return (_this5$_boardMainWind2 = _this5._boardMainWindow) === null || _this5$_boardMainWind2 === void 0 ? void 0 : _this5$_boardMainWind2.undo();
+          var _this4$_boardMainWind2;
+          return (_this4$_boardMainWind2 = _this4._boardMainWindow) === null || _this4$_boardMainWind2 === void 0 ? void 0 : _this4$_boardMainWind2.undo();
         },
         clean: function clean() {
-          var _this5$_boardMainWind3;
-          return (_this5$_boardMainWind3 = _this5._boardMainWindow) === null || _this5$_boardMainWind3 === void 0 ? void 0 : _this5$_boardMainWind3.clean();
+          var _this4$_boardMainWind3;
+          return (_this4$_boardMainWind3 = _this4._boardMainWindow) === null || _this4$_boardMainWind3 === void 0 ? void 0 : _this4$_boardMainWind3.clean();
         },
         saveDraft: function saveDraft() {
-          return _this5._getSnapshotImage();
+          return _this4._getSnapshotImage();
         },
         clickExpansionTool: function clickExpansionTool() {},
         setToolbarPosition: function setToolbarPosition(pos) {
@@ -654,39 +746,43 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
           return observables.toolbarReleased = false;
         },
         setTool: function setTool(tool) {
-          var _this5$_boardMainWind4;
+          var _this4$_boardMainWind4;
           observables.currentTool = tool;
           observables.currentShape = undefined;
-          (_this5$_boardMainWind4 = _this5._boardMainWindow) === null || _this5$_boardMainWind4 === void 0 || _this5$_boardMainWind4.selectTool(tool);
+          (_this4$_boardMainWind4 = _this4._boardMainWindow) === null || _this4$_boardMainWind4 === void 0 || _this4$_boardMainWind4.setToolType(tool);
         },
         setPen: function setPen(shape) {
-          var _this5$_boardMainWind5;
+          var _this4$_boardMainWind5, _this4$_boardMainWind6, _this4$_boardMainWind7;
           observables.currentShape = shape;
           observables.lastPen = shape;
           observables.currentTool = undefined;
-          (_this5$_boardMainWind5 = _this5._boardMainWindow) === null || _this5$_boardMainWind5 === void 0 || _this5$_boardMainWind5.drawShape(shape, observables.currentStrokeWidth, (0, _tinycolor["default"])(observables.currentColor).toRgb());
+          (_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());
         },
         setShape: function setShape(shape) {
-          var _this5$_boardMainWind6;
+          var _this4$_boardMainWind8, _this4$_boardMainWind9, _this4$_boardMainWind10;
           observables.currentShape = shape;
           observables.lastShape = shape;
           observables.currentTool = undefined;
-          (_this5$_boardMainWind6 = _this5._boardMainWindow) === null || _this5$_boardMainWind6 === void 0 || _this5$_boardMainWind6.drawShape(shape, observables.currentStrokeWidth, (0, _tinycolor["default"])(observables.currentColor).toRgb());
+          (_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());
         },
         setStrokeColor: function setStrokeColor(color) {
-          var _this5$_boardMainWind7;
+          var _this4$_boardMainWind11;
           observables.currentColor = color;
-          (_this5$_boardMainWind7 = _this5._boardMainWindow) === null || _this5$_boardMainWind7 === void 0 || _this5$_boardMainWind7.changeStrokeColor((0, _tinycolor["default"])(color).toRgb());
+          (_this4$_boardMainWind11 = _this4._boardMainWindow) === null || _this4$_boardMainWind11 === void 0 || _this4$_boardMainWind11.setStrokeColor((0, _tinycolor["default"])(color).toRgb());
         },
         setStrokeWidth: function setStrokeWidth(strokeWidth) {
-          var _this5$_boardMainWind8;
+          var _this4$_boardMainWind12;
           observables.currentStrokeWidth = strokeWidth;
-          (_this5$_boardMainWind8 = _this5._boardMainWindow) === null || _this5$_boardMainWind8 === void 0 || _this5$_boardMainWind8.changeStrokeWidth(strokeWidth);
+          (_this4$_boardMainWind12 = _this4._boardMainWindow) === null || _this4$_boardMainWind12 === void 0 || _this4$_boardMainWind12.setStrokeWidth(strokeWidth);
         },
         releaseToolbar: function releaseToolbar() {
           observables.toolbarReleased = true;
-          _this5._updateDockPlacement();
-          _this5._repositionToolbar();
+          _this4._updateDockPlacement();
+          _this4._repositionToolbar();
         },
         captureScreen: function captureScreen() {
           var hideWindow = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
@@ -695,8 +791,9 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
           });
         },
         setTheme: (0, _mobx.action)(function (theme) {
-          _this5._setBackgroundColor(theme.background);
+          _this4._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);
@@ -807,7 +904,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
     value: function _setBackgroundColor(bgColor) {
       var _this$_whiteboardCont3;
       var color = bgColor || 'white';
-      (_this$_whiteboardCont3 = this._whiteboardControl) === null || _this$_whiteboardCont3 === void 0 || _this$_whiteboardCont3.setBoardBackground(color);
+      (_this$_whiteboardCont3 = this._whiteboardControl) === null || _this$_whiteboardCont3 === void 0 || _this$_whiteboardCont3.setBackgroundColor(color);
     }
   }, {
     key: "_updateRedo",
@@ -836,6 +933,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
     value: function _open() {
       var _this$_whiteboardCont4;
       this._joined = true;
+      this._initialized = true;
       (_this$_whiteboardCont4 = this._whiteboardControl) === null || _this$_whiteboardCont4 === void 0 || _this$_whiteboardCont4.open();
     }
   }, {
@@ -849,17 +947,48 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
     }
   }, {
     key: "_getSnapshotImage",
-    value: function _getSnapshotImage(background) {
-      var _this6 = this;
-      var mainWindow = this._boardMainWindow;
-      if (mainWindow) {
-        mainWindow.getSnapshotImage(background, function (progress) {
-          if (_this6._boardStore) {
-            _this6._boardStore.observables.progress = progress;
+    value: function () {
+      var _getSnapshotImage2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+        var _this5 = this;
+        var mainWindow, _this$_roomControl$ge, progress, imageData, fileName;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              mainWindow = this._boardMainWindow;
+              if (!mainWindow) {
+                _context.next = 11;
+                break;
+              }
+              progress = setInterval(function () {
+                if (_this5._boardStore && _this5._boardStore.observables.progress < 100) {
+                  _this5._boardStore.observables.progress += 1;
+                } else {
+                  clearInterval(progress);
+                }
+              }, 10);
+              _context.next = 5;
+              return mainWindow.getSnapshotImage();
+            case 5:
+              imageData = _context.sent;
+              this._boardStore.observables.progress = 100;
+              clearInterval(progress);
+              fileName = "".concat((_this$_roomControl$ge = this._roomControl.getRoomInfo()) === null || _this$_roomControl$ge === void 0 ? void 0 : _this$_roomControl$ge.roomName, "_").concat((0, _dayjs["default"])().format('YYYYMMDD_HHmmSSS'), ".jpg");
+              (0, _utils.downloadImageData)(imageData, fileName);
+              this._uiEventStore.showToast({
+                type: 'info',
+                message: (0, _i18n.transI18n)('fmt_screenshare_whiteboard_tips_savedsuccessfully')
+              });
+            case 11:
+            case "end":
+              return _context.stop();
           }
-        });
+        }, _callee, this);
+      }));
+      function _getSnapshotImage() {
+        return _getSnapshotImage2.apply(this, arguments);
       }
-    }
+      return _getSnapshotImage;
+    }()
   }, {
     key: "_openLonelyWindow",
     value: function _openLonelyWindow() {
@@ -878,200 +1007,126 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "_boardObservble",
     value: function _boardObservble() {
-      var _this7 = this;
-      return {
-        onJoinSuccess: function () {
-          var _onJoinSuccess = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(mainWindow) {
-            var _this7$_whiteboardCon2, _this7$_whiteboardCon, ownerUserId, ownerUser;
-            return _regenerator["default"].wrap(function _callee$(_context) {
-              while (1) switch (_context.prev = _context.next) {
-                case 0:
-                  _this7.logger.info('Fcr board join success');
-                  if (_this7._whiteboardControl) {
-                    _this7$_whiteboardCon = (_this7$_whiteboardCon2 = _this7._whiteboardControl) === null || _this7$_whiteboardCon2 === void 0 ? void 0 : _this7$_whiteboardCon2.getBoardActiveInfo(), ownerUserId = _this7$_whiteboardCon.ownerUserId;
-                    ownerUser = _this7._userControl.getUser(ownerUserId);
-                    _this7._controlbarStore.ownerUser = ownerUser;
-                  }
-                  _context.next = 4;
-                  return mainWindow.updateOperationPrivilege(true);
-                case 4:
-                  mainWindow.addObserver(_this7._MainWindowEvents(mainWindow));
-                  _this7._boardMainWindow = mainWindow;
-                  _this7.mount();
-                case 7:
-                case "end":
-                  return _context.stop();
-              }
-            }, _callee);
-          }));
-          function onJoinSuccess(_x) {
-            return _onJoinSuccess.apply(this, arguments);
-          }
-          return onJoinSuccess;
-        }(),
-        onJoinFailure: function onJoinFailure(e) {
-          _this7.logger.error('Fcr board join failure', e);
-          _this7._uiEventStore.showToast({
-            message: (0, _i18n.transI18n)('fmt_screenshare_whiteboard_tips_cannotjoin'),
-            type: 'warn'
-          });
-        },
-        onConnectionStateUpdated: function onConnectionStateUpdated(state) {
-          _this7.logger.info('Fcr board connection state changed to', state);
-          _this7._setConnectionState(state);
-          if (state === _enums.FcrBoardRoomConnectionState.DISCONNECTED) {
-            if (_this7._joined) {
-              var _this7$_whiteboardCon3;
-              (_this7$_whiteboardCon3 = _this7._whiteboardControl) === null || _this7$_whiteboardCon3 === void 0 || _this7$_whiteboardCon3.open();
-            }
-          }
-          if (state === _enums.FcrBoardRoomConnectionState.CONNECTED) {
-            _this7._setJoinSuccessed(true);
-          }
-        },
-        onMemberStateChanged: function onMemberStateChanged(state) {
-          _this7.logger.info('Fcr board member state changed to', state);
-        },
-        onPermissionDeny: function onPermissionDeny() {}
-      };
-    }
-  }, {
-    key: "_MainWindowEvents",
-    value: function _MainWindowEvents(mainWindow) {
-      var _this8 = this;
+      var _this6 = this;
       return {
-        onRedoStepsUpdated: this._updateRedo,
-        onUndoStepsUpdated: this._updateUndo,
-        onMountSuccess: function () {
-          var _onMountSuccess = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-            var _this8$_whiteboardCon, _this8$_ownerUser, _this8$_localUser, _this8$_boardStore, _this8$_boardStore2, activeInfo;
+        onConnectionStateUpdated: function () {
+          var _onConnectionStateUpdated = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(state) {
+            var _this6$_whiteboardCon, mainWindow, _this6$_whiteboardCon2, ownerUserId, ownerUser;
             return _regenerator["default"].wrap(function _callee2$(_context2) {
               while (1) switch (_context2.prev = _context2.next) {
                 case 0:
-                  _context2.next = 2;
-                  return mainWindow.updateOperationPrivilege(true);
-                case 2:
-                  _this8._resetToolIfNeed();
-                  _this8._repositionToolbar();
-                  if (_this8._boardMainWindow) {
-                    _this8._setBackground(_this8._boardBackground);
-                    _this8._toolbarStore.observables.layoutReady = [_type.LonelyWindowState.CLOSE, _type.LonelyWindowState.DEFAULT].includes(_this8._lonelyWindowState);
-                    activeInfo = (_this8$_whiteboardCon = _this8._whiteboardControl) === null || _this8$_whiteboardCon === void 0 ? void 0 : _this8$_whiteboardCon.getBoardActiveInfo();
-                    _this8._ownerUser = _this8._userControl.getUser(activeInfo === null || activeInfo === void 0 ? void 0 : activeInfo.ownerUserId);
-                    _this8._isMyBoard = ((_this8$_ownerUser = _this8._ownerUser) === null || _this8$_ownerUser === void 0 ? void 0 : _this8$_ownerUser.userId) === ((_this8$_localUser = _this8._localUser) === null || _this8$_localUser === void 0 ? void 0 : _this8$_localUser.userId);
-                    (_this8$_boardStore = _this8._boardStore) === null || _this8$_boardStore === void 0 || _this8$_boardStore.setPrivilege(_this8._isMyBoard || _this8._isHost);
-                    (_this8$_boardStore2 = _this8._boardStore) === null || _this8$_boardStore2 === void 0 || _this8$_boardStore2.setWriteEnable(_this8._isMyBoard || _this8._isHost);
-                    _this8._uiEventStore.sendEvent(_constant.UIAction.WHITEBOARD_CHANGED, {
-                      action: _type.WhiteboardBaseEvents.SET_OWNER_USER_ID,
-                      payload: activeInfo.ownerUserId
-                    });
-                    (0, _rendererEvent.sendEvent)({
-                      action: _constant.RendererEventAction.SET_OWNER_USER,
-                      payload: _this8._userControl.getUser(activeInfo.ownerUserId)
+                  _this6.logger.info('Fcr board connection state changed to', state);
+                  _this6._setConnectionState(state);
+                  if (state === _agoraEduCore.FcrConnectionState.DISCONNECTED) {
+                    if (_this6._joined) {
+                      (_this6$_whiteboardCon = _this6._whiteboardControl) === null || _this6$_whiteboardCon === void 0 || _this6$_whiteboardCon.open();
+                    } else {
+                      _this6.unmount();
+                      _this6.unload();
+                    }
+                  }
+                  if (state === _agoraEduCore.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;
+                    }
+                    mainWindow.addObserver({
+                      onRedoStateUpdated: _this6._updateRedo,
+                      onUndoStateUpdated: _this6._updateUndo
                     });
+                    _this6._boardMainWindow = mainWindow;
+                    _this6.mount();
                   }
-                case 5:
+                case 4:
                 case "end":
                   return _context2.stop();
               }
             }, _callee2);
           }));
-          function onMountSuccess() {
-            return _onMountSuccess.apply(this, arguments);
+          function onConnectionStateUpdated(_x) {
+            return _onConnectionStateUpdated.apply(this, arguments);
           }
-          return onMountSuccess;
-        }(),
-        onUnmount: function onUnmount() {
-          if (_this8._lonelyWindowState === _type.LonelyWindowState.OPEN) {
-            _this8._openLonelyWindow();
-          }
-          if (_this8._lonelyWindowState === _type.LonelyWindowState.CLOSE) {
-            _this8._open();
-          }
-          _this8._uiEventStore.sendEvent(_constant.UIAction.WHITEBOARD_CHANGED, {
-            action: _type.WhiteboardBaseEvents.SET_OWNER_USER_ID,
-            payload: null
-          });
-          (0, _rendererEvent.sendEvent)({
-            action: _constant.RendererEventAction.SET_OWNER_USER,
-            payload: null
-          });
-          _this8._ownerUser = null;
-          _this8._initialized = false;
-        },
-        onSnapshotSuccess: function onSnapshotSuccess(canvas) {
-          var _this8$_roomControl$g;
-          var fileName = "".concat((_this8$_roomControl$g = _this8._roomControl.getRoomInfo()) === null || _this8$_roomControl$g === void 0 ? void 0 : _this8$_roomControl$g.roomName, "_").concat((0, _dayjs["default"])().format('YYYYMMDD_HHmmSSS'), ".jpg");
-          (0, _utils.downloadCanvasImage)(canvas, fileName);
-          _this8._uiEventStore.showToast({
-            type: 'info',
-            message: (0, _i18n.transI18n)('fmt_screenshare_whiteboard_tips_savedsuccessfully')
-          });
-        },
-        onFailure: function onFailure(reason) {
-          _this8.logger.error('operation failure, reason: ', reason);
-          if (reason === _type.FcrBoardMainWindowFailureReason.ResourceWindowAlreadyOpened) {
-            _this8._uiEventStore.showToast({
-              type: 'error',
-              message: (0, _i18n.transI18n)('fmt_screenshare_whiteboard_tips_failed')
-            });
-          }
-          if (reason === _type.FcrBoardMainWindowFailureReason.SnapshotFailure) {
-            _this8._uiEventStore.showToast({
-              type: 'error',
-              message: (0, _i18n.transI18n)('fmt_screenshare_whiteboard_tips_failed')
-            });
-          }
-        }
+          return onConnectionStateUpdated;
+        }()
       };
     }
   }, {
     key: "_addDisposers",
     value: function _addDisposers() {
-      var _this9 = this;
+      var _this7 = this;
       this._disposers.push((0, _mobx.reaction)(function () {
-        return _this9.hasPrivilege;
+        return _this7.hasPrivilege;
       }, function (privilege) {
-        var _this9$_boardStore, _this9$_boardStore2;
-        var p = privilege || _this9._isHost || _this9._isMyBoard;
-        (_this9$_boardStore = _this9._boardStore) === null || _this9$_boardStore === void 0 || _this9$_boardStore.setWriteEnable(_this9._isHost || _this9._isMyBoard);
-        (_this9$_boardStore2 = _this9._boardStore) === null || _this9$_boardStore2 === void 0 || _this9$_boardStore2.setPrivilege(p);
+        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);
       }), (0, _mobx.reaction)(function () {
-        return _this9._boardStore.observables.writeEnabled;
+        return _this7._boardStore.observables.writeEnabled;
       }, function (writeEnabled) {
-        if (writeEnabled) setTimeout(_this9._repositionToolbar, 0);
+        if (writeEnabled) setTimeout(_this7._repositionToolbar, 0);
       }), (0, _mobx.reaction)(function () {
-        return _this9._localUser;
+        return _this7._localUser;
       }, function (user) {
-        var _this9$_boardStore3;
-        _this9._isHost = [_type2.FcrUserRole.HOST, _type2.FcrUserRole.COHOST].includes(user.userRole);
-        var hasPrivilege = _this9.hasPrivilege || _this9._isHost || _this9._isMyBoard;
-        (_this9$_boardStore3 = _this9._boardStore) === null || _this9$_boardStore3 === void 0 || _this9$_boardStore3.setPrivilege(hasPrivilege);
-        _this9._boardStore.setWriteEnable(_this9._isHost || _this9._isMyBoard);
+        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);
       }));
     }
   }, {
     key: "_alertWhenReplace",
     value: function _alertWhenReplace(userInfo) {
-      var _this10 = this;
+      var _this8 = this;
       var userRole = userInfo.userRole,
         userName = userInfo.userName;
       var dialogId = this._uiEventStore.openConfirmDialog({
         title: (0, _i18n.transI18n)('fmt_screenshare_whiteboard_tips_stoppedboard'),
         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,
         onOk: function onOk() {
-          _this10._uiEventStore.closeDialog(dialogId);
+          _this8._uiEventStore.closeDialog(dialogId);
         },
         onCancel: function onCancel() {
-          _this10._uiEventStore.closeDialog(dialogId);
+          _this8._uiEventStore.closeDialog(dialogId);
         }
       });
     }
+  }, {
+    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"], [_decorator.bound, 2, "onProcessEvent"], [_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"], [_MainWindowEventsDecs, 18, "_MainWindowEvents"]], [], 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"], [_decorator.bound, 2, "onProcessEvent"], [_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$e2 = (0, _slicedToArray2["default"])(_applyDecs$e, 6);
 _init__lonelyWindowState = _applyDecs$e2[0];
 _init__ownerUser = _applyDecs$e2[1];