fcr-ui-scene 3.6.2 → 3.6.4-rc.1

package/lib/modules/annotation/store.js

@@ -8,7 +8,6 @@ require("core-js/modules/es.error.cause.js");
 require("core-js/modules/es.error.to-string.js");
 require("core-js/modules/es.array.from.js");
 require("core-js/modules/es.array.is-array.js");
-require("core-js/modules/es.array.push.js");
 require("core-js/modules/es.array.slice.js");
 require("core-js/modules/es.date.to-primitive.js");
 require("core-js/modules/es.date.to-string.js");
@@ -47,20 +46,19 @@ require("core-js/modules/es.array.find.js");
 require("core-js/modules/es.array.for-each.js");
 require("core-js/modules/es.array.includes.js");
 require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.array.push.js");
 require("core-js/modules/es.date.to-json.js");
 require("core-js/modules/es.json.stringify.js");
 require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.promise.js");
 require("core-js/modules/es.regexp.constructor.js");
 require("core-js/modules/es.regexp.dot-all.js");
 require("core-js/modules/es.regexp.exec.js");
 require("core-js/modules/es.regexp.sticky.js");
 require("core-js/modules/es.regexp.test.js");
 require("core-js/modules/es.regexp.to-string.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.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.find.js");
 require("core-js/modules/esnext.iterator.for-each.js");
@@ -79,11 +77,18 @@ var _constant = require("../../utilities/constant");
 var _decorator = require("agora-foundation/lib/decorator");
 var _rendererEvent = require("../../utilities/renderer-event");
 var _type = require("agora-rte-sdk/lib/core/rtc/type");
+var _annotationProvider = require("../../providers/annotation-provider");
 var _mobx = require("mobx");
+var _fcrCore = require("fcr-core");
 var _type2 = require("fcr-core/lib/room-control/sharing-control/type");
+var _store = require("../whiteboard/components/toolbar/store");
+var _i18n = require("agora-ui-foundation/lib/i18n");
 var _logger = require("../../utilities/logger");
+var _isNumber = _interopRequireDefault(require("lodash/isNumber"));
+var _env = require("agora-foundation/lib/utilities/env");
+var _type3 = require("../whiteboard/type");
 var _AnnotationStore;
-var _initProto, _init_annotationMainWindow, _init_resetToolbarStore, _init_isShowToolbar, _setToolsShowDecs, _zoomInDecs, _zoomOutDecs, _fullContainerDecs, _setOriginScalcDecs, _calcBoardPositionDecs, _handleBoardDomLoadDecs, _handleBoardContainerDomLoadDecs, _mountDecs, _unmountDecs, _ref;
+var _initProto, _init_resetToolbarStore, _init_isShowToolbar, _setToolsShowDecs, _zoomInDecs, _zoomOutDecs, _fullContainerDecs, _setOriginScalcDecs, _drawReceiverBoardDecs, _handleBoardDomLoadDecs, _handleBoardContainerDomLoadDecs, _annotationEndedDecs, _mountDecs, _unmountDecs, _ref;
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -99,8 +104,7 @@ function _setFunctionName(e, t, n) { "symbol" == _typeof(t) && (t = (t = t.descr
 function _checkInRHS(e) { if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (null !== e ? _typeof(e) : "null")); return e; }
 var _A = /*#__PURE__*/new WeakMap();
 var _B = /*#__PURE__*/new WeakMap();
-var _C = /*#__PURE__*/new WeakMap();
-_ref = (_setToolsShowDecs = [_mobx.action, _mobx.action.bound], _zoomInDecs = [_mobx.action, _mobx.action.bound], _zoomOutDecs = [_mobx.action, _mobx.action.bound], _fullContainerDecs = [_mobx.action, _mobx.action.bound], _setOriginScalcDecs = [_mobx.action, _mobx.action.bound], _calcBoardPositionDecs = [_mobx.action, _mobx.action.bound], _handleBoardDomLoadDecs = [_mobx.action, _mobx.action.bound], _handleBoardContainerDomLoadDecs = [_mobx.action, _mobx.action.bound], _mountDecs = [_mobx.action, _mobx.action.bound], _unmountDecs = [_mobx.action, _mobx.action.bound], "logger");
+_ref = (_setToolsShowDecs = [_mobx.action, _mobx.action.bound], _zoomInDecs = [_mobx.action, _mobx.action.bound], _zoomOutDecs = [_mobx.action, _mobx.action.bound], _fullContainerDecs = [_mobx.action, _mobx.action.bound], _setOriginScalcDecs = [_mobx.action, _mobx.action.bound], _drawReceiverBoardDecs = [_mobx.action, _mobx.action.bound], _handleBoardDomLoadDecs = [_mobx.action, _mobx.action.bound], _handleBoardContainerDomLoadDecs = [_mobx.action, _mobx.action.bound], _annotationEndedDecs = [_mobx.action, _mobx.action.bound], _mountDecs = [_mobx.action, _mobx.action.bound], _unmountDecs = [_mobx.action, _mobx.action.bound], "logger");
 var AnnotationStore = exports.AnnotationStore = /*#__PURE__*/function () {
   function AnnotationStore(_ref2) {
     var _this = this;
@@ -114,7 +118,9 @@ var AnnotationStore = exports.AnnotationStore = /*#__PURE__*/function () {
       sharedScreenSharedDataSource = _ref2.sharedScreenSharedDataSource,
       privilegeProvider = _ref2.privilegeProvider,
       messageProvider = _ref2.messageProvider,
-      localStorageProvider = _ref2.localStorageProvider;
+      localStorageProvider = _ref2.localStorageProvider,
+      eventProvider = _ref2.eventProvider,
+      abilityProvider = _ref2.abilityProvider;
     (0, _classCallCheck2["default"])(this, AnnotationStore);
     (0, _defineProperty2["default"])(this, _ref, (_initProto(this), (0, _logger.createLogger)({
       prefix: 'AnnotationStore'
@@ -142,9 +148,8 @@ var AnnotationStore = exports.AnnotationStore = /*#__PURE__*/function () {
         }
       }
     });
-    _classPrivateFieldInitSpec(this, _A, _init_annotationMainWindow(this, undefined));
-    _classPrivateFieldInitSpec(this, _B, _init_resetToolbarStore(this, false));
-    _classPrivateFieldInitSpec(this, _C, _init_isShowToolbar(this, false));
+    _classPrivateFieldInitSpec(this, _A, _init_resetToolbarStore(this, false));
+    _classPrivateFieldInitSpec(this, _B, _init_isShowToolbar(this, false));
     (0, _defineProperty2["default"])(this, "_toolbarStore", undefined);
     (0, _defineProperty2["default"])(this, "_boardOriginWidth", 0);
     (0, _defineProperty2["default"])(this, "_mounted", false);
@@ -178,126 +183,145 @@ var AnnotationStore = exports.AnnotationStore = /*#__PURE__*/function () {
     this._roomControl = roomControl;
     this._sharedSecuritySharedDataSource = sharedSecuritySharedDataSource;
     this._sharedScreenSharedDataSource = sharedScreenSharedDataSource;
-    // this._dialogProvider.addObserver(this._dialogObserver);
+    this._dialogProvider.addObserver(this._dialogObserver);
     this._privilegeProvider = privilegeProvider;
     this._messageProvider = messageProvider;
-    // this._disposers.push(
-    //   reaction(
-    //     () => this.annotating,
-    //     (annotating) => {
-    //       if (this._isLocalUserSharingOwner) {
-    //         if (annotating) {
-    //           this._removeWindowResizeListenner();
-    //         } else {
-    //           this._addWindowResizeListenner();
-    //         }
-    //       }
-    //     },
-    //   ),
-    //   reaction(
-    //     () => this._memberDataSource.shareScreenVideoRatio,
-    //     (ratio) => {
-    //       if (ratio > 0 && this._boardDom) {
-    //         const { height } = this._boardDom.getBoundingClientRect();
-    //         console.log('annotation current boardDom height:', height);
-    //         const width = height * ratio;
-    //         this._boardOriginWidth = width;
-    //         this._boardDom.style.width = `${width}px`;
-    //         this._boardDom.style.height = `${height}px`;
-    //       }
-    //     },
-    //   ),
-    //   // reaction(
-    //   //   () => this._memberDataSource.shareScreenVideoSize,
-    //   //   (size) => {
-    //   //     if (size && this._boardDom) {
-    //   //       this.logger.info('annotation shareScreenVideoSize: ', size);
-    //   //       calcAnnotationAreaSize(this._boardDom, size.width, size.height);
-    //   //     }
-    //   //   },
-    //   // ),
-    //   reaction(
-    //     () => this.isScreenSharing,
-    //     (sharing) => {
-    //       if (this._isLocalUserSharingOwner) {
-    //         if (sharing) {
-    //           this.screenSharingStarted();
-    //         } else {
-    //           this._removeWindowResizeListenner();
-    //         }
-    //       }
-    //     },
-    //   ),
-    //   reaction(
-    //     () => this._annotationProvider.annotationState,
-    //     (state) => {
-    //       this.logger.info('annotation transaction state: ', state);
-    //       if (!this._isLocalUserSharingOwner) {
-    //         if (state === FcrAnnotationState.START) {
-    //           this.logger.info('annotation transaction start');
-    //           this._annotationControl = this._annotationProvider.annotationControl;
-    //           this._toolbarStore = new ToolbarStore(
-    //             this._annotationControl! as FcrWhiteboardControl,
-    //             this._roomControl!,
-    //             this._annotationProvider,
-    //           );
-    //           this.resetToolbarStore = true;
-    //         } else {
-    //           this.logger.info('annotation transaction end');
-    //           this.resetToolbarStore = false;
-    //           this._boardContainerObserver.disconnect();
-    //           this._messageProvider.showToast({
-    //             message: transI18n(
-    //               'fmt_screenshare_toast_annotation_controls_screen_sharing_disabled',
-    //             ),
-    //             type: 'info',
-    //           });
-    //           this._toolbarStore = undefined;
-    //           this._unmount();
-    //           this.isShowToolbar = false;
-    //         }
-    //       }
-    //     },
-    //   ),
-    //   reaction(
-    //     () => this._sharedScreenSharedDataSource.screenSharingState,
-    //     (state) => {
-    //       if (state === FcrMediaSourceState.CLOSE && this._isLocalUserSharingOwner) {
-    //         console.log('screen sharing state is close');
-    //         this._annotationProvider.hideAnnotationWindow();
-    //         this._removeWindowResizeListenner();
-    //       }
-    //     },
-    //   ),
-    //   reaction(
-    //     () => this.allowAnnotationWriteState,
-    //     (canWrite) => {
-    //       if (!this._isLocalUserSharingOwner) {
-    //         // const toastText = canWrite
-    //         //   ? transI18n('fmt_screenshare_toast_host_enabled_annotations')
-    //         //   : transI18n('fmt_screenshare_toast_host_disabled_annotations');
-    //         // this._messageProvider.showToast({
-    //         //   type: 'info',
-    //         //   message: toastText,
-    //         // });
-    //       }
-    //       if (!canWrite) {
-    //         this.isShowToolbar = false;
-    //       }
-    //     },
-    //   ),
-    //   reaction(
-    //     () => this.annotationHasStart,
-    //     (hasStart) => {
-    //       if (!hasStart) {
-    //         this.isShowToolbar = false;
-    //       }
-    //     },
-    //   ),
-    // );
+    this._eventProvider = eventProvider;
+    this._abilityProvider = abilityProvider;
+    this._disposers.push((0, _mobx.reaction)(function () {
+      return _this.annotating;
+    }, function (annotating) {
+      if (_this._isLocalUserSharingOwner) {
+        if (annotating) {
+          _this._removeWindowResizeListenner();
+        } else {
+          _this._addWindowResizeListenner();
+        }
+      }
+    }), (0, _mobx.reaction)(function () {
+      return _this.isSeizeStream;
+    }, function (state) {
+      _this.logger.info('[Annotation]: isSeizeStream changed to ', state);
+      if (state) {
+        _this._sharedScreenSharedDataSource.setIsSeizeStream(false);
+        if (_this._isLocalUserSharingOwner) {
+          _this._annotationProvider.hideAnnotationWindow();
+          _this._removeWindowResizeListenner();
+        } else {
+          _this._annotationEnded();
+        }
+      }
+    }), (0, _mobx.reaction)(function () {
+      return _this._memberDataSource.shareScreenVideoRatio;
+    }, function (ratio) {
+      if (ratio > 0) {
+        _this.drawReceiverBoard(ratio);
+      }
+    }),
+    // reaction(
+    //   () => this._memberDataSource.shareScreenVideoSize,
+    //   (size) => {
+    //     if (size && this._boardDom) {
+    //       this.logger.info('annotation shareScreenVideoSize: ', size);
+    //       calcAnnotationAreaSize(this._boardDom, size.width, size.height);
+    //     }
+    //   },
+    // ),
+    (0, _mobx.reaction)(function () {
+      return _this.isScreenSharing;
+    }, function (sharing) {
+      _this.logger.info("[Annotation]: screen sharing reaction sharing changed to ".concat(sharing, ", isReplaceScreen is ").concat(_this.isReplaceScreen, ", isSeizeStream is ").concat(_this.isSeizeStream));
+      // web 开启屏幕共享时不需要走这个逻辑
+      if (_this.isReplaceScreen || _this.isSeizeStream || !(0, _env.isElectron)()) return;
+      if (_this._isLocalUserSharingOwner) {
+        if (sharing) {
+          _this.screenSharingStarted();
+        } else {
+          _this._removeWindowResizeListenner();
+        }
+      }
+    }), (0, _mobx.reaction)(function () {
+      return _this.isReplaceScreen;
+    }, /*#__PURE__*/function () {
+      var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(isReplaceScreen) {
+        return _regenerator["default"].wrap(function (_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!(isReplaceScreen && (0, _env.isElectron)())) {
+                _context.next = 2;
+                break;
+              }
+              _context.next = 1;
+              return new Promise(function (resolve) {
+                // 延迟两秒，等待标注内容清理，清理方法在 sdk 中虽然看起来是同步的，但是实际上会有无法清理的情况出现
+                (0, _rendererEvent.sendEvent)({
+                  action: _type3.ToolbarEvents.CLEAN,
+                  payload: null
+                });
+                setTimeout(function () {
+                  return resolve(true);
+                }, 2000);
+              });
+            case 1:
+              _this.logger.info("[Annotation]: isReplaceScreen changed to ".concat(isReplaceScreen, ", currentShareInfo is ").concat(JSON.stringify(_this._currentShareInfo)));
+              _this._removeWindowResizeListenner();
+              _this._annotationProvider.hideAnnotationWindow();
+              _this._annotationProvider.setBoundsToAnnotationWindow();
+              setTimeout(_this.screenSharingStarted);
+              _this._sharedScreenSharedDataSource.setIsReplaceScreen(false);
+            case 2:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function (_x) {
+        return _ref3.apply(this, arguments);
+      };
+    }()), (0, _mobx.reaction)(function () {
+      return _this._annotationProvider.annotationState;
+    }, function (state) {
+      _this.logger.info('annotation transaction state: ', state);
+      if (state === _annotationProvider.FcrAnnotationState.START) {
+        _this.logger.info('annotation transaction start');
+        _this._annotationControl = _this._annotationProvider.annotationControl;
+        _this._toolbarStore = new _store.ToolbarStore(_this._annotationControl, _this._roomControl, _this._annotationProvider, eventProvider);
+        _this.resetToolbarStore = true;
+      } else {
+        _this._annotationEnded();
+      }
+    }), (0, _mobx.reaction)(function () {
+      return _this._sharedScreenSharedDataSource.screenSharingState;
+    }, function (state) {
+      if (state === _fcrCore.FcrMediaSourceState.CLOSE && _this._isLocalUserSharingOwner) {
+        _this.logger.info('[Annotation]: screenSharingState is close, isReplaceScreen is ', _this.isReplaceScreen);
+        if (!_this.isReplaceScreen && (0, _env.isElectron)()) {
+          _this._annotationProvider.hideAnnotationWindow();
+          _this._removeWindowResizeListenner();
+        }
+      }
+    }), (0, _mobx.reaction)(function () {
+      return _this.allowAnnotationWriteState;
+    }, function (canWrite) {
+      if (!_this._isLocalUserSharingOwner) {
+        var toastText = canWrite ? (0, _i18n.transI18n)('fmt_screenshare_toast_host_enabled_annotations') : (0, _i18n.transI18n)('fmt_screenshare_toast_host_disabled_annotations');
+        _this._messageProvider.showToast({
+          type: 'info',
+          message: toastText
+        });
+      }
+      if (!canWrite) {
+        _this.isShowToolbar = false;
+      }
+    }), (0, _mobx.reaction)(function () {
+      return _this.isShowToolbar;
+    }, function (isShow) {
+      var _this$_toolbarStore;
+      (_this$_toolbarStore = _this._toolbarStore) === null || _this$_toolbarStore === void 0 || _this$_toolbarStore.resetToolbarVars();
+    }));
   }
   return (0, _createClass2["default"])(AnnotationStore, [{
-    key: "annotationMainWindow",
+    key: "resetToolbarStore",
     get: function get() {
       return _classPrivateFieldGet(_A, this);
     },
@@ -305,7 +329,7 @@ var AnnotationStore = exports.AnnotationStore = /*#__PURE__*/function () {
       _classPrivateFieldSet(_A, this, v);
     }
   }, {
-    key: "resetToolbarStore",
+    key: "isShowToolbar",
     get: function get() {
       return _classPrivateFieldGet(_B, this);
     },
@@ -313,17 +337,19 @@ var AnnotationStore = exports.AnnotationStore = /*#__PURE__*/function () {
       _classPrivateFieldSet(_B, this, v);
     }
   }, {
-    key: "isShowToolbar",
+    key: "hasAnnotationWritePermission",
     get: function get() {
-      return _classPrivateFieldGet(_C, this);
-    },
-    set: function set(v) {
-      _classPrivateFieldSet(_C, this, v);
+      return this._sharedSecuritySharedDataSource.checkedStateMap.hasAnnotationWritePermission;
     }
   }, {
-    key: "hasAnnotationWritePermission",
+    key: "isLocalUserHost",
     get: function get() {
-      return this._sharedSecuritySharedDataSource.checkedStateMap.hasAnnotationWritePermission;
+      return this._memberDataSource.isLocalUserHost;
+    }
+  }, {
+    key: "screenSharingOwner",
+    get: function get() {
+      return this._sharedScreenSharedDataSource.screenSharingOwner;
     }
   }, {
     key: "screenShareWindowData",
@@ -378,13 +404,35 @@ var AnnotationStore = exports.AnnotationStore = /*#__PURE__*/function () {
   }, {
     key: "allowAnnotationWriteState",
     get: function get() {
-      return this._privilegeProvider.allowAnnotationWriteState();
+      var _this$screenSharingOw;
+      return this._privilegeProvider.allowAnnotationWriteState() || this.isLocalUserHost || ((_this$screenSharingOw = this.screenSharingOwner) === null || _this$screenSharingOw === void 0 ? void 0 : _this$screenSharingOw.userId) === this.localUser.userId;
+    }
+  }, {
+    key: "isReplaceScreen",
+    get: function get() {
+      return this._sharedScreenSharedDataSource.isReplaceScreen;
+    }
+  }, {
+    key: "isSeizeStream",
+    get: function get() {
+      return this._sharedScreenSharedDataSource.isSeizeStream;
+    }
+  }, {
+    key: "isAnnotationSupported",
+    value: function isAnnotationSupported() {
+      return this._abilityProvider.isAnnotationSupported();
     }
   }, {
     key: "getToolbarStore",
     value: function getToolbarStore() {
       return this._toolbarStore;
     }
+  }, {
+    key: "currentTool",
+    get: function get() {
+      var _this$_toolbarStore2;
+      return (_this$_toolbarStore2 = this._toolbarStore) === null || _this$_toolbarStore2 === void 0 ? void 0 : _this$_toolbarStore2.observables.currentTool;
+    }
   }, {
     key: "setToolsShow",
     value: function setToolsShow() {
@@ -392,26 +440,17 @@ var AnnotationStore = exports.AnnotationStore = /*#__PURE__*/function () {
       if (this.allowAnnotationWriteState) {
         var currentFlag = this.isShowToolbar;
         this.isShowToolbar = !currentFlag;
-        if (this._toolbarStore) {
-          if (currentFlag) {
-            this._toolbarStore.disableToolbar();
-          } else {
-            this._toolbarStore.resumeToolbar();
-          }
-        }
       }
     }
   }, {
     key: "zoomIn",
     value: function zoomIn() {
       this._annotationProvider.zoomIn();
-      this.calcBoardPosition();
     }
   }, {
     key: "zoomOut",
     value: function zoomOut() {
       this._annotationProvider.zoomOut();
-      this.calcBoardPosition();
     }
   }, {
     key: "fullContainer",
@@ -426,37 +465,31 @@ var AnnotationStore = exports.AnnotationStore = /*#__PURE__*/function () {
           boardHeight = _getBoundingClientRec.height;
         var scalc = width / boardWidth;
         this._annotationProvider.fullContainer(scalc);
-        this.calcBoardPosition();
       }
     }
   }, {
     key: "setOriginScalc",
     value: function setOriginScalc() {
       this._annotationProvider.setOriginScalc();
-      this.calcBoardPosition();
     }
   }, {
-    key: "calcBoardPosition",
-    value: function calcBoardPosition() {
+    key: "drawReceiverBoard",
+    value: function drawReceiverBoard(paramRatio) {
       if (this._boardContainerDom && this._boardDom) {
-        var _this$_boardOriginWid;
         var _this$_boardContainer2 = this._boardContainerDom.getBoundingClientRect(),
-          width = _this$_boardContainer2.width,
           height = _this$_boardContainer2.height;
-        var computWidth = (_this$_boardOriginWid = this._boardOriginWidth) !== null && _this$_boardOriginWid !== void 0 ? _this$_boardOriginWid : width;
-        var newWidth = computWidth * 1;
-        var newHeight = height * 1;
+        var ratio = (0, _isNumber["default"])(paramRatio) ? paramRatio : this._memberDataSource.shareScreenVideoRatio;
+        var newWidth = height * ratio;
+        this._boardOriginWidth = newWidth;
         this._boardDom.style.width = "".concat(newWidth, "px");
-        this._boardDom.style.height = "".concat(newHeight, "px");
-        this._boardDom.style.marginLeft = "".concat((this._boardOriginWidth - newWidth) / 2, "px");
-        this._boardDom.style.marginTop = "".concat((height - newHeight) / 2, "px");
+        this._boardDom.style.height = "".concat(height, "px");
+        this.logger.info("[Annotation] [drawReceiverBoard] ratio: ".concat(ratio, ", width: ").concat(newWidth, " , height: ").concat(height));
       }
     }
   }, {
     key: "handleBoardDomLoad",
     value: function handleBoardDomLoad(ref) {
       this._boardDom = ref;
-      this.logger.info('handleBoardDomLoad: ', this._boardDom);
       if (this._boardDom) {
         var _this$_boardDom$getBo = this._boardDom.getBoundingClientRect(),
           height = _this$_boardDom$getBo.height;
@@ -478,13 +511,13 @@ var AnnotationStore = exports.AnnotationStore = /*#__PURE__*/function () {
     key: "screenSharingStarted",
     value: function screenSharingStarted() {
       this._currentShareInfo = this._annotationProvider.currentShareInfo;
-      this.logger.info("screenSharingStarting with currentShareInfo: ".concat(JSON.stringify(this._currentShareInfo)));
+      this.logger.info("[Annotation]: screenSharingStarting with currentShareInfo: ".concat(JSON.stringify(this._currentShareInfo)));
       this._annotationProvider.setBoundsToAnnotationWindow();
       (0, _rendererEvent.sendEvent)({
         action: _constant.FcrUIRendererEventAction.SET_ANNOTATION_TO_SHOW,
         payload: true
       });
-      this.logger.info('screenSharingStarted will add window resize listenner');
+      this.logger.info('[Annotation]: screenSharingStarted will add window resize listenner');
       this._addWindowResizeListenner();
     }
   }, {
@@ -498,19 +531,37 @@ var AnnotationStore = exports.AnnotationStore = /*#__PURE__*/function () {
       this._unmount();
       this._boardContainerObserver.disconnect();
     }
+  }, {
+    key: "_annotationEnded",
+    value: function _annotationEnded() {
+      var _this$_annotationProv, _this$_toolbarStore3;
+      this.logger.info('[Annotation]: annotation transaction end');
+      this._messageProvider.showToast({
+        message: (0, _i18n.transI18n)('fmt_screenshare_toast_annotation_controls_screen_sharing_disabled'),
+        type: 'info'
+      });
+      (_this$_annotationProv = this._annotationProvider.boardMainWindow) === null || _this$_annotationProv === void 0 || _this$_annotationProv.clean();
+      (_this$_toolbarStore3 = this._toolbarStore) === null || _this$_toolbarStore3 === void 0 || _this$_toolbarStore3.resetToolbarVars();
+      this.resetToolbarStore = false;
+      this._boardContainerObserver.disconnect();
+      this.isShowToolbar = false;
+      this._toolbarStore = undefined;
+      this._unmount();
+    }
   }, {
     key: "_mount",
     value: function _mount() {
       this.logger.info('annotation mount boardMainWindow: ', this._annotationProvider.boardMainWindow);
       this.logger.info('annotation mount boardDom: ', this._boardDom);
       if (this._annotationProvider.boardMainWindow && this._boardDom && !this._mounted) {
+        var _this$_toolbarStore4;
         this.logger.info('annotation mount start: ', this._boardDom);
         this._mounted = true;
         var view = this._annotationProvider.boardMainWindow.getContentView();
         this._boardDom.appendChild(view);
         this.logger.info('annotation mount boardMainWindow contentView append: ', view);
         this.logger.info('annotation mount success');
-        this.calcBoardPosition();
+        (_this$_toolbarStore4 = this._toolbarStore) === null || _this$_toolbarStore4 === void 0 || _this$_toolbarStore4.resetToolbarVars();
       }
     }
   }, {
@@ -537,53 +588,21 @@ var AnnotationStore = exports.AnnotationStore = /*#__PURE__*/function () {
     key: "_updateAnnotationBounds",
     value: function _updateAnnotationBounds(bounds) {
       if (bounds) this._currentShareInfo.bounds = bounds;
-      this.logger.info("updateAnnotationBounds ".concat(this._currentShareInfo));
+      this.logger.info("[Annotation][updateAnnotationBounds]: bounds: ".concat(JSON.stringify(bounds), ", currentShareInfo: ").concat(JSON.stringify(this._currentShareInfo)));
       (0, _rendererEvent.sendEvent)({
         action: _constant.FcrUIRendererEventAction.SET_CURRENT_SHARE_SCREEN_BOUNDS,
         payload: bounds || this._annotationProvider.currentShareInfo.bounds
       });
     }
 
-    // 使用 sdk 提供的获取窗口列表功能，但是此 api 性能很差，因为它会生成窗口的缩略图，延迟很高
-  }, {
-    key: "_pollActiveWindow",
-    value: function _pollActiveWindow() {
-      var _this2 = this;
-      requestIdleCallback(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-        var currentWindows, currentWindow;
-        return _regenerator["default"].wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return _this2._deviceProvider.getWindowList();
-            case 2:
-              currentWindows = _context.sent;
-              currentWindow = currentWindows.find(function (window) {
-                return window.id === _this2._currentShareInfo.id;
-              });
-              if (currentWindow && (currentWindow.bounds.width !== _this2._currentShareInfo.bounds.width || currentWindow.bounds.height !== _this2._currentShareInfo.bounds.height)) {
-                _this2._updateAnnotationBounds(currentWindow.bounds);
-                // this.logger.info('The window bounds is the different as the current share bounds');
-              } else {
-                // this.logger.info('The window bounds is the same as the current share bounds');
-              }
-              _this2._resizeWatcherTimer = setTimeout(_this2._pollActiveWindow, 200);
-            case 6:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      })));
-    }
-
     // 使用第三方 node-window-manager 提供的获取窗口列表功能
   }, {
     key: "_updateBoundsByActiveWindow",
     value: function _updateBoundsByActiveWindow() {
-      var _this3 = this;
+      var _this2 = this;
       var windows = window.runtime.getWindows();
       var activeWindow = windows.find(function (win) {
-        return win.id === +_this3._currentShareInfo.id;
+        return win.id === +_this2._currentShareInfo.id;
       });
       var _this$_currentShareIn = this._currentShareInfo,
         id = _this$_currentShareIn.id,
@@ -617,15 +636,14 @@ var AnnotationStore = exports.AnnotationStore = /*#__PURE__*/function () {
   }, {
     key: "_addWindowResizeListenner",
     value: function _addWindowResizeListenner() {
-      var _this4 = this;
+      var _this3 = this;
       var isDisplay = this._currentShareInfo.type === _type.AgoraRtcScreenCaptureType.SCREEN;
       this.logger.info("current sharing type is screen: ".concat(isDisplay, ", has watch resize timer: ").concat(!!this._resizeWatcherTimer));
       if (isDisplay) return;
       if (!this._resizeWatcherTimer) {
-        // this._pollSdkWindow();
         this._resizeWatcherTimer = setInterval(function () {
-          _this4.logger.info("addWindowResizeListenner interval ".concat(_this4._currentShareInfo));
-          _this4._updateBoundsByActiveWindow();
+          _this3.logger.info("addWindowResizeListenner interval ".concat(_this3._currentShareInfo));
+          _this3._updateBoundsByActiveWindow();
         }, 3000);
       }
     }
@@ -640,9 +658,8 @@ var AnnotationStore = exports.AnnotationStore = /*#__PURE__*/function () {
   }]);
 }();
 _AnnotationStore = AnnotationStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_AnnotationStore, [[_mobx.observable, 1, "annotationMainWindow"], [_mobx.observable, 1, "resetToolbarStore"], [_mobx.observable, 1, "isShowToolbar"], [_mobx.computed, 3, "scalcValue"], [_mobx.computed, 3, "annotating"], [_decorator.bound, 2, "getToolbarStore"], [_setToolsShowDecs, 18, "setToolsShow"], [_zoomInDecs, 18, "zoomIn"], [_zoomOutDecs, 18, "zoomOut"], [_fullContainerDecs, 18, "fullContainer"], [_setOriginScalcDecs, 18, "setOriginScalc"], [_calcBoardPositionDecs, 18, "calcBoardPosition"], [_handleBoardDomLoadDecs, 18, "handleBoardDomLoad"], [_handleBoardContainerDomLoadDecs, 18, "handleBoardContainerDomLoad"], [_decorator.bound, 2, "screenSharingStarted"], [_decorator.bound, 2, "release"], [_mountDecs, 18, "_mount"], [_unmountDecs, 18, "_unmount"], [_decorator.bound, 2, "_close"], [_decorator.bound, 2, "_updateAnnotationBounds"], [_decorator.bound, 2, "_pollActiveWindow"], [_decorator.bound, 2, "_updateBoundsByActiveWindow"], [_decorator.bound, 2, "_addWindowResizeListenner"], [_decorator.bound, 2, "_removeWindowResizeListenner"]], []).e, 4);
-_init_annotationMainWindow = _applyDecs$e[0];
-_init_resetToolbarStore = _applyDecs$e[1];
-_init_isShowToolbar = _applyDecs$e[2];
-_initProto = _applyDecs$e[3];
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_AnnotationStore, [[_mobx.observable, 1, "resetToolbarStore"], [_mobx.observable, 1, "isShowToolbar"], [_mobx.computed, 3, "scalcValue"], [_mobx.computed, 3, "annotating"], [_decorator.bound, 2, "isAnnotationSupported"], [_decorator.bound, 2, "getToolbarStore"], [_setToolsShowDecs, 18, "setToolsShow"], [_zoomInDecs, 18, "zoomIn"], [_zoomOutDecs, 18, "zoomOut"], [_fullContainerDecs, 18, "fullContainer"], [_setOriginScalcDecs, 18, "setOriginScalc"], [_drawReceiverBoardDecs, 18, "drawReceiverBoard"], [_handleBoardDomLoadDecs, 18, "handleBoardDomLoad"], [_handleBoardContainerDomLoadDecs, 18, "handleBoardContainerDomLoad"], [_decorator.bound, 2, "screenSharingStarted"], [_decorator.bound, 2, "release"], [_annotationEndedDecs, 18, "_annotationEnded"], [_mountDecs, 18, "_mount"], [_unmountDecs, 18, "_unmount"], [_decorator.bound, 2, "_close"], [_decorator.bound, 2, "_updateAnnotationBounds"], [_decorator.bound, 2, "_updateBoundsByActiveWindow"], [_decorator.bound, 2, "_addWindowResizeListenner"], [_decorator.bound, 2, "_removeWindowResizeListenner"]], []).e, 3);
+_init_resetToolbarStore = _applyDecs$e[0];
+_init_isShowToolbar = _applyDecs$e[1];
+_initProto = _applyDecs$e[2];
 var AnnotationStoreContext = exports.AnnotationStoreContext = /*#__PURE__*/(0, _react.createContext)({});