fcr-ui-scene 3.5.1 → 3.6.1

package/lib/modules/whiteboard/components/toolbar/components/expansion/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/modules/whiteboard/components/toolbar/components/expansion/index.js

@@ -0,0 +1,83 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpansionToolbarItem = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/** @internal */
+var ExpansionToolbarItem = exports.ExpansionToolbarItem = function ExpansionToolbarItem(_ref) {
+  var tooltip = _ref.tooltip,
+    tooltipPlacement = _ref.tooltipPlacement,
+    popoverContent = _ref.popoverContent,
+    popoverPlacement = _ref.popoverPlacement,
+    icon = _ref.icon,
+    onClick = _ref.onClick,
+    popoverOverlayClassName = _ref.popoverOverlayClassName,
+    isActive = _ref.isActive,
+    _ref$extensionMark = _ref.extensionMark,
+    extensionMark = _ref$extensionMark === void 0 ? true : _ref$extensionMark,
+    extensionMarkProps = _ref.extensionMarkProps,
+    _ref$popoverOffset = _ref.popoverOffset,
+    popoverOffset = _ref$popoverOffset === void 0 ? 6 : _ref$popoverOffset,
+    iconProps = _ref.iconProps;
+  var cls = (0, _classnames["default"])('fcr-board-toolbar-item-surrounding', {
+    'fcr-board-toolbar-item-surrounding--active': isActive
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.PopoverWithTooltip, {
+    toolTipProps: {
+      placement: tooltipPlacement,
+      content: tooltip
+    },
+    popoverProps: {
+      overlayOffset: popoverOffset,
+      placement: popoverPlacement,
+      content: popoverContent,
+      overlayClassName: popoverOverlayClassName,
+      visible: true,
+      overlayInnerStyle: {
+        boxShadow: 'none'
+      }
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: cls,
+      onClick: onClick,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, _objectSpread({
+        type: icon,
+        size: 28,
+        colors: {
+          iconPrimary: '#000',
+          iconSecondary: '#000'
+        }
+      }, iconProps)), extensionMark && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, _objectSpread({
+        type: _type.FcrIconType.FCR_WHITEBOARD_LOWERRIGHTARROW,
+        size: 4,
+        className: "fcr-board-toolbar-expansion-icon"
+      }, extensionMarkProps))]
+    })
+  });
+};

package/lib/modules/whiteboard/components/toolbar/components/extra-tool-picker.js

@@ -21,12 +21,12 @@ require("core-js/modules/es.regexp.to-string.js");
 require("core-js/modules/esnext.async-iterator.map.js");
 require("core-js/modules/esnext.iterator.map.js");
 var _mobxReact = require("mobx-react");
-var _ = require("..");
 var _hooks = require("../hooks");
 var _react = _interopRequireWildcard(require("react"));
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _store = require("../store");
+var _expansion = require("./expansion");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -35,7 +35,7 @@ var AdditionToolPickerItem = exports.AdditionToolPickerItem = (0, _mobxReact.obs
     toolbarDockPosition = _useContext.observables.toolbarDockPosition;
   var transI18n = (0, _i18n.useI18n)();
   var isActive = false;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ExpansionToolbarItem, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_expansion.ExpansionToolbarItem, {
     isActive: isActive,
     tooltip: transI18n('fmt_screenshare_whiteboard_button_additionaltools'),
     icon: _type.FcrIconType.FCR_SUBTRACT,

package/lib/modules/whiteboard/components/toolbar/components/history.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.UndoItem = exports.RedoItem = void 0;
 var _mobxReact = require("mobx-react");
-var _ = require("..");
 var _react = require("react");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _store = require("../store");
+var _item = require("./item");
 var _jsxRuntime = require("react/jsx-runtime");
 var UndoItem = exports.UndoItem = (0, _mobxReact.observer)(function () {
   var _useContext = (0, _react.useContext)(_store.ToolbarContext),
@@ -19,7 +19,7 @@ var UndoItem = exports.UndoItem = (0, _mobxReact.observer)(function () {
     toolbarDockPosition = _useContext$observabl.toolbarDockPosition,
     undo = _useContext.undo;
   var transI18n = (0, _i18n.useI18n)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ToolbarItem, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ToolbarItem, {
     tooltipPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
     tooltip: transI18n('fmt_screenshare_whiteboard_button_withdrwa'),
     icon: _type.FcrIconType.FCR_MOBILE_WHITEBOARD_UNDO,
@@ -35,7 +35,7 @@ var RedoItem = exports.RedoItem = (0, _mobxReact.observer)(function () {
     toolbarDockPosition = _useContext2$observab.toolbarDockPosition,
     redo = _useContext2.redo;
   var transI18n = (0, _i18n.useI18n)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ToolbarItem, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ToolbarItem, {
     tooltipPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
     tooltip: transI18n('fmt_screenshare_whiteboard_button_forward'),
     icon: _type.FcrIconType.FCR_MOBILE_WHITEBOARD_REDO,

package/lib/modules/whiteboard/components/toolbar/components/item/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/modules/whiteboard/components/toolbar/components/item/index.js

@@ -0,0 +1,42 @@
+"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.ToolbarItem = void 0;
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+/** @internal */
+var ToolbarItem = exports.ToolbarItem = function ToolbarItem(_ref) {
+  var tooltipPlacement = _ref.tooltipPlacement,
+    tooltip = _ref.tooltip,
+    icon = _ref.icon,
+    onClick = _ref.onClick,
+    className = _ref.className,
+    isActive = _ref.isActive,
+    isDisabled = _ref.isDisabled,
+    diraction = _ref.diraction;
+  var cls = (0, _classnames["default"])('fcr-board-toolbar-item-surrounding', className, {
+    'fcr-board-toolbar-item-surrounding--active': isActive,
+    'fcr-board-toolbar-item-surrounding--disabled': isDisabled
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    placement: tooltipPlacement,
+    content: tooltip,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: cls,
+      onClick: isDisabled ? undefined : onClick,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: icon,
+        size: diraction === 'horizontal' ? 32 : 28,
+        colors: {
+          iconPrimary: isActive ? 'var(--fcr_ui_scene_ramp_brand6)' : 'var(--fcr_ui_scene_black8)'
+        }
+      })
+    })
+  });
+};

package/lib/modules/whiteboard/components/toolbar/components/pen-picker.js

@@ -12,13 +12,13 @@ require("core-js/modules/esnext.iterator.map.js");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _mobxReact = require("mobx-react");
-var _ = require("..");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _type = require("../../../type");
 var _type2 = require("agora-ui-foundation/lib/components/icon/type");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _store = require("../store");
+var _expansion = require("./expansion");
 var _jsxRuntime = require("react/jsx-runtime");
 var penIconMap = (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _type.FcrBoardShape.Curve, _type2.FcrIconType.FCR_WHITEBOARD_PED3), _type.FcrBoardShape.Straight, _type2.FcrIconType.FCR_WHITEBOARD_PED2);
 var PenPickerItem = exports.PenPickerItem = (0, _mobxReact.observer)(function (_ref) {
@@ -39,7 +39,7 @@ var PenPickerItem = exports.PenPickerItem = (0, _mobxReact.observer)(function (_
   var isActive = currentShape === _type.FcrBoardShape.Curve;
   var icon = lastPen ? penIconMap[lastPen] : _type2.FcrIconType.FCR_WHITEBOARD_PED3;
   var clickShape = lastPen ? lastPen : _type.FcrBoardShape.Curve;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ExpansionToolbarItem, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_expansion.ExpansionToolbarItem, {
     isActive: isActive,
     tooltip: transI18n('fmt_screenshare_whiteboard_button_paintbrush'),
     icon: icon,

package/lib/modules/whiteboard/components/toolbar/components/screen-capture-picker.js

@@ -12,15 +12,15 @@ var _env = require("agora-foundation/lib/utilities/env");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _store = require("../store");
-var _ = require("..");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _expansion = require("./expansion");
 var _jsxRuntime = require("react/jsx-runtime");
 var ScreenCapturePickerItem = exports.ScreenCapturePickerItem = (0, _mobxReact.observer)(function (_ref) {
   var offset = _ref.offset;
   var _useContext = (0, _react.useContext)(_store.ToolbarContext),
     toolbarDockPosition = _useContext.observables.toolbarDockPosition;
   var transI18n = (0, _i18n.useI18n)();
-  return (0, _env.isElectron)() ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ExpansionToolbarItem, {
+  return (0, _env.isElectron)() ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_expansion.ExpansionToolbarItem, {
     isActive: false,
     tooltip: transI18n('fmt_screenshare_whiteboard_button_cutting'),
     tooltipPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',

package/lib/modules/whiteboard/components/toolbar/components/shape-picker.js

@@ -14,7 +14,6 @@ require("core-js/modules/esnext.iterator.map.js");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _mobxReact = require("mobx-react");
-var _ = require("..");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _type = require("../../../type");
 var _type2 = require("agora-ui-foundation/lib/components/icon/type");
@@ -22,6 +21,7 @@ var _i18n = require("agora-ui-foundation/lib/i18n");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _store = require("../store");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
+var _expansion = require("./expansion");
 var _jsxRuntime = require("react/jsx-runtime");
 var shapeIconMap = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _type.FcrBoardShape.Arrow, _type2.FcrIconType.FCR_WHITEBOARD_SHAP_ARROW), _type.FcrBoardShape.Ellipse, _type2.FcrIconType.FCR_WHITEBOARD_SHAP_CIRCLE), _type.FcrBoardShape.Pentagram, _type2.FcrIconType.FCR_WHITEBOARD_SHAP_STAR), _type.FcrBoardShape.Rectangle, _type2.FcrIconType.FCR_WHITEBOARD_SHAP_SQUARE), _type.FcrBoardShape.Rhombus, _type2.FcrIconType.FCR_WHITEBOARD_SHAP_REHUMBUS), _type.FcrBoardShape.Triangle, _type2.FcrIconType.FCR_WHITEBOARD_SHAP_TRIANGLE), _type.FcrBoardShape.Straight, _type2.FcrIconType.FCR_WHITEBOARD_SHAP_LINE);
 var ShapePickerItem = exports.ShapePickerItem = (0, _mobxReact.observer)(function (_ref) {
@@ -42,7 +42,7 @@ var ShapePickerItem = exports.ShapePickerItem = (0, _mobxReact.observer)(functio
   var isActive = !!currentShape && [_type.FcrBoardShape.Arrow, _type.FcrBoardShape.Ellipse, _type.FcrBoardShape.Pentagram, _type.FcrBoardShape.Rectangle, _type.FcrBoardShape.Rhombus, _type.FcrBoardShape.Triangle, _type.FcrBoardShape.Straight].includes(currentShape);
   var icon = lastShape ? shapeIconMap[lastShape] : _type2.FcrIconType.FCR_WHITEBOARD_SHAP_CIRCLE;
   var clickShape = lastShape ? lastShape : _type.FcrBoardShape.Ellipse;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ExpansionToolbarItem, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_expansion.ExpansionToolbarItem, {
     isActive: isActive,
     tooltip: transI18n('fmt_screenshare_whiteboard_button_shape'),
     icon: icon,
@@ -54,7 +54,7 @@ var ShapePickerItem = exports.ShapePickerItem = (0, _mobxReact.observer)(functio
     popoverOffset: offset,
     iconProps: {
       colors: {
-        iconPrimary: currentColor
+        iconPrimary: currentColor || '#000'
       }
     }
   });

package/lib/modules/whiteboard/components/toolbar/hooks/index.js

@@ -18,7 +18,6 @@ require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.map.js");
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("react");
-var _ = require("..");
 var _index = require("../components/color-picker/index");
 var _eraserPicker = require("../components/eraser-picker");
 var _history = require("../components/history");
@@ -35,6 +34,7 @@ var _store = require("../store");
 var _screenCapturePicker = require("../components/screen-capture-picker");
 var _env = require("agora-foundation/lib/utilities/env");
 var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
+var _item = require("../components/item");
 var _jsxRuntime = require("react/jsx-runtime");
 var useVisibleTools = exports.useVisibleTools = function useVisibleTools(diraction) {
   var _useContext = (0, _react.useContext)(_store.ToolbarContext),
@@ -52,7 +52,7 @@ var useVisibleTools = exports.useVisibleTools = function useVisibleTools(diracti
   };
   var baseMainTools = [{
     renderItem: function renderItem() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ToolbarItem, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ToolbarItem, {
         tooltipPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
         tooltip: transI18n('fmt_screenshare_whiteboard_button_laserpen'),
         icon: _type.FcrIconType.FCR_WHITEBOARD_LASERPEN2,
@@ -75,7 +75,7 @@ var useVisibleTools = exports.useVisibleTools = function useVisibleTools(diracti
   // },
   {
     renderItem: function renderItem() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ToolbarItem, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ToolbarItem, {
         tooltipPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
         tooltip: transI18n('fmt_screenshare_whiteboard_button_boxselection'),
         icon: _type.FcrIconType.FCR_WHITECHOOSE,
@@ -102,7 +102,7 @@ var useVisibleTools = exports.useVisibleTools = function useVisibleTools(diracti
     }
   }, {
     renderItem: function renderItem() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ToolbarItem, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ToolbarItem, {
         tooltipPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
         tooltip: transI18n('fmt_screenshare_whiteboard_button_text'),
         icon: _type.FcrIconType.FCR_WHITEBOARD_TEXT,
@@ -113,7 +113,7 @@ var useVisibleTools = exports.useVisibleTools = function useVisibleTools(diracti
     }
   }, {
     renderItem: function renderItem() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ToolbarItem, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ToolbarItem, {
         tooltipPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
         tooltip: transI18n('fmt_screenshare_whiteboard_button_dragdrop'),
         icon: _type.FcrIconType.FCR_WHITEBOARD_MOVESUBJECTS2,
@@ -153,7 +153,7 @@ var useVisibleTools = exports.useVisibleTools = function useVisibleTools(diracti
   };
   var fixedTools = [divider, colorTool, divider, {
     renderItem: function renderItem() {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ToolbarItem, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ToolbarItem, {
         tooltipPlacement: toolbarDockPosition.placement === 'left' ? 'right' : 'left',
         tooltip: transI18n('fmt_screenshare_whiteboard_button_savescript'),
         icon: _type.FcrIconType.FCR_DOWNLOAD,

package/lib/modules/whiteboard/components/toolbar/index.js

@@ -1,32 +1,11 @@
 "use strict";
 
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.array.filter.js");
-require("core-js/modules/es.array.for-each.js");
-require("core-js/modules/es.array.iterator.js");
-require("core-js/modules/es.array.push.js");
-require("core-js/modules/es.object.define-properties.js");
 require("core-js/modules/es.object.define-property.js");
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-require("core-js/modules/es.object.get-own-property-descriptors.js");
-require("core-js/modules/es.object.keys.js");
-require("core-js/modules/es.string.iterator.js");
-require("core-js/modules/es.weak-map.js");
-require("core-js/modules/esnext.async-iterator.filter.js");
-require("core-js/modules/esnext.async-iterator.for-each.js");
-require("core-js/modules/esnext.iterator.constructor.js");
-require("core-js/modules/esnext.iterator.filter.js");
-require("core-js/modules/esnext.iterator.for-each.js");
-require("core-js/modules/esnext.weak-map.delete-all.js");
-require("core-js/modules/esnext.weak-map.emplace.js");
-require("core-js/modules/web.dom-collections.for-each.js");
-require("core-js/modules/web.dom-collections.iterator.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ToolbarItem = exports.Toolbar = exports.ExpansionToolbarItem = void 0;
+exports.Toolbar = void 0;
 require("core-js/modules/es.error.to-string.js");
 require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.date.to-string.js");
@@ -34,28 +13,24 @@ require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.regexp.to-string.js");
 require("core-js/modules/esnext.async-iterator.map.js");
 require("core-js/modules/esnext.iterator.map.js");
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _mobxReact = require("mobx-react");
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _hooks = require("./hooks");
 var _moveHandle = require("./components/move-handle");
 var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
-var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
-var _popover = require("agora-ui-foundation/lib/components/popover");
 var _foldIcon = _interopRequireDefault(require("./components/icons/fold-icon"));
 require("./ style.css");
 var _i18n = require("agora-ui-foundation/lib/i18n");
+var _store = require("./store");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Toolbar = exports.Toolbar = (0, _mobxReact.observer)(function () {
   var _useVisibleTools = (0, _hooks.useVisibleTools)(),
     mainTools = _useVisibleTools.mainTools;
+  var _useContext = (0, _react.useContext)(_store.ToolbarContext),
+    repositionToolbar = _useContext.repositionToolbar;
   var transI18n = (0, _i18n.useI18n)();
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -64,6 +39,9 @@ var Toolbar = exports.Toolbar = (0, _mobxReact.observer)(function () {
   var handleFoldClick = function handleFoldClick() {
     setFolded(!folded);
   };
+  (0, _react.useEffect)(function () {
+    repositionToolbar();
+  }, []);
   var clsn = (0, _classnames["default"])({
     'fcr-board-toolbar--folded': folded,
     // prevent first animation play
@@ -99,86 +77,4 @@ var Toolbar = exports.Toolbar = (0, _mobxReact.observer)(function () {
       })
     })]
   });
-});
-/** @internal */
-var ToolbarItem = exports.ToolbarItem = function ToolbarItem(_ref2) {
-  var tooltipPlacement = _ref2.tooltipPlacement,
-    tooltip = _ref2.tooltip,
-    icon = _ref2.icon,
-    onClick = _ref2.onClick,
-    className = _ref2.className,
-    isActive = _ref2.isActive,
-    isDisabled = _ref2.isDisabled,
-    diraction = _ref2.diraction;
-  var cls = (0, _classnames["default"])('fcr-board-toolbar-item-surrounding', className, {
-    'fcr-board-toolbar-item-surrounding--active': isActive,
-    'fcr-board-toolbar-item-surrounding--disabled': isDisabled
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
-    placement: tooltipPlacement,
-    content: tooltip,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: cls,
-      onClick: isDisabled ? undefined : onClick,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
-        type: icon,
-        size: diraction === 'horizontal' ? 32 : 28,
-        colors: {
-          iconPrimary: isActive ? 'var(--fcr_ui_scene_ramp_brand6)' : 'var(--fcr_ui_scene_black8)'
-        }
-      })
-    })
-  });
-};
-/** @internal */
-var ExpansionToolbarItem = exports.ExpansionToolbarItem = function ExpansionToolbarItem(_ref3) {
-  var tooltip = _ref3.tooltip,
-    tooltipPlacement = _ref3.tooltipPlacement,
-    popoverContent = _ref3.popoverContent,
-    popoverPlacement = _ref3.popoverPlacement,
-    icon = _ref3.icon,
-    onClick = _ref3.onClick,
-    popoverOverlayClassName = _ref3.popoverOverlayClassName,
-    isActive = _ref3.isActive,
-    _ref3$extensionMark = _ref3.extensionMark,
-    extensionMark = _ref3$extensionMark === void 0 ? true : _ref3$extensionMark,
-    extensionMarkProps = _ref3.extensionMarkProps,
-    _ref3$popoverOffset = _ref3.popoverOffset,
-    popoverOffset = _ref3$popoverOffset === void 0 ? 6 : _ref3$popoverOffset,
-    iconProps = _ref3.iconProps;
-  var cls = (0, _classnames["default"])('fcr-board-toolbar-item-surrounding', {
-    'fcr-board-toolbar-item-surrounding--active': isActive
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.PopoverWithTooltip, {
-    toolTipProps: {
-      placement: tooltipPlacement,
-      content: tooltip
-    },
-    popoverProps: {
-      overlayOffset: popoverOffset,
-      placement: popoverPlacement,
-      content: popoverContent,
-      overlayClassName: popoverOverlayClassName,
-      visible: true,
-      overlayInnerStyle: {
-        boxShadow: 'none'
-      }
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: cls,
-      onClick: onClick,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, _objectSpread({
-        type: icon,
-        size: 28,
-        colors: {
-          iconPrimary: '#000',
-          iconSecondary: '#000'
-        }
-      }, iconProps)), extensionMark && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, _objectSpread({
-        type: _type.FcrIconType.FCR_WHITEBOARD_LOWERRIGHTARROW,
-        size: 4,
-        className: "fcr-board-toolbar-expansion-icon"
-      }, extensionMarkProps))]
-    })
-  });
-};
+});

package/lib/modules/whiteboard/components/toolbar/store.d.ts

@@ -1,6 +1,12 @@
 import { FcrBoardShape, WhiteboardThemeType } from '../../type';
 import { FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
+import { FcrBoardMainWindow, FcrWhiteboardControl } from 'fcr-core/lib/room-control/whiteboard-control/types';
+import { FcrBaseRoomControl } from 'fcr-core/lib/room-control/type';
 export declare class ToolbarStore {
+    private _whiteboardControl;
+    private _roomControl;
+    private _boardMainWindow;
+    private _boardObserver;
     accessor observables: {
         currentTool: FcrBoardToolType | undefined;
         currentShape: FcrBoardShape | undefined;
@@ -27,7 +33,11 @@ export declare class ToolbarStore {
         commonColorIndex: number;
         background: string;
         commonColors: string[];
+        progress: number;
     };
+    get roomInfo(): import("fcr-core/lib/type").FcrRoomInfo | undefined;
+    get boardMainWindow(): FcrBoardMainWindow;
+    constructor(_whiteboardControl: FcrWhiteboardControl, _roomControl: FcrBaseRoomControl);
     redo(): void;
     undo(): void;
     clean(): void;
@@ -47,5 +57,13 @@ export declare class ToolbarStore {
     saveDraft(): void;
     setTheme(theme: WhiteboardThemeType): void;
     setCommonColor(color: string): void;
+    repositionToolbar(): void;
+    release(): void;
+    private _updateDockPlacement;
+    private _updateDockPosition;
+    private _updateMaxVisibleTools;
+    private _setBackgroundColor;
+    private _getSnapshotImage;
+    private _convertShapeToBoardToolType;
 }
 export declare const ToolbarContext: import("react").Context<ToolbarStore>;