fcr-ui-scene 3.6.2 → 3.6.4

package/lib/modules/whiteboard/components/toolbar/store.js

@@ -5,7 +5,6 @@ require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.symbol.to-primitive.js");
 require("core-js/modules/es.array.is-array.js");
 require("core-js/modules/es.date.to-primitive.js");
-require("core-js/modules/es.function.bind.js");
 require("core-js/modules/es.function.name.js");
 require("core-js/modules/es.map.js");
 require("core-js/modules/es.number.constructor.js");
@@ -40,6 +39,7 @@ require("core-js/modules/es.error.to-string.js");
 require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.iterator.js");
 require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.function.bind.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.string.iterator.js");
 require("core-js/modules/es.weak-map.js");
@@ -62,8 +62,9 @@ var _decorator = require("agora-foundation/lib/decorator");
 var _imports = require("fcr-core/lib/imports");
 var _utils = require("../../utils");
 var _dayjs = _interopRequireDefault(require("dayjs"));
+var _constant = require("../../../../utilities/constant");
 var _ToolbarStore;
-var _initProto, _init_observables, _disableToolbarDecs, _resumeToolbarDecs, _redoDecs, _undoDecs, _cleanDecs, _setToolDecs, _setPenDecs, _setShapeDecs, _setStrokeColorDecs, _setStrokeWidthDecs, _clickExpansionToolDecs, _setToolbarPositionDecs, _dragToolbarDecs, _releaseToolbarDecs, _captureScreenDecs, _saveDraftDecs, _setThemeDecs, _setCommonColorDecs, _repositionToolbarDecs, _getSnapshotImageDecs, _ref;
+var _initProto, _init_observables, _resetToolbarVarsDecs, _redoDecs, _undoDecs, _cleanDecs, _setToolDecs, _setPenDecs, _setShapeDecs, _setStrokeColorDecs, _setStrokeWidthDecs, _clickExpansionToolDecs, _setToolbarPositionDecs, _dragToolbarDecs, _releaseToolbarDecs, _captureScreenDecs, _saveDraftDecs, _setThemeDecs, _setCommonColorDecs, _repositionToolbarDecs, _getSnapshotImageDecs, _ref;
 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; }
@@ -76,9 +77,9 @@ 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 colors = ['#EFEFEF', '#FFEC42', '#FFB545', '#E44A19', '#4A4C5F', '#A1C573', '#51BD69', '#EB47A2', '#0E0E0E', '#50E3C2', '#547AFF', '#79479F'];
 var _A = /*#__PURE__*/new WeakMap();
-_ref = (_disableToolbarDecs = [_mobx.action, _mobx.action.bound], _resumeToolbarDecs = [_mobx.action, _mobx.action.bound], _redoDecs = [_mobx.action, _mobx.action.bound], _undoDecs = [_mobx.action, _mobx.action.bound], _cleanDecs = [_mobx.action, _mobx.action.bound], _setToolDecs = [_mobx.action, _mobx.action.bound], _setPenDecs = [_mobx.action, _mobx.action.bound], _setShapeDecs = [_mobx.action, _mobx.action.bound], _setStrokeColorDecs = [_mobx.action, _mobx.action.bound], _setStrokeWidthDecs = [_mobx.action, _mobx.action.bound], _clickExpansionToolDecs = [_mobx.action, _mobx.action.bound], _setToolbarPositionDecs = [_mobx.action, _mobx.action.bound], _dragToolbarDecs = [_mobx.action, _mobx.action.bound], _releaseToolbarDecs = [_mobx.action, _mobx.action.bound], _captureScreenDecs = [_mobx.action, _mobx.action.bound], _saveDraftDecs = [_mobx.action, _mobx.action.bound], _setThemeDecs = [_mobx.action, _mobx.action.bound], _setCommonColorDecs = [_mobx.action, _mobx.action.bound], _repositionToolbarDecs = [_mobx.action, _mobx.action.bound], _getSnapshotImageDecs = [_mobx.action, _mobx.action.bound], "_boardMainWindow");
+_ref = (_resetToolbarVarsDecs = [_mobx.action, _mobx.action.bound], _redoDecs = [_mobx.action, _mobx.action.bound], _undoDecs = [_mobx.action, _mobx.action.bound], _cleanDecs = [_mobx.action, _mobx.action.bound], _setToolDecs = [_mobx.action, _mobx.action.bound], _setPenDecs = [_mobx.action, _mobx.action.bound], _setShapeDecs = [_mobx.action, _mobx.action.bound], _setStrokeColorDecs = [_mobx.action, _mobx.action.bound], _setStrokeWidthDecs = [_mobx.action, _mobx.action.bound], _clickExpansionToolDecs = [_mobx.action, _mobx.action.bound], _setToolbarPositionDecs = [_mobx.action, _mobx.action.bound], _dragToolbarDecs = [_mobx.action, _mobx.action.bound], _releaseToolbarDecs = [_mobx.action, _mobx.action.bound], _captureScreenDecs = [_mobx.action, _mobx.action.bound], _saveDraftDecs = [_mobx.action, _mobx.action.bound], _setThemeDecs = [_mobx.action, _mobx.action.bound], _setCommonColorDecs = [_mobx.action, _mobx.action.bound], _repositionToolbarDecs = [_mobx.action, _mobx.action.bound], _getSnapshotImageDecs = [_mobx.action, _mobx.action.bound], "_boardMainWindow");
 var ToolbarStore = exports.ToolbarStore = /*#__PURE__*/function () {
-  function ToolbarStore(_whiteboardControl, _roomControl, _annotationProvider) {
+  function ToolbarStore(_whiteboardControl, _roomControl, _annotationProvider, _eventProvider) {
     var _this = this;
     (0, _classCallCheck2["default"])(this, ToolbarStore);
     (0, _defineProperty2["default"])(this, _ref, (_initProto(this), undefined));
@@ -91,8 +92,20 @@ var ToolbarStore = exports.ToolbarStore = /*#__PURE__*/function () {
         _this.observables.undoSteps = enable;
       }
     });
+    (0, _defineProperty2["default"])(this, "_whiteboardObserver", {
+      onConnectionStateUpdated: function onConnectionStateUpdated(state) {
+        if (state === _imports.AgoraRteConnectionState.CONNECTED && _this._whiteboardControl) {
+          _this._boardMainWindow = _this._whiteboardControl.getMainWindow();
+          _this._lastStrokeWidth = 0;
+          _this.boardMainWindow.addObserver(_this._boardObserver);
+        }
+      }
+    });
+    (0, _defineProperty2["default"])(this, "_uiEventObserver", {
+      onEvent: this._onUiEvent.bind(this)
+    });
     _classPrivateFieldInitSpec(this, _A, _init_observables(this, {
-      currentTool: undefined,
+      currentTool: _enums.FcrBoardToolType.CURVE,
       currentShape: undefined,
       currentColor: colors[2],
       currentStrokeWidth: 2,
@@ -122,15 +135,9 @@ var ToolbarStore = exports.ToolbarStore = /*#__PURE__*/function () {
     this._whiteboardControl = _whiteboardControl;
     this._roomControl = _roomControl;
     this._annotationProvider = _annotationProvider;
-    this._whiteboardControl.addObserver({
-      onConnectionStateUpdated: function onConnectionStateUpdated(state) {
-        if (state === _imports.AgoraRteConnectionState.CONNECTED) {
-          _this._boardMainWindow = _this._whiteboardControl.getMainWindow();
-          _this._lastStrokeWidth = 0;
-          _this._boardMainWindow.addObserver(_this._boardObserver);
-        }
-      }
-    });
+    this._eventProvider = _eventProvider;
+    this._whiteboardControl.addObserver(this._whiteboardObserver);
+    this._eventProvider.addObserver(this._uiEventObserver);
   }
   return (0, _createClass2["default"])(ToolbarStore, [{
     key: "observables",
@@ -155,19 +162,37 @@ var ToolbarStore = exports.ToolbarStore = /*#__PURE__*/function () {
       }
     }
   }, {
-    key: "disableToolbar",
-    value: function disableToolbar() {
-      this._lastStrokeWidth = this.observables.currentStrokeWidth;
-      this.boardMainWindow.setStrokeWidth(0);
-      this.setTool(_enums.FcrBoardToolType.NONE);
-    }
+    key: "_onUiEvent",
+    value: function () {
+      var _onUiEvent2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(event, params) {
+        var _t;
+        return _regenerator["default"].wrap(function (_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _t = event;
+              _context.next = _t === _constant.FcrUIAction.RESET_WHITEBOARD_TOOLBAR_VARS ? 1 : 2;
+              break;
+            case 1:
+              this.resetToolbarVars();
+              return _context.abrupt("continue", 2);
+            case 2:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function _onUiEvent(_x, _x2) {
+        return _onUiEvent2.apply(this, arguments);
+      }
+      return _onUiEvent;
+    }()
   }, {
-    key: "resumeToolbar",
-    value: function resumeToolbar() {
-      if (this._lastStrokeWidth > 0) {
-        this.observables.currentStrokeWidth = this._lastStrokeWidth;
-        this.boardMainWindow.setStrokeWidth(this._lastStrokeWidth);
-        this._lastStrokeWidth = 0;
+    key: "resetToolbarVars",
+    value: function resetToolbarVars() {
+      if (this._boardMainWindow) {
+        this.setStrokeColor(colors[2]);
+        this.setStrokeWidth(2);
+        this.setPen(_type.FcrBoardShape.Curve);
       }
     }
   }, {
@@ -292,7 +317,9 @@ var ToolbarStore = exports.ToolbarStore = /*#__PURE__*/function () {
     key: "release",
     value: function release() {
       var _this$_boardMainWindo;
+      this._eventProvider.removeObserver(this._uiEventObserver);
       (_this$_boardMainWindo = this._boardMainWindow) === null || _this$_boardMainWindo === void 0 || _this$_boardMainWindo.removeObserver(this._boardObserver);
+      this._whiteboardControl.removeObserver(this._whiteboardObserver);
     }
   }, {
     key: "_updateDockPlacement",
@@ -381,16 +408,16 @@ var ToolbarStore = exports.ToolbarStore = /*#__PURE__*/function () {
   }, {
     key: "_getSnapshotImage",
     value: function () {
-      var _getSnapshotImage2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var _getSnapshotImage2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
         var _this5 = this;
         var mainWindow, progress, imageData;
-        return _regenerator["default"].wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+        return _regenerator["default"].wrap(function (_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
             case 0:
               this.observables.progress = 0;
               mainWindow = this.boardMainWindow;
               if (!mainWindow) {
-                _context.next = 8;
+                _context2.next = 2;
                 break;
               }
               progress = setInterval(function () {
@@ -400,10 +427,10 @@ var ToolbarStore = exports.ToolbarStore = /*#__PURE__*/function () {
                   clearInterval(progress);
                 }
               }, 4);
-              _context.next = 6;
+              _context2.next = 1;
               return mainWindow.getSnapshotImage();
-            case 6:
-              imageData = _context.sent;
+            case 1:
+              imageData = _context2.sent;
               (0, _mobx.runInAction)(function () {
                 setTimeout(function () {
                   var _this5$roomInfo;
@@ -418,11 +445,11 @@ var ToolbarStore = exports.ToolbarStore = /*#__PURE__*/function () {
                   // });
                 }, 400);
               });
-            case 8:
+            case 2:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
-        }, _callee, this);
+        }, _callee2, this);
       }));
       function _getSnapshotImage() {
         return _getSnapshotImage2.apply(this, arguments);
@@ -456,7 +483,7 @@ var ToolbarStore = exports.ToolbarStore = /*#__PURE__*/function () {
   }]);
 }();
 _ToolbarStore = ToolbarStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ToolbarStore, [[_mobx.observable, 1, "observables"], [_disableToolbarDecs, 18, "disableToolbar"], [_resumeToolbarDecs, 18, "resumeToolbar"], [_redoDecs, 18, "redo"], [_undoDecs, 18, "undo"], [_cleanDecs, 18, "clean"], [_setToolDecs, 18, "setTool"], [_setPenDecs, 18, "setPen"], [_setShapeDecs, 18, "setShape"], [_setStrokeColorDecs, 18, "setStrokeColor"], [_setStrokeWidthDecs, 18, "setStrokeWidth"], [_clickExpansionToolDecs, 18, "clickExpansionTool"], [_setToolbarPositionDecs, 18, "setToolbarPosition"], [_dragToolbarDecs, 18, "dragToolbar"], [_releaseToolbarDecs, 18, "releaseToolbar"], [_captureScreenDecs, 18, "captureScreen"], [_saveDraftDecs, 18, "saveDraft"], [_setThemeDecs, 18, "setTheme"], [_setCommonColorDecs, 18, "setCommonColor"], [_repositionToolbarDecs, 18, "repositionToolbar"], [_decorator.bound, 2, "release"], [_decorator.bound, 2, "_updateDockPlacement"], [_decorator.bound, 2, "_updateDockPosition"], [_decorator.bound, 2, "_updateMaxVisibleTools"], [_decorator.bound, 2, "_setBackgroundColor"], [_getSnapshotImageDecs, 18, "_getSnapshotImage"]], []).e, 2);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ToolbarStore, [[_mobx.observable, 1, "observables"], [_decorator.bound, 2, "_onUiEvent"], [_resetToolbarVarsDecs, 18, "resetToolbarVars"], [_redoDecs, 18, "redo"], [_undoDecs, 18, "undo"], [_cleanDecs, 18, "clean"], [_setToolDecs, 18, "setTool"], [_setPenDecs, 18, "setPen"], [_setShapeDecs, 18, "setShape"], [_setStrokeColorDecs, 18, "setStrokeColor"], [_setStrokeWidthDecs, 18, "setStrokeWidth"], [_clickExpansionToolDecs, 18, "clickExpansionTool"], [_setToolbarPositionDecs, 18, "setToolbarPosition"], [_dragToolbarDecs, 18, "dragToolbar"], [_releaseToolbarDecs, 18, "releaseToolbar"], [_captureScreenDecs, 18, "captureScreen"], [_saveDraftDecs, 18, "saveDraft"], [_setThemeDecs, 18, "setTheme"], [_setCommonColorDecs, 18, "setCommonColor"], [_repositionToolbarDecs, 18, "repositionToolbar"], [_decorator.bound, 2, "release"], [_decorator.bound, 2, "_updateDockPlacement"], [_decorator.bound, 2, "_updateDockPosition"], [_decorator.bound, 2, "_updateMaxVisibleTools"], [_decorator.bound, 2, "_setBackgroundColor"], [_getSnapshotImageDecs, 18, "_getSnapshotImage"]], []).e, 2);
 _init_observables = _applyDecs$e[0];
 _initProto = _applyDecs$e[1];
 var ToolbarContext = exports.ToolbarContext = /*#__PURE__*/(0, _react.createContext)({});

package/lib/modules/whiteboard/index.js

@@ -18,7 +18,6 @@ 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");
@@ -57,9 +56,6 @@ 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");
@@ -180,7 +176,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       onConnectionStateUpdated: function () {
         var _onConnectionStateUpdated = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(state) {
           var _this$_whiteboardCont, _this$_whiteboardCont2, mainWindow, isActive, ownerUserId, _this$_userControl, ownerUser;
-          return _regenerator["default"].wrap(function _callee$(_context) {
+          return _regenerator["default"].wrap(function (_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
                 _this.logger.info('Fcr board connection state changed to', state);
@@ -208,7 +204,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
                   _this._boardMainWindow = mainWindow;
                   _this.mount();
                 }
-              case 4:
+              case 1:
               case "end":
                 return _context.stop();
             }
@@ -314,7 +310,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       this._roomControl = (_this$currentRoomCont = this.currentRoomControlProvider) === null || _this$currentRoomCont === void 0 ? void 0 : _this$currentRoomCont.currentRoomControl;
       this._securityStore = this.privilegeProvider;
       this._whiteboardControl = this._roomControl.getSharingControl().getBoardControl();
-      this._toolbarStore = new _store.ToolbarStore(this._whiteboardControl, this._roomControl, this.annotationProvider);
+      this._toolbarStore = new _store.ToolbarStore(this._whiteboardControl, this._roomControl, this.annotationProvider, this.eventProvider);
       var streamControl = this._roomControl.getStreamControl();
       var userControl = this._roomControl.getUserControl();
       this._userControl = userControl;
@@ -508,7 +504,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
 
           var isActive = (_this$_whiteboardCont6 = this._whiteboardControl) === null || _this$_whiteboardCont6 === void 0 ? void 0 : _this$_whiteboardCont6.getActivity();
           if (isActive && this._whiteboardControl) {
-            var _this$_userControl2, _this$_ownerUser3, _this$_localUser3, _this$_boardStore2, _this$_boardStore3, _this$_uiEventStore3;
+            var _this$_userControl2, _this$_ownerUser3, _this$_localUser3, _this$_boardStore2, _this$_boardStore3, _this$_uiEventStore3, _this$_toolbarStore;
             var ownerUserId = this._whiteboardControl.getOwnerId();
             this._ownerUser = (_this$_userControl2 = this._userControl) === null || _this$_userControl2 === void 0 ? void 0 : _this$_userControl2.getUser(ownerUserId);
             this._isMyBoard = ((_this$_ownerUser3 = this._ownerUser) === null || _this$_ownerUser3 === void 0 ? void 0 : _this$_ownerUser3.userId) === ((_this$_localUser3 = this._localUser) === null || _this$_localUser3 === void 0 ? void 0 : _this$_localUser3.userId);
@@ -518,6 +514,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
               action: _type.WhiteboardBaseEvents.SET_OWNER_USER_ID,
               payload: ownerUserId
             });
+            (_this$_toolbarStore = this._toolbarStore) === null || _this$_toolbarStore === void 0 || _this$_toolbarStore.resetToolbarVars();
           } else {
             this.logger.warn('whiteboard mount, getBoardActiveInfo activeInfo isActive is false , ownerUserId is null');
           }

package/lib/modules/whiteboard/style.css

@@ -7,10 +7,6 @@
   pointer-events: all;
 }
 
-.board-widget-app {
-  height: 100%;
-}
-
 .fcr-board-pagination {
   position: absolute;
   left: 10px;
@@ -140,3 +136,15 @@
   width: 100%;
   height: 100%;
 } */
+
+.whiteboard-action-prevent {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 100;
+  cursor:
+    url('data:image/svg+xml,%3Csvg width="18" height="18" viewBox="0 0  " fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0_71146_163811)"%3E%3Cg filter="url(%23filter0_d_71146_163811)"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4.95701 14.2575L1.05431 2.41514C0.867777 1.84912 1.1772 1.23963 1.74543 1.05381C1.96805 0.981012 2.20837 0.982105 2.43032 1.05693L14.264 5.04624C14.8305 5.23722 15.1343 5.84949 14.9426 6.4138C14.8422 6.70924 14.6183 6.94694 14.3288 7.0656L9.3004 9.12601C9.08832 9.21291 8.92123 9.38255 8.83806 9.59543L6.99502 14.3123C6.77809 14.8675 6.15043 15.1423 5.59309 14.9263C5.29135 14.8093 5.058 14.5639 4.95701 14.2575Z" fill="%234262FF"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4.95701 14.2575L1.05431 2.41514C0.867777 1.84912 1.1772 1.23963 1.74543 1.05381C1.96805 0.981012 2.20837 0.982105 2.43032 1.05693L14.264 5.04624C14.8305 5.23722 15.1343 5.84949 14.9426 6.4138C14.8422 6.70924 14.6183 6.94694 14.3288 7.0656L9.3004 9.12601C9.08832 9.21291 8.92123 9.38255 8.83806 9.59543L6.99502 14.3123C6.77809 14.8675 6.15043 15.1423 5.59309 14.9263C5.29135 14.8093 5.058 14.5639 4.95701 14.2575Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_d_71146_163811" x="-2.5" y="-1.5" width="23" height="23" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dx="1" dy="2"/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="out"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_71146_163811"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_71146_163811" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0_71146_163811"%3E%3Crect width="18" height="18" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E'),
+    auto;
+}

package/lib/modules/whiteboard/view.js

@@ -17,12 +17,16 @@ var _boardContext = _interopRequireDefault(require("../../utilities/board-contex
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _fcrCore = require("fcr-core");
 var _store = require("./components/toolbar/store");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
 var _jsxRuntime = require("react/jsx-runtime");
 var Whiteboard = exports.Whiteboard = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_boardContext["default"]),
     showToolbar = _useContext.showToolbar;
   var _useContext2 = (0, _react.useContext)(_store.ToolbarContext),
-    progress = _useContext2.observables.progress;
+    _useContext2$observab = _useContext2.observables,
+    progress = _useContext2$observab.progress,
+    currentTool = _useContext2$observab.currentTool;
   var transI18n = (0, _i18n.useI18n)();
   var _useContext3 = (0, _react.useContext)(_context.BoardUIContext),
     _useContext3$observab = _useContext3.observables,
@@ -34,9 +38,11 @@ var Whiteboard = exports.Whiteboard = (0, _mobxReact.observer)(function () {
     handleClose = _useContext3.handleClose,
     handleOpen = _useContext3.handleOpen;
   var loading = connectionState === _fcrCore.FcrConnectionState.CONNECTING || connectionState === _fcrCore.FcrConnectionState.RECONNECTING;
+  var cursorClassname = "board-widget-cursor-".concat([_enums.FcrBoardToolType[currentTool || _enums.FcrBoardToolType.NONE]]);
+  var boardWidgetAppCls = (0, _classnames["default"])('board-widget-app', cursorClassname.toLowerCase());
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "board-widget-app",
+      className: boardWidgetAppCls,
       ref: handleBoardDomLoad
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "window-manager-collector",
@@ -46,6 +52,8 @@ var Whiteboard = exports.Whiteboard = (0, _mobxReact.observer)(function () {
     }), canOperate && showToolbar && writeEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbar.Toolbar, {}), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_loading.Loading, {}), progress > 0 && progress < 100 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_progress["default"], {
       title: "".concat(transI18n('fmt_screenshare_whiteboard_tips_downloading'), "..."),
       progress: progress
+    }), (!canOperate || !showToolbar || !writeEnabled) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "whiteboard-action-prevent"
     })]
   });
 });

package/lib/modules/widget/index.js

@@ -60,8 +60,7 @@ var _store = _interopRequireWildcard(require("./store"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _WebWidgetUIModule;
 var _initProto;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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 _applyDecs(e, t, r, n, o, a) { function i(e, t, r) { return function (n, o) { return r && r(n), e[t].call(n, o); }; } function c(e, t) { for (var r = 0; r < e.length; r++) e[r].call(t); return t; } function s(e, t, r, n) { if ("function" != typeof e && (n || void 0 !== e)) throw new TypeError(t + " must " + (r || "be") + " a function" + (n ? "" : " or undefined")); return e; } function applyDec(e, t, r, n, o, a, c, u, l, f, p, d, h) { function m(e) { if (!h(e)) throw new TypeError("Attempted to access private element on non-instance"); } var y, v = t[0], g = t[3], b = !u; if (!b) { r || Array.isArray(v) || (v = [v]); var w = {}, S = [], A = 3 === o ? "get" : 4 === o || d ? "set" : "value"; f ? (p || d ? w = { get: _setFunctionName(function () { return g(this); }, n, "get"), set: function set(e) { t[4](this, e); } } : w[A] = g, p || _setFunctionName(w[A], n, 2 === o ? "" : A)) : p || (w = Object.getOwnPropertyDescriptor(e, n)); } for (var P = e, j = v.length - 1; j >= 0; j -= r ? 2 : 1) { var D = v[j], E = r ? v[j - 1] : void 0, I = {}, O = { kind: ["field", "accessor", "method", "getter", "setter", "class"][o], name: n, metadata: a, addInitializer: function (e, t) { if (e.v) throw Error("attempted to call addInitializer after decoration was finished"); s(t, "An initializer", "be", !0), c.push(t); }.bind(null, I) }; try { if (b) (y = s(D.call(E, P, O), "class decorators", "return")) && (P = y);else { var k, F; O["static"] = l, O["private"] = f, f ? 2 === o ? k = function k(e) { return m(e), w.value; } : (o < 4 && (k = i(w, "get", m)), 3 !== o && (F = i(w, "set", m))) : (k = function k(e) { return e[n]; }, (o < 2 || 4 === o) && (F = function F(e, t) { e[n] = t; })); var N = O.access = { has: f ? h.bind() : function (e) { return n in e; } }; if (k && (N.get = k), F && (N.set = F), P = D.call(E, d ? { get: w.get, set: w.set } : w[A], O), d) { if ("object" == _typeof(P) && P) (y = s(P.get, "accessor.get")) && (w.get = y), (y = s(P.set, "accessor.set")) && (w.set = y), (y = s(P.init, "accessor.init")) && S.push(y);else if (void 0 !== P) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0"); } else s(P, (p ? "field" : "method") + " decorators", "return") && (p ? S.push(P) : w[A] = P); } } finally { I.v = !0; } } return (p || d) && u.push(function (e, t) { for (var r = S.length - 1; r >= 0; r--) t = S[r].call(e, t); return t; }), p || b || (f ? d ? u.push(i(w, "get"), i(w, "set")) : u.push(2 === o ? w[A] : i.call.bind(w[A])) : Object.defineProperty(e, n, w)), P; } function u(e, t) { return Object.defineProperty(e, Symbol.metadata || Symbol["for"]("Symbol.metadata"), { configurable: !0, enumerable: !0, value: t }); } if (arguments.length >= 6) var l = a[Symbol.metadata || Symbol["for"]("Symbol.metadata")]; var f = Object.create(null == l ? null : l), p = function (e, t, r, n) { var o, a, i = [], s = function s(t) { return _checkInRHS(t) === e; }, u = new Map(); function l(e) { e && i.push(c.bind(null, e)); } for (var f = 0; f < t.length; f++) { var p = t[f]; if (Array.isArray(p)) { var d = p[1], h = p[2], m = p.length > 3, y = 16 & d, v = !!(8 & d), g = 0 == (d &= 7), b = h + "/" + v; if (!g && !m) { var w = u.get(b); if (!0 === w || 3 === w && 4 !== d || 4 === w && 3 !== d) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + h); u.set(b, !(d > 2) || d); } applyDec(v ? e : e.prototype, p, y, m ? "#" + h : _toPropertyKey(h), d, n, v ? a = a || [] : o = o || [], i, v, m, g, 1 === d, v && m ? s : r); } } return l(o), l(a), i; }(e, t, o, f); return r.length || u(e, f), { e: p, get c() { var t = []; return r.length && [u(applyDec(e, [r], n, e.name, 5, f, t), f), c.bind(null, t, e)]; } }; }

package/lib/modules/widget/web-widget.js

@@ -161,7 +161,7 @@ var FcrUIWebWidgetImpl = exports.FcrUIWebWidgetImpl = /*#__PURE__*/function () {
     key: "fetchUserList",
     value: function () {
       var _fetchUserList = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(params) {
-        return _regenerator["default"].wrap(function _callee$(_context) {
+        return _regenerator["default"].wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               return _context.abrupt("return", this._userControl.fetchUserList(params));

package/lib/plugins/browser-runtime-plugin.js

@@ -61,7 +61,7 @@ if (!window.runtime) {
     },
     checkMediaPermission: function () {
       var _checkMediaPermission = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(mediaType) {
-        return _regenerator["default"].wrap(function _callee$(_context) {
+        return _regenerator["default"].wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               return _context.abrupt("return", true);

package/lib/plugins/module-dev-plugin.js

@@ -17,11 +17,11 @@ var _fcrCore = require("fcr-core");
 var createRoom = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(roomName) {
     var url, res, json;
-    return _regenerator["default"].wrap(function _callee$(_context) {
+    return _regenerator["default"].wrap(function (_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           url = "http://api-solutions-dev.bj2.agoralab.co/conference/companys/v1/rooms";
-          _context.next = 3;
+          _context.next = 1;
           return fetch(url, {
             headers: {
               'Content-Type': 'application/json'
@@ -36,14 +36,14 @@ var createRoom = /*#__PURE__*/function () {
               roomProperties: {}
             })
           });
-        case 3:
+        case 1:
           res = _context.sent;
-          _context.next = 6;
+          _context.next = 2;
           return res.json();
-        case 6:
+        case 2:
           json = _context.sent;
           return _context.abrupt("return", json.data.roomId);
-        case 8:
+        case 3:
         case "end":
           return _context.stop();
       }
@@ -65,11 +65,11 @@ var createRoom = /*#__PURE__*/function () {
 var getUserToken = /*#__PURE__*/function () {
   var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(roomId, userId, userName, role) {
     var url, res, json;
-    return _regenerator["default"].wrap(function _callee2$(_context2) {
+    return _regenerator["default"].wrap(function (_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
           url = "https://api-solutions-dev.bj2.agoralab.co/conference/companys/v1/rooms";
-          _context2.next = 3;
+          _context2.next = 1;
           return fetch(url, {
             headers: {
               'Content-Type': 'application/json'
@@ -82,17 +82,17 @@ var getUserToken = /*#__PURE__*/function () {
               userName: userName
             })
           });
-        case 3:
+        case 1:
           res = _context2.sent;
-          _context2.next = 6;
+          _context2.next = 2;
           return res.json();
-        case 6:
+        case 2:
           json = _context2.sent;
           return _context2.abrupt("return", {
             token: json.data.token,
             appId: json.data.appId
           });
-        case 8:
+        case 3:
         case "end":
           return _context2.stop();
       }
@@ -107,7 +107,7 @@ var userId = "test-user-".concat(Date.now());
 var role = 'host';
 window.__DEV_ENGINE_IS_READY__ = createRoom(roomId).then(/*#__PURE__*/function () {
   var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3(roomId) {
-    return _regenerator["default"].wrap(function _callee3$(_context3) {
+    return _regenerator["default"].wrap(function (_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
           return _context3.abrupt("return", getUserToken(roomId, userId, userId, role).then(function (_ref4) {

package/lib/providers/ability-provider.d.ts

@@ -1,19 +1,26 @@
 import { FcrAbilityControl } from 'fcr-core/lib/room-control/ability-control/type';
 import { FcrPlatform } from 'fcr-core/lib/type';
 export interface FcrUIAbilityProvider {
+    /**
+     * 检查当前平台是否支持获取房间详情
+     */
     isRoomDetailSupported(): boolean;
     /**
      * 判断指定平台是否支持设置主持人
      * @param platform 目标平台
      */
     isHostSupportedByPlatform(platform: FcrPlatform): boolean;
+    /**
+     * 检查当前平台是否支持批注
+     */
+    isAnnotationSupported(): boolean;
 }
 export declare class FcrUIAbilityProviderImpl implements FcrUIAbilityProvider {
     private _abilityControl;
     protected logger: import("agora-foundation/lib/logger").Logger;
     constructor(_abilityControl: FcrAbilityControl);
     /**
-     * 检查当前平台是否支持指定能力
+     * 检查当前平台是否支持获取房间详情
      */
     isRoomDetailSupported: () => boolean;
     /**
@@ -29,4 +36,8 @@ export declare class FcrUIAbilityProviderImpl implements FcrUIAbilityProvider {
      * 检查当前平台是否支持指定能力
      */
     isInterpreterSupported: () => boolean;
+    /**
+     * 检查当前平台是否支持批注
+     */
+    isAnnotationSupported: () => boolean;
 }

package/lib/providers/ability-provider.js

@@ -19,7 +19,7 @@ var FcrUIAbilityProviderImpl = exports.FcrUIAbilityProviderImpl = /*#__PURE__*/(
     prefix: 'FcrUIAbilityProviderImpl'
   }));
   /**
-   * 检查当前平台是否支持指定能力
+   * 检查当前平台是否支持获取房间详情
    */
   (0, _defineProperty2["default"])(this, "isRoomDetailSupported", function () {
     var result = _this._abilityControl.isAbilitySupported(_type.FcrAbility.RoomDetail);
@@ -47,6 +47,13 @@ var FcrUIAbilityProviderImpl = exports.FcrUIAbilityProviderImpl = /*#__PURE__*/(
     var result = _this._abilityControl.isAbilitySupported(_type.FcrAbility.Interpreter);
     return result;
   });
+  /**
+   * 检查当前平台是否支持批注
+   */
+  (0, _defineProperty2["default"])(this, "isAnnotationSupported", function () {
+    var result = _this._abilityControl.isAbilitySupported(_type.FcrAbility.Annotation);
+    return result;
+  });
   this._abilityControl = _abilityControl;
 });
 (0, _base.registerDependency)('abilityProvider');

package/lib/providers/annotation-provider.d.ts

@@ -9,23 +9,74 @@ import { FcrUIVideoWindowData } from '../type';
 import { FcrUIScreenShareProvider } from './screen-share-provider';
 import { FcrUIDeviceProvider } from './device-provider';
 export interface FcrUIAnnotationProvider {
+    /**
+     * 接收端属性，用于获取当前标注窗口的缩放比例
+     */
+    get scalcValue(): number;
+    /**
+     * 接收端方法，用于获取标注功能的 Control 对象
+     */
+    get annotationControl(): FcrAnnotationControl | undefined;
+    /**
+     * 接收端方法，用于获取标注窗口的 MainWindow 对象
+     */
+    get boardMainWindow(): FcrBoardMainWindow | undefined;
+    /**
+     * 接收端属性，用于获取当前共享窗口数据
+     */
+    get screenShareWindowData(): FcrUIVideoWindowData | undefined;
+    /**
+     * 接收端属性，用于获取当前标注启动状态
+     */
+    get annotationHasStart(): boolean;
+    /**
+     * 接收端属性，用于获取当前标注状态
+     */
+    get annotationState(): FcrAnnotationState;
+    /**
+     * 发起端状态，用于获取当前是否正在标注
+     */
     get annotating(): boolean;
+    /**
+     * 发起端数据，当前共享屏幕信息
+     */
     get currentShareInfo(): CurrentShareScreenTypes;
+    /**
+     * 发起端方法，用于打开关闭标注，由用户触发，此操切换标注工具栏打开状态合窗口的鼠标穿透模式
+     */
     toggleAnnotation(): void;
+    /**
+     * 发起端方法，启动标注窗口，在主窗口启动时调用
+     */
     openAnnotationWindow(): void;
+    /**
+     * 发起端方法，用于隐藏标注窗口，不是关闭
+     */
     hideAnnotationWindow(): void;
+    /**
+     * 发起端方法，用于设置当前共享屏幕信息
+     */
     setCurrentShareInfo(info: CurrentShareScreenTypes): void;
+    /**
+     * 发起端方法，用通知标注窗口更新当前共享屏幕信息
+     */
     setBoundsToAnnotationWindow(info?: CurrentShareScreenTypes): void;
-    get annotationControl(): FcrAnnotationControl | undefined;
-    get boardMainWindow(): FcrBoardMainWindow | undefined;
-    get screenShareWindowData(): FcrUIVideoWindowData | undefined;
-    get annotationState(): FcrAnnotationState;
-    get annotationHasStart(): boolean;
+    /**
+     * 接收端方法，用于放大标注窗口
+     */
     zoomIn(): void;
+    /**
+     * 接收端方法，用于缩小标注窗口
+     */
     zoomOut(): void;
+    /**
+     * 接收端方法，用于设置标注窗口的缩放比例
+     */
     fullContainer(scalc: number): void;
+    /**
+     * 接收端方法，用于设置标注窗口的缩放比例
+     */
     setOriginScalc(): void;
-    get scalcValue(): number;
 }
 export declare enum FcrAnnotationState {
     START = "start",
@@ -47,20 +98,19 @@ export declare class FcrUIAnnotationProviderImpl implements FcrUIAnnotationProvi
     private _shareScreenOwnerId;
     private _maxScalcValue;
     private _minScalcValue;
+    private _annotationObserver;
+    private _currentScreenShareOwnerCanStartAnnotation;
+    private _observer;
+    private get _localUser();
     accessor scalcValue: number;
     accessor annotationState: FcrAnnotationState;
     accessor annotating: boolean;
     accessor currentShareInfo: CurrentShareScreenTypes;
-    private _annotationObserver;
-    private _currentScreenShareOwnerCanStartAnnotation;
-    private _observer;
-    private _initAnnotationTransaction;
-    constructor(_dialogProvider: FcrUIDialogProvider, _sharingProvider: FcrUISharingProvider, _memberDataSource: FcrUIMemberSharedDataSource, _videoWindowDataSource: FcrUIVideoWindowDataSource, _screenShareProvider: FcrUIScreenShareProvider, _deviceProvider: FcrUIDeviceProvider);
     get screenShareWindowData(): import("../shared-data-source/video-window").FcrUIVideoWindowDataImpl | undefined;
     get boardMainWindow(): FcrBoardMainWindow | undefined;
     get annotationControl(): FcrAnnotationControl | undefined;
     get annotationHasStart(): boolean;
-    private get _localUser();
+    constructor(_dialogProvider: FcrUIDialogProvider, _sharingProvider: FcrUISharingProvider, _memberDataSource: FcrUIMemberSharedDataSource, _videoWindowDataSource: FcrUIVideoWindowDataSource, _screenShareProvider: FcrUIScreenShareProvider, _deviceProvider: FcrUIDeviceProvider);
     zoomIn(): void;
     zoomOut(): void;
     fullContainer(scalc: number): void;
@@ -74,4 +124,5 @@ export declare class FcrUIAnnotationProviderImpl implements FcrUIAnnotationProvi
     release(): void;
     private _openToolbar;
     private _closeToolbar;
+    private _initAnnotationTransaction;
 }