fcr-ui-scene 3.7.4 → 3.7.5

package/lib/modules/whiteboard/store.js

@@ -0,0 +1,422 @@
+"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.is-array.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-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/esnext.function.metadata.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");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WhiteboardStoreContext = void 0;
+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.for-each.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.string.replace.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.for-each.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.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _mobx = require("mobx");
+var _logger = require("../../utilities/logger");
+var _objectManager = require("../../object-manager");
+var _react = require("react");
+var _decorator = require("agora-foundation/lib/decorator");
+var _type = require("../secondary-window/type");
+var _type2 = require("fcr-core/lib/type");
+var _libs = require("../components/toolbar/components/graphic-tool/graphic-panel/libs");
+var _struct = require("../../providers/board-share/struct");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _type3 = require("agora-ui-foundation/lib/components/icon/type");
+var _WhitebaordStoreBase;
+var _initProto, _init__isMounted, _init_boardContainer, _setBoardContainerDomDecs, _ref;
+function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
+function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
+function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
+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 _A = /*#__PURE__*/new WeakMap();
+var _B = /*#__PURE__*/new WeakMap();
+_ref = (_setBoardContainerDomDecs = [_mobx.action, _mobx.action.bound], "logger");
+var WhitebaordStoreBase = exports["default"] = /*#__PURE__*/function () {
+  function WhitebaordStoreBase(_ref2) {
+    var _this = this;
+    var objectManager = _ref2.objectManager;
+    (0, _classCallCheck2["default"])(this, WhitebaordStoreBase);
+    (0, _defineProperty2["default"])(this, _ref, (_initProto(this), (0, _logger.createLogger)({
+      prefix: 'FcrWhiteboardUIModule'
+    })));
+    (0, _defineProperty2["default"])(this, "_disposers", []);
+    (0, _defineProperty2["default"])(this, "_boardView", null);
+    (0, _defineProperty2["default"])(this, "_whiteboardProviderObserver", {
+      onBoardShareStarted: this._handleBoardShareStarted,
+      onBoardShareStopped: this._handleBoardShareStopped,
+      onBoardReady: this._handleBoardReady,
+      onBoardError: this._handleBoardError
+    });
+    _classPrivateFieldInitSpec(this, _A, _init__isMounted(this, false));
+    _classPrivateFieldInitSpec(this, _B, _init_boardContainer(this, undefined));
+    this._whiteboardProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_BOARD_SHARE_PROVIDER);
+    this._roomProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_ROOM_PROVIDER);
+    this._memberSharedDataSource = objectManager.getObject(_objectManager.FcrUIObjectKeys.S_SHARED_MEMBER_DATA_SOURCE);
+    this._dialogProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_DIALOG_PROVIDER);
+    this._messageProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_MESSAGE_PROVIDER);
+    this._roomControl = this._roomProvider.currentRoomControl;
+    this._userControl = this._roomControl.getUserControl();
+    this._whiteboardProvider.addObserver(this._whiteboardProviderObserver);
+    this._disposers.push((0, _mobx.reaction)(function () {
+      return _this.connectionState;
+    }, function (state) {
+      if (state === _type2.FcrConnectionState.CONNECTED) {
+        _this._ownerUserTemp = _this._whiteboardProvider.ownerUser;
+      }
+    }));
+  }
+  return (0, _createClass2["default"])(WhitebaordStoreBase, [{
+    key: "_isMounted",
+    get: function get() {
+      return _classPrivateFieldGet(_A, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_A, this, v);
+    }
+  }, {
+    key: "boardContainer",
+    get: function get() {
+      return _classPrivateFieldGet(_B, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_B, this, v);
+    }
+  }, {
+    key: "loading",
+    get: function get() {
+      return this._whiteboardProvider.loading;
+    }
+  }, {
+    key: "connectionState",
+    get: function get() {
+      return this._whiteboardProvider.connectionState;
+    }
+  }, {
+    key: "joined",
+    get: function get() {
+      return this._whiteboardProvider.joined;
+    }
+  }, {
+    key: "canWriteBoard",
+    get: function get() {
+      return this._whiteboardProvider.canWriteBoard;
+    }
+  }, {
+    key: "isHost",
+    get: function get() {
+      return this._memberSharedDataSource.isLocalUserHost;
+    }
+  }, {
+    key: "isShowToolbar",
+    get: function get() {
+      return this.toolbarState.controlEnable || this.isHost || this.isActive && this.isMyBoard;
+    }
+  }, {
+    key: "toolbarState",
+    get: function get() {
+      return this._whiteboardProvider.boardBarControl.toolbarState;
+    }
+  }, {
+    key: "currentTheme",
+    get: function get() {
+      return this._whiteboardProvider.boardBarControl.currentTheme;
+    }
+  }, {
+    key: "boardView",
+    get: function get() {
+      if (!this._boardView) {
+        throw new Error('board dom not found');
+      }
+      return this._boardView;
+    }
+  }, {
+    key: "isMounted",
+    get: function get() {
+      return this._isMounted;
+    }
+  }, {
+    key: "localUser",
+    get: function get() {
+      var localUser = this._userControl.getLocalUser();
+      if (!localUser) {
+        throw new Error('local user not found');
+      }
+      return localUser;
+    }
+  }, {
+    key: "ownerUserTemp",
+    get: function get() {
+      if (!this._ownerUserTemp) {
+        throw new Error('owner user temp not found');
+      }
+      return this._ownerUserTemp;
+    }
+  }, {
+    key: "isActive",
+    get: function get() {
+      return this._whiteboardProvider.isActive;
+    }
+  }, {
+    key: "isMyBoard",
+    get: function get() {
+      return this._whiteboardProvider.isMyBoard;
+    }
+  }, {
+    key: "ownerUser",
+    get: function get() {
+      return this._whiteboardProvider.ownerUser;
+    }
+  }, {
+    key: "setBoardContainerDom",
+    value: function setBoardContainerDom(boardDom) {
+      if (boardDom) {
+        this.logger.info("set board container dom: ".concat(boardDom));
+        this.boardContainer = boardDom;
+      } else {
+        this.logger.warn("set board container dom is not ready");
+      }
+    }
+  }, {
+    key: "release",
+    value: function release() {
+      this._disposers.forEach(function (disposer) {
+        return disposer();
+      });
+      this._disposers = [];
+      this._whiteboardProvider.removeObserver(this._whiteboardProviderObserver);
+    }
+  }, {
+    key: "setBackgroundColor",
+    value: function setBackgroundColor(color) {
+      this._whiteboardProvider.boardBarControl.setBackgroundColor(color);
+    }
+  }, {
+    key: "setWhiteboardTool",
+    value: function setWhiteboardTool(tool) {
+      this._whiteboardProvider.selectTool(tool);
+      this._whiteboardProvider.boardBarControl.setWhiteboardTool({
+        action: _type.WhiteboardToolAction.TOOL,
+        tool: tool
+      });
+    }
+  }, {
+    key: "setWhiteboardShape",
+    value: function setWhiteboardShape(shape) {
+      var tool = (0, _libs.convertShapeToBoardToolType)(shape);
+      this._whiteboardProvider.selectTool(tool);
+      this._whiteboardProvider.boardBarControl.setWhiteboardTool({
+        action: _type.WhiteboardToolAction.SHAPE,
+        tool: shape
+      });
+    }
+  }, {
+    key: "setStrokeWidth",
+    value: function setStrokeWidth(width) {
+      this._whiteboardProvider.setStrokeWidth(width);
+      this._whiteboardProvider.boardBarControl.setWhiteboardTool({
+        action: _type.WhiteboardToolAction.WIDTH,
+        tool: width
+      });
+    }
+  }, {
+    key: "setStrokeColor",
+    value: function setStrokeColor(color) {
+      this._whiteboardProvider.setStrokeColor(color);
+      this._whiteboardProvider.boardBarControl.setWhiteboardTool({
+        action: _type.WhiteboardToolAction.COLOR,
+        tool: color
+      });
+    }
+  }, {
+    key: "setCommonColors",
+    value: function setCommonColors(colors) {
+      this._whiteboardProvider.boardBarControl.setCommonColors(colors);
+    }
+  }, {
+    key: "redo",
+    value: function redo() {
+      this._whiteboardProvider.redo();
+    }
+  }, {
+    key: "undo",
+    value: function undo() {
+      this._whiteboardProvider.undo();
+    }
+  }, {
+    key: "clean",
+    value: function clean() {
+      this._whiteboardProvider.clear();
+    }
+  }, {
+    key: "captureScreen",
+    value: function captureScreen(hideWindow) {
+      this._whiteboardProvider.captureScreen(hideWindow);
+    }
+  }, {
+    key: "handleClose",
+    value: function handleClose() {
+      this._whiteboardProvider.stopShare();
+    }
+  }, {
+    key: "_mount",
+    value: function _mount(boardView) {
+      if (this.boardContainer && !this._isMounted) {
+        this.logger.info("mounted board dom");
+        this.boardContainer.appendChild(boardView);
+        this._isMounted = true;
+      }
+    }
+  }, {
+    key: "_unmount",
+    value: function _unmount() {
+      if (this.boardContainer && this._isMounted) {
+        this.logger.info("container ".concat(this.boardContainer, " unmounted board dom, board view ").concat(this.boardView));
+        this._isMounted = false;
+        this.boardContainer.hasChildNodes() && this.boardContainer.removeChild(this.boardView);
+        this.boardContainer = undefined;
+      }
+    }
+  }, {
+    key: "setTheme",
+    value: function setTheme(theme) {
+      this._whiteboardProvider.boardBarControl.setTheme(theme);
+    }
+  }, {
+    key: "setControlEnable",
+    value: function setControlEnable(enable) {
+      this._whiteboardProvider.boardBarControl.setControlEnable(enable);
+    }
+  }, {
+    key: "onSaveDraft",
+    value: function onSaveDraft() {
+      this._whiteboardProvider.boardBarControl.saveDraft();
+    }
+  }, {
+    key: "_handleBoardShareStarted",
+    value: function _handleBoardShareStarted() {}
+  }, {
+    key: "_handleBoardShareStopped",
+    value: function _handleBoardShareStopped(data) {
+      var reason = data.reason,
+        operatorUser = data.operatorUser;
+      this._unmount();
+      var stopByOther = reason === _struct.FcrUIBoardShareStopReason.STOPPED_BY_OTHER;
+      var normalStop = reason === _struct.FcrUIBoardShareStopReason.NORMAL_STOP;
+      var operatorIsNotMe = (operatorUser === null || operatorUser === void 0 ? void 0 : operatorUser.userId) !== this.localUser.userId;
+      var ownerUserIsMe = this.ownerUserTemp.userId === this.localUser.userId;
+      if (stopByOther && ownerUserIsMe && operatorIsNotMe) {
+        this._alertWhenReplace(operatorUser, 'seize');
+      }
+      if (stopByOther && !ownerUserIsMe && operatorIsNotMe) {
+        var _this$_messageProvide;
+        (_this$_messageProvide = this._messageProvider) === null || _this$_messageProvide === void 0 || _this$_messageProvide.showToast({
+          type: 'info',
+          message: "".concat(operatorUser === null || operatorUser === void 0 ? void 0 : operatorUser.userName, " ").concat((0, _i18n.transI18n)('fmt_screenshare_whiteboard_lables_newshare'))
+        });
+      }
+      if (normalStop && operatorIsNotMe && ownerUserIsMe) {
+        this._alertWhenReplace(operatorUser, 'stop');
+      }
+      this._ownerUserTemp = undefined;
+    }
+  }, {
+    key: "_handleBoardError",
+    value: function _handleBoardError(error) {
+      this.logger.error("board error: ".concat(error));
+    }
+  }, {
+    key: "_handleBoardReady",
+    value: function _handleBoardReady(boardView) {
+      this.logger.info("board ready with board view ".concat(boardView));
+      this._boardView = boardView;
+      this._mount(boardView);
+    }
+  }, {
+    key: "_alertWhenReplace",
+    value: function _alertWhenReplace(operator, reason) {
+      var _this2 = this;
+      var userRole = operator.userRole,
+        userName = operator.userName;
+      var isHost = userRole === _type2.FcrUserRole.HOST;
+      var isCoHost = userRole === _type2.FcrUserRole.COHOST;
+      var content = "".concat(userName, " ").concat((0, _i18n.transI18n)('fmt_screenshare_whiteboard_lables_newshare'));
+      if (isHost && reason === 'stop') {
+        content = (0, _i18n.transI18n)('fmt_share_tips_sharingprohibit_byhost').replace('{reason1}', userName);
+      }
+      if (isCoHost && reason === 'stop') {
+        content = (0, _i18n.transI18n)('fmt_share_tips_sharingprohibit_bycohost').replace('{reason1}', userName);
+      }
+      var dialogId = this._dialogProvider.openConfirmDialog({
+        title: (0, _i18n.transI18n)('fmt_screenshare_whiteboard_tips_stoppedboard'),
+        content: content,
+        okText: (0, _i18n.transI18n)('fmt_screenshare_whiteboard_button_gotit'),
+        showCancel: false,
+        icon: _type3.FcrIconType.FCR_SCREENSHARING,
+        onOk: function onOk() {
+          _this2._dialogProvider.closeConfirmDialog(dialogId);
+        },
+        onCancel: function onCancel() {
+          _this2._dialogProvider.closeConfirmDialog(dialogId);
+        },
+        width: 400,
+        height: 160
+      });
+    }
+  }]);
+}();
+_WhitebaordStoreBase = WhitebaordStoreBase;
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_WhitebaordStoreBase, [[_mobx.observable, 1, "_isMounted"], [_mobx.observable, 1, "boardContainer"], [_mobx.computed, 3, "isShowToolbar"], [_setBoardContainerDomDecs, 18, "setBoardContainerDom"], [_decorator.bound, 2, "setBackgroundColor"], [_decorator.bound, 2, "setWhiteboardTool"], [_decorator.bound, 2, "setWhiteboardShape"], [_decorator.bound, 2, "setStrokeWidth"], [_decorator.bound, 2, "setStrokeColor"], [_decorator.bound, 2, "setCommonColors"], [_decorator.bound, 2, "redo"], [_decorator.bound, 2, "undo"], [_decorator.bound, 2, "clean"], [_decorator.bound, 2, "captureScreen"], [_decorator.bound, 2, "handleClose"], [_mobx.action, 2, "_mount"], [_mobx.action, 2, "_unmount"], [_decorator.bound, 2, "setTheme"], [_decorator.bound, 2, "setControlEnable"], [_decorator.bound, 2, "onSaveDraft"], [_decorator.bound, 2, "_handleBoardShareStarted"], [_decorator.bound, 2, "_handleBoardShareStopped"], [_decorator.bound, 2, "_handleBoardError"], [_decorator.bound, 2, "_handleBoardReady"]], []).e, 3);
+_init__isMounted = _applyDecs$e[0];
+_init_boardContainer = _applyDecs$e[1];
+_initProto = _applyDecs$e[2];
+var WhiteboardStoreContext = exports.WhiteboardStoreContext = /*#__PURE__*/(0, _react.createContext)(null);

package/lib/modules/whiteboard/style.css

@@ -1,3 +1,5 @@
+@import '../../fragments/whiteboard/cursor.css';
+
 .netless-whiteboard-wrapper {
   height: 100%;
   width: 100%;
@@ -136,15 +138,3 @@
   width: 100%;
   height: 100%;
 } */
-
-.whiteboard-action-prevent {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0px;
-  top: 0px;
-  z-index: 100;
-  cursor:
-    url('data:image/svg+xml,%3Csvg width="18" height="18" viewBox="0 0  " fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-path="url(%23clip0_71146_163811)"%3E%3Cg filter="url(%23filter0_d_71146_163811)"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4.95701 14.2575L1.05431 2.41514C0.867777 1.84912 1.1772 1.23963 1.74543 1.05381C1.96805 0.981012 2.20837 0.982105 2.43032 1.05693L14.264 5.04624C14.8305 5.23722 15.1343 5.84949 14.9426 6.4138C14.8422 6.70924 14.6183 6.94694 14.3288 7.0656L9.3004 9.12601C9.08832 9.21291 8.92123 9.38255 8.83806 9.59543L6.99502 14.3123C6.77809 14.8675 6.15043 15.1423 5.59309 14.9263C5.29135 14.8093 5.058 14.5639 4.95701 14.2575Z" fill="%234262FF"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4.95701 14.2575L1.05431 2.41514C0.867777 1.84912 1.1772 1.23963 1.74543 1.05381C1.96805 0.981012 2.20837 0.982105 2.43032 1.05693L14.264 5.04624C14.8305 5.23722 15.1343 5.84949 14.9426 6.4138C14.8422 6.70924 14.6183 6.94694 14.3288 7.0656L9.3004 9.12601C9.08832 9.21291 8.92123 9.38255 8.83806 9.59543L6.99502 14.3123C6.77809 14.8675 6.15043 15.1423 5.59309 14.9263C5.29135 14.8093 5.058 14.5639 4.95701 14.2575Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_d_71146_163811" x="-2.5" y="-1.5" width="23" height="23" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/%3E%3CfeOffset dx="1" dy="2"/%3E%3CfeGaussianBlur stdDeviation="2"/%3E%3CfeComposite in2="hardAlpha" operator="out"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/%3E%3CfeBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_71146_163811"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_71146_163811" result="shape"/%3E%3C/filter%3E%3CclipPath id="clip0_71146_163811"%3E%3Crect width="18" height="18" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E'),
-    auto;
-}

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

@@ -1,4 +1,5 @@
 import { FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
+import { FcrUIObjectManager } from '../../object-manager';
 export declare enum FcrBoardShape {
     Curve = 1,
     Straight = 2,
@@ -86,3 +87,6 @@ export declare enum LonelyWindowState {
     CLOSE = "close",
     DEFAULT = "default"
 }
+export type WhiteboardStoreArgs = {
+    objectManager: FcrUIObjectManager;
+};

package/lib/modules/whiteboard/view.js

@@ -6,54 +6,99 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Whiteboard = void 0;
-var _react = require("react");
-var _toolbar = require("./components/toolbar");
-var _context = require("./context");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _mobxReact = require("mobx-react");
-var _loading = require("./components/loading");
-var _progress = _interopRequireDefault(require("./components/progress"));
+var _controlBar = require("../components/control-bar");
+var _toolbar = require("../components/toolbar");
+var _store = require("./store");
+var _react = require("react");
+var _loading = require("../components/control-bar/components/loading");
 require("./style.css");
-var _boardContext = _interopRequireDefault(require("../../utilities/board-context"));
-var _i18n = require("agora-ui-foundation/lib/i18n");
-var _fcrCore = require("fcr-core");
-var _store = require("./components/toolbar/store");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
 var _jsxRuntime = require("react/jsx-runtime");
 var Whiteboard = exports.Whiteboard = (0, _mobxReact.observer)(function () {
-  var _useContext = (0, _react.useContext)(_boardContext["default"]),
-    showToolbar = _useContext.showToolbar;
-  var _useContext2 = (0, _react.useContext)(_store.ToolbarContext),
-    _useContext2$observab = _useContext2.observables,
-    progress = _useContext2$observab.progress,
-    currentTool = _useContext2$observab.currentTool;
-  var transI18n = (0, _i18n.useI18n)();
-  var _useContext3 = (0, _react.useContext)(_context.BoardUIContext),
-    _useContext3$observab = _useContext3.observables,
-    canOperate = _useContext3$observab.canOperate,
-    connectionState = _useContext3$observab.connectionState,
-    writeEnabled = _useContext3$observab.writeEnabled,
-    handleBoardDomLoad = _useContext3.handleBoardDomLoad,
-    handleCollectorDomLoad = _useContext3.handleCollectorDomLoad,
-    handleClose = _useContext3.handleClose,
-    handleOpen = _useContext3.handleOpen;
-  var loading = connectionState === _fcrCore.FcrConnectionState.CONNECTING || connectionState === _fcrCore.FcrConnectionState.RECONNECTING;
-  var cursorClassname = "board-widget-cursor-".concat([_enums.FcrBoardToolType[currentTool || _enums.FcrBoardToolType.NONE]]);
-  var boardWidgetAppCls = (0, _classnames["default"])('board-widget-app', cursorClassname.toLowerCase());
+  var store = (0, _react.useContext)(_store.WhiteboardStoreContext);
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    showLoading = _useState2[0],
+    setShowLoading = _useState2[1];
+  var toolbarState = store.toolbarState,
+    isMounted = store.isMounted,
+    loading = store.loading,
+    currentTheme = store.currentTheme,
+    isHost = store.isHost,
+    joined = store.joined,
+    boardContainer = store.boardContainer,
+    connectionState = store.connectionState,
+    isActive = store.isActive,
+    canWriteBoard = store.canWriteBoard,
+    isShowToolbar = store.isShowToolbar,
+    setBoardContainerDom = store.setBoardContainerDom,
+    setWhiteboardTool = store.setWhiteboardTool,
+    setStrokeWidth = store.setStrokeWidth,
+    setStrokeColor = store.setStrokeColor,
+    setCommonColors = store.setCommonColors,
+    handleClose = store.handleClose,
+    undo = store.undo,
+    redo = store.redo,
+    clean = store.clean,
+    setTheme = store.setTheme,
+    setControlEnable = store.setControlEnable,
+    onSaveDraft = store.onSaveDraft,
+    setWhiteboardShape = store.setWhiteboardShape,
+    captureScreen = store.captureScreen;
+  var currentColor = toolbarState.currentColor,
+    currentTool = toolbarState.currentTool,
+    currentStrokeWidth = toolbarState.currentStrokeWidth,
+    currentShape = toolbarState.currentShape,
+    redoSteps = toolbarState.redoSteps,
+    undoSteps = toolbarState.undoSteps,
+    themeColors = toolbarState.themeColors,
+    commonColors = toolbarState.commonColors,
+    controlEnable = toolbarState.controlEnable;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: boardWidgetAppCls,
-      ref: handleBoardDomLoad
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "window-manager-collector",
-      ref: function ref(_ref) {
-        handleCollectorDomLoad(_ref);
+    children: [showLoading && loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_loading.Loading, {
+      joined: joined,
+      connectionState: connectionState,
+      canOperate: false,
+      handleClose: function handleClose() {
+        setShowLoading(false);
       }
-    }), canOperate && showToolbar && writeEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbar.Toolbar, {}), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_loading.Loading, {}), progress > 0 && progress < 100 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_progress["default"], {
-      title: "".concat(transI18n('fmt_screenshare_whiteboard_tips_downloading'), "..."),
-      progress: progress
-    }), (!canOperate || !showToolbar || !writeEnabled) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "whiteboard-action-prevent"
+    }), isMounted && boardContainer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbar.WhiteboardToolbar, {
+      direction: "vertical",
+      show: isShowToolbar,
+      currentStrokeWidth: currentStrokeWidth,
+      currentColor: currentColor,
+      currentTool: currentTool,
+      currentShape: currentShape,
+      redoSteps: redoSteps,
+      undoSteps: undoSteps,
+      themeColors: themeColors,
+      commonColors: commonColors,
+      setCommonColors: setCommonColors,
+      setStrokeWidth: setStrokeWidth,
+      setTool: setWhiteboardTool,
+      setShape: setWhiteboardShape,
+      setStrokeColor: setStrokeColor,
+      undo: undo,
+      redo: redo,
+      clean: clean,
+      offsetTop: 28,
+      container: boardContainer.parentNode.parentNode,
+      onSave: onSaveDraft,
+      onCaptureScreen: captureScreen
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlBar.WhiteboardControlbar, {
+      onClose: handleClose,
+      onEnable: setControlEnable,
+      canWriteBoard: canWriteBoard,
+      controlEnabled: controlEnable,
+      ownerUserName: isActive ? store.ownerUser.userName : '',
+      isMyBoard: isActive && store.isMyBoard,
+      isHost: isHost,
+      currentTheme: currentTheme,
+      setTheme: setTheme,
+      sharingType: "whiteboard",
+      onBoardDomLoaded: setBoardContainerDom,
+      currentTool: currentTool
     })]
   });
 });

package/lib/modules/widget/index.css

@@ -1,17 +1,9 @@
-.drag-region {
-  position: absolute;
-  top: 0;
-  left: 0;
+.fcr-widget-iframe {
+  border: none;
+  margin: 0;
+  padding: 0;
   width: 100%;
-  height: 30px;
-  -webkit-app-region: drag; /* 允许拖拽 */
-  z-index: 9999; /* 确保在最上层 */
-  background-color: red;
-}
-iframe {
-  position: absolute;
-  top: 30px; /* 拖拽区域下方 */
-  left: 0;
-  width: 100%;
-  height: calc(100% - 30px);
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
 }

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

@@ -1,9 +1,9 @@
 import { UIModule } from '../../base';
-import { FcrUIWidgetProvider } from '../../providers/widget-provider';
+import { WebWidgetStoreBase } from './store.base';
 import { FcrUIWebWidgetConfig } from '../../type';
 export declare class WebWidgetUIModule extends UIModule {
-    private _store?;
-    widgetProvider?: FcrUIWidgetProvider;
+    private _store;
+    get store(): WebWidgetStoreBase;
     onNodeWillActive(): void;
     nodeWillInactive(): void;
     getComponent(params: FcrUIWebWidgetConfig): import("react/jsx-runtime").JSX.Element;