@nocobase/flow-engine 2.1.0-beta.11 → 2.1.0-beta.12

package/lib/components/FlowModelRenderer.d.ts

@@ -19,7 +19,7 @@ export interface FlowModelRendererProps {
         showBackground?: boolean;
         showBorder?: boolean;
         showDragHandle?: boolean;
-        /** 自定义工具栏样式 */
+        /** 自定义工具栏样式，`top/left/right/bottom` 会作为 portal overlay 的 inset 使用 */
         style?: React.CSSProperties;
         /**
          * @default 'inside'

package/lib/components/settings/wrappers/contextual/DefaultSettingsIcon.d.ts

@@ -6,6 +6,7 @@
  * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
+import type { DropdownProps } from 'antd';
 import React from 'react';
 import { FlowModel } from '../../../../models';
 /**
@@ -18,6 +19,8 @@ interface DefaultSettingsIconProps {
     showCopyUidButton?: boolean;
     menuLevels?: number;
     flattenSubMenus?: boolean;
+    onDropdownVisibleChange?: (open: boolean) => void;
+    getPopupContainer?: DropdownProps['getPopupContainer'];
     [key: string]: any;
 }
 export declare const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps>;

package/lib/components/settings/wrappers/contextual/DefaultSettingsIcon.js

@@ -41,6 +41,7 @@ __export(DefaultSettingsIcon_exports, {
 });
 module.exports = __toCommonJS(DefaultSettingsIcon_exports);
 var import_icons = require("@ant-design/icons");
+var import_css = require("@emotion/css");
 var import_antd = require("antd");
 var import_react = __toESM(require("react"));
 var import_models = require("../../../../models");
@@ -149,13 +150,32 @@ const MenuLabelItem = /* @__PURE__ */ __name(({ title, uiMode, itemProps }) => {
   }
   return /* @__PURE__ */ import_react.default.createElement("span", { style: { display: "inline-flex", alignItems: "center", gap: 6 } }, content, /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: disabledReason, placement: "right", destroyTooltipOnHide: true }, /* @__PURE__ */ import_react.default.createElement(import_icons.QuestionCircleOutlined, { style: { color: disabledIconColor } })));
 }, "MenuLabelItem");
+const TOOLBAR_ICONS_SELECTOR = ".nb-toolbar-container-icons";
+const TOOLBAR_CONTAINER_SELECTOR = ".nb-toolbar-container";
+const TOOLBAR_DROPDOWN_OVERLAY_CLASS = import_css.css`
+  width: max-content;
+  min-width: max-content;
+
+  .ant-dropdown-menu {
+    width: max-content;
+    min-width: max-content;
+  }
+`;
+const getToolbarPopupContainer = /* @__PURE__ */ __name((triggerNode) => {
+  if (!triggerNode) {
+    return null;
+  }
+  return triggerNode.closest(TOOLBAR_ICONS_SELECTOR) || triggerNode.closest(TOOLBAR_CONTAINER_SELECTOR);
+}, "getToolbarPopupContainer");
 const DefaultSettingsIcon = /* @__PURE__ */ __name(({
   model,
   showDeleteButton = true,
   showCopyUidButton = true,
   menuLevels = 1,
   // 默认一级菜单
-  flattenSubMenus = true
+  flattenSubMenus = true,
+  onDropdownVisibleChange,
+  getPopupContainer
 }) => {
   const { message } = import_antd.App.useApp();
   const t = (0, import_react.useMemo)(() => (0, import_utils.getT)(model), [model]);
@@ -168,14 +188,30 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
   const [isLoading, setIsLoading] = (0, import_react.useState)(true);
   const closeDropdown = (0, import_react.useCallback)(() => {
     setVisible(false);
-  }, []);
-  const handleOpenChange = (0, import_react.useCallback)((nextOpen, info) => {
-    if (info.source === "trigger" || nextOpen) {
-      (0, import_react.startTransition)(() => {
-        setVisible(nextOpen);
-      });
-    }
-  }, []);
+    onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange(false);
+  }, [onDropdownVisibleChange]);
+  const resolvePopupContainer = (0, import_react.useCallback)(
+    (triggerNode) => {
+      return getToolbarPopupContainer(triggerNode) || (getPopupContainer == null ? void 0 : getPopupContainer(triggerNode)) || (triggerNode == null ? void 0 : triggerNode.parentElement) || document.body;
+    },
+    [getPopupContainer]
+  );
+  const handleOpenChange = (0, import_react.useCallback)(
+    (nextOpen, info) => {
+      if (info.source === "trigger" || nextOpen) {
+        (0, import_react.startTransition)(() => {
+          setVisible(nextOpen);
+        });
+        onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange(nextOpen);
+      }
+    },
+    [onDropdownVisibleChange]
+  );
+  (0, import_react.useEffect)(() => {
+    return () => {
+      onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange(false);
+    };
+  }, [onDropdownVisibleChange]);
   const dropdownMaxHeight = (0, import_hooks.useNiceDropdownMaxHeight)([visible]);
   (0, import_react.useEffect)(() => {
     let mounted = true;
@@ -671,6 +707,9 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
   return /* @__PURE__ */ import_react.default.createElement(
     import_antd.Dropdown,
     {
+      getPopupContainer: resolvePopupContainer,
+      overlayClassName: TOOLBAR_DROPDOWN_OVERLAY_CLASS,
+      overlayStyle: { width: "max-content", minWidth: "max-content" },
       onOpenChange: handleOpenChange,
       open: visible,
       menu: {

package/lib/components/settings/wrappers/contextual/FlowsFloatContextMenu.d.ts

@@ -9,13 +9,14 @@
 import React from 'react';
 import { FlowModel } from '../../../../models';
 import { ToolbarItemConfig } from '../../../../types';
-interface ModelProvidedProps {
-    model: FlowModel<any>;
+type ToolbarPosition = 'inside' | 'above' | 'below';
+interface BaseFloatContextMenuProps {
     children?: React.ReactNode;
     enabled?: boolean;
     showDeleteButton?: boolean;
     showCopyUidButton?: boolean;
     containerStyle?: React.CSSProperties;
+    /** 自定义工具栏样式，`top/left/right/bottom` 会作为 portal overlay 的 inset 使用。 */
     toolbarStyle?: React.CSSProperties;
     className?: string;
     /**
@@ -45,65 +46,40 @@ interface ModelProvidedProps {
     /**
      * @default 'inside'
      */
-    toolbarPosition?: 'inside' | 'above' | 'below';
+    toolbarPosition?: ToolbarPosition;
+}
+interface ModelProvidedProps extends BaseFloatContextMenuProps {
+    model: FlowModel<any>;
 }
-interface ModelByIdProps {
+interface ModelByIdProps extends BaseFloatContextMenuProps {
     uid: string;
     modelClassName: string;
-    children?: React.ReactNode;
-    enabled?: boolean;
-    showDeleteButton?: boolean;
-    showCopyUidButton?: boolean;
-    containerStyle?: React.CSSProperties;
-    className?: string;
-    /**
-     * @default true
-     */
-    showBorder?: boolean;
-    /**
-     * @default true
-     */
-    showBackground?: boolean;
-    /**
-     * @default false
-     */
-    showTitle?: boolean;
-    /**
-     * Settings menu levels: 1=current model only (default), 2=include sub-models
-     */
-    settingsMenuLevel?: number;
-    /**
-     * Extra toolbar items to add to this context menu instance
-     */
-    extraToolbarItems?: ToolbarItemConfig[];
-    /**
-     * @default 'inside'
-     */
-    toolbarPosition?: 'inside' | 'above' | 'below';
 }
 type FlowsFloatContextMenuProps = ModelProvidedProps | ModelByIdProps;
 /**
- * FlowsFloatContextMenu组件 - 悬浮配置图标组件
+ * FlowsFloatContextMenu组件 - 悬浮配置工具栏组件
  *
  * 功能特性：
  * - 鼠标悬浮显示右上角配置图标
  * - 点击图标显示配置菜单
  * - 支持删除功能
  * - Wrapper 模式支持
- * - 使用与 NocoBase x-settings 一致的样式
- * - 按flow分组显示steps
+ * - 使用 portal overlay 避免被宿主或祖先裁剪
+ * - 设置菜单与工具栏共享同一个 popup 容器
  *
  * 支持两种使用方式：
- * 1. 直接提供model: <FlowsFloatContextMenu model={myModel}>{children}</FlowsFloatContextMenu>
- * 2. 通过uid和modelClassName获取model: <FlowsFloatContextMenu uid="model1" modelClassName="MyModel">{children}</FlowsFloatContextMenu>
+ * 1. 直接提供 model: `<FlowsFloatContextMenu model={myModel}>{children}</FlowsFloatContextMenu>`
+ * 2. 通过 uid 和 modelClassName 获取 model:
+ *    `<FlowsFloatContextMenu uid="model1" modelClassName="MyModel">{children}</FlowsFloatContextMenu>`
  *
  * @param props.children 子组件，必须提供
- * @param props.enabled 是否启用悬浮菜单，默认为true
- * @param props.showDeleteButton 是否显示删除按钮，默认为true
- * @param props.showCopyUidButton 是否显示复制UID按钮，默认为true
+ * @param props.enabled 是否启用悬浮菜单，默认为 true
+ * @param props.showDeleteButton 是否显示删除按钮，默认为 true
+ * @param props.showCopyUidButton 是否显示复制 UID 按钮，默认为 true
  * @param props.containerStyle 容器自定义样式
+ * @param props.toolbarStyle 工具栏自定义样式；`top/left/right/bottom` 会作为 portal overlay 的 inset 使用
  * @param props.className 容器自定义类名
- * @param props.showTitle 是否在边框左上角显示模型title，默认为false
+ * @param props.showTitle 是否在边框左上角显示模型 title，默认为 false
  * @param props.settingsMenuLevel 设置菜单层级：1=仅当前模型(默认)，2=包含子模型
  * @param props.extraToolbarItems 额外的工具栏项目，仅应用于此实例
  */