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

package/src/__tests__/viewScopedFlowEngine.test.ts

@@ -256,11 +256,11 @@ describe('ViewScopedFlowEngine', () => {
 
     // Both children should return null from hydration because parent has flowSettingsEnabled
     // This is the bug fix: previously only children with their own flowSettingsEnabled would return null
-    const result1 = (scoped as any).hydrateModelFromPreviousEngines({
+    const result1 = await (scoped as any).hydrateModelFromPreviousEngines({
       parentId: 'parent-with-settings',
       subKey: 'popup',
     });
-    const result2 = (scoped as any).hydrateModelFromPreviousEngines({
+    const result2 = await (scoped as any).hydrateModelFromPreviousEngines({
       parentId: 'parent-with-settings',
       subKey: 'items',
     });
@@ -298,7 +298,7 @@ describe('ViewScopedFlowEngine', () => {
     const scoped = createViewScopedEngine(root);
 
     // Call the private method hydrateModelFromPreviousEngines directly
-    const result = (scoped as any).hydrateModelFromPreviousEngines({
+    const result = await (scoped as any).hydrateModelFromPreviousEngines({
       parentId: 'parent-normal',
       subKey: 'content',
     });

package/src/components/FieldModelRenderer.tsx

@@ -7,7 +7,8 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { FlowModelRenderer, FlowModelRendererProps } from '@nocobase/flow-engine';
+import type { FlowModelRendererProps } from './FlowModelRenderer';
+import { FlowModelRenderer } from './FlowModelRenderer';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useRef } from 'react';
 

package/src/components/FlowModelRenderer.tsx

@@ -69,7 +69,9 @@ export interface FlowModelRendererProps {
         showBackground?: boolean;
         showBorder?: boolean;
         showDragHandle?: boolean;
-        /** 自定义工具栏样式 */
+        /** 是否显示事件流入口，默认 true */
+        showDynamicFlowsEditor?: boolean;
+        /** 自定义工具栏样式，`top/left/right/bottom` 会作为 portal overlay 的 inset 使用 */
         style?: React.CSSProperties;
         /**
          * @default 'inside'
@@ -112,6 +114,8 @@ const FlowModelRendererWithAutoFlows: React.FC<{
         showBackground?: boolean;
         showBorder?: boolean;
         showDragHandle?: boolean;
+        showDynamicFlowsEditor?: boolean;
+        /** `top/left/right/bottom` 会作为 portal overlay 的 inset 使用 */
         style?: React.CSSProperties;
         /**
          * @default 'inside'
@@ -126,6 +130,7 @@ const FlowModelRendererWithAutoFlows: React.FC<{
   settingsMenuLevel?: number;
   extraToolbarItems?: ToolbarItemConfig[];
   fallback?: React.ReactNode;
+  useCache?: boolean;
 }> = observer(
   ({
     model,
@@ -138,12 +143,12 @@ const FlowModelRendererWithAutoFlows: React.FC<{
     settingsMenuLevel,
     extraToolbarItems,
     fallback,
+    useCache,
   }) => {
     // hidden 占位由模型自身处理；无需在此注入
-
     const { loading: pending, error: autoFlowsError } = useApplyAutoFlows(model, inputArgs, {
       throwOnError: false,
-      useCache: model.context.useCache,
+      useCache,
     });
     // 将错误下沉到 model 实例上，供内容层读取（类型安全的 WeakMap 存储）
     setAutoFlowError(model, autoFlowsError || null);
@@ -182,6 +187,8 @@ const FlowModelRendererCore: React.FC<{
         showBackground?: boolean;
         showBorder?: boolean;
         showDragHandle?: boolean;
+        showDynamicFlowsEditor?: boolean;
+        /** `top/left/right/bottom` 会作为 portal overlay 的 inset 使用 */
         style?: React.CSSProperties;
         /**
          * @default 'inside'
@@ -251,6 +258,7 @@ const FlowModelRendererCore: React.FC<{
             showBackground={_.isObject(showFlowSettings) ? showFlowSettings.showBackground : undefined}
             showBorder={_.isObject(showFlowSettings) ? showFlowSettings.showBorder : undefined}
             showDragHandle={_.isObject(showFlowSettings) ? showFlowSettings.showDragHandle : undefined}
+            showDynamicFlowsEditor={_.isObject(showFlowSettings) ? showFlowSettings.showDynamicFlowsEditor : undefined}
             settingsMenuLevel={settingsMenuLevel}
             extraToolbarItems={extraToolbarItems}
             toolbarStyle={_.isObject(showFlowSettings) ? showFlowSettings.style : undefined}
@@ -297,6 +305,7 @@ const FlowModelRendererCore: React.FC<{
             showBackground={_.isObject(showFlowSettings) ? showFlowSettings.showBackground : undefined}
             showBorder={_.isObject(showFlowSettings) ? showFlowSettings.showBorder : undefined}
             showDragHandle={_.isObject(showFlowSettings) ? showFlowSettings.showDragHandle : undefined}
+            showDynamicFlowsEditor={_.isObject(showFlowSettings) ? showFlowSettings.showDynamicFlowsEditor : undefined}
             settingsMenuLevel={settingsMenuLevel}
             extraToolbarItems={extraToolbarItems}
             toolbarStyle={_.isObject(showFlowSettings) ? showFlowSettings.style : undefined}
@@ -346,13 +355,15 @@ export const FlowModelRenderer: React.FC<FlowModelRendererProps> = observer(
     extraToolbarItems,
     useCache,
   }) => {
+    const resolvedUseCache = typeof useCache === 'boolean' ? useCache : model?.context?.useCache;
+
     useEffect(() => {
-      if (model?.context) {
+      if (model?.context && typeof resolvedUseCache !== 'undefined') {
         model.context.defineProperty('useCache', {
-          value: typeof useCache === 'boolean' ? useCache : model.context.useCache,
+          value: resolvedUseCache,
         });
       }
-    }, [model?.context, useCache]);
+    }, [model?.context, resolvedUseCache]);
 
     if (!model || typeof model.render !== 'function') {
       // 可以选择渲染 null 或者一个错误/提示信息
@@ -373,6 +384,7 @@ export const FlowModelRenderer: React.FC<FlowModelRendererProps> = observer(
         settingsMenuLevel={settingsMenuLevel}
         extraToolbarItems={extraToolbarItems}
         fallback={fallback}
+        useCache={resolvedUseCache}
       />
     );
 

package/src/components/MobilePopup.tsx

@@ -8,11 +8,13 @@
  */
 
 import { ConfigProvider } from 'antd';
-import { Popup } from 'antd-mobile';
 import React, { FC, ReactNode, useMemo } from 'react';
-import { CloseOutline } from 'antd-mobile-icons';
 import { useMobileActionDrawerStyle } from './MobilePopup.style';
 import { useTranslation } from 'react-i18next';
+import { lazy } from '../lazy-helper';
+
+const { Popup } = lazy(() => import('antd-mobile'), 'Popup');
+const { CloseOutline } = lazy(() => import('antd-mobile-icons'), 'CloseOutline');
 
 interface MobilePopupProps {
   title?: string;

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

@@ -38,9 +38,8 @@ describe('FlowModelRenderer', () => {
   test('should pass useCache to useApplyAutoFlows and set it on context', async () => {
     const { unmount } = renderWithProvider(<FlowModelRenderer model={model} useCache={true} />);
 
-    // Check if dispatchEvent was called with useCache: true
-    // useApplyAutoFlows calls dispatchEvent('beforeRender', inputArgs, { useCache })
     await waitFor(() => {
+      expect(model.dispatchEvent).toHaveBeenCalledTimes(1);
       expect(model.dispatchEvent).toHaveBeenCalledWith(
         'beforeRender',
         undefined,
@@ -58,6 +57,7 @@ describe('FlowModelRenderer', () => {
     const { unmount } = renderWithProvider(<FlowModelRenderer model={model} useCache={false} />);
 
     await waitFor(() => {
+      expect(model.dispatchEvent).toHaveBeenCalledTimes(1);
       expect(model.dispatchEvent).toHaveBeenCalledWith(
         'beforeRender',
         undefined,
@@ -74,6 +74,7 @@ describe('FlowModelRenderer', () => {
     const { unmount } = renderWithProvider(<FlowModelRenderer model={model} />);
 
     await waitFor(() => {
+      expect(model.dispatchEvent).toHaveBeenCalledTimes(1);
       expect(model.dispatchEvent).toHaveBeenCalledWith(
         'beforeRender',
         undefined,
@@ -86,4 +87,66 @@ describe('FlowModelRenderer', () => {
 
     unmount();
   });
+
+  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({
+      uid: 'stateful-model',
+      flowEngine: statefulEngine,
+    });
+    const executorSpy = vi.spyOn((statefulEngine as any).executor, 'dispatchEvent').mockResolvedValue([]);
+
+    const firstRender = renderWithProvider(<FlowModelRenderer model={statefulModel} />);
+    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 });
+    await new Promise((resolve) => setTimeout(resolve, 150));
+    expect(executorSpy.mock.calls.length).toBe(0);
+
+    const secondRender = renderWithProvider(<FlowModelRenderer model={statefulModel} />);
+    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');
+    expect(inputArgs).toBeUndefined();
+    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/__tests__/flow-model-render-error-fallback.test.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, cleanup, waitFor } from '@testing-library/react';
+import { render, cleanup, fireEvent, waitFor } from '@testing-library/react';
 import { App, ConfigProvider } from 'antd';
 import { FlowEngine } from '../../flowEngine';
 import { FlowModel, ModelRenderMode } from '../../models/flowModel';
@@ -94,6 +94,16 @@ const clickDeleteFromLastDropdown = async () => {
   menu.onClick?.({ key: 'delete' });
 };
 
+const getHost = (element: HTMLElement) => element.closest('[data-has-float-menu="true"]') as HTMLDivElement;
+
+const hoverHostAndClickDelete = async (element: HTMLElement) => {
+  const host = getHost(element);
+  if (host) {
+    fireEvent.mouseEnter(host);
+  }
+  await clickDeleteFromLastDropdown();
+};
+
 // ---------------- Tests ----------------
 describe('Delete problematic model via FlowSettings menu', () => {
   beforeEach(() => {
@@ -114,13 +124,13 @@ describe('Delete problematic model via FlowSettings menu', () => {
     }
 
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     engine.registerModels({ BrokenModel });
     const model = engine.createModel({ use: 'BrokenModel', uid: 'broken-top-2' }) as BrokenModel;
     // satisfy FlowsFloatContextMenu styles
     model.context.defineProperty('themeToken', { value: { borderRadiusLG: 8 } });
 
-    render(
+    const { findByTestId } = render(
       <ConfigProvider>
         <App>
           <FlowEngineProvider engine={engine}>
@@ -130,7 +140,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
       </ConfigProvider>,
     );
 
-    await clickDeleteFromLastDropdown();
+    await hoverHostAndClickDelete(await findByTestId('result'));
     expect(engine.getModel(model.uid)).toBeUndefined();
   });
 
@@ -154,7 +164,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
     }
 
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     engine.registerModels({ ParentModel, BrokenChild });
     const parent = engine.createModel({ use: 'ParentModel', uid: 'parent-3' }) as ParentModel;
     const child = engine.createModel({ use: 'BrokenChild', uid: 'child-3' }) as BrokenChild;
@@ -163,7 +173,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
     parent.context.defineProperty('themeToken', { value: { borderRadiusLG: 8 } });
     child.context.defineProperty('themeToken', { value: { borderRadiusLG: 8 } });
 
-    render(
+    const { findByTestId } = render(
       <ConfigProvider>
         <App>
           <FlowEngineProvider engine={engine}>
@@ -173,7 +183,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
       </ConfigProvider>,
     );
 
-    await clickDeleteFromLastDropdown();
+    await hoverHostAndClickDelete(await findByTestId('result'));
     expect(engine.getModel(child.uid)).toBeUndefined();
     const remain = (parent.subModels as any).items || [];
     expect(remain.find((m: FlowModel) => m.uid === child.uid)).toBeUndefined();
@@ -200,7 +210,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
     }
 
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     engine.registerModels({ ParentModel, RenderFnChild });
     const parent = engine.createModel({ use: 'ParentModel', uid: 'parent-4' }) as ParentModel;
     const child = engine.createModel({ use: 'RenderFnChild', uid: 'cell-4' }) as RenderFnChild;
@@ -208,7 +218,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
     parent.context.defineProperty('themeToken', { value: { borderRadiusLG: 8 } });
     child.context.defineProperty('themeToken', { value: { borderRadiusLG: 8 } });
 
-    render(
+    const { findByTestId } = render(
       <ConfigProvider>
         <App>
           <FlowEngineProvider engine={engine}>
@@ -218,7 +228,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
       </ConfigProvider>,
     );
 
-    await clickDeleteFromLastDropdown();
+    await hoverHostAndClickDelete(await findByTestId('result'));
     expect(engine.getModel(child.uid)).toBeUndefined();
     const remain = (parent.subModels as any).cells || [];
     expect(remain.find((m: FlowModel) => m.uid === child.uid)).toBeUndefined();