@nocobase/flow-engine 2.1.0-beta.22 → 2.1.0-beta.23

package/src/components/settings/wrappers/contextual/__tests__/FlowsFloatContextMenu.test.tsx

@@ -17,6 +17,7 @@ import { FlowEngineProvider } from '../../../../../provider';
 import { FieldModelRenderer } from '../../../../FieldModelRenderer';
 import { FlowModelRenderer } from '../../../../FlowModelRenderer';
 import { FlowsFloatContextMenu } from '../FlowsFloatContextMenu';
+import { TOOLBAR_DRAG_ACTIVITY_EVENT } from '../../../../dnd';
 
 const mockColorTextTertiary = '#8c8c8c';
 
@@ -151,17 +152,36 @@ const setupDrawerPopup = () => {
   return { drawerWrapper, drawerContent };
 };
 
+const setupOverflowPopup = () => {
+  const appContainer = createAppContainer();
+  const popupRoot = document.createElement('div');
+  popupRoot.className = 'ant-menu-submenu-popup';
+  popupRoot.style.zIndex = '1000';
+  appContainer.appendChild(popupRoot);
+  mockRect(appContainer, { top: 40, left: 60, width: 1200, height: 800 });
+  mockRect(popupRoot, { top: 96, left: 420, width: 260, height: 240 });
+  return { appContainer, popupRoot };
+};
+
 const getHost = (element: HTMLElement) => element.closest('[data-has-float-menu="true"]') as HTMLDivElement;
 const queryOverlay = (container: HTMLElement, uid: string) =>
   container.querySelector(`[data-model-uid="${uid}"]`) as HTMLDivElement | null;
 
-const createModel = (engine: FlowEngine, uid: string) => {
+const createModel = (engine: FlowEngine, uid: string, themeToken?: Record<string, number | undefined>) => {
   const model = new FlowModel({ uid, flowEngine: engine });
-  model.context.defineProperty('themeToken', { value: { borderRadiusLG: 8 } });
+  model.context.defineProperty('themeToken', { value: { borderRadiusLG: 8, ...themeToken } });
   model.render = vi.fn().mockReturnValue(<div data-testid={`${uid}-content`}>{uid}</div>);
   return model;
 };
 
+const ToolbarDragItem = ({ model }: { model: FlowModel }) => {
+  return (
+    <button type="button" aria-label="toolbar-drag">
+      drag
+    </button>
+  );
+};
+
 describe('FlowsFloatContextMenu', () => {
   const originalResizeObserver = globalThis.ResizeObserver;
   const originalRequestAnimationFrame = globalThis.requestAnimationFrame;
@@ -314,6 +334,49 @@ describe('FlowsFloatContextMenu', () => {
     });
   });
 
+  it('renders overflow popup toolbar above popup roots while keeping dropdown popup bound to local icons container', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+    const model = createModel(engine, 'overflow-popup-model', { zIndexPopupBase: 1000 });
+    const { appContainer, popupRoot } = setupOverflowPopup();
+
+    const { findByTestId } = renderWithProviders(
+      engine,
+      <FlowModelRenderer model={model} showFlowSettings={{ toolbarPosition: 'above' }} />,
+      { container: popupRoot },
+    );
+
+    const content = await findByTestId('overflow-popup-model-content');
+    const host = getHost(content);
+    mockRect(host, { top: 128, left: 436, width: 180, height: 40 });
+
+    expect(getComputedStyle(popupRoot).zIndex).toBe('1000');
+    expect(appContainer.querySelector('[data-model-uid="overflow-popup-model"]')).toBeNull();
+
+    fireEvent.mouseEnter(host);
+
+    const overlay = await waitFor(() => {
+      const nextOverlay = appContainer.querySelector(
+        '[data-model-uid="overflow-popup-model"]',
+      ) as HTMLDivElement | null;
+      expect(nextOverlay).toBeTruthy();
+      return nextOverlay as HTMLDivElement;
+    });
+
+    await waitFor(() => {
+      expect(within(overlay).getByLabelText('flows-settings')).toBeTruthy();
+    });
+
+    await waitFor(() => {
+      expect(overlay.className).toContain('nb-toolbar-visible');
+      expect(getComputedStyle(overlay).zIndex).toBe('1001');
+      expect(overlay.parentElement).toBe(popupRoot);
+    });
+
+    const dropdown = within(overlay).getByTestId('dropdown');
+    expect(dropdown.getAttribute('data-popup-container')).toContain('nb-toolbar-container-icons');
+  });
+
   it('portals field toolbar to the nearest popup root and treats inset values as rect adjustments', async () => {
     const engine = new FlowEngine();
     await engine.flowSettings.forceEnable();
@@ -398,6 +461,112 @@ describe('FlowsFloatContextMenu', () => {
     });
   });
 
+  it('falls back to popup base 1000 when themeToken.zIndexPopupBase is missing', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+    const model = createModel(engine, 'fallback-zindex-model');
+    const appContainer = createAppContainer();
+    mockRect(appContainer, { top: 20, left: 40, width: 1200, height: 800 });
+
+    const { getByTestId } = renderWithProviders(
+      engine,
+      <FlowsFloatContextMenu model={model}>
+        <div data-testid="fallback-content">content</div>
+      </FlowsFloatContextMenu>,
+      { container: appContainer },
+    );
+
+    const host = getHost(getByTestId('fallback-content'));
+    mockRect(host, { top: 56, left: 84, width: 160, height: 48 });
+
+    fireEvent.mouseEnter(host);
+
+    const overlay = await waitFor(() => {
+      const nextOverlay = appContainer.querySelector(
+        '[data-model-uid="fallback-zindex-model"]',
+      ) as HTMLDivElement | null;
+      expect(nextOverlay).toBeTruthy();
+      return nextOverlay as HTMLDivElement;
+    });
+
+    await waitFor(() => {
+      expect(within(overlay).getByLabelText('flows-settings')).toBeTruthy();
+    });
+
+    await waitFor(() => {
+      expect(overlay.className).toContain('nb-toolbar-visible');
+      expect(getComputedStyle(overlay).zIndex).toBe('1001');
+    });
+  });
+
+  it('keeps toolbar visible while a toolbar drag item is active', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+    const model = createModel(engine, 'drag-toolbar-model');
+    const appContainer = createAppContainer();
+    mockRect(appContainer, { top: 20, left: 40, width: 1200, height: 800 });
+
+    const { getByTestId } = renderWithProviders(
+      engine,
+      <FlowsFloatContextMenu
+        model={model}
+        extraToolbarItems={[
+          {
+            key: 'toolbar-drag',
+            component: ToolbarDragItem,
+            sort: 100,
+          },
+        ]}
+      >
+        <div data-testid="drag-toolbar-content">content</div>
+      </FlowsFloatContextMenu>,
+      { container: appContainer },
+    );
+
+    const host = getHost(getByTestId('drag-toolbar-content'));
+    mockRect(host, { top: 56, left: 84, width: 160, height: 48 });
+
+    fireEvent.mouseEnter(host);
+
+    const overlay = await waitFor(() => {
+      const nextOverlay = appContainer.querySelector('[data-model-uid="drag-toolbar-model"]') as HTMLDivElement | null;
+      expect(nextOverlay).toBeTruthy();
+      return nextOverlay as HTMLDivElement;
+    });
+
+    const icons = overlay.querySelector('.nb-toolbar-container-icons') as HTMLDivElement;
+
+    await waitFor(() => {
+      expect(within(overlay).getByLabelText('toolbar-drag')).toBeTruthy();
+      expect(overlay.className).toContain('nb-toolbar-visible');
+    });
+
+    fireEvent.mouseLeave(host, { relatedTarget: icons });
+    fireEvent.mouseEnter(icons, { relatedTarget: host });
+
+    const dragButton = within(overlay).getByLabelText('toolbar-drag');
+    dragButton.ownerDocument.dispatchEvent(
+      new CustomEvent(TOOLBAR_DRAG_ACTIVITY_EVENT, {
+        detail: { active: true, modelUid: model.uid },
+      }),
+    );
+    fireEvent.mouseLeave(icons, { relatedTarget: document.createElement('div') });
+
+    await waitFor(() => {
+      expect(queryOverlay(appContainer, 'drag-toolbar-model')?.className).toContain('nb-toolbar-visible');
+    });
+
+    dragButton.ownerDocument.dispatchEvent(
+      new CustomEvent(TOOLBAR_DRAG_ACTIVITY_EVENT, {
+        detail: { active: false, modelUid: model.uid },
+      }),
+    );
+
+    await waitFor(() => {
+      expect(queryOverlay(appContainer, 'drag-toolbar-model')).toBeNull();
+    });
+  });
+
   it('hides parent toolbar when hovering a nested child host', async () => {
     const engine = new FlowEngine();
     await engine.flowSettings.forceEnable();

package/src/components/settings/wrappers/contextual/useFloatToolbarPortal.ts

@@ -11,6 +11,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import type { CSSProperties, RefObject } from 'react';
 
 const APP_CONTAINER_SELECTOR = '#nocobase-app-container';
+const MENU_SUBMENU_POPUP_SELECTOR = '.ant-menu-submenu-popup';
 const DRAWER_CONTENT_WRAPPER_SELECTOR = '.ant-drawer-content-wrapper';
 const DRAWER_CONTENT_SELECTOR = '.ant-drawer-content';
 const DRAWER_ROOT_SELECTOR = '.ant-drawer-root';
@@ -77,6 +78,7 @@ const createAbsolutePortalHostConfig = (element: HTMLElement): ToolbarPortalHost
 });
 
 const popupPortalHostResolvers: Array<(hostEl: HTMLElement | null) => HTMLElement | null> = [
+  (hostEl) => getClosestElement(hostEl, MENU_SUBMENU_POPUP_SELECTOR),
   (hostEl) => getClosestElement(hostEl, DRAWER_CONTENT_WRAPPER_SELECTOR),
   (hostEl) => getClosestElement(hostEl, MODAL_WRAP_SELECTOR),
   (hostEl) => getClosestElement(hostEl, MODAL_SELECTOR),

package/src/components/settings/wrappers/contextual/useFloatToolbarVisibility.ts

@@ -9,6 +9,7 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { MouseEvent as ReactMouseEvent, RefObject } from 'react';
+import { TOOLBAR_DRAG_ACTIVITY_EVENT } from '../../../dnd';
 
 const TOOLBAR_HIDE_DELAY = 180;
 const CHILD_FLOAT_MENU_ACTIVITY_EVENT = 'nb-float-menu-child-activity';
@@ -75,18 +76,51 @@ export const useFloatToolbarVisibility = ({
   const [isHostHovered, setIsHostHovered] = useState(false);
   const [isToolbarHovered, setIsToolbarHovered] = useState(false);
   const [isDraggingToolbar, setIsDraggingToolbar] = useState(false);
+  const [isDraggingToolbarItem, setIsDraggingToolbarItem] = useState(false);
   const [isToolbarPinned, setIsToolbarPinned] = useState(false);
   const [isHidePending, setIsHidePending] = useState(false);
   const [activeChildToolbarIds, setActiveChildToolbarIds] = useState<string[]>([]);
   const hideToolbarTimerRef = useRef<number | null>(null);
   const reportedChildActivityToAncestorsRef = useRef(false);
+  const isHostHoveredRef = useRef(false);
+  const isToolbarHoveredRef = useRef(false);
+  const isDraggingToolbarRef = useRef(false);
+  const isDraggingToolbarItemRef = useRef(false);
+  const isToolbarPinnedRef = useRef(false);
+
+  const setHostHovered = useCallback((value: boolean) => {
+    isHostHoveredRef.current = value;
+    setIsHostHovered(value);
+  }, []);
+
+  const setToolbarHovered = useCallback((value: boolean) => {
+    isToolbarHoveredRef.current = value;
+    setIsToolbarHovered(value);
+  }, []);
+
+  const setDraggingToolbar = useCallback((value: boolean) => {
+    isDraggingToolbarRef.current = value;
+    setIsDraggingToolbar(value);
+  }, []);
+
+  const setDraggingToolbarItem = useCallback((value: boolean) => {
+    isDraggingToolbarItemRef.current = value;
+    setIsDraggingToolbarItem(value);
+  }, []);
+
+  const setToolbarPinned = useCallback((value: boolean) => {
+    isToolbarPinnedRef.current = value;
+    setIsToolbarPinned(value);
+  }, []);
 
   const hasActiveChildToolbar = activeChildToolbarIds.length > 0;
   const isToolbarVisible =
-    !hideMenu && !hasActiveChildToolbar && (isHostHovered || isToolbarHovered || isDraggingToolbar || isToolbarPinned);
-  const shouldRenderToolbar = isToolbarVisible || isToolbarPinned || isDraggingToolbar;
+    !hideMenu &&
+    !hasActiveChildToolbar &&
+    (isHostHovered || isToolbarHovered || isDraggingToolbar || isDraggingToolbarItem || isToolbarPinned);
+  const shouldRenderToolbar = isToolbarVisible || isToolbarPinned || isDraggingToolbar || isDraggingToolbarItem;
   const isToolbarInteractionActive =
-    isHostHovered || isToolbarHovered || isDraggingToolbar || isToolbarPinned || isHidePending;
+    isHostHovered || isToolbarHovered || isDraggingToolbar || isDraggingToolbarItem || isToolbarPinned || isHidePending;
 
   const clearHideToolbarTimer = useCallback(() => {
     if (hideToolbarTimerRef.current !== null) {
@@ -102,17 +136,20 @@ export const useFloatToolbarVisibility = ({
     hideToolbarTimerRef.current = window.setTimeout(() => {
       hideToolbarTimerRef.current = null;
       setIsHidePending(false);
-      if (isDraggingToolbar || isToolbarPinned) {
+      if (isDraggingToolbarRef.current || isDraggingToolbarItemRef.current || isToolbarPinnedRef.current) {
         return;
       }
-      setIsHostHovered(false);
-      setIsToolbarHovered(false);
+      setHostHovered(false);
+      setToolbarHovered(false);
     }, TOOLBAR_HIDE_DELAY);
-  }, [clearHideToolbarTimer, isDraggingToolbar, isToolbarPinned]);
+  }, [clearHideToolbarTimer, setHostHovered, setToolbarHovered]);
 
-  const handleSettingsMenuOpenChange = useCallback((open: boolean) => {
-    setIsToolbarPinned(open);
-  }, []);
+  const handleSettingsMenuOpenChange = useCallback(
+    (open: boolean) => {
+      setToolbarPinned(open);
+    },
+    [setToolbarPinned],
+  );
 
   useEffect(() => {
     const hostElement = containerRef.current;
@@ -146,6 +183,40 @@ export const useFloatToolbarVisibility = ({
     };
   }, [containerRef]);
 
+  useEffect(() => {
+    const hostElement = containerRef.current;
+    const ownerDocument = hostElement?.ownerDocument;
+    if (!ownerDocument) {
+      return;
+    }
+
+    const handleToolbarDragActivity = (event: Event) => {
+      const customEvent = event as CustomEvent<{ active?: boolean; modelUid?: string }>;
+      if (customEvent.detail?.modelUid !== modelUid) {
+        return;
+      }
+
+      if (customEvent.detail?.active) {
+        clearHideToolbarTimer();
+        setDraggingToolbarItem(true);
+        return;
+      }
+
+      setDraggingToolbarItem(false);
+      if (isHostHoveredRef.current || isToolbarHoveredRef.current || isToolbarPinnedRef.current) {
+        clearHideToolbarTimer();
+        return;
+      }
+
+      scheduleHideToolbar();
+    };
+
+    ownerDocument.addEventListener(TOOLBAR_DRAG_ACTIVITY_EVENT, handleToolbarDragActivity as EventListener);
+    return () => {
+      ownerDocument.removeEventListener(TOOLBAR_DRAG_ACTIVITY_EVENT, handleToolbarDragActivity as EventListener);
+    };
+  }, [clearHideToolbarTimer, containerRef, modelUid, scheduleHideToolbar, setDraggingToolbarItem]);
+
   useEffect(() => {
     const hostElement = containerRef.current;
     if (!hostElement || reportedChildActivityToAncestorsRef.current === isToolbarInteractionActive) {
@@ -193,78 +264,87 @@ export const useFloatToolbarVisibility = ({
 
       if (isCurrentHostTarget) {
         clearHideToolbarTimer();
-        setIsHostHovered(true);
+        setHostHovered(true);
       }
 
       setHideMenu(!!childWithMenu && childWithMenu !== containerRef.current);
     },
-    [clearHideToolbarTimer, containerRef],
+    [clearHideToolbarTimer, containerRef, setHostHovered],
   );
 
   const handleHostMouseEnter = useCallback(() => {
     clearHideToolbarTimer();
     setHideMenu(false);
     updatePortalRect();
-    setIsHostHovered(true);
-  }, [clearHideToolbarTimer, updatePortalRect]);
+    setHostHovered(true);
+  }, [clearHideToolbarTimer, setHostHovered, updatePortalRect]);
 
   const handleHostMouseLeave = useCallback(
     (e: ReactMouseEvent<HTMLDivElement>) => {
-      if (isToolbarPinned) {
-        setIsHostHovered(false);
+      if (isToolbarPinnedRef.current) {
+        setHostHovered(false);
         return;
       }
       if (isNodeWithin(e.relatedTarget, toolbarContainerRef.current)) {
         clearHideToolbarTimer();
-        setIsHostHovered(false);
-        setIsToolbarHovered(true);
+        setHostHovered(false);
+        setToolbarHovered(true);
         return;
       }
       if (isNodeWithinDescendantFloatToolbar(e.relatedTarget, containerRef.current, modelUid)) {
         clearHideToolbarTimer();
         setHideMenu(false);
-        setIsHostHovered(true);
+        setHostHovered(true);
         return;
       }
       scheduleHideToolbar();
     },
-    [clearHideToolbarTimer, containerRef, isToolbarPinned, modelUid, scheduleHideToolbar, toolbarContainerRef],
+    [
+      clearHideToolbarTimer,
+      containerRef,
+      modelUid,
+      scheduleHideToolbar,
+      setHostHovered,
+      setToolbarHovered,
+      toolbarContainerRef,
+    ],
   );
 
   const handleToolbarMouseEnter = useCallback(() => {
     clearHideToolbarTimer();
     updatePortalRect();
-    setIsHostHovered(false);
-    setIsToolbarHovered(true);
-  }, [clearHideToolbarTimer, updatePortalRect]);
+    setHostHovered(false);
+    setToolbarHovered(true);
+  }, [clearHideToolbarTimer, setHostHovered, setToolbarHovered, updatePortalRect]);
 
   const handleToolbarMouseLeave = useCallback(
     (e: ReactMouseEvent<HTMLDivElement>) => {
-      if (isToolbarPinned) {
-        setIsToolbarHovered(false);
+      if (isToolbarPinnedRef.current || isDraggingToolbarItemRef.current) {
+        clearHideToolbarTimer();
+        setToolbarHovered(false);
         return;
       }
-      setIsToolbarHovered(false);
+      setToolbarHovered(false);
       if (isNodeWithin(e.relatedTarget, containerRef.current)) {
         clearHideToolbarTimer();
-        setIsHostHovered(true);
+        setHostHovered(true);
         return;
       }
       scheduleHideToolbar();
     },
-    [clearHideToolbarTimer, containerRef, isToolbarPinned, scheduleHideToolbar],
+    [clearHideToolbarTimer, containerRef, scheduleHideToolbar, setHostHovered, setToolbarHovered],
   );
 
   const handleResizeDragStart = useCallback(() => {
     updatePortalRect();
-    setIsDraggingToolbar(true);
+    setDraggingToolbar(true);
     schedulePortalRectUpdate();
-  }, [schedulePortalRectUpdate, updatePortalRect]);
+  }, [schedulePortalRectUpdate, setDraggingToolbar, updatePortalRect]);
 
   const handleResizeDragEnd = useCallback(() => {
-    setIsDraggingToolbar(false);
+    setDraggingToolbar(false);
     schedulePortalRectUpdate();
-  }, [schedulePortalRectUpdate]);
+  }, [schedulePortalRectUpdate, setDraggingToolbar]);
 
   return {
     isToolbarVisible,

package/src/components/subModel/index.ts

@@ -8,5 +8,6 @@
  */
 
 export * from './AddSubModelButton';
+export { default as LazyDropdown } from './LazyDropdown';
 export * from './utils';
 //

package/src/data-source/__tests__/index.test.ts

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { DataSource, DataSourceManager } from '../index';
 import { FlowEngine } from '../../flowEngine';
 
@@ -79,4 +79,37 @@ describe('DataSource & Collection APIs', () => {
       ]),
     ).toThrow(/circular/);
   });
+
+  it('ensureLoaded, reload and data source events work for main loader', async () => {
+    const { m, engine } = makeManager();
+    const loadedListener = vi.fn();
+    const failedListener = vi.fn();
+    engine.context.app = { eventBus: new EventTarget() } as any;
+    engine.context.app.eventBus.addEventListener('dataSource:loaded', loadedListener);
+    engine.context.app.eventBus.addEventListener('dataSource:loadFailed', failedListener);
+
+    const loader = vi
+      .fn()
+      .mockResolvedValueOnce({
+        collections: [{ name: 'posts', fields: [{ name: 'title', type: 'string', interface: 'input' }] }],
+      })
+      .mockResolvedValueOnce({
+        collections: [{ name: 'users', fields: [{ name: 'nickname', type: 'string', interface: 'input' }] }],
+      });
+
+    m.registerLoader('main', loader);
+
+    await m.ensureLoaded();
+    expect(loader).toHaveBeenCalledTimes(1);
+    expect(m.getDataSource('main')?.status).toBe('loaded');
+    expect(m.getCollection('main', 'posts')?.name).toBe('posts');
+    expect(loadedListener).toHaveBeenCalledTimes(1);
+
+    await m.reloadDataSource('main');
+    expect(loader).toHaveBeenCalledTimes(2);
+    expect(m.getCollection('main', 'posts')).toBeUndefined();
+    expect(m.getCollection('main', 'users')?.name).toBe('users');
+    expect(m.getDataSource('main')?.reload).toBeTypeOf('function');
+    expect(failedListener).not.toHaveBeenCalled();
+  });
 });