fcr-ui-scene 3.7.1 → 3.7.3

package/lib/fragments/whiteboard/store.js

@@ -0,0 +1,475 @@
+"use strict";
+
+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.array.filter.js");
+require("core-js/modules/es.array.for-each.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");
+require("core-js/modules/es.map.js");
+require("core-js/modules/es.number.constructor.js");
+require("core-js/modules/es.object.create.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+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/esnext.function.metadata.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/esnext.map.delete-all.js");
+require("core-js/modules/esnext.map.emplace.js");
+require("core-js/modules/esnext.map.every.js");
+require("core-js/modules/esnext.map.filter.js");
+require("core-js/modules/esnext.map.find.js");
+require("core-js/modules/esnext.map.find-key.js");
+require("core-js/modules/esnext.map.includes.js");
+require("core-js/modules/esnext.map.key-of.js");
+require("core-js/modules/esnext.map.map-keys.js");
+require("core-js/modules/esnext.map.map-values.js");
+require("core-js/modules/esnext.map.merge.js");
+require("core-js/modules/esnext.map.reduce.js");
+require("core-js/modules/esnext.map.some.js");
+require("core-js/modules/esnext.map.update.js");
+require("core-js/modules/esnext.symbol.metadata.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FragmentWhiteboardStoreContext = exports.FragmentWhiteboardStore = 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.date.to-json.js");
+require("core-js/modules/es.json.stringify.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.string.search.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.json.parse.js");
+require("core-js/modules/esnext.weak-map.delete-all.js");
+require("core-js/modules/esnext.weak-map.emplace.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/web.url-search-params.js");
+require("core-js/modules/web.url-search-params.delete.js");
+require("core-js/modules/web.url-search-params.has.js");
+require("core-js/modules/web.url-search-params.size.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 _fcrCore = require("fcr-core");
+var _react = require("react");
+var _logger = require("../../utilities/logger");
+var _libs = require("../annotation/libs");
+var _decorator = require("agora-foundation/lib/decorator");
+var _imports = require("fcr-core/lib/imports");
+var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
+var _type = require("../../modules/secondary-window/type");
+var _libs2 = require("../annotation/toolbar/components/graphic-tool/graphic-panel/libs");
+var _mobx = require("mobx");
+var _tools = require("../../utilities/tools");
+var _FragmentWhiteboardStore;
+var _initProto, _init_currentTool;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
+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; }
+function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
+function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
+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)]; } }; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+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 STORAGE_KEY_ANNOTATION_BOARD_OPTIONS = 'annotation_board_options';
+var STORAGE_KEY_WHITEBOARD_OPTIONS = 'whiteboard_options';
+var STORAGE_KEY_ANNOTATION_NICKNAME = 'annotation_nickname';
+var _A = /*#__PURE__*/new WeakMap();
+var FragmentWhiteboardStore = exports.FragmentWhiteboardStore = /*#__PURE__*/function () {
+  function FragmentWhiteboardStore() {
+    var _this = this;
+    (0, _classCallCheck2["default"])(this, FragmentWhiteboardStore);
+    (0, _defineProperty2["default"])(this, "logger", (_initProto(this), (0, _logger.createFragmentLogger)({
+      prefix: 'FragmentWhiteboardStore'
+    })));
+    (0, _defineProperty2["default"])(this, "_engine", null);
+    (0, _defineProperty2["default"])(this, "_sharingType", 'whiteboard');
+    (0, _defineProperty2["default"])(this, "_isMounted", false);
+    (0, _defineProperty2["default"])(this, "_boardObserver", {
+      onConnectionStateUpdated: this._handleConnectionStateUpdated
+    });
+    (0, _defineProperty2["default"])(this, "_boardMainWindowObserver", {
+      onUndoStateUpdated: function onUndoStateUpdated(enable) {
+        _this.logger.info("[whiteboard-fragment]: undo state updated, enable ".concat(enable));
+        // @ts-ignore
+        window.parent.FcrUIMainWindowRenderer.notifyObservers('onRedoStepsUpdated', enable);
+      },
+      onRedoStateUpdated: function onRedoStateUpdated(enable) {
+        _this.logger.info("[whiteboard-fragment]: redo state updated, enable ".concat(enable));
+        // @ts-ignore
+        window.parent.FcrUIMainWindowRenderer.notifyObservers('onUndoStepsUpdated', enable);
+      }
+    });
+    (0, _defineProperty2["default"])(this, "_mainWindowObserver", {
+      onBackgroundColorUpdated: function onBackgroundColorUpdated(color) {
+        var _this$_boardInstance;
+        _this.logger.info("[whiteboard-fragment]: onBackgroundColorUpdated ".concat(color));
+        (_this$_boardInstance = _this._boardInstance) === null || _this$_boardInstance === void 0 || _this$_boardInstance.setBackgroundColor(color);
+      },
+      onSharingUserUpdated: function onSharingUserUpdated(userInfo) {
+        _this.logger.info("[whiteboard-fragment]: onSharingUserUpdated ".concat(userInfo));
+      },
+      onPermissionUpdated: function onPermissionUpdated(hasWriteBoardPermission) {
+        _this.logger.info("[whiteboard-fragment]: onPermissionUpdated ".concat(hasWriteBoardPermission));
+        if (_this._sharingType === 'whiteboard') {
+          var _this$_whiteboardCont, _this$_whiteboardCont2;
+          hasWriteBoardPermission ? (_this$_whiteboardCont = _this._whiteboardControl) === null || _this$_whiteboardCont === void 0 ? void 0 : _this$_whiteboardCont.addPermission(_imports.FcrWhiteboardPermissionFlag.all) : (_this$_whiteboardCont2 = _this._whiteboardControl) === null || _this$_whiteboardCont2 === void 0 ? void 0 : _this$_whiteboardCont2.removePermission(_imports.FcrWhiteboardPermissionFlag.all);
+        } else {
+          var _this$_annotationCont, _this$_annotationCont2;
+          hasWriteBoardPermission ? (_this$_annotationCont = _this._annotationControl) === null || _this$_annotationCont === void 0 ? void 0 : _this$_annotationCont.addPermission(_imports.FcrWhiteboardPermissionFlag.all) : (_this$_annotationCont2 = _this._annotationControl) === null || _this$_annotationCont2 === void 0 ? void 0 : _this$_annotationCont2.removePermission(_imports.FcrWhiteboardPermissionFlag.all);
+        }
+      },
+      onWhiteboardInActive: function onWhiteboardInActive(inActive) {
+        _this.logger.info("[whiteboard-fragment]: onWhiteboardInActive ".concat(inActive));
+        _this.unload();
+      },
+      onWhiteboardToolSelected: function onWhiteboardToolSelected(tools) {
+        var _this$_boardInstance2, _this$_boardInstance3, _this$_boardInstance4, _this$_boardInstance5, _this$_boardInstance6, _this$_boardInstance7, _this$_boardInstance8;
+        var action = tools.action,
+          tool = tools.tool;
+        _this.logger.info("[whiteboard-fragment]: onWhiteboardToolSelected ".concat(action, " - ").concat(tool));
+        switch (action) {
+          case _type.WhiteboardToolAction.TOOL:
+            _this.currentTool = tool;
+            (_this$_boardInstance2 = _this._boardInstance) === null || _this$_boardInstance2 === void 0 || _this$_boardInstance2.setToolType(tool);
+            break;
+          case _type.WhiteboardToolAction.SHAPE:
+            _this.currentTool = (0, _libs2.convertShapeToBoardToolType)(tool);
+            (_this$_boardInstance3 = _this._boardInstance) === null || _this$_boardInstance3 === void 0 || _this$_boardInstance3.setToolType((0, _libs2.convertShapeToBoardToolType)(tool));
+            break;
+          case _type.WhiteboardToolAction.WIDTH:
+            (_this$_boardInstance4 = _this._boardInstance) === null || _this$_boardInstance4 === void 0 || _this$_boardInstance4.setStrokeWidth(tool);
+            break;
+          case _type.WhiteboardToolAction.COLOR:
+            (_this$_boardInstance5 = _this._boardInstance) === null || _this$_boardInstance5 === void 0 || _this$_boardInstance5.setStrokeColor(tool);
+            break;
+          case _type.WhiteboardToolAction.UNDO:
+            (_this$_boardInstance6 = _this._boardInstance) === null || _this$_boardInstance6 === void 0 || _this$_boardInstance6.undo();
+            break;
+          case _type.WhiteboardToolAction.REDO:
+            (_this$_boardInstance7 = _this._boardInstance) === null || _this$_boardInstance7 === void 0 || _this$_boardInstance7.redo();
+            break;
+          case _type.WhiteboardToolAction.CLEAR:
+            (_this$_boardInstance8 = _this._boardInstance) === null || _this$_boardInstance8 === void 0 || _this$_boardInstance8.clean();
+            break;
+        }
+      },
+      onSaveDraft: function () {
+        var _onSaveDraft = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(saveDraft) {
+          var _this$_boardInstance9;
+          var image;
+          return _regenerator["default"].wrap(function (_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                _this.logger.info("[whiteboard-fragment]: onSaveDraft ".concat(saveDraft));
+                _context.next = 1;
+                return (_this$_boardInstance9 = _this._boardInstance) === null || _this$_boardInstance9 === void 0 ? void 0 : _this$_boardInstance9.getSnapshotImage();
+              case 1:
+                image = _context.sent;
+                _this.logger.info("[whiteboard-fragment]: save draft image");
+                // @ts-ignore
+                window.parent.FcrUIMainWindowRenderer.notifyObservers('onDraftSaved', image);
+              case 2:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        function onSaveDraft(_x) {
+          return _onSaveDraft.apply(this, arguments);
+        }
+        return onSaveDraft;
+      }()
+    });
+    (0, _defineProperty2["default"])(this, "_engineObserver", {});
+    _classPrivateFieldInitSpec(this, _A, _init_currentTool(this, _enums.FcrBoardToolType.NONE));
+    var urlParams = new URLSearchParams(window.location.search);
+    var type = urlParams.get('type');
+    // @ts-ignore
+    window.parent.FcrUIMainWindowRenderer.addObserver(this._mainWindowObserver);
+    window.require = parent.window.require;
+    var appId = _tools.storage.get('annotation_rtm_app_id') || '';
+    var boardOptions = _tools.storage.get(STORAGE_KEY_WHITEBOARD_OPTIONS);
+    var _JSON$parse = JSON.parse(boardOptions || '{}'),
+      roomToken = _JSON$parse.boardUserToken,
+      userId = _JSON$parse.boardUserUuid;
+    if (type === 'annotation') {
+      this._sharingType = 'annotation';
+      this.logger.info("[whiteboard-fragment]: sharing type is annotation, with a annotation user id: ".concat(userId));
+    } else {
+      this._sharingType = 'whiteboard';
+      this.logger.info("[whiteboard-fragment]: sharing type is whiteboard, with a board user id: ".concat(userId));
+    }
+    if (!roomToken) {
+      this.logger.error("[whiteboard-fragment]: room token is not found, the sharing type is ".concat(this._sharingType));
+      return;
+    }
+    if (!userId) {
+      this.logger.error("[whiteboard-fragment]: user id is not found, the sharing type is ".concat(this._sharingType));
+      return;
+    }
+    this._init(this._initEngine({
+      userId: userId,
+      roomToken: roomToken,
+      appId: appId
+    }));
+  }
+  return (0, _createClass2["default"])(FragmentWhiteboardStore, [{
+    key: "_boardControl",
+    get: function get() {
+      if (!this._whiteboardControl) {
+        throw new Error('whiteboard control is not initialized');
+      }
+      return this._whiteboardControl;
+    }
+  }, {
+    key: "currentTool",
+    get: function get() {
+      return _classPrivateFieldGet(_A, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_A, this, v);
+    }
+  }, {
+    key: "boardDom",
+    get: function get() {
+      return this._boardDom;
+    }
+  }, {
+    key: "sharingType",
+    get: function get() {
+      return this._sharingType;
+    }
+  }, {
+    key: "handleBoardDomLoad",
+    value: function handleBoardDomLoad(dom) {
+      this._boardDom = dom;
+    }
+  }, {
+    key: "unload",
+    value: function unload() {
+      var _this$_engine;
+      this.logger.info('[whiteboard-fragment][unload]: start unload');
+      this._boardControl.removeObserver(this._boardObserver);
+      (_this$_engine = this._engine) === null || _this$_engine === void 0 || _this$_engine.removeObserver(this._engineObserver);
+      this._unmount();
+      this._engine = null;
+    }
+  }, {
+    key: "log",
+    value: function log(message) {
+      this.logger.info(message);
+    }
+  }, {
+    key: "_mount",
+    value: function _mount() {
+      this.logger.info("[whiteboard-fragment]: mounted board dom");
+      if (this._boardDom && this._boardInstance && !this._isMounted) {
+        this._boardDom.appendChild(this._boardInstance.getContentView());
+        this._isMounted = true;
+      }
+    }
+  }, {
+    key: "_unmount",
+    value: function _unmount() {
+      this.logger.info("[whiteboard-fragment]: unmounted board dom");
+      if (this._boardDom && this._boardInstance && this._isMounted) {
+        this._isMounted = false;
+        this._boardDom.removeChild(this._boardInstance.getContentView());
+      }
+    }
+  }, {
+    key: "_handleConnectionStateUpdated",
+    value: function _handleConnectionStateUpdated(state) {
+      this.logger.info("[whitebaord-fragment]: connection state updated: ".concat(_fcrCore.FcrConnectionState[state]));
+      // @ts-ignore
+      window.parent.FcrUIMainWindowRenderer.notifyObservers('onConnectionStateUpdated', state);
+      if (state === _fcrCore.FcrConnectionState.CONNECTED) {
+        var _this$_annotationCont3, _this$_boardInstance0;
+        this.logger.info(// @ts-ignore
+        "[whiteboard-fragment]: connection state updated: ".concat(_fcrCore.FcrConnectionState[state], ", background color: ").concat(window.parent.FcrUIMainWindowRenderer.backgroundColor));
+        this._boardInstance = this._sharingType === 'whiteboard' ? this._boardControl.getMainWindow() : (_this$_annotationCont3 = this._annotationControl) === null || _this$_annotationCont3 === void 0 ? void 0 : _this$_annotationCont3.getMainWindow();
+        var backgroundColor = this._sharingType === 'whiteboard' ?
+        // @ts-ignore
+        window.parent.FcrUIMainWindowRenderer.backgroundColor : 'transparent';
+        (_this$_boardInstance0 = this._boardInstance) === null || _this$_boardInstance0 === void 0 || _this$_boardInstance0.setBackgroundColor(backgroundColor);
+        this._boardInstance && this._boardInstance.addObserver(this._boardMainWindowObserver);
+        this._mount();
+      }
+    }
+  }, {
+    key: "_init",
+    value: function () {
+      var _init2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(engine) {
+        var _this2 = this;
+        return _regenerator["default"].wrap(function (_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              this._engineObserver = {
+                onConnectionStateUpdated: function onConnectionStateUpdated(state) {
+                  if (state === _fcrCore.FcrConnectionState.CONNECTED) {
+                    _this2._engine = engine;
+                    _this2._sharingType === 'whiteboard' ? _this2._initWhiteboardControl() : _this2._initAnnotationControl();
+                    _this2.logger.info("[whiteboard-fragment][initEngine]: engine connection state updated => CONNECTED}");
+                  }
+                  if (state === _fcrCore.FcrConnectionState.DISCONNECTED) {
+                    _this2.logger.info("[whiteboard-fragment][initEngine]: engine connection state updated => DISCONNECTED, the engine is ".concat(_this2._engine));
+                    _this2._engine && engine.login();
+                  }
+                  if (state === _fcrCore.FcrConnectionState.CONNECTING) {
+                    _this2.logger.info("[whiteboard-fragment][initEngine]: engine connection state updated => CONNECTING");
+                  }
+                  if (state === _fcrCore.FcrConnectionState.RECONNECTING) {
+                    _this2.logger.info("[whiteboard-fragment][initEngine]: engine connection state updated => RECONNECTING");
+                  }
+                  if (state === _fcrCore.FcrConnectionState.ABORTED) {
+                    _this2.logger.info("[whiteboard-fragment][initEngine]: engine connection state updated => ABORTED, the engine is ".concat(_this2._engine));
+                    _this2._engine && engine.login();
+                  }
+                }
+              };
+              engine.addObserver(this._engineObserver);
+              engine.login();
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function _init(_x2) {
+        return _init2.apply(this, arguments);
+      }
+      return _init;
+    }()
+  }, {
+    key: "_initWhiteboardControl",
+    value: function () {
+      var _initWhiteboardControl2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+        var nickName, boardOptions, _JSON$parse2, boardAppId, boardId, boardRegion, boardToken, userId, config;
+        return _regenerator["default"].wrap(function (_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              nickName = _tools.storage.get(STORAGE_KEY_ANNOTATION_NICKNAME) || '';
+              boardOptions = _tools.storage.get(STORAGE_KEY_WHITEBOARD_OPTIONS);
+              _JSON$parse2 = JSON.parse(boardOptions || '{}'), boardAppId = _JSON$parse2.boardAppId, boardId = _JSON$parse2.boardId, boardRegion = _JSON$parse2.boardRegion, boardToken = _JSON$parse2.boardToken, userId = _JSON$parse2.boardUserUuid;
+              config = {
+                userId: userId,
+                nickName: nickName,
+                boardConfig: {
+                  boardAppId: boardAppId,
+                  boardId: boardId,
+                  boardRegion: boardRegion,
+                  boardToken: boardToken
+                }
+              };
+              this.logger.info("[whiteboard-fragment]: start create whiteboard sub process with config: ".concat(JSON.stringify(config)));
+              this._whiteboardControl = new _imports.FcrWhiteboardControlFactoryImpl(
+              // @ts-ignore
+              this._engine._rteEngine._rtmClient._client).createForSubProcess(config);
+              this.logger.info("[whiteboard-fragment]: whiteboard sub process created, the control is ".concat(this._whiteboardControl));
+              this._whiteboardControl.addObserver(this._boardObserver);
+              _context3.next = 1;
+              return this._whiteboardControl.open();
+            case 1:
+              this.logger.info("[whiteboard-fragment]: whiteboard opened, the instance is ".concat(this._boardInstance));
+            case 2:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this);
+      }));
+      function _initWhiteboardControl() {
+        return _initWhiteboardControl2.apply(this, arguments);
+      }
+      return _initWhiteboardControl;
+    }()
+  }, {
+    key: "_initAnnotationControl",
+    value: function () {
+      var _initAnnotationControl2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+        var nickName, annotationOptions, _JSON$parse3, boardAppId, boardId, region, boardToken, userId, config;
+        return _regenerator["default"].wrap(function (_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              nickName = _tools.storage.get(STORAGE_KEY_ANNOTATION_NICKNAME) || '';
+              annotationOptions = _tools.storage.get(STORAGE_KEY_ANNOTATION_BOARD_OPTIONS);
+              _JSON$parse3 = JSON.parse(annotationOptions || '{}'), boardAppId = _JSON$parse3.boardAppId, boardId = _JSON$parse3.boardId, region = _JSON$parse3.boardRegion, boardToken = _JSON$parse3.boardToken, userId = _JSON$parse3.boardUserUuid;
+              config = {
+                userId: userId,
+                nickName: nickName,
+                extra: {
+                  boardAppId: boardAppId,
+                  boardId: boardId,
+                  region: region,
+                  boardToken: boardToken
+                },
+                size: {
+                  width: 1920,
+                  height: 1220
+                }
+              };
+              this.logger.info("[whiteboard-fragment]: start create annotation sub process with config: ".concat(JSON.stringify(config)));
+              this._annotationControl = new _imports.FcrAnnotationControlFactoryImpl(
+              // @ts-ignore
+              this._engine._rteEngine._rtmClient._client).createForSubProcess(config);
+              this.logger.info("[whiteboard-fragment]: annotation sub process created, the control is ".concat(this._annotationControl));
+              this._annotationControl.addObserver(this._boardObserver);
+              _context4.next = 1;
+              return this._annotationControl.open();
+            case 1:
+              this.logger.info("[whiteboard-fragment]: annotation opened, the instance is ".concat(this._boardInstance));
+            case 2:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4, this);
+      }));
+      function _initAnnotationControl() {
+        return _initAnnotationControl2.apply(this, arguments);
+      }
+      return _initAnnotationControl;
+    }()
+  }, {
+    key: "_initEngine",
+    value: function _initEngine(config) {
+      var userId = config.userId,
+        token = config.roomToken,
+        appId = config.appId;
+      this.logger.info("[whiteboard-fragment][initEngine]: init engine with config => ".concat(JSON.stringify(config)));
+      return new _fcrCore.FcrCoreEngine(_objectSpread({
+        appId: appId,
+        token: token,
+        userId: userId,
+        region: _fcrCore.FcrRegion.CN
+      }, _libs.engineRestConfig));
+    }
+  }]);
+}();
+_FragmentWhiteboardStore = FragmentWhiteboardStore;
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_FragmentWhiteboardStore, [[_mobx.observable, 1, "currentTool"], [_decorator.bound, 2, "handleBoardDomLoad"], [_decorator.bound, 2, "_mount"], [_decorator.bound, 2, "_unmount"], [_decorator.bound, 2, "_handleConnectionStateUpdated"], [_decorator.bound, 2, "_init"], [_decorator.bound, 2, "_initWhiteboardControl"], [_decorator.bound, 2, "_initAnnotationControl"], [_decorator.bound, 2, "_initEngine"]], []).e, 2);
+_init_currentTool = _applyDecs$e[0];
+_initProto = _applyDecs$e[1];
+var FragmentWhiteboardStoreContext = exports.FragmentWhiteboardStoreContext = /*#__PURE__*/(0, _react.createContext)(null);

package/lib/fragments/whiteboard/style.css

@@ -0,0 +1,4 @@
+.fcr-fragment-whiteboard-view {
+  width: 100vw;
+  height: 100vh;
+}

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

@@ -0,0 +1,4 @@
+import './style.css';
+import './cursor.css';
+declare const View: () => import("react/jsx-runtime").JSX.Element;
+export default View;

package/lib/fragments/whiteboard/view.js

@@ -0,0 +1,31 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+var _store = require("./store");
+var _mobxReact = require("mobx-react");
+var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
+require("./style.css");
+require("./cursor.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var View = (0, _mobxReact.observer)(function () {
+  var store = (0, _react.useContext)(_store.FragmentWhiteboardStoreContext);
+  var cursor = (0, _react.useMemo)(function () {
+    return _enums.FcrBoardToolType[store === null || store === void 0 ? void 0 : store.currentTool].toLowerCase();
+  }, [store === null || store === void 0 ? void 0 : store.currentTool]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      store === null || store === void 0 || store.log("[whiteboard-fragment]: unmounting");
+      store === null || store === void 0 || store.unload();
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-fragment-whiteboard-view board-widget-cursor-".concat(cursor),
+    ref: store === null || store === void 0 ? void 0 : store.handleBoardDomLoad
+  });
+});
+var _default = exports["default"] = View;

package/lib/index.d.ts

@@ -1,4 +1,5 @@
 import './global.css';
+import './utilities/debug';
 export { FcrUISceneCreator } from './creator';
 export { FcrUIExitReason, FcrUserRole, FcrRegion, FcrStreamLatencyLevel } from './type';
 import './plugins/browser-runtime-plugin';

package/lib/index.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "FcrUserRole", {
   }
 });
 require("./global.css");
+require("./utilities/debug");
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _duration = _interopRequireDefault(require("dayjs/plugin/duration"));
 var _creator = require("./creator");

package/lib/modules/action-bar/components/apps/index.js

@@ -42,17 +42,27 @@ var Apps = exports.Apps = (0, _mobxReact.observer)(function (_ref) {
     appItemOptions = _useContext.appItemOptions,
     appActionbarPopoverVisible = _useContext.appActionbarPopoverVisible,
     setAppActionbarPopoverVisible = _useContext.setAppActionbarPopoverVisible;
+  var appList = appItemOptions.map(function (v) {
+    if (v.fcrToolTipProps) {
+      var _v$fcrToolTipProps;
+      return _objectSpread(_objectSpread({}, v), {}, {
+        name: t(v.name),
+        fcrToolTipProps: {
+          content: t((_v$fcrToolTipProps = v.fcrToolTipProps) === null || _v$fcrToolTipProps === void 0 ? void 0 : _v$fcrToolTipProps.content)
+        }
+      });
+    }
+    return _objectSpread(_objectSpread({}, v), {}, {
+      name: t(v.name)
+    });
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItemWithPopover, {
     popoverProps: {
       trigger: 'click',
       visible: appActionbarPopoverVisible,
       showArrow: false,
       content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_appList.AppList, {
-        appItemProps: appItemOptions.map(function (v) {
-          return _objectSpread(_objectSpread({}, v), {}, {
-            name: t(v.name)
-          });
-        })
+        appItemProps: appList
       }),
       overlayInnerStyle: {
         boxShadow: 'var(--fcr_web_light_dropup_m)',

package/lib/modules/action-bar/components/leave/index.js

@@ -31,7 +31,7 @@ var _type = require("../../../../type");
 var _mobxReact = require("mobx-react");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _leaveMeeting = require("../../../components/leave-meeting");
-var _platform = require("../../../../utilities/platform");
+var _portal = require("../../../components/leave-meeting/portal");
 var _jsxRuntime = require("react/jsx-runtime");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -64,15 +64,8 @@ var End = exports.End = (0, _mobxReact.observer)(function (props) {
       onPopoverChanged(false);
     }
   });
-  var LeaveMeetingPortal = function LeaveMeetingPortal() {
-    var portalContent = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "fcr-action-bar--leave-meeting-portal",
-      id: "fcr-action-bar--leave-meeting-portal",
-      style: (0, _platform.isWindows)() ? {
-        right: '10px'
-      } : {
-        left: '10px'
-      },
+  var LeaveMeetingPortals = function LeaveMeetingPortals() {
+    var portalContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.LeaveMeetingPortal, {
       children: leaveMeetingContent
     });
     return /*#__PURE__*/_reactDom["default"].createPortal(portalContent, document.body);
@@ -127,6 +120,6 @@ var End = exports.End = (0, _mobxReact.observer)(function (props) {
       }, buttonProps), {}, {
         children: endMeetingPopoverOpened ? transI18n('fmt_toolbar_button_cancel') : localUserRole === _type.FcrUserRole.HOST ? transI18n('fmt_toolbar_button_end') : transI18n('fmt_toolbar_button_leave')
       }))
-    }), stateBarLeaveMeeting && LeaveMeetingPortal()]
+    }), stateBarLeaveMeeting && LeaveMeetingPortals()]
   });
 });

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

@@ -1,4 +1,5 @@
 import { FC } from 'react';
 import './index.css';
 import { FcrActionBarProps } from './types';
+export declare const actionBarClassName = "fcr-action-bar";
 export declare const FcrActionBar: FC<FcrActionBarProps>;

package/lib/modules/action-bar/view.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FcrActionBar = void 0;
+exports.actionBarClassName = exports.FcrActionBar = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -24,6 +24,7 @@ var _notificationBar = require("./components/notification-bar");
 var _deviceControl = _interopRequireDefault(require("../components/device-control"));
 var _leave = require("./components/leave");
 var _jsxRuntime = require("react/jsx-runtime");
+var actionBarClassName = exports.actionBarClassName = 'fcr-action-bar';
 /**
  * @param toggleFold 用于点击折叠底部操作栏
  * @returns
@@ -77,7 +78,7 @@ var FcrActionBar = exports.FcrActionBar = (0, _mobxReact.observer)(function () {
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "fcr-action-bar--fold-hotarea"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _classnames["default"])('fcr-action-bar', {
+      className: (0, _classnames["default"])(actionBarClassName, {
         'fcr-action-bar-fold-style': folded
       }),
       onMouseEnter: function onMouseEnter() {