fcr-ui-scene 3.7.2 → 3.7.3

package/lib/modules/components/member-window/components/member-actions/store.js

@@ -96,7 +96,7 @@ var _C = /*#__PURE__*/new WeakMap();
 var _D = /*#__PURE__*/new WeakMap();
 _ref = (_setOnlyShowVideoStreamDecs = [_mobx.action, _mobx.action.bound], _setIsShowDropMenuDecs = [_mobx.action, _mobx.action.bound], _onVisibleChangeDecs = [_mobx.action, _mobx.action.bound], "isOnlyShowVideoStream");
 var MemberWindowActionsStore = exports.MemberWindowActionsStore = /*#__PURE__*/function () {
-  function MemberWindowActionsStore(_windowData, _sendParticipantEvent, _muteAudio, _handleRename, _onVisibleChanged, _interpreterUsers, _interpreterState) {
+  function MemberWindowActionsStore(_windowData, _sendParticipantEvent, _muteAudio, _handleRename, _deviceMicrophoneEnabled, _onVisibleChanged, _interpreterUsers, _interpreterState) {
     (0, _classCallCheck2["default"])(this, MemberWindowActionsStore);
     _classPrivateFieldInitSpec(this, _A, (_initProto(this), _init_isOnlyShowVideoStream(this, false)));
     _classPrivateFieldInitSpec(this, _B, _init_isShowDropMenu(this, false));
@@ -106,6 +106,7 @@ var MemberWindowActionsStore = exports.MemberWindowActionsStore = /*#__PURE__*/f
     this._sendParticipantEvent = _sendParticipantEvent;
     this._muteAudio = _muteAudio;
     this._handleRename = _handleRename;
+    this._deviceMicrophoneEnabled = _deviceMicrophoneEnabled;
     this._onVisibleChanged = _onVisibleChanged;
     this._interpreterUsers = _interpreterUsers;
     this._interpreterState = _interpreterState;
@@ -235,6 +236,9 @@ var MemberWindowActionsStore = exports.MemberWindowActionsStore = /*#__PURE__*/f
     key: "hasMicrophoneAudioStream",
     get: function get() {
       var _this$_windowData0;
+      if (this.isMySelf && this.connectorType === _fcrCore.FcrRoomConnectorType.NONE) {
+        return this._deviceMicrophoneEnabled;
+      }
       return (_this$_windowData0 = this._windowData) === null || _this$_windowData0 === void 0 ? void 0 : _this$_windowData0.hasMicrophoneAudioStream;
     }
   }, {

package/lib/modules/components/member-window/index.css

@@ -15,6 +15,10 @@
   z-index: 0;
 }
 
+.fcr-member-window-with-share-controlbar .fcr-member-window {
+  height: calc(100% - 28px);
+}
+
 .fcr-member-window button,
 .fcr-member-board button {
   border: none;

package/lib/modules/components/member-window/types.d.ts

@@ -2,6 +2,7 @@ import { AgoraRtcRenderMode, AgoraRtcVideoStreamType } from 'fcr-core/lib/import
 import { FcrUIVideoWindowData, FcrUserRole } from '../../../type';
 import { FcrVideoWindowPreviewType } from '../../video-window/type';
 import { FcrInterpreterUserInfo } from 'fcr-core/lib/room-control/interpreter-control/types';
+import { FcrPrivilegeUserRole } from 'fcr-core';
 export interface MemberWindowCustomProps {
     showAvatar: boolean;
     onDoubleClick?: () => void;
@@ -60,8 +61,6 @@ export interface MemberWindowActionsProps {
     allowedOperations: string[];
     setVideoOrientation: () => void;
     showActionBottomLabel: boolean;
-    isShowActionAudio: boolean;
-    actionAudioTag: string;
     onVisibleChanged?: (visible: boolean) => void;
     videoWindowCurrentWidth?: number;
     videoWindowCurrentHeight?: number;
@@ -73,6 +72,11 @@ export interface MemberWindowActionsProps {
     renderListLength?: number;
     id: string | undefined;
     volume: number;
+    isLocalCameraInSecondaryWindow?: boolean;
+    deviceMicrophoneEnabled: boolean;
+    hasMutePermission: (targetRole: FcrUserRole | FcrPrivilegeUserRole) => boolean;
+    hasUnmutePermission: (targetRole: FcrUserRole | FcrPrivilegeUserRole) => boolean;
+    hasRequestStartAudioPermission: (targetRole: FcrUserRole | FcrPrivilegeUserRole) => boolean;
 }
 export type MemberWindowSlots = {
     topLeft?: React.ReactNode;

package/lib/modules/components/toolbar/components/capture-tool/index.d.ts

@@ -0,0 +1,9 @@
+import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
+export declare const AnnotationCaptureTool: (props: {
+    popoverVisible?: boolean;
+    placement: ToolTipProps["placement"];
+    size?: number;
+    hideTitle?: boolean;
+    direction?: "horizontal" | "vertical";
+    setPopoverVisible?: (visible: boolean) => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/toolbar/components/capture-tool/index.js

@@ -0,0 +1,68 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnnotationCaptureTool = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _item = require("../item");
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _panel = require("../panel");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationCaptureTool = exports.AnnotationCaptureTool = function AnnotationCaptureTool(props) {
+  var t = (0, _i18n.useI18n)();
+  var size = props.size,
+    hideTitle = props.hideTitle,
+    popoverVisible = props.popoverVisible,
+    placement = props.placement,
+    direction = props.direction,
+    setPopoverVisible = props.setPopoverVisible;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    setVisible(visible);
+    setPopoverVisible === null || setPopoverVisible === void 0 || setPopoverVisible(visible);
+  };
+  var handleScreenshotClick = function handleScreenshotClick(hideWindow) {
+    return function () {
+      (window.parent.runtime || window.runtime).captureScreen({
+        hideWindow: hideWindow
+      });
+      handleVisibleChange(false);
+    };
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+    placement: placement,
+    size: size,
+    hideTitle: hideTitle,
+    iconType: _type.FcrIconType.FCR_WHITEBOARD_SLICE,
+    title: t('fmt_screenshare_whiteboard_button_cutting'),
+    lineColor: "transparent",
+    visible: visible && popoverVisible,
+    onVisibleChange: handleVisibleChange,
+    showArrow: true,
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.AnnotationToolPanel, {
+      direction: direction,
+      size: "small",
+      header: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+        size: size,
+        onClick: handleScreenshotClick(false),
+        iconType: _type.FcrIconType.FCR_WHITEBOARD_SLICE,
+        title: t('fmt_screenshare_whiteboard_button_screenshot'),
+        hideTitle: true
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+        size: size,
+        onClick: handleScreenshotClick(true),
+        iconType: _type.FcrIconType.FCR_WIHITEBOARD_SLICEWITHOUTCLASSROOM,
+        title: t('fmt_screenshare_whiteboard_options_hideshot'),
+        hideTitle: true
+      })]
+    })
+  });
+};

package/lib/modules/components/toolbar/components/clean-tool/index.d.ts

@@ -0,0 +1,11 @@
+import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
+import { FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
+export declare const AnnotationCleanTool: (props: {
+    currentTool: FcrBoardToolType;
+    placement: ToolTipProps["placement"];
+    size?: number;
+    hideTitle?: boolean;
+    direction?: "horizontal" | "vertical";
+    setTool: (tool: FcrBoardToolType) => void;
+    clean: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/toolbar/components/clean-tool/index.js

@@ -0,0 +1,71 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnnotationCleanTool = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _item = require("../item");
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _panel = require("../panel");
+var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationCleanTool = exports.AnnotationCleanTool = function AnnotationCleanTool(props) {
+  var t = (0, _i18n.useI18n)();
+  var size = props.size,
+    hideTitle = props.hideTitle,
+    currentTool = props.currentTool,
+    placement = props.placement,
+    direction = props.direction,
+    setTool = props.setTool,
+    clean = props.clean;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    setVisible(visible);
+  };
+  var handleEraserClick = function handleEraserClick() {
+    setTool(_enums.FcrBoardToolType.ERASER);
+    handleVisibleChange(false);
+  };
+  var handleEmptyClick = function handleEmptyClick() {
+    clean();
+    handleVisibleChange(false);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+    placement: placement,
+    size: size,
+    hideTitle: hideTitle,
+    active: currentTool === _enums.FcrBoardToolType.ERASER,
+    iconType: _type.FcrIconType.FCR_WHITEBOARD_ERASER,
+    title: t('fmt_screenshare_whiteboard_button_eraser'),
+    lineColor: "transparent",
+    visible: visible,
+    onVisibleChange: handleVisibleChange,
+    showArrow: true,
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.AnnotationToolPanel, {
+      direction: direction,
+      size: "small",
+      header: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+        size: size,
+        active: currentTool === _enums.FcrBoardToolType.ERASER,
+        onClick: handleEraserClick,
+        iconType: _type.FcrIconType.FCR_WHITEBOARD_ERASER,
+        title: t('fmt_screenshare_whiteboard_button_eraser'),
+        hideTitle: true
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+        size: size,
+        onClick: handleEmptyClick,
+        iconType: _type.FcrIconType.FCR_WHITEBOARD_ELIMINATE,
+        title: t('fmt_screenshare_whiteboard_button_empty'),
+        hideTitle: true
+      })]
+    })
+  });
+};

package/lib/modules/components/toolbar/components/color-tool/color-panel/index.d.ts

@@ -0,0 +1,11 @@
+export declare const AnnotationColorPanel: (props: {
+    size?: number;
+    hideTitle?: boolean;
+    colors: string[];
+    currentColor: string;
+    onClick: (color: string) => void;
+    direction?: "horizontal" | "vertical";
+    commonColors?: string[];
+    contextMenu?: React.ReactNode;
+    onContextMenuClick?: (color: string) => void;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/toolbar/components/color-tool/color-panel/index.js

@@ -0,0 +1,77 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnnotationColorPanel = void 0;
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _item = require("../../item");
+var _panel = require("../../panel");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationColorPanel = exports.AnnotationColorPanel = function AnnotationColorPanel(props) {
+  var size = props.size,
+    hideTitle = props.hideTitle,
+    colors = props.colors,
+    currentColor = props.currentColor,
+    onClick = props.onClick,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
+    commonColors = props.commonColors,
+    contextMenu = props.contextMenu,
+    onContextMenuClick = props.onContextMenuClick;
+  var transI18n = (0, _i18n.useI18n)();
+  return !contextMenu ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.AnnotationToolPanel, {
+    type: "color",
+    direction: direction,
+    header: colors.map(function (color, index) {
+      return index < colors.length / 2 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+        size: size,
+        active: currentColor === color,
+        iconType: _type.FcrIconType.FCR_COLOR,
+        color: color,
+        lineColor: currentColor === color ? color : 'transparent',
+        onClick: onClick,
+        selected: currentColor === color,
+        hideTitle: hideTitle
+      }, color);
+    }),
+    footer: colors.map(function (color, index) {
+      return index >= colors.length / 2 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+        size: size,
+        active: currentColor === color,
+        iconType: _type.FcrIconType.FCR_COLOR,
+        color: color,
+        lineColor: currentColor === color ? color : 'transparent',
+        onClick: onClick,
+        selected: currentColor === color,
+        hideTitle: hideTitle
+      }, color);
+    })
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.AnnotationToolPanel, {
+    size: "small",
+    footer: transI18n('fmt_screenshare_whiteboard_tips_righclick'),
+    direction: direction,
+    content: colors.map(function (color) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+        size: size,
+        active: currentColor === color,
+        iconType: _type.FcrIconType.FCR_COLOR,
+        color: color,
+        lineColor: currentColor === color ? color : 'transparent',
+        onClick: onClick,
+        selected: commonColors ? commonColors === null || commonColors === void 0 ? void 0 : commonColors.includes(color) : currentColor === color,
+        hideTitle: hideTitle,
+        contextMenu: contextMenu,
+        onContextMenuClick: onContextMenuClick
+      }, color);
+    })
+  });
+};

package/lib/modules/components/toolbar/components/color-tool/index.d.ts

@@ -0,0 +1,14 @@
+import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
+export declare const AnnotationColorTool: (props: {
+    colors: string[];
+    currentColor: string;
+    placement: ToolTipProps["placement"];
+    size?: number;
+    hideTitle?: boolean;
+    direction?: "horizontal" | "vertical";
+    commonColors?: string[];
+    setStrokeColor: (color: string) => void;
+    contextMenu?: React.ReactNode;
+    onContextMenuClick?: (color: string) => void;
+    selected?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/toolbar/components/color-tool/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnnotationColorTool = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _item = require("../item");
+var _colorPanel = require("./color-panel");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationColorTool = exports.AnnotationColorTool = (0, _mobxReact.observer)(function (props) {
+  var size = props.size,
+    hideTitle = props.hideTitle,
+    colors = props.colors,
+    currentColor = props.currentColor,
+    placement = props.placement,
+    direction = props.direction,
+    commonColors = props.commonColors,
+    setStrokeColor = props.setStrokeColor,
+    contextMenu = props.contextMenu,
+    onContextMenuClick = props.onContextMenuClick,
+    selected = props.selected;
+  var t = (0, _i18n.useI18n)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var handleClick = function handleClick(color) {
+    setStrokeColor(color);
+    setVisible(!visible);
+  };
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    setVisible(visible);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+    placement: placement,
+    size: size,
+    hideTitle: hideTitle,
+    iconType: _type.FcrIconType.FCR_COLOR,
+    color: currentColor,
+    title: t('fmt_whiteboard_labels_colour'),
+    lineColor: "transparent",
+    visible: visible,
+    onVisibleChange: handleVisibleChange,
+    showArrow: true,
+    selected: selected,
+    commonColors: commonColors,
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorPanel.AnnotationColorPanel, {
+      size: size,
+      contextMenu: contextMenu,
+      direction: direction,
+      hideTitle: hideTitle,
+      onClick: handleClick,
+      colors: colors,
+      currentColor: currentColor,
+      commonColors: commonColors,
+      onContextMenuClick: onContextMenuClick
+    })
+  });
+});

package/lib/modules/components/toolbar/components/graphic-tool/graphic-panel/index.d.ts

@@ -0,0 +1,11 @@
+import { FcrBoardShape, FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
+export declare const AnnotationGraphicPanel: (props: {
+    size?: number;
+    hideTitle?: boolean;
+    currentShape: FcrBoardShape;
+    setShape: (shape: FcrBoardShape) => void;
+    setTool: (tool: FcrBoardToolType) => void;
+    setStrokeWidth: (width: number) => void;
+    currentStrokeWidth: number;
+    direction?: "horizontal" | "vertical";
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/toolbar/components/graphic-tool/graphic-panel/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnnotationGraphicPanel = void 0;
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _item = require("../../item");
+var _panel = require("../../panel");
+var _libs = require("./libs");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationGraphicPanel = exports.AnnotationGraphicPanel = function AnnotationGraphicPanel(props) {
+  var size = props.size,
+    hideTitle = props.hideTitle,
+    currentShape = props.currentShape,
+    setShape = props.setShape,
+    setTool = props.setTool,
+    setStrokeWidth = props.setStrokeWidth,
+    currentStrokeWidth = props.currentStrokeWidth,
+    direction = props.direction;
+  var handleShapeClick = function handleShapeClick(shape) {
+    return function () {
+      // onClick();
+      setShape(shape);
+      setTool((0, _libs.convertShapeToBoardToolType)(shape));
+    };
+  };
+  var handleLineWidthClick = function handleLineWidthClick(lineWidth) {
+    return function () {
+      // onClick();
+      setStrokeWidth(lineWidth);
+    };
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.AnnotationToolPanel, {
+    direction: direction,
+    size: "small",
+    header: _libs.tools.map(function (tool) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+        size: size,
+        onClick: handleShapeClick(tool.shape),
+        active: currentShape === tool.shape,
+        iconType: tool.iconType,
+        title: tool.tip,
+        hideTitle: hideTitle
+      }, tool.shape);
+    }),
+    footer: _libs.lineWidths.map(function (_ref, index) {
+      var iconType = _ref.iconType,
+        width = _ref.width;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+        size: size,
+        hideTitle: hideTitle,
+        onClick: handleLineWidthClick(width),
+        active: currentStrokeWidth === width,
+        iconType: iconType,
+        level: index + 1
+      }, width);
+    })
+  });
+};

package/lib/modules/components/toolbar/components/graphic-tool/graphic-panel/libs.d.ts

@@ -0,0 +1,12 @@
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrBoardShape, FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
+export declare const tools: {
+    iconType: FcrIconType;
+    shape: FcrBoardShape;
+    tip: string;
+}[];
+export declare const lineWidths: {
+    iconType: FcrIconType;
+    width: number;
+}[];
+export declare function convertShapeToBoardToolType(shape: FcrBoardShape): FcrBoardToolType;

package/lib/modules/components/toolbar/components/graphic-tool/graphic-panel/libs.js

@@ -0,0 +1,65 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.convertShapeToBoardToolType = convertShapeToBoardToolType;
+exports.tools = exports.lineWidths = void 0;
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var tools = exports.tools = [{
+  iconType: _type.FcrIconType.FCR_WHITEBOARD_SHAP_SQUARE,
+  shape: _enums.FcrBoardShape.Rectangle,
+  tip: (0, _i18n.transI18n)('fmt_whiteboard_tips_rectangle')
+}, {
+  iconType: _type.FcrIconType.FCR_WHITEBOARD_SHAP_CIRCLE,
+  shape: _enums.FcrBoardShape.Ellipse,
+  tip: (0, _i18n.transI18n)('fmt_whiteboard_tips_circle')
+}, {
+  iconType: _type.FcrIconType.FCR_WHITEBOARD_SHAP_TRIANGLE,
+  shape: _enums.FcrBoardShape.Triangle,
+  tip: (0, _i18n.transI18n)('fmt_whiteboard_tips_triangle')
+}, {
+  iconType: _type.FcrIconType.FCR_WHITEBOARD_SHAP_LINE,
+  shape: _enums.FcrBoardShape.Straight,
+  tip: (0, _i18n.transI18n)('fmt_whiteboard_tips_straight')
+}, {
+  iconType: _type.FcrIconType.FCR_WHITEBOARD_SHAP_ARROW,
+  shape: _enums.FcrBoardShape.Arrow,
+  tip: (0, _i18n.transI18n)('fmt_whiteboard_tips_arrow')
+}];
+var lineWidths = exports.lineWidths = [{
+  iconType: _type.FcrIconType.FCR_PENSIZE,
+  width: 2
+}, {
+  iconType: _type.FcrIconType.FCR_PENSIZE,
+  width: 4
+}, {
+  iconType: _type.FcrIconType.FCR_PENSIZE,
+  width: 5
+}, {
+  iconType: _type.FcrIconType.FCR_PENSIZE,
+  width: 6
+}];
+function convertShapeToBoardToolType(shape) {
+  switch (shape) {
+    case _enums.FcrBoardShape.Arrow:
+      return _enums.FcrBoardToolType.ARROW;
+    case _enums.FcrBoardShape.Curve:
+      return _enums.FcrBoardToolType.CURVE;
+    case _enums.FcrBoardShape.Ellipse:
+      return _enums.FcrBoardToolType.ELLIPSE;
+    case _enums.FcrBoardShape.Pentagram:
+      return _enums.FcrBoardToolType.PENTAGRAM;
+    case _enums.FcrBoardShape.Rectangle:
+      return _enums.FcrBoardToolType.RECTANGLE;
+    case _enums.FcrBoardShape.Straight:
+      return _enums.FcrBoardToolType.STRAIGHT;
+    case _enums.FcrBoardShape.Triangle:
+      return _enums.FcrBoardToolType.TRIANGLE;
+    default:
+      return _enums.FcrBoardToolType.NONE;
+  }
+}

package/lib/modules/components/toolbar/components/graphic-tool/index.d.ts

@@ -0,0 +1,15 @@
+import { FcrBoardShape, FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
+import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
+export declare const AnnotationGraphicTool: (props: {
+    size?: number;
+    currentColor: string;
+    currentTool: FcrBoardToolType;
+    currentShape: FcrBoardShape;
+    setShape: (shape: FcrBoardShape) => void;
+    setStrokeWidth: (width: number) => void;
+    currentStrokeWidth: number;
+    setTool: (tool: FcrBoardToolType) => void;
+    hideTitle?: boolean;
+    placement: ToolTipProps["placement"];
+    direction?: "horizontal" | "vertical";
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/toolbar/components/graphic-tool/index.js

@@ -0,0 +1,82 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnnotationGraphicTool = void 0;
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.array.some.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.find.js");
+require("core-js/modules/esnext.iterator.some.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _item = require("../item");
+var _graphicPanel = require("./graphic-panel");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _libs = require("./graphic-panel/libs");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationGraphicTool = exports.AnnotationGraphicTool = (0, _mobxReact.observer)(function (props) {
+  var size = props.size,
+    currentTool = props.currentTool,
+    currentColor = props.currentColor,
+    currentShape = props.currentShape,
+    setShape = props.setShape,
+    setStrokeWidth = props.setStrokeWidth,
+    currentStrokeWidth = props.currentStrokeWidth,
+    setTool = props.setTool,
+    hideTitle = props.hideTitle,
+    placement = props.placement,
+    direction = props.direction;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var t = (0, _i18n.useI18n)();
+  var handleClick = function handleClick() {
+    setVisible(!visible);
+    setTool((0, _libs.convertShapeToBoardToolType)(currentShape));
+  };
+  var handleShapeClick = function handleShapeClick(shape) {
+    setShape(shape);
+    setVisible(!visible);
+  };
+  var handleStrokeWidthClick = function handleStrokeWidthClick(width) {
+    setStrokeWidth(width);
+    setVisible(!visible);
+  };
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    setVisible(visible);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+    size: size,
+    placement: placement,
+    hideTitle: hideTitle,
+    active: _libs.tools.some(function (tool) {
+      return (0, _libs.convertShapeToBoardToolType)(tool.shape) === currentTool;
+    }),
+    iconType: _libs.tools.find(function (tool) {
+      return tool.shape === currentShape;
+    }).iconType,
+    title: t('fmt_screenshare_whiteboard_button_shape'),
+    color: currentColor,
+    visible: visible,
+    onVisibleChange: handleVisibleChange,
+    onClick: handleClick,
+    showArrow: true,
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_graphicPanel.AnnotationGraphicPanel, {
+      hideTitle: hideTitle,
+      size: size,
+      currentShape: currentShape,
+      setShape: handleShapeClick,
+      setTool: setTool,
+      setStrokeWidth: handleStrokeWidthClick,
+      currentStrokeWidth: currentStrokeWidth,
+      direction: direction
+    })
+  });
+});

package/lib/modules/components/toolbar/components/group-tool/index.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+export declare const AnnotationGroupTool: (props: PropsWithChildren<{
+    size: number;
+    placement: "left" | "right";
+}>) => import("react/jsx-runtime").JSX.Element;