fcr-ui-scene 3.6.0 → 3.6.2

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,11 +1,15 @@
 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';
 export declare class ToolbarStore {
     private _whiteboardControl;
     private _roomControl;
+    private _annotationProvider;
     private _boardMainWindow;
+    private _lastStrokeWidth;
     private _boardObserver;
     accessor observables: {
         currentTool: FcrBoardToolType | undefined;
@@ -37,7 +41,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);
+    disableToolbar(): void;
+    resumeToolbar(): void;
+    get annotationHasStart(): boolean;
     redo(): void;
     undo(): void;
     clean(): void;

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

@@ -63,7 +63,7 @@ var _imports = require("fcr-core/lib/imports");
 var _utils = require("../../utils");
 var _dayjs = _interopRequireDefault(require("dayjs"));
 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, _disableToolbarDecs, _resumeToolbarDecs, _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 +76,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 = (_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");
 var ToolbarStore = exports.ToolbarStore = /*#__PURE__*/function () {
-  function ToolbarStore(_whiteboardControl, _roomControl) {
+  function ToolbarStore(_whiteboardControl, _roomControl, _annotationProvider) {
     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;
@@ -106,8 +107,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,10 +121,12 @@ 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);
         }
       }
@@ -151,6 +154,27 @@ var ToolbarStore = exports.ToolbarStore = /*#__PURE__*/function () {
         throw new Error('boardMainWindow is not initialized');
       }
     }
+  }, {
+    key: "disableToolbar",
+    value: function disableToolbar() {
+      this._lastStrokeWidth = this.observables.currentStrokeWidth;
+      this.boardMainWindow.setStrokeWidth(0);
+      this.setTool(_enums.FcrBoardToolType.NONE);
+    }
+  }, {
+    key: "resumeToolbar",
+    value: function resumeToolbar() {
+      if (this._lastStrokeWidth > 0) {
+        this.observables.currentStrokeWidth = this._lastStrokeWidth;
+        this.boardMainWindow.setStrokeWidth(this._lastStrokeWidth);
+        this._lastStrokeWidth = 0;
+      }
+    }
+  }, {
+    key: "annotationHasStart",
+    get: function get() {
+      return this._annotationProvider.annotationHasStart;
+    }
   }, {
     key: "redo",
     value: function redo() {
@@ -432,7 +456,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"], [_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);
 _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;

package/lib/modules/whiteboard/index.js

@@ -179,7 +179,7 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       onBackgroundColorUpdated: _this._setBackground,
       onConnectionStateUpdated: function () {
         var _onConnectionStateUpdated = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(state) {
-          var _this$_whiteboardCont, _this$_whiteboardCont2, mainWindow, _this$_whiteboardCont3, ownerUserId, isActive, _this$_userControl, ownerUser;
+          var _this$_whiteboardCont, _this$_whiteboardCont2, mainWindow, isActive, ownerUserId, _this$_userControl, ownerUser;
           return _regenerator["default"].wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
@@ -198,7 +198,8 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
                   mainWindow = (_this$_whiteboardCont2 = _this._whiteboardControl) === null || _this$_whiteboardCont2 === void 0 ? void 0 : _this$_whiteboardCont2.getMainWindow();
                   _this.logger.info('Fcr board join success');
                   if (_this._whiteboardControl) {
-                    _this$_whiteboardCont3 = _this._whiteboardControl.getBoardActiveInfo(), ownerUserId = _this$_whiteboardCont3.ownerUserId, isActive = _this$_whiteboardCont3.isActive;
+                    isActive = _this._whiteboardControl.getActivity();
+                    ownerUserId = _this._whiteboardControl.getOwnerId();
                     if (isActive) {
                       ownerUser = (_this$_userControl = _this._userControl) === null || _this$_userControl === void 0 ? void 0 : _this$_userControl.getUser(ownerUserId);
                       _this._controlbarStore.ownerUser = ownerUser;
@@ -312,8 +313,8 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       this._uiEventStore = this.eventProvider;
       this._roomControl = (_this$currentRoomCont = this.currentRoomControlProvider) === null || _this$currentRoomCont === void 0 ? void 0 : _this$currentRoomCont.currentRoomControl;
       this._securityStore = this.privilegeProvider;
-      this._whiteboardControl = this._roomControl.getBoardControl();
-      this._toolbarStore = new _store.ToolbarStore(this._whiteboardControl, this._roomControl);
+      this._whiteboardControl = this._roomControl.getSharingControl().getBoardControl();
+      this._toolbarStore = new _store.ToolbarStore(this._whiteboardControl, this._roomControl, this.annotationProvider);
       var streamControl = this._roomControl.getStreamControl();
       var userControl = this._roomControl.getUserControl();
       this._userControl = userControl;
@@ -321,7 +322,8 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         uiEventStore: this.eventProvider,
         streamControl: streamControl,
         userControl: userControl,
-        securityStore: this.privilegeProvider
+        securityStore: this.privilegeProvider,
+        annotationProvider: this.annotationProvider
       });
       this._whiteboardControl.addObserver(this._boardObserver);
       streamControl.addObserver({
@@ -366,9 +368,8 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
       this._localUser = this._userControl.getLocalUser();
       this._isHost = [_type2.FcrUserRole.HOST, _type2.FcrUserRole.COHOST].includes(this._localUser.userRole);
       window.addEventListener('resize', this._resetCanvasPosition);
-      var _this$_whiteboardCont4 = this._whiteboardControl.getBoardActiveInfo(),
-        ownerUserId = _this$_whiteboardCont4.ownerUserId,
-        isActive = _this$_whiteboardCont4.isActive;
+      var isActive = this._whiteboardControl.getActivity();
+      var ownerUserId = this._whiteboardControl.getOwnerId();
       this._isActive = isActive;
       if (isActive) {
         this._checkBoard();
@@ -409,16 +410,16 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "onEvent",
     value: function onEvent(event, payload) {
-      var _this$_whiteboardCont6;
+      var _this$_whiteboardCont4;
       switch (event) {
         case _constant.FcrUIAction.OPEN_WHITEBOARD:
           if (!this._isActive) {
-            var _this$_whiteboardCont5;
-            (_this$_whiteboardCont5 = this._whiteboardControl) === null || _this$_whiteboardCont5 === void 0 || _this$_whiteboardCont5.active();
+            var _this$_whiteboardCont3;
+            (_this$_whiteboardCont3 = this._whiteboardControl) === null || _this$_whiteboardCont3 === void 0 || _this$_whiteboardCont3.active();
           }
           break;
         case _constant.FcrUIAction.CLOSE_WHITEBOARD:
-          (_this$_whiteboardCont6 = this._whiteboardControl) === null || _this$_whiteboardCont6 === void 0 || _this$_whiteboardCont6.inactive();
+          (_this$_whiteboardCont4 = this._whiteboardControl) === null || _this$_whiteboardCont4 === void 0 || _this$_whiteboardCont4.inactive();
           break;
         case _constant.FcrUIAction.WHITEBOARD_CHANGED:
           this._setCanvasBound(payload.action);
@@ -498,18 +499,17 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
         this._addDisposers();
         this._repositionToolbar();
         if (this._boardMainWindow) {
-          var _this$_whiteboardCont7;
-          this._setBackground(((_this$_whiteboardCont7 = this._whiteboardControl) === null || _this$_whiteboardCont7 === void 0 ? void 0 : _this$_whiteboardCont7.getBackgroundColor()) || this._boardBackground);
+          var _this$_whiteboardCont5, _this$_whiteboardCont6;
+          this._setBackground(((_this$_whiteboardCont5 = this._whiteboardControl) === null || _this$_whiteboardCont5 === void 0 ? void 0 : _this$_whiteboardCont5.getBackgroundColor()) || this._boardBackground);
           // this._toolbarStore!.observables.layoutReady = [
           //   LonelyWindowState.CLOSE,
           //   LonelyWindowState.DEFAULT,
           // ].includes(this._lonelyWindowState);
 
-          var _getBoardActiveInfo = this._whiteboardControl.getBoardActiveInfo(),
-            ownerUserId = _getBoardActiveInfo.ownerUserId,
-            isActive = _getBoardActiveInfo.isActive;
-          if (isActive) {
+          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 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);
             (_this$_boardStore2 = this._boardStore) === null || _this$_boardStore2 === void 0 || _this$_boardStore2.setPrivilege(this._isMyBoard || this._isHost);
@@ -736,10 +736,10 @@ var FcrWhiteboardUIModule = exports.FcrWhiteboardUIModule = /*#__PURE__*/functio
   }, {
     key: "_open",
     value: function _open() {
-      var _this$_whiteboardCont8;
+      var _this$_whiteboardCont7;
       this._joined = true;
       this._initialized = true;
-      (_this$_whiteboardCont8 = this._whiteboardControl) === null || _this$_whiteboardCont8 === void 0 || _this$_whiteboardCont8.open();
+      (_this$_whiteboardCont7 = this._whiteboardControl) === null || _this$_whiteboardCont7 === void 0 || _this$_whiteboardCont7.open();
     }
   }, {
     key: "_close",

package/lib/modules/widget/sdk.js

@@ -195,7 +195,6 @@ var FcrUIWidgetSDKImpl = exports.FcrUIWidgetSDKImpl = /*#__PURE__*/function () {
         if (action === 'apiResponse') {
           this.logger.debug('handlePostMessage apiResponse: ', event.data);
           var _event$data = event.data,
-            _action = _event$data.action,
             callId = _event$data.callId,
             returnValue = _event$data.returnValue;
           var controllerPromiseGroup = this._requestPromises.get(callId);

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

@@ -81,6 +81,12 @@ if (!window.runtime) {
       return {};
     },
     setUserSettingData: function setUserSettingData() {},
+    getActiveWindow: function getActiveWindow() {
+      return undefined;
+    },
+    getWindows: function getWindows() {
+      return [];
+    },
     initSDK: function initSDK() {},
     getIsSDKReady: function getIsSDKReady() {
       return Promise.resolve(false);
@@ -96,6 +102,9 @@ if (!window.runtime) {
     launchSuccess: function launchSuccess(roomId) {},
     launchFailure: function launchFailure(roomId, errorCode) {},
     onSetParameters: function onSetParameters(parameters) {},
-    setParameters: function setParameters(parameters) {}
+    setParameters: function setParameters(parameters) {},
+    getIsMeetingLaunched: function getIsMeetingLaunched() {
+      return Promise.resolve(false);
+    }
   };
 }