fcr-ui-scene 3.6.1 → 3.6.2

package/lib/modules/annotation/components/toolbar/components/item/item.js

@@ -0,0 +1,115 @@
+"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.AnnotationToolItem = void 0;
+require("core-js/modules/es.array.concat.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+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 _react = require("react");
+var _hostAreaContainer = require("../../../../../dialog/components/host-area-container");
+require("./style.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationToolItem = exports.AnnotationToolItem = function AnnotationToolItem(props) {
+  var _props$iconType = props.iconType,
+    iconType = _props$iconType === void 0 ? _type.FcrIconType.FCR_WHITEBOARD_TEXT : _props$iconType,
+    title = props.title,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 32 : _props$size,
+    _props$active = props.active,
+    active = _props$active === void 0 ? false : _props$active,
+    content = props.content,
+    color = props.color,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    lineColor = props.lineColor,
+    onClick = props.onClick,
+    visible = props.visible,
+    onVisibleChange = props.onVisibleChange,
+    level = props.level,
+    selected = props.selected;
+  var _useContext = (0, _react.useContext)(_hostAreaContainer.HotAreaContext),
+    placement = _useContext.placement;
+  var _useState = (0, _react.useState)(visible),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visibled = _useState2[0],
+    setVisible = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    hover = _useState4[0],
+    setHover = _useState4[1];
+  var defaultColor = "var(".concat(active || visibled ? "--fcr_ui_scene_ramp_brand6" : "--fcr_ui_scene_icontext1", ")");
+  var disabledColor = "".concat(disabled ? "var(--fcr_ui_scene_icontext3)" : defaultColor);
+  var handleClick = function handleClick() {
+    if (disabled) return;
+    onClick === null || onClick === void 0 || onClick(color || '');
+  };
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    onVisibleChange === null || onVisibleChange === void 0 || onVisibleChange(visible);
+    setVisible(visible);
+  };
+  (0, _react.useEffect)(function () {
+    setVisible(!!visible);
+  }, [visible]);
+  var hasSelected = typeof selected === 'boolean';
+  var handleMouseEnter = function handleMouseEnter() {
+    hasSelected && setHover(!hover);
+  };
+  var element = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "annotation-toolbar-item ".concat((active || visibled) && !hasSelected ? 'is-active' : '', " ").concat(disabled ? 'is-disabled' : ''),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "annotation-toolbar-item-icon",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseEnter,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        onClick: handleClick,
+        type: iconType,
+        size: size,
+        fill: "none",
+        colors: {
+          iconPrimary: color || disabledColor,
+          iconSecondary: hover ? color : lineColor || defaultColor,
+          level: level,
+          selected: selected
+        }
+      })
+    }), title && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "annotation-toolbar-item-title",
+      children: title
+    })]
+  });
+  return title ? content ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+      showArrow: false,
+      content: title,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+        visible: visibled,
+        overlayOffset: 10,
+        overlayInnerStyle: {
+          width: 'fit-content'
+        },
+        placement: placement,
+        getTooltipContainer: function getTooltipContainer(e) {
+          return e;
+        },
+        trigger: "click",
+        showArrow: false,
+        content: content,
+        onVisibleChange: handleVisibleChange,
+        children: element
+      })
+    })
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    showArrow: false,
+    visible: visibled,
+    content: title,
+    onVisibleChange: handleVisibleChange,
+    children: element
+  }) : element;
+};

package/lib/modules/annotation/components/toolbar/components/item/style.css

@@ -0,0 +1,43 @@
+.annotation-toolbar-item {
+  min-width: 36px;
+  max-width: 64px;
+  min-height: 36px;
+  max-height: 52px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--fcr_ui_scene_icontext1);
+  cursor: pointer;
+}
+
+.annotation-toolbar-item-icon {
+  max-width: 44px;
+  min-width: 32px;
+  height: 32px;
+  border-radius: var(--fcr_cornerradius_xs);
+  display: flex;
+  justify-content: center;
+}
+
+.annotation-toolbar-item-title {
+  margin-top: 4px;
+  font-size: 12px;
+  font-weight: 300;
+}
+
+.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);
+}

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

@@ -0,0 +1,5 @@
+import './style.css';
+export declare const AnnotationToolPanel: (props: {
+    header: React.ReactNode;
+    footer?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/annotation/components/toolbar/components/panel/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnnotationToolPanel = void 0;
+require("./style.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationToolPanel = exports.AnnotationToolPanel = function AnnotationToolPanel(props) {
+  var footer = props.footer;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "annotation-toolbar-panel",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "annotation-toolbar-panel-header",
+      children: props.header
+    }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "annotation-toolbar-panel-footer",
+      children: props.footer
+    })]
+  });
+};

package/lib/modules/annotation/components/toolbar/components/panel/style.css

@@ -0,0 +1,24 @@
+.annotation-toolbar-panel {
+  max-width: 300px;
+  height: auto;
+  background: var(fcr_mobile_ui_scene_color_popup_fill2);
+  border-radius: var(--fcr_cornerradius_l);
+  padding: 12px;
+}
+
+.annotation-toolbar-panel > div {
+  height: 36px;
+  display: flex;
+  gap: 12px;
+  box-sizing: content-box;
+}
+
+.annotation-toolbar-panel .annotation-toolbar-item {
+  width: 36px;
+}
+
+.annotation-toolbar-panel-footer {
+  border-top: 1px solid var(--fcr_ui_scene_line1);
+  padding-top: 8px;
+  margin-top: 8px;
+}

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

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

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

@@ -0,0 +1,58 @@
+"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/item");
+var _penPanel = require("./pen-panel");
+var _mobxReact = require("mobx-react");
+var _store = require("../../store");
+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 = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_store.AnnotationToolbarContext),
+    _useContext$observabl = _useContext.observables,
+    currentColor = _useContext$observabl.currentColor,
+    currentTool = _useContext$observabl.currentTool,
+    setTool = _useContext.setTool,
+    popoverVisible = _useContext.popoverVisible,
+    setPopoverVisible = _useContext.setPopoverVisible;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var handleClick = function handleClick() {
+    setVisible(!visible);
+    setPopoverVisible(!visible);
+    setTool(_enums.FcrBoardToolType.CURVE);
+  };
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    setVisible(visible);
+    setPopoverVisible(visible);
+  };
+  (0, _react.useEffect)(function () {
+    !popoverVisible && setVisible(false);
+  }, [popoverVisible]);
+  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, {
+    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 && popoverVisible,
+    onVisibleChange: handleVisibleChange,
+    onClick: handleClick,
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_penPanel.AnnotationPenPanel, {
+      onClick: handleClick
+    })
+  });
+});

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

@@ -0,0 +1,3 @@
+export declare const AnnotationPenPanel: (props: {
+    onClick: () => void;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,34 @@
+"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");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _item = require("../../item/item");
+var _panel = require("../../panel");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _store = require("../../../store");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationPenPanel = exports.AnnotationPenPanel = (0, _mobxReact.observer)(function (props) {
+  var _useContext = (0, _react.useContext)(_store.AnnotationToolbarContext),
+    currentStrokeWidth = _useContext.observables.currentStrokeWidth,
+    setStrokeWidth = _useContext.setStrokeWidth;
+  var _onClick = props.onClick;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.AnnotationToolPanel, {
+    header: [2, 4, 5, 6].map(function (width, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.AnnotationToolItem, {
+        active: currentStrokeWidth === width,
+        iconType: _type.FcrIconType.FCR_PENSIZE_STRAIGHT,
+        level: index + 1,
+        onClick: function onClick() {
+          _onClick();
+          setStrokeWidth(width);
+        }
+      }, width);
+    })
+  });
+});

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

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

package/lib/modules/annotation/components/toolbar/components/tips/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnnotationToolbarTips = void 0;
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+require("./style.css");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var AnnotationToolbarTips = exports.AnnotationToolbarTips = function AnnotationToolbarTips() {
+  var t = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "annotation-toolbar-tips",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_SHOWVIDEO,
+      size: 24,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+      }
+    }), t('fmt_screenshare_toast_annotations_visible_participants')]
+  });
+};

package/lib/modules/annotation/components/toolbar/components/tips/style.css

@@ -0,0 +1,19 @@
+.annotation-toolbar-tips {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-104px);
+  /* width: 208px; */
+  height: 32px;
+  background: var(--fcr_mobile_ui_scene_color_popup_fill2);
+  box-shadow: var(--fcr_web_light_dropup);
+  border-radius: var(--fcr_cornerradius_m);
+  font-size: 12px;
+  color: var(--fcr_ui_scene_text1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  gap: 4px;
+  top: -40px;
+  padding: 2px 8px;
+}

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,40 @@
+import { FcrBoardShape, FcrBoardToolType } from 'fcr-core/lib/room-control/whiteboard-control/enums';
+import { FcrUIPrivilegeProvider } from '../../../../providers/privilege-provider';
+export declare class AnnotationToolbarStore {
+    private _privilegeProvider;
+    private _tipsTimer;
+    private _disposer;
+    accessor observables: {
+        currentTool: FcrBoardToolType;
+        currentShape: FcrBoardShape;
+        currentColor: string;
+        currentStrokeWidth: number;
+        redoSteps: boolean;
+        undoSteps: boolean;
+        lastPen: FcrBoardToolType;
+        lastShape: FcrBoardShape;
+        colors: string[];
+    };
+    accessor isTipsVisible: boolean;
+    accessor popoverVisible: boolean;
+    get hasAnnotationAllowWritePermission(): boolean;
+    get allowAnnotationWriteState(): boolean;
+    constructor({ privilegeProvider }: {
+        privilegeProvider: FcrUIPrivilegeProvider;
+    });
+    redo(): void;
+    undo(): void;
+    clean(): void;
+    setTool(tool: FcrBoardToolType): void;
+    setPen(shape: FcrBoardShape): void;
+    setShape(shape: FcrBoardShape): void;
+    setStrokeColor(color: string): void;
+    setStrokeWidth(strokeWidth: number): void;
+    onTooltipMount(dom: HTMLDivElement): void;
+    onTooltipUnmount(): void;
+    setPopoverVisible(visible: boolean): void;
+    captureScreen(): void;
+    setAllowAnnotationWrite(allow: boolean): void;
+    release(): void;
+}
+export declare const AnnotationToolbarContext: import("react").Context<AnnotationToolbarStore>;