fcr-ui-scene 3.6.1 → 3.6.3

package/lib/modules/whiteboard/components/toolbar/hooks/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useVisibleTools = void 0;
+exports.useVisibleTools = exports.useAnnotationVisibleTools = void 0;
 require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.filter.js");
 require("core-js/modules/es.array.map.js");
@@ -43,22 +43,24 @@ var useVisibleTools = exports.useVisibleTools = function useVisibleTools(diracti
     maxCountVisibleTools = _useContext$observabl.maxCountVisibleTools,
     toolbarDockPosition = _useContext$observabl.toolbarDockPosition,
     setTool = _useContext.setTool,
-    saveDraft = _useContext.saveDraft;
+    saveDraft = _useContext.saveDraft,
+    annotationHasStart = _useContext.annotationHasStart;
   var transI18n = (0, _i18n.useI18n)();
   var handleToolChange = function handleToolChange(tool) {
     return function () {
       setTool(tool);
     };
   };
-  var baseMainTools = [{
+  var whiteboardMainTools = [{
     renderItem: function renderItem() {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ToolbarItem, {
         tooltipPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
         tooltip: transI18n('fmt_screenshare_whiteboard_button_laserpen'),
-        icon: _type.FcrIconType.FCR_WHITEBOARD_LASERPEN2,
+        icon: _type.FcrIconType.FCR_WHITEBOARD_LASERPEN1,
         onClick: handleToolChange(_enums.FcrBoardToolType.LASER_POINTER),
         isActive: currentTool === _enums.FcrBoardToolType.LASER_POINTER,
-        diraction: diraction
+        diraction: diraction,
+        iconColor: "#FF0005"
       });
     }
   },
@@ -81,7 +83,8 @@ var useVisibleTools = exports.useVisibleTools = function useVisibleTools(diracti
         icon: _type.FcrIconType.FCR_WHITECHOOSE,
         onClick: handleToolChange(_enums.FcrBoardToolType.SELECTOR),
         isActive: currentTool === _enums.FcrBoardToolType.SELECTOR,
-        diraction: diraction
+        diraction: diraction,
+        iconColor: "#FF0005"
       });
     }
   }, {
@@ -139,6 +142,67 @@ var useVisibleTools = exports.useVisibleTools = function useVisibleTools(diracti
       });
     }
   }] : []));
+  var annontationMainTools = [{
+    renderItem: function renderItem() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ToolbarItem, {
+        tooltipPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
+        tooltip: transI18n('fmt_screenshare_whiteboard_button_laserpen'),
+        icon: _type.FcrIconType.FCR_WHITEBOARD_LASERPEN1,
+        onClick: handleToolChange(_enums.FcrBoardToolType.LASER_POINTER),
+        isActive: currentTool === _enums.FcrBoardToolType.LASER_POINTER,
+        diraction: diraction,
+        iconColor: "#FF0005"
+      });
+    }
+  }, {
+    renderItem: function renderItem() {
+      var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        offset = _ref5.offset;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_penPicker.PenPickerItem, {
+        offset: offset
+      });
+    }
+  }, {
+    renderItem: function renderItem() {
+      var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        offset = _ref6.offset;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_shapePicker.ShapePickerItem, {
+        offset: offset
+      });
+    }
+  },
+  // {
+  //   renderItem: () => (
+  //     <ToolbarItem
+  //       tooltipPlacement={toolbarDockPosition.placement === 'left' ? 'right' : 'left'}
+  //       tooltip={transI18n('fmt_screenshare_whiteboard_button_text')}
+  //       icon={FcrIconType.FCR_WHITEBOARD_TEXT}
+  //       onClick={handleToolChange(FcrBoardToolType.TEXT)}
+  //       isActive={currentTool === FcrBoardToolType.TEXT}
+  //       diraction={diraction}
+  //     />
+  //   ),
+  // },
+  {
+    renderItem: function renderItem() {
+      var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        offset = _ref7.offset;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_eraserPicker.EraserPickerItem, {
+        offset: offset
+      });
+    }
+  }
+  // ...(isElectron()
+  //   ? [
+  //       {
+  //         renderItem: ({ offset }: { offset?: number } = {}) => (
+  //           <ScreenCapturePickerItem offset={offset} />
+  //         ),
+  //       },
+  //     ]
+  //   : []),
+  ];
+  var baseMainTools = annotationHasStart ? annontationMainTools : whiteboardMainTools;
   var divider = {
     renderItem: function renderItem() {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -175,6 +239,19 @@ var useVisibleTools = exports.useVisibleTools = function useVisibleTools(diracti
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_moveHandle.MoveHandleItem, {});
     }
   }];
+  var fixedAnnotationTools = [divider, colorTool, divider, {
+    renderItem: function renderItem() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_history.UndoItem, {});
+    }
+  }, {
+    renderItem: function renderItem() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_history.RedoItem, {});
+    }
+  }, {
+    renderItem: function renderItem() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_moveHandle.MoveHandleItem, {});
+    }
+  }];
   var additionTool = {
     renderItem: function renderItem() {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_extraToolPicker.AdditionToolPickerItem, {});
@@ -191,9 +268,10 @@ var useVisibleTools = exports.useVisibleTools = function useVisibleTools(diracti
   // }
 
   var maxCountAvailableToDisplay = maxCountVisibleTools;
+  var resultFixedTools = annotationHasStart ? fixedAnnotationTools : fixedTools;
   var mainTools = isShinked && diraction !== 'horizontal' ? (0, _range["default"])(0, (0, _max["default"])([0, (0, _min["default"])([maxCountAvailableToDisplay, baseMainTools.length])])).map(function (index) {
     return baseMainTools[index];
-  }).concat([additionTool]).concat(fixedTools) : baseMainTools.concat(fixedTools);
+  }).concat([additionTool]).concat(resultFixedTools) : baseMainTools.concat(resultFixedTools);
   var additionToolsCount = baseMainTools.length - maxCountAvailableToDisplay;
   var additionTools = (0, _toConsumableArray2["default"])(baseMainTools).reverse().filter(function (tool, index) {
     if (index < additionToolsCount) {
@@ -206,6 +284,156 @@ var useVisibleTools = exports.useVisibleTools = function useVisibleTools(diracti
   //   additionTools.unshift(colorTool);
   // }
 
+  additionTools = additionTools.reverse();
+  return {
+    mainTools: mainTools,
+    additionTools: additionTools,
+    showColorCount: showColorCount,
+    isShinked: isShinked
+  };
+};
+var useAnnotationVisibleTools = exports.useAnnotationVisibleTools = function useAnnotationVisibleTools(diraction) {
+  var _useContext2 = (0, _react.useContext)(_store.ToolbarContext),
+    _useContext2$observab = _useContext2.observables,
+    currentTool = _useContext2$observab.currentTool,
+    maxCountVisibleTools = _useContext2$observab.maxCountVisibleTools,
+    toolbarDockPosition = _useContext2$observab.toolbarDockPosition,
+    setTool = _useContext2.setTool,
+    saveDraft = _useContext2.saveDraft;
+  var transI18n = (0, _i18n.useI18n)();
+  var handleToolChange = function handleToolChange(tool) {
+    return function () {
+      setTool(tool);
+    };
+  };
+  var annontationMainTools = [{
+    renderItem: function renderItem() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ToolbarItem, {
+        tooltipPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
+        tooltip: transI18n('fmt_screenshare_whiteboard_button_laserpen'),
+        icon: _type.FcrIconType.FCR_WHITEBOARD_LASERPEN1,
+        onClick: handleToolChange(_enums.FcrBoardToolType.LASER_POINTER),
+        isActive: currentTool === _enums.FcrBoardToolType.LASER_POINTER,
+        diraction: diraction,
+        iconColor: "#FF0005"
+      });
+    }
+  }, {
+    renderItem: function renderItem() {
+      var _ref8 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        offset = _ref8.offset;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_penPicker.PenPickerItem, {
+        offset: offset
+      });
+    }
+  }, {
+    renderItem: function renderItem() {
+      var _ref9 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        offset = _ref9.offset;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_shapePicker.ShapePickerItem, {
+        offset: offset
+      });
+    }
+  },
+  // {
+  //   renderItem: () => (
+  //     <ToolbarItem
+  //       tooltipPlacement={toolbarDockPosition.placement === 'left' ? 'right' : 'left'}
+  //       tooltip={transI18n('fmt_screenshare_whiteboard_button_text')}
+  //       icon={FcrIconType.FCR_WHITEBOARD_TEXT}
+  //       onClick={handleToolChange(FcrBoardToolType.TEXT)}
+  //       isActive={currentTool === FcrBoardToolType.TEXT}
+  //       diraction={diraction}
+  //     />
+  //   ),
+  // },
+  {
+    renderItem: function renderItem() {
+      var _ref10 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        offset = _ref10.offset;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_eraserPicker.EraserPickerItem, {
+        offset: offset
+      });
+    }
+  }
+  // ...(isElectron()
+  //   ? [
+  //       {
+  //         renderItem: ({ offset }: { offset?: number } = {}) => (
+  //           <ScreenCapturePickerItem offset={offset} />
+  //         ),
+  //       },
+  //     ]
+  //   : []),
+  ];
+  var baseMainTools = annontationMainTools;
+  var divider = {
+    renderItem: function renderItem() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-divider-vertical"
+      });
+    }
+  };
+  var colorTool = {
+    renderItem: function renderItem() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ColorPickerItem, {});
+    }
+  };
+  var fixedTools = [divider, colorTool, divider, {
+    renderItem: function renderItem() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ToolbarItem, {
+        tooltipPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
+        tooltip: transI18n('fmt_screenshare_whiteboard_button_savescript'),
+        icon: _type.FcrIconType.FCR_DOWNLOAD,
+        onClick: saveDraft,
+        isActive: false,
+        diraction: diraction
+      });
+    }
+  }, divider, {
+    renderItem: function renderItem() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_history.UndoItem, {});
+    }
+  }, {
+    renderItem: function renderItem() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_history.RedoItem, {});
+    }
+  }, {
+    renderItem: function renderItem() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_moveHandle.MoveHandleItem, {});
+    }
+  }];
+  var additionTool = {
+    renderItem: function renderItem() {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_extraToolPicker.AdditionToolPickerItem, {});
+    }
+  };
+
+  // whether toolbar needs to shrink in vertical direction
+  var isShinked = maxCountVisibleTools < baseMainTools.length + 1;
+  var showColorCount = isShinked ? 0 : maxCountVisibleTools - baseMainTools.length; /* addition tool */
+
+  // if (showColorCount) {
+  //   baseMainTools.push(divider);
+  //   baseMainTools.push(colorTool);
+  // }
+
+  var maxCountAvailableToDisplay = maxCountVisibleTools;
+  var mainTools = isShinked && diraction !== 'horizontal' ? (0, _range["default"])(0, (0, _max["default"])([0, (0, _min["default"])([maxCountAvailableToDisplay, baseMainTools.length])])).map(function (index) {
+    return baseMainTools[index];
+  }).concat([additionTool]).concat(fixedTools) : baseMainTools.concat(fixedTools);
+  var additionToolsCount = baseMainTools.length - maxCountAvailableToDisplay;
+  var additionTools = [].concat(baseMainTools).reverse().filter(function (tool, index) {
+    if (index < additionToolsCount) {
+      return true;
+    }
+    return false;
+  });
+
+  // if (isShinked) {
+  //   additionTools.unshift(colorTool);
+  // }
+
   additionTools = additionTools.reverse();
   return {
     mainTools: mainTools,

package/lib/modules/whiteboard/components/toolbar/index.d.ts

@@ -1,2 +1,2 @@
-import './ style.css';
+import './style.css';
 export declare const Toolbar: () => import("react/jsx-runtime").JSX.Element;

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

@@ -22,7 +22,7 @@ var _moveHandle = require("./components/move-handle");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _foldIcon = _interopRequireDefault(require("./components/icons/fold-icon"));
-require("./ style.css");
+require("./style.css");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _store = require("./store");
 var _jsxRuntime = require("react/jsx-runtime");

package/lib/modules/whiteboard/components/toolbar/store.d.ts

@@ -1,12 +1,20 @@
 import { FcrBoardShape, WhiteboardThemeType } from '../../type';
 import { FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
-import { FcrBoardMainWindow, FcrWhiteboardControl } from 'fcr-core/lib/room-control/whiteboard-control/types';
+import { FcrBoardMainWindow } from 'fcr-core/lib/room-control/whiteboard-control/types';
 import { FcrBaseRoomControl } from 'fcr-core/lib/room-control/type';
+import { FcrWhiteboardControl } from 'fcr-core/lib/room-control/whiteboard-control-v2/whiteboard-control/type';
+import { FcrUIAnnotationProvider } from '../../../../providers/annotation-provider';
+import { FcrUIEventProvider } from '../../../../providers/event-provider';
 export declare class ToolbarStore {
     private _whiteboardControl;
     private _roomControl;
+    private _annotationProvider;
+    private _eventProvider;
     private _boardMainWindow;
+    private _lastStrokeWidth;
     private _boardObserver;
+    private _whiteboardObserver;
+    private _uiEventObserver;
     accessor observables: {
         currentTool: FcrBoardToolType | undefined;
         currentShape: FcrBoardShape | undefined;
@@ -37,7 +45,10 @@ export declare class ToolbarStore {
     };
     get roomInfo(): import("fcr-core/lib/type").FcrRoomInfo | undefined;
     get boardMainWindow(): FcrBoardMainWindow;
-    constructor(_whiteboardControl: FcrWhiteboardControl, _roomControl: FcrBaseRoomControl);
+    constructor(_whiteboardControl: FcrWhiteboardControl, _roomControl: FcrBaseRoomControl, _annotationProvider: FcrUIAnnotationProvider, _eventProvider: FcrUIEventProvider);
+    private _onUiEvent;
+    resetToolbarVars(): void;
+    get annotationHasStart(): boolean;
     redo(): void;
     undo(): void;
     clean(): void;

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, _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,12 +77,13 @@ 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 = (_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) {
+  function ToolbarStore(_whiteboardControl, _roomControl, _annotationProvider, _eventProvider) {
     var _this = this;
     (0, _classCallCheck2["default"])(this, ToolbarStore);
     (0, _defineProperty2["default"])(this, _ref, (_initProto(this), undefined));
+    (0, _defineProperty2["default"])(this, "_lastStrokeWidth", 0);
     (0, _defineProperty2["default"])(this, "_boardObserver", {
       onRedoStateUpdated: function onRedoStateUpdated(enable) {
         _this.observables.redoSteps = enable;
@@ -90,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,
@@ -106,8 +120,8 @@ var ToolbarStore = exports.ToolbarStore = /*#__PURE__*/function () {
         y: 0,
         placement: 'left'
       },
-      redoSteps: false,
-      undoSteps: false,
+      redoSteps: true,
+      undoSteps: true,
       lastPen: undefined,
       lastShape: undefined,
       maxCountVisibleTools: 4,
@@ -120,14 +134,10 @@ var ToolbarStore = exports.ToolbarStore = /*#__PURE__*/function () {
     }));
     this._whiteboardControl = _whiteboardControl;
     this._roomControl = _roomControl;
-    this._whiteboardControl.addObserver({
-      onConnectionStateUpdated: function onConnectionStateUpdated(state) {
-        if (state === _imports.AgoraRteConnectionState.CONNECTED) {
-          _this._boardMainWindow = _this._whiteboardControl.getMainWindow();
-          _this._boardMainWindow.addObserver(_this._boardObserver);
-        }
-      }
-    });
+    this._annotationProvider = _annotationProvider;
+    this._eventProvider = _eventProvider;
+    this._whiteboardControl.addObserver(this._whiteboardObserver);
+    this._eventProvider.addObserver(this._uiEventObserver);
   }
   return (0, _createClass2["default"])(ToolbarStore, [{
     key: "observables",
@@ -151,6 +161,44 @@ var ToolbarStore = exports.ToolbarStore = /*#__PURE__*/function () {
         throw new Error('boardMainWindow is not initialized');
       }
     }
+  }, {
+    key: "_onUiEvent",
+    value: function () {
+      var _onUiEvent2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(event, params) {
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.t0 = event;
+              _context.next = _context.t0 === _constant.FcrUIAction.RESET_WHITEBOARD_TOOLBAR_VARS ? 3 : 5;
+              break;
+            case 3:
+              this.resetToolbarVars();
+              return _context.abrupt("break", 5);
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function _onUiEvent(_x, _x2) {
+        return _onUiEvent2.apply(this, arguments);
+      }
+      return _onUiEvent;
+    }()
+  }, {
+    key: "resetToolbarVars",
+    value: function resetToolbarVars() {
+      if (this._boardMainWindow) {
+        this.setStrokeColor(colors[2]);
+        this.setStrokeWidth(2);
+        this.setPen(_type.FcrBoardShape.Curve);
+      }
+    }
+  }, {
+    key: "annotationHasStart",
+    get: function get() {
+      return this._annotationProvider.annotationHasStart;
+    }
   }, {
     key: "redo",
     value: function redo() {
@@ -268,7 +316,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",
@@ -357,16 +407,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 _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
             case 0:
               this.observables.progress = 0;
               mainWindow = this.boardMainWindow;
               if (!mainWindow) {
-                _context.next = 8;
+                _context2.next = 8;
                 break;
               }
               progress = setInterval(function () {
@@ -376,10 +426,10 @@ var ToolbarStore = exports.ToolbarStore = /*#__PURE__*/function () {
                   clearInterval(progress);
                 }
               }, 4);
-              _context.next = 6;
+              _context2.next = 6;
               return mainWindow.getSnapshotImage();
             case 6:
-              imageData = _context.sent;
+              imageData = _context2.sent;
               (0, _mobx.runInAction)(function () {
                 setTimeout(function () {
                   var _this5$roomInfo;
@@ -396,9 +446,9 @@ var ToolbarStore = exports.ToolbarStore = /*#__PURE__*/function () {
               });
             case 8:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
-        }, _callee, this);
+        }, _callee2, this);
       }));
       function _getSnapshotImage() {
         return _getSnapshotImage2.apply(this, arguments);
@@ -432,7 +482,7 @@ var ToolbarStore = exports.ToolbarStore = /*#__PURE__*/function () {
   }]);
 }();
 _ToolbarStore = ToolbarStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ToolbarStore, [[_mobx.observable, 1, "observables"], [_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/components/toolbar/{ style.css → style.css}

@@ -6,6 +6,7 @@
   border-radius: 8px;
   /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
   box-shadow: var(--fcr_web_light_dropup);
+  min-height: 70px;
 }
 
 .fcr-board-toolbar .fcr-divider-vertical::before {

package/lib/modules/whiteboard/index.d.ts

@@ -6,6 +6,7 @@ import { FcrUIVideoWindowLayoutType } from '../layout/type';
 import { FcrUICurrentRoomControlProvider } from '../../providers/room-provider';
 import { FcrUIEventProvider } from '../../providers/event-provider';
 import { FcrUIPrivilegeProvider } from '../../providers/privilege-provider';
+import { FcrUIAnnotationProvider } from '../../providers/annotation-provider';
 export declare class FcrWhiteboardUIModule extends UIModule {
     private _disposers;
     private _uiEventStore?;
@@ -40,6 +41,7 @@ export declare class FcrWhiteboardUIModule extends UIModule {
     currentRoomControlProvider?: FcrUICurrentRoomControlProvider;
     eventProvider?: FcrUIEventProvider;
     privilegeProvider?: FcrUIPrivilegeProvider;
+    annotationProvider: FcrUIAnnotationProvider;
     private accessor _lonelyWindowState;
     private accessor _ownerUser;
     private accessor _isHost;