fcr-ui-scene 3.6.4 → 3.7.1

package/lib/fragments/annotation/store.js

@@ -44,10 +44,16 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.AnnotationStoreContext = void 0;
+exports.FragmentAnnotationStoreContext = exports.FragmentAnnotationStore = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.date.now.js");
 require("core-js/modules/es.date.to-json.js");
 require("core-js/modules/es.json.stringify.js");
 require("core-js/modules/es.object.keys.js");
@@ -60,15 +66,8 @@ require("core-js/modules/esnext.weak-map.delete-all.js");
 require("core-js/modules/esnext.weak-map.emplace.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 require("core-js/modules/web.timers.js");
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
-var _forgeRoom = require("@netless/forge-room");
-var _forgeWhiteboard = require("@netless/forge-whiteboard");
-var _forgeRtm = require("@netless/forge-rtm");
+var _imports = require("fcr-core/lib/imports");
 var _mobx = require("mobx");
 var _type = require("../../modules/whiteboard/type");
 var _fcrCore = require("fcr-core");
@@ -78,9 +77,8 @@ var _rendererEvent = require("../../utilities/renderer-event");
 var _constant = require("../../utilities/constant");
 var _asyncRetry = require("agora-foundation/lib/utilities/async-retry");
 var _logger = require("../../utilities/logger");
-var _platform = require("../../utilities/platform");
-var _AnnotationStore;
-var _initProto, _init_joined, _init_bounds, _init_currentTool, _handleBoardDomLoadDecs, _closeDecs, _handleSetToolDecs, _ref;
+var _FragmentAnnotationStore;
+var _initProto, _init_joined, _init_bounds, _init_currentTool, _init_isIgnore, _init_drawing, _handleBoardDomLoadDecs, _closeDecs, _hideDecs, _showDecs, _handleSetToolDecs, _ref;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
@@ -93,13 +91,32 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _setFunctionName(e, t, n) { "symbol" == _typeof(t) && (t = (t = t.description) ? "[" + t + "]" : ""); try { Object.defineProperty(e, "name", { configurable: !0, value: n ? n + " " + t : t }); } catch (e) {} return e; }
 function _checkInRHS(e) { if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (null !== e ? _typeof(e) : "null")); return e; }
+var startPolling = function startPolling(pollingMethod) {
+  var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 30000;
+  var interval = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 200;
+  pollingMethod();
+  var startTime = Date.now();
+  var timer = setInterval(function () {
+    var elapsed = Date.now() - startTime;
+    if (elapsed >= duration) {
+      clearInterval(timer);
+      return;
+    }
+    pollingMethod();
+  }, interval);
+  return function () {
+    clearInterval(timer);
+  };
+};
 var _A = /*#__PURE__*/new WeakMap();
 var _B = /*#__PURE__*/new WeakMap();
 var _C = /*#__PURE__*/new WeakMap();
-_ref = (_handleBoardDomLoadDecs = [_mobx.action, _mobx.action.bound], _closeDecs = [_mobx.action, _mobx.action.bound], _handleSetToolDecs = [(0, _decorator.debounced)(300), _decorator.bound], "logger");
-var AnnotationStore = /*#__PURE__*/function () {
-  function AnnotationStore() {
-    (0, _classCallCheck2["default"])(this, AnnotationStore);
+var _D = /*#__PURE__*/new WeakMap();
+var _E = /*#__PURE__*/new WeakMap();
+_ref = (_handleBoardDomLoadDecs = [_mobx.action, _mobx.action.bound], _closeDecs = [_mobx.action, _mobx.action.bound], _hideDecs = [_mobx.action, _mobx.action.bound], _showDecs = [_mobx.action, _mobx.action.bound], _handleSetToolDecs = [(0, _decorator.debounced)(300), _decorator.bound], "logger");
+var FragmentAnnotationStore = exports.FragmentAnnotationStore = /*#__PURE__*/function () {
+  function FragmentAnnotationStore() {
+    (0, _classCallCheck2["default"])(this, FragmentAnnotationStore);
     (0, _defineProperty2["default"])(this, _ref, (_initProto(this), (0, _logger.createFragmentLogger)({
       prefix: 'AnnotationFragmentStore'
     })));
@@ -116,7 +133,15 @@ var AnnotationStore = /*#__PURE__*/function () {
       height: 600
     }));
     _classPrivateFieldInitSpec(this, _C, _init_currentTool(this, 'none'));
-    (0, _defineProperty2["default"])(this, "timer", null);
+    _classPrivateFieldInitSpec(this, _D, _init_isIgnore(this, false));
+    _classPrivateFieldInitSpec(this, _E, _init_drawing(this, false));
+    (0, _defineProperty2["default"])(this, "_hasWaitingOpen", false);
+    (0, _defineProperty2["default"])(this, "_lastViewPortSet", {
+      width: 0,
+      height: 0
+    });
+    (0, _defineProperty2["default"])(this, "_currentAnntationView", null);
+    (0, _defineProperty2["default"])(this, "_pollingCancelHandler", function () {});
     var annotationRtmAppId = localStorage.getItem('annotation_rtm_app_id') || '';
     var boardOptions = localStorage.getItem('board_options');
     var appId = JSON.parse(annotationRtmAppId);
@@ -143,7 +168,7 @@ var AnnotationStore = /*#__PURE__*/function () {
       appId: appId
     }));
   }
-  return (0, _createClass2["default"])(AnnotationStore, [{
+  return (0, _createClass2["default"])(FragmentAnnotationStore, [{
     key: "joined",
     get: function get() {
       return _classPrivateFieldGet(_A, this);
@@ -167,38 +192,54 @@ var AnnotationStore = /*#__PURE__*/function () {
     set: function set(v) {
       _classPrivateFieldSet(_C, this, v);
     }
+  }, {
+    key: "isIgnore",
+    get: function get() {
+      return _classPrivateFieldGet(_D, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_D, this, v);
+    }
+  }, {
+    key: "drawing",
+    get: function get() {
+      return _classPrivateFieldGet(_E, this);
+    },
+    set: function set(v) {
+      _classPrivateFieldSet(_E, this, v);
+    }
   }, {
     key: "open",
     value: function () {
       var _open = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-        var visible, whiteboard, _this$_boardDom;
+        var visible, _this$_resizeToMax, boundsWidth, boundsHeight, whiteboard, _this$_boardDom;
         return _regenerator["default"].wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              this.logger.info("[annotation][open]: open method is called, the init bounds is =>, ".concat(JSON.stringify(this.bounds)));
-              this.currentTool = 'curve';
-              window.runtime.browserWindow.setAlwaysOnTop(true, 'pop-up-menu');
-              (0, _platform.isWindows)() && window.runtime.browserWindow.blur();
-              this.setIgnore(true);
               visible = window.runtime.browserWindow.isVisible();
-              this.logger.info("[annotation][open]: the annotation window visible is =>\n      ".concat(visible, ", open process is ").concat(visible ? 'return' : 'continue...'));
-              if (!window.runtime.browserWindow.isVisible()) {
+              this.logger.info("[annotation-fragment][open]: open method is called, the init bounds is =>, ".concat(JSON.stringify(this.bounds), ", visible ").concat(visible));
+              if (!visible) {
                 _context.next = 1;
                 break;
               }
               return _context.abrupt("return");
             case 1:
+              this._cancelCurrentUpdateWindowSizeTimber('send-fragment-close');
+              this.currentTool = 'curve';
+              window.runtime.browserWindow.setAlwaysOnTop(true, 'pop-up-menu');
+              this.setIgnore(true);
+              this._hasWaitingOpen = !this._engine;
               if (this._engine) {
                 _context.next = 2;
                 break;
               }
-              this.logger.info('[annotation][open]: this._engine is null');
+              this.logger.info("[annotation-fragment][open]: this._engine is null, so open fail,\n         cannot draw, we will reopen after engine connected");
               return _context.abrupt("return");
             case 2:
-              this.logger.info('[annotation][open]: this._engine is initialized, show annotation window');
+              this.logger.info('[annotation-fragment][open]: this._engine is initialized, show annotation window');
               window.runtime.browserWindow.show();
             case 3:
-              this.logger.info("[annotation][open]: this._joined ".concat(this.joined));
+              this.logger.info("[annotation-fragment][open]: this._joined ".concat(this.joined));
               if (!this.joined) {
                 _context.next = 4;
                 break;
@@ -216,12 +257,13 @@ var AnnotationStore = /*#__PURE__*/function () {
                 _context.next = 6;
                 break;
               }
-              return _context.abrupt("return", this.logger.error("[annotation][open]: this._boardRoom is not initialized, ".concat(this._boardRoom)));
+              return _context.abrupt("return", this.logger.error("[annotation-fragment][open]: this._boardRoom is not initialized, ".concat(this._boardRoom)));
             case 6:
+              _this$_resizeToMax = this._resizeToMax(this.bounds.width, this.bounds.height, 1920), boundsWidth = _this$_resizeToMax.width, boundsHeight = _this$_resizeToMax.height;
               _context.next = 7;
-              return this._boardRoom.applicationManager.launchApplication(_forgeWhiteboard.WhiteboardApplication, {
-                width: this.bounds.width,
-                height: this.bounds.height,
+              return this._boardRoom.applicationManager.launchApplication(_imports.FcrWhiteboardApplication, {
+                width: boundsWidth,
+                height: boundsHeight,
                 defaultToolbarStyle: {
                   tool: 'curve',
                   strokeColor: '#FFC908',
@@ -230,15 +272,21 @@ var AnnotationStore = /*#__PURE__*/function () {
               }, this._FORGE_WHITEBOARD_APP_ID);
             case 7:
               whiteboard = _context.sent;
-              this.logger.info("[annotation][open]: whiteboard launch success");
+              this.logger.info("[annotation-fragment][open]: whiteboard launch success");
               if (whiteboard) {
                 this._boardView.classList.add('fcr-whiteboard-window-view');
-                this._boardView.appendChild(whiteboard.view);
+                this._currentAnntationView = whiteboard.view;
+                this._boardView.appendChild(this._currentAnntationView);
                 (_this$_boardDom = this._boardDom) === null || _this$_boardDom === void 0 || _this$_boardDom.appendChild(this._boardView);
                 this._boardInstance = whiteboard;
+                // @ts-ignore
+                window._boardInstance = this._boardInstance;
                 this._initBoardStyle(whiteboard);
                 this.joined = true;
-                this.logger.info("[annotation][open]: mount success, the joined is ".concat(this.joined));
+                this.logger.info("[annotation-fragment][open]: mount success, the joined is ".concat(this.joined));
+                // 共享发起端 开启标注时，重置30s轮询updateWindowSize
+                this._handlePollingUpdateWindowSize('sender-board-room-init');
+                this._syncScreenShareOwnerOpenDone();
               }
               this._boardRoom.applicationManager.on('launch', this._launchHandler);
               this._boardRoom.applicationManager.on('terminal', this._terminalHandler);
@@ -262,53 +310,138 @@ var AnnotationStore = /*#__PURE__*/function () {
     key: "close",
     value: function () {
       var _close = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-        var _this$_boardInstance, _this$_boardInstance2, _this$_boardInstance3, _this$_boardRoom, _this$_boardRoom2, _this$_boardRoom3, _this$_boardRoom4;
+        var _this$_boardRoom, _this$_boardRoom2, _this$_boardRoom3, _t;
         return _regenerator["default"].wrap(function (_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
+              _context2.prev = 0;
+              this._cancelCurrentUpdateWindowSizeTimber('send-fragment-close');
+              if (this._boardInstance) {
+                this._boardInstance.clearPage();
+                this.logger.info('[annotation-fragment][close]: clearPage');
+              }
               this.joined = false;
               this.currentTool = 'curve';
-              (_this$_boardInstance = this._boardInstance) === null || _this$_boardInstance === void 0 || _this$_boardInstance.clearPage();
-              ((_this$_boardInstance2 = this._boardInstance) === null || _this$_boardInstance2 === void 0 ? void 0 : _this$_boardInstance2.view) && this._boardView.removeChild((_this$_boardInstance3 = this._boardInstance) === null || _this$_boardInstance3 === void 0 ? void 0 : _this$_boardInstance3.view);
-              (_this$_boardRoom = this._boardRoom) === null || _this$_boardRoom === void 0 || _this$_boardRoom.applicationManager.removeListener('launch', this._launchHandler);
-              (_this$_boardRoom2 = this._boardRoom) === null || _this$_boardRoom2 === void 0 || _this$_boardRoom2.applicationManager.removeListener('terminal', this._terminalHandler);
-              (_this$_boardRoom3 = this._boardRoom) === null || _this$_boardRoom3 === void 0 || _this$_boardRoom3.applicationManager.terminateApplication(this._FORGE_WHITEBOARD_APP_ID);
+              // this._boardRoom?.applicationManager.terminateApplication(this._FORGE_WHITEBOARD_APP_ID);
+              if (this._currentAnntationView && this._boardView.hasChildNodes()) {
+                this._boardView.removeChild(this._currentAnntationView);
+              }
               _context2.next = 1;
-              return (_this$_boardRoom4 = this._boardRoom) === null || _this$_boardRoom4 === void 0 ? void 0 : _this$_boardRoom4.leaveRoom();
+              return (_this$_boardRoom = this._boardRoom) === null || _this$_boardRoom === void 0 ? void 0 : _this$_boardRoom.leaveRoom();
             case 1:
-              this._boardRoom = null;
+              this.logger.info(// @ts-ignore
+              "[annotation-fragment][close] leaveRoom , ".concat(this._boardRoom['traceId']));
+              (_this$_boardRoom2 = this._boardRoom) === null || _this$_boardRoom2 === void 0 || _this$_boardRoom2.applicationManager.removeListener('launch', this._launchHandler);
+              (_this$_boardRoom3 = this._boardRoom) === null || _this$_boardRoom3 === void 0 || _this$_boardRoom3.applicationManager.removeListener('terminal', this._terminalHandler);
               this._boardInstance = null;
-              window.runtime.browserWindow.hide();
-              this.logger.info('[annotation][open]: close annotation window');
+              this._boardRoom = null;
+              _context2.next = 3;
+              break;
             case 2:
+              _context2.prev = 2;
+              _t = _context2["catch"](0);
+              this.logger.info('[annotation-fragment][close]: catch error', _t);
+            case 3:
+              _context2.prev = 3;
+              window.runtime.browserWindow.hide();
+              this.logger.info('[annotation-fragment][close]: close annotation window');
+              return _context2.finish(3);
+            case 4:
             case "end":
               return _context2.stop();
           }
-        }, _callee2, this);
+        }, _callee2, this, [[0, 2, 3, 4]]);
       }));
       function close() {
         return _close.apply(this, arguments);
       }
       return close;
     }()
+  }, {
+    key: "hide",
+    value: function hide() {
+      window.runtime.browserWindow.hide();
+      this.logger.info('[annotation-fragment][open]: hide annotation window');
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      window.runtime.browserWindow.setAlwaysOnTop(true, 'pop-up-menu');
+      window.runtime.browserWindow.show();
+      this.logger.info('[annotation-fragment][open]: show annotation window');
+    }
+  }, {
+    key: "focus",
+    value: function focus() {
+      window.runtime.browserWindow.focus();
+    }
   }, {
     key: "setBounds",
     value: function setBounds(bounds) {
       this.bounds = bounds;
-      this.logger.info("[annotation][setBounds]: bounds is changed =>, ".concat(JSON.stringify(bounds)));
+      this.logger.info("[annotation-fragment][setBounds]: bounds is changed =>, ".concat(JSON.stringify(bounds)));
       window.runtime.browserWindow.setBounds(bounds);
+      this._updateBoardElBySize({
+        width: bounds.width,
+        height: bounds.height
+      });
+    }
+  }, {
+    key: "updateWindowSize",
+    value: function updateWindowSize(paramWidth, paramHeight) {
+      this._updateWindowSize(paramWidth, paramHeight);
+    }
+  }, {
+    key: "_updateWindowSizeWithCurrentBounds",
+    value: function _updateWindowSizeWithCurrentBounds() {
+      if (this.bounds && this.bounds.width > 0 && this.bounds.height > 0) {
+        this._updateWindowSize(this.bounds.width, this.bounds.height);
+      }
+    }
+  }, {
+    key: "_updateWindowSize",
+    value: function _updateWindowSize(paramWidth, paramHeight) {
+      var _this$_boardInstance;
+      if (!paramWidth || !paramHeight) {
+        return;
+      }
+      // if (
+      //   paramWidth !== this._lastViewPortSet.width ||
+      //   paramHeight !== this._lastViewPortSet.height
+      // ) {
+      this._lastViewPortSet.width = paramWidth;
+      this._lastViewPortSet.height = paramHeight;
+      this.logger.info("[annotation-fragment][_updateWindowSize]: updateViewport width:".concat(paramWidth, " height:").concat(paramHeight));
+      (_this$_boardInstance = this._boardInstance) === null || _this$_boardInstance === void 0 || _this$_boardInstance.updateViewport(paramWidth, paramHeight);
+      // }
+    }
+  }, {
+    key: "_updateBoardElBySize",
+    value: function _updateBoardElBySize(size) {
+      if (size) {
+        var _this$_boardInstance2;
+        this._boardView.style.width = "".concat(size.width, "px");
+        this._boardView.style.height = "".concat(size.height, "px");
+        var currentBoardInstanceView = (_this$_boardInstance2 = this._boardInstance) === null || _this$_boardInstance2 === void 0 ? void 0 : _this$_boardInstance2.view;
+        if (currentBoardInstanceView) {
+          currentBoardInstanceView.style.width = "".concat(size.width, "px");
+          currentBoardInstanceView.style.height = "".concat(size.height, "px");
+        }
+        this._updateWindowSize(size.width, size.height);
+      }
     }
   }, {
     key: "setIgnore",
     value: function setIgnore(ignore) {
-      this.logger.info("[annotation][setIgnore]: setIgnore method is called, the ignore is => ".concat(ignore));
+      this.logger.info("[annotation-fragment][setIgnore]: setIgnore method is called, the ignore is => ".concat(ignore));
+      this.isIgnore = ignore;
       window.runtime.browserWindow.setIgnoreMouseEvents(ignore);
     }
   }, {
     key: "toolChanged",
     value: function toolChanged(event) {
       if (!this._boardInstance) return;
-      this.logger.info("[annotation][toolChanged]: toolChanged method is called, the event is => ".concat(JSON.stringify(event)));
+      this.logger.info("[annotation-fragment][toolChanged]: toolChanged method is called, the event is => ".concat(JSON.stringify(event)));
       var board = this._boardInstance;
       var payload = event.payload;
       switch (event.action) {
@@ -341,12 +474,18 @@ var AnnotationStore = /*#__PURE__*/function () {
         //   break;
       }
     }
+  }, {
+    key: "setDrawing",
+    value: function setDrawing(drawing) {
+      this.logger.info("[annotation-fragment][setDrawing]: setDrawing method is called, the drawing is => ".concat(drawing));
+      this.drawing = drawing;
+    }
   }, {
     key: "_initBoardStyle",
     value: function _initBoardStyle(whiteboard) {
       var frameWidth = this.bounds.width;
       var frameHeight = this.bounds.height;
-      this.logger.info("[annotation][initBoardStyle] mount success, width: ".concat(frameWidth, " , height: ").concat(frameHeight));
+      this.logger.info("[annotation-fragment][initBoardStyle] mount success, width: ".concat(frameWidth, " , height: ").concat(frameHeight));
       this._boardView.style.width = "".concat(frameWidth, "px");
       this._boardView.style.height = "".concat(frameHeight, "px");
       whiteboard.view.style.height = "".concat(frameHeight, "px");
@@ -358,16 +497,17 @@ var AnnotationStore = /*#__PURE__*/function () {
       whiteboard.enableCameraBoundaryHighlight = false;
       whiteboard.strokeColor = '#FFC908';
       whiteboard.setCurrentTool('curve');
-      this.logger.info("[annotation][initBoardStyle] mount success current tool, ".concat(whiteboard.getCurrentTool()));
+      this._updateWindowSize(frameWidth, frameHeight);
+      this.logger.info("[annotation-fragment][initBoardStyle] mount success current tool, ".concat(whiteboard.getCurrentTool(), ", updateViewport width: ").concat(frameWidth, " height: ").concat(frameHeight));
       whiteboard.on('undoStackLength', function (steps) {
-        (0, _platform.isWindows)() && window.runtime.browserWindow.blur();
+        // isWindows() && window.runtime.browserWindow.blur();
         (0, _rendererEvent.sendEvent)({
           action: _constant.FcrUIRendererEventAction.SET_ANNOTATION_UNDO,
           payload: steps > 0
         });
       });
       whiteboard.on('redoStackLength', function (steps) {
-        (0, _platform.isWindows)() && window.runtime.browserWindow.blur();
+        // isWindows() && window.runtime.browserWindow.blur();
         (0, _rendererEvent.sendEvent)({
           action: _constant.FcrUIRendererEventAction.SET_ANNOTATION_REDO,
           payload: steps > 0
@@ -399,29 +539,38 @@ var AnnotationStore = /*#__PURE__*/function () {
         return _regenerator["default"].wrap(function (_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
-              engine.login();
               engine.addObserver({
                 onConnectionStateUpdated: function onConnectionStateUpdated(state) {
+                  (0, _rendererEvent.sendEvent)({
+                    action: _constant.FcrUIRendererEventAction.FRAGMENT_ANNOTATION_ENGINE_STATE,
+                    payload: state
+                  });
                   if (state === _fcrCore.FcrConnectionState.CONNECTED) {
                     _this2._engine = engine;
-                    _this2.logger.info("[annotation][initEngine]: engine connection state updated => CONNECTED");
+                    _this2.logger.info("[annotation-fragment][initEngine]: engine connection state updated => CONNECTED, hasWaitingOpen ".concat(_this2._hasWaitingOpen));
+                    if (_this2._hasWaitingOpen) {
+                      _this2._hasWaitingOpen = false;
+                      _this2.open();
+                    }
                   }
                   if (state === _fcrCore.FcrConnectionState.DISCONNECTED) {
-                    _this2.logger.info("[annotation][initEngine]: engine connection state updated => DISCONNECTED, the engine is ".concat(_this2._engine));
-                    !_this2._engine && engine.login();
+                    _this2.logger.info("[annotation-fragment][initEngine]: engine connection state updated => DISCONNECTED, the engine is ".concat(_this2._engine));
+                    _this2._engine && engine.login();
                   }
                   if (state === _fcrCore.FcrConnectionState.CONNECTING) {
-                    _this2.logger.info("[annotation][initEngine]: engine connection state updated => CONNECTING");
+                    _this2.logger.info("[annotation-fragment][initEngine]: engine connection state updated => CONNECTING");
                   }
                   if (state === _fcrCore.FcrConnectionState.RECONNECTING) {
-                    _this2.logger.info("[annotation][initEngine]: engine connection state updated => RECONNECTING");
+                    _this2.logger.info("[annotation-fragment][initEngine]: engine connection state updated => RECONNECTING");
                   }
                   if (state === _fcrCore.FcrConnectionState.ABORTED) {
-                    _this2.logger.info("[annotation][initEngine]: engine connection state updated => ABORTED, the engine is ".concat(_this2._engine));
-                    !_this2._engine && engine.login();
+                    _this2.logger.info("[annotation-fragment][initEngine]: engine connection state updated => ABORTED, the engine is ".concat(_this2._engine));
+                    _this2._engine && engine.login();
                   }
                 }
               });
+              engine.login();
+              window.runtime.browserWindow.hide();
             case 1:
             case "end":
               return _context3.stop();
@@ -438,20 +587,22 @@ var AnnotationStore = /*#__PURE__*/function () {
     value: function () {
       var _initBoardRoom2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee6() {
         var _this3 = this;
-        var _this$_config, userId, boardToken, region, appIdentifier, boardId, nickName, rtmClient, rtmProvider, wbRoom, retriesMax, _t;
+        var _this$_config, userId, boardToken, region, appIdentifier, boardId, nickName, rtmClient, rtmProvider, wbRoom, currentTimeStamp, retriesMax, _t2;
         return _regenerator["default"].wrap(function (_context6) {
           while (1) switch (_context6.prev = _context6.next) {
             case 0:
               _this$_config = this._config, userId = _this$_config.userId, boardToken = _this$_config.boardToken, region = _this$_config.region, appIdentifier = _this$_config.appIdentifier, boardId = _this$_config.boardId;
               nickName = localStorage.getItem('annotation_nickname') || '';
-              this.logger.info("[annotation][initBoardRoom]: start init board room with config => ".concat(JSON.stringify(this._config), " - ").concat(nickName));
+              this.logger.info("[annotation-fragment][initBoardRoom]: start init board room with config => ".concat(JSON.stringify(this._config), " - ").concat(nickName));
               // @ts-ignore
               rtmClient = this._engine._rteEngine._rtmClient._client;
-              rtmProvider = new _forgeRtm.RTMProvider_2_2(rtmClient);
-              wbRoom = new _forgeRoom.Room(boardId, rtmProvider);
+              rtmProvider = new _imports.FcrRTMProvider_2_2(rtmClient);
+              wbRoom = new _imports.FcrRoom(boardId, rtmProvider);
               this._boardRoom = wbRoom;
-              wbRoom.applicationManager.registerApplication(_forgeWhiteboard.WhiteboardApplication);
-              this.logger.info("[annotation][initBoardRoom]: bordRoom instance is created, start join room");
+              currentTimeStamp = Date.now(); // @ts-ignore
+              this._boardRoom['traceId'] = "".concat(boardToken, "-").concat(boardId, "-").concat(userId, "-").concat(currentTimeStamp);
+              wbRoom.applicationManager.registerApplication(_imports.FcrWhiteboardApplication);
+              this.logger.info("[annotation-fragment][initBoardRoom]: bordRoom instance is created, start join room");
               _context6.prev = 1;
               retriesMax = 10;
               _context6.next = 2;
@@ -471,7 +622,12 @@ var AnnotationStore = /*#__PURE__*/function () {
                         }
                       });
                     case 1:
-                      _this3.logger.info("[annotation][initBoardRoom]: join room success");
+                      // @ts-ignore
+                      _this3.logger.info(// @ts-ignore
+                      "[annotation-fragment][initBoardRoom]: join room success, traceId ".concat(_this3._boardRoom['traceId']));
+                      // room.userManager.on("join")  和 room.userManager.on("leave")
+                      wbRoom.userManager.on('join', _this3._handleBoardRoomUserJoin);
+                      // wbRoom.userManager.on('leave',this._handleBoardRoomUserLeave);
                     case 2:
                     case "end":
                       return _context4.stop();
@@ -486,7 +642,7 @@ var AnnotationStore = /*#__PURE__*/function () {
                     while (1) switch (_context5.prev = _context5.next) {
                       case 0:
                         error = _ref3.error, timeFn = _ref3.timeFn, currentRetry = _ref3.currentRetry;
-                        _this3.logger.info("[annotation][initBoardRoom]: retry to join board room, ".concat(error.message, ", retry ").concat(currentRetry, " times"));
+                        _this3.logger.info("[annotation-fragment][initBoardRoom]: retry to join board room, ".concat(error.message, ", retry ").concat(currentRetry, " times"));
                         _context5.next = 1;
                         return timeFn();
                       case 1:
@@ -506,8 +662,8 @@ var AnnotationStore = /*#__PURE__*/function () {
               break;
             case 3:
               _context6.prev = 3;
-              _t = _context6["catch"](1);
-              this.logger.error("[annotation][initBoardRoom]: join room failed");
+              _t2 = _context6["catch"](1);
+              this.logger.error("[annotation-fragment][initBoardRoom]: join room failed");
             case 4:
             case "end":
               return _context6.stop();
@@ -525,7 +681,7 @@ var AnnotationStore = /*#__PURE__*/function () {
       var userId = config.userId,
         token = config.roomToken,
         appId = config.appId;
-      this.logger.info("[annotation][initEngine]: init engine with config => ".concat(JSON.stringify(config)));
+      this.logger.info("[annotation-fragment][initEngine]: init engine with config => ".concat(JSON.stringify(config)));
       return new _fcrCore.FcrCoreEngine(_objectSpread({
         appId: appId,
         token: token,
@@ -537,9 +693,9 @@ var AnnotationStore = /*#__PURE__*/function () {
     key: "_launchHandler",
     value: function _launchHandler(appId, app) {
       if (appId === this._FORGE_WHITEBOARD_APP_ID) {
-        var _this$_boardView;
-        this.logger.info("[annotation][event]: launch event is triggered => ".concat(app.selfUserId));
-        app.view && ((_this$_boardView = this._boardView) === null || _this$_boardView === void 0 ? void 0 : _this$_boardView.appendChild(app.view));
+        this.logger.info("[annotation-fragment][event]: launch event is triggered => ".concat(app.selfUserId));
+        this._currentAnntationView = app.view;
+        this._currentAnntationView && this._boardView.appendChild(this._currentAnntationView);
         this._initBoardStyle(app);
       }
     }
@@ -547,18 +703,59 @@ var AnnotationStore = /*#__PURE__*/function () {
     key: "_terminalHandler",
     value: function _terminalHandler(appId, app) {
       if (appId === this._FORGE_WHITEBOARD_APP_ID) {
-        var _this$_boardView2;
-        this.logger.info("[annotation][event]: terminal event is triggered => ".concat(app.selfUserId));
-        app.view && this._boardView.hasChildNodes() && ((_this$_boardView2 = this._boardView) === null || _this$_boardView2 === void 0 ? void 0 : _this$_boardView2.removeChild(app.view));
+        var _this$_boardView;
+        this.logger.info("[annotation-fragment][event]: terminal event is triggered => ".concat(app.selfUserId));
+        (app === null || app === void 0 ? void 0 : app.view) && this._boardView.hasChildNodes() && ((_this$_boardView = this._boardView) === null || _this$_boardView === void 0 ? void 0 : _this$_boardView.removeChild(app.view));
+      }
+    }
+  }, {
+    key: "_resizeToMax",
+    value: function _resizeToMax(w, h) {
+      var scaleBase = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1920;
+      var scale = scaleBase / Math.max(w, h);
+      return {
+        width: Math.round(w * scale),
+        height: Math.round(h * scale)
+      };
+    }
+  }, {
+    key: "_cancelCurrentUpdateWindowSizeTimber",
+    value: function _cancelCurrentUpdateWindowSizeTimber(stage) {
+      if (this._pollingCancelHandler && typeof this._pollingCancelHandler === 'function') {
+        this._pollingCancelHandler();
+        this.logger.info("[annotation-fragment]: end a new 30s polling to updateWindowSize, when ".concat(stage));
       }
     }
+  }, {
+    key: "_handlePollingUpdateWindowSize",
+    value: function _handlePollingUpdateWindowSize(stage) {
+      this._cancelCurrentUpdateWindowSizeTimber(stage);
+      this._pollingCancelHandler = startPolling(this._updateWindowSizeWithCurrentBounds);
+      this.logger.info("[annotation-fragment]: start a new 30s polling to updateWindowSize, after ".concat(stage));
+    }
+  }, {
+    key: "_handleBoardRoomUserJoin",
+    value: function _handleBoardRoomUserJoin(user) {
+      // 共享发起端 监听白板房间有用户加入时，重置30s轮询updateWindowSize
+      this._handlePollingUpdateWindowSize('send-board-room-user-join');
+    }
+  }, {
+    key: "_syncScreenShareOwnerOpenDone",
+    value: function _syncScreenShareOwnerOpenDone() {
+      this.logger.info('[annotation-fragment]: _syncScreenShareOwnerOpenDone');
+      (0, _rendererEvent.sendEvent)({
+        action: _constant.FcrUIRendererEventAction.FRAGMENT_ANNOTATION_SYNC_OWNER_OPEN_DONE,
+        payload: null
+      });
+    }
   }]);
 }();
-_AnnotationStore = AnnotationStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_AnnotationStore, [[_mobx.observable, 1, "joined"], [_mobx.observable, 1, "bounds"], [_mobx.observable, 1, "currentTool"], [_decorator.bound, 2, "open"], [_handleBoardDomLoadDecs, 18, "handleBoardDomLoad"], [_closeDecs, 18, "close"], [_decorator.bound, 2, "setIgnore"], [_decorator.bound, 2, "toolChanged"], [_decorator.bound, 2, "_initBoardStyle"], [_handleSetToolDecs, 2, "_handleSetTool"], [_decorator.bound, 2, "_init"], [_decorator.bound, 2, "_initBoardRoom"], [_decorator.bound, 2, "_launchHandler"], [_decorator.bound, 2, "_terminalHandler"]], []).e, 4);
+_FragmentAnnotationStore = FragmentAnnotationStore;
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_FragmentAnnotationStore, [[_mobx.observable, 1, "joined"], [_mobx.observable, 1, "bounds"], [_mobx.observable, 1, "currentTool"], [_mobx.observable, 1, "isIgnore"], [_mobx.observable, 1, "drawing"], [_decorator.bound, 2, "open"], [_handleBoardDomLoadDecs, 18, "handleBoardDomLoad"], [_closeDecs, 18, "close"], [_hideDecs, 18, "hide"], [_showDecs, 18, "show"], [_decorator.bound, 2, "focus"], [_decorator.bound, 2, "updateWindowSize"], [_decorator.bound, 2, "_updateWindowSizeWithCurrentBounds"], [_decorator.bound, 2, "_updateWindowSize"], [_decorator.bound, 2, "_updateBoardElBySize"], [_decorator.bound, 2, "setIgnore"], [_decorator.bound, 2, "toolChanged"], [_decorator.bound, 2, "setDrawing"], [_decorator.bound, 2, "_initBoardStyle"], [_handleSetToolDecs, 2, "_handleSetTool"], [_decorator.bound, 2, "_init"], [_decorator.bound, 2, "_initBoardRoom"], [_decorator.bound, 2, "_launchHandler"], [_decorator.bound, 2, "_terminalHandler"], [_decorator.bound, 2, "_resizeToMax"], [_decorator.bound, 2, "_cancelCurrentUpdateWindowSizeTimber"], [_decorator.bound, 2, "_handlePollingUpdateWindowSize"], [_decorator.bound, 2, "_handleBoardRoomUserJoin"], [_decorator.bound, 2, "_syncScreenShareOwnerOpenDone"]], []).e, 6);
 _init_joined = _applyDecs$e[0];
 _init_bounds = _applyDecs$e[1];
 _init_currentTool = _applyDecs$e[2];
-_initProto = _applyDecs$e[3];
-var _default = exports["default"] = AnnotationStore;
-var AnnotationStoreContext = exports.AnnotationStoreContext = /*#__PURE__*/(0, _react.createContext)(null);
+_init_isIgnore = _applyDecs$e[3];
+_init_drawing = _applyDecs$e[4];
+_initProto = _applyDecs$e[5];
+var FragmentAnnotationStoreContext = exports.FragmentAnnotationStoreContext = /*#__PURE__*/(0, _react.createContext)(null);

package/lib/fragments/annotation/style.css

@@ -0,0 +1,9 @@
+.fragment-annotation-wrapper {
+  width: '100vw';
+  height: '100vh';
+  overflow: 'hidden';
+}
+
+.fragment-annotation-wrapper-visible-hidden {
+  visibility: hidden;
+}

package/lib/{modules/annotation/components → fragments/annotation}/toolbar/components/item/item.js

@@ -13,8 +13,8 @@ var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _popover = require("agora-ui-foundation/lib/components/popover");
 var _react = require("react");
-var _hostAreaContainer = require("../../../../../dialog/components/host-area-container");
 require("./style.css");
+var _hostAreaContainer = require("../../../../../modules/dialog/components/host-area-container");
 var _jsxRuntime = require("react/jsx-runtime");
 var AnnotationToolItem = exports.AnnotationToolItem = function AnnotationToolItem(props) {
   var _props$iconType = props.iconType,

package/lib/{modules/annotation/components → fragments/annotation}/toolbar/components/pen-tool/pen-panel/index.js

@@ -20,7 +20,7 @@ var AnnotationPenPanel = exports.AnnotationPenPanel = (0, _mobxReact.observer)(f
     setStrokeWidth = _useContext.setStrokeWidth;
   var _onClick = props.onClick;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.AnnotationToolPanel, {
-    header: [2, 4, 5, 6].map(function (width, index) {
+    header: [3, 5, 7, 10].map(function (width, index) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
         active: currentStrokeWidth === width,
         iconType: _type.FcrIconType.FCR_PENSIZE_STRAIGHT,