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

package/src/views/useDrawer.tsx

@@ -9,22 +9,50 @@
 
 import * as React from 'react';
 import DOMPurify from 'dompurify';
-import { observer } from '..';
+import { autorun, observable, observer } from '..';
 import { FlowContext, FlowEngineContext } from '../flowContext';
 import { FlowViewContextProvider } from '../FlowContextProvider';
-import { createViewMeta } from './createViewMeta';
+import { registerPopupVariable } from './createViewMeta';
 import DrawerComponent from './DrawerComponent';
 import usePatchElement from './usePatchElement';
 import { FlowEngineProvider } from '../provider';
 import { createViewScopedEngine } from '../ViewScopedFlowEngine';
 
-let uuid = 0;
-
 export function useDrawer() {
   const holderRef = React.useRef(null);
+  const drawerList = React.useMemo(() => observable.shallow({ value: [] }), []);
+
+  const RenderNestedDrawer = React.memo((props: { index: number }) => {
+    const { index } = props;
+    const [RenderDrawer, setRenderDrawer] = React.useState<React.ComponentType | null>(null);
+
+    React.useEffect(() => {
+      autorun(() => {
+        const list = drawerList.value;
+        if (list[index] && RenderDrawer !== list[index]) {
+          setRenderDrawer(list[index]);
+        }
+
+        if (!list[index]) {
+          setRenderDrawer(null);
+        }
+      });
+    }, [RenderDrawer, index]);
+
+    if (!RenderDrawer) {
+      return null;
+    }
+
+    return (
+      <RenderDrawer>
+        <RenderNestedDrawer index={index + 1} />
+      </RenderDrawer>
+    );
+  });
+
+  RenderNestedDrawer.displayName = 'RenderNestedDrawer';
 
   const open = (config, flowContext: FlowEngineContext) => {
-    uuid += 1;
     const drawerRef = React.createRef<{
       destroy: () => void;
       update: (config: any) => void;
@@ -44,7 +72,7 @@ export function useDrawer() {
     let currentHeader: any = null;
 
     // Footer 组件实现
-    const FooterComponent = ({ children, ...props }) => {
+    const FooterComponent: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
       React.useEffect(() => {
         currentFooter = children;
         drawerRef.current?.setFooter(children);
@@ -59,10 +87,10 @@ export function useDrawer() {
     };
 
     // Header 组件实现
-    const HeaderComponent = ({ ...props }) => {
+    const HeaderComponent: React.FC<{ title?: React.ReactNode; extra?: React.ReactNode }> = (props) => {
       React.useEffect(() => {
         currentHeader = props;
-        drawerRef.current?.setHeader(props as any);
+        drawerRef.current?.setHeader(props);
 
         return () => {
           currentHeader = null;
@@ -75,7 +103,7 @@ export function useDrawer() {
 
     // 构造 currentDrawer 实例
     const currentDrawer = {
-      type: 'drawer',
+      type: 'drawer' as const,
       inputArgs: config.inputArgs || {},
       preventClose: !!config.preventClose,
       destroy: () => drawerRef.current?.destroy(),
@@ -102,11 +130,6 @@ export function useDrawer() {
     };
 
     const ctx = new FlowContext();
-    ctx.defineProperty('view', {
-      get: () => currentDrawer,
-      meta: createViewMeta(ctx, () => currentDrawer),
-      resolveOnServer: (p: string) => p === 'record' || p.startsWith('record.'),
-    });
     // 为当前视图创建作用域引擎（隔离实例与缓存）
     const scopedEngine = createViewScopedEngine(flowContext.engine);
     // 先将引擎暴露给视图上下文，再按需继承父上下文
@@ -118,9 +141,17 @@ export function useDrawer() {
       ctx.addDelegate(flowContext.engine.context);
     }
 
+    ctx.defineProperty('view', {
+      get: () => currentDrawer,
+      // meta: createViewMeta(ctx),
+      resolveOnServer: (p: string) => p === 'record' || p.startsWith('record.'),
+    });
+    // 顶层 popup 变量：弹窗记录/数据源/上级弹窗链（去重封装）
+    registerPopupVariable(ctx, currentDrawer);
+
     // 内部组件，在 Provider 内部计算 content
-    const DrawerWithContext: React.FC = observer(
-      (props) => {
+    const DrawerWithContext: React.FC = React.memo(
+      observer((props) => {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const mountedRef = React.useRef(false);
         const rawContent = typeof config.content === 'function' ? config.content(currentDrawer, ctx) : config.content;
@@ -161,43 +192,36 @@ export function useDrawer() {
             {props.children}
           </DrawerComponent>
         );
-      },
-      {
-        displayName: 'DrawerWithContext',
-      },
+      }),
     );
 
-    const renderDrawer = (children: React.ReactNode) => (
+    DrawerWithContext.displayName = 'DrawerWithContext';
+
+    const RenderDrawer = React.memo(({ children }) => (
       <FlowEngineProvider engine={scopedEngine}>
         <FlowViewContextProvider context={ctx}>
           <DrawerWithContext>{children}</DrawerWithContext>
         </FlowViewContextProvider>
       </FlowEngineProvider>
-    );
+    ));
+
+    RenderDrawer.displayName = 'RenderDrawer';
 
-    closeFunc = holderRef.current?.patchElement(renderDrawer);
+    closeFunc = holderRef.current?.patchElement(RenderDrawer);
     return Object.assign(promise, currentDrawer);
   };
 
   const api = React.useMemo(() => ({ open }), []);
   const ElementsHolder = React.memo(
     React.forwardRef((props, ref) => {
-      const [elements, patchElement] = usePatchElement<(children: React.ReactNode) => React.ReactElement>();
+      const [elements, patchElement] = usePatchElement<React.ElementType>();
       React.useImperativeHandle(ref, () => ({ patchElement }), [patchElement]);
 
-      // 嵌套渲染：后面的元素是前一个元素的子元素
-      const renderNestedElements = () => {
-        if (elements.length === 0) {
-          return null;
-        }
-
-        // 从最后一个元素开始，向前递归渲染
-        return elements.reduceRight((children: React.ReactNode, renderElement) => {
-          return renderElement(children);
-        }, null as React.ReactNode);
-      };
+      React.useEffect(() => {
+        drawerList.value = elements;
+      }, [elements]);
 
-      return <>{renderNestedElements()}</>;
+      return <RenderNestedDrawer index={0} />;
     }),
   );
 

package/src/views/usePage.tsx

@@ -12,7 +12,7 @@ import ReactDOM from 'react-dom';
 import { observer } from '..';
 import { FlowContext } from '../flowContext';
 import { FlowViewContextProvider } from '../FlowContextProvider';
-import { createViewMeta } from './createViewMeta';
+import { registerPopupVariable } from './createViewMeta';
 import { PageComponent } from './PageComponent';
 import usePatchElement from './usePatchElement';
 import { FlowEngineProvider } from '../provider';
@@ -48,7 +48,7 @@ export function usePage() {
     });
 
     // Footer 组件实现
-    const FooterComponent = ({ children, ...props }) => {
+    const FooterComponent: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
       React.useEffect(() => {
         pageRef.current?.setFooter(children);
 
@@ -61,9 +61,9 @@ export function usePage() {
     };
 
     // Header 组件实现
-    const HeaderComponent = ({ ...props }) => {
+    const HeaderComponent: React.FC<{ title?: React.ReactNode; extra?: React.ReactNode }> = (props) => {
       React.useEffect(() => {
-        pageRef.current?.setHeader(props as any);
+        pageRef.current?.setHeader(props);
 
         return () => {
           pageRef.current?.setHeader(null);
@@ -77,7 +77,7 @@ export function usePage() {
 
     // 构造 currentPage 实例
     const currentPage = {
-      type: 'embed',
+      type: 'embed' as const,
       inputArgs: config.inputArgs || {},
       preventClose: !!config.preventClose,
       destroy: () => pageRef.current?.destroy(),
@@ -102,11 +102,6 @@ export function usePage() {
     };
 
     const ctx = new FlowContext();
-    ctx.defineProperty('view', {
-      get: () => currentPage,
-      meta: createViewMeta(ctx, () => currentPage),
-      resolveOnServer: (p: string) => p === 'record' || p.startsWith('record.'),
-    });
     // 为当前视图创建作用域引擎（隔离实例与缓存）
     const scopedEngine = createViewScopedEngine(flowContext.engine);
     ctx.defineProperty('engine', { value: scopedEngine });
@@ -117,6 +112,14 @@ export function usePage() {
       ctx.addDelegate(flowContext.engine.context);
     }
 
+    ctx.defineProperty('view', {
+      get: () => currentPage,
+      // meta: createViewMeta(ctx),
+      resolveOnServer: (p: string) => p === 'record' || p.startsWith('record.'),
+    });
+    // 顶层 popup 变量：弹窗记录/数据源/上级弹窗链（去重封装）
+    registerPopupVariable(ctx, currentPage);
+
     const PageWithContext = observer(
       () => {
         // eslint-disable-next-line react-hooks/rules-of-hooks

package/lib/components/dnd/getMousePositionOnElement.d.ts

@@ -1,50 +0,0 @@
-/**
- * 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 declare 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;
-    y: number;
-    width: number;
-    height: number;
-}
-interface GetMousePositionOptions {
-    initialMousePos: MousePosition;
-    mouseOffset: MousePosition;
-    elementBounds: ElementBounds;
-    edgeThreshold?: number;
-    topBottomHeightRatio?: number;
-}
-/**
- * 计算鼠标指针在元素上的位置
- *
- * 区域划分逻辑：
- * 1. 上区域：宽度=元素宽度，高度=元素高度*topBottomHeightRatio，位于元素顶部
- * 2. 下区域：宽度=元素宽度，高度=元素高度*topBottomHeightRatio，位于元素底部
- * 3. 左区域：剩余中间部分的左侧
- * 4. 右区域：剩余中间部分的右侧
- * 5. 边缘区域：在各个区域的边缘处，厚度为edgeThreshold
- *
- * @param options 配置选项
- * @returns 鼠标在元素上的位置
- */
-export declare const getMousePositionOnElement: ({ initialMousePos, mouseOffset, elementBounds, edgeThreshold, topBottomHeightRatio, }: GetMousePositionOptions) => ElementPosition;
-export {};

package/lib/components/dnd/getMousePositionOnElement.js

@@ -1,95 +0,0 @@
-/**
- * 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.
- */
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var getMousePositionOnElement_exports = {};
-__export(getMousePositionOnElement_exports, {
-  ElementPosition: () => ElementPosition,
-  getMousePositionOnElement: () => getMousePositionOnElement
-});
-module.exports = __toCommonJS(getMousePositionOnElement_exports);
-var ElementPosition = /* @__PURE__ */ ((ElementPosition2) => {
-  ElementPosition2["TOP"] = "top";
-  ElementPosition2["BOTTOM"] = "bottom";
-  ElementPosition2["LEFT"] = "left";
-  ElementPosition2["RIGHT"] = "right";
-  ElementPosition2["TOP_EDGE"] = "top-edge";
-  ElementPosition2["BOTTOM_EDGE"] = "bottom-edge";
-  ElementPosition2["LEFT_EDGE"] = "left-edge";
-  ElementPosition2["RIGHT_EDGE"] = "right-edge";
-  return ElementPosition2;
-})(ElementPosition || {});
-const getMousePositionOnElement = /* @__PURE__ */ __name(({
-  initialMousePos,
-  mouseOffset,
-  elementBounds,
-  edgeThreshold = 5,
-  topBottomHeightRatio = 0.25
-}) => {
-  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 "top" /* TOP */;
-    if (relativeY > elementBounds.height) return "bottom" /* BOTTOM */;
-    if (relativeX < 0) return "left" /* LEFT */;
-    return "right" /* 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 "top-edge" /* TOP_EDGE */;
-    }
-    return "top" /* TOP */;
-  } else if (relativeY >= middleAreaBottom) {
-    if (relativeY >= elementBounds.height - edgeThreshold) {
-      return "bottom-edge" /* BOTTOM_EDGE */;
-    }
-    return "bottom" /* BOTTOM */;
-  } else {
-    const middleAreaCenterX = elementBounds.width / 2;
-    if (relativeX <= middleAreaCenterX) {
-      if (relativeX <= edgeThreshold) {
-        return "left-edge" /* LEFT_EDGE */;
-      }
-      return "left" /* LEFT */;
-    } else {
-      if (relativeX >= elementBounds.width - edgeThreshold) {
-        return "right-edge" /* RIGHT_EDGE */;
-      }
-      return "right" /* RIGHT */;
-    }
-  }
-}, "getMousePositionOnElement");
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ElementPosition,
-  getMousePositionOnElement
-});

package/lib/components/dnd/moveBlock.d.ts

@@ -1,33 +0,0 @@
-/**
- * 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 { ElementPosition } from './getMousePositionOnElement';
-type MoveDirection = 'insert-row-above' | 'insert-row-below' | 'insert-same-column-above' | 'insert-same-column-below' | 'insert-column-left' | 'insert-column-right';
-interface GridLayoutData {
-    rows: Record<string, string[][]>;
-    sizes: Record<string, number[]>;
-}
-export declare const findModelUidPosition: (uid: string, rows: Record<string, string[][]>) => {
-    rowId: string;
-    columnIndex: number;
-    itemIndex: number;
-};
-export declare const moveBlock: ({ sourceUid, targetUid, direction, layoutData, }: {
-    sourceUid: string;
-    targetUid: string;
-    direction: MoveDirection;
-    layoutData: GridLayoutData;
-}) => GridLayoutData;
-/**
- * 将鼠标在元素上的位置转换为区块移动方向
- *
- * @param position 鼠标在元素上的位置
- * @returns 对应的移动方向
- */
-export declare const positionToDirection: (position: ElementPosition) => MoveDirection;
-export {};