fcr-ui-scene 3.7.2 → 3.7.3

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

@@ -0,0 +1,62 @@
+"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.AnnotationPenTool = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _item = require("../item");
+var _penPanel = require("./pen-panel");
+var _react = require("react");
+var _enums = require("fcr-core/lib/room-control/whiteboard-control/enums");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationPenTool = exports.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 = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var handleClick = function handleClick() {
+    setVisible(!visible);
+    setTool(_enums.FcrBoardToolType.CURVE);
+  };
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    setVisible(visible);
+  };
+  var t = (0, _i18n.useI18n)();
+  var penMap = (0, _defineProperty2["default"])({}, _enums.FcrBoardToolType.CURVE, _type.FcrIconType.FCR_WHITEBOARD_PED5);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+    placement: placement,
+    size: size,
+    hideTitle: hideTitle,
+    active: currentTool in penMap,
+    iconType: currentTool in penMap ? penMap[currentTool] : _type.FcrIconType.FCR_WHITEBOARD_PED5,
+    title: t('fmt_screenshare_whiteboard_button_paintbrush'),
+    lineColor: currentColor,
+    visible: visible,
+    onVisibleChange: handleVisibleChange,
+    onClick: handleClick,
+    showArrow: true,
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_penPanel.AnnotationPenPanel, {
+      size: size,
+      hideTitle: hideTitle,
+      currentStrokeWidth: currentStrokeWidth,
+      setStrokeWidth: setStrokeWidth,
+      onClick: handleClick,
+      direction: direction
+    })
+  });
+};

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

@@ -0,0 +1,8 @@
+export declare const AnnotationPenPanel: (props: {
+    size?: number;
+    hideTitle?: boolean;
+    currentStrokeWidth: number;
+    setStrokeWidth: (width: number) => void;
+    onClick: () => void;
+    direction?: "horizontal" | "vertical";
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,39 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnnotationPenPanel = void 0;
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.object.to-string.js");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _item = require("../../item");
+var _panel = require("../../panel");
+var _mobxReact = require("mobx-react");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationPenPanel = exports.AnnotationPenPanel = (0, _mobxReact.observer)(function (props) {
+  var size = props.size,
+    hideTitle = props.hideTitle,
+    currentStrokeWidth = props.currentStrokeWidth,
+    setStrokeWidth = props.setStrokeWidth,
+    _onClick = props.onClick,
+    direction = props.direction;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.AnnotationToolPanel, {
+    direction: direction,
+    size: "small",
+    header: [3, 5, 7, 10].map(function (width, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+        hideTitle: hideTitle,
+        size: size,
+        active: currentStrokeWidth === width,
+        iconType: _type.FcrIconType.FCR_PENSIZE_STRAIGHT,
+        level: index + 1,
+        onClick: function onClick() {
+          _onClick();
+          setStrokeWidth(width);
+        }
+      }, width);
+    })
+  });
+});

package/lib/modules/components/toolbar/components/save-draft/index.d.ts

@@ -0,0 +1,7 @@
+import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
+export declare const AnnotationToolSaveDraft: (props: {
+    progress: number;
+    setProgress: (progress: number) => void;
+    onClick: () => void;
+    placement: ToolTipProps["placement"];
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,59 @@
+"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.AnnotationToolSaveDraft = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+require("core-js/modules/web.timers.js");
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _item = require("../item");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationToolSaveDraft = exports.AnnotationToolSaveDraft = function AnnotationToolSaveDraft(props) {
+  var t = (0, _i18n.useI18n)();
+  var progress = props.progress,
+    placement = props.placement,
+    setProgress = props.setProgress,
+    onClick = props.onClick;
+  var getSnapshotImage = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var progressInterval;
+      return _regenerator["default"].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__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+    size: 28,
+    onClick: getSnapshotImage,
+    iconType: _type.FcrIconType.FCR_DOWNLOAD,
+    title: t('fmt_screenshare_whiteboard_button_savescript'),
+    hideTitle: true,
+    disabled: !!progress && progress > 0 && progress < 100,
+    placement: placement
+  });
+};

package/lib/modules/components/toolbar/components/vertical-frame/index.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+export declare function VerticalBar(props: PropsWithChildren<{
+    container?: HTMLDivElement;
+    show: boolean;
+    offsetTop?: number;
+    onPlacementChanged: (placement: 'left' | 'right') => void;
+    onResize: (coverCount: number) => void;
+}>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,179 @@
+"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.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.VerticalBar = VerticalBar;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _web = require("@react-spring/web");
+var _react = require("@use-gesture/react");
+var _react2 = require("react");
+var _moveIcon = _interopRequireDefault(require("../icons/move-icon"));
+var _foldIcon = _interopRequireDefault(require("../icons/fold-icon"));
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _useResizeVisible2 = require("../../hooks/use-resize-visible");
+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; }
+function VerticalBar(props) {
+  var transI18n = (0, _i18n.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 = (0, _react2.useMemo)(function () {
+    return 20 + offsetTop;
+  }, [offsetTop]);
+  var toolbarDom = (0, _react2.useRef)();
+  var _useState = (0, _react2.useState)('right'),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    placement = _useState2[0],
+    setPlacement = _useState2[1];
+  var _useState3 = (0, _react2.useState)({
+      x: x,
+      y: y
+    }),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    position = _useState4[0],
+    setPosition = _useState4[1];
+  var _useSpring = (0, _web.useSpring)({
+      x: x,
+      y: y
+    }, []),
+    _useSpring2 = (0, _slicedToArray2["default"])(_useSpring, 2),
+    _useSpring2$ = _useSpring2[0],
+    rx = _useSpring2$.x,
+    ry = _useSpring2$.y,
+    api = _useSpring2[1];
+  var _useState5 = (0, _react2.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    folded = _useState6[0],
+    setFold = _useState6[1];
+  var _useState7 = (0, _react2.useState)(0),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    topTemp = _useState8[0],
+    setTopTemp = _useState8[1];
+  var _useResizeVisible = (0, _useResizeVisible2.useResizeVisible)(),
+    coverCount = _useResizeVisible.coverCount,
+    setToolbarDom = _useResizeVisible.setToolbarDom;
+  (0, _react2.useEffect)(function () {
+    onResize(coverCount);
+  }, [coverCount]);
+  var bind = (0, _react.useDrag)(function (p) {
+    var _movement = (0, _slicedToArray2["default"])(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 = function handleMouseUp() {
+    if (toolbarDom.current) {
+      var containerClientRect = (container || document.body).getBoundingClientRect();
+      var toolbarClientRect = toolbarDom.current.getBoundingClientRect();
+      var toolbarCenterPos = toolbarClientRect.left - toolbarClientRect.width / 2;
+      var _position = {
+        x: x,
+        y: y
+      };
+      if (toolbarCenterPos > containerClientRect.width / 2) {
+        // right
+        setPlacement('left');
+        onPlacementChanged('left');
+        _position = {
+          x: containerClientRect.width - toolbarClientRect.width - x,
+          y: y
+        };
+      } else {
+        // left
+        _position = {
+          x: x,
+          y: y
+        };
+        setPlacement('right');
+        onPlacementChanged('right');
+      }
+      setPosition(_position);
+      api.start(_position);
+    }
+  };
+  var handleRefMount = function handleRefMount(dom) {
+    if (dom) {
+      var top = dom.getBoundingClientRect().top;
+      if (topTemp !== top) {
+        setToolbarDom(dom);
+        setTopTemp(top);
+        toolbarDom.current = dom;
+      }
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_WHITEBOARD_EXPAND2,
+        colors: {
+          iconPrimary: '#000',
+          iconSecondary: '#000'
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: transI18n('fmt_screenshare_whiteboard_button_spread')
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_web.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__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-fragment-board-toolbar-fold fcr-fragment-board-toolbar-fold--".concat(placement),
+        onClick: function onClick() {
+          setFold(true);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_foldIcon["default"], {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, bind()), {}, {
+        style: {
+          cursor: 'move'
+        },
+        onMouseUp: handleMouseUp,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_moveIcon["default"], {})
+      }))]
+    })]
+  });
+}

package/lib/modules/components/toolbar/hooks/use-resize-visible.d.ts

@@ -0,0 +1,4 @@
+export declare const useResizeVisible: () => {
+    coverCount: number;
+    setToolbarDom: (dom: HTMLDivElement | null) => void;
+};

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

@@ -0,0 +1,59 @@
+"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.useResizeVisible = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _item = require("../components/item");
+var _view = require("../../../action-bar/view");
+var useResizeVisible = exports.useResizeVisible = function useResizeVisible() {
+  var toolbar = (0, _react.useRef)();
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    threshold = _useState2[0],
+    setThreshold = _useState2[1];
+  var _useState3 = (0, _react.useState)(-1),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    coverCount = _useState4[0],
+    setCoverCount = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    itemHeight = _useState6[0],
+    setItemHeight = _useState6[1];
+  var actionbar = document.querySelector(".".concat(_view.actionBarClassName));
+  var actionBarHeight = (actionbar === null || actionbar === void 0 ? void 0 : actionbar.getBoundingClientRect().height) || 0;
+  var bottomHeight = 20;
+  var handleResize = (0, _react.useCallback)(function () {
+    var offsetHeight = document.body.offsetHeight;
+    var coverSize = threshold - offsetHeight;
+    var coverCount = Math.floor(coverSize / itemHeight);
+    setCoverCount(coverCount);
+  }, [threshold]);
+  (0, _react.useEffect)(function () {
+    window.addEventListener('resize', handleResize);
+    return function () {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [threshold]);
+  var setToolbarDom = (0, _react.useCallback)(function (dom) {
+    if (dom) {
+      var _items$;
+      toolbar.current = dom;
+      var _dom$getBoundingClien = dom.getBoundingClientRect(),
+        top = _dom$getBoundingClien.top,
+        height = _dom$getBoundingClien.height;
+      var items = dom.querySelectorAll(".".concat(_item.toolBarItemClassName));
+      setItemHeight((_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.getBoundingClientRect().height);
+      var _threshold = height + top + actionBarHeight + bottomHeight;
+      setThreshold(_threshold);
+    }
+  }, []);
+  return {
+    coverCount: coverCount,
+    setToolbarDom: setToolbarDom
+  };
+};

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

@@ -0,0 +1,29 @@
+import { FcrBoardShape, FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
+import './style.css';
+export declare const colors: string[];
+export declare const WhiteboardToolbar: (props: {
+    direction?: "horizontal" | "vertical";
+    container?: HTMLDivElement;
+    show: boolean;
+    currentStrokeWidth: number;
+    currentColor: string;
+    currentTool: FcrBoardToolType;
+    currentShape: FcrBoardShape;
+    redoSteps: boolean;
+    undoSteps: boolean;
+    commonColors?: string[];
+    themeColors?: string[];
+    setStrokeWidth: (width: number) => void;
+    setTool: (tool: FcrBoardToolType) => void;
+    setShape: (shape: FcrBoardShape) => void;
+    setStrokeColor: (color: string) => void;
+    undo: () => void;
+    redo: () => void;
+    clean: () => void;
+    size?: number;
+    setCommonColors?: (colors: string[]) => void;
+    onSave?: () => void;
+    progress?: number;
+    setProgress?: (progress: number) => void;
+    offsetTop?: number;
+}) => import("react/jsx-runtime").JSX.Element;