@nocobase/flow-engine 2.1.0-alpha.3 → 2.1.0-alpha.31

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

@@ -41,6 +41,7 @@ __export(FlowsFloatContextMenu_exports, {
 });
 module.exports = __toCommonJS(FlowsFloatContextMenu_exports);
 var import_react = __toESM(require("react"));
+var import_react_dom = require("react-dom");
 var import_antd = require("antd");
 var import_css = require("@emotion/css");
 var import_hooks = require("../../../../hooks");
@@ -48,238 +49,266 @@ var import_provider = require("../../../../provider");
 var import_utils = require("../../../../utils");
 var import__ = require("../../../..");
 var import_reactive = require("../../../../reactive");
-const detectButtonInDOM = /* @__PURE__ */ __name((container) => {
-  if (!container) return false;
-  const directChildren = container.children;
-  for (let i = 0; i < directChildren.length; i++) {
-    const child = directChildren[i];
-    if (child.tagName === "BUTTON" || child.getAttribute("role") === "button" || child.classList.contains("ant-btn")) {
-      return true;
-    }
-  }
-  return false;
-}, "detectButtonInDOM");
-const renderToolbarItems = /* @__PURE__ */ __name((model, showDeleteButton, showCopyUidButton, flowEngine, settingsMenuLevel, extraToolbarItems) => {
-  var _a, _b;
-  const toolbarItems = ((_b = (_a = flowEngine == null ? void 0 : flowEngine.flowSettings) == null ? void 0 : _a.getToolbarItems) == null ? void 0 : _b.call(_a)) || [];
-  const allToolbarItems = [...toolbarItems, ...extraToolbarItems || []];
-  allToolbarItems.sort((a, b) => (a.sort || 0) - (b.sort || 0)).reverse();
-  return allToolbarItems.filter((itemConfig) => {
-    return itemConfig.visible ? itemConfig.visible(model) : true;
-  }).map((itemConfig) => {
-    const ItemComponent = itemConfig.component;
-    if (itemConfig.key === "settings-menu") {
-      return /* @__PURE__ */ import_react.default.createElement(
-        ItemComponent,
-        {
-          key: itemConfig.key,
-          model,
-          id: model.uid,
-          showDeleteButton,
-          showCopyUidButton,
-          menuLevels: settingsMenuLevel
-        }
-      );
-    }
-    return /* @__PURE__ */ import_react.default.createElement(ItemComponent, { key: itemConfig.key, model });
-  });
-}, "renderToolbarItems");
+var import_useFloatToolbarPortal = require("./useFloatToolbarPortal");
+var import_useFloatToolbarVisibility = require("./useFloatToolbarVisibility");
 const TOOLBAR_ITEM_WIDTH = 19;
-const toolbarPositionToCSS = {
-  inside: `
-    top: 2px;
-  `,
-  above: `
-    top: 0px;
-    transform: translateY(-100%);
-    padding-bottom: 0px;
-    margin-bottom: -2px;
-  `,
-  below: `
-    top: 0px;
-    transform: translateY(100%);
-    padding-top: 2px;
-    margin-top: -2px;
-  `
-};
-const floatContainerStyles = /* @__PURE__ */ __name(({ showBackground, showBorder, ctx, toolbarPosition = "inside", toolbarCount }) => import_css.css`
+const DEFAULT_POPUP_BASE_Z_INDEX = 1e3;
+const getFloatMenuInstanceId = /* @__PURE__ */ __name((model) => {
+  if (!model) {
+    return "";
+  }
+  const forkId = (model == null ? void 0 : model.isFork) ? model == null ? void 0 : model.forkId : void 0;
+  return forkId == null || forkId === "" ? String(model.uid || "") : `${String(model.uid || "")}::${String(forkId)}`;
+}, "getFloatMenuInstanceId");
+const hostContainerStyles = import_css.css`
   position: relative;
 
-  /* 当检测到button时使用inline-block */
   &.has-button-child {
     display: inline-block;
   }
+`;
+const toolbarPositionClassNames = {
+  inside: "nb-toolbar-position-inside",
+  above: "nb-toolbar-position-above",
+  below: "nb-toolbar-position-below"
+};
+const toolbarContainerStyles = /* @__PURE__ */ __name(({
+  showBackground,
+  showBorder,
+  ctx,
+  toolbarZIndex
+}) => import_css.css`
+  z-index: ${toolbarZIndex};
+  opacity: 0;
+  pointer-events: none;
+  overflow: visible;
+  transition: opacity 0.12s ease;
+  background: ${showBackground ? "var(--colorBgSettingsHover)" : "transparent"};
+  border: ${showBorder ? "2px solid var(--colorBorderSettingsHover)" : "none"};
+  border-radius: ${ctx.themeToken.borderRadiusLG}px;
 
-  /* 正常的hover行为 - 添加延迟显示 */
-  &:hover > .nb-toolbar-container {
+  &.nb-toolbar-visible {
     opacity: 1;
     transition-delay: 0.1s;
+  }
 
-    .nb-toolbar-container-icons {
-      display: block;
-    }
+  &.nb-toolbar-portal {
+    top: 0;
+    left: 0;
   }
 
-  /* 当有.hide-parent-menu类时隐藏菜单 */
-  &.hide-parent-menu > .nb-toolbar-container {
-    opacity: 0 !important;
+  &.nb-toolbar-portal-fixed {
+    position: fixed;
   }
 
-  > .nb-toolbar-container {
+  &.nb-toolbar-portal-absolute {
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 999;
-    opacity: 0;
-    background: ${showBackground ? "var(--colorBgSettingsHover)" : ""};
-    border: ${showBorder ? "2px solid var(--colorBorderSettingsHover)" : ""};
-    border-radius: ${ctx.themeToken.borderRadiusLG}px;
+  }
+
+  &.nb-in-template {
+    background: var(--colorTemplateBgSettingsHover);
+  }
+
+  > .nb-toolbar-container-title {
     pointer-events: none;
-    min-width: ${TOOLBAR_ITEM_WIDTH * toolbarCount}px;
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    height: 16px;
+    padding: 0;
+    font-size: 12px;
+    line-height: 16px;
+    border-bottom-right-radius: 2px;
+    border-radius: 2px;
 
-    &.nb-in-template {
-      background: var(--colorTemplateBgSettingsHover);
+    .title-tag {
+      display: inline-flex;
+      padding: 0 3px;
+      border-radius: 2px;
+      background: var(--colorSettings);
+      color: #fff;
     }
+  }
 
-    > .nb-toolbar-container-title {
-      pointer-events: none;
-      position: absolute;
-      font-size: 12px;
-      padding: 0;
-      line-height: 16px;
-      height: 16px;
-      border-bottom-right-radius: 2px;
-      border-radius: 2px;
-      top: 2px;
-      left: 2px;
-      display: flex;
-      align-items: center;
-      gap: 4px;
+  > .nb-toolbar-container-icons {
+    display: none;
+    position: absolute;
+    right: 2px;
+    line-height: 16px;
+    pointer-events: all;
 
-      .title-tag {
-        padding: 0 3px;
-        border-radius: 2px;
-        background: var(--colorSettings);
-        color: #fff;
-        display: inline-flex;
-      }
+    &.nb-toolbar-position-inside {
+      top: 2px;
     }
 
-    > .nb-toolbar-container-icons {
-      display: none; // 防止遮挡其它 icons
-      position: absolute;
-      right: 2px;
-      ${toolbarPositionToCSS[toolbarPosition] || ""}
-      line-height: 16px;
-      pointer-events: all;
+    &.nb-toolbar-position-above {
+      top: 0;
+      transform: translateY(-100%);
+      padding-bottom: 0;
+      margin-bottom: -2px;
+    }
 
-      .ant-space-item {
-        background-color: var(--colorSettings);
-        color: #fff;
-        line-height: 16px;
-        width: 16px;
-        height: 16px;
-        padding: 2px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
+    &.nb-toolbar-position-below {
+      top: 0;
+      transform: translateY(100%);
+      padding-top: 2px;
+      margin-top: -2px;
     }
 
-    /* 拖拽把手样式 - 参考 AirTable 样式 */
-    > .resize-handle {
-      position: absolute;
-      pointer-events: all;
-      background: var(--colorSettings);
-      opacity: 0.6;
-      border-radius: 4px;
+    .ant-space-item {
       display: flex;
       align-items: center;
       justify-content: center;
+      width: 16px;
+      height: 16px;
+      padding: 2px;
+      line-height: 16px;
+      background-color: var(--colorSettings);
+      color: #fff;
+    }
+  }
 
-      &:hover {
-        opacity: 0.9;
-        background: var(--colorSettingsHover, var(--colorSettings));
-      }
+  &.nb-toolbar-visible > .nb-toolbar-container-icons {
+    display: block;
+  }
 
-      &::before {
-        content: '';
-        position: absolute;
-        background: rgba(255, 255, 255, 0.9);
-        border-radius: 50%;
-      }
+  > .resize-handle {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: all;
+    opacity: 0.6;
+    border-radius: 4px;
+    background: var(--colorSettings);
 
-      &::after {
-        content: '';
-        position: absolute;
-        background: rgba(255, 255, 255, 0.9);
-        border-radius: 50%;
-      }
+    &:hover {
+      opacity: 0.9;
+      background: var(--colorSettingsHover, var(--colorSettings));
     }
 
-    > .resize-handle-left {
-      left: -4px;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 6px;
-      height: 20px;
-      cursor: ew-resize;
+    &::before {
+      content: '';
+      position: absolute;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.9);
+    }
 
-      &::before {
-        width: 2px;
-        height: 2px;
-        top: 6px;
-        left: 50%;
-        transform: translateX(-50%);
-        box-shadow:
-          0 4px 0 rgba(255, 255, 255, 0.9),
-          0 8px 0 rgba(255, 255, 255, 0.9);
-      }
+    &::after {
+      content: '';
+      position: absolute;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.9);
     }
+  }
 
-    > .resize-handle-right {
-      right: -4px;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 6px;
-      height: 20px;
-      cursor: ew-resize;
+  > .resize-handle-left {
+    top: 50%;
+    left: -4px;
+    width: 6px;
+    height: 20px;
+    cursor: ew-resize;
+    transform: translateY(-50%);
 
-      &::before {
-        width: 2px;
-        height: 2px;
-        top: 6px;
-        left: 50%;
-        transform: translateX(-50%);
-        box-shadow:
-          0 4px 0 rgba(255, 255, 255, 0.9),
-          0 8px 0 rgba(255, 255, 255, 0.9);
-      }
+    &::before {
+      top: 6px;
+      left: 50%;
+      width: 2px;
+      height: 2px;
+      transform: translateX(-50%);
+      box-shadow:
+        0 4px 0 rgba(255, 255, 255, 0.9),
+        0 8px 0 rgba(255, 255, 255, 0.9);
     }
+  }
+
+  > .resize-handle-right {
+    top: 50%;
+    right: -4px;
+    width: 6px;
+    height: 20px;
+    cursor: ew-resize;
+    transform: translateY(-50%);
 
-    > .resize-handle-bottom {
-      bottom: -4px;
+    &::before {
+      top: 6px;
       left: 50%;
+      width: 2px;
+      height: 2px;
       transform: translateX(-50%);
-      width: 20px;
-      height: 6px;
-      cursor: ns-resize;
-
-      &::before {
-        width: 2px;
-        height: 2px;
-        left: 6px;
-        top: 50%;
-        transform: translateY(-50%);
-        box-shadow:
-          4px 0 0 rgba(255, 255, 255, 0.9),
-          8px 0 0 rgba(255, 255, 255, 0.9);
-      }
+      box-shadow:
+        0 4px 0 rgba(255, 255, 255, 0.9),
+        0 8px 0 rgba(255, 255, 255, 0.9);
+    }
+  }
+`, "toolbarContainerStyles");
+const detectButtonInDOM = /* @__PURE__ */ __name((container) => {
+  if (!container) return false;
+  const directChildren = container.children;
+  for (let i = 0; i < directChildren.length; i++) {
+    const child = directChildren[i];
+    if (child.tagName === "BUTTON" || child.getAttribute("role") === "button" || child.classList.contains("ant-btn")) {
+      return true;
     }
   }
-`, "floatContainerStyles");
+  return false;
+}, "detectButtonInDOM");
+const renderToolbarItems = /* @__PURE__ */ __name((model, modelInstanceId, showDeleteButton, showCopyUidButton, flowEngine, settingsMenuLevel, extraToolbarItems, showDynamicFlowsEditor = true, onSettingsMenuOpenChange, getPopupContainer) => {
+  var _a, _b;
+  const toolbarItems = ((_b = (_a = flowEngine == null ? void 0 : flowEngine.flowSettings) == null ? void 0 : _a.getToolbarItems) == null ? void 0 : _b.call(_a)) || [];
+  const allToolbarItems = [...toolbarItems, ...extraToolbarItems || []];
+  allToolbarItems.sort((a, b) => (a.sort || 0) - (b.sort || 0)).reverse();
+  return allToolbarItems.filter((itemConfig) => {
+    if (itemConfig.key === "dynamic-flows-editor" && showDynamicFlowsEditor === false) {
+      return false;
+    }
+    return itemConfig.visible ? itemConfig.visible(model) : true;
+  }).map((itemConfig) => {
+    const ItemComponent = itemConfig.component;
+    if (itemConfig.key === "settings-menu") {
+      return /* @__PURE__ */ import_react.default.createElement(
+        ItemComponent,
+        {
+          key: itemConfig.key,
+          model,
+          id: modelInstanceId,
+          showDeleteButton,
+          showCopyUidButton,
+          menuLevels: settingsMenuLevel,
+          onDropdownVisibleChange: onSettingsMenuOpenChange,
+          getPopupContainer
+        }
+      );
+    }
+    return /* @__PURE__ */ import_react.default.createElement(ItemComponent, { key: itemConfig.key, model });
+  });
+}, "renderToolbarItems");
+const buildToolbarContainerClassName = /* @__PURE__ */ __name(({
+  showBackground,
+  showBorder,
+  ctx,
+  toolbarZIndex,
+  portalRenderSnapshot,
+  isToolbarVisible,
+  className
+}) => [
+  toolbarContainerStyles({ showBackground, showBorder, ctx, toolbarZIndex }),
+  "nb-toolbar-portal",
+  (portalRenderSnapshot == null ? void 0 : portalRenderSnapshot.positioningMode) === "absolute" ? "nb-toolbar-portal-absolute" : "nb-toolbar-portal-fixed",
+  isToolbarVisible ? "nb-toolbar-visible" : "",
+  (className == null ? void 0 : className.includes("nb-in-template")) ? "nb-in-template" : ""
+].filter(Boolean).join(" "), "buildToolbarContainerClassName");
+const buildToolbarContainerStyle = /* @__PURE__ */ __name((portalRect, toolbarStyle, toolbarItemCount = 0) => ({
+  top: `${portalRect.top}px`,
+  left: `${portalRect.left}px`,
+  width: `${portalRect.width}px`,
+  height: `${portalRect.height}px`,
+  minWidth: toolbarItemCount ? `${TOOLBAR_ITEM_WIDTH * toolbarItemCount}px` : void 0,
+  ...(0, import_useFloatToolbarPortal.omitToolbarPortalInsetStyle)(toolbarStyle)
+}), "buildToolbarContainerStyle");
 const isModelByIdProps = /* @__PURE__ */ __name((props) => {
   return "uid" in props && "modelClassName" in props && Boolean(props.uid) && Boolean(props.modelClassName);
 }, "isModelByIdProps");
@@ -290,9 +319,8 @@ const FlowsFloatContextMenu = (0, import_reactive.observer)((props) => {
   }
   if (isModelByIdProps(props)) {
     return /* @__PURE__ */ import_react.default.createElement(FlowsFloatContextMenuWithModelById, { ...props });
-  } else {
-    return /* @__PURE__ */ import_react.default.createElement(FlowsFloatContextMenuWithModel, { ...props });
   }
+  return /* @__PURE__ */ import_react.default.createElement(FlowsFloatContextMenuWithModel, { ...props });
 });
 const ResizeHandles = /* @__PURE__ */ __name((props) => {
   const isDraggingRef = (0, import_react.useRef)(false);
@@ -303,27 +331,13 @@ const ResizeHandles = /* @__PURE__ */ __name((props) => {
     (e) => {
       if (!isDraggingRef.current || !dragTypeRef.current) return;
       const deltaX = e.clientX - dragStartPosRef.current.x;
-      const deltaY = e.clientY - dragStartPosRef.current.y;
-      let resizeDistance = 0;
       switch (dragTypeRef.current) {
         case "left":
-          resizeDistance = -deltaX;
-          props.model.parent.emitter.emit("onResizeLeft", { resizeDistance, model: props.model });
+          props.model.parent.emitter.emit("onResizeLeft", { resizeDistance: -deltaX, model: props.model });
           break;
         case "right":
-          resizeDistance = deltaX;
-          props.model.parent.emitter.emit("onResizeRight", { resizeDistance, model: props.model });
+          props.model.parent.emitter.emit("onResizeRight", { resizeDistance: deltaX, model: props.model });
           break;
-        case "bottom":
-          resizeDistance = deltaY;
-          props.model.parent.emitter.emit("onResizeBottom", { resizeDistance, model: props.model });
-          break;
-        case "corner": {
-          const widthDelta = deltaX;
-          const heightDelta = deltaY;
-          props.model.parent.emitter.emit("onResizeCorner", { widthDelta, heightDelta, model: props.model });
-          break;
-        }
       }
     },
     [props.model]
@@ -336,7 +350,7 @@ const ResizeHandles = /* @__PURE__ */ __name((props) => {
     document.removeEventListener("mouseup", handleDragEnd);
     props.model.parent.emitter.emit("onResizeEnd");
     onDragEnd == null ? void 0 : onDragEnd();
-  }, [handleDragMove, props.model, onDragEnd]);
+  }, [handleDragMove, onDragEnd, props.model]);
   const handleDragStart = (0, import_react.useCallback)(
     (e, type) => {
       e.preventDefault();
@@ -355,6 +369,8 @@ const ResizeHandles = /* @__PURE__ */ __name((props) => {
     {
       className: "resize-handle resize-handle-left",
       title: "\u62D6\u62FD\u8C03\u8282\u5BBD\u5EA6",
+      onMouseEnter: props.onMouseEnter,
+      onMouseLeave: props.onMouseLeave,
       onMouseDown: (e) => handleDragStart(e, "left")
     }
   ), /* @__PURE__ */ import_react.default.createElement(
@@ -362,6 +378,8 @@ const ResizeHandles = /* @__PURE__ */ __name((props) => {
     {
       className: "resize-handle resize-handle-right",
       title: "\u62D6\u62FD\u8C03\u8282\u5BBD\u5EA6",
+      onMouseEnter: props.onMouseEnter,
+      onMouseLeave: props.onMouseLeave,
       onMouseDown: (e) => handleDragStart(e, "right")
     }
   ));
@@ -381,31 +399,90 @@ const FlowsFloatContextMenuWithModel = (0, import_reactive.observer)(
     showDragHandle = false,
     settingsMenuLevel,
     extraToolbarItems,
+    showDynamicFlowsEditor = true,
     toolbarStyle,
     toolbarPosition = "inside"
   }) => {
-    const [hideMenu, setHideMenu] = (0, import_react.useState)(false);
+    var _a;
     const [hasButton, setHasButton] = (0, import_react.useState)(false);
     const containerRef = (0, import_react.useRef)(null);
-    const flowEngine = (0, import_provider.useFlowEngine)();
-    const [style, setStyle] = (0, import_react.useState)({});
     const toolbarContainerRef = (0, import_react.useRef)(null);
-    const toolbarContainerStyle = (0, import_react.useMemo)(() => ({ ...toolbarStyle, ...style }), [style, toolbarStyle]);
+    const portalActionsRef = (0, import_react.useRef)({
+      updatePortalRect: /* @__PURE__ */ __name(() => {
+      }, "updatePortalRect"),
+      schedulePortalRectUpdate: /* @__PURE__ */ __name(() => {
+      }, "schedulePortalRectUpdate")
+    });
+    const modelUid = getFloatMenuInstanceId(model);
+    const flowEngine = (0, import_provider.useFlowEngine)();
+    const updatePortalRectProxy = (0, import_react.useCallback)(() => {
+      portalActionsRef.current.updatePortalRect();
+    }, []);
+    const schedulePortalRectUpdateProxy = (0, import_react.useCallback)(() => {
+      portalActionsRef.current.schedulePortalRectUpdate();
+    }, []);
+    const {
+      isToolbarVisible,
+      shouldRenderToolbar,
+      handleSettingsMenuOpenChange,
+      handleChildHover,
+      handleHostMouseEnter,
+      handleHostMouseLeave,
+      handleToolbarMouseEnter,
+      handleToolbarMouseLeave,
+      handleResizeDragStart,
+      handleResizeDragEnd
+    } = (0, import_useFloatToolbarVisibility.useFloatToolbarVisibility)({
+      modelUid,
+      containerRef,
+      toolbarContainerRef,
+      updatePortalRect: updatePortalRectProxy,
+      schedulePortalRectUpdate: schedulePortalRectUpdateProxy
+    });
+    const { portalRect, portalRenderSnapshot, getPopupContainer, updatePortalRect, schedulePortalRectUpdate } = (0, import_useFloatToolbarPortal.useFloatToolbarPortal)({
+      active: shouldRenderToolbar,
+      containerRef,
+      toolbarContainerRef,
+      toolbarStyle
+    });
+    portalActionsRef.current.updatePortalRect = updatePortalRect;
+    portalActionsRef.current.schedulePortalRectUpdate = schedulePortalRectUpdate;
+    const toolbarItems = (0, import_react.useMemo)(
+      () => model ? renderToolbarItems(
+        model,
+        modelUid,
+        showDeleteButton,
+        showCopyUidButton,
+        flowEngine,
+        settingsMenuLevel,
+        extraToolbarItems,
+        showDynamicFlowsEditor,
+        handleSettingsMenuOpenChange,
+        getPopupContainer
+      ) : [],
+      [
+        extraToolbarItems,
+        flowEngine,
+        getPopupContainer,
+        handleSettingsMenuOpenChange,
+        model,
+        settingsMenuLevel,
+        showCopyUidButton,
+        showDeleteButton,
+        showDynamicFlowsEditor
+      ]
+    );
     (0, import_react.useEffect)(() => {
-      if (containerRef.current) {
-        const hasButtonElement = detectButtonInDOM(containerRef.current);
-        setHasButton(hasButtonElement);
+      const container = containerRef.current;
+      if (!container) {
+        return;
       }
-    }, [children]);
-    (0, import_react.useEffect)(() => {
-      if (!containerRef.current) return;
-      const observer2 = new MutationObserver(() => {
-        if (containerRef.current) {
-          const hasButtonElement = detectButtonInDOM(containerRef.current);
-          setHasButton(hasButtonElement);
-        }
-      });
-      observer2.observe(containerRef.current, {
+      const syncHasButton = /* @__PURE__ */ __name(() => {
+        setHasButton(detectButtonInDOM(container));
+      }, "syncHasButton");
+      syncHasButton();
+      const observer2 = new MutationObserver(syncHasButton);
+      observer2.observe(container, {
         childList: true,
         subtree: true,
         attributes: true,
@@ -415,15 +492,6 @@ const FlowsFloatContextMenuWithModel = (0, import_reactive.observer)(
         observer2.disconnect();
       };
     }, []);
-    const handleChildHover = (0, import_react.useCallback)((e) => {
-      const target = e.target;
-      const childWithMenu = target.closest("[data-has-float-menu]");
-      if (childWithMenu && childWithMenu !== containerRef.current) {
-        setHideMenu(true);
-      } else {
-        setHideMenu(false);
-      }
-    }, []);
     if (!model) {
       const t = (0, import_utils.getT)(model || {});
       return /* @__PURE__ */ import_react.default.createElement(import_antd.Alert, { message: t("Invalid model provided"), type: "error" });
@@ -431,39 +499,63 @@ const FlowsFloatContextMenuWithModel = (0, import_reactive.observer)(
     if (!enabled || !children) {
       return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children);
     }
-    return /* @__PURE__ */ import_react.default.createElement(
+    const toolbarZIndex = (((_a = model.context.themeToken) == null ? void 0 : _a.zIndexPopupBase) || DEFAULT_POPUP_BASE_Z_INDEX) + 1;
+    const toolbarContainerClassName = buildToolbarContainerClassName({
+      showBackground,
+      showBorder,
+      ctx: model.context,
+      toolbarZIndex,
+      portalRenderSnapshot,
+      isToolbarVisible,
+      className
+    });
+    const toolbarContainerStyle = buildToolbarContainerStyle(portalRect, toolbarStyle, toolbarItems.length);
+    const toolbarNode = shouldRenderToolbar ? /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
-        ref: containerRef,
-        className: `${floatContainerStyles({
-          showBackground,
-          showBorder,
-          ctx: model.context,
-          toolbarPosition,
-          toolbarCount: getToolbarCount(flowEngine, extraToolbarItems)
-        })} ${hideMenu ? "hide-parent-menu" : ""} ${hasButton ? "has-button-child" : ""} ${className || ""}`,
-        style: containerStyle,
-        "data-has-float-menu": "true",
-        onMouseMove: handleChildHover
+        ref: toolbarContainerRef,
+        className: `nb-toolbar-container ${toolbarContainerClassName}`,
+        style: toolbarContainerStyle,
+        "data-model-uid": modelUid
       },
-      children,
-      /* @__PURE__ */ import_react.default.createElement("div", { ref: toolbarContainerRef, className: "nb-toolbar-container", style: toolbarContainerStyle }, showTitle && (model.title || model.extraTitle) && /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-toolbar-container-title" }, model.title && /* @__PURE__ */ import_react.default.createElement("span", { className: "title-tag" }, model.title), model.extraTitle && /* @__PURE__ */ import_react.default.createElement("span", { className: "title-tag" }, model.extraTitle)), /* @__PURE__ */ import_react.default.createElement(
+      showTitle && (model.title || model.extraTitle) && /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-toolbar-container-title" }, model.title && /* @__PURE__ */ import_react.default.createElement("span", { className: "title-tag" }, model.title), model.extraTitle && /* @__PURE__ */ import_react.default.createElement("span", { className: "title-tag" }, model.extraTitle)),
+      /* @__PURE__ */ import_react.default.createElement(
         "div",
         {
-          className: "nb-toolbar-container-icons",
+          className: `nb-toolbar-container-icons ${toolbarPositionClassNames[toolbarPosition]}`,
           onClick: (e) => e.stopPropagation(),
           onMouseDown: (e) => e.stopPropagation(),
-          onMouseMove: (e) => e.stopPropagation()
+          onMouseMove: (e) => e.stopPropagation(),
+          onMouseEnter: handleToolbarMouseEnter,
+          onMouseLeave: handleToolbarMouseLeave
         },
-        /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: 3, align: "center" }, renderToolbarItems(
+        /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: 3, align: "center" }, toolbarItems)
+      ),
+      showDragHandle && /* @__PURE__ */ import_react.default.createElement(
+        ResizeHandles,
+        {
           model,
-          showDeleteButton,
-          showCopyUidButton,
-          flowEngine,
-          settingsMenuLevel,
-          extraToolbarItems
-        ))
-      ), showDragHandle && /* @__PURE__ */ import_react.default.createElement(ResizeHandles, { model, onDragStart: () => setStyle({ opacity: 1 }), onDragEnd: () => setStyle({}) }))
+          onMouseEnter: handleToolbarMouseEnter,
+          onMouseLeave: handleToolbarMouseLeave,
+          onDragStart: handleResizeDragStart,
+          onDragEnd: handleResizeDragEnd
+        }
+      )
+    ) : null;
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        ref: containerRef,
+        className: `${hostContainerStyles} ${hasButton ? "has-button-child" : ""} ${className || ""}`,
+        style: containerStyle,
+        "data-has-float-menu": "true",
+        "data-float-menu-model-uid": modelUid,
+        onMouseMove: handleChildHover,
+        onMouseEnter: handleHostMouseEnter,
+        onMouseLeave: handleHostMouseLeave
+      },
+      children,
+      toolbarNode && ((portalRenderSnapshot == null ? void 0 : portalRenderSnapshot.mountElement) ? (0, import_react_dom.createPortal)(toolbarNode, portalRenderSnapshot.mountElement) : toolbarNode)
     );
   },
   {
@@ -471,53 +563,18 @@ const FlowsFloatContextMenuWithModel = (0, import_reactive.observer)(
   }
 );
 const FlowsFloatContextMenuWithModelById = (0, import_reactive.observer)(
-  ({
-    uid,
-    modelClassName,
-    children,
-    enabled = true,
-    showDeleteButton = true,
-    showCopyUidButton = true,
-    containerStyle,
-    className,
-    showTitle = false,
-    settingsMenuLevel,
-    extraToolbarItems,
-    toolbarPosition
-  }) => {
+  ({ uid, modelClassName, children, ...restProps }) => {
     const model = (0, import_hooks.useFlowModelById)(uid, modelClassName);
     const flowEngine = (0, import_provider.useFlowEngine)();
     if (!model) {
       return /* @__PURE__ */ import_react.default.createElement(import_antd.Alert, { message: flowEngine.translate("Model with ID {{uid}} not found", { uid }), type: "error" });
     }
-    return /* @__PURE__ */ import_react.default.createElement(
-      FlowsFloatContextMenuWithModel,
-      {
-        model,
-        enabled,
-        showDeleteButton,
-        showCopyUidButton,
-        containerStyle,
-        className,
-        showTitle,
-        settingsMenuLevel,
-        extraToolbarItems,
-        toolbarPosition
-      },
-      children
-    );
+    return /* @__PURE__ */ import_react.default.createElement(FlowsFloatContextMenuWithModel, { model, ...restProps }, children);
   },
   {
     displayName: "FlowsFloatContextMenuWithModelById"
   }
 );
-function getToolbarCount(flowEngine, extraToolbarItems) {
-  var _a, _b;
-  const toolbarItems = ((_b = (_a = flowEngine == null ? void 0 : flowEngine.flowSettings) == null ? void 0 : _a.getToolbarItems) == null ? void 0 : _b.call(_a)) || [];
-  const allToolbarItems = [...toolbarItems, ...extraToolbarItems || []];
-  return allToolbarItems.length;
-}
-__name(getToolbarCount, "getToolbarCount");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   FlowsFloatContextMenu