@nocobase/flow-engine 2.1.0-alpha.21 → 2.1.0-alpha.23

package/src/components/__tests__/FlowModelRenderer.test.tsx

@@ -90,11 +90,21 @@ describe('FlowModelRenderer', () => {
 
   test('should clear stale beforeRender state after unmount when reusing the same model', async () => {
     const statefulEngine = new FlowEngine();
+    const onMountSpy = vi.fn();
+    const onUnmountSpy = vi.fn();
 
     class StatefulModel extends FlowModel {
       render(): any {
         return <div>Stateful Content</div>;
       }
+
+      protected onMount(): void {
+        onMountSpy();
+      }
+
+      protected onUnmount(): void {
+        onUnmountSpy();
+      }
     }
 
     const statefulModel = new StatefulModel({
@@ -107,8 +117,14 @@ describe('FlowModelRenderer', () => {
     await waitFor(() => {
       expect(executorSpy).toHaveBeenCalledTimes(1);
     });
+    await waitFor(() => {
+      expect(onMountSpy).toHaveBeenCalledTimes(1);
+    });
 
     firstRender.unmount();
+    await waitFor(() => {
+      expect(onUnmountSpy).toHaveBeenCalledTimes(1);
+    });
 
     executorSpy.mockClear();
     statefulModel.setStepParams('anyFlow', 'anyStep', { x: 1 });
@@ -119,6 +135,9 @@ describe('FlowModelRenderer', () => {
     await waitFor(() => {
       expect(executorSpy).toHaveBeenCalledTimes(1);
     });
+    await waitFor(() => {
+      expect(onMountSpy).toHaveBeenCalledTimes(2);
+    });
     const [target, eventName, inputArgs, options] = executorSpy.mock.calls[0];
     expect(target).toBe(statefulModel);
     expect(eventName).toBe('beforeRender');
@@ -126,5 +145,8 @@ describe('FlowModelRenderer', () => {
     expect(options).toMatchObject({ useCache: true });
 
     secondRender.unmount();
+    await waitFor(() => {
+      expect(onUnmountSpy).toHaveBeenCalledTimes(2);
+    });
   });
 });

package/src/components/__tests__/dnd.test.ts

@@ -0,0 +1,44 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * 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 { describe, expect, it } from 'vitest';
+import { resolveOverlayAnchorTransform } from '../dnd';
+
+describe('resolveOverlayAnchorTransform', () => {
+  it('should keep the original transform when anchor point is missing', () => {
+    const transform = { x: 24, y: 36, scaleX: 1, scaleY: 1 };
+
+    expect(
+      resolveOverlayAnchorTransform({
+        activeId: 'menu-item-1',
+        active: { id: 'menu-item-1' },
+        transform,
+        activeNodeRect: { top: 80, left: 120 },
+        dragAnchorPoint: null,
+      }),
+    ).toEqual(transform);
+  });
+
+  it('should align the overlay origin to the pointer position when dragging from toolbar handle', () => {
+    expect(
+      resolveOverlayAnchorTransform({
+        activeId: 'menu-item-1',
+        active: { id: 'menu-item-1' },
+        transform: { x: 20, y: 30, scaleX: 1, scaleY: 1 },
+        activeNodeRect: { top: 200, left: 100 },
+        dragAnchorPoint: { x: 180, y: 260 },
+      }),
+    ).toEqual({
+      x: 100,
+      y: 90,
+      scaleX: 1,
+      scaleY: 1,
+    });
+  });
+});

package/src/components/dnd/index.tsx

@@ -8,8 +8,10 @@
  */
 
 import { DragOutlined } from '@ant-design/icons';
+import type { Modifier } from '@dnd-kit/core';
 import { DndContext, DndContextProps, DragOverlay, useDraggable, useDroppable } from '@dnd-kit/core';
-import React, { FC, useState } from 'react';
+import type { Transform } from '@dnd-kit/utilities';
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { FlowModel } from '../../models';
 import { useFlowEngine } from '../../provider';
@@ -19,18 +21,229 @@ export * from './findModelUidPosition';
 export * from './gridDragPlanner';
 
 export const EMPTY_COLUMN_UID = 'EMPTY_COLUMN';
+export const TOOLBAR_DRAG_ACTIVITY_EVENT = 'nb-toolbar-drag-activity';
+const TOOLBAR_DRAG_ANCHOR_EVENT = 'nb-toolbar-drag-anchor';
+const MENU_SUBMENU_POPUP_SELECTOR = '.ant-menu-submenu-popup';
+
+type ToolbarDragAnchorPoint = {
+  x: number;
+  y: number;
+};
+
+type ToolbarDragAnchorDetail = {
+  modelUid: string;
+  point: ToolbarDragAnchorPoint | null;
+};
+
+export const resolveOverlayAnchorTransform = ({
+  activeId,
+  active,
+  transform,
+  activeNodeRect,
+  dragAnchorPoint,
+}: {
+  activeId: string | null;
+  active: { id: string | number } | null | undefined;
+  transform: Transform;
+  activeNodeRect: { top: number; left: number } | null;
+  dragAnchorPoint: ToolbarDragAnchorPoint | null;
+}): Transform => {
+  if (!activeId || active?.id !== activeId || !dragAnchorPoint || !activeNodeRect) {
+    return transform;
+  }
+
+  return {
+    ...transform,
+    x: transform.x + dragAnchorPoint.x - activeNodeRect.left,
+    y: transform.y + dragAnchorPoint.y - activeNodeRect.top,
+  };
+};
+
+const resolveDraggableHostNode = (activatorNode: HTMLElement | null) => {
+  const ownerDocument = activatorNode?.ownerDocument;
+  const floatToolbarContainer = activatorNode?.closest<HTMLElement>('.nb-toolbar-container[data-model-uid]');
+  const toolbarModelUid = floatToolbarContainer?.getAttribute('data-model-uid');
+
+  if (!ownerDocument || !toolbarModelUid) {
+    return activatorNode;
+  }
+
+  const matchedHosts = Array.from(
+    ownerDocument.querySelectorAll<HTMLElement>(
+      `[data-has-float-menu="true"][data-float-menu-model-uid="${toolbarModelUid}"]`,
+    ),
+  );
+  const popupRoot = floatToolbarContainer.closest<HTMLElement>(MENU_SUBMENU_POPUP_SELECTOR);
+
+  if (popupRoot) {
+    return (
+      matchedHosts.find((hostNode) => hostNode.closest(MENU_SUBMENU_POPUP_SELECTOR) === popupRoot) || activatorNode
+    );
+  }
+
+  return (
+    matchedHosts.find((hostNode) => !hostNode.closest(MENU_SUBMENU_POPUP_SELECTOR)) || matchedHosts[0] || activatorNode
+  );
+};
 
 // 可拖拽图标组件
-export const DragHandler: FC<{ model: FlowModel; children: React.ReactNode }> = ({
+export const DragHandler: FC<{ model: FlowModel; children?: React.ReactNode }> = ({
   model,
   children = <DragOutlined />,
 }) => {
-  const { attributes, listeners, setNodeRef } = useDraggable({ id: model.uid });
+  const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef } = useDraggable({ id: model.uid });
+  const dragHandlerRef = useRef<HTMLSpanElement | null>(null);
+  const draggableNodeRef = useRef<HTMLElement | null>(null);
+  const pointerPressCleanupRef = useRef<(() => void) | null>(null);
+  const isDraggingRef = useRef(isDragging);
+  const isPointerPressActiveRef = useRef(false);
+  const isToolbarDragActiveRef = useRef(false);
+  const syncDraggableNodeRef = useCallback(
+    (activatorNode: HTMLElement | null) => {
+      const nextNode = resolveDraggableHostNode(activatorNode);
+
+      if (draggableNodeRef.current === nextNode) {
+        return;
+      }
+
+      draggableNodeRef.current = nextNode;
+      setNodeRef(nextNode);
+    },
+    [setNodeRef],
+  );
+  const setDragHandlerNodeRef = useCallback(
+    (node: HTMLSpanElement | null) => {
+      dragHandlerRef.current = node;
+      setActivatorNodeRef(node);
+      syncDraggableNodeRef(node);
+    },
+    [setActivatorNodeRef, syncDraggableNodeRef],
+  );
+  const dispatchToolbarDragActivity = useCallback(
+    (active: boolean) => {
+      const ownerDocument = dragHandlerRef.current?.ownerDocument;
+      if (!ownerDocument) {
+        return;
+      }
+
+      ownerDocument.dispatchEvent(
+        new CustomEvent(TOOLBAR_DRAG_ACTIVITY_EVENT, {
+          detail: { active, modelUid: model.uid },
+        }),
+      );
+    },
+    [model.uid],
+  );
+
+  const dispatchToolbarDragAnchor = useCallback(
+    (detail: Pick<ToolbarDragAnchorDetail, 'point'>) => {
+      const ownerDocument = dragHandlerRef.current?.ownerDocument;
+      if (!ownerDocument) {
+        return;
+      }
+
+      ownerDocument.dispatchEvent(
+        new CustomEvent<ToolbarDragAnchorDetail>(TOOLBAR_DRAG_ANCHOR_EVENT, {
+          detail: { modelUid: model.uid, point: detail.point },
+        }),
+      );
+    },
+    [model.uid],
+  );
+
+  const clearPointerPressListeners = useCallback(() => {
+    pointerPressCleanupRef.current?.();
+    pointerPressCleanupRef.current = null;
+  }, []);
+
+  const syncToolbarDragActivity = useCallback(() => {
+    const nextActive = isPointerPressActiveRef.current || isDraggingRef.current;
+    if (nextActive === isToolbarDragActiveRef.current) {
+      return;
+    }
+
+    isToolbarDragActiveRef.current = nextActive;
+    dispatchToolbarDragActivity(nextActive);
+  }, [dispatchToolbarDragActivity]);
+
+  const handlePointerPressEnd = useCallback(() => {
+    isPointerPressActiveRef.current = false;
+    clearPointerPressListeners();
+    syncToolbarDragActivity();
+  }, [clearPointerPressListeners, syncToolbarDragActivity]);
+
+  const registerPointerPressListeners = useCallback(() => {
+    const ownerDocument = dragHandlerRef.current?.ownerDocument;
+    const ownerWindow = ownerDocument?.defaultView;
+    if (!ownerDocument) {
+      return;
+    }
+
+    clearPointerPressListeners();
+
+    const handlePointerEnd = () => {
+      handlePointerPressEnd();
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        handlePointerPressEnd();
+      }
+    };
+
+    ownerDocument.addEventListener('pointerup', handlePointerEnd, true);
+    ownerDocument.addEventListener('pointercancel', handlePointerEnd, true);
+    ownerDocument.addEventListener('keydown', handleKeyDown, true);
+    ownerWindow?.addEventListener('blur', handlePointerEnd);
+
+    pointerPressCleanupRef.current = () => {
+      ownerDocument.removeEventListener('pointerup', handlePointerEnd, true);
+      ownerDocument.removeEventListener('pointercancel', handlePointerEnd, true);
+      ownerDocument.removeEventListener('keydown', handleKeyDown, true);
+      ownerWindow?.removeEventListener('blur', handlePointerEnd);
+    };
+  }, [clearPointerPressListeners, handlePointerPressEnd]);
+
+  useEffect(() => {
+    syncDraggableNodeRef(dragHandlerRef.current);
+  }, [syncDraggableNodeRef]);
+
+  useEffect(() => {
+    isDraggingRef.current = isDragging;
+    syncToolbarDragActivity();
+  }, [isDragging, syncToolbarDragActivity]);
+
+  useEffect(() => {
+    return () => {
+      if (isToolbarDragActiveRef.current) {
+        dispatchToolbarDragActivity(false);
+      }
+      isPointerPressActiveRef.current = false;
+      isDraggingRef.current = false;
+      isToolbarDragActiveRef.current = false;
+      clearPointerPressListeners();
+    };
+  }, [clearPointerPressListeners, dispatchToolbarDragActivity]);
+
   return (
     <span
-      ref={setNodeRef}
+      ref={setDragHandlerNodeRef}
       {...listeners}
       {...attributes}
+      onPointerDownCapture={(event) => {
+        if (event.button !== 0) {
+          return;
+        }
+
+        dispatchToolbarDragAnchor({
+          point: {
+            x: event.clientX,
+            y: event.clientY,
+          },
+        });
+        isPointerPressActiveRef.current = true;
+        syncToolbarDragActivity();
+        registerPointerPressListeners();
+      }}
       style={{
         cursor: 'grab',
       }}
@@ -78,7 +291,40 @@ export const DndProvider: FC<DndContextProps & PersistOptions> = ({
   ...restProps
 }) => {
   const [activeId, setActiveId] = useState<string | null>(null);
+  const [dragAnchorPoint, setDragAnchorPoint] = useState<ToolbarDragAnchorDetail['point']>(null);
   const flowEngine = useFlowEngine();
+
+  useEffect(() => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    const handleToolbarDragAnchor = (event: Event) => {
+      const customEvent = event as CustomEvent<ToolbarDragAnchorDetail>;
+      setDragAnchorPoint(customEvent.detail?.point || null);
+    };
+
+    document.addEventListener(TOOLBAR_DRAG_ANCHOR_EVENT, handleToolbarDragAnchor as EventListener);
+    return () => {
+      document.removeEventListener(TOOLBAR_DRAG_ANCHOR_EVENT, handleToolbarDragAnchor as EventListener);
+    };
+  }, []);
+
+  const overlayAnchorModifier = useCallback<Modifier>(
+    ({ active, activeNodeRect, transform }) => {
+      const nextTransform: Transform = resolveOverlayAnchorTransform({
+        activeId,
+        active,
+        transform,
+        activeNodeRect,
+        dragAnchorPoint,
+      });
+
+      return nextTransform;
+    },
+    [activeId, dragAnchorPoint],
+  );
+
   return (
     <DndContext
       onDragStart={(event) => {
@@ -87,6 +333,7 @@ export const DndProvider: FC<DndContextProps & PersistOptions> = ({
       }}
       onDragEnd={(event) => {
         setActiveId(null);
+        setDragAnchorPoint(null);
         // 如果没有 onDragEnd 回调，则默认调用 flowEngine 的 moveModel 方法
         if (!onDragEnd) {
           if (event.over) {
@@ -97,32 +344,45 @@ export const DndProvider: FC<DndContextProps & PersistOptions> = ({
           onDragEnd(event);
         }
       }}
+      onDragCancel={(event) => {
+        setActiveId(null);
+        setDragAnchorPoint(null);
+        restProps.onDragCancel?.(event);
+      }}
       {...restProps}
     >
       {children}
-      {createPortal(
-        <DragOverlay dropAnimation={null} zIndex={2000}>
-          {activeId && (
-            <span
-              style={{
-                display: 'inline-flex',
-                alignItems: 'center',
-                whiteSpace: 'nowrap',
-                background: '#fff',
-                border: '1px solid #1890ff',
-                borderRadius: 4,
-                padding: '4px 12px',
-                color: '#1890ff',
-                // fontSize: 18,
-                boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
-              }}
+      {typeof document !== 'undefined'
+        ? createPortal(
+            <DragOverlay
+              dropAnimation={null}
+              modifiers={[overlayAnchorModifier]}
+              zIndex={2000}
+              style={{ pointerEvents: 'none' }}
             >
-              {flowEngine.translate('Dragging')}
-            </span>
-          )}
-        </DragOverlay>,
-        document.body,
-      )}
+              {activeId && (
+                <span
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    whiteSpace: 'nowrap',
+                    background: '#fff',
+                    border: '1px solid #1890ff',
+                    borderRadius: 4,
+                    padding: '4px 12px',
+                    color: '#1890ff',
+                    pointerEvents: 'none',
+                    // fontSize: 18,
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                  }}
+                >
+                  {flowEngine.translate('Dragging')}
+                </span>
+              )}
+            </DragOverlay>,
+            document.body,
+          )
+        : null}
     </DndContext>
   );
 };

package/src/components/settings/wrappers/contextual/DefaultSettingsIcon.tsx

@@ -27,6 +27,26 @@ import { useNiceDropdownMaxHeight } from '../../../../hooks';
 import { SwitchWithTitle } from '../component/SwitchWithTitle';
 import { SelectWithTitle } from '../component/SelectWithTitle';
 import type { FlowSettingsContext } from '../../../../flowContext';
+
+const findExtraMenuItemByKey = (
+  items: FlowModelExtraMenuItem[],
+  targetKey: string,
+): FlowModelExtraMenuItem | undefined => {
+  for (const item of items) {
+    const itemKey = String(item?.key ?? '');
+    if (itemKey === targetKey) {
+      return item;
+    }
+    if (item.children?.length) {
+      const matched = findExtraMenuItemByKey(item.children, targetKey);
+      if (matched) {
+        return matched;
+      }
+    }
+  }
+  return undefined;
+};
+
 // Type definitions for better type safety
 interface StepInfo {
   stepKey: string;
@@ -473,7 +493,11 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
         return;
       }
 
-      const extra = extraMenuItems.find((it) => it?.key === originalKey || it?.key === cleanKey);
+      const extra =
+        findExtraMenuItemByKey(extraMenuItems, originalKey) || findExtraMenuItemByKey(extraMenuItems, cleanKey);
+      if (extra?.disabled) {
+        return;
+      }
       if (extra?.onClick) {
         closeDropdown();
         extra.onClick();

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

@@ -27,9 +27,9 @@ import {
 } from './useFloatToolbarPortal';
 import { useFloatToolbarVisibility } from './useFloatToolbarVisibility';
 
-const TOOLBAR_Z_INDEX = 999;
-
 type ToolbarPosition = 'inside' | 'above' | 'below';
+const TOOLBAR_ITEM_WIDTH = 19;
+const DEFAULT_POPUP_BASE_Z_INDEX = 1000;
 
 interface BaseFloatContextMenuProps {
   children?: React.ReactNode;
@@ -64,6 +64,10 @@ interface BaseFloatContextMenuProps {
    * Extra toolbar items to add to this context menu instance
    */
   extraToolbarItems?: ToolbarItemConfig[];
+  /**
+   * @default true
+   */
+  showDynamicFlowsEditor?: boolean;
   /**
    * @default 'inside'
    */
@@ -97,12 +101,14 @@ const toolbarContainerStyles = ({
   showBackground,
   showBorder,
   ctx,
+  toolbarZIndex,
 }: {
   showBackground: boolean;
   showBorder: boolean;
   ctx: any;
+  toolbarZIndex: number;
 }) => css`
-  z-index: ${TOOLBAR_Z_INDEX};
+  z-index: ${toolbarZIndex};
   opacity: 0;
   pointer-events: none;
   overflow: visible;
@@ -294,6 +300,7 @@ const renderToolbarItems = (
   flowEngine: FlowEngine,
   settingsMenuLevel?: number,
   extraToolbarItems?: ToolbarItemConfig[],
+  showDynamicFlowsEditor = true,
   onSettingsMenuOpenChange?: (open: boolean) => void,
   getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement,
 ) => {
@@ -304,6 +311,9 @@ const renderToolbarItems = (
 
   return allToolbarItems
     .filter((itemConfig: ToolbarItemConfig) => {
+      if (itemConfig.key === 'dynamic-flows-editor' && showDynamicFlowsEditor === false) {
+        return false;
+      }
       return itemConfig.visible ? itemConfig.visible(model) : true;
     })
     .map((itemConfig: ToolbarItemConfig) => {
@@ -332,6 +342,7 @@ const buildToolbarContainerClassName = ({
   showBackground,
   showBorder,
   ctx,
+  toolbarZIndex,
   portalRenderSnapshot,
   isToolbarVisible,
   className,
@@ -339,12 +350,13 @@ const buildToolbarContainerClassName = ({
   showBackground: boolean;
   showBorder: boolean;
   ctx: any;
+  toolbarZIndex: number;
   portalRenderSnapshot: ToolbarPortalRenderSnapshot | null;
   isToolbarVisible: boolean;
   className?: string;
 }) =>
   [
-    toolbarContainerStyles({ showBackground, showBorder, ctx }),
+    toolbarContainerStyles({ showBackground, showBorder, ctx, toolbarZIndex }),
     'nb-toolbar-portal',
     portalRenderSnapshot?.positioningMode === 'absolute' ? 'nb-toolbar-portal-absolute' : 'nb-toolbar-portal-fixed',
     isToolbarVisible ? 'nb-toolbar-visible' : '',
@@ -356,11 +368,13 @@ const buildToolbarContainerClassName = ({
 const buildToolbarContainerStyle = (
   portalRect: ToolbarPortalRect,
   toolbarStyle?: React.CSSProperties,
+  toolbarItemCount = 0,
 ): React.CSSProperties => ({
   top: `${portalRect.top}px`,
   left: `${portalRect.left}px`,
   width: `${portalRect.width}px`,
   height: `${portalRect.height}px`,
+  minWidth: toolbarItemCount ? `${TOOLBAR_ITEM_WIDTH * toolbarItemCount}px` : undefined,
   ...omitToolbarPortalInsetStyle(toolbarStyle),
 });
 
@@ -514,6 +528,7 @@ const FlowsFloatContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
     showDragHandle = false,
     settingsMenuLevel,
     extraToolbarItems,
+    showDynamicFlowsEditor = true,
     toolbarStyle,
     toolbarPosition = 'inside',
   }: ModelProvidedProps) => {
@@ -575,6 +590,7 @@ const FlowsFloatContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
               flowEngine,
               settingsMenuLevel,
               extraToolbarItems,
+              showDynamicFlowsEditor,
               handleSettingsMenuOpenChange,
               getPopupContainer,
             )
@@ -588,6 +604,7 @@ const FlowsFloatContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
         settingsMenuLevel,
         showCopyUidButton,
         showDeleteButton,
+        showDynamicFlowsEditor,
       ],
     );
 
@@ -625,15 +642,17 @@ const FlowsFloatContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
       return <>{children}</>;
     }
 
+    const toolbarZIndex = (model.context.themeToken?.zIndexPopupBase || DEFAULT_POPUP_BASE_Z_INDEX) + 1;
     const toolbarContainerClassName = buildToolbarContainerClassName({
       showBackground,
       showBorder,
       ctx: model.context,
+      toolbarZIndex,
       portalRenderSnapshot,
       isToolbarVisible,
       className,
     });
-    const toolbarContainerStyle = buildToolbarContainerStyle(portalRect, toolbarStyle);
+    const toolbarContainerStyle = buildToolbarContainerStyle(portalRect, toolbarStyle, toolbarItems.length);
 
     const toolbarNode = shouldRenderToolbar ? (
       <div