@nocobase/flow-engine 2.0.0-alpha.2

package/src/components/__tests__/flow-model-render-error-fallback.test.tsx

@@ -0,0 +1,226 @@
+/**
+ * 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 React from 'react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, cleanup, waitFor } from '@testing-library/react';
+import { App, ConfigProvider } from 'antd';
+import { FlowEngine } from '../../flowEngine';
+import { FlowModel, ModelRenderMode } from '../../models/flowModel';
+import { DefaultSettingsIcon } from '../settings/wrappers/contextual/DefaultSettingsIcon';
+import { FlowEngineProvider } from '../../provider';
+import { FlowModelRenderer } from '../FlowModelRenderer';
+
+// ---------------- Pure Mocks ----------------
+// Intercept Dropdown (capture menu) and Modal.confirm (auto-confirm), stub others
+const dropdownMenus: any[] = [];
+vi.mock('antd', () => {
+  const Dropdown = (props: any) => {
+    (globalThis as any).__lastDropdownMenu = props.menu;
+    dropdownMenus.push(props.menu);
+    return React.createElement('span', { 'data-testid': 'dropdown' }, props.children);
+  };
+  const Modal = {
+    confirm: (opts: any) => {
+      if (opts && typeof opts.onOk === 'function') {
+        return opts.onOk();
+      }
+      return {} as any;
+    },
+    error: vi.fn(),
+  };
+  const App = Object.assign(({ children }: any) => React.createElement(React.Fragment, null, children), {
+    useApp: () => ({ message: { success: () => {}, error: () => {}, info: () => {} } }),
+  });
+  const ConfigProvider = ({ children }: any) => React.createElement(React.Fragment, null, children);
+  const Button = (props: any) => React.createElement('button', props, props.children ?? 'Button');
+  const Result = (props: any) => React.createElement('div', { 'data-testid': 'result' }, props.children ?? 'Result');
+  const Collapse = Object.assign((props: any) => React.createElement('div', null, props.children ?? 'Collapse'), {
+    Panel: (props: any) => React.createElement('div', null, props.children ?? 'Panel'),
+  });
+  const Space = ({ children }: any) => React.createElement('div', null, children);
+  const FormItem = (props: any) => React.createElement('div', null, props.children ?? 'FormItem');
+  const Form = Object.assign((props: any) => React.createElement('form', null, props.children ?? 'Form'), {
+    Item: FormItem,
+    useForm: () => [{ setFieldsValue: (_: any) => {} }],
+  });
+  const Input: any = (props: any) => React.createElement('input', props);
+  Input.TextArea = (props: any) => React.createElement('textarea', props);
+  const InputNumber = (props: any) => React.createElement('input', { ...props, type: 'number' });
+  const Select = (props: any) => React.createElement('select', props);
+  const Switch = (props: any) => React.createElement('input', { ...props, type: 'checkbox' });
+  const Alert = (props: any) => React.createElement('div', { role: 'alert' }, props.message ?? 'Alert');
+  const Skeleton: any = () => React.createElement('div', null, 'Skeleton');
+  Skeleton.Button = (props: any) => React.createElement('div', null, 'Skeleton.Button');
+  const Spin = (props: any) => React.createElement('div', null, props.children ?? 'Spin');
+  const Typography = {
+    Paragraph: ({ children }: any) => React.createElement('p', null, children ?? 'Paragraph'),
+    Text: ({ children }: any) => React.createElement('span', null, children ?? 'Text'),
+  };
+  return {
+    Dropdown,
+    Modal,
+    App,
+    ConfigProvider,
+    Button,
+    Result,
+    Typography,
+    Collapse,
+    Space,
+    Form,
+    Input,
+    InputNumber,
+    Select,
+    Switch,
+    Alert,
+    Skeleton,
+    Spin,
+  } as any;
+});
+
+// ---------------- Helpers ----------------
+const clickDeleteFromLastDropdown = async () => {
+  await waitFor(() => {
+    const menu = (globalThis as any).__lastDropdownMenu;
+    expect(menu).toBeTruthy();
+  });
+  const menu = (globalThis as any).__lastDropdownMenu;
+  menu.onClick?.({ key: 'delete' });
+};
+
+// ---------------- Tests ----------------
+describe('Delete problematic model via FlowSettings menu', () => {
+  beforeEach(() => {
+    dropdownMenus.length = 0;
+    (globalThis as any).__lastDropdownMenu = undefined;
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it('deletes a broken top-level model when rendering via FlowModelRenderer throws', async () => {
+    class BrokenModel extends FlowModel {
+      render() {
+        throw new Error('boom-top');
+      }
+    }
+
+    const engine = new FlowEngine();
+    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(
+      <ConfigProvider>
+        <App>
+          <FlowEngineProvider engine={engine}>
+            <FlowModelRenderer model={model} showFlowSettings showErrorFallback skipApplyAutoFlows />
+          </FlowEngineProvider>
+        </App>
+      </ConfigProvider>,
+    );
+
+    await clickDeleteFromLastDropdown();
+    expect(engine.getModel(model.uid)).toBeUndefined();
+  });
+
+  it('deletes a broken child in array when child FlowModelRenderer throws', async () => {
+    class ParentModel extends FlowModel<{ subModels: { items: FlowModel[] } }> {
+      render() {
+        const items = (this.subModels as any).items || [];
+        return (
+          <div>
+            {items.map((m: FlowModel) => (
+              <FlowModelRenderer key={m.uid} model={m} showFlowSettings showErrorFallback skipApplyAutoFlows />
+            ))}
+          </div>
+        );
+      }
+    }
+    class BrokenChild extends FlowModel {
+      render() {
+        throw new Error('boom-child');
+      }
+    }
+
+    const engine = new FlowEngine();
+    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;
+    parent.addSubModel('items', child);
+    // theme tokens
+    parent.context.defineProperty('themeToken', { value: { borderRadiusLG: 8 } });
+    child.context.defineProperty('themeToken', { value: { borderRadiusLG: 8 } });
+
+    render(
+      <ConfigProvider>
+        <App>
+          <FlowEngineProvider engine={engine}>
+            <FlowModelRenderer model={parent} skipApplyAutoFlows />
+          </FlowEngineProvider>
+        </App>
+      </ConfigProvider>,
+    );
+
+    await clickDeleteFromLastDropdown();
+    expect(engine.getModel(child.uid)).toBeUndefined();
+    const remain = (parent.subModels as any).items || [];
+    expect(remain.find((m: FlowModel) => m.uid === child.uid)).toBeUndefined();
+  });
+
+  it('deletes a renderFunction child when child FlowModelRenderer throws before returning fn', async () => {
+    class ParentModel extends FlowModel<{ subModels: { cells: FlowModel[] } }> {
+      render() {
+        const cells = (this.subModels as any).cells || [];
+        return (
+          <div>
+            {cells.map((m: FlowModel) => (
+              <FlowModelRenderer key={m.uid} model={m} showFlowSettings showErrorFallback skipApplyAutoFlows />
+            ))}
+          </div>
+        );
+      }
+    }
+    class RenderFnChild extends FlowModel {
+      static override renderMode = ModelRenderMode.RenderFunction;
+      render() {
+        throw new Error('boom-render-fn');
+      }
+    }
+
+    const engine = new FlowEngine();
+    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;
+    parent.addSubModel('cells', child);
+    parent.context.defineProperty('themeToken', { value: { borderRadiusLG: 8 } });
+    child.context.defineProperty('themeToken', { value: { borderRadiusLG: 8 } });
+
+    render(
+      <ConfigProvider>
+        <App>
+          <FlowEngineProvider engine={engine}>
+            <FlowModelRenderer model={parent} skipApplyAutoFlows />
+          </FlowEngineProvider>
+        </App>
+      </ConfigProvider>,
+    );
+
+    await clickDeleteFromLastDropdown();
+    expect(engine.getModel(child.uid)).toBeUndefined();
+    const remain = (parent.subModels as any).cells || [];
+    expect(remain.find((m: FlowModel) => m.uid === child.uid)).toBeUndefined();
+  });
+});

package/src/components/common/FlowSettingsButton.tsx

@@ -0,0 +1,30 @@
+/**
+ * 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 { Button, ButtonProps } from 'antd';
+import React, { FC } from 'react';
+import { withFlowDesignMode } from './withFlowDesignMode';
+
+const FlowSettingsButtonCore: FC<ButtonProps> = (props) => {
+  return (
+    <Button
+      {...props}
+      type="dashed"
+      style={{
+        ...props.style,
+        borderColor: 'var(--colorSettings)',
+        color: 'var(--colorSettings)',
+        alignSelf: 'flex-start',
+      }}
+    />
+  );
+};
+
+export const FlowSettingsButton = withFlowDesignMode(FlowSettingsButtonCore);
+FlowSettingsButton.displayName = 'FlowSettingsButton';

package/src/components/common/index.ts

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+
+export * from './FlowSettingsButton';

package/src/components/common/withFlowDesignMode.tsx

@@ -0,0 +1,49 @@
+/**
+ * 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 React from 'react';
+import { observer } from '@formily/reactive-react';
+import { useFlowEngine } from '../../provider';
+
+/**
+ * 高阶组件：仅在设计模式启用时渲染子组件
+ *
+ * @param WrappedComponent 要包装的组件
+ * @returns 包装后的组件，只在 flowSettings.enabled 为 true 时渲染
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = withFlowDesignMode(({ model, ...props }) => {
+ *   // 这些计算只在设计模式启用时才会执行
+ *   const expensiveData = useMemo(() => complexCalculation(), []);
+ *
+ *   return <div>{expensiveData}</div>;
+ * });
+ * ```
+ */
+export function withFlowDesignMode<P extends Record<string, any>>(WrappedComponent: React.ComponentType<P>) {
+  const WithFlowDesignModeComponent = observer((props: P) => {
+    const flowEngine = useFlowEngine();
+
+    // 如果设计模式未启用，直接返回 null，避免执行子组件的计算
+    if (!flowEngine.flowSettings.enabled) {
+      return null;
+    }
+
+    // 只有在设计模式启用时才渲染实际组件
+    return <WrappedComponent {...props} />;
+  });
+
+  // 保持原组件的 displayName 用于调试
+  WithFlowDesignModeComponent.displayName = `withFlowDesignMode(${
+    WrappedComponent.displayName || WrappedComponent.name || 'Component'
+  })`;
+
+  return WithFlowDesignModeComponent;
+}

package/src/components/dnd/getMousePositionOnElement.ts

@@ -0,0 +1,115 @@
+/**
+ * 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.
+ */
+
+// 定义位置枚举
+export enum ElementPosition {
+  TOP = 'top',
+  BOTTOM = 'bottom',
+  LEFT = 'left',
+  RIGHT = 'right',
+  TOP_EDGE = 'top-edge',
+  BOTTOM_EDGE = 'bottom-edge',
+  LEFT_EDGE = 'left-edge',
+  RIGHT_EDGE = 'right-edge',
+}
+
+interface MousePosition {
+  x: number;
+  y: number;
+}
+
+interface ElementBounds {
+  x: number; // 左上角x坐标
+  y: number; // 左上角y坐标
+  width: number; // 元素宽度
+  height: number; // 元素高度
+}
+
+interface GetMousePositionOptions {
+  initialMousePos: MousePosition;
+  mouseOffset: MousePosition;
+  elementBounds: ElementBounds;
+  edgeThreshold?: number; // 边缘区域厚度，默认为5px
+  topBottomHeightRatio?: number; // 上下区域高度占比，默认为0.25（四分之一）
+}
+
+/**
+ * 计算鼠标指针在元素上的位置
+ *
+ * 区域划分逻辑：
+ * 1. 上区域：宽度=元素宽度，高度=元素高度*topBottomHeightRatio，位于元素顶部
+ * 2. 下区域：宽度=元素宽度，高度=元素高度*topBottomHeightRatio，位于元素底部
+ * 3. 左区域：剩余中间部分的左侧
+ * 4. 右区域：剩余中间部分的右侧
+ * 5. 边缘区域：在各个区域的边缘处，厚度为edgeThreshold
+ *
+ * @param options 配置选项
+ * @returns 鼠标在元素上的位置
+ */
+export const getMousePositionOnElement = ({
+  initialMousePos,
+  mouseOffset,
+  elementBounds,
+  edgeThreshold = 5,
+  topBottomHeightRatio = 0.25,
+}: GetMousePositionOptions): ElementPosition => {
+  // 计算当前鼠标的实际坐标
+  const currentMouseX = initialMousePos.x + mouseOffset.x;
+  const currentMouseY = initialMousePos.y + mouseOffset.y;
+
+  // 计算鼠标相对于元素的坐标
+  const relativeX = currentMouseX - elementBounds.x;
+  const relativeY = currentMouseY - elementBounds.y;
+
+  // 如果鼠标不在元素范围内，返回最接近的方向
+  if (relativeX < 0 || relativeX > elementBounds.width || relativeY < 0 || relativeY > elementBounds.height) {
+    if (relativeY < 0) return ElementPosition.TOP;
+    if (relativeY > elementBounds.height) return ElementPosition.BOTTOM;
+    if (relativeX < 0) return ElementPosition.LEFT;
+    return ElementPosition.RIGHT;
+  }
+
+  // 计算区域边界
+  const topBottomHeight = elementBounds.height * topBottomHeightRatio;
+  const middleAreaTop = topBottomHeight;
+  const middleAreaBottom = elementBounds.height - topBottomHeight;
+  const middleAreaHeight = middleAreaBottom - middleAreaTop;
+
+  // 判断在哪个主要区域
+  if (relativeY <= topBottomHeight) {
+    // 上区域
+    if (relativeY <= edgeThreshold) {
+      return ElementPosition.TOP_EDGE;
+    }
+    return ElementPosition.TOP;
+  } else if (relativeY >= middleAreaBottom) {
+    // 下区域
+    if (relativeY >= elementBounds.height - edgeThreshold) {
+      return ElementPosition.BOTTOM_EDGE;
+    }
+    return ElementPosition.BOTTOM;
+  } else {
+    // 中间区域（左右区域）
+    const middleAreaCenterX = elementBounds.width / 2;
+
+    if (relativeX <= middleAreaCenterX) {
+      // 左区域
+      if (relativeX <= edgeThreshold) {
+        return ElementPosition.LEFT_EDGE;
+      }
+      return ElementPosition.LEFT;
+    } else {
+      // 右区域
+      if (relativeX >= elementBounds.width - edgeThreshold) {
+        return ElementPosition.RIGHT_EDGE;
+      }
+      return ElementPosition.RIGHT;
+    }
+  }
+};

package/src/components/dnd/index.tsx

@@ -0,0 +1,128 @@
+/**
+ * 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 { DragOutlined } from '@ant-design/icons';
+import { DndContext, DndContextProps, DragOverlay, useDraggable, useDroppable } from '@dnd-kit/core';
+import React, { FC, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { FlowModel } from '../../models';
+import { useFlowEngine } from '../../provider';
+import { PersistOptions } from '../../types';
+
+export * from './getMousePositionOnElement';
+export * from './moveBlock';
+
+export const EMPTY_COLUMN_UID = 'EMPTY_COLUMN';
+
+// 可拖拽图标组件
+export const DragHandler: FC<{ model: FlowModel; children: React.ReactNode }> = ({
+  model,
+  children = <DragOutlined />,
+}) => {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({ id: model.uid });
+  return (
+    <span
+      ref={setNodeRef}
+      {...listeners}
+      {...attributes}
+      style={{
+        cursor: 'grab',
+      }}
+    >
+      {children}
+    </span>
+  );
+};
+
+// 通用 Droppable 组件
+export const Droppable: FC<{ model: FlowModel<any>; children: React.ReactNode }> = ({ model, children }) => {
+  const { setNodeRef, isOver, active } = useDroppable({ id: model.uid });
+  const isActiveDroppable = active?.id === model.uid;
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        position: 'relative',
+        opacity: isActiveDroppable ? 0.3 : 1,
+        outline: isActiveDroppable ? '2px solid var(--colorBorderSettingsHover)' : 'none',
+        borderRadius: isActiveDroppable ? model.context.themeToken.borderRadiusLG : 'none',
+      }}
+    >
+      {children}
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: isOver ? 'var(--colorBgSettingsHover)' : 'transparent',
+          pointerEvents: 'none',
+        }}
+      ></div>
+    </div>
+  );
+};
+
+// 提供一个封装了 DragOverlay 的 DndProvider 组件，继承 DndContext 的所有 props
+export const DndProvider: FC<DndContextProps & PersistOptions> = ({
+  persist = true,
+  children,
+  onDragEnd,
+  ...restProps
+}) => {
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const flowEngine = useFlowEngine();
+  return (
+    <DndContext
+      onDragStart={(event) => {
+        setActiveId(event.active.id as string);
+        restProps.onDragStart?.(event);
+      }}
+      onDragEnd={(event) => {
+        setActiveId(null);
+        // 如果没有 onDragEnd 回调，则默认调用 flowEngine 的 moveModel 方法
+        if (!onDragEnd) {
+          if (event.over) {
+            flowEngine.moveModel(event.active.id, event.over.id, { persist });
+          }
+        } else {
+          // 如果有 onDragEnd 回调，则调用它
+          onDragEnd(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)',
+              }}
+            >
+              {flowEngine.translate('Dragging')}
+            </span>
+          )}
+        </DragOverlay>,
+        document.body,
+      )}
+    </DndContext>
+  );
+};