fcr-ui-scene 3.8.1 → 3.9.0-alpha

package/lib-es/fragments/whiteboard/store.js

@@ -0,0 +1,423 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.symbol.to-primitive.js";
+import "core-js/modules/es.error.cause.js";
+import "core-js/modules/es.error.to-string.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.array.is-array.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.date.to-json.js";
+import "core-js/modules/es.date.to-primitive.js";
+import "core-js/modules/es.function.bind.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.json.stringify.js";
+import "core-js/modules/es.map.js";
+import "core-js/modules/es.number.constructor.js";
+import "core-js/modules/es.object.create.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.define-property.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/es.weak-map.js";
+import "core-js/modules/esnext.function.metadata.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/esnext.json.parse.js";
+import "core-js/modules/esnext.map.delete-all.js";
+import "core-js/modules/esnext.map.emplace.js";
+import "core-js/modules/esnext.map.every.js";
+import "core-js/modules/esnext.map.filter.js";
+import "core-js/modules/esnext.map.find.js";
+import "core-js/modules/esnext.map.find-key.js";
+import "core-js/modules/esnext.map.includes.js";
+import "core-js/modules/esnext.map.key-of.js";
+import "core-js/modules/esnext.map.map-keys.js";
+import "core-js/modules/esnext.map.map-values.js";
+import "core-js/modules/esnext.map.merge.js";
+import "core-js/modules/esnext.map.reduce.js";
+import "core-js/modules/esnext.map.some.js";
+import "core-js/modules/esnext.map.update.js";
+import "core-js/modules/esnext.symbol.metadata.js";
+import "core-js/modules/esnext.weak-map.delete-all.js";
+import "core-js/modules/esnext.weak-map.emplace.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+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; }
+import { bound } from 'agora-foundation/lib/decorator';
+import { FcrConnectionState, FcrCoreEngine, FcrRegion, FcrCoreEngineConfig } from 'fcr-core';
+import { FcrWhiteboardControlFactoryImpl } from 'fcr-core/lib/imports';
+import { FcrBoardToolType } from 'fcr-core';
+import { observable } from 'mobx';
+import { createContext } from 'react';
+import tinycolor from 'tinycolor2';
+import { WhiteboardToolAction } from '../../modules/secondary-window/type';
+import '../../plugins/rtm-plugin';
+import { createFragmentLogger } from '../../utilities/logger';
+import { storage } from 'agora-foundation/lib/utilities/tools';
+import { convertShapeToBoardToolType, engineRestConfig } from './libs';
+var STORAGE_KEY_WHITEBOARD_OPTIONS = 'whiteboard_options';
+var STORAGE_KEY_ANNOTATION_NICKNAME = 'annotation_nickname';
+var _A = /*#__PURE__*/new WeakMap();
+export var FragmentWhiteboardStore = /*#__PURE__*/function () {
+  function FragmentWhiteboardStore() {
+    var _this = this;
+    _classCallCheck(this, FragmentWhiteboardStore);
+    _defineProperty(this, "logger", (_initProto(this), createFragmentLogger({
+      prefix: 'FragmentWhiteboardStore'
+    })));
+    _defineProperty(this, "_engine", null);
+    _defineProperty(this, "_isMounted", false);
+    _defineProperty(this, "_boardObserver", {
+      onConnectionStateUpdated: this._handleConnectionStateUpdated
+    });
+    _defineProperty(this, "_boardMainWindowObserver", {
+      onUndoStateUpdated: function onUndoStateUpdated(enable) {
+        _this.logger.info("[whiteboard-fragment]: undo state updated, enable ".concat(enable));
+        _this.mainWindowRenderer.notifyObservers('onRedoStepsUpdated', enable);
+      },
+      onRedoStateUpdated: function onRedoStateUpdated(enable) {
+        _this.logger.info("[whiteboard-fragment]: redo state updated, enable ".concat(enable));
+        _this.mainWindowRenderer.notifyObservers('onUndoStepsUpdated', enable);
+      }
+    });
+    _defineProperty(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);
+      },
+      onPermissionUpdated: function onPermissionUpdated(hasWriteBoardPermission) {
+        _this.logger.info("[whiteboard-fragment]: onPermissionUpdated ".concat(hasWriteBoardPermission));
+
+        // 子窗口的白板需要独立更新权限, FcrMainRoomControlImpl 内只处理了主窗口权限更新
+        if (_this._whiteboardControl) {
+          _this._whiteboardControl.setOperationPrivilege(hasWriteBoardPermission);
+        }
+      },
+      onWhiteboardInActive: function onWhiteboardInActive() {
+        _this.logger.info("[whiteboard-fragment]: onWhiteboardInActive");
+        _this.unload();
+      },
+      onWhiteboardStrokeColorChanged: function onWhiteboardStrokeColorChanged(color) {
+        var _this$_boardInstance2;
+        _this.logger.info("[whiteboard-fragment]: onWhiteboardStrokeColorChanged ".concat(color));
+        (_this$_boardInstance2 = _this._boardInstance) === null || _this$_boardInstance2 === void 0 || _this$_boardInstance2.setStrokeColor(tinycolor(color).toRgb());
+      },
+      onWhiteboardStrokeWidthChanged: function onWhiteboardStrokeWidthChanged(width) {
+        var _this$_boardInstance3;
+        _this.logger.info("[whiteboard-fragment]: onWhiteboardStrokeWidthChanged ".concat(width));
+        (_this$_boardInstance3 = _this._boardInstance) === null || _this$_boardInstance3 === void 0 || _this$_boardInstance3.setStrokeWidth(width);
+      },
+      onWhiteboardToolSelected: function onWhiteboardToolSelected(_ref) {
+        var _this$_boardInstance6, _this$_boardInstance7, _this$_boardInstance8;
+        var tool = _ref.tool,
+          shape = _ref.shape,
+          action = _ref.action;
+        if (tool !== undefined) {
+          var _this$_boardInstance4;
+          _this.currentTool = tool;
+          (_this$_boardInstance4 = _this._boardInstance) === null || _this$_boardInstance4 === void 0 || _this$_boardInstance4.setToolType(tool);
+        }
+        if (shape !== undefined) {
+          var _this$_boardInstance5;
+          _this.currentTool = convertShapeToBoardToolType(shape);
+          (_this$_boardInstance5 = _this._boardInstance) === null || _this$_boardInstance5 === void 0 || _this$_boardInstance5.setToolType(convertShapeToBoardToolType(shape));
+        }
+        if (action) {
+          switch (action) {
+            case WhiteboardToolAction.UNDO:
+              (_this$_boardInstance6 = _this._boardInstance) === null || _this$_boardInstance6 === void 0 || _this$_boardInstance6.undo();
+              break;
+            case WhiteboardToolAction.REDO:
+              (_this$_boardInstance7 = _this._boardInstance) === null || _this$_boardInstance7 === void 0 || _this$_boardInstance7.redo();
+              break;
+            case WhiteboardToolAction.CLEAR:
+              (_this$_boardInstance8 = _this._boardInstance) === null || _this$_boardInstance8 === void 0 || _this$_boardInstance8.clean();
+              break;
+          }
+        }
+      },
+      onSaveDraft: function () {
+        var _onSaveDraft = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+          var _this$_boardInstance9;
+          var image;
+          return _regeneratorRuntime.wrap(function (_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                _this.logger.info("[whiteboard-fragment]: onSaveDraft");
+                _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");
+                _this.mainWindowRenderer.notifyObservers('onDraftSaved', image);
+              case 2:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        function onSaveDraft() {
+          return _onSaveDraft.apply(this, arguments);
+        }
+        return onSaveDraft;
+      }()
+    });
+    _defineProperty(this, "_engineObserver", {});
+    _classPrivateFieldInitSpec(this, _A, _init_currentTool(this, FcrBoardToolType.NONE));
+    window.require = parent.window.require;
+    var appId = storage.get('annotation_rtm_app_id') || '';
+    var boardOptions = storage.get(STORAGE_KEY_WHITEBOARD_OPTIONS);
+    var _JSON$parse = JSON.parse(boardOptions || '{}'),
+      roomToken = _JSON$parse.boardUserToken,
+      userId = _JSON$parse.boardUserUuid;
+    if (!roomToken) {
+      this.logger.error("[whiteboard-fragment]: room token is not found");
+      return;
+    }
+    if (!userId) {
+      this.logger.error("[whiteboard-fragment]: user id is not found");
+      return;
+    }
+    this._init(this._initEngine({
+      userId: userId,
+      roomToken: roomToken,
+      appId: appId
+    }));
+  }
+  return _createClass(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: "mainWindowRenderer",
+    get: function get() {
+      // @ts-ignore
+      var mainWindowRenderer = window.parent.FcrUIMainWindowRenderer;
+      if (!mainWindowRenderer) {
+        console.log(window.parent);
+        throw new Error('main window renderer is not found');
+      }
+      return mainWindowRenderer;
+    }
+  }, {
+    key: "handleBoardDomLoad",
+    value: function handleBoardDomLoad(dom) {
+      this._boardDom = dom;
+    }
+  }, {
+    key: "unload",
+    value: function unload() {
+      var _this$_engine, _this$_engine2;
+      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);
+      // @ts-ignore
+      window.parent.FcrUIMainWindowRenderer.removeObserver(this._mainWindowObserver);
+      this._unmount();
+      this._boardControl.close();
+      (_this$_engine2 = this._engine) === null || _this$_engine2 === void 0 || _this$_engine2.logout();
+      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(FcrConnectionState[state]));
+      // @ts-ignore
+      window.parent.FcrUIMainWindowRenderer.notifyObservers('onConnectionStateUpdated', state);
+      if (state === FcrConnectionState.CONNECTED) {
+        var _this$_boardInstance0;
+        this.logger.info(// @ts-ignore
+        "[whiteboard-fragment]: connection state updated: ".concat(FcrConnectionState[state], ", background color: ").concat(window.parent.FcrUIMainWindowRenderer.backgroundColor));
+        this._boardInstance = this._boardControl.getMainWindow();
+
+        // @ts-ignore
+        var backgroundColor = window.parent.FcrUIMainWindowRenderer.backgroundColor;
+        (_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 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(engine) {
+        var _this2 = this;
+        return _regeneratorRuntime.wrap(function (_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              this._engineObserver = {
+                onConnectionStateUpdated: function onConnectionStateUpdated(state) {
+                  if (state === FcrConnectionState.CONNECTED) {
+                    _this2._engine = engine;
+
+                    // 只需要初始化一次, 网络断开重连时不需要重复初始化
+                    if (!_this2._whiteboardControl) {
+                      _this2._initWhiteboardControl();
+                    }
+                    _this2.logger.info("[whiteboard-fragment][initEngine]: engine connection state updated => CONNECTED}");
+                  }
+                  if (state === 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 === FcrConnectionState.CONNECTING) {
+                    _this2.logger.info("[whiteboard-fragment][initEngine]: engine connection state updated => CONNECTING");
+                  }
+                  if (state === FcrConnectionState.RECONNECTING) {
+                    _this2.logger.info("[whiteboard-fragment][initEngine]: engine connection state updated => RECONNECTING");
+                  }
+                  if (state === 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(_x) {
+        return _init2.apply(this, arguments);
+      }
+      return _init;
+    }()
+  }, {
+    key: "_initWhiteboardControl",
+    value: function () {
+      var _initWhiteboardControl2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+        var nickName, boardOptions, _JSON$parse2, boardAppId, boardId, boardRegion, boardToken, userId, config, hasPrivilege;
+        return _regeneratorRuntime.wrap(function (_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              nickName = storage.get(STORAGE_KEY_ANNOTATION_NICKNAME) || '';
+              boardOptions = 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,
+                userName: 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)));
+              hasPrivilege = this.mainWindowRenderer.hasWriteBoardPermission;
+              this._whiteboardControl = new FcrWhiteboardControlFactoryImpl().createForSubProcess(
+              // @ts-ignore
+              this._engine._rteEngine._rtmClient._client, hasPrivilege,
+              // @ts-ignore
+              config);
+              this.logger.info("[whiteboard-fragment]: whiteboard sub process created, the control is ".concat(this._whiteboardControl));
+              this.mainWindowRenderer.addObserver(this._mainWindowObserver);
+              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: "_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)));
+      var engineConfig = new FcrCoreEngineConfig(_objectSpread({
+        appId: appId,
+        token: token,
+        userId: userId,
+        region: FcrRegion.CN
+      }, engineRestConfig));
+      return new FcrCoreEngine(engineConfig);
+    }
+  }]);
+}();
+_FragmentWhiteboardStore = FragmentWhiteboardStore;
+var _applyDecs$e = _slicedToArray(_applyDecs(_FragmentWhiteboardStore, [[observable, 1, "currentTool"], [bound, 2, "handleBoardDomLoad"], [bound, 2, "_mount"], [bound, 2, "_unmount"], [bound, 2, "_handleConnectionStateUpdated"], [bound, 2, "_init"], [bound, 2, "_initWhiteboardControl"], [bound, 2, "_initEngine"]], []).e, 2);
+_init_currentTool = _applyDecs$e[0];
+_initProto = _applyDecs$e[1];
+export var FragmentWhiteboardStoreContext = /*#__PURE__*/createContext(null);

package/lib-es/fragments/whiteboard/style.css

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

package/lib-es/fragments/whiteboard/view.js

@@ -0,0 +1,24 @@
+import { useContext, useEffect, useMemo } from 'react';
+import { FragmentWhiteboardStoreContext } from './store';
+import { observer } from 'mobx-react';
+import './style.css';
+import './cursor.css';
+import { FcrBoardToolType } from 'fcr-core';
+import { jsx as _jsx } from "react/jsx-runtime";
+var View = observer(function () {
+  var store = useContext(FragmentWhiteboardStoreContext);
+  var cursor = useMemo(function () {
+    return FcrBoardToolType[store === null || store === void 0 ? void 0 : store.currentTool].toLowerCase();
+  }, [store === null || store === void 0 ? void 0 : store.currentTool]);
+  useEffect(function () {
+    return function () {
+      store === null || store === void 0 || store.log("[whiteboard-fragment]: unmounting");
+      store === null || store === void 0 || store.unload();
+    };
+  }, []);
+  return /*#__PURE__*/_jsx("div", {
+    className: "fcr-fragment-whiteboard-view board-widget-cursor-".concat(cursor),
+    ref: store === null || store === void 0 ? void 0 : store.handleBoardDomLoad
+  });
+});
+export default View;

package/lib-es/global.css

@@ -0,0 +1,62 @@
+.fcr-scene-scope {
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    'Noto Sans',
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji';
+  font-size: 14px;
+}
+
+/* TODO: 不允许在全局加这种样式！ */
+/* 
+.fcr-scene-scope * {
+  pointer-events: initial;
+} */
+
+/* .fcr-scene-scope *::before,
+.fcr-scene-scope *::after {
+  margin: 0px;
+} */
+
+.fcr-connecting-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  z-index: 1000;
+}
+
+#setting-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.fcr-ui-global-container-node {
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.fcr-meeting-ended {
+  width: 100vw;
+  height: 100vh;
+  background-color: transparent;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}

package/lib-es/global.d.ts

@@ -0,0 +1,27 @@
+declare module '*.css';
+declare module '*.svga';
+declare module '*.svg';
+declare module '*.mp3';
+declare module '*.mp4';
+declare module '*.png';
+declare module '*.gif';
+declare module '*.jpg';
+
+namespace FcrUI {
+  type FcrUIRectangle = {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+  };
+
+  type FcrUIPoint = {
+    x: number;
+    y: number;
+  };
+
+  type FcrUIDimensions = {
+    width: number;
+    height: number;
+  };
+}

package/lib-es/hooks/i18n.js

@@ -0,0 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { FcrUserRole } from '../type';
+export var useUserRoleI18n = function useUserRoleI18n() {
+  var t = useI18n();
+  return function (role) {
+    return t(userRoleI18nKey[role]);
+  };
+};
+export var userRoleI18nKey = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, FcrUserRole.HOST, 'fmt_role_host'), FcrUserRole.COHOST, 'fmt_role_cohost'), FcrUserRole.PARTICIPANT, 'fmt_role_participant'), FcrUserRole.AUDIENCE, 'fmt_role_participant'), FcrUserRole.OBSERVER, 'fmt_role_participant'), FcrUserRole.ROBOT, 'fmt_role_participant');

package/lib-es/index.js

@@ -0,0 +1,38 @@
+// import { configure } from 'mobx';
+import './global.css';
+import './utilities/debug';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+
+// configure({
+//   enforceActions: 'always',
+// });
+
+dayjs.extend(duration);
+export { FcrUISceneCreator } from './creator/index';
+export { FcrUIExitReason, FcrUserRole, FcrRegion, FcrStreamLatencyLevel } from './type';
+import './plugins/browser-runtime-plugin';
+import './plugins/css-preset-plugin';
+import './plugins/electron-rtc-plugin';
+import './plugins/multi-lang-plugin';
+import './plugins/rtm-plugin';
+import './plugins/web-rtc-plugin';
+import { getLogger } from './utilities/logger';
+import { Mutex } from 'fcr-core/lib/imports';
+
+// @ts-ignore
+window.__AgoraLogger = getLogger();
+
+// @ts-ignore
+window.__AgoraMutex = new Mutex();
+import { FcrUISceneCreator } from './creator/index';
+import { FcrUIExitReason, FcrUserRole, FcrRegion, FcrStreamLatencyLevel } from './type';
+
+// @ts-ignore
+window.FcrUIScene = {
+  FcrUISceneCreator: FcrUISceneCreator,
+  FcrUIExitReason: FcrUIExitReason,
+  FcrUserRole: FcrUserRole,
+  FcrRegion: FcrRegion,
+  FcrStreamLatencyLevel: FcrStreamLatencyLevel
+};

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

@@ -0,0 +1,43 @@
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { useContext } from 'react';
+import { ActionBarContext } from '../../main-scene/store.base';
+import { observer } from 'mobx-react';
+import { ActionBarItemWithPopover } from '../item';
+import { AppList } from '../../../components/apps/app-list';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Apps = observer(function (_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var _useContext = useContext(ActionBarContext),
+    toggleLayoutBarLock = _useContext.toggleLayoutBarLock,
+    appItemOptions = _useContext.appItemOptions,
+    appActionbarPopoverVisible = _useContext.appActionbarPopoverVisible,
+    setAppActionbarPopoverVisible = _useContext.setAppActionbarPopoverVisible;
+  return /*#__PURE__*/_jsx(ActionBarItemWithPopover, {
+    popoverProps: {
+      trigger: 'click',
+      visible: appActionbarPopoverVisible,
+      showArrow: false,
+      content: /*#__PURE__*/_jsx(AppList, {
+        appItemProps: appItemOptions
+      }),
+      overlayInnerStyle: {
+        boxShadow: 'var(--fcr_web_light_dropup_m)',
+        border: 'none',
+        height: 'auto',
+        width: 'max-content'
+      },
+      onVisibleChange: function onVisibleChange(visible) {
+        toggleLayoutBarLock(visible);
+        setAppActionbarPopoverVisible(visible);
+      }
+    },
+    id: id,
+    order: order,
+    icon: FcrIconType.FCR_MOREAPP,
+    title: "Apps",
+    iconColors: {
+      iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+    }
+  });
+});

package/lib-es/modules/action-bar/components/board/index.js

@@ -0,0 +1,25 @@
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { ActionBarItem } from '../item';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Board = function Board(_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var handleClick = function handleClick() {};
+  var icon = true ? FcrIconType.FCR_WHITEBOARD_ON : FcrIconType.FCR_WHITEBOARD;
+  var title = 'Board';
+  var tooltip = 'Board';
+  return /*#__PURE__*/_jsx(FcrToolTip, {
+    content: tooltip,
+    children: /*#__PURE__*/_jsx(ActionBarItem, {
+      id: id,
+      order: order,
+      icon: icon,
+      title: title,
+      onClick: handleClick,
+      iconColors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      }
+    })
+  });
+};