fcr-ui-scene 3.8.1 → 3.9.0-alpha

package/lib/modules/device-pretest/index.js

@@ -12,7 +12,7 @@ var _devicePretest = require("agora-ui-foundation/lib/components/device-pretest"
 var _react = require("react");
 var _localVideoPlayer = require("agora-ui-foundation/lib/components/local-video-player");
 var _mobxReact = require("mobx-react");
-var _useNamespace = require("../../utilities/useNamespace");
+var _useNamespace = require("agora-ui-foundation/lib/utilities/use-namespace");
 require("./index.css");
 var _store = require("./store");
 require("../setting/video-settings/index.css");

package/lib/modules/device-pretest/settings/beauty.js

@@ -18,7 +18,7 @@ var _react = require("react");
 var _i18n = require("agora-ui-foundation/lib/i18n");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
 var _localVideoPlayer = require("agora-ui-foundation/lib/components/local-video-player");
-var _useNamespace = require("../../../utilities/useNamespace");
+var _useNamespace = require("agora-ui-foundation/lib/utilities/use-namespace");
 var _jsxRuntime = require("react/jsx-runtime");
 var BeautyOptionsCard = function BeautyOptionsCard(props) {
   var ns = (0, _useNamespace.useNamespace)('beauty-setting');

package/lib/modules/device-pretest/settings/video-effect.d.ts

@@ -6,6 +6,8 @@ interface IVideoEffect {
         [key in TabKeyType]: React.ReactNode;
     };
     handleActiveTab?: (tabKey: TabKeyType) => void;
+    isBeautyModeAbilitySupported?: boolean;
+    isVirtualBackgroundSupported?: boolean;
 }
 export declare const VideoEffect: React.FC<IVideoEffect>;
 export {};

package/lib/modules/device-pretest/settings/video-effect.js

@@ -5,10 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.VideoEffect = void 0;
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.object.to-string.js");
 var _tabs = require("agora-ui-foundation/lib/components/tabs");
 var _mobxReact = require("mobx-react");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _useNamespace = require("../../../utilities/useNamespace");
+var _useNamespace = require("agora-ui-foundation/lib/utilities/use-namespace");
+var _react = require("react");
 var _jsxRuntime = require("react/jsx-runtime");
 // import './index.css';
 
@@ -18,17 +21,29 @@ var VideoEffect = exports.VideoEffect = (0, _mobxReact.observer)(function (props
   var tabContents = props.tabContents,
     _props$currentTab = props.currentTab,
     currentTab = _props$currentTab === void 0 ? 'basic' : _props$currentTab,
-    handleActiveTab = props.handleActiveTab;
-  var tabItems = [{
-    label: t('fmt_setting_option_basics'),
-    key: 'basic'
-  }, {
-    label: t('fmt_setting_option_backgrounds'),
-    key: 'virtual-background'
-  }, {
-    label: t('fmt_device_labels_specialeffects'),
-    key: 'beauty-filter'
-  }];
+    handleActiveTab = props.handleActiveTab,
+    _props$isBeautyModeAb = props.isBeautyModeAbilitySupported,
+    isBeautyModeAbilitySupported = _props$isBeautyModeAb === void 0 ? true : _props$isBeautyModeAb,
+    _props$isVirtualBackg = props.isVirtualBackgroundSupported,
+    isVirtualBackgroundSupported = _props$isVirtualBackg === void 0 ? true : _props$isVirtualBackg;
+  var tabItems = (0, _react.useMemo)(function () {
+    var items = [{
+      label: t('fmt_setting_option_basics'),
+      key: 'basic',
+      hidden: false
+    }, {
+      label: t('fmt_setting_option_backgrounds'),
+      key: 'virtual-background',
+      hidden: !isVirtualBackgroundSupported
+    }, {
+      label: t('fmt_device_labels_specialeffects'),
+      key: 'beauty-filter',
+      hidden: !isBeautyModeAbilitySupported
+    }];
+    return items.filter(function (item) {
+      return !item.hidden;
+    });
+  }, [t, isVirtualBackgroundSupported, isBeautyModeAbilitySupported]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: ns.e('tab-wrapper'),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/modules/device-pretest/settings/video-settings-basic.js

@@ -15,7 +15,7 @@ var _store = require("../store");
 var _volumeIndicator = require("agora-ui-foundation/lib/components/volume-indicator");
 var _speakerDetection = require("../audio-preview/speaker-detection");
 var _constant = require("../../../utilities/constant");
-var _useNamespace = require("../../../utilities/useNamespace");
+var _useNamespace = require("agora-ui-foundation/lib/utilities/use-namespace");
 var _jsxRuntime = require("react/jsx-runtime");
 var VideoSettingsBasic4Custom = exports.VideoSettingsBasic4Custom = (0, _mobxReact.observer)(function () {
   var ns = (0, _useNamespace.useNamespace)('video-settings-basic_preview');

package/lib/modules/device-pretest/settings/virtual-background-setting.js

@@ -19,7 +19,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _mobxReact = require("mobx-react");
 var _lodash = require("lodash");
 var _i18n = require("agora-ui-foundation/lib/i18n");
-var _useNamespace = require("../../../utilities/useNamespace");
+var _useNamespace = require("agora-ui-foundation/lib/utilities/use-namespace");
 var _jsxRuntime = require("react/jsx-runtime");
 var VirtualBackgroundSetting = exports.VirtualBackgroundSetting = (0, _mobxReact.observer)(function (_ref) {
   var currentVirtualBackgroundName = _ref.currentVirtualBackgroundName,

package/lib/modules/dialog/components/confirm/index.css

@@ -1,21 +1,3 @@
-.fcr-event-confirm-wrapper.fcr-event-confirm-container {
-  width: 100vw;
-  height: 100vh;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 2000;
-  pointer-events: none;
-}
-
-.fcr-event-confirm-wrapper.fcr-event-confirm-container div {
-  pointer-events: all;
-}
-
-.fcr-confirm-dialog-wrapper {
-  background: #fff;
-}
-
 .fcr-confirm-dialog-wrapper_web {
   background: var(--fcr_mobile_ui_scene_color_popup_fill2);
   border-radius: var(--fcr_cornerradius_xl);

package/lib/modules/dialog/components/confirm/index.d.ts

@@ -1,4 +1,5 @@
 import { ConfirmContentProps } from 'agora-ui-foundation/lib/components/confirm-content';
+import './index.css';
 export declare const ConfirmWindow: ({ id, confirm }: {
     confirm: ConfirmContentProps;
     id: string;

package/lib/modules/dialog/components/confirm/index.js

@@ -27,7 +27,7 @@ var _react = require("@use-gesture/react");
 var _react2 = require("react");
 var _store = require("../../store.base");
 var _env = require("agora-foundation/lib/utilities/env");
-var _platform = require("../../../../utilities/platform");
+require("./index.css");
 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; }
@@ -112,7 +112,7 @@ var ConfirmWindow = exports.ConfirmWindow = (0, _mobxReact.observer)(function (_
     });
   }, [screenBounds]);
   (0, _react2.useEffect)(function () {
-    if ((0, _env.isElectron)() && (0, _platform.isMac)()) {
+    if ((0, _env.isElectron)() && (0, _env.isMac)()) {
       if (confirm.className === 'confirm-mouseover') {
         handleConfirmMouseover();
       } else {

package/lib/modules/dialog/components/dialog-container/index.css

@@ -3,7 +3,6 @@
   position: relative;
   flex: 1;
   width: 100%;
-  /* height: 100%; 此处设置 100% 会影响自适应高度布局 */
   box-sizing: border-box;
   overflow: hidden;
   font-family:
@@ -23,20 +22,20 @@
     'Noto Color Emoji';
   font-size: 14px;
   z-index: 0;
+  /* border: 1px solid var(--fcr_ui_scene_line1); */
+  border-radius: var(--fcr_cornerradius_xl);
 }
 
 ::-webkit-scrollbar {
   display: none;
 }
+
 .fcr-dialog-container_shadow {
   box-shadow: var(--fcr_web_light_dropup);
-  border: 1px solid var(--fcr_ui_scene_line1);
-  border-radius: var(--fcr_cornerradius_xl);
 }
 
 .fcr-dialog-container-header {
   width: 100%;
-  height: 46px;
   display: flex;
   align-items: center;
   -webkit-app-region: drag;

package/lib/modules/dialog/components/dialog-container/index.d.ts

@@ -1,24 +1,9 @@
-import React, { FC } from 'react';
-import { PropsWithChildren } from 'react';
+import { FC } from 'react';
+import './index.css';
 import { FcrUIDialogKey } from '../../../../utilities/constant';
-type DialogContainerProps = PropsWithChildren<{
-    width?: number;
-    height?: number;
+import { FcrUIDialogContainer } from '../normal-window';
+export declare const DialogContainer: FC<FcrUIDialogContainer>;
+export declare const TopButton: (props: {
     dialogKey: FcrUIDialogKey;
-    title?: string | React.ReactNode;
-    onClose?: () => void;
-    closeInterception?: () => boolean;
-    actions?: React.ReactNode;
     dialogId?: string;
-    closable?: boolean;
-    autoHeight?: boolean;
-    showTopIcon?: boolean;
-    style?: React.CSSProperties;
-    maxWidth?: number;
-    maxHeight?: number;
-    minWidth?: number;
-    minHeight?: number;
-    hasSystemShadow?: boolean;
-}>;
-export declare const DialogContainer: FC<DialogContainerProps>;
-export {};
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/modules/dialog/components/dialog-container/index.js

@@ -1,149 +1,97 @@
 "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.object.to-string.js");
-require("core-js/modules/es.string.iterator.js");
-require("core-js/modules/es.weak-map.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.DialogContainer = void 0;
-require("core-js/modules/es.parse-int.js");
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.TopButton = exports.DialogContainer = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _mobxReact = require("mobx-react");
+var _react = require("react");
+require("./index.css");
 var _env = require("agora-foundation/lib/utilities/env");
-var _body = require("./component/body");
-var _reactRnd = require("react-rnd");
-var _levelConfig = require("../../level-config");
+var _store = require("../../store.base");
+var _iconButton = require("agora-ui-foundation/lib/components/icon-button");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-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 DialogContainer = exports.DialogContainer = (0, _mobxReact.observer)(function (_ref) {
-  var width = _ref.width,
-    height = _ref.height,
+var HEADER_HEIGHT = '46px';
+var DialogContainer = exports.DialogContainer = function DialogContainer(_ref) {
+  var actions = _ref.actions,
     title = _ref.title,
-    _onClose = _ref.onClose,
-    children = _ref.children,
-    actions = _ref.actions,
-    autoHeight = _ref.autoHeight,
-    showTopIcon = _ref.showTopIcon,
+    body = _ref.body,
     closable = _ref.closable,
-    style = _ref.style,
-    maxWidth = _ref.maxWidth,
-    maxHeight = _ref.maxHeight,
-    minWidth = _ref.minWidth,
-    minHeight = _ref.minHeight,
-    hasSystemShadow = _ref.hasSystemShadow,
+    _ref$showTopIcon = _ref.showTopIcon,
+    showTopIcon = _ref$showTopIcon === void 0 ? false : _ref$showTopIcon,
     dialogKey = _ref.dialogKey,
-    dialogId = _ref.dialogId;
-  var dialogBody = /*#__PURE__*/(0, _jsxRuntime.jsx)(_body.DialogContainerBody, {
-    title: title,
-    actions: actions,
-    autoHeight: autoHeight !== null && autoHeight !== void 0 ? autoHeight : true,
-    closable: closable !== null && closable !== void 0 ? closable : true,
-    showTopIcon: showTopIcon,
-    onClose: _onClose,
-    hasSystemShadow: hasSystemShadow,
-    dialogKey: dialogKey,
-    dialogId: dialogId,
-    children: children
-  });
-  if ((0, _env.isElectron)()) return dialogBody;
-  var _useState = (0, _react.useState)({
-      width: width || 400,
-      height: height || 160
-    }),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    webSize = _useState2[0],
-    updateSize = _useState2[1];
-  var windowWidth = window.innerWidth;
-  var windowHeight = window.innerHeight;
-  var x = windowWidth / 2 - webSize.width / 2;
-  var y = windowHeight / 2 - webSize.height / 2;
-  var _useState3 = (0, _react.useState)({
-      x: x,
-      y: y
-    }),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    position = _useState4[0],
-    updatePosition = _useState4[1];
-
-  // 应用尺寸限制的辅助函数
-  var constrainSize = function constrainSize(newSize) {
-    var constrainedWidth = newSize.width;
-    var constrainedHeight = newSize.height;
-
-    // 应用最小尺寸限制
-    if (minWidth && constrainedWidth < minWidth) {
-      constrainedWidth = minWidth;
-    }
-    if (minHeight && constrainedHeight < minHeight) {
-      constrainedHeight = minHeight;
-    }
-
-    // 应用最大尺寸限制
-    if (maxWidth && constrainedWidth > maxWidth) {
-      constrainedWidth = maxWidth;
-    }
-    if (maxHeight && constrainedHeight > maxHeight) {
-      constrainedHeight = maxHeight;
-    }
-    return {
-      width: constrainedWidth,
-      height: constrainedHeight
-    };
+    _ref$dialogId = _ref.dialogId,
+    dialogId = _ref$dialogId === void 0 ? '' : _ref$dialogId;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    handleDialogClose = _useContext.handleDialogClose;
+  var onClose = (0, _react.useCallback)(function () {
+    handleDialogClose(dialogId);
+  }, [dialogId]);
+  var hasTitleOrActions = title || actions;
+  var contentStyle = {
+    height: "calc(100% - ".concat(hasTitleOrActions ? HEADER_HEIGHT : '0px', " )")
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRnd.Rnd, {
-    dragHandleClassName: 'fcr-dialog-container-header',
-    style: _objectSpread({
-      position: 'absolute',
-      touchAction: 'none',
-      display: 'flex',
-      flexDirection: 'column',
-      zIndex: _levelConfig.WEB_DIALOG_LAYER.NORMAL_DIALOG
-    }, style),
-    size: webSize,
-    position: position,
-    minWidth: minWidth,
-    minHeight: minHeight,
-    maxWidth: maxWidth,
-    maxHeight: maxHeight,
-    bounds: "window",
-    onDragStop: function onDragStop(e, d) {
-      updatePosition({
-        x: d.x,
-        y: d.y
-      });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])('fcr-dialog-container', {
+      'fcr-dialog-container_shadow': !(0, _env.isElectron)()
+    }),
+    onClick: function onClick(e) {
+      return e.stopPropagation();
     },
-    onResizeStop: function onResizeStop(e, direction, ref, delta, position) {
-      var newSize = constrainSize({
-        width: parseInt(ref.style.width),
-        height: parseInt(ref.style.height)
-      });
-      updateSize(newSize);
-      updatePosition(position);
+    children: [hasTitleOrActions ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
+      className: "fcr-dialog-container-header",
+      style: {
+        height: HEADER_HEIGHT
+      },
+      children: [actions && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          flex: 1
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+        children: title
+      }), actions && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-dialog-container-actions",
+        children: [actions, showTopIcon && (0, _env.isElectron)() && /*#__PURE__*/(0, _jsxRuntime.jsx)(TopButton, {
+          dialogKey: dialogKey,
+          dialogId: dialogId
+        })]
+      })]
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
+      className: "fcr-dialog-container-content",
+      style: contentStyle,
+      children: body
+    }), closable ? /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+      className: "fcr-dialog-container-close",
+      onClick: onClose,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: "\xD7"
+      })
+    }) : null]
+  });
+};
+var TopButton = exports.TopButton = function TopButton(props) {
+  var dialogKey = props.dialogKey,
+    dialogId = props.dialogId;
+  var _useContext2 = (0, _react.useContext)(_store.StoreContext),
+    getDialogWindow = _useContext2.getDialogWindow;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isAlwaysOnTop = _useState2[0],
+    setIsAlwaysOnTop = _useState2[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
+    onClick: function onClick() {
+      var browserWindow = getDialogWindow(dialogKey);
+      browserWindow.setAlwaysOnTop(!isAlwaysOnTop, 'screen-saver');
+      setIsAlwaysOnTop(!isAlwaysOnTop);
     },
-    children: dialogBody
+    icon: isAlwaysOnTop ? _type.FcrIconType.FCR_UNTOP : _type.FcrIconType.FCR_TOP,
+    className: "frc-window-header__icon fcr-toggle-window-header__icon fcr-no-drag",
+    iconColors: {
+      iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+    }
   });
-});
+};

package/lib/modules/dialog/components/normal-window/index.d.ts

@@ -1,24 +1,12 @@
-import { FcrUIDialogKey } from '../../../../utilities/constant';
 import { FC } from 'react';
-type FcrUIDialogProps = {
+import { FcrUIDialogKey } from '../../../../utilities/constant';
+export interface FcrUIDialogContainer {
+    title?: string | React.ReactNode;
+    actions?: React.ReactNode;
+    closable?: boolean;
+    showTopIcon?: boolean;
     dialogKey: FcrUIDialogKey;
     dialogId: string;
     body: React.ReactNode;
-    closable?: boolean;
-    actions?: React.ReactNode;
-    title?: string | boolean;
-    header?: React.ReactNode;
-    headerStyle?: React.CSSProperties;
-    bodyStyle?: React.CSSProperties;
-    autoHeight?: boolean;
-    width?: number;
-    height?: number;
-    minWidth?: number;
-    minHeight?: number;
-    maxWidth?: number;
-    maxHeight?: number;
-    hasSystemShadow?: boolean;
-    showTopIcon?: boolean;
-};
-export declare const NormalWindow: FC<FcrUIDialogProps>;
-export {};
+}
+export declare const NormalWindow: FC<FcrUIDialogContainer>;

package/lib/modules/dialog/components/normal-window/index.js

@@ -12,45 +12,25 @@ var _env = require("agora-foundation/lib/utilities/env");
 var _reactDom = require("react-dom");
 var _dialogContainer = require("../dialog-container");
 var _jsxRuntime = require("react/jsx-runtime");
-var NormalWindow = exports.NormalWindow = (0, _mobxReact.observer)(function (_ref) {
-  var dialogKey = _ref.dialogKey,
-    dialogId = _ref.dialogId,
-    body = _ref.body,
-    title = _ref.title,
-    actions = _ref.actions,
-    closable = _ref.closable,
-    autoHeight = _ref.autoHeight,
-    width = _ref.width,
-    height = _ref.height,
-    header = _ref.header,
-    minWidth = _ref.minWidth,
-    minHeight = _ref.minHeight,
-    maxWidth = _ref.maxWidth,
-    maxHeight = _ref.maxHeight,
-    hasSystemShadow = _ref.hasSystemShadow,
-    showTopIcon = _ref.showTopIcon;
+var NormalWindow = exports.NormalWindow = (0, _mobxReact.observer)(function (props) {
+  var dialogKey = props.dialogKey,
+    dialogId = props.dialogId,
+    _props$closable = props.closable,
+    closable = _props$closable === void 0 ? true : _props$closable,
+    actions = props.actions,
+    title = props.title,
+    showTopIcon = props.showTopIcon,
+    body = props.body;
   var _useContext = (0, _react.useContext)(_store.StoreContext),
-    getDialogRootNode = _useContext.getDialogRootNode,
-    handleDialogClose = _useContext.handleDialogClose;
-  var onClose = (0, _react.useCallback)(function () {
-    handleDialogClose(dialogId);
-  }, [dialogId]);
+    getDialogRootNode = _useContext.getDialogRootNode;
   var container = /*#__PURE__*/(0, _jsxRuntime.jsx)(_dialogContainer.DialogContainer, {
-    title: title || header,
-    dialogKey: dialogKey,
+    title: title,
     actions: actions,
-    onClose: onClose,
     closable: closable,
-    width: width,
-    height: height,
-    minWidth: minWidth,
-    minHeight: minHeight,
-    maxWidth: maxWidth,
-    maxHeight: maxHeight,
-    autoHeight: autoHeight,
-    hasSystemShadow: hasSystemShadow,
     showTopIcon: showTopIcon,
-    children: body
+    dialogKey: dialogKey,
+    dialogId: dialogId,
+    body: body
   });
   if ((0, _env.isElectron)()) {
     var dialogRoot = getDialogRootNode(dialogKey, dialogId);

package/lib/modules/dialog/dialogConfig/browser.d.ts

@@ -0,0 +1,12 @@
+import { ResizeEnable } from 'react-rnd';
+export interface FcrUIWebDialogConfig {
+    width?: number;
+    height?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    minWidth?: number;
+    minHeight?: number;
+    enableResizing?: ResizeEnable;
+    onlyTitleCanTriggerDrag?: boolean;
+}
+export declare const defaultBrowserDialogConfig: FcrUIWebDialogConfig;

package/lib/modules/dialog/dialogConfig/browser.js

@@ -0,0 +1,11 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultBrowserDialogConfig = void 0;
+var defaultBrowserDialogConfig = exports.defaultBrowserDialogConfig = {
+  enableResizing: false,
+  onlyTitleCanTriggerDrag: true
+};

package/lib/modules/dialog/dialogConfig/electron.d.ts

@@ -0,0 +1,4 @@
+export type FcrUIElectronDialogConfig = {
+    needResizeObserver?: boolean;
+} & Electron.BrowserWindowConstructorOptions;
+export declare const defaultElectronWindowConfig: FcrUIElectronDialogConfig;

package/lib/modules/dialog/dialogConfig/electron.js

@@ -0,0 +1,15 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultElectronWindowConfig = void 0;
+var defaultElectronWindowConfig = exports.defaultElectronWindowConfig = {
+  transparent: true,
+  frame: false,
+  resizable: false,
+  needResizeObserver: true,
+  hasShadow: true,
+  fullscreen: false
+};

package/lib/modules/dialog/dialogs/annotation-mask/index.d.ts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from 'react';
+import { FcrUIDialogProps } from '../../type';
+import { FcrUIElectronDialogConfig } from '../../dialogConfig/electron';
+export declare const title = "Annotation mask";
+export declare const electronWindowConfig: FcrUIElectronDialogConfig;
+type AnnotationMaskProps = PropsWithChildren<FcrUIDialogProps>;
+export declare const AnnotationMask: FC<AnnotationMaskProps>;
+export {};

package/lib/modules/dialog/dialogs/annotation-mask/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.title = exports.electronWindowConfig = exports.AnnotationMask = void 0;
+var _react = require("react");
+var _mobxReact = require("mobx-react");
+var _store = require("../../store.base");
+var _reactDom = require("react-dom");
+var title = exports.title = 'Annotation mask';
+var electronWindowConfig = exports.electronWindowConfig = {
+  y: 0,
+  x: 0,
+  width: 200,
+  height: 200,
+  maximizable: false,
+  minimizable: false,
+  hasShadow: false,
+  useContentSize: true,
+  resizable: false,
+  transparent: true,
+  backgroundColor: '#00000000',
+  frame: false,
+  hiddenInMissionControl: true,
+  skipTaskbar: true,
+  title: title,
+  // type: 'panel',
+  enableLargerThanScreen: true,
+  needResizeObserver: false
+};
+var AnnotationMask = exports.AnnotationMask = (0, _mobxReact.observer)(function (_ref) {
+  var dialogKey = _ref.dialogKey,
+    dialogId = _ref.dialogId,
+    children = _ref.children;
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
+    getDialogRootNode = _useContext.getDialogRootNode;
+  var dialogRoot = getDialogRootNode(dialogKey, dialogId);
+  return /*#__PURE__*/(0, _reactDom.createPortal)(children, dialogRoot);
+});