fcr-ui-scene 3.8.1 → 3.9.0-alpha

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

@@ -0,0 +1,476 @@
+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 _FragmentAnnotationStore;
+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.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, FcrCoreEngineConfig, FcrRegion } from 'fcr-core';
+import { FcrAnnotationControlFactoryImpl } from 'fcr-core/lib/imports';
+import { FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control-v2/enum';
+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 { getAnnotationViewportSize, getBoardOptions } from '../../utilities/shared-storage';
+import { convertShapeToBoardToolType, engineRestConfig } from './libs';
+var _A = /*#__PURE__*/new WeakMap();
+export var FragmentAnnotationStore = /*#__PURE__*/function () {
+  function FragmentAnnotationStore() {
+    var _this = this;
+    _classCallCheck(this, FragmentAnnotationStore);
+    _defineProperty(this, "logger", (_initProto(this), createFragmentLogger({
+      prefix: 'FragmentWhiteboardStore'
+    })));
+    _defineProperty(this, "_engine", null);
+    _defineProperty(this, "_engineObserver", {});
+    _defineProperty(this, "_isMounted", false);
+    _defineProperty(this, "_boardObserver", {
+      onConnectionStateUpdated: this._handleConnectionStateUpdated
+    });
+    _defineProperty(this, "_boardMainWindowObserver", {
+      onUndoStateUpdated: function onUndoStateUpdated(enable) {
+        _this.logger.info("[annotation-fragment]: undo state updated, enable ".concat(enable));
+        _this.mainWindowRenderer.notifyObservers('onUndoStateUpdated', enable);
+      },
+      onRedoStateUpdated: function onRedoStateUpdated(enable) {
+        _this.logger.info("[annotation-fragment]: redo state updated, enable ".concat(enable));
+        _this.mainWindowRenderer.notifyObservers('onRedoStateUpdated', enable);
+      }
+    });
+    _defineProperty(this, "_mainWindowObserver", {
+      onPermissionUpdated: function onPermissionUpdated(hasWriteBoardPermission) {
+        _this.logger.info("[annotation-fragment]: onPermissionUpdated ".concat(hasWriteBoardPermission));
+        if (_this._annotationControl) {
+          _this._annotationControl.setOperationPrivilege(hasWriteBoardPermission);
+        }
+      },
+      onViewportSizeUpdated: function onViewportSizeUpdated(size) {
+        _this.setViewportSize(size);
+      },
+      onWhiteboardStrokeColorChanged: function onWhiteboardStrokeColorChanged(color) {
+        var _this$_boardInstance;
+        _this.logger.info("[annotation-fragment]: onWhiteboardStrokeColorChanged ".concat(color));
+        _this._lastStrokeColor = color;
+        (_this$_boardInstance = _this._boardInstance) === null || _this$_boardInstance === void 0 || _this$_boardInstance.setStrokeColor(tinycolor(color).toRgb());
+      },
+      onWhiteboardStrokeWidthChanged: function onWhiteboardStrokeWidthChanged(width) {
+        var _this$_boardInstance2;
+        _this.logger.info("[annotation-fragment]: onWhiteboardStrokeWidthChanged ".concat(width));
+        _this._lastStrokeWidth = width;
+        (_this$_boardInstance2 = _this._boardInstance) === null || _this$_boardInstance2 === void 0 || _this$_boardInstance2.setStrokeWidth(width);
+      },
+      onWhiteboardToolSelected: function onWhiteboardToolSelected(_ref) {
+        var _this$_boardInstance5, _this$_boardInstance6, _this$_boardInstance7;
+        var tool = _ref.tool,
+          shape = _ref.shape,
+          action = _ref.action;
+        if (tool !== undefined || shape !== undefined) {
+          _this._lastToolPayload = {
+            tool: tool,
+            shape: shape
+          };
+        }
+        if (tool !== undefined) {
+          var _this$_boardInstance3;
+          _this.currentTool = tool;
+          (_this$_boardInstance3 = _this._boardInstance) === null || _this$_boardInstance3 === void 0 || _this$_boardInstance3.setToolType(tool);
+        }
+        if (shape !== undefined) {
+          var _this$_boardInstance4;
+          _this.currentTool = convertShapeToBoardToolType(shape);
+          (_this$_boardInstance4 = _this._boardInstance) === null || _this$_boardInstance4 === void 0 || _this$_boardInstance4.setToolType(convertShapeToBoardToolType(shape));
+        }
+        if (action) {
+          switch (action) {
+            case WhiteboardToolAction.UNDO:
+              (_this$_boardInstance5 = _this._boardInstance) === null || _this$_boardInstance5 === void 0 || _this$_boardInstance5.undo();
+              break;
+            case WhiteboardToolAction.REDO:
+              (_this$_boardInstance6 = _this._boardInstance) === null || _this$_boardInstance6 === void 0 || _this$_boardInstance6.redo();
+              break;
+            case WhiteboardToolAction.CLEAR:
+              (_this$_boardInstance7 = _this._boardInstance) === null || _this$_boardInstance7 === void 0 || _this$_boardInstance7.clean();
+              break;
+          }
+        }
+      },
+      onSaveDraft: function () {
+        var _onSaveDraft = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+          var _this$_boardInstance8;
+          var image;
+          return _regeneratorRuntime.wrap(function (_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                _this.logger.info("[annotation-fragment]: onSaveDraft");
+                _context.next = 1;
+                return (_this$_boardInstance8 = _this._boardInstance) === null || _this$_boardInstance8 === void 0 ? void 0 : _this$_boardInstance8.getSnapshotImage();
+              case 1:
+                image = _context.sent;
+                _this.logger.info("[annotation-fragment]: save draft image: ".concat(image));
+                if (image) {
+                  _this.mainWindowRenderer.notifyObservers('onDraftSaved', image);
+                }
+              case 2:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        function onSaveDraft() {
+          return _onSaveDraft.apply(this, arguments);
+        }
+        return onSaveDraft;
+      }()
+    });
+    _classPrivateFieldInitSpec(this, _A, _init_currentTool(this, FcrBoardToolType.NONE));
+    window.require = parent.window.require;
+    this._viewportSize = getAnnotationViewportSize();
+    this._init();
+  }
+  return _createClass(FragmentAnnotationStore, [{
+    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: "setViewportSize",
+    value: function setViewportSize(viewportSize) {
+      var _this$_boardInstance9;
+      this._viewportSize = viewportSize;
+      (_this$_boardInstance9 = this._boardInstance) === null || _this$_boardInstance9 === void 0 || _this$_boardInstance9.updateWindowSize(viewportSize);
+    }
+  }, {
+    key: "handleBoardDomLoad",
+    value: function handleBoardDomLoad(dom) {
+      this._boardDom = dom;
+    }
+  }, {
+    key: "log",
+    value: function log(message) {
+      this.logger.info(message);
+    }
+  }, {
+    key: "_mount",
+    value: function _mount() {
+      this.logger.info("[annotation-fragment]: mounted board dom");
+      if (this._boardDom && this._boardInstance && !this._isMounted) {
+        this._boardDom.appendChild(this._boardInstance.getContentView());
+        this._isMounted = true;
+      }
+    }
+  }, {
+    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$_annotationCont, _this$_boardInstance0, _this$_boardInstance1;
+        this.logger.info(// @ts-ignore
+        "[annotation-fragment]: connection state updated: ".concat(FcrConnectionState[state], ", background color: ").concat(window.parent.FcrUIMainWindowRenderer.backgroundColor));
+        this._boardInstance = (_this$_annotationCont = this._annotationControl) === null || _this$_annotationCont === void 0 ? void 0 : _this$_annotationCont.getMainWindow();
+        var backgroundColor = 'transparent';
+        (_this$_boardInstance0 = this._boardInstance) === null || _this$_boardInstance0 === void 0 || _this$_boardInstance0.setBackgroundColor(backgroundColor);
+        (_this$_boardInstance1 = this._boardInstance) === null || _this$_boardInstance1 === void 0 || _this$_boardInstance1.clean();
+        this._boardInstance && this._boardInstance.addObserver(this._boardMainWindowObserver);
+        this._applyCachedToolState();
+        this._mount();
+      }
+    }
+  }, {
+    key: "_init",
+    value: function () {
+      var _init2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var _this2 = this;
+        var boardOptions, _ref2, nickName, token, userId, appId, boardAppId, boardId, boardRegion, boardToken, config, engineConfig, engine;
+        return _regeneratorRuntime.wrap(function (_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              boardOptions = getBoardOptions();
+              _ref2 = boardOptions || {}, nickName = _ref2.nickName, token = _ref2.boardUserToken, userId = _ref2.boardUserUuid, appId = _ref2.rtmAppId, boardAppId = _ref2.boardAppId, boardId = _ref2.boardId, boardRegion = _ref2.boardRegion, boardToken = _ref2.boardToken;
+              if (token) {
+                _context2.next = 1;
+                break;
+              }
+              this.logger.error("[annotation-fragment]: room token is not found");
+              return _context2.abrupt("return");
+            case 1:
+              if (userId) {
+                _context2.next = 2;
+                break;
+              }
+              this.logger.error("[annotation-fragment]: user id is not found");
+              return _context2.abrupt("return");
+            case 2:
+              if (appId) {
+                _context2.next = 3;
+                break;
+              }
+              this.logger.error("[annotation-fragment]: app id is not found");
+              return _context2.abrupt("return");
+            case 3:
+              config = {
+                userId: userId,
+                nickName: nickName,
+                boardConfig: {
+                  boardAppId: boardAppId,
+                  boardId: boardId,
+                  boardRegion: boardRegion,
+                  boardToken: boardToken
+                }
+              };
+              this.logger.info("[annotation-fragment][initEngine]: init engine with config => ".concat(JSON.stringify(config)));
+              engineConfig = new FcrCoreEngineConfig(_objectSpread({
+                appId: appId,
+                token: token,
+                userId: userId,
+                region: FcrRegion.CN
+              }, engineRestConfig));
+              engine = new FcrCoreEngine(engineConfig);
+              this._engineObserver = {
+                onConnectionStateUpdated: function onConnectionStateUpdated(state) {
+                  if (state === FcrConnectionState.CONNECTED) {
+                    _this2._engine = engine;
+
+                    // 只需要初始化一次, 网络断开重连时不需要重复初始化
+                    if (!_this2._annotationControl) {
+                      _this2._initAnnotationControl();
+                    }
+                    _this2.logger.info("[annotation-fragment][initEngine]: engine connection state updated => CONNECTED}");
+                  }
+                  if (state === FcrConnectionState.DISCONNECTED) {
+                    _this2.logger.info("[annotation-fragment][initEngine]: engine connection state updated => DISCONNECTED, the engine is ".concat(_this2._engine));
+                    _this2._engine && engine.login();
+                  }
+                  if (state === FcrConnectionState.CONNECTING) {
+                    _this2.logger.info("[annotation-fragment][initEngine]: engine connection state updated => CONNECTING");
+                  }
+                  if (state === FcrConnectionState.RECONNECTING) {
+                    _this2.logger.info("[annotation-fragment][initEngine]: engine connection state updated => RECONNECTING");
+                  }
+                  if (state === FcrConnectionState.ABORTED) {
+                    _this2.logger.info("[annotation-fragment][initEngine]: engine connection state updated => ABORTED, the engine is ".concat(_this2._engine));
+                    _this2._engine && engine.login();
+                  }
+                }
+              };
+              engine.addObserver(this._engineObserver);
+              engine.login();
+            case 4:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function _init() {
+        return _init2.apply(this, arguments);
+      }
+      return _init;
+    }()
+  }, {
+    key: "_initAnnotationControl",
+    value: function () {
+      var _initAnnotationControl2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+        var boardOptions, nickName, boardAppId, userId, boardId, region, boardToken, config, hasPrivilege;
+        return _regeneratorRuntime.wrap(function (_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              boardOptions = getBoardOptions(); // 字段校验
+              if (boardOptions) {
+                _context3.next = 1;
+                break;
+              }
+              this.logger.error("[annotation-fragment]: board options is not found");
+              return _context3.abrupt("return");
+            case 1:
+              nickName = boardOptions.nickName, boardAppId = boardOptions.boardAppId, userId = boardOptions.boardUserUuid, boardId = boardOptions.boardId, region = boardOptions.boardRegion, boardToken = boardOptions.boardToken; // 校验必需字段
+              if (userId) {
+                _context3.next = 2;
+                break;
+              }
+              this.logger.error("[annotation-fragment]: boardUserUuid is required");
+              return _context3.abrupt("return");
+            case 2:
+              if (boardAppId) {
+                _context3.next = 3;
+                break;
+              }
+              this.logger.error("[annotation-fragment]: boardAppId is required");
+              return _context3.abrupt("return");
+            case 3:
+              if (boardId) {
+                _context3.next = 4;
+                break;
+              }
+              this.logger.error("[annotation-fragment]: boardId is required");
+              return _context3.abrupt("return");
+            case 4:
+              if (region) {
+                _context3.next = 5;
+                break;
+              }
+              this.logger.error("[annotation-fragment]: boardRegion is required");
+              return _context3.abrupt("return");
+            case 5:
+              if (boardToken) {
+                _context3.next = 6;
+                break;
+              }
+              this.logger.error("[annotation-fragment]: boardToken is required");
+              return _context3.abrupt("return");
+            case 6:
+              // 可选字段校验和默认值处理
+              if (!nickName) {
+                this.logger.warn("[annotation-fragment]: nickName is not provided, using default value");
+              }
+              config = {
+                userId: userId,
+                userName: nickName,
+                size: this._viewportSize
+              };
+              this.logger.info("[annotation-fragment]: start create annotation sub process with config: ".concat(JSON.stringify(config)));
+              hasPrivilege = this.mainWindowRenderer.hasWriteBoardPermission;
+              this._annotationControl = new FcrAnnotationControlFactoryImpl().createForSubProcess(
+              // @ts-ignore
+              this._engine._rteEngine._rtmClient._client, hasPrivilege,
+              // @ts-ignore
+              config);
+              this.logger.info("[annotation-fragment]: annotation sub process created, the control is ".concat(this._annotationControl));
+              this.mainWindowRenderer.addObserver(this._mainWindowObserver);
+              this._annotationControl.addObserver(this._boardObserver);
+              this._lastToolPayload = this.mainWindowRenderer.toolPayload;
+              this._lastStrokeColor = this.mainWindowRenderer.strokeColor;
+              this._lastStrokeWidth = this.mainWindowRenderer.strokeWidth;
+              _context3.next = 7;
+              return this._annotationControl.open();
+            case 7:
+              this.logger.info("[annotation-fragment]: annotation opened, the instance");
+            case 8:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this);
+      }));
+      function _initAnnotationControl() {
+        return _initAnnotationControl2.apply(this, arguments);
+      }
+      return _initAnnotationControl;
+    }()
+  }, {
+    key: "_applyCachedToolState",
+    value: function _applyCachedToolState() {
+      if (!this._boardInstance) return;
+      if (this._lastToolPayload) {
+        var _this$_lastToolPayloa = this._lastToolPayload,
+          tool = _this$_lastToolPayloa.tool,
+          shape = _this$_lastToolPayloa.shape;
+        if (shape !== undefined) {
+          var convertedTool = convertShapeToBoardToolType(shape);
+          this.currentTool = convertedTool;
+          this._boardInstance.setToolType(convertedTool);
+        } else if (tool !== undefined) {
+          this.currentTool = tool;
+          this._boardInstance.setToolType(tool);
+        }
+      }
+      if (this._lastStrokeColor) {
+        this._boardInstance.setStrokeColor(tinycolor(this._lastStrokeColor).toRgb());
+      }
+      if (this._lastStrokeWidth !== undefined) {
+        this._boardInstance.setStrokeWidth(this._lastStrokeWidth);
+      }
+    }
+  }]);
+}();
+_FragmentAnnotationStore = FragmentAnnotationStore;
+var _applyDecs$e = _slicedToArray(_applyDecs(_FragmentAnnotationStore, [[observable, 1, "currentTool"], [bound, 2, "setViewportSize"], [bound, 2, "handleBoardDomLoad"], [bound, 2, "_mount"], [bound, 2, "_handleConnectionStateUpdated"], [bound, 2, "_init"], [bound, 2, "_initAnnotationControl"]], []).e, 2);
+_init_currentTool = _applyDecs$e[0];
+_initProto = _applyDecs$e[1];
+export var FragmentAnnotationStoreContext = /*#__PURE__*/createContext(null);

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

@@ -0,0 +1,8 @@
+.fcr-fragment-whiteboard-view {
+  width: 100vw;
+  height: 100vh;
+}
+
+body {
+  background: rgba(0, 0, 0, 0.01);
+}

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

@@ -0,0 +1,20 @@
+import { useContext, useMemo } from 'react';
+import { FragmentAnnotationStoreContext } from './store';
+import { observer } from 'mobx-react';
+import { FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control-v2/enum';
+import './style.css';
+import './cursor.css';
+import { jsx as _jsx } from "react/jsx-runtime";
+var View = observer(function () {
+  var _useContext = useContext(FragmentAnnotationStoreContext),
+    currentTool = _useContext.currentTool,
+    handleBoardDomLoad = _useContext.handleBoardDomLoad;
+  var cursor = useMemo(function () {
+    return FcrBoardToolType[currentTool].toLowerCase();
+  }, [currentTool]);
+  return /*#__PURE__*/_jsx("div", {
+    className: "fcr-fragment-whiteboard-view board-widget-cursor-".concat(cursor),
+    ref: handleBoardDomLoad
+  });
+});
+export default View;

package/lib-es/fragments/base.js

@@ -0,0 +1,40 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { changeLanguage } from 'agora-ui-foundation/lib/i18n';
+import { getLanguage } from 'agora-foundation/lib/utilities/tools';
+import { getLogger } from '../utilities/logger';
+import { FcrUIRendererWrapper } from '../utilities/renderer';
+export var BaseFragment = /*#__PURE__*/function () {
+  function BaseFragment(runtime) {
+    _classCallCheck(this, BaseFragment);
+    _defineProperty(this, "logger", getLogger());
+    _defineProperty(this, "renderer", new FcrUIRendererWrapper());
+    this.runtime = runtime;
+    this._onLoad();
+  }
+  return _createClass(BaseFragment, [{
+    key: "sendEvent",
+    value: function sendEvent(event) {
+      var _this$runtime;
+      (_this$runtime = this.runtime) === null || _this$runtime === void 0 || _this$runtime.sendEvent(event);
+    }
+  }, {
+    key: "onEvent",
+    value: function onEvent(event) {}
+  }, {
+    key: "_onLoad",
+    value: function _onLoad() {
+      var _this$runtime2,
+        _this = this;
+      var language = getLanguage();
+      if (language) {
+        this.logger.info('set language to:', language);
+        changeLanguage(language);
+      }
+      (_this$runtime2 = this.runtime) === null || _this$runtime2 === void 0 || _this$runtime2.addEventListener(function (_, event) {
+        _this.onEvent(event);
+      });
+    }
+  }]);
+}();