fcr-ui-scene 3.8.2 → 3.9.0-alpha

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

@@ -5,10 +5,9 @@ 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_joined, _init_bounds, _init_currentTool, _init_drawing, _handleBoardDomLoadDecs, _closeDecs, _hideDecs, _showDecs, _handleSetToolDecs, _ref;
+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 _regeneratorRuntime from "@babel/runtime/regenerator";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
 import "core-js/modules/es.symbol.to-primitive.js";
@@ -20,7 +19,6 @@ 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.now.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";
@@ -35,8 +33,6 @@ 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.promise.js";
-import "core-js/modules/es.regexp.exec.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";
@@ -62,7 +58,7 @@ 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 "core-js/modules/web.timers.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; }
@@ -73,61 +69,134 @@ 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; }
+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 { FcrRoom, FcrWhiteboardApplication, FcrRTMProvider_2_2, jsonstring, AgoraScheduler } from 'fcr-core/lib/imports';
-import { action, observable } from 'mobx';
-import { ToolbarEvents } from '../../modules/whiteboard/type';
-import { FcrConnectionState, FcrCoreEngine, FcrRegion, registerPlugin } from 'fcr-core';
-import { bound, debounced } from 'agora-foundation/lib/decorator';
-import { convertTool, engineRestConfig } from './libs';
-import { retryAttempt } from 'agora-foundation/lib/utilities/async-retry';
+import tinycolor from 'tinycolor2';
+import { WhiteboardToolAction } from '../../modules/secondary-window/type';
+import '../../plugins/rtm-plugin';
 import { createFragmentLogger } from '../../utilities/logger';
-import { startPolling } from './utils';
-import { ElectronRtcPlugin } from 'fcr-core/lib/plugins/electron-rtc-plugin';
-import { RtmPlugin } from 'fcr-core/lib/plugins/rtm-plugin';
-import { getBoardOptions, setAnnotationEngineState } from '../../utilities/shared-storage';
+import { getAnnotationViewportSize, getBoardOptions } from '../../utilities/shared-storage';
+import { convertShapeToBoardToolType, engineRestConfig } from './libs';
 var _A = /*#__PURE__*/new WeakMap();
-var _B = /*#__PURE__*/new WeakMap();
-var _C = /*#__PURE__*/new WeakMap();
-var _D = /*#__PURE__*/new WeakMap();
-_ref = (_handleBoardDomLoadDecs = [action, action.bound], _closeDecs = [action, action.bound], _hideDecs = [action, action.bound], _showDecs = [action, action.bound], _handleSetToolDecs = [debounced(300), bound], "logger");
 export var FragmentAnnotationStore = /*#__PURE__*/function () {
   function FragmentAnnotationStore() {
     var _this = this;
     _classCallCheck(this, FragmentAnnotationStore);
-    _defineProperty(this, _ref, (_initProto(this), createFragmentLogger({
-      prefix: 'AnnotationFragmentStore'
+    _defineProperty(this, "logger", (_initProto(this), createFragmentLogger({
+      prefix: 'FragmentWhiteboardStore'
     })));
     _defineProperty(this, "_engine", null);
-    _defineProperty(this, "_FORGE_WHITEBOARD_APP_ID", 'Annotation');
-    _defineProperty(this, "_boardInstance", null);
-    _defineProperty(this, "_boardRoom", null);
-    _defineProperty(this, "_boardView", document.createElement('div'));
-    _classPrivateFieldInitSpec(this, _A, _init_joined(this, false));
-    _classPrivateFieldInitSpec(this, _B, _init_bounds(this, {
-      x: 0,
-      y: 0,
-      width: 800,
-      height: 600
-    }));
-    _classPrivateFieldInitSpec(this, _C, _init_currentTool(this, 'none'));
-    _classPrivateFieldInitSpec(this, _D, _init_drawing(this, false));
-    _defineProperty(this, "_hasWaitingOpen", false);
-    _defineProperty(this, "_lastViewPortSet", {
-      width: 0,
-      height: 0
+    _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;
+      }()
     });
-    _defineProperty(this, "_pollingCancelHandler", function () {});
-    _defineProperty(this, "_checkForConnectTaskInterval", AgoraScheduler.Duration.second(1));
-    _defineProperty(this, "_isEngineInitialized", false);
-    _defineProperty(this, "_openAbortController", null);
-    _defineProperty(this, "_openLock", false);
-    this._checkForConnectTask = AgoraScheduler.shared.addIntervalTask(function () {
-      _this._checkForConnect();
-    }, this._checkForConnectTaskInterval);
+    _classPrivateFieldInitSpec(this, _A, _init_currentTool(this, FcrBoardToolType.NONE));
+    window.require = parent.window.require;
+    this._viewportSize = getAnnotationViewportSize();
+    this._init();
   }
   return _createClass(FragmentAnnotationStore, [{
-    key: "joined",
+    key: "currentTool",
     get: function get() {
       return _classPrivateFieldGet(_A, this);
     },
@@ -135,732 +204,273 @@ export var FragmentAnnotationStore = /*#__PURE__*/function () {
       _classPrivateFieldSet(_A, this, v);
     }
   }, {
-    key: "bounds",
+    key: "boardDom",
     get: function get() {
-      return _classPrivateFieldGet(_B, this);
-    },
-    set: function set(v) {
-      _classPrivateFieldSet(_B, this, v);
+      return this._boardDom;
     }
   }, {
-    key: "currentTool",
+    key: "mainWindowRenderer",
     get: function get() {
-      return _classPrivateFieldGet(_C, this);
-    },
-    set: function set(v) {
-      _classPrivateFieldSet(_C, this, v);
+      // @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: "drawing",
-    get: function get() {
-      return _classPrivateFieldGet(_D, this);
-    },
-    set: function set(v) {
-      _classPrivateFieldSet(_D, this, v);
+    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: "open",
-    value: function () {
-      var _open = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var _this2 = this;
-        var visible, boardRoom, _this$_resizeToMax, boundsWidth, boundsHeight, width, height, whiteboard, _t;
-        return _regeneratorRuntime.wrap(function (_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              if (!(this._openLock || this.joined)) {
-                _context.next = 1;
-                break;
-              }
-              return _context.abrupt("return");
-            case 1:
-              this._openLock = true;
-              _context.prev = 2;
-              // TODO: window
-              // @ts-ignore
-              visible = window.runtime.browserWindow.isVisible();
-              this.logger.info("open method is called, the init bounds is =>, ".concat(JSON.stringify(this.bounds), ", visible ").concat(visible));
-              if (!visible) {
-                _context.next = 3;
-                break;
-              }
-              return _context.abrupt("return");
-            case 3:
-              this._cancelCurrentUpdateWindowSizeTimber('send-fragment-close');
-              this.currentTool = 'curve';
-              // TODO: window
-              this.logger.info('windows_index setAlwaysOnTop in annotation');
-              // @ts-ignore
-              window.runtime.browserWindow.setAlwaysOnTop(true, 'pop-up-menu');
-              this.setIgnore(true);
-              this._hasWaitingOpen = !this._engine;
-              if (this._engine) {
-                _context.next = 4;
-                break;
-              }
-              this.logger.info("this._engine is null, so open fail, cannot draw, we will reopen after engine connected");
-              return _context.abrupt("return");
-            case 4:
-              this.logger.info('this._engine is initialized, show annotation window');
-              // TODO: window
-              // @ts-ignore
-              window.runtime.browserWindow.show();
-            case 5:
-              if (!this._boardRoom) {
-                _context.next = 6;
-                break;
-              }
-              throw new Error('state is not in sync, joined state is false, but boardRoom is not null');
-            case 6:
-              _context.next = 7;
-              return this._initBoardRoom();
-            case 7:
-              boardRoom = _context.sent;
-              this._boardRoom = boardRoom;
-              _this$_resizeToMax = this._resizeToMax(this.bounds.width, this.bounds.height, 1920), boundsWidth = _this$_resizeToMax.width, boundsHeight = _this$_resizeToMax.height;
-              width = boundsWidth;
-              height = boundsHeight;
-              if (!boundsWidth) {
-                this.logger.warn("boundsWidth is a invalid value: ".concat(boundsWidth, ", use default width 800"));
-                width = 800;
-              }
-              if (!boundsHeight) {
-                this.logger.warn("boundsHeight is a invalid value: ".concat(boundsHeight, ", use default height 600"));
-                height = 600;
-              }
-              _context.next = 8;
-              return boardRoom.applicationManager.launchApplication(FcrWhiteboardApplication, {
-                width: width,
-                height: height,
-                defaultToolbarStyle: {
-                  tool: 'curve',
-                  strokeColor: '#FFC908',
-                  strokeWidth: 2
-                },
-                maxScaleRatio: 1
-              }, this._FORGE_WHITEBOARD_APP_ID);
-            case 8:
-              whiteboard = _context.sent;
-              this._boardInstance = whiteboard;
-              this.logger.info("whiteboard launch success");
-              this._boardView.classList.add('fcr-whiteboard-window-view');
-              this._boardView.appendChild(whiteboard.view);
-              if (this._boardDom) {
-                _context.next = 9;
-                break;
-              }
-              throw new Error('cannot mount board view, boardDom is not set');
-            case 9:
-              this._boardDom.appendChild(this._boardView);
-
-              // @ts-ignore
-              window._boardInstance = this._boardInstance;
-              this._initBoardStyle(whiteboard);
-
-              // 共享发起端 开启标注时，重置30s轮询updateWindowSize
-              this._handlePollingUpdateWindowSize('sender-board-room-init');
-              this._syncScreenShareOwnerOpenDone();
-              boardRoom.applicationManager.on('launch', this._launchHandler);
-              boardRoom.applicationManager.on('terminal', this._terminalHandler);
-              // workaround
-              setTimeout(function () {
-                _this2.logger.info('clear page');
-                whiteboard.clearPage();
-              });
-              this.joined = true;
-              _context.next = 11;
-              break;
-            case 10:
-              _context.prev = 10;
-              _t = _context["catch"](2);
-              this._boardInstance = null;
-              this._boardRoom = null;
-              this.joined = false;
-              this.logger.error("open failed, error: ".concat(_t));
-              throw _t;
-            case 11:
-              _context.prev = 11;
-              this._openLock = false;
-              this.logger.info("open method is finished");
-              return _context.finish(11);
-            case 12:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, this, [[2, 10, 11, 12]]);
-      }));
-      function open() {
-        return _open.apply(this, arguments);
-      }
-      return open;
-    }()
   }, {
     key: "handleBoardDomLoad",
     value: function handleBoardDomLoad(dom) {
       this._boardDom = dom;
     }
   }, {
-    key: "close",
-    value: function () {
-      var _close = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        var boardInstance, boardRoom;
-        return _regeneratorRuntime.wrap(function (_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              try {
-                if (this._openAbortController) {
-                  this._openAbortController.abort();
-                  this._openAbortController = null;
-                }
-                this._cancelCurrentUpdateWindowSizeTimber('send-fragment-close');
-                boardInstance = this._boardInstance;
-                boardRoom = this._boardRoom;
-                if (boardInstance) {
-                  try {
-                    this._boardView.removeChild(boardInstance.view);
-                  } catch (domError) {
-                    this.logger.warn('failed to remove board view', domError);
-                  }
-                  boardInstance.clearPage();
-                }
-                if (boardRoom) {
-                  boardRoom.applicationManager.removeListener('launch', this._launchHandler);
-                  boardRoom.applicationManager.removeListener('terminal', this._terminalHandler);
-                  boardRoom.leaveRoom();
-                  this.logger.info(// @ts-ignore
-                  "leaveRoom, ".concat(boardRoom['traceId']));
-                }
-                this._boardInstance = null;
-                this._boardRoom = null;
-                this.joined = false;
-                this.currentTool = 'curve';
-              } catch (e) {
-                this.logger.error('catch error', e);
-              } finally {
-                // TODO: window
-                // @ts-ignore
-                window.runtime.browserWindow.hide();
-                this.logger.info('close annotation window');
-              }
-            case 1:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2, this);
-      }));
-      function close() {
-        return _close.apply(this, arguments);
-      }
-      return close;
-    }()
-  }, {
-    key: "hide",
-    value: function hide() {
-      // TODO: window
-      // @ts-ignore
-      window.runtime.browserWindow.hide();
-      this.logger.info('hide annotation window');
-    }
-  }, {
-    key: "show",
-    value: function show() {
-      // TODO: window
-      this.logger.info('windows_index setAlwaysOnTop in annotation show');
-      // @ts-ignore
-      window.runtime.browserWindow.setAlwaysOnTop(true, 'pop-up-menu');
-
-      // TODO: window
-      // @ts-ignore
-      window.runtime.browserWindow.show();
-      this.logger.info('show annotation window');
+    key: "log",
+    value: function log(message) {
+      this.logger.info(message);
     }
   }, {
-    key: "focus",
-    value: function focus() {
-      this.logger.info('focus annotation window');
-
-      // TODO: window
-      // @ts-ignore
-      window.runtime.browserWindow.focus();
-    }
-  }, {
-    key: "setBounds",
-    value: function setBounds(bounds) {
-      this.bounds = bounds;
-      this.logger.info("bounds is changed =>, ".concat(JSON.stringify(bounds)));
-
-      // TODO: window
-      // @ts-ignore
-      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) {
-      if (!paramWidth || !paramHeight) {
-        return;
-      }
-      this._lastViewPortSet.width = paramWidth;
-      this._lastViewPortSet.height = paramHeight;
-      if (this._boardInstance) {
-        this.logger.info("updateViewport width:".concat(paramWidth, " height:").concat(paramHeight));
-        this._boardInstance.updateViewport(paramWidth, paramHeight);
-      } else {
-        this.logger.error('cannot updateViewport, _boardInstance is null');
-      }
-    }
-  }, {
-    key: "_updateBoardElBySize",
-    value: function _updateBoardElBySize(size) {
-      if (size) {
-        var _this$_boardInstance;
-        this.logger.info('update board element size', size);
-        this._boardView.style.width = "".concat(size.width, "px");
-        this._boardView.style.height = "".concat(size.height, "px");
-        var currentBoardInstanceView = (_this$_boardInstance = this._boardInstance) === null || _this$_boardInstance === void 0 ? void 0 : _this$_boardInstance.view;
-        if (currentBoardInstanceView) {
-          currentBoardInstanceView.style.width = "".concat(size.width, "px");
-          currentBoardInstanceView.style.height = "".concat(size.height, "px");
-        }
-        this._updateWindowSize(size.width, size.height);
+    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: "setIgnore",
-    value: function setIgnore(ignore) {
-      this.logger.info("setIgnore method is called, the ignore is => ".concat(ignore));
-
-      // TODO: window
+    key: "_handleConnectionStateUpdated",
+    value: function _handleConnectionStateUpdated(state) {
+      this.logger.info("[whitebaord-fragment]: connection state updated: ".concat(FcrConnectionState[state]));
       // @ts-ignore
-      window.runtime.browserWindow.setIgnoreMouseEvents(ignore);
-    }
-  }, {
-    key: "toolChanged",
-    value: function toolChanged(event) {
-      if (!this._boardInstance) return;
-      this.logger.info("toolChanged method is called, the event is => ".concat(JSON.stringify(event)));
-      var board = this._boardInstance;
-      var payload = event.payload;
-      switch (event.action) {
-        case ToolbarEvents.SET_TOOL:
-          this._handleSetTool(payload);
-          break;
-        case ToolbarEvents.SET_STROKE_COLOR:
-          board.strokeColor = payload;
-          break;
-        case ToolbarEvents.SET_STROKE_WIDTH:
-          this._boardInstance.strokeWidth = payload;
-          break;
-        case ToolbarEvents.CLEAN:
-          board.clearPage();
-          break;
-        case ToolbarEvents.REDO:
-          board.redo();
-          break;
-        case ToolbarEvents.UNDO:
-          board.undo();
-          break;
-        case ToolbarEvents.SET_PEN:
-          board.setInputType('pen');
-          break;
-        case ToolbarEvents.SET_SHAPE:
-          board.setCurrentTool(convertTool(payload));
-          break;
-        // case ToolbarEvents.CAPTURE_SCREEN:
-        //   window.runtime.captureScreen({ hideWindow: true });
-        //   break;
-      }
-    }
-  }, {
-    key: "setDrawing",
-    value: function setDrawing(drawing) {
-      this.logger.info("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("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");
-      whiteboard.view.style.width = "".concat(frameWidth, "px");
-      whiteboard.setCanvasBackgroundColor('rgba(0, 0, 0, 0)');
-      whiteboard.enableCameraByMouse = false;
-      whiteboard.enableCameraByTouch = false;
-      // whiteboard.cameraBoundaryColor = 'rgba(0, 0, 0, 0)';
-      whiteboard.enableCameraBoundaryHighlight = false;
-      whiteboard.strokeColor = '#FFC908';
-      whiteboard.setCurrentTool('curve');
-      this._updateWindowSize(frameWidth, frameHeight);
-      this.logger.info("mount success current tool, ".concat(whiteboard.getCurrentTool(), ", updateViewport width: ").concat(frameWidth, " height: ").concat(frameHeight));
-      whiteboard.on('undoStackLength', function (steps) {
-        // isWindows() && window.runtime.browserWindow.blur();
-        // renderer.sendEvent({
-        //   action: FcrUIRendererEventAction.SET_ANNOTATION_UNDO,
-        //   payload: steps > 0,
-        // });
-      });
-      whiteboard.on('redoStackLength', function (steps) {
-        // isWindows() && window.runtime.browserWindow.blur();
-        // renderer.sendEvent({
-        //   action: FcrUIRendererEventAction.SET_ANNOTATION_REDO,
-        //   payload: steps > 0,
-        // });
-      });
-    }
-  }, {
-    key: "_handleSetTool",
-    value: function _handleSetTool(payload) {
-      var _this3 = this;
-      var board = this._boardInstance;
-      this.currentTool = 'none';
-      var currentTool = convertTool(payload);
-      if (board) {
-        board.setCurrentTool(currentTool);
-        var timber = setTimeout(function () {
-          var _this3$_boardDom;
-          (_this3$_boardDom = _this3._boardDom) === null || _this3$_boardDom === void 0 || _this3$_boardDom.getBoundingClientRect();
-          _this3.currentTool = currentTool;
-          clearTimeout(timber);
-        }, 600);
+      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 _callee3(engine) {
-        var _this4 = this;
-        return _regeneratorRuntime.wrap(function (_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
+      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:
-              engine.addObserver({
+              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) {
-                  setAnnotationEngineState(state);
-                  // renderer.sendEvent({
-                  //   action: FcrUIRendererEventAction.FRAGMENT_ANNOTATION_ENGINE_STATE,
-                  //   payload: state,
-                  // });
                   if (state === FcrConnectionState.CONNECTED) {
-                    _this4._engine = engine;
-                    _this4.logger.info("engine connection state updated => CONNECTED, hasWaitingOpen ".concat(_this4._hasWaitingOpen));
-                    if (_this4._hasWaitingOpen) {
-                      _this4._hasWaitingOpen = false;
-                      _this4.open();
+                    _this2._engine = engine;
+
+                    // 只需要初始化一次, 网络断开重连时不需要重复初始化
+                    if (!_this2._annotationControl) {
+                      _this2._initAnnotationControl();
                     }
+                    _this2.logger.info("[annotation-fragment][initEngine]: engine connection state updated => CONNECTED}");
                   }
                   if (state === FcrConnectionState.DISCONNECTED) {
-                    _this4.logger.info("engine connection state updated => DISCONNECTED, the engine is ".concat(_this4._engine));
-                    _this4._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 === FcrConnectionState.CONNECTING) {
-                    _this4.logger.info("engine connection state updated => CONNECTING");
+                    _this2.logger.info("[annotation-fragment][initEngine]: engine connection state updated => CONNECTING");
                   }
                   if (state === FcrConnectionState.RECONNECTING) {
-                    _this4.logger.info("engine connection state updated => RECONNECTING");
+                    _this2.logger.info("[annotation-fragment][initEngine]: engine connection state updated => RECONNECTING");
                   }
                   if (state === FcrConnectionState.ABORTED) {
-                    _this4.logger.info("engine connection state updated => ABORTED, the engine is ".concat(_this4._engine));
-                    _this4._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.addObserver(this._engineObserver);
               engine.login();
-
-              // TODO: window
-              // @ts-ignore
-              window.runtime.browserWindow.hide();
-            case 1:
+            case 4:
             case "end":
-              return _context3.stop();
+              return _context2.stop();
           }
-        }, _callee3);
+        }, _callee2, this);
       }));
-      function _init(_x) {
+      function _init() {
         return _init2.apply(this, arguments);
       }
       return _init;
     }()
   }, {
-    key: "_initBoardRoom",
+    key: "_initAnnotationControl",
     value: function () {
-      var _initBoardRoom2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
-        var _this5 = this;
-        var _this$_config, userId, boardToken, region, appIdentifier, boardId, nickName, rtmClient, rtmProvider, wbRoom, currentTimeStamp, abortController;
-        return _regeneratorRuntime.wrap(function (_context7) {
-          while (1) switch (_context7.prev = _context7.next) {
+      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:
-              if (this._config) {
-                _context7.next = 1;
+              boardOptions = getBoardOptions(); // 字段校验
+              if (boardOptions) {
+                _context3.next = 1;
                 break;
               }
-              throw new Error('cannot init board room, config is not set');
+              this.logger.error("[annotation-fragment]: board options is not found");
+              return _context3.abrupt("return");
             case 1:
-              _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 = _this$_config.nickName;
-              this.logger.info("start init board room with config => ".concat(JSON.stringify(this._config), " - ").concat(nickName));
-              // @ts-ignore
-              rtmClient = this._engine._rteEngine._rtmClient._client;
-              rtmProvider = new FcrRTMProvider_2_2(rtmClient);
-              wbRoom = new FcrRoom(boardId, rtmProvider);
-              this._boardRoom = wbRoom;
-              currentTimeStamp = Date.now(); // @ts-ignore
-              this._boardRoom['traceId'] = "".concat(boardToken, "-").concat(boardId, "-").concat(userId, "-").concat(currentTimeStamp);
-              wbRoom.applicationManager.registerApplication(FcrWhiteboardApplication);
-              this.logger.info("bordRoom instance is created, start join room");
-              abortController = new AbortController();
-              this._openAbortController = abortController;
-              return _context7.abrupt("return", new Promise(/*#__PURE__*/function () {
-                var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee6(resolve, reject) {
-                  var retriesMax, _t2;
-                  return _regeneratorRuntime.wrap(function (_context6) {
-                    while (1) switch (_context6.prev = _context6.next) {
-                      case 0:
-                        // 监听中止信号
-                        abortController.signal.addEventListener('abort', function () {
-                          reject(new Error('join board room aborted'));
-                        });
-                        _context6.prev = 1;
-                        retriesMax = 10;
-                        _context6.next = 2;
-                        return retryAttempt(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-                          return _regeneratorRuntime.wrap(function (_context4) {
-                            while (1) switch (_context4.prev = _context4.next) {
-                              case 0:
-                                _context4.next = 1;
-                                return wbRoom.joinRoom({
-                                  userId: userId,
-                                  nickName: nickName,
-                                  roomToken: boardToken,
-                                  sdkConfig: {
-                                    // @ts-ignore
-                                    region: region,
-                                    appIdentifier: appIdentifier
-                                  }
-                                });
-                              case 1:
-                              case "end":
-                                return _context4.stop();
-                            }
-                          }, _callee4);
-                        })), [], {
-                          retriesMax: retriesMax
-                        }).fail(/*#__PURE__*/function () {
-                          var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(_ref4) {
-                            var error, timeFn, currentRetry;
-                            return _regeneratorRuntime.wrap(function (_context5) {
-                              while (1) switch (_context5.prev = _context5.next) {
-                                case 0:
-                                  error = _ref4.error, timeFn = _ref4.timeFn, currentRetry = _ref4.currentRetry;
-                                  if (!abortController.signal.aborted) {
-                                    _context5.next = 1;
-                                    break;
-                                  }
-                                  throw new Error('join board room aborted');
-                                case 1:
-                                  _this5.logger.info("retry to join board room, ".concat(error.message, ", retry ").concat(currentRetry, " times"));
-                                  _context5.next = 2;
-                                  return timeFn();
-                                case 2:
-                                  return _context5.abrupt("return", true);
-                                case 3:
-                                case "end":
-                                  return _context5.stop();
-                              }
-                            }, _callee5);
-                          }));
-                          return function (_x4) {
-                            return _ref5.apply(this, arguments);
-                          };
-                        }()).exec();
-                      case 2:
-                        if (!abortController.signal.aborted) {
-                          _context6.next = 3;
-                          break;
-                        }
-                        throw new Error('join board room aborted');
-                      case 3:
-                        _this5.logger.info(// @ts-ignore
-                        "join room success, traceId ".concat(_this5._boardRoom['traceId']));
-                        wbRoom.userManager.on('join', _this5._handleBoardRoomUserJoin);
-                        resolve(wbRoom);
-                        _context6.next = 5;
-                        break;
-                      case 4:
-                        _context6.prev = 4;
-                        _t2 = _context6["catch"](1);
-                        _this5.logger.error("join room failed");
-                        reject(_t2);
-                      case 5:
-                        _context6.prev = 5;
-                        _this5._openAbortController = null;
-                        return _context6.finish(5);
-                      case 6:
-                        return _context6.abrupt("return", wbRoom);
-                      case 7:
-                      case "end":
-                        return _context6.stop();
-                    }
-                  }, _callee6, null, [[1, 4, 5, 6]]);
-                }));
-                return function (_x2, _x3) {
-                  return _ref2.apply(this, arguments);
-                };
-              }()));
+              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 _context7.stop();
+              return _context3.stop();
           }
-        }, _callee7, this);
+        }, _callee3, this);
       }));
-      function _initBoardRoom() {
-        return _initBoardRoom2.apply(this, arguments);
+      function _initAnnotationControl() {
+        return _initAnnotationControl2.apply(this, arguments);
       }
-      return _initBoardRoom;
+      return _initAnnotationControl;
     }()
   }, {
-    key: "_createEngine",
-    value: function _createEngine(config) {
-      var userId = config.userId,
-        token = config.roomToken,
-        appId = config.appId;
-      this.logger.debug('before create engine');
-      try {
-        registerPlugin(new RtmPlugin());
-        registerPlugin(new ElectronRtcPlugin());
-        var engine = new FcrCoreEngine(_objectSpread({
-          appId: appId,
-          token: token,
-          userId: userId,
-          region: FcrRegion.CN
-        }, engineRestConfig));
-        this.logger.debug('after create engine');
-        return engine;
-      } catch (e) {
-        this.logger.error("create engine failed, error: ".concat(e));
-        throw e;
-      }
-    }
-  }, {
-    key: "_launchHandler",
-    value: function _launchHandler(appId, app) {
-      if (appId === this._FORGE_WHITEBOARD_APP_ID) {
-        this.logger.info("launch event is triggered => ".concat(app.selfUserId));
-        this._boardView.appendChild(app.view);
-        this._initBoardStyle(app);
+    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);
+        }
       }
-    }
-  }, {
-    key: "_terminalHandler",
-    value: function _terminalHandler(appId, app) {
-      if (appId === this._FORGE_WHITEBOARD_APP_ID) {
-        var _this$_boardView;
-        this.logger.info("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));
+      if (this._lastStrokeColor) {
+        this._boardInstance.setStrokeColor(tinycolor(this._lastStrokeColor).toRgb());
       }
-    }
-  }, {
-    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("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("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('syncScreenShareOwnerOpenDone');
-      // renderer.sendEvent({
-      //   action: FcrUIRendererEventAction.FRAGMENT_ANNOTATION_SYNC_OWNER_OPEN_DONE,
-      //   payload: null,
-      // });
-    }
-  }, {
-    key: "_checkForConnect",
-    value: function _checkForConnect() {
-      var boardOptions = getBoardOptions();
-      var readyToConnect = !!boardOptions;
-      var isEngineInitialized = this._isEngineInitialized;
-      this.logger.info("check for connect, readyToConnect: ".concat(readyToConnect, ", isEngineInitialized: ").concat(isEngineInitialized));
-      if (!isEngineInitialized && readyToConnect) {
-        this._checkForConnectTask.stop();
-        var rtmAppId = boardOptions.rtmAppId,
-          boardAppId = boardOptions.boardAppId,
-          boardId = boardOptions.boardId,
-          boardRegion = boardOptions.boardRegion,
-          boardToken = boardOptions.boardToken,
-          boardUserToken = boardOptions.boardUserToken,
-          userId = boardOptions.boardUserUuid,
-          nickName = boardOptions.nickName;
-        this._config = {
-          appId: rtmAppId,
-          userId: userId,
-          region: boardRegion,
-          appIdentifier: boardAppId,
-          boardId: boardId,
-          boardToken: boardToken,
-          nickName: nickName
-        };
-        this.logger.info("boardinfo => ".concat(jsonstring(this._config)));
-        var engine = this._createEngine({
-          userId: userId,
-          roomToken: boardUserToken,
-          appId: rtmAppId
-        });
-
-        // @ts-ignore
-        window._coreEngine = engine;
-        this.logger.info("login engine with the following config: annotationRtmAppId => ".concat(rtmAppId, ", boardOptions => ").concat(jsonstring(boardOptions)));
-        this._init(engine);
-        this._isEngineInitialized = true;
+      if (this._lastStrokeWidth !== undefined) {
+        this._boardInstance.setStrokeWidth(this._lastStrokeWidth);
       }
     }
   }]);
 }();
 _FragmentAnnotationStore = FragmentAnnotationStore;
-var _applyDecs$e = _slicedToArray(_applyDecs(_FragmentAnnotationStore, [[observable, 1, "joined"], [observable, 1, "bounds"], [observable, 1, "currentTool"], [observable, 1, "drawing"], [bound, 2, "open"], [_handleBoardDomLoadDecs, 18, "handleBoardDomLoad"], [_closeDecs, 18, "close"], [_hideDecs, 18, "hide"], [_showDecs, 18, "show"], [bound, 2, "focus"], [bound, 2, "updateWindowSize"], [bound, 2, "_updateWindowSizeWithCurrentBounds"], [bound, 2, "_updateWindowSize"], [bound, 2, "_updateBoardElBySize"], [bound, 2, "setIgnore"], [bound, 2, "toolChanged"], [bound, 2, "setDrawing"], [bound, 2, "_initBoardStyle"], [_handleSetToolDecs, 2, "_handleSetTool"], [bound, 2, "_init"], [bound, 2, "_initBoardRoom"], [bound, 2, "_launchHandler"], [bound, 2, "_terminalHandler"], [bound, 2, "_resizeToMax"], [bound, 2, "_cancelCurrentUpdateWindowSizeTimber"], [bound, 2, "_handlePollingUpdateWindowSize"], [bound, 2, "_handleBoardRoomUserJoin"], [bound, 2, "_syncScreenShareOwnerOpenDone"]], []).e, 5);
-_init_joined = _applyDecs$e[0];
-_init_bounds = _applyDecs$e[1];
-_init_currentTool = _applyDecs$e[2];
-_init_drawing = _applyDecs$e[3];
-_initProto = _applyDecs$e[4];
+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);