@nocobase/flow-engine 2.1.0-beta.32 → 2.1.0-beta.34

package/lib/views/usePage.js

@@ -58,6 +58,102 @@ var import_runViewBeforeClose = require("./runViewBeforeClose");
 let uuid = 0;
 const GLOBAL_EMBED_CONTAINER_ID = "nocobase-embed-container";
 const EMBED_REPLACING_DATA_KEY = "nocobaseEmbedReplacing";
+function isPromiseLike(value) {
+  return !!value && typeof value.then === "function";
+}
+__name(isPromiseLike, "isPromiseLike");
+function closeReplacingGlobalEmbed(target, activeView) {
+  target.dataset[EMBED_REPLACING_DATA_KEY] = "1";
+  try {
+    const closeResult = activeView.close();
+    if (isPromiseLike(closeResult)) {
+      return Promise.resolve(closeResult).finally(() => {
+        delete target.dataset[EMBED_REPLACING_DATA_KEY];
+      });
+    }
+    delete target.dataset[EMBED_REPLACING_DATA_KEY];
+    return closeResult;
+  } catch (error) {
+    delete target.dataset[EMBED_REPLACING_DATA_KEY];
+    throw error;
+  }
+}
+__name(closeReplacingGlobalEmbed, "closeReplacingGlobalEmbed");
+function createPendingGlobalEmbedView(openedPromise, inputArgs, preventClose) {
+  let openedPage;
+  const pendingActions = {};
+  const readyPromise = openedPromise.then(({ page }) => {
+    openedPage = page;
+    if (openedPage) {
+      if ("beforeClose" in pendingActions) {
+        openedPage.beforeClose = pendingActions.beforeClose;
+      }
+      if ("update" in pendingActions) {
+        openedPage.update(pendingActions.update);
+      }
+      if ("footer" in pendingActions) {
+        openedPage.setFooter(pendingActions.footer);
+      }
+      if ("header" in pendingActions) {
+        openedPage.setHeader(pendingActions.header);
+      }
+      if (pendingActions.destroyed) {
+        openedPage.destroy(pendingActions.destroyed.result);
+      }
+    }
+    return { page };
+  });
+  return Object.assign(
+    readyPromise.then(({ page }) => page ? page : false),
+    {
+      type: "embed",
+      inputArgs,
+      preventClose,
+      Header: null,
+      Footer: null,
+      get beforeClose() {
+        return (openedPage == null ? void 0 : openedPage.beforeClose) ?? pendingActions.beforeClose;
+      },
+      set beforeClose(value) {
+        if (openedPage) {
+          openedPage.beforeClose = value;
+        } else {
+          pendingActions.beforeClose = value;
+        }
+      },
+      close: /* @__PURE__ */ __name((result, force) => readyPromise.then(({ page }) => page ? page.close(result, force) : false), "close"),
+      destroy: /* @__PURE__ */ __name((result) => {
+        if (openedPage) {
+          openedPage.destroy(result);
+        } else {
+          pendingActions.destroyed = { result };
+        }
+      }, "destroy"),
+      update: /* @__PURE__ */ __name((newConfig) => {
+        if (openedPage) {
+          openedPage.update(newConfig);
+        } else {
+          pendingActions.update = { ...pendingActions.update, ...newConfig };
+        }
+      }, "update"),
+      setFooter: /* @__PURE__ */ __name((footer) => {
+        if (openedPage) {
+          openedPage.setFooter(footer);
+        } else {
+          pendingActions.footer = footer;
+        }
+      }, "setFooter"),
+      setHeader: /* @__PURE__ */ __name((header) => {
+        if (openedPage) {
+          openedPage.setHeader(header);
+        } else {
+          pendingActions.header = header;
+        }
+      }, "setHeader")
+    }
+  );
+}
+__name(createPendingGlobalEmbedView, "createPendingGlobalEmbedView");
 const PageElementsHolder = import_react.default.memo(
   import_react.default.forwardRef((props, ref) => {
     const [elements, patchElement] = (0, import_usePatchElement.default)();
@@ -68,174 +164,229 @@ const PageElementsHolder = import_react.default.memo(
 function usePage() {
   const holderRef = import_react.default.useRef(null);
   const globalEmbedActiveRef = import_react.default.useRef(null);
+  const globalEmbedReplacementTokenRef = import_react.default.useRef(0);
   const open = /* @__PURE__ */ __name((config, flowContext) => {
-    var _a, _b, _c;
-    const parentEngine = flowContext == null ? void 0 : flowContext.engine;
-    uuid += 1;
-    const pageRef = import_react.default.createRef();
-    let closeFunc;
-    let resolvePromise;
-    const promise = new Promise((resolve) => {
-      resolvePromise = resolve;
-    });
-    const FooterComponent = /* @__PURE__ */ __name(({ children }) => {
-      import_react.default.useEffect(() => {
-        var _a2;
-        (_a2 = pageRef.current) == null ? void 0 : _a2.setFooter(children);
-        return () => {
-          var _a3;
-          (_a3 = pageRef.current) == null ? void 0 : _a3.setFooter(null);
-        };
-      }, [children]);
-      return null;
-    }, "FooterComponent");
-    const HeaderComponent = /* @__PURE__ */ __name((props) => {
-      import_react.default.useEffect(() => {
-        var _a2;
-        (_a2 = pageRef.current) == null ? void 0 : _a2.setHeader(props);
-        return () => {
-          var _a3;
-          (_a3 = pageRef.current) == null ? void 0 : _a3.setHeader(null);
-        };
-      }, [props]);
-      return null;
-    }, "HeaderComponent");
     const {
       target,
       content,
       preventClose,
       inheritContext = true,
       inputArgs: viewInputArgs = {},
+      onOpenCancelled,
       ...restConfig
     } = config;
     const isGlobalEmbedContainer = target instanceof HTMLElement && target.id === GLOBAL_EMBED_CONTAINER_ID;
-    if (isGlobalEmbedContainer && globalEmbedActiveRef.current) {
-      try {
-        target.dataset[EMBED_REPLACING_DATA_KEY] = "1";
-        globalEmbedActiveRef.current.destroy();
-      } finally {
-        delete target.dataset[EMBED_REPLACING_DATA_KEY];
-        globalEmbedActiveRef.current = null;
+    const openCurrentPage = /* @__PURE__ */ __name(() => {
+      var _a, _b, _c;
+      const parentEngine = flowContext == null ? void 0 : flowContext.engine;
+      uuid += 1;
+      const pageRef = import_react.default.createRef();
+      let closeFunc;
+      let resolvePromise;
+      const promise = new Promise((resolve) => {
+        resolvePromise = resolve;
+      });
+      const FooterComponent = /* @__PURE__ */ __name(({ children }) => {
+        import_react.default.useEffect(() => {
+          var _a2;
+          (_a2 = pageRef.current) == null ? void 0 : _a2.setFooter(children);
+          return () => {
+            var _a3;
+            (_a3 = pageRef.current) == null ? void 0 : _a3.setFooter(null);
+          };
+        }, [children]);
+        return null;
+      }, "FooterComponent");
+      const HeaderComponent = /* @__PURE__ */ __name((props) => {
+        import_react.default.useEffect(() => {
+          var _a2;
+          (_a2 = pageRef.current) == null ? void 0 : _a2.setHeader(props);
+          return () => {
+            var _a3;
+            (_a3 = pageRef.current) == null ? void 0 : _a3.setHeader(null);
+          };
+        }, [props]);
+        return null;
+      }, "HeaderComponent");
+      const ctx = new import_flowContext.FlowContext();
+      const scopedEngine = (0, import_ViewScopedFlowEngine.createViewScopedEngine)(flowContext.engine);
+      const openerEngine = (0, import_viewEvents.resolveOpenerEngine)(parentEngine, scopedEngine);
+      ctx.defineProperty("engine", { value: scopedEngine });
+      ctx.addDelegate(scopedEngine.context);
+      if (inheritContext) {
+        ctx.addDelegate(flowContext);
+      } else {
+        ctx.addDelegate(flowContext.engine.context);
       }
-    }
-    const ctx = new import_flowContext.FlowContext();
-    const scopedEngine = (0, import_ViewScopedFlowEngine.createViewScopedEngine)(flowContext.engine);
-    const openerEngine = (0, import_viewEvents.resolveOpenerEngine)(parentEngine, scopedEngine);
-    ctx.defineProperty("engine", { value: scopedEngine });
-    ctx.addDelegate(scopedEngine.context);
-    if (inheritContext) {
-      ctx.addDelegate(flowContext);
-    } else {
-      ctx.addDelegate(flowContext.engine.context);
-    }
-    const currentPage = {
-      type: "embed",
-      inputArgs: viewInputArgs,
-      preventClose: !!config.preventClose,
-      beforeClose: void 0,
-      destroy: /* @__PURE__ */ __name((result) => {
-        var _a2, _b2, _c2, _d, _e;
-        (_a2 = config.onClose) == null ? void 0 : _a2.call(config);
-        resolvePromise == null ? void 0 : resolvePromise(result);
-        (_b2 = pageRef.current) == null ? void 0 : _b2.destroy();
-        closeFunc == null ? void 0 : closeFunc();
-        if (isGlobalEmbedContainer) {
-          globalEmbedActiveRef.current = null;
-        }
-        const isReplacing = isGlobalEmbedContainer && target instanceof HTMLElement && ((_c2 = target.dataset) == null ? void 0 : _c2[EMBED_REPLACING_DATA_KEY]) === "1";
-        if (!isReplacing) {
-          const openerEmitter = openerEngine == null ? void 0 : openerEngine.emitter;
-          (0, import_viewEvents.bumpViewActivatedVersion)(openerEmitter);
-          (_e = openerEmitter == null ? void 0 : openerEmitter.emit) == null ? void 0 : _e.call(openerEmitter, import_viewEvents.VIEW_ACTIVATED_EVENT, { type: "embed", viewUid: (_d = currentPage == null ? void 0 : currentPage.inputArgs) == null ? void 0 : _d.viewUid });
-        }
-        scopedEngine.unlinkFromStack();
-      }, "destroy"),
-      update: /* @__PURE__ */ __name((newConfig) => {
-        var _a2;
-        return (_a2 = pageRef.current) == null ? void 0 : _a2.update(newConfig);
-      }, "update"),
-      close: /* @__PURE__ */ __name(async (result, force) => {
-        var _a2, _b2;
-        if (preventClose && !force) {
-          return false;
-        }
-        const shouldClose = await (0, import_runViewBeforeClose.runViewBeforeClose)(currentPage, { result, force });
-        if (!shouldClose) {
-          return false;
+      let destroyed = false;
+      let closingPromise;
+      const currentPage = {
+        type: "embed",
+        inputArgs: viewInputArgs,
+        preventClose: !!config.preventClose,
+        beforeClose: void 0,
+        destroy: /* @__PURE__ */ __name((result) => {
+          var _a2, _b2, _c2, _d, _e;
+          if (destroyed) return;
+          destroyed = true;
+          (_a2 = config.onClose) == null ? void 0 : _a2.call(config);
+          resolvePromise == null ? void 0 : resolvePromise(result);
+          (_b2 = pageRef.current) == null ? void 0 : _b2.destroy();
+          closeFunc == null ? void 0 : closeFunc();
+          if (isGlobalEmbedContainer && globalEmbedActiveRef.current === currentPage) {
+            globalEmbedActiveRef.current = null;
+          }
+          const isReplacing = isGlobalEmbedContainer && target instanceof HTMLElement && ((_c2 = target.dataset) == null ? void 0 : _c2[EMBED_REPLACING_DATA_KEY]) === "1";
+          if (!isReplacing) {
+            const openerEmitter = openerEngine == null ? void 0 : openerEngine.emitter;
+            (0, import_viewEvents.bumpViewActivatedVersion)(openerEmitter);
+            (_e = openerEmitter == null ? void 0 : openerEmitter.emit) == null ? void 0 : _e.call(openerEmitter, import_viewEvents.VIEW_ACTIVATED_EVENT, { type: "embed", viewUid: (_d = currentPage == null ? void 0 : currentPage.inputArgs) == null ? void 0 : _d.viewUid });
+          }
+          scopedEngine.unlinkFromStack();
+        }, "destroy"),
+        update: /* @__PURE__ */ __name((newConfig) => {
+          var _a2;
+          return (_a2 = pageRef.current) == null ? void 0 : _a2.update(newConfig);
+        }, "update"),
+        close: /* @__PURE__ */ __name((result, force) => {
+          if (destroyed) {
+            return Promise.resolve(true);
+          }
+          if (closingPromise) {
+            return closingPromise;
+          }
+          closingPromise = (async () => {
+            var _a2, _b2;
+            try {
+              if (preventClose && !force) {
+                closingPromise = void 0;
+                return false;
+              }
+              const shouldClose = await (0, import_runViewBeforeClose.runViewBeforeClose)(currentPage, { result, force });
+              if (destroyed) {
+                return true;
+              }
+              if (!shouldClose) {
+                closingPromise = void 0;
+                return false;
+              }
+              if (config.triggerByRouter && ((_b2 = (_a2 = config.inputArgs) == null ? void 0 : _a2.navigation) == null ? void 0 : _b2.back)) {
+                config.inputArgs.navigation.back();
+                return true;
+              }
+              currentPage.destroy(result);
+              return true;
+            } catch (error) {
+              if (!destroyed) {
+                closingPromise = void 0;
+              }
+              throw error;
+            }
+          })();
+          return closingPromise;
+        }, "close"),
+        Header: HeaderComponent,
+        Footer: FooterComponent,
+        setFooter: /* @__PURE__ */ __name((footer) => {
+          var _a2;
+          (_a2 = pageRef.current) == null ? void 0 : _a2.setFooter(footer);
+        }, "setFooter"),
+        setHeader: /* @__PURE__ */ __name((header) => {
+          var _a2;
+          (_a2 = pageRef.current) == null ? void 0 : _a2.setHeader(header);
+        }, "setHeader"),
+        navigation: (_a = config.inputArgs) == null ? void 0 : _a.navigation,
+        get record() {
+          return (0, import_variablesParams.getViewRecordFromParent)(flowContext, ctx);
         }
-        if (config.triggerByRouter && ((_b2 = (_a2 = config.inputArgs) == null ? void 0 : _a2.navigation) == null ? void 0 : _b2.back)) {
-          config.inputArgs.navigation.back();
-          return true;
+      };
+      ctx.defineProperty("view", {
+        get: /* @__PURE__ */ __name(() => currentPage, "get"),
+        // 仅当访问关联字段或前端无本地记录数据时，才交给服务端解析
+        resolveOnServer: (0, import_variablesParams.createViewRecordResolveOnServer)(ctx, () => (0, import_variablesParams.getViewRecordFromParent)(flowContext, ctx))
+      });
+      (0, import_createViewMeta.registerPopupVariable)(ctx, currentPage);
+      const PageWithContext = (0, import__.observer)(
+        () => {
+          var _a2, _b2, _c2, _d;
+          const mountedRef = import_react.default.useRef(false);
+          const pageContent = import_react.default.useMemo(
+            () => typeof content === "function" ? content(currentPage, ctx) : content,
+            []
+          );
+          void ctx.themeToken;
+          import_react.default.useEffect(() => {
+            var _a3;
+            (_a3 = config.onOpen) == null ? void 0 : _a3.call(config, currentPage, ctx);
+          }, []);
+          if (((_b2 = (_a2 = config.inputArgs) == null ? void 0 : _a2.hidden) == null ? void 0 : _b2.value) && !mountedRef.current) {
+            return null;
+          }
+          mountedRef.current = true;
+          return /* @__PURE__ */ import_react.default.createElement(
+            import_PageComponent.PageComponent,
+            {
+              ref: pageRef,
+              hidden: (_d = (_c2 = config.inputArgs) == null ? void 0 : _c2.hidden) == null ? void 0 : _d.value,
+              ...restConfig,
+              onClose: () => {
+                return currentPage.close(config.result);
+              }
+            },
+            pageContent
+          );
+        },
+        {
+          displayName: "PageWithContext"
         }
-        currentPage.destroy(result);
-        return true;
-      }, "close"),
-      Header: HeaderComponent,
-      Footer: FooterComponent,
-      setFooter: /* @__PURE__ */ __name((footer) => {
-        var _a2;
-        (_a2 = pageRef.current) == null ? void 0 : _a2.setFooter(footer);
-      }, "setFooter"),
-      setHeader: /* @__PURE__ */ __name((header) => {
-        var _a2;
-        (_a2 = pageRef.current) == null ? void 0 : _a2.setHeader(header);
-      }, "setHeader"),
-      navigation: (_a = config.inputArgs) == null ? void 0 : _a.navigation,
-      get record() {
-        return (0, import_variablesParams.getViewRecordFromParent)(flowContext, ctx);
+      );
+      const key = (viewInputArgs == null ? void 0 : viewInputArgs.viewUid) || `page-${uuid}`;
+      const page = /* @__PURE__ */ import_react.default.createElement(import_provider.FlowEngineProvider, { key, engine: scopedEngine }, /* @__PURE__ */ import_react.default.createElement(import_FlowContextProvider.FlowViewContextProvider, { context: ctx }, /* @__PURE__ */ import_react.default.createElement(PageWithContext, null)));
+      if (target && target instanceof HTMLElement) {
+        closeFunc = (_b = holderRef.current) == null ? void 0 : _b.patchElement(import_react_dom.default.createPortal(page, target, key));
+      } else {
+        closeFunc = (_c = holderRef.current) == null ? void 0 : _c.patchElement(page);
       }
-    };
-    ctx.defineProperty("view", {
-      get: /* @__PURE__ */ __name(() => currentPage, "get"),
-      // 仅当访问关联字段或前端无本地记录数据时，才交给服务端解析
-      resolveOnServer: (0, import_variablesParams.createViewRecordResolveOnServer)(ctx, () => (0, import_variablesParams.getViewRecordFromParent)(flowContext, ctx))
-    });
-    (0, import_createViewMeta.registerPopupVariable)(ctx, currentPage);
-    const PageWithContext = (0, import__.observer)(
-      () => {
-        var _a2, _b2, _c2, _d;
-        const mountedRef = import_react.default.useRef(false);
-        const pageContent = import_react.default.useMemo(
-          () => typeof content === "function" ? content(currentPage, ctx) : content,
-          []
-        );
-        void ctx.themeToken;
-        import_react.default.useEffect(() => {
-          var _a3;
-          (_a3 = config.onOpen) == null ? void 0 : _a3.call(config, currentPage, ctx);
-        }, []);
-        if (((_b2 = (_a2 = config.inputArgs) == null ? void 0 : _a2.hidden) == null ? void 0 : _b2.value) && !mountedRef.current) {
-          return null;
-        }
-        mountedRef.current = true;
-        return /* @__PURE__ */ import_react.default.createElement(
-          import_PageComponent.PageComponent,
-          {
-            ref: pageRef,
-            hidden: (_d = (_c2 = config.inputArgs) == null ? void 0 : _c2.hidden) == null ? void 0 : _d.value,
-            ...restConfig,
-            onClose: () => {
-              currentPage.close(config.result);
+      if (isGlobalEmbedContainer) {
+        globalEmbedActiveRef.current = currentPage;
+      }
+      return Object.assign(promise, currentPage);
+    }, "openCurrentPage");
+    if (isGlobalEmbedContainer && globalEmbedActiveRef.current) {
+      const replacementToken = globalEmbedReplacementTokenRef.current += 1;
+      const cancelOpen = /* @__PURE__ */ __name(() => onOpenCancelled == null ? void 0 : onOpenCancelled(), "cancelOpen");
+      let closeResult;
+      try {
+        closeResult = closeReplacingGlobalEmbed(target, globalEmbedActiveRef.current);
+      } catch (error) {
+        cancelOpen();
+        throw error;
+      }
+      if (isPromiseLike(closeResult)) {
+        return createPendingGlobalEmbedView(
+          Promise.resolve(closeResult).then(
+            (closed) => {
+              if (closed === false || replacementToken !== globalEmbedReplacementTokenRef.current) {
+                cancelOpen();
+                return { page: null };
+              }
+              return { page: openCurrentPage() };
+            },
+            (error) => {
+              cancelOpen();
+              throw error;
             }
-          },
-          pageContent
+          ),
+          viewInputArgs,
+          !!config.preventClose
         );
-      },
-      {
-        displayName: "PageWithContext"
       }
-    );
-    const key = (viewInputArgs == null ? void 0 : viewInputArgs.viewUid) || `page-${uuid}`;
-    const page = /* @__PURE__ */ import_react.default.createElement(import_provider.FlowEngineProvider, { key, engine: scopedEngine }, /* @__PURE__ */ import_react.default.createElement(import_FlowContextProvider.FlowViewContextProvider, { context: ctx }, /* @__PURE__ */ import_react.default.createElement(PageWithContext, null)));
-    if (target && target instanceof HTMLElement) {
-      closeFunc = (_b = holderRef.current) == null ? void 0 : _b.patchElement(import_react_dom.default.createPortal(page, target, key));
-    } else {
-      closeFunc = (_c = holderRef.current) == null ? void 0 : _c.patchElement(page);
-    }
-    if (isGlobalEmbedContainer) {
-      globalEmbedActiveRef.current = { destroy: currentPage.destroy };
+      if (closeResult === false) {
+        cancelOpen();
+        return createPendingGlobalEmbedView(Promise.resolve({ page: null }), viewInputArgs, !!config.preventClose);
+      }
     }
-    return Object.assign(promise, currentPage);
+    return openCurrentPage();
   }, "open");
   const api = import_react.default.useMemo(() => ({ open }), []);
   return [api, /* @__PURE__ */ import_react.default.createElement(PageElementsHolder, { key: "page-holder", ref: holderRef })];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/flow-engine",
-  "version": "2.1.0-beta.32",
+  "version": "2.1.0-beta.34",
   "private": false,
   "description": "A standalone flow engine for NocoBase, managing workflows, models, and actions.",
   "main": "lib/index.js",
@@ -8,8 +8,8 @@
   "dependencies": {
     "@formily/antd-v5": "1.x",
     "@formily/reactive": "2.x",
-    "@nocobase/sdk": "2.1.0-beta.32",
-    "@nocobase/shared": "2.1.0-beta.32",
+    "@nocobase/sdk": "2.1.0-beta.34",
+    "@nocobase/shared": "2.1.0-beta.34",
     "ahooks": "^3.7.2",
     "axios": "^1.7.0",
     "dayjs": "^1.11.9",
@@ -37,5 +37,5 @@
   ],
   "author": "NocoBase Team",
   "license": "Apache-2.0",
-  "gitHead": "659c5efe992da7118d33c768bbd9e837a2c4716f"
+  "gitHead": "ca804833299c547f8d49f8d58f73273a4bfcd03c"
 }

package/src/components/dnd/index.tsx

@@ -283,9 +283,22 @@ export const Droppable: FC<{ model: FlowModel<any>; children: React.ReactNode }>
   );
 };
 
+export interface DndProviderProps extends DndContextProps, PersistOptions {
+  /**
+   * Whether to render the built-in `DragOverlay` (the "Dragging" pill that
+   * follows the cursor). Defaults to `true` for backwards compatibility with
+   * existing flow-engine drag interactions. Set to `false` when the
+   * surrounding UI already gives clear visual feedback (e.g. a drag-sort
+   * table that highlights the drop position) and the floating pill would be
+   * redundant.
+   */
+  showDragOverlay?: boolean;
+}
+
 // 提供一个封装了 DragOverlay 的 DndProvider 组件，继承 DndContext 的所有 props
-export const DndProvider: FC<DndContextProps & PersistOptions> = ({
+export const DndProvider: FC<DndProviderProps> = ({
   persist = true,
+  showDragOverlay = true,
   children,
   onDragStart,
   onDragEnd,
@@ -355,7 +368,7 @@ export const DndProvider: FC<DndContextProps & PersistOptions> = ({
       {...restProps}
     >
       {children}
-      {typeof document !== 'undefined'
+      {showDragOverlay && typeof document !== 'undefined'
         ? createPortal(
             <DragOverlay
               dropAnimation={null}