fcr-ui-scene 3.6.2 → 3.6.3

package/lib/fragments/annotation/store.js

@@ -61,6 +61,7 @@ require("core-js/modules/esnext.json.parse.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.iterator.js");
+require("core-js/modules/web.timers.js");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -81,7 +82,7 @@ var _asyncRetry = require("agora-foundation/lib/utilities/async-retry");
 var _logger = require("../../utilities/logger");
 var _platform = require("../../utilities/platform");
 var _AnnotationStore;
-var _initProto, _init_joined, _init_bounds, _handleBoardDomLoadDecs, _closeDecs, _ref;
+var _initProto, _init_joined, _init_bounds, _init_currentTool, _handleBoardDomLoadDecs, _closeDecs, _handleSetToolDecs, _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 _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
@@ -96,7 +97,8 @@ 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();
-_ref = (_handleBoardDomLoadDecs = [_mobx.action, _mobx.action.bound], _closeDecs = [_mobx.action, _mobx.action.bound], "logger");
+var _C = /*#__PURE__*/new WeakMap();
+_ref = (_handleBoardDomLoadDecs = [_mobx.action, _mobx.action.bound], _closeDecs = [_mobx.action, _mobx.action.bound], _handleSetToolDecs = [(0, _decorator.debounced)(300), _decorator.bound], "logger");
 var AnnotationStore = /*#__PURE__*/function () {
   function AnnotationStore() {
     (0, _classCallCheck2["default"])(this, AnnotationStore);
@@ -115,10 +117,12 @@ var AnnotationStore = /*#__PURE__*/function () {
       width: 800,
       height: 600
     }));
+    _classPrivateFieldInitSpec(this, _C, _init_currentTool(this, 'none'));
+    (0, _defineProperty2["default"])(this, "timer", null);
     var annotationRtmAppId = localStorage.getItem('annotation_rtm_app_id') || '';
     var boardOptions = localStorage.getItem('board_options');
     var appId = JSON.parse(annotationRtmAppId);
-    this.logger.info("'annotationRtmAppId =>', ".concat(appId));
+    this.logger.info("annotationRtmAppId => ".concat(appId));
     var _JSON$parse = JSON.parse(boardOptions || '{}'),
       boardAppId = _JSON$parse.boardAppId,
       boardId = _JSON$parse.boardId,
@@ -134,7 +138,7 @@ var AnnotationStore = /*#__PURE__*/function () {
       boardId: boardId,
       boardToken: boardToken
     };
-    this.logger.info("'boardinfo =>', ".concat(JSON.stringify(this._config)));
+    this.logger.info("boardinfo => ".concat(JSON.stringify(this._config)));
     this._init(this._initEngine({
       userId: userId,
       roomToken: boardUserToken,
@@ -157,57 +161,66 @@ var AnnotationStore = /*#__PURE__*/function () {
     set: function set(v) {
       _classPrivateFieldSet(_B, this, v);
     }
+  }, {
+    key: "currentTool",
+    get: function get() {
+      return _classPrivateFieldGet(_C, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_C, this, v);
+    }
   }, {
     key: "open",
     value: function () {
       var _open = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-        var _this = this;
-        var whiteboard, _this$_boardDom;
+        var visible, whiteboard, _this$_boardDom;
         return _regenerator["default"].wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              this.logger.info("'open method is called, the init bounds is =>', ".concat(JSON.stringify(this.bounds)));
+              this.logger.info("[annotation][open]: open method is called, the init bounds is =>, ".concat(JSON.stringify(this.bounds)));
+              this.currentTool = 'curve';
               window.runtime.browserWindow.setAlwaysOnTop(true, 'pop-up-menu');
               (0, _platform.isWindows)() && window.runtime.browserWindow.blur();
               this.setIgnore(true);
-              this.logger.info("'the annotation window visible is =>',\n      ".concat(window.runtime.browserWindow.isVisible()));
+              visible = window.runtime.browserWindow.isVisible();
+              this.logger.info("[annotation][open]: the annotation window visible is =>\n      ".concat(visible, ", open process is ").concat(visible ? 'return' : 'continue...'));
               if (!window.runtime.browserWindow.isVisible()) {
-                _context.next = 7;
+                _context.next = 9;
                 break;
               }
               return _context.abrupt("return");
-            case 7:
+            case 9:
               if (this._engine) {
-                _context.next = 12;
+                _context.next = 14;
                 break;
               }
-              this.logger.info('this._engine is null');
+              this.logger.info('[annotation][open]: this._engine is null');
               return _context.abrupt("return");
-            case 12:
-              this.logger.info('this._engine is not null, show annotation window');
-              window.runtime.browserWindow.show();
             case 14:
-              this.logger.info("'this._joined', ".concat(this.joined, ", ").concat(this._engine));
+              this.logger.info('[annotation][open]: this._engine is initialized, show annotation window');
+              window.runtime.browserWindow.show();
+            case 16:
+              this.logger.info("[annotation][open]: this._joined ".concat(this.joined));
               if (!this.joined) {
-                _context.next = 17;
+                _context.next = 19;
                 break;
               }
               return _context.abrupt("return");
-            case 17:
+            case 19:
               if (this._boardRoom) {
-                _context.next = 20;
+                _context.next = 22;
                 break;
               }
-              _context.next = 20;
+              _context.next = 22;
               return this._initBoardRoom();
-            case 20:
+            case 22:
               if (this._boardRoom) {
-                _context.next = 22;
+                _context.next = 24;
                 break;
               }
-              return _context.abrupt("return", this.logger.error("'this._boardRoom is not initialized', ".concat(this._boardRoom)));
-            case 22:
-              _context.next = 24;
+              return _context.abrupt("return", this.logger.error("[annotation][open]: this._boardRoom is not initialized, ".concat(this._boardRoom)));
+            case 24:
+              _context.next = 26;
               return this._boardRoom.applicationManager.launchApplication(_forgeWhiteboard.WhiteboardApplication, {
                 width: this.bounds.width,
                 height: this.bounds.height,
@@ -217,31 +230,21 @@ var AnnotationStore = /*#__PURE__*/function () {
                   strokeWidth: 2
                 }
               }, this._FORGE_WHITEBOARD_APP_ID);
-            case 24:
+            case 26:
               whiteboard = _context.sent;
+              this.logger.info("[annotation][open]: whiteboard launch success");
               if (whiteboard) {
                 this._boardView.classList.add('fcr-whiteboard-window-view');
                 this._boardView.appendChild(whiteboard.view);
                 (_this$_boardDom = this._boardDom) === null || _this$_boardDom === void 0 || _this$_boardDom.appendChild(this._boardView);
-                this._setBoardInstance(whiteboard);
+                this._boardInstance = whiteboard;
+                this._initBoardStyle(whiteboard);
                 this.joined = true;
+                this.logger.info("[annotation][open]: mount success, the joined is ".concat(this.joined));
               }
-              this._boardRoom.applicationManager.on('launch', function (appId, app) {
-                if (appId === _this._FORGE_WHITEBOARD_APP_ID) {
-                  var _this$_boardView;
-                  _this.logger.info('launch event is triggered');
-                  app.view && ((_this$_boardView = _this._boardView) === null || _this$_boardView === void 0 ? void 0 : _this$_boardView.appendChild(app.view));
-                  _this._setBoardInstance(app);
-                }
-              });
-              this._boardRoom.applicationManager.on('terminal', function (appId, app) {
-                if (appId === _this._FORGE_WHITEBOARD_APP_ID) {
-                  var _this$_boardView2;
-                  _this.logger.info('terminal event is triggered');
-                  app.view && _this._boardView.hasChildNodes() && ((_this$_boardView2 = _this._boardView) === null || _this$_boardView2 === void 0 ? void 0 : _this$_boardView2.removeChild(app.view));
-                }
-              });
-            case 28:
+              this._boardRoom.applicationManager.on('launch', this._launchHandler);
+              this._boardRoom.applicationManager.on('terminal', this._terminalHandler);
+            case 31:
             case "end":
               return _context.stop();
           }
@@ -259,35 +262,60 @@ var AnnotationStore = /*#__PURE__*/function () {
     }
   }, {
     key: "close",
-    value: function close() {
-      var _this$_boardInstance, _this$_boardRoom;
-      this.joined = false;
-      this._boardView.removeChild((_this$_boardInstance = this._boardInstance) === null || _this$_boardInstance === void 0 ? void 0 : _this$_boardInstance.view);
-      (_this$_boardRoom = this._boardRoom) === null || _this$_boardRoom === void 0 || _this$_boardRoom.applicationManager.terminateApplication(this._FORGE_WHITEBOARD_APP_ID);
-      this._boardInstance = null;
-      window.runtime.browserWindow.hide();
-    }
+    value: function () {
+      var _close = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+        var _this$_boardInstance, _this$_boardInstance2, _this$_boardInstance3, _this$_boardRoom, _this$_boardRoom2, _this$_boardRoom3, _this$_boardRoom4;
+        return _regenerator["default"].wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              this.joined = false;
+              this.currentTool = 'curve';
+              (_this$_boardInstance = this._boardInstance) === null || _this$_boardInstance === void 0 || _this$_boardInstance.clearPage();
+              ((_this$_boardInstance2 = this._boardInstance) === null || _this$_boardInstance2 === void 0 ? void 0 : _this$_boardInstance2.view) && this._boardView.removeChild((_this$_boardInstance3 = this._boardInstance) === null || _this$_boardInstance3 === void 0 ? void 0 : _this$_boardInstance3.view);
+              (_this$_boardRoom = this._boardRoom) === null || _this$_boardRoom === void 0 || _this$_boardRoom.applicationManager.removeListener('launch', this._launchHandler);
+              (_this$_boardRoom2 = this._boardRoom) === null || _this$_boardRoom2 === void 0 || _this$_boardRoom2.applicationManager.removeListener('terminal', this._terminalHandler);
+              (_this$_boardRoom3 = this._boardRoom) === null || _this$_boardRoom3 === void 0 || _this$_boardRoom3.applicationManager.terminateApplication(this._FORGE_WHITEBOARD_APP_ID);
+              _context2.next = 9;
+              return (_this$_boardRoom4 = this._boardRoom) === null || _this$_boardRoom4 === void 0 ? void 0 : _this$_boardRoom4.leaveRoom();
+            case 9:
+              this._boardRoom = null;
+              this._boardInstance = null;
+              window.runtime.browserWindow.hide();
+              this.logger.info('[annotation][open]: close annotation window');
+            case 13:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function close() {
+        return _close.apply(this, arguments);
+      }
+      return close;
+    }()
   }, {
     key: "setBounds",
     value: function setBounds(bounds) {
       this.bounds = bounds;
-      this.logger.info("'bounds is changed =>', ".concat(JSON.stringify(bounds)));
+      this.logger.info("[annotation][setBounds]: bounds is changed =>, ".concat(JSON.stringify(bounds)));
       window.runtime.browserWindow.setBounds(bounds);
     }
   }, {
     key: "setIgnore",
     value: function setIgnore(ignore) {
+      this.logger.info("[annotation][setIgnore]: setIgnore method is called, the ignore is => ".concat(ignore));
       window.runtime.browserWindow.setIgnoreMouseEvents(ignore);
     }
   }, {
     key: "toolChanged",
     value: function toolChanged(event) {
       if (!this._boardInstance) return;
+      this.logger.info("[annotation][toolChanged]: toolChanged method is called, the event is => ".concat(JSON.stringify(event)));
       var board = this._boardInstance;
       var payload = event.payload;
       switch (event.action) {
         case _type.ToolbarEvents.SET_TOOL:
-          board.setCurrentTool((0, _libs.convertTool)(payload));
+          this._handleSetTool(payload);
           break;
         case _type.ToolbarEvents.SET_STROKE_COLOR:
           board.strokeColor = payload;
@@ -316,8 +344,8 @@ var AnnotationStore = /*#__PURE__*/function () {
       }
     }
   }, {
-    key: "_setBoardInstance",
-    value: function _setBoardInstance(whiteboard) {
+    key: "_initBoardStyle",
+    value: function _initBoardStyle(whiteboard) {
       var _this$_boardDom2, _this$_boardDom3;
       var frameWidth = (_this$_boardDom2 = this._boardDom) === null || _this$_boardDom2 === void 0 ? void 0 : _this$_boardDom2.offsetWidth;
       var frameHeight = (_this$_boardDom3 = this._boardDom) === null || _this$_boardDom3 === void 0 ? void 0 : _this$_boardDom3.offsetHeight;
@@ -325,7 +353,6 @@ var AnnotationStore = /*#__PURE__*/function () {
       this._boardView.style.height = "".concat(frameHeight, "px");
       whiteboard.view.style.height = "".concat(frameHeight, "px");
       whiteboard.view.style.width = "".concat(frameWidth, "px");
-      this._boardInstance = whiteboard;
       whiteboard.setCanvasBackgroundColor('rgba(0, 0, 0, 0)');
       whiteboard.enableCameraByMouse = false;
       whiteboard.enableCameraByTouch = false;
@@ -348,30 +375,59 @@ var AnnotationStore = /*#__PURE__*/function () {
         });
       });
     }
+  }, {
+    key: "_handleSetTool",
+    value: function _handleSetTool(payload) {
+      var _this = this;
+      var board = this._boardInstance;
+      this.currentTool = 'none';
+      var currentTool = (0, _libs.convertTool)(payload);
+      if (board) {
+        board.setCurrentTool(currentTool);
+        var timber = setTimeout(function () {
+          var _this$_boardDom4;
+          (_this$_boardDom4 = _this._boardDom) === null || _this$_boardDom4 === void 0 || _this$_boardDom4.getBoundingClientRect();
+          _this.currentTool = currentTool;
+          clearTimeout(timber);
+        }, 600);
+      }
+    }
   }, {
     key: "_init",
     value: function () {
-      var _init2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(engine) {
+      var _init2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3(engine) {
         var _this2 = this;
-        return _regenerator["default"].wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
+        return _regenerator["default"].wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
               engine.login();
               engine.addObserver({
                 onConnectionStateUpdated: function onConnectionStateUpdated(state) {
                   if (state === _fcrCore.FcrConnectionState.CONNECTED) {
                     _this2._engine = engine;
+                    _this2.logger.info("[annotation][initEngine]: engine connection state updated => CONNECTED");
                   }
                   if (state === _fcrCore.FcrConnectionState.DISCONNECTED) {
+                    _this2.logger.info("[annotation][initEngine]: engine connection state updated => DISCONNECTED, the engine is ".concat(_this2._engine));
+                    !_this2._engine && engine.login();
+                  }
+                  if (state === _fcrCore.FcrConnectionState.CONNECTING) {
+                    _this2.logger.info("[annotation][initEngine]: engine connection state updated => CONNECTING");
+                  }
+                  if (state === _fcrCore.FcrConnectionState.RECONNECTING) {
+                    _this2.logger.info("[annotation][initEngine]: engine connection state updated => RECONNECTING");
+                  }
+                  if (state === _fcrCore.FcrConnectionState.ABORTED) {
+                    _this2.logger.info("[annotation][initEngine]: engine connection state updated => ABORTED, the engine is ".concat(_this2._engine));
                     !_this2._engine && engine.login();
                   }
                 }
               });
             case 2:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
-        }, _callee2);
+        }, _callee3);
       }));
       function _init(_x) {
         return _init2.apply(this, arguments);
@@ -381,30 +437,30 @@ var AnnotationStore = /*#__PURE__*/function () {
   }, {
     key: "_initBoardRoom",
     value: function () {
-      var _initBoardRoom2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+      var _initBoardRoom2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee6() {
         var _this3 = this;
         var _this$_config, userId, boardToken, region, appIdentifier, boardId, nickName, rtmClient, rtmProvider, wbRoom, retriesMax;
-        return _regenerator["default"].wrap(function _callee5$(_context5) {
-          while (1) switch (_context5.prev = _context5.next) {
+        return _regenerator["default"].wrap(function _callee6$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
             case 0:
               _this$_config = this._config, userId = _this$_config.userId, boardToken = _this$_config.boardToken, region = _this$_config.region, appIdentifier = _this$_config.appIdentifier, boardId = _this$_config.boardId;
               nickName = localStorage.getItem('annotation_nickname') || '';
-              this.logger.info("'board room info =>', ".concat(JSON.stringify(this._config), " - ").concat(nickName));
+              this.logger.info("[annotation][initBoardRoom]: start init board room with config => ".concat(JSON.stringify(this._config), " - ").concat(nickName));
               // @ts-ignore
               rtmClient = this._engine._rteEngine._rtmClient._client;
               rtmProvider = new _forgeRtm.RTMProvider_2_2(rtmClient);
               wbRoom = new _forgeRoom.Room(boardId, rtmProvider);
               this._boardRoom = wbRoom;
               wbRoom.applicationManager.registerApplication(_forgeWhiteboard.WhiteboardApplication);
-              this.logger.info("'start join whiteboard room'");
-              _context5.prev = 9;
+              this.logger.info("[annotation][initBoardRoom]: bordRoom instance is created, start join room");
+              _context6.prev = 9;
               retriesMax = 10;
-              _context5.next = 13;
-              return (0, _asyncRetry.retryAttempt)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
-                return _regenerator["default"].wrap(function _callee3$(_context3) {
-                  while (1) switch (_context3.prev = _context3.next) {
+              _context6.next = 13;
+              return (0, _asyncRetry.retryAttempt)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+                return _regenerator["default"].wrap(function _callee4$(_context4) {
+                  while (1) switch (_context4.prev = _context4.next) {
                     case 0:
-                      _context3.next = 2;
+                      _context4.next = 2;
                       return wbRoom.joinRoom({
                         userId: userId,
                         nickName: nickName,
@@ -416,45 +472,48 @@ var AnnotationStore = /*#__PURE__*/function () {
                         }
                       });
                     case 2:
+                      _this3.logger.info("[annotation][initBoardRoom]: join room success");
+                    case 3:
                     case "end":
-                      return _context3.stop();
+                      return _context4.stop();
                   }
-                }, _callee3);
+                }, _callee4);
               })), [], {
                 retriesMax: retriesMax
               }).fail(/*#__PURE__*/function () {
-                var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4(_ref3) {
+                var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5(_ref3) {
                   var error, timeFn, currentRetry;
-                  return _regenerator["default"].wrap(function _callee4$(_context4) {
-                    while (1) switch (_context4.prev = _context4.next) {
+                  return _regenerator["default"].wrap(function _callee5$(_context5) {
+                    while (1) switch (_context5.prev = _context5.next) {
                       case 0:
                         error = _ref3.error, timeFn = _ref3.timeFn, currentRetry = _ref3.currentRetry;
-                        _this3.logger.info("retry to join board room, ".concat(error.message, ", retry ").concat(currentRetry, " times"));
-                        _context4.next = 4;
+                        _this3.logger.info("[annotation][initBoardRoom]: retry to join board room, ".concat(error.message, ", retry ").concat(currentRetry, " times"));
+                        _context5.next = 4;
                         return timeFn();
                       case 4:
-                        return _context4.abrupt("return", true);
+                        return _context5.abrupt("return", true);
                       case 5:
                       case "end":
-                        return _context4.stop();
+                        return _context5.stop();
                     }
-                  }, _callee4);
+                  }, _callee5);
                 }));
                 return function (_x2) {
                   return _ref4.apply(this, arguments);
                 };
               }()).exec();
             case 13:
-              _context5.next = 17;
+              _context6.next = 18;
               break;
             case 15:
-              _context5.prev = 15;
-              _context5.t0 = _context5["catch"](9);
-            case 17:
+              _context6.prev = 15;
+              _context6.t0 = _context6["catch"](9);
+              this.logger.error("[annotation][initBoardRoom]: join room failed");
+            case 18:
             case "end":
-              return _context5.stop();
+              return _context6.stop();
           }
-        }, _callee5, this, [[9, 15]]);
+        }, _callee6, this, [[9, 15]]);
       }));
       function _initBoardRoom() {
         return _initBoardRoom2.apply(this, arguments);
@@ -467,6 +526,7 @@ var AnnotationStore = /*#__PURE__*/function () {
       var userId = config.userId,
         token = config.roomToken,
         appId = config.appId;
+      this.logger.info("[annotation][initEngine]: init engine with config => ".concat(JSON.stringify(config)));
       return new _fcrCore.FcrCoreEngine(_objectSpread({
         appId: appId,
         token: token,
@@ -474,12 +534,32 @@ var AnnotationStore = /*#__PURE__*/function () {
         region: _fcrCore.FcrRegion.CN
       }, _libs.engineRestConfig));
     }
+  }, {
+    key: "_launchHandler",
+    value: function _launchHandler(appId, app) {
+      if (appId === this._FORGE_WHITEBOARD_APP_ID) {
+        var _this$_boardView;
+        this.logger.info("[annotation][event]: launch event is triggered => ".concat(app.selfUserId));
+        app.view && ((_this$_boardView = this._boardView) === null || _this$_boardView === void 0 ? void 0 : _this$_boardView.appendChild(app.view));
+        this._initBoardStyle(app);
+      }
+    }
+  }, {
+    key: "_terminalHandler",
+    value: function _terminalHandler(appId, app) {
+      if (appId === this._FORGE_WHITEBOARD_APP_ID) {
+        var _this$_boardView2;
+        this.logger.info("[annotation][event]: terminal event is triggered => ".concat(app.selfUserId));
+        app.view && this._boardView.hasChildNodes() && ((_this$_boardView2 = this._boardView) === null || _this$_boardView2 === void 0 ? void 0 : _this$_boardView2.removeChild(app.view));
+      }
+    }
   }]);
 }();
 _AnnotationStore = AnnotationStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_AnnotationStore, [[_mobx.observable, 1, "joined"], [_mobx.observable, 1, "bounds"], [_decorator.bound, 2, "open"], [_handleBoardDomLoadDecs, 18, "handleBoardDomLoad"], [_closeDecs, 18, "close"], [_decorator.bound, 2, "setIgnore"], [_decorator.bound, 2, "toolChanged"], [_decorator.bound, 2, "_setBoardInstance"], [_decorator.bound, 2, "_init"], [_decorator.bound, 2, "_initBoardRoom"]], []).e, 3);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_AnnotationStore, [[_mobx.observable, 1, "joined"], [_mobx.observable, 1, "bounds"], [_mobx.observable, 1, "currentTool"], [_decorator.bound, 2, "open"], [_handleBoardDomLoadDecs, 18, "handleBoardDomLoad"], [_closeDecs, 18, "close"], [_decorator.bound, 2, "setIgnore"], [_decorator.bound, 2, "toolChanged"], [_decorator.bound, 2, "_initBoardStyle"], [_handleSetToolDecs, 2, "_handleSetTool"], [_decorator.bound, 2, "_init"], [_decorator.bound, 2, "_initBoardRoom"], [_decorator.bound, 2, "_launchHandler"], [_decorator.bound, 2, "_terminalHandler"]], []).e, 4);
 _init_joined = _applyDecs$e[0];
 _init_bounds = _applyDecs$e[1];
-_initProto = _applyDecs$e[2];
+_init_currentTool = _applyDecs$e[2];
+_initProto = _applyDecs$e[3];
 var _default = exports["default"] = AnnotationStore;
 var AnnotationStoreContext = exports.AnnotationStoreContext = /*#__PURE__*/(0, _react.createContext)(null);

package/lib/fragments/annotation/view.d.ts

@@ -1,2 +1,3 @@
+import '../../modules/annotation/board-cursor.css';
 declare const View: () => import("react/jsx-runtime").JSX.Element;
 export default View;

package/lib/fragments/annotation/view.js

@@ -1,6 +1,7 @@
 "use strict";
 
 require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,16 +9,23 @@ exports["default"] = void 0;
 var _mobxReact = require("mobx-react");
 var _react = require("react");
 var _store = require("./store");
+require("../../modules/annotation/board-cursor.css");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
 var View = (0, _mobxReact.observer)(function () {
-  var store = (0, _react.useContext)(_store.AnnotationStoreContext);
+  var _useContext = (0, _react.useContext)(_store.AnnotationStoreContext),
+    handleBoardDomLoad = _useContext.handleBoardDomLoad,
+    currentTool = _useContext.currentTool;
+  var cursorClassname = "board-widget-cursor-".concat(currentTool);
+  var boardWidgetAppCls = (0, _classnames["default"])('board-widget-app', cursorClassname.toLowerCase());
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: boardWidgetAppCls,
     style: {
       width: '100vw',
       height: '100vh',
       overflow: 'hidden'
     },
-    ref: store.handleBoardDomLoad
+    ref: handleBoardDomLoad
   });
 });
 var _default = exports["default"] = View;

package/lib/modules/action-bar/index.css

@@ -151,6 +151,10 @@ html {
   font-size: 12px;
   line-height: 12px;
   padding: 0 8px;
+  max-width: 100px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .fcr-action-bar-item-text span {

package/lib/modules/action-bar/store.d.ts

@@ -48,8 +48,6 @@ export default class ActionBarStore {
     private _disposers;
     private _waitingRoomControl?;
     private _userControl;
-    private _streamControl;
-    private _screenVideoTrack;
     private _sharedLayoutDataSource;
     private _sharedChatDataSource;
     private _interpreterProvider?;
@@ -64,11 +62,9 @@ export default class ActionBarStore {
     private _roomObserver;
     private _mainRoomObserver;
     private _uiEventObserver;
-    private _screenObserver;
     private _openedDialogIdMap;
     private _newMessageTooltipTimer;
     private _hideBarArrowTimer;
-    private _streamObserver;
     private _interpreterProviderObserver;
     accessor newMessageTooltipVisible: boolean;
     accessor totalWaitingRoomUser: number;
@@ -78,7 +74,6 @@ export default class ActionBarStore {
     accessor connectionSettingVisible: boolean;
     accessor folded: boolean;
     accessor boardOwnerUser: FcrUserInfo | null;
-    accessor hasScreenShare: boolean;
     accessor showArrow: boolean;
     accessor phoneMicEnabled: boolean;
     accessor chatTabIndex: FcrUIRoomType;
@@ -149,6 +144,7 @@ export default class ActionBarStore {
     get hasEnableStartSharePermission(): boolean;
     get hasAllowWriteBoardPermission(): boolean;
     get hasCloseWriteBoardPermission(): boolean;
+    get hasScreenShare(): boolean;
     get hasAllowScreenShareAndBoardPermission(): boolean;
     get hasAllowChatPermission(): boolean;
     get hasStartCloudRecordingPermission(): boolean;
@@ -232,14 +228,12 @@ export default class ActionBarStore {
     private _handleRemoteUsersLeft;
     private _handleLiveStreamingStateUpdated;
     private _handleChatVisible;
-    private _handlerTraceScreenCaptureStateUpdate;
     setAllowWaterMark(): void;
     setWaterMarkLineType(lineType: FcrLineType): void;
     setAlllowChangeName(enable: boolean): void;
     private _onEvent;
     private _operateWaitingRoom;
     private _handleCloudRecordingStateUpdated;
-    private _handleStreamsAddedOrUpdated;
     setOutputLanguage(language: FcrLanguage): Promise<void>;
     subscribeLanguage(language: FcrUILanguage): Promise<void>;
     subscribeExtraOriginLanguage(enable: boolean): Promise<void>;