fcr-ui-scene 3.8.2 → 3.9.0-alpha

package/lib/modules/participant/store.browser.d.ts

@@ -1,8 +1,9 @@
 import { ParticipantStoreBase } from './store.base';
+import { FcrUIRoomType } from '../../type';
 export default class ParticipantStore extends ParticipantStoreBase {
     get isLocalCameraInSecondaryWindow(): boolean;
     openParticipantsWindow(): void;
-    protected _openChangeNameDialog(userId: string): void;
+    protected _openChangeNameDialog(userId: string, roomType: FcrUIRoomType): void;
     openChatWindow(): boolean;
     closeChatWindow(): void;
 }

package/lib/modules/participant/store.browser.js

@@ -92,9 +92,9 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function (_ParticipantS
     }
   }, {
     key: "_openChangeNameDialog",
-    value: function _openChangeNameDialog(userId) {
+    value: function _openChangeNameDialog(userId, roomType) {
       this._renamingUserId = userId;
-      var user = this.userMap.get(this._renamingUserId);
+      var user = this._getUserMapByRoomType(roomType).get(this._renamingUserId);
       if (!user) {
         this.logger.error('User not found', {
           userId: userId

package/lib/modules/participant/store.electron.d.ts

@@ -1,12 +1,13 @@
 import { ParticipantStoreBase } from './store.base';
 import { ParticipantStoreArgs } from './type';
+import { FcrUIRoomType } from '../../type';
 export default class ParticipantStore extends ParticipantStoreBase {
     private _multiDisplayProvider;
     private _windowProvider;
     constructor(args: ParticipantStoreArgs);
     get isLocalCameraInSecondaryWindow(): boolean;
     openParticipantsWindow(): void;
-    protected _openChangeNameDialog(userId: string): void;
+    protected _openChangeNameDialog(userId: string, roomType: FcrUIRoomType): void;
     openChatWindow(): boolean;
     closeChatWindow(): void;
 }

package/lib/modules/participant/store.electron.js

@@ -90,9 +90,9 @@ var ParticipantStore = exports["default"] = /*#__PURE__*/function (_ParticipantS
     }
   }, {
     key: "_openChangeNameDialog",
-    value: function _openChangeNameDialog(userId) {
+    value: function _openChangeNameDialog(userId, roomType) {
       this._renamingUserId = userId;
-      var user = this.userMap.get(this._renamingUserId);
+      var user = this._getUserMapByRoomType(roomType).get(this._renamingUserId);
       if (!user) {
         this.logger.error('User not found', {
           userId: userId

package/lib/modules/pc-audio-connect/waiting-scene/index.js

@@ -62,7 +62,12 @@ var PcAudioConnectionUIModule = exports.PcAudioConnectionUIModule = /*#__PURE__*
     value: function getComponent() {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store2.StoreContext.Provider, {
         value: this.store,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view["default"], {})
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            width: '400px'
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view["default"], {})
+        })
       });
     }
   }]);

package/lib/modules/phone-audio-connect/store.js

@@ -65,7 +65,7 @@ var _mobx = require("mobx");
 var _react = require("react");
 var _decorator = require("agora-foundation/lib/decorator");
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-var _tools = require("../../utilities/tools");
+var _tools = require("agora-foundation/lib/utilities/tools");
 var _constant = require("../../utilities/constant");
 var _enums = require("./enums");
 var _objectManager = require("../../object-manager");

package/lib/modules/phone-audio-connect/view.js

@@ -23,7 +23,7 @@ var _remeber = require("./components/remeber");
 var _react = require("react");
 var _store = require("./store");
 var _type = require("fcr-core/lib/room-control/room-connector-control/type");
-var _regex = require("../../utilities/regex");
+var _regex = require("agora-foundation/lib/utilities/regex");
 require("./index.css");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _type2 = require("../../type");

package/lib/modules/secondary-window/index.d.ts

@@ -1,9 +1,11 @@
 import { FcrUINodeEvent, UIModule } from '../../base';
 import { SecondaryWindowStore } from './store';
-import { FcrUIMainWindowRenderer, FcrUIMainWindowRendererObserver } from './type';
+import { AgoraObservable } from 'fcr-core/lib/imports';
+import { FcrUIMainWindowRenderer, FcrUIMainWindowRendererObserver, FcrUIBoardToolSelectedPayload } from './type';
 import { FcrUserInfo } from 'fcr-core/lib/type';
 import { ShareScreenUIModule } from '../share-screen';
 import { LeaveMeetingStoreBase } from '../components/leave-meeting/store.base';
+import { FcrUIManagedObject } from '../../object-manager';
 export declare class FcrUISecondaryWindowModule extends UIModule {
     private _store;
     private _leaveMeetingStore;
@@ -14,16 +16,21 @@ export declare class FcrUISecondaryWindowModule extends UIModule {
     onNodeReceivedEvent(event: FcrUINodeEvent): void;
     component(shareScreenModule: ShareScreenUIModule): import("react/jsx-runtime").JSX.Element;
 }
-export declare class FcrUIMainWindowRendererImpl implements FcrUIMainWindowRenderer {
-    private _observers;
+export declare class FcrUIMainWindowRendererImpl extends AgoraObservable<FcrUIMainWindowRendererObserver> implements FcrUIMainWindowRenderer, FcrUIManagedObject {
+    protected logger: import("fcr-core/lib/imports").Logger;
     private _ownerUser;
     private _backgroundColor;
     private _hasWriteBoardPermission;
+    private _toolPayload?;
+    private _strokeColor?;
+    private _strokeWidth?;
     get ownerUser(): FcrUserInfo | undefined;
     get backgroundColor(): string;
     get hasWriteBoardPermission(): boolean;
-    notifyObservers(event: keyof FcrUIMainWindowRendererObserver, args?: any): void;
-    addObserver(observer: FcrUIMainWindowRendererObserver): void;
-    removeObserver(observer: FcrUIMainWindowRendererObserver): void;
-    removeAllObservers(): void;
+    get toolPayload(): FcrUIBoardToolSelectedPayload | undefined;
+    get strokeColor(): string | undefined;
+    get strokeWidth(): number | undefined;
+    constructor();
+    notifyObservers(event: keyof FcrUIMainWindowRendererObserver, ...args: unknown[]): void;
+    release(): void;
 }

package/lib/modules/secondary-window/index.js

@@ -10,6 +10,7 @@ exports.FcrUISecondaryWindowModule = exports.FcrUIMainWindowRendererImpl = void
 require("core-js/modules/es.error.cause.js");
 require("core-js/modules/es.error.to-string.js");
 require("core-js/modules/es.array.concat.js");
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -24,7 +25,9 @@ var _store2 = require("../components/leave-meeting/store.base");
 var _store3 = _interopRequireDefault(require("../components/leave-meeting/main-scene/store"));
 var _env = require("agora-foundation/lib/utilities/env");
 var _type = require("../../type");
+var _logger = require("../../utilities/logger");
 var _jsxRuntime = require("react/jsx-runtime");
+function _superPropGet(t, o, e, r) { var p = (0, _get2["default"])((0, _getPrototypeOf2["default"])(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var FcrUISecondaryWindowModule = exports.FcrUISecondaryWindowModule = /*#__PURE__*/function (_UIModule) {
@@ -98,13 +101,20 @@ var FcrUISecondaryWindowModule = exports.FcrUISecondaryWindowModule = /*#__PURE_
     }
   }]);
 }(_base.UIModule);
-var FcrUIMainWindowRendererImpl = exports.FcrUIMainWindowRendererImpl = /*#__PURE__*/function () {
+var FcrUIMainWindowRendererImpl = exports.FcrUIMainWindowRendererImpl = /*#__PURE__*/function (_ref) {
   function FcrUIMainWindowRendererImpl() {
+    var _this2;
     (0, _classCallCheck2["default"])(this, FcrUIMainWindowRendererImpl);
-    (0, _defineProperty2["default"])(this, "_observers", new _imports.AgoraObservable());
-    (0, _defineProperty2["default"])(this, "_backgroundColor", '#ffffff');
-    (0, _defineProperty2["default"])(this, "_hasWriteBoardPermission", false);
+    _this2 = _callSuper(this, FcrUIMainWindowRendererImpl);
+    (0, _defineProperty2["default"])(_this2, "logger", (0, _logger.createLogger)({
+      prefix: 'FcrUIMainWindowRendererImpl'
+    }));
+    (0, _defineProperty2["default"])(_this2, "_backgroundColor", '#ffffff');
+    (0, _defineProperty2["default"])(_this2, "_hasWriteBoardPermission", false);
+    _this2.addObserver((0, _logger.generateLogObserver)(_this2.logger, ['onConnectionStateUpdated', 'onViewportSizeUpdated', 'onBackgroundColorUpdated', 'onDraftSaved', 'onPermissionUpdated', 'onRedoStateUpdated', 'onUndoStateUpdated', 'onWhiteboardStrokeColorChanged', 'onWhiteboardStrokeWidthChanged', 'onWhiteboardToolSelected']));
+    return _this2;
   }
+  (0, _inherits2["default"])(FcrUIMainWindowRendererImpl, _ref);
   return (0, _createClass2["default"])(FcrUIMainWindowRendererImpl, [{
     key: "ownerUser",
     get: function get() {
@@ -120,36 +130,52 @@ var FcrUIMainWindowRendererImpl = exports.FcrUIMainWindowRendererImpl = /*#__PUR
     get: function get() {
       return this._hasWriteBoardPermission;
     }
+  }, {
+    key: "toolPayload",
+    get: function get() {
+      return this._toolPayload;
+    }
+  }, {
+    key: "strokeColor",
+    get: function get() {
+      return this._strokeColor;
+    }
+  }, {
+    key: "strokeWidth",
+    get: function get() {
+      return this._strokeWidth;
+    }
   }, {
     key: "notifyObservers",
-    value: function notifyObservers(event, args) {
+    value: function notifyObservers(event) {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
       switch (event) {
-        case 'onSharingUserUpdated':
-          this._ownerUser = args;
-          break;
         case 'onBackgroundColorUpdated':
-          this._backgroundColor = args;
+          this._backgroundColor = args[0];
           break;
         case 'onPermissionUpdated':
-          this._hasWriteBoardPermission = args;
+          this._hasWriteBoardPermission = args[0];
+          break;
+        case 'onWhiteboardToolSelected':
+          this._toolPayload = args[0];
+          break;
+        case 'onWhiteboardStrokeColorChanged':
+          this._strokeColor = args[0];
+          break;
+        case 'onWhiteboardStrokeWidthChanged':
+          this._strokeWidth = args[0];
           break;
       }
-      this._observers.notifyObservers(event, args);
-    }
-  }, {
-    key: "addObserver",
-    value: function addObserver(observer) {
-      this._observers.addObserver(observer);
-    }
-  }, {
-    key: "removeObserver",
-    value: function removeObserver(observer) {
-      this._observers.removeObserver(observer);
+
+      // @ts-expect-error
+      _superPropGet(FcrUIMainWindowRendererImpl, "notifyObservers", this, 3)([event].concat(args));
     }
   }, {
-    key: "removeAllObservers",
-    value: function removeAllObservers() {
-      this._observers.removeAllObservers();
+    key: "release",
+    value: function release() {
+      this.removeAllObservers();
     }
   }]);
-}();
+}(_imports.AgoraObservable);

package/lib/modules/secondary-window/store.d.ts

@@ -10,7 +10,9 @@ export declare class SecondaryWindowStore {
     private _boardShareProvider;
     private _sharedScreenShareDataSource;
     private _dialogProvider;
+    private _privilegeProvider;
     private _windowProvider;
+    private _annotationProvider;
     private _renderer;
     private _videoRenderContext;
     private _disposers;
@@ -22,7 +24,7 @@ export declare class SecondaryWindowStore {
     private accessor _screenShareScalcValue;
     accessor isSharingWhiteboard: boolean;
     accessor interceptedClose: boolean;
-    get secondaryWindowContentType(): "speaker" | "gallery" | "hidden" | "local-camera" | "remote-camera" | "sharing-screen" | "sharing-screen-with-annotation" | "sharing-whiteboard";
+    get secondaryWindowContentType(): "speaker" | "gallery" | "local-camera" | "remote-camera" | "sharing-screen" | "sharing-screen-with-annotation" | "sharing-whiteboard" | "hidden";
     get videoWindowData(): VideoWindowDataReturn<typeof this.secondaryWindowContentType>;
     get isCurrentOriginal(): boolean;
     get isZoomMinimum(): boolean;
@@ -41,11 +43,11 @@ export declare class SecondaryWindowStore {
     get isMyBoard(): boolean;
     get isScreenShare(): boolean;
     get isBoardShare(): boolean;
-    get annotationHasStart(): boolean;
     get isShowToolbar(): boolean;
     get videoRenderContext(): FcrVideoTrackRenderer;
     get isActive(): boolean;
     get baseUrl(): string;
+    get isAnnotationOpened(): boolean;
     constructor({ objectManager }: SecondaryWindowStoreArgs);
     getContent(): void;
     handleIframeLoad(iframe: HTMLIFrameElement): void;

package/lib/modules/secondary-window/store.js

@@ -122,6 +122,8 @@ var SecondaryWindowStore = exports.SecondaryWindowStore = /*#__PURE__*/function
     this._dialogProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_DIALOG_PROVIDER);
     this._windowProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_WINDOW_PROVIDER);
     this._renderer = objectManager.getObject(_objectManager.FcrUIObjectKeys.RENDERER_WRAPPER);
+    this._annotationProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_ANNOTATION_PROVIDER);
+    this._privilegeProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_PRIVILEGE_PROVIDER);
     var localVideoRenderProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_LOCAL_VIDEO_RENDER_PROVIDER);
     var remoteVideoRenderProvider = objectManager.getObject(_objectManager.FcrUIObjectKeys.P_REMOTE_VIDEO_RENDER_PROVIDER);
     this._videoRenderContext = {
@@ -247,6 +249,12 @@ var SecondaryWindowStore = exports.SecondaryWindowStore = /*#__PURE__*/function
   }, {
     key: "canWriteBoard",
     get: function get() {
+      if (this.secondaryWindowContentType === _type.FcrUIDisplayDistributionContentType.SHARING_WHITEBOARD) {
+        return this._boardShareProvider.canWriteBoard;
+      }
+      if (this.secondaryWindowContentType === _type.FcrUIDisplayDistributionContentType.SHARING_SCREEN_WITH_ANNOTATION) {
+        return this._privilegeProvider.hasAnnotationWritePermission();
+      }
       return this._boardShareProvider.canWriteBoard;
     }
   }, {
@@ -291,12 +299,6 @@ var SecondaryWindowStore = exports.SecondaryWindowStore = /*#__PURE__*/function
       var _this$videoWindowData2;
       return ((_this$videoWindowData2 = this.videoWindowData) === null || _this$videoWindowData2 === void 0 ? void 0 : _this$videoWindowData2.type) === _type2.FcrUIWindowType.BOARD;
     }
-  }, {
-    key: "annotationHasStart",
-    get: function get() {
-      // return this._sharedAnnotationDataSource.annotationHasStart;
-      return false;
-    }
   }, {
     key: "isShowToolbar",
     get: function get() {
@@ -317,6 +319,11 @@ var SecondaryWindowStore = exports.SecondaryWindowStore = /*#__PURE__*/function
     get: function get() {
       return this._renderer.getBaseUrl();
     }
+  }, {
+    key: "isAnnotationOpened",
+    get: function get() {
+      return this._annotationProvider.isAnnotationOpened;
+    }
   }, {
     key: "getContent",
     value: function getContent() {}
@@ -393,7 +400,31 @@ var SecondaryWindowStore = exports.SecondaryWindowStore = /*#__PURE__*/function
   }, {
     key: "setWhiteboardTool",
     value: function setWhiteboardTool(tool) {
-      this._boardShareProvider.boardBarControl.setWhiteboardTool(tool);
+      if (tool.action === _type.WhiteboardToolAction.TOOL) {
+        this._boardShareProvider.boardBarControl.setWhiteboardTool({
+          tool: tool.tool
+        });
+      } else if (tool.action === _type.WhiteboardToolAction.SHAPE) {
+        this._boardShareProvider.boardBarControl.setWhiteboardTool({
+          shape: tool.tool
+        });
+      } else if (tool.action === _type.WhiteboardToolAction.WIDTH) {
+        this._boardShareProvider.boardBarControl.setWhiteboardStrokeWidth(tool.tool);
+      } else if (tool.action === _type.WhiteboardToolAction.COLOR) {
+        this._boardShareProvider.boardBarControl.setWhiteboardStrokeColor(tool.tool);
+      } else if (tool.action === _type.WhiteboardToolAction.CLEAR) {
+        this._boardShareProvider.boardBarControl.setWhiteboardTool({
+          action: _type.WhiteboardToolAction.CLEAR
+        });
+      } else if (tool.action === _type.WhiteboardToolAction.UNDO) {
+        this._boardShareProvider.boardBarControl.setWhiteboardTool({
+          action: _type.WhiteboardToolAction.UNDO
+        });
+      } else if (tool.action === _type.WhiteboardToolAction.REDO) {
+        this._boardShareProvider.boardBarControl.setWhiteboardTool({
+          action: _type.WhiteboardToolAction.REDO
+        });
+      }
     }
   }, {
     key: "saveWhiteboardDraft",
@@ -501,7 +532,7 @@ var SecondaryWindowStore = exports.SecondaryWindowStore = /*#__PURE__*/function
   }]);
 }();
 _SecondaryWindowStore = SecondaryWindowStore;
-var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_SecondaryWindowStore, [[_mobx.observable, 1, "_screenShareScalcValue"], [_mobx.observable, 1, "isSharingWhiteboard"], [_mobx.observable, 1, "interceptedClose"], [_mobx.computed, 3, "videoWindowData"], [_mobx.computed, 3, "isAspectRatioPreserved"], [_mobx.computed, 3, "scalValue"], [_decorator.bound, 2, "handleIframeLoad"], [_decorator.bound, 2, "zoomIn"], [_decorator.bound, 2, "zoomOut"], [_decorator.bound, 2, "fullContainer"], [_decorator.bound, 2, "setInterceptedClose"], [_decorator.bound, 2, "setScaleValue"], [_decorator.bound, 2, "setOriginScalc"], [_decorator.bound, 2, "setSpeakerViewSize"], [_decorator.bound, 2, "setWhiteboardTool"], [_decorator.bound, 2, "saveWhiteboardDraft"], [_decorator.bound, 2, "setProgress"], [_decorator.bound, 2, "setTheme"], [_decorator.bound, 2, "setControlEnable"], [_decorator.bound, 2, "setShowLoading"], [_decorator.bound, 2, "setCommonColors"], [_decorator.bound, 2, "log"]], []).e, 4);
+var _applyDecs$e = (0, _slicedToArray2["default"])(_applyDecs(_SecondaryWindowStore, [[_mobx.observable, 1, "_screenShareScalcValue"], [_mobx.observable, 1, "isSharingWhiteboard"], [_mobx.observable, 1, "interceptedClose"], [_mobx.computed, 3, "videoWindowData"], [_mobx.computed, 3, "isAspectRatioPreserved"], [_mobx.computed, 3, "scalValue"], [_mobx.computed, 3, "canWriteBoard"], [_decorator.bound, 2, "handleIframeLoad"], [_decorator.bound, 2, "zoomIn"], [_decorator.bound, 2, "zoomOut"], [_decorator.bound, 2, "fullContainer"], [_decorator.bound, 2, "setInterceptedClose"], [_decorator.bound, 2, "setScaleValue"], [_decorator.bound, 2, "setOriginScalc"], [_decorator.bound, 2, "setSpeakerViewSize"], [_decorator.bound, 2, "setWhiteboardTool"], [_decorator.bound, 2, "saveWhiteboardDraft"], [_decorator.bound, 2, "setProgress"], [_decorator.bound, 2, "setTheme"], [_decorator.bound, 2, "setControlEnable"], [_decorator.bound, 2, "setShowLoading"], [_decorator.bound, 2, "setCommonColors"], [_decorator.bound, 2, "log"]], []).e, 4);
 _init__screenShareScalcValue = _applyDecs$e[0];
 _init_isSharingWhiteboard = _applyDecs$e[1];
 _init_interceptedClose = _applyDecs$e[2];

package/lib/modules/secondary-window/type.d.ts

@@ -1,7 +1,7 @@
 import { FcrConnectionState, FcrUserInfo } from 'fcr-core/lib/type';
 import { FcrUIVideoWindowData, FcrUIVideoWindowLayoutType } from '../layout/type';
 import { FcrBoardShape, FcrBoardToolType } from 'fcr-core';
-import { FcrImageData } from 'fcr-core/lib/imports';
+import type { AgoraObservable, FcrImageData } from 'fcr-core/lib/imports';
 import { FcrUIObjectManager } from '../../object-manager';
 export declare enum FcrUIDisplayDistributionContentType {
     GALLERY = "gallery",
@@ -63,41 +63,32 @@ export type FcrUIMultiDisplayObserver = {
     /** 显示数量变更 */
     onDisplayCountUpdated?: (count: number) => void;
 };
+export type FcrUIBoardToolSelectedPayload = {
+    tool?: FcrBoardToolType;
+    action?: WhiteboardToolAction;
+    shape?: FcrBoardShape;
+};
 export type FcrUIMainWindowRendererObserver = {
+    onViewportSizeUpdated?: (size: FcrUI.FcrUIDimensions) => void;
     onBackgroundColorUpdated?: (color: string) => void;
-    onSharingUserUpdated?: (userInfo: FcrUserInfo) => void;
     onPermissionUpdated?: (hasWriteBoardPermission: boolean) => void;
-    onWhiteboardToolSelected?: (tool: {
-        action: WhiteboardToolAction;
-        tool: FcrBoardToolType | FcrBoardShape | string | number;
-    }) => void;
-    onUndoStepsUpdated?: (steps: boolean) => void;
-    onRedoStepsUpdated?: (steps: boolean) => void;
+    onWhiteboardToolSelected?: (payload: FcrUIBoardToolSelectedPayload) => void;
+    onWhiteboardStrokeWidthChanged?: (width: number) => void;
+    onWhiteboardStrokeColorChanged?: (color: string) => void;
     onConnectionStateUpdated?: (state: FcrConnectionState) => void;
+    onUndoStateUpdated?: (allowUndo: boolean) => void;
+    onRedoStateUpdated?: (allowRedo: boolean) => void;
     onSaveDraft?: () => void;
     onDraftSaved?: (image: FcrImageData) => void;
     onWhiteboardInActive?: () => void;
 };
-export interface FcrUIMainWindowRenderer {
+export interface FcrUIMainWindowRenderer extends AgoraObservable<FcrUIMainWindowRendererObserver> {
     get ownerUser(): FcrUserInfo | undefined;
     get backgroundColor(): string;
     get hasWriteBoardPermission(): boolean;
-    notifyObservers(event: 'onSharingUserUpdated', userInfo: FcrUserInfo): void;
-    notifyObservers(event: 'onBackgroundColorUpdated', color: string): void;
-    notifyObservers(event: 'onWhiteboardToolSelected', tool: {
-        action: WhiteboardToolAction;
-        tool: FcrBoardToolType | FcrBoardShape | string | number;
-    }): void;
-    notifyObservers(event: 'onConnectionStateUpdated', state: FcrConnectionState): void;
-    notifyObservers(event: 'onUndoStepsUpdated'): void;
-    notifyObservers(event: 'onRedoStepsUpdated'): void;
-    notifyObservers(event: 'onPermissionUpdated', hasWriteBoardPermission: boolean): void;
-    notifyObservers(event: 'onSaveDraft'): void;
-    notifyObservers(event: 'onWhiteboardInActive'): void;
-    notifyObservers(event: 'onDraftSaved', image: FcrImageData): void;
-    addObserver(observer: FcrUIMainWindowRendererObserver): void;
-    removeObserver(observer: FcrUIMainWindowRendererObserver): void;
-    removeAllObservers(): void;
+    get toolPayload(): FcrUIBoardToolSelectedPayload | undefined;
+    get strokeColor(): string | undefined;
+    get strokeWidth(): number | undefined;
 }
 export type VideoWindowDataReturn<T extends `${FcrUIDisplayDistributionContentType}`> = T extends `${FcrUIDisplayDistributionContentType.HIDDEN}` ? undefined : FcrUIVideoWindowData;
 export declare enum WhiteboardToolAction {

package/lib/modules/secondary-window/type.js

@@ -27,6 +27,7 @@ var WhiteboardToolAction = exports.WhiteboardToolAction = /*#__PURE__*/function
   WhiteboardToolAction["CLEAR"] = "clear";
   WhiteboardToolAction["UNDO"] = "undo";
   WhiteboardToolAction["REDO"] = "redo";
+  // to be deprecated
   WhiteboardToolAction["SHAPE"] = "shape";
   WhiteboardToolAction["COLOR"] = "color";
   WhiteboardToolAction["WIDTH"] = "width";

package/lib/modules/secondary-window/view.js

@@ -40,7 +40,6 @@ var SubWindowView = exports.SubWindowView = (0, _mobxReact.observer)(function (p
     showLoading = store.showLoading,
     isScreenShare = store.isScreenShare,
     isBoardShare = store.isBoardShare,
-    annotationHasStart = store.annotationHasStart,
     isZoomMinimum = store.isZoomMinimum,
     isZoomMaxmum = store.isZoomMaxmum,
     isCurrentOriginal = store.isCurrentOriginal,
@@ -64,7 +63,8 @@ var SubWindowView = exports.SubWindowView = (0, _mobxReact.observer)(function (p
     setSpeakerViewSize = store.setSpeakerViewSize,
     interceptedClose = store.interceptedClose,
     setInterceptedClose = store.setInterceptedClose,
-    videoRenderContext = store.videoRenderContext;
+    videoRenderContext = store.videoRenderContext,
+    isAnnotationOpened = store.isAnnotationOpened;
   var videoWindowContainer = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     if (!interceptedClose) return;
@@ -97,10 +97,17 @@ var SubWindowView = exports.SubWindowView = (0, _mobxReact.observer)(function (p
       setSpeakerViewSize(width, height);
     }
   }, [secondaryWindowContentType]);
+  (0, _react.useEffect)(function () {
+    if (canWriteBoard === false && toolbarState.controlEnable) {
+      setControlEnable(false);
+    }
+  }, [canWriteBoard]);
   if (!videoWindowData) {
     return null;
   }
   var content = null;
+  var showEnterBoardEdit = isAnnotationOpened ? !toolbarState.controlEnable : false;
+  var showExitBoardEdit = isAnnotationOpened ? toolbarState.controlEnable : false;
   if (isBoardShare) {
     content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [showLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_loading.Loading, {
@@ -123,7 +130,6 @@ var SubWindowView = exports.SubWindowView = (0, _mobxReact.observer)(function (p
         controlEnabled: toolbarState.controlEnable,
         isHost: isHost,
         currentTheme: currentTheme,
-        sharingType: 'whiteboard',
         ownerUserName: videoWindowData.userName,
         isMyBoard: isActive && store.isMyBoard,
         children: [!isShowToolbar && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -131,7 +137,7 @@ var SubWindowView = exports.SubWindowView = (0, _mobxReact.observer)(function (p
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
           ref: handleIframeLoad,
           allow: "webview",
-          src: "".concat(baseUrl, "/whiteboard.html?type=whiteboard"),
+          src: "".concat(baseUrl, "/whiteboard.html"),
           style: {
             width: '100vw',
             height: 'calc(100vh - 28px)'
@@ -140,12 +146,11 @@ var SubWindowView = exports.SubWindowView = (0, _mobxReact.observer)(function (p
       })]
     });
   } else {
-    content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_videoTrackRenderContext.FcrVideoTrackRenderContext.Provider, {
+    content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_videoTrackRenderContext.FcrVideoTrackRenderContext.Provider, {
         value: videoRenderContext,
-        children: [isScreenShare && /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlBar.WhiteboardControlbar, {
+        children: [isScreenShare && /*#__PURE__*/(0, _jsxRuntime.jsx)(_controlBar.ScreenShareControlbar, {
           ownerUserName: videoWindowData.userName,
-          sharingType: 'annotation',
           onZoomIn: function onZoomIn() {
             zoomIn();
             return isZoomMaxmum;
@@ -162,54 +167,50 @@ var SubWindowView = exports.SubWindowView = (0, _mobxReact.observer)(function (p
             setOriginScalc();
             return isCurrentOriginal;
           },
-          isSharingAudio: videoWindowData.hasLoopbackSharing && videoWindowData.hasMicrophoneAudioStream
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindow, {
-          onRemovePin: function onRemovePin() {},
-          canShowSpeakerSpotlight: true,
-          width: Infinity,
-          height: Infinity,
-          videoRenderMode: _type.FcrVideoRenderMode.FIT,
-          videoStreamType: _type.FcrVideoStreamType.HIGH_STREAM,
-          windowData: videoWindowData,
-          showAvatar: true,
-          isVideoSuspended: false,
-          enableZoom: true,
-          scalcValue: scalValue,
-          onScaleChange: setScaleValue
+          isSharingAudio: videoWindowData.hasLoopbackSharing && videoWindowData.hasMicrophoneAudioStream,
+          canWriteBoard: canWriteBoard,
+          isHost: isHost,
+          isMyBoard: isActive && store.isMyBoard,
+          onEnable: setControlEnable,
+          controlEnabled: toolbarState.controlEnable,
+          showEnterBoardEdit: showEnterBoardEdit,
+          showExitBoardEdit: showExitBoardEdit
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: {
+            height: isScreenShare ? 'calc(100% - 28px)' : '100%',
+            position: 'relative'
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_memberWindow.MemberWindow, {
+            onRemovePin: function onRemovePin() {},
+            canShowSpeakerSpotlight: true,
+            width: Infinity,
+            height: Infinity,
+            videoRenderMode: _type.FcrVideoRenderMode.FIT,
+            videoStreamType: _type.FcrVideoStreamType.HIGH_STREAM,
+            windowData: videoWindowData,
+            showAvatar: true,
+            isVideoSuspended: false,
+            enableZoom: true,
+            scalcValue: scalValue,
+            onScaleChange: setScaleValue
+          }), secondaryWindowContentType === _type2.FcrUIDisplayDistributionContentType.SHARING_SCREEN_WITH_ANNOTATION && isAnnotationOpened && /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
+            ref: handleIframeLoad,
+            allow: "webview",
+            src: "".concat(baseUrl, "/annotation.html"),
+            style: {
+              width: '100%',
+              height: '100%',
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              background: 'transparent',
+              zIndex: 10
+            }
+          }), !isShowToolbar && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "annotation-action-prevent"
+          })]
         })]
-      }), secondaryWindowContentType === _type2.FcrUIDisplayDistributionContentType.SHARING_SCREEN_WITH_ANNOTATION && annotationHasStart && /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
-        ref: handleIframeLoad,
-        allow: "webview",
-        src: "".concat(baseUrl, "/whiteboard.html?type=annotation"),
-        style: {
-          width: '100%',
-          height: '100%',
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          background: 'transparent',
-          zIndex: 10
-        }
-      }), !isShowToolbar && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "annotation-action-prevent"
-      }), isScreenShare && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: {
-          width: '100%',
-          position: 'absolute',
-          top: '-28px'
-        },
-        children: renderScreenShareControl({
-          isZoomMinimum: isZoomMinimum,
-          isZoomMaxmum: isZoomMaxmum,
-          isCurrentOriginal: isCurrentOriginal,
-          isAspectRatioPreserved: isAspectRatioPreserved,
-          setOriginScalc: setOriginScalc,
-          zoomIn: zoomIn,
-          zoomOut: zoomOut,
-          fullContainer: fullContainer,
-          isShowToolbarToggle: !showLoading && joinSuccess && canWriteBoard
-        })
-      })]
+      })
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -217,15 +218,15 @@ var SubWindowView = exports.SubWindowView = (0, _mobxReact.observer)(function (p
     className: "sub-window-view",
     style: {
       width: '100%',
-      height: isScreenShare ? 'calc(100% - 28px)' : '100%',
+      height: '100%',
       position: 'relative',
-      top: isScreenShare ? 28 : 0
+      top: 0
     },
     children: [interceptedClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.LeaveMeetingPortal, {
       setPopoverOpened: function setPopoverOpened() {
         return setInterceptedClose(false);
       }
-    }), content, (isBoardShare || annotationHasStart) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbar.WhiteboardToolbar, {
+    }), content, (isBoardShare || isAnnotationOpened) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_toolbar.WhiteboardToolbar, {
       offsetTop: 28,
       direction: "vertical",
       container: videoWindowContainer.current || undefined,