fcr-ui-scene 3.5.1 → 3.6.0

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

@@ -3,10 +3,7 @@
 require("core-js/modules/es.symbol.js");
 require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.symbol.to-primitive.js");
-require("core-js/modules/es.error.cause.js");
-require("core-js/modules/es.error.to-string.js");
 require("core-js/modules/es.array.is-array.js");
-require("core-js/modules/es.array.push.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");
@@ -37,24 +34,36 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToolbarStore = exports.ToolbarContext = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+require("core-js/modules/es.error.cause.js");
+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.object.to-string.js");
 require("core-js/modules/es.string.iterator.js");
 require("core-js/modules/es.weak-map.js");
 require("core-js/modules/esnext.weak-map.delete-all.js");
 require("core-js/modules/esnext.weak-map.emplace.js");
 require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/web.timers.js");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _mobx = require("mobx");
 var _type = require("../../type");
 var _react = require("react");
-var _rendererEvent = require("../../../../utilities/renderer-event");
+var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
 var _libs = _interopRequireDefault(require("../switch-theme/libs"));
-var _i18n = require("agora-ui-foundation/lib/i18n");
+var _tinycolor = _interopRequireDefault(require("tinycolor2"));
+var _decorator = require("agora-foundation/lib/decorator");
+var _imports = require("fcr-core/lib/imports");
+var _utils = require("../../utils");
+var _dayjs = _interopRequireDefault(require("dayjs"));
 var _ToolbarStore;
-var _initProto, _init_observables;
+var _initProto, _init_observables, _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; }
@@ -65,16 +74,28 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _setFunctionName(e, t, n) { "symbol" == _typeof(t) && (t = (t = t.description) ? "[" + t + "]" : ""); try { Object.defineProperty(e, "name", { configurable: !0, value: n ? n + " " + t : t }); } catch (e) {} return e; }
 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");
 var ToolbarStore = exports.ToolbarStore = /*#__PURE__*/function () {
-  function ToolbarStore() {
+  function ToolbarStore(_whiteboardControl, _roomControl) {
+    var _this = this;
     (0, _classCallCheck2["default"])(this, ToolbarStore);
-    _classPrivateFieldInitSpec(this, _A, (_initProto(this), _init_observables(this, {
+    (0, _defineProperty2["default"])(this, _ref, (_initProto(this), undefined));
+    (0, _defineProperty2["default"])(this, "_boardObserver", {
+      onRedoStateUpdated: function onRedoStateUpdated(enable) {
+        _this.observables.redoSteps = enable;
+      },
+      onUndoStateUpdated: function onUndoStateUpdated(enable) {
+        _this.observables.undoSteps = enable;
+      }
+    });
+    _classPrivateFieldInitSpec(this, _A, _init_observables(this, {
       currentTool: undefined,
       currentShape: undefined,
-      currentColor: '',
-      currentStrokeWidth: 0,
-      currentThemeType: (0, _libs["default"])(_i18n.transI18n)[0],
+      currentColor: colors[2],
+      currentStrokeWidth: 2,
+      currentThemeType: (0, _libs["default"])()[0],
       toolbarPosition: {
         x: 0,
         y: 0
@@ -90,12 +111,23 @@ var ToolbarStore = exports.ToolbarStore = /*#__PURE__*/function () {
       lastPen: undefined,
       lastShape: undefined,
       maxCountVisibleTools: 4,
-      layoutReady: false,
-      colors: ['#EFEFEF', '#FFEC42', '#FFB545', '#E44A19', '#4A4C5F', '#A1C573', '#51BD69', '#EB47A2', '#0E0E0E', '#50E3C2', '#547AFF', '#79479F'],
+      layoutReady: true,
+      colors: colors,
       commonColorIndex: 0,
       background: '#fff',
-      commonColors: ['#FFC908', '#4262FF']
-    })));
+      commonColors: ['#FFC908', '#4262FF'],
+      progress: 0
+    }));
+    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);
+        }
+      }
+    });
   }
   return (0, _createClass2["default"])(ToolbarStore, [{
     key: "observables",
@@ -105,141 +137,302 @@ var ToolbarStore = exports.ToolbarStore = /*#__PURE__*/function () {
     set: function set(v) {
       _classPrivateFieldSet(_A, this, v);
     }
+  }, {
+    key: "roomInfo",
+    get: function get() {
+      return this._roomControl.getRoomInfo();
+    }
+  }, {
+    key: "boardMainWindow",
+    get: function get() {
+      if (this._boardMainWindow) {
+        return this._boardMainWindow;
+      } else {
+        throw new Error('boardMainWindow is not initialized');
+      }
+    }
   }, {
     key: "redo",
     value: function redo() {
-      (0, _rendererEvent.sendEvent)({
-        action: _type.ToolbarEvents.REDO,
-        payload: null
-      });
+      this.boardMainWindow.redo();
     }
   }, {
     key: "undo",
     value: function undo() {
-      (0, _rendererEvent.sendEvent)({
-        action: _type.ToolbarEvents.UNDO,
-        payload: null
-      });
+      this.boardMainWindow.undo();
     }
   }, {
     key: "clean",
     value: function clean() {
-      (0, _rendererEvent.sendEvent)({
-        action: _type.ToolbarEvents.CLEAN,
-        payload: null
-      });
+      this.boardMainWindow.clean();
     }
   }, {
     key: "setTool",
     value: function setTool(tool) {
-      (0, _rendererEvent.sendEvent)({
-        action: _type.ToolbarEvents.SET_TOOL,
-        payload: tool
-      });
+      this.observables.currentTool = tool;
+      this.observables.currentShape = undefined;
+      this.boardMainWindow.setToolType(tool);
     }
   }, {
     key: "setPen",
     value: function setPen(shape) {
-      (0, _rendererEvent.sendEvent)({
-        action: _type.ToolbarEvents.SET_PEN,
-        payload: shape
-      });
+      this.observables.currentShape = shape;
+      this.observables.lastPen = shape;
+      this.observables.currentTool = this._convertShapeToBoardToolType(shape);
+      this.boardMainWindow.setToolType(this._convertShapeToBoardToolType(shape));
+      this.boardMainWindow.setStrokeWidth(this.observables.currentStrokeWidth);
+      this.boardMainWindow.setStrokeColor((0, _tinycolor["default"])(this.observables.currentColor).toRgb());
     }
   }, {
     key: "setShape",
     value: function setShape(shape) {
-      (0, _rendererEvent.sendEvent)({
-        action: _type.ToolbarEvents.SET_SHAPE,
-        payload: shape
-      });
+      this.observables.currentShape = shape;
+      this.observables.lastShape = shape;
+      this.observables.currentTool = this._convertShapeToBoardToolType(shape);
+      this.boardMainWindow.setToolType(this._convertShapeToBoardToolType(shape));
+      this.boardMainWindow.setStrokeWidth(this.observables.currentStrokeWidth);
+      this.boardMainWindow.setStrokeColor((0, _tinycolor["default"])(this.observables.currentColor).toRgb());
     }
   }, {
     key: "setStrokeColor",
     value: function setStrokeColor(color) {
-      (0, _rendererEvent.sendEvent)({
-        action: _type.ToolbarEvents.SET_STROKE_COLOR,
-        payload: color
-      });
+      this.observables.currentColor = color;
+      this.boardMainWindow.setStrokeColor((0, _tinycolor["default"])(color).toRgb());
     }
   }, {
     key: "setStrokeWidth",
     value: function setStrokeWidth(strokeWidth) {
-      (0, _rendererEvent.sendEvent)({
-        action: _type.ToolbarEvents.SET_STROKE_WIDTH,
-        payload: strokeWidth
-      });
+      this.observables.currentStrokeWidth = strokeWidth;
+      this.boardMainWindow.setStrokeWidth(strokeWidth);
     }
   }, {
     key: "clickExpansionTool",
-    value: function clickExpansionTool() {
-      (0, _rendererEvent.sendEvent)({
-        action: _type.ToolbarEvents.CLICK_EXPANSION_TOOL,
-        payload: null
-      });
-    }
+    value: function clickExpansionTool() {}
   }, {
     key: "setToolbarPosition",
     value: function setToolbarPosition(pos) {
-      (0, _rendererEvent.sendEvent)({
-        action: _type.ToolbarEvents.SET_TOOLBAR_POSITION,
-        payload: pos
-      });
+      this.observables.toolbarPosition = pos;
     }
   }, {
     key: "dragToolbar",
     value: function dragToolbar() {
-      (0, _rendererEvent.sendEvent)({
-        action: _type.ToolbarEvents.DRAG_TOOLBAR,
-        payload: null
-      });
+      this.observables.toolbarReleased = false;
     }
   }, {
     key: "releaseToolbar",
     value: function releaseToolbar() {
-      (0, _rendererEvent.sendEvent)({
-        action: _type.ToolbarEvents.RELEASE_TOOLBAR,
-        payload: null
-      });
+      this.observables.toolbarReleased = true;
+      this._updateDockPlacement();
+      this.repositionToolbar();
     }
   }, {
     key: "captureScreen",
     value: function captureScreen() {
       var hideWindow = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      (0, _rendererEvent.sendEvent)({
-        action: _type.ToolbarEvents.CAPTURE_SCREEN,
-        payload: {
-          hideWindow: hideWindow
-        }
+      window.runtime.captureScreen({
+        hideWindow: hideWindow
       });
     }
   }, {
     key: "saveDraft",
     value: function saveDraft() {
-      (0, _rendererEvent.sendEvent)({
-        action: _type.ToolbarEvents.SAVE_DRAFT,
-        payload: null
-      });
+      this._getSnapshotImage();
     }
   }, {
     key: "setTheme",
     value: function setTheme(theme) {
-      (0, _rendererEvent.sendEvent)({
-        action: _type.ToolbarEvents.SET_THEME,
-        payload: theme
-      });
+      this._setBackgroundColor(theme.background);
+      this.observables.colors = theme.colors;
+      this.observables.currentThemeType = theme;
     }
   }, {
     key: "setCommonColor",
     value: function setCommonColor(color) {
-      (0, _rendererEvent.sendEvent)({
-        action: _type.ToolbarEvents.SET_COMMON_COLOR,
-        payload: color
-      });
+      if (this.observables.commonColors.length < 2) this.observables.commonColors.push(color);
+      if (this.observables.commonColors.length === 2) {
+        this.observables.commonColors = [color, this.observables.commonColors[0]];
+      }
+    }
+  }, {
+    key: "repositionToolbar",
+    value: function repositionToolbar() {
+      var toolbarDom = document.querySelector(".".concat(_utils.toolbarClassName));
+      var containerDom = document.querySelector(".".concat(_utils.windowClassName));
+      if (containerDom && toolbarDom) {
+        setTimeout(this._updateMaxVisibleTools);
+        // wait until the UI rerenders, then actual dimensions can be obtained
+        setTimeout(this._updateDockPosition);
+      }
+    }
+  }, {
+    key: "release",
+    value: function release() {
+      var _this$_boardMainWindo;
+      (_this$_boardMainWindo = this._boardMainWindow) === null || _this$_boardMainWindo === void 0 || _this$_boardMainWindo.removeObserver(this._boardObserver);
+    }
+  }, {
+    key: "_updateDockPlacement",
+    value: function _updateDockPlacement() {
+      var _this2 = this;
+      var toolbarDom = document.querySelector(".".concat(_utils.toolbarClassName));
+      var containerDom = document.querySelector(".".concat(_utils.windowClassName));
+      if (containerDom && toolbarDom) {
+        var containerClientRect = containerDom.getBoundingClientRect();
+        var toolbarClientRect = toolbarDom.getBoundingClientRect();
+        var toolbarCenterPos = toolbarClientRect.left - containerClientRect.left + toolbarClientRect.width / 2;
+        (0, _mobx.runInAction)(function () {
+          if (toolbarCenterPos > containerClientRect.width / 2) {
+            // right
+            _this2.observables.toolbarDockPosition.placement = 'right';
+          } else {
+            // left
+            _this2.observables.toolbarDockPosition.placement = 'left';
+          }
+        });
+      }
+    }
+  }, {
+    key: "_updateDockPosition",
+    value: function _updateDockPosition() {
+      var _this3 = this;
+      var toolbarDom = document.querySelector(".".concat(_utils.toolbarClassName));
+      var containerDom = document.querySelector(".".concat(_utils.windowClassName));
+      if (containerDom && toolbarDom) {
+        var containerClientRect = containerDom.getBoundingClientRect();
+        var toolbarClientRect = toolbarDom.getBoundingClientRect();
+        var toolbarOffsetTop = 4;
+        (0, _mobx.runInAction)(function () {
+          if (_this3.observables.toolbarDockPosition.placement === 'right') {
+            // right
+            _this3.observables.toolbarDockPosition = {
+              x: containerClientRect.width - toolbarClientRect.width,
+              y: toolbarOffsetTop,
+              placement: 'right'
+            };
+          } else {
+            // left
+            _this3.observables.toolbarDockPosition = {
+              x: 0,
+              y: toolbarOffsetTop,
+              placement: 'left'
+            };
+          }
+        });
+      }
+    }
+  }, {
+    key: "_updateMaxVisibleTools",
+    value: function _updateMaxVisibleTools() {
+      var _this4 = this;
+      var containerDom = document.querySelector(".".concat(_utils.windowClassName));
+      if (containerDom) {
+        var containerClientRect = containerDom.getBoundingClientRect();
+        var placement = this.observables.toolbarDockPosition.placement;
+        (0, _mobx.runInAction)(function () {
+          if (placement === 'right') {
+            var availableHeight = containerClientRect.height - _utils.verticalPadding - _utils.defaultToolsRetain - _utils.sceneNavHeight;
+            _this4.observables.maxCountVisibleTools = Math.floor(availableHeight / _utils.heightPerTool);
+            if (_this4.observables.maxCountVisibleTools >= 9) {
+              var visibleTools = _this4.observables.maxCountVisibleTools;
+              _this4.observables.maxCountVisibleTools += Math.floor((availableHeight - visibleTools * _utils.heightPerTool) / _utils.heightPerColor);
+            }
+          } else {
+            var _availableHeight = containerClientRect.height - _utils.verticalPadding - _utils.defaultToolsRetain - _utils.sceneNavHeight;
+            _this4.observables.maxCountVisibleTools = Math.floor(_availableHeight / _utils.heightPerTool);
+            if (_this4.observables.maxCountVisibleTools >= 9) {
+              var _visibleTools = _this4.observables.maxCountVisibleTools;
+              _this4.observables.maxCountVisibleTools += Math.floor((_availableHeight - _visibleTools * _utils.heightPerTool) / _utils.heightPerColor);
+            }
+          }
+        });
+      }
+    }
+  }, {
+    key: "_setBackgroundColor",
+    value: function _setBackgroundColor(bgColor) {
+      var _this$_whiteboardCont;
+      var color = bgColor || 'white';
+      (_this$_whiteboardCont = this._whiteboardControl) === null || _this$_whiteboardCont === void 0 || _this$_whiteboardCont.setBackgroundColor(color);
+    }
+  }, {
+    key: "_getSnapshotImage",
+    value: function () {
+      var _getSnapshotImage2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+        var _this5 = this;
+        var mainWindow, progress, imageData;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              this.observables.progress = 0;
+              mainWindow = this.boardMainWindow;
+              if (!mainWindow) {
+                _context.next = 8;
+                break;
+              }
+              progress = setInterval(function () {
+                if (_this5.observables.progress < 100) {
+                  _this5.observables.progress += 1;
+                } else {
+                  clearInterval(progress);
+                }
+              }, 4);
+              _context.next = 6;
+              return mainWindow.getSnapshotImage();
+            case 6:
+              imageData = _context.sent;
+              (0, _mobx.runInAction)(function () {
+                setTimeout(function () {
+                  var _this5$roomInfo;
+                  _this5.observables.progress = 100;
+                  clearInterval(progress);
+                  var fileName = "".concat((_this5$roomInfo = _this5.roomInfo) === null || _this5$roomInfo === void 0 ? void 0 : _this5$roomInfo.roomName, "_").concat((0, _dayjs["default"])().format('YYYYMMDD_HHmmSSS'), ".jpg");
+                  (0, _utils.downloadImageData)(imageData, fileName);
+
+                  // this._uiEventStore?.showToast({
+                  //   type: 'info',
+                  //   message: transI18n('fmt_screenshare_whiteboard_tips_savedsuccessfully'),
+                  // });
+                }, 400);
+              });
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function _getSnapshotImage() {
+        return _getSnapshotImage2.apply(this, arguments);
+      }
+      return _getSnapshotImage;
+    }()
+  }, {
+    key: "_convertShapeToBoardToolType",
+    value: function _convertShapeToBoardToolType(shape) {
+      switch (shape) {
+        case _type.FcrBoardShape.Arrow:
+          return _enums.FcrBoardToolType.ARROW;
+        case _type.FcrBoardShape.Curve:
+          return _enums.FcrBoardToolType.CURVE;
+        case _type.FcrBoardShape.Ellipse:
+          return _enums.FcrBoardToolType.ELLIPSE;
+        case _type.FcrBoardShape.Pentagram:
+          return _enums.FcrBoardToolType.PENTAGRAM;
+        case _type.FcrBoardShape.Rectangle:
+          return _enums.FcrBoardToolType.RECTANGLE;
+        case _type.FcrBoardShape.Rhombus:
+          return _enums.FcrBoardToolType.RHOMBUS;
+        case _type.FcrBoardShape.Straight:
+          return _enums.FcrBoardToolType.STRAIGHT;
+        case _type.FcrBoardShape.Triangle:
+          return _enums.FcrBoardToolType.TRIANGLE;
+        default:
+          return _enums.FcrBoardToolType.NONE;
+      }
     }
   }]);
 }();
 _ToolbarStore = ToolbarStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_ToolbarStore, [[_mobx.observable, 1, "observables"]], []).e, 2);
+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);
 _init_observables = _applyDecs$e[0];
 _initProto = _applyDecs$e[1];
 var ToolbarContext = exports.ToolbarContext = /*#__PURE__*/(0, _react.createContext)({});

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

@@ -1,5 +1,4 @@
 import { FcrConnectionState } from 'fcr-core';
-import React from 'react';
 export interface DraggableHandler {
     getPosition(): {
         x: number;
@@ -42,7 +41,7 @@ declare const boardUIContextDefault: {
     setWriteEnable: (enable: boolean) => void;
     setWhiteboardVisible: (visible: boolean) => void;
 };
-export declare const BoardUIContext: React.Context<{
+export declare const BoardUIContext: import("react").Context<{
     observables: {
         canOperate: boolean;
         minimized: boolean;

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

@@ -16,8 +16,6 @@ export declare class FcrWhiteboardUIModule extends UIModule {
     private _boardStore?;
     private _connectionState;
     private _boardMainWindow;
-    private _toolbarContext?;
-    private _defaultBoardState;
     private _toolbarStore?;
     private _controlbarStore?;
     private _initWidth;
@@ -26,7 +24,7 @@ export declare class FcrWhiteboardUIModule extends UIModule {
     private _isActive;
     private _timer;
     private _isMyBoard;
-    private _t;
+    private _boardObserver;
     protected logger: import("agora-foundation/lib/logger").Logger;
     protected _mounted: boolean;
     protected _initialized: boolean;
@@ -76,29 +74,18 @@ export declare class FcrWhiteboardUIModule extends UIModule {
     unmount(): void;
     unload(): void;
     private _setBackground;
-    private _resetToolIfNeed;
     private _checkBoard;
     private _boardUIEvents;
     private _setCanvasBound;
     private _resetCanvasPosition;
     private _resetScaleState;
     private _createBoardUIContext;
-    private _createToolbarUIContext;
-    private _updateDockPosition;
-    private _updateDockPlacement;
     private _repositionToolbar;
-    private _updateMaxVisibleTools;
-    private _setBackgroundColor;
-    private _updateRedo;
-    private _updateUndo;
     private _setConnectionState;
     private _open;
     private _close;
-    private _getSnapshotImage;
     private _openLonelyWindow;
     private _setJoinSuccessed;
-    private _boardObservble;
     private _addDisposers;
     private _alertWhenReplace;
-    private _convertShapeToBoardToolType;
 }