fcr-ui-scene 3.8.1 → 3.8.2

package/lib-es/modules/components/toolbar/components/item/style.css

@@ -0,0 +1,94 @@
+.annotation-toolbar-item {
+  min-width: 32px;
+  max-width: 64px;
+  min-height: 32px;
+  max-height: 52px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--fcr_ui_scene_icontext1);
+  cursor: pointer;
+  position: relative;
+}
+
+.annotation-toolbar-item .fcr-popover .fcr-tooltip-inner {
+  overflow: inherit !important;
+}
+
+.annotation-toolbar-item-icon {
+  max-width: 44px;
+  min-width: 32px;
+  height: 32px;
+  border-radius: var(--fcr_cornerradius_xs);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.annotation-toolbar-item-title {
+  margin-top: 4px;
+  font-size: 12px;
+  font-weight: 300;
+}
+
+/* .annotation-toolbar-item:hover > .annotation-toolbar-item-icon {
+  background: var(--fcr_ui_scene_ramp_brand1);
+}
+
+.annotation-toolbar-item.hover > .annotation-toolbar-item-title {
+  color: var(--fcr_ui_scene_ramp_brand6);
+} */
+
+.annotation-toolbar-item.is-active > .annotation-toolbar-item-icon {
+  background: var(--fcr_ui_scene_ramp_brand0);
+}
+
+.annotation-toolbar-item.is-active > .annotation-toolbar-item-title {
+  color: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.annotation-toolbar-item.is-disabled {
+  cursor: not-allowed;
+}
+
+.annotation-toolbar-item.is-disabled > .annotation-toolbar-item-title {
+  color: var(--fcr_ui_scene_icontext3);
+}
+
+.annotation-toolbar-item-context-menu {
+  color: var(--fcr_ui_scene_icontext1);
+  line-height: 100%;
+}
+.annotation-toolbar-item-icon-wrapper {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: conic-gradient(
+    from 180deg at 50% 50%,
+    #ff7171 0deg,
+    #ffa471 30deg,
+    #ffe37f 63.75deg,
+    #e3ff75 91.88deg,
+    #a9ff75 125.63deg,
+    #79ff8f 163.12deg,
+    #72ffe6 189.38deg,
+    #70cff8 210deg,
+    #6880ff 232.5deg,
+    #7856ff 260.62deg,
+    #dd56ff 277.5deg,
+    #ff56da 303.75deg,
+    #ff3797 327.96deg,
+    #ff6464 340.25deg,
+    #ff5656 359.93deg,
+    #ff7171 360deg
+  );
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.annotation-toolbar-item-icon-wrapper > svg {
+  position: absolute;
+  width: 28px;
+  height: 28px;
+}

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

@@ -0,0 +1,67 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.string.includes.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.map.js";
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { AnnotationToolItem } from '../item';
+import { AnnotationColorTool } from '../color-tool';
+import { FcrButton } from 'agora-ui-foundation/lib/components/button';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export var MultipleColorTool = function MultipleColorTool(props) {
+  var transI18n = useI18n();
+  var _props$coverCount = props.coverCount,
+    coverCount = _props$coverCount === void 0 ? 0 : _props$coverCount,
+    commonColors = props.commonColors,
+    currentColor = props.currentColor,
+    setStrokeColor = props.setStrokeColor,
+    placement = props.placement,
+    themeColors = props.themeColors,
+    size = props.size,
+    onContextMenuClick = props.onContextMenuClick;
+  var handleContextMenuClick = function handleContextMenuClick(color) {
+    var _ref = commonColors || [],
+      _ref2 = _slicedToArray(_ref, 1),
+      firstColor = _ref2[0];
+    onContextMenuClick === null || onContextMenuClick === void 0 || onContextMenuClick(firstColor ? [color, firstColor] : [color]);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [commonColors === null || commonColors === void 0 ? void 0 : commonColors.filter(function (_, index) {
+      return commonColors.length - 1 - index > coverCount;
+    }).map(function (color) {
+      return /*#__PURE__*/_jsx(AnnotationToolItem, {
+        size: currentColor === color ? 26 : size,
+        hideTitle: true,
+        iconType: FcrIconType.FCR_COLOR,
+        color: color,
+        lineColor: currentColor === color ? color : 'transparent',
+        onClick: function onClick() {
+          return setStrokeColor(color);
+        }
+      }, color);
+    }), /*#__PURE__*/_jsx(AnnotationColorTool, {
+      direction: "vertical",
+      placement: placement,
+      size: size,
+      currentColor: currentColor,
+      colors: themeColors,
+      commonColors: commonColors,
+      setStrokeColor: setStrokeColor,
+      selected: !(commonColors !== null && commonColors !== void 0 && commonColors.includes(currentColor)),
+      hideTitle: true,
+      contextMenu: /*#__PURE__*/_jsx(FcrButton, {
+        type: "gray",
+        block: true,
+        size: "XXS",
+        shape: "rounded",
+        children: transI18n('fmt_screenshare_whiteboard_button_setcolor')
+      }),
+      onContextMenuClick: handleContextMenuClick
+    })]
+  });
+};

package/lib-es/modules/components/toolbar/components/panel/index.js

@@ -0,0 +1,21 @@
+import "core-js/modules/es.array.concat.js";
+import './style.css';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var AnnotationToolPanel = function AnnotationToolPanel(props) {
+  return /*#__PURE__*/_jsxs("div", {
+    className: "fcr-annotation-toolbar-panel ".concat(props.size === 'small' ? 'small' : 'medium', " ").concat(props.direction),
+    style: {
+      flexDirection: props.type === 'color' ? 'column' : undefined
+    },
+    children: [props.header && /*#__PURE__*/_jsx("div", {
+      className: "fcr-annotation-toolbar-panel-header",
+      children: props.header
+    }), props.content && /*#__PURE__*/_jsx("div", {
+      className: "fcr-annotation-toolbar-panel-content",
+      children: props.content
+    }), props.footer && /*#__PURE__*/_jsx("div", {
+      className: "fcr-annotation-toolbar-panel-footer",
+      children: props.footer
+    })]
+  });
+};

package/lib-es/modules/components/toolbar/components/panel/style.css

@@ -0,0 +1,86 @@
+.fcr-annotation-toolbar-panel {
+  max-width: 300px;
+  padding: 0 6px;
+  height: auto;
+  background: var(fcr_mobile_ui_scene_color_popup_fill2);
+  border-radius: var(--fcr_cornerradius_l);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  --small-width: 148px;
+}
+
+.fcr-annotation-toolbar-panel.small {
+  box-sizing: content-box;
+  border-radius: 8px;
+}
+
+.fcr-annotation-toolbar-panel.medium {
+  padding: 12px;
+}
+
+.fcr-annotation-toolbar-panel.small > div {
+  min-height: 36px;
+  display: flex;
+  gap: 0;
+  box-sizing: content-box;
+}
+
+.fcr-annotation-toolbar-panel.medium > div {
+  min-height: 36px;
+  display: flex;
+  gap: 12px;
+  box-sizing: content-box;
+}
+
+.fcr-annotation-toolbar-panel .annotation-toolbar-item {
+  width: 36px;
+}
+
+.fcr-annotation-toolbar-panel.medium .fcr-annotation-toolbar-panel-footer {
+  border-top: 1px solid var(--fcr_ui_scene_line1);
+  padding-top: 8px;
+  margin-top: 8px;
+}
+
+.fcr-annotation-toolbar-panel.small .fcr-annotation-toolbar-panel-footer {
+  border-top: 1px solid var(--fcr_ui_scene_line1);
+  font-size: 12px;
+  color: var(--fcr_ui_scene_black3);
+  min-height: 24px;
+  text-align: center;
+  line-height: 1.2;
+  border-top: 1px solid var(--fcr_ui_scene_black1);
+  max-width: var(--small-width);
+}
+
+.fcr-annotation-toolbar-panel.vertical {
+  flex-direction: column;
+}
+.fcr-annotation-toolbar-panel.vertical .fcr-annotation-toolbar-panel-header {
+  padding: 6px 0;
+  gap: 6px;
+  flex-direction: column;
+}
+.fcr-annotation-toolbar-panel.vertical .fcr-annotation-toolbar-panel-footer {
+  padding: 6px 0;
+  gap: 6px;
+  flex-direction: column;
+}
+.fcr-annotation-toolbar-panel.horizontal {
+  flex-direction: row;
+}
+.fcr-annotation-toolbar-panel.horizontal .fcr-annotation-toolbar-panel-header {
+  flex-direction: row;
+}
+
+.fcr-annotation-toolbar-panel.horizontal .fcr-annotation-toolbar-panel-footer {
+  flex-direction: row;
+}
+
+.fcr-annotation-toolbar-panel-content {
+  width: var(--small-width);
+  display: flex;
+  flex-wrap: wrap;
+  padding: 8px;
+}

package/lib-es/modules/components/toolbar/components/pen-tool/index.js

@@ -0,0 +1,54 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { AnnotationToolItem } from '../item';
+import { AnnotationPenPanel } from './pen-panel';
+import { useState } from 'react';
+import { FcrBoardToolType } from 'fcr-core';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var AnnotationPenTool = function AnnotationPenTool(props) {
+  var size = props.size,
+    hideTitle = props.hideTitle,
+    currentColor = props.currentColor,
+    currentTool = props.currentTool,
+    setTool = props.setTool,
+    currentStrokeWidth = props.currentStrokeWidth,
+    setStrokeWidth = props.setStrokeWidth,
+    placement = props.placement,
+    direction = props.direction;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var handleClick = function handleClick() {
+    setVisible(!visible);
+    setTool(FcrBoardToolType.CURVE);
+  };
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    setVisible(visible);
+  };
+  var t = useI18n();
+  var penMap = _defineProperty({}, FcrBoardToolType.CURVE, FcrIconType.FCR_WHITEBOARD_PED5);
+  return /*#__PURE__*/_jsx(AnnotationToolItem, {
+    placement: placement,
+    size: size,
+    hideTitle: hideTitle,
+    active: currentTool in penMap,
+    iconType: currentTool in penMap ? penMap[currentTool] : FcrIconType.FCR_WHITEBOARD_PED5,
+    title: t('fmt_screenshare_whiteboard_button_paintbrush'),
+    lineColor: currentColor,
+    visible: visible,
+    onVisibleChange: handleVisibleChange,
+    onClick: handleClick,
+    showArrow: true,
+    content: /*#__PURE__*/_jsx(AnnotationPenPanel, {
+      size: size,
+      hideTitle: hideTitle,
+      currentStrokeWidth: currentStrokeWidth,
+      setStrokeWidth: setStrokeWidth,
+      onClick: handleClick,
+      direction: direction
+    })
+  });
+};

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

@@ -0,0 +1,32 @@
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.to-string.js";
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { AnnotationToolItem } from '../../item';
+import { AnnotationToolPanel } from '../../panel';
+import { observer } from 'mobx-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var AnnotationPenPanel = observer(function (props) {
+  var size = props.size,
+    hideTitle = props.hideTitle,
+    currentStrokeWidth = props.currentStrokeWidth,
+    setStrokeWidth = props.setStrokeWidth,
+    _onClick = props.onClick,
+    direction = props.direction;
+  return /*#__PURE__*/_jsx(AnnotationToolPanel, {
+    direction: direction,
+    size: "small",
+    header: [3, 5, 7, 10].map(function (width, index) {
+      return /*#__PURE__*/_jsx(AnnotationToolItem, {
+        hideTitle: hideTitle,
+        size: size,
+        active: currentStrokeWidth === width,
+        iconType: FcrIconType.FCR_PENSIZE_STRAIGHT,
+        level: index + 1,
+        onClick: function onClick() {
+          _onClick();
+          setStrokeWidth(width);
+        }
+      }, width);
+    })
+  });
+});

package/lib-es/modules/components/toolbar/components/save-draft/index.js

@@ -0,0 +1,51 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import "core-js/modules/web.timers.js";
+import { AnnotationToolItem } from '../item';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var AnnotationToolSaveDraft = function AnnotationToolSaveDraft(props) {
+  var t = useI18n();
+  var progress = props.progress,
+    placement = props.placement,
+    setProgress = props.setProgress,
+    onClick = props.onClick;
+  var getSnapshotImage = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var progressInterval;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            onClick();
+            progressInterval = setInterval(function () {
+              if (progress < 100) {
+                setProgress(progress + 1);
+              } else {
+                clearInterval(progressInterval);
+              }
+            }, 4);
+            setTimeout(function () {
+              setProgress(100);
+              clearInterval(progressInterval);
+            }, 400);
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function getSnapshotImage() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/_jsx(AnnotationToolItem, {
+    size: 28,
+    onClick: getSnapshotImage,
+    iconType: FcrIconType.FCR_DOWNLOAD,
+    title: t('fmt_screenshare_whiteboard_button_savescript'),
+    hideTitle: true,
+    disabled: !!progress && progress > 0 && progress < 100,
+    placement: placement
+  });
+};

package/lib-es/modules/components/toolbar/components/vertical-frame/index.js

@@ -0,0 +1,176 @@
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.define-property.js";
+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/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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 { animated, useSpring } from '@react-spring/web';
+import { useDrag } from '@use-gesture/react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import MoveIcon from '../icons/move-icon';
+import FoldIcon from '../icons/fold-icon';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { useResizeVisible } from '../../hooks/use-resize-visible';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function VerticalBar(props) {
+  var transI18n = useI18n();
+  var container = props.container,
+    show = props.show,
+    children = props.children,
+    _props$offsetTop = props.offsetTop,
+    offsetTop = _props$offsetTop === void 0 ? 0 : _props$offsetTop,
+    onPlacementChanged = props.onPlacementChanged,
+    onResize = props.onResize;
+  var x = 20;
+  var y = useMemo(function () {
+    return 20 + offsetTop;
+  }, [offsetTop]);
+  var toolbarDom = useRef();
+  var _useState = useState('right'),
+    _useState2 = _slicedToArray(_useState, 2),
+    placement = _useState2[0],
+    setPlacement = _useState2[1];
+  var _useState3 = useState({
+      x: x,
+      y: y
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    position = _useState4[0],
+    setPosition = _useState4[1];
+  var _useSpring = useSpring({
+      x: x,
+      y: y
+    }, []),
+    _useSpring2 = _slicedToArray(_useSpring, 2),
+    _useSpring2$ = _useSpring2[0],
+    rx = _useSpring2$.x,
+    ry = _useSpring2$.y,
+    api = _useSpring2[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    folded = _useState6[0],
+    setFold = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    topTemp = _useState8[0],
+    setTopTemp = _useState8[1];
+  var _useResizeVisible = useResizeVisible(),
+    coverCount = _useResizeVisible.coverCount,
+    setToolbarDom = _useResizeVisible.setToolbarDom;
+  useEffect(function () {
+    onResize(coverCount);
+  }, [coverCount]);
+  var bind = useDrag(function (p) {
+    var _movement = _slicedToArray(p.movement, 2),
+      mx = _movement[0],
+      my = _movement[1];
+    api.start(placement === 'left' ? {
+      x: position.x + mx,
+      y: position.y + my
+    } : {
+      x: x + mx,
+      y: y + my
+    });
+  });
+  var handleMouseUp = useCallback(function () {
+    if (toolbarDom.current) {
+      var containerClientRect = (container || document.body).getBoundingClientRect();
+      var toolbarClientRect = toolbarDom.current.getBoundingClientRect();
+      var left = toolbarClientRect.left,
+        width = toolbarClientRect.width;
+      var containerWidth = containerClientRect.width;
+      var toolbarCenterPos = left - width / 2;
+      var _position = {
+        x: x,
+        y: y
+      };
+      if (toolbarCenterPos > containerWidth / 2) {
+        // right
+        setPlacement('left');
+        onPlacementChanged('left');
+        _position = {
+          x: containerWidth - width - x,
+          y: y
+        };
+      } else {
+        // left
+        _position = {
+          x: x,
+          y: y
+        };
+        setPlacement('right');
+        onPlacementChanged('right');
+      }
+      setPosition(_position);
+      api.start(_position);
+    }
+  }, []);
+  var handleRefMount = useCallback(function (dom) {
+    if (dom) {
+      var top = dom.getBoundingClientRect().top;
+      if (topTemp !== top) {
+        setToolbarDom(dom);
+        setTopTemp(top);
+        toolbarDom.current = dom;
+      }
+    }
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      onClick: function onClick() {
+        return setFold(false);
+      },
+      className: "fcr-fragment-board-toobar-folded-button",
+      style: {
+        left: position.x,
+        top: position.y,
+        visibility: folded && show ? 'visible' : 'hidden'
+      },
+      children: [/*#__PURE__*/_jsx(FcrIcon, {
+        type: FcrIconType.FCR_WHITEBOARD_EXPAND2,
+        colors: {
+          iconPrimary: '#000',
+          iconSecondary: '#000'
+        }
+      }), /*#__PURE__*/_jsx("span", {
+        children: transI18n('fmt_screenshare_whiteboard_button_spread')
+      })]
+    }), /*#__PURE__*/_jsxs(animated.div, {
+      ref: handleRefMount,
+      className: "fcr-fragment-whiteboard-toolbar",
+      style: {
+        left: rx,
+        top: ry || position.y,
+        visibility: show && !folded ? 'visible' : 'hidden'
+      },
+      children: [children, !folded && /*#__PURE__*/_jsx("div", {
+        className: "fcr-fragment-board-toolbar-fold fcr-fragment-board-toolbar-fold--".concat(placement),
+        onClick: function onClick() {
+          setFold(true);
+        },
+        children: /*#__PURE__*/_jsx(FoldIcon, {})
+      }), /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, bind()), {}, {
+        style: {
+          cursor: 'move'
+        },
+        onMouseUp: handleMouseUp,
+        onMouseOut: handleMouseUp,
+        children: /*#__PURE__*/_jsx(MoveIcon, {})
+      }))]
+    })]
+  });
+}

package/lib-es/modules/components/toolbar/hooks/use-resize-visible.js

@@ -0,0 +1,64 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { toolBarItemClassName } from '../components/item';
+import { debounce } from 'lodash';
+export var useResizeVisible = function useResizeVisible() {
+  var _useState = useState(-1),
+    _useState2 = _slicedToArray(_useState, 2),
+    coverCount = _useState2[0],
+    setCoverCount = _useState2[1];
+  var bottomHeight = 20;
+  var toolbarRef = useRef();
+  var containerRef = useRef(null);
+  var thresholdRef = useRef(0);
+  var itemHeightRef = useRef(0);
+  var handleResize = useCallback(function () {
+    var container = containerRef.current;
+    var _ref = (container === null || container === void 0 ? void 0 : container.getBoundingClientRect()) || document.documentElement.getBoundingClientRect(),
+      height = _ref.height;
+    var threshold = thresholdRef.current;
+    var itemHeight = itemHeightRef.current;
+    var coverSize = 0;
+    var coverCountTemp = -1;
+    coverSize = threshold - height;
+    coverCountTemp = Math.round(coverSize / itemHeight);
+    setCoverCount(coverCountTemp);
+  }, []);
+  useEffect(function () {
+    handleResize();
+  }, []);
+  var handleResizeDebounce = useCallback(debounce(handleResize, 200), []);
+  useEffect(function () {
+    var container = containerRef.current;
+    if (container) {
+      container.addEventListener('transitionend', handleResizeDebounce);
+    }
+    return function () {
+      if (container) {
+        container.removeEventListener('transitionend', handleResizeDebounce);
+      }
+    };
+  }, []);
+  var reCalcThreshold = useCallback(function () {
+    var toolbar = toolbarRef.current;
+    if (toolbar) {
+      var _toolbar$getBoundingC = toolbar.getBoundingClientRect(),
+        height = _toolbar$getBoundingC.height;
+      var items = toolbar.querySelectorAll(".".concat(toolBarItemClassName));
+      itemHeightRef.current = items[0].getBoundingClientRect().height;
+      var threshold = height + bottomHeight;
+      thresholdRef.current = threshold;
+    }
+  }, []);
+  var setToolbarDom = useCallback(function (dom) {
+    if (dom) {
+      toolbarRef.current = dom;
+      containerRef.current = document.querySelector('.fcr-whiteboard-controlbar-body-content');
+      reCalcThreshold();
+    }
+  }, []);
+  return {
+    coverCount: coverCount,
+    setToolbarDom: setToolbarDom
+  };
+};