fcr-ui-scene 3.7.2 → 3.7.4-rc.1

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;

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

@@ -0,0 +1,43 @@
+"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.AnnotationGroupTool = 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 _panel = require("../panel");
+var _react = require("react");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationGroupTool = exports.AnnotationGroupTool = function AnnotationGroupTool(props) {
+  var size = props.size,
+    placement = props.placement,
+    children = props.children;
+  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() {
+    setVisible(!visible);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+    size: size,
+    iconType: _type.FcrIconType.FCR_SUBTRACT,
+    title: t('fmt_screenshare_whiteboard_button_additionaltools'),
+    hideTitle: true,
+    placement: placement,
+    visible: visible,
+    onClick: handleClick,
+    onVisibleChange: setVisible,
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.AnnotationToolPanel, {
+      size: "small",
+      direction: "vertical",
+      header: children
+    })
+  });
+};

package/lib/modules/components/toolbar/components/icons/fold-icon.d.ts

@@ -0,0 +1,2 @@
+declare const FoldIcon: () => import("react/jsx-runtime").JSX.Element;
+export default FoldIcon;

package/lib/modules/components/toolbar/components/icons/fold-icon.js

@@ -0,0 +1,41 @@
+"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["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+var FoldIcon = function FoldIcon() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+    width: "16",
+    height: "72",
+    viewBox: "0 0 16 72",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+      clipPath: "url(#clip0_9209_166297)",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        d: "M9.49744 11.6558C12.3854 14.6399 14 18.63 14 22.7827L14 49.2173C14 53.37 12.3854 57.3601 9.49744 60.3442L7 62.9248C4.68094 64.9898 2.69913 67.4048 1.12644 70.0823L-2.86197e-07 72L2.86102e-06 -6.11959e-07L1.12644 1.91773C2.69914 4.5952 4.68094 7.0102 7 9.07519L9.49744 11.6558Z",
+        fill: "#2F2F2F",
+        fillOpacity: "0.95"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        d: "M6.56598 35.0095L8.13153 32.2698C8.6403 31.3795 10 31.7401 10 32.7656L10 39.2344C10 40.2599 8.64053 40.6209 8.13176 39.7306L6.56702 36.9923C6.21566 36.3774 6.21463 35.6244 6.56598 35.0095Z",
+        fill: "#4262FF"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("defs", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
+        id: "clip0_9209_166297",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+          width: "72",
+          height: "16",
+          fill: "white",
+          transform: "translate(16) rotate(90)"
+        })
+      })
+    })]
+  });
+};
+var _default = exports["default"] = FoldIcon;

package/lib/modules/components/toolbar/components/icons/move-icon.d.ts

@@ -0,0 +1 @@
+export default function MoveIcon(): import("react/jsx-runtime").JSX.Element;

package/lib/modules/components/toolbar/components/icons/move-icon.js

@@ -0,0 +1,66 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = MoveIcon;
+var _jsxRuntime = require("react/jsx-runtime");
+function MoveIcon() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+    width: "40",
+    height: "16",
+    viewBox: "0 0 40 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      cx: "7.5",
+      cy: "4.5",
+      r: "1.5",
+      fill: "black",
+      fillOpacity: "0.1"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      cx: "7.5",
+      cy: "10.5",
+      r: "1.5",
+      fill: "black",
+      fillOpacity: "0.1"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      cx: "15.5",
+      cy: "4.5",
+      r: "1.5",
+      fill: "black",
+      fillOpacity: "0.1"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      cx: "15.5",
+      cy: "10.5",
+      r: "1.5",
+      fill: "black",
+      fillOpacity: "0.1"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      cx: "23.5",
+      cy: "4.5",
+      r: "1.5",
+      fill: "black",
+      fillOpacity: "0.1"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      cx: "23.5",
+      cy: "10.5",
+      r: "1.5",
+      fill: "black",
+      fillOpacity: "0.1"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      cx: "31.5",
+      cy: "4.5",
+      r: "1.5",
+      fill: "black",
+      fillOpacity: "0.1"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      cx: "31.5",
+      cy: "10.5",
+      r: "1.5",
+      fill: "black",
+      fillOpacity: "0.1"
+    })]
+  });
+}

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

@@ -0,0 +1,25 @@
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { ToolTipProps } from 'agora-ui-foundation/lib/components/tooltip';
+import './style.css';
+export declare const toolBarItemClassName = "annotation-toolbar-item";
+export declare const AnnotationToolItem: (props: {
+    iconType: FcrIconType;
+    title?: string;
+    size?: number;
+    active?: boolean;
+    content?: React.ReactNode;
+    color?: string;
+    disabled?: boolean;
+    lineColor?: string;
+    onClick?: (value: string) => void;
+    visible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+    level?: number;
+    selected?: boolean;
+    hideTitle?: boolean;
+    placement?: ToolTipProps["placement"];
+    contextMenu?: React.ReactNode;
+    showArrow?: boolean;
+    onContextMenuClick?: (color: string) => void;
+    commonColors?: string[];
+}) => import("react/jsx-runtime").JSX.Element;