@nocobase/flow-engine 2.1.0-beta.9 → 2.2.0-alpha.1

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");
@@ -48,6 +49,22 @@ var import_utils = require("../../../../utils");
 var import_hooks = require("../../../../hooks");
 var import_SwitchWithTitle = require("../component/SwitchWithTitle");
 var import_SelectWithTitle = require("../component/SelectWithTitle");
+const findExtraMenuItemByKey = /* @__PURE__ */ __name((items, targetKey) => {
+  var _a;
+  for (const item of items) {
+    const itemKey = String((item == null ? void 0 : item.key) ?? "");
+    if (itemKey === targetKey) {
+      return item;
+    }
+    if ((_a = item.children) == null ? void 0 : _a.length) {
+      const matched = findExtraMenuItemByKey(item.children, targetKey);
+      if (matched) {
+        return matched;
+      }
+    }
+  }
+  return void 0;
+}, "findExtraMenuItemByKey");
 const walkSubModels = /* @__PURE__ */ __name((rootModel, options, cb) => {
   const maxDepth = options.maxDepth;
   const arrayLimit = typeof options.arrayLimit === "number" ? options.arrayLimit : Number.POSITIVE_INFINITY;
@@ -149,13 +166,39 @@ 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 removeExtraMenuItemClickHandlers = /* @__PURE__ */ __name((item) => {
+  const { onClick: _onClick, children, ...rest } = item;
+  return {
+    ...rest,
+    children: (children == null ? void 0 : children.length) ? children.map(removeExtraMenuItemClickHandlers) : void 0
+  };
+}, "removeExtraMenuItemClickHandlers");
 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]);
@@ -164,41 +207,70 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
   const [visible, setVisible] = (0, import_react.useState)(false);
   const [refreshTick, setRefreshTick] = (0, import_react.useState)(0);
   const [extraMenuItems, setExtraMenuItems] = (0, import_react.useState)([]);
+  const [extraMenuItemsLoaded, setExtraMenuItemsLoaded] = (0, import_react.useState)(false);
   const [configurableFlowsAndSteps, setConfigurableFlowsAndSteps] = (0, import_react.useState)([]);
   const [isLoading, setIsLoading] = (0, import_react.useState)(true);
+  const commonExtras = (0, import_react.useMemo)(
+    () => extraMenuItems.filter((it) => it.group === "common-actions").sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0)),
+    [extraMenuItems]
+  );
+  const hasCommonActions = showCopyUidButton || showDeleteButton || commonExtras.length > 0;
+  const shouldDeferConfigLoading = flattenSubMenus && menuLevels > 1 && hasCommonActions;
+  const shouldWaitForCommonActionProbe = flattenSubMenus && menuLevels > 1 && !showCopyUidButton && !showDeleteButton && !extraMenuItemsLoaded;
+  const canRenderIcon = hasCommonActions || !isLoading && configurableFlowsAndSteps.length > 0;
   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;
     const loadExtras = /* @__PURE__ */ __name(async () => {
       var _a;
-      const allExtras = [];
-      const modelsToProcess = [];
-      walkSubModels(model, { maxDepth: menuLevels, arrayLimit: 50, mode: "stack" }, (targetModel, { modelKey }) => {
-        modelsToProcess.push({ model: targetModel, modelKey });
-      });
-      for (const { model: targetModel, modelKey } of modelsToProcess) {
-        const Cls = targetModel.constructor;
-        const extras = await ((_a = Cls.getExtraMenuItems) == null ? void 0 : _a.call(Cls, targetModel, t));
-        if (extras == null ? void 0 : extras.length) {
-          allExtras.push(
-            ...extras.map((item) => ({
-              ...item,
-              key: modelKey ? `${modelKey}:${item.key}` : item.key
-            }))
-          );
+      setExtraMenuItemsLoaded(false);
+      try {
+        const allExtras = [];
+        const modelsToProcess = [];
+        walkSubModels(model, { maxDepth: menuLevels, arrayLimit: 50, mode: "stack" }, (targetModel, { modelKey }) => {
+          modelsToProcess.push({ model: targetModel, modelKey });
+        });
+        for (const { model: targetModel, modelKey } of modelsToProcess) {
+          const Cls = targetModel.constructor;
+          const extras = await ((_a = Cls.getExtraMenuItems) == null ? void 0 : _a.call(Cls, targetModel, t));
+          if (extras == null ? void 0 : extras.length) {
+            allExtras.push(
+              ...extras.map((item) => ({
+                ...item,
+                key: modelKey ? `${modelKey}:${item.key}` : item.key
+              }))
+            );
+          }
+        }
+        if (!mounted) {
+          return;
         }
-      }
-      if (mounted) {
         const seen = /* @__PURE__ */ new Set();
         const dedupedExtras = allExtras.filter((item) => {
           if (seen.has(`${item.key}`)) {
@@ -208,15 +280,22 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
           return true;
         });
         setExtraMenuItems(dedupedExtras);
+      } catch (error) {
+        console.error("Failed to load extra menu items:", error);
+        if (mounted) {
+          setExtraMenuItems([]);
+        }
+      } finally {
+        if (mounted) {
+          setExtraMenuItemsLoaded(true);
+        }
       }
     }, "loadExtras");
-    if (visible) {
-      loadExtras();
-    }
+    loadExtras();
     return () => {
       mounted = false;
     };
-  }, [model, menuLevels, t, refreshTick, visible]);
+  }, [model, menuLevels, t, refreshTick]);
   const copyUidToClipboard = (0, import_react.useCallback)(
     async (uid) => {
       var _a;
@@ -353,7 +432,10 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
         handleCopyPopupUid(cleanKey);
         return;
       }
-      const extra = extraMenuItems.find((it) => (it == null ? void 0 : it.key) === originalKey || (it == null ? void 0 : it.key) === cleanKey);
+      const extra = findExtraMenuItemByKey(extraMenuItems, originalKey) || findExtraMenuItemByKey(extraMenuItems, cleanKey);
+      if (extra == null ? void 0 : extra.disabled) {
+        return;
+      }
       if (extra == null ? void 0 : extra.onClick) {
         closeDropdown();
         extra.onClick();
@@ -458,7 +540,7 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
         return [];
       }
     },
-    []
+    [t]
   );
   const getConfigurableFlowsAndSteps = (0, import_react.useCallback)(async () => {
     const result = [];
@@ -496,20 +578,47 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
     };
   }, [model, menuLevels, refreshTick]);
   (0, import_react.useEffect)(() => {
+    let mounted = true;
     const loadConfigurableFlowsAndSteps = /* @__PURE__ */ __name(async () => {
       setIsLoading(true);
+      if (shouldDeferConfigLoading) {
+        setConfigurableFlowsAndSteps([]);
+      }
       try {
         const flows = await getConfigurableFlowsAndSteps();
-        setConfigurableFlowsAndSteps(flows);
+        if (mounted) {
+          setConfigurableFlowsAndSteps(flows);
+        }
       } catch (error) {
         console.error("Failed to load configurable flows and steps:", error);
-        setConfigurableFlowsAndSteps([]);
+        if (mounted) {
+          setConfigurableFlowsAndSteps([]);
+        }
       } finally {
-        setIsLoading(false);
+        if (mounted) {
+          setIsLoading(false);
+        }
       }
     }, "loadConfigurableFlowsAndSteps");
+    if (shouldWaitForCommonActionProbe) {
+      setConfigurableFlowsAndSteps([]);
+      setIsLoading(false);
+      return () => {
+        mounted = false;
+      };
+    }
+    if (!visible && shouldDeferConfigLoading) {
+      setConfigurableFlowsAndSteps([]);
+      setIsLoading(false);
+      return () => {
+        mounted = false;
+      };
+    }
     loadConfigurableFlowsAndSteps();
-  }, [getConfigurableFlowsAndSteps, refreshTick]);
+    return () => {
+      mounted = false;
+    };
+  }, [getConfigurableFlowsAndSteps, refreshTick, shouldDeferConfigLoading, shouldWaitForCommonActionProbe, visible]);
   const menuItems = (0, import_react.useMemo)(() => {
     const items = [];
     const keyCounter = /* @__PURE__ */ new Map();
@@ -634,16 +743,15 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
       }
     }
     return items;
-  }, [configurableFlowsAndSteps, disabledIconColor, flattenSubMenus, t]);
+  }, [configurableFlowsAndSteps, disabledIconColor, flattenSubMenus, message, model, t]);
   const finalMenuItems = (0, import_react.useMemo)(() => {
     const items = [...menuItems];
-    const commonExtras = extraMenuItems.filter((it) => it.group === "common-actions").sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0));
     if (showCopyUidButton || showDeleteButton || commonExtras.length > 0) {
       items.push({
         type: "divider"
       });
       if (commonExtras.length > 0) {
-        items.push(...commonExtras);
+        items.push(...commonExtras.map(removeExtraMenuItemClickHandlers));
       }
       if (showCopyUidButton && model.uid) {
         items.push({
@@ -659,9 +767,8 @@ const DefaultSettingsIcon = /* @__PURE__ */ __name(({
       }
     }
     return items;
-  }, [menuItems, showCopyUidButton, showDeleteButton, model.uid, model.destroy, t, extraMenuItems]);
-  const hasExtras = extraMenuItems.some((it) => it.group === "common-actions");
-  if (isLoading || configurableFlowsAndSteps.length === 0 && !showDeleteButton && !showCopyUidButton && !hasExtras) {
+  }, [menuItems, showCopyUidButton, showDeleteButton, commonExtras, model.uid, model.destroy, t]);
+  if (!canRenderIcon) {
     return null;
   }
   if (!model || !model.uid) {
@@ -671,6 +778,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;
     /**
@@ -42,68 +43,47 @@ interface ModelProvidedProps {
      * Extra toolbar items to add to this context menu instance
      */
     extraToolbarItems?: ToolbarItemConfig[];
-    /**
-     * @default 'inside'
-     */
-    toolbarPosition?: 'inside' | 'above' | 'below';
-}
-interface ModelByIdProps {
-    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[];
+    showDynamicFlowsEditor?: boolean;
     /**
      * @default 'inside'
      */
-    toolbarPosition?: 'inside' | 'above' | 'below';
+    toolbarPosition?: ToolbarPosition;
+}
+interface ModelProvidedProps extends BaseFloatContextMenuProps {
+    model: FlowModel<any>;
+}
+interface ModelByIdProps extends BaseFloatContextMenuProps {
+    uid: string;
+    modelClassName: string;
 }
 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 额外的工具栏项目，仅应用于此实例
  */