@nocobase/flow-engine 2.0.0-beta.2 → 2.0.0-beta.20

package/src/views/usePage.tsx

@@ -15,26 +15,33 @@ import { FlowViewContextProvider } from '../FlowContextProvider';
 import { registerPopupVariable } from './createViewMeta';
 import { PageComponent } from './PageComponent';
 import usePatchElement from './usePatchElement';
+import { VIEW_ACTIVATED_EVENT, bumpViewActivatedVersion, resolveOpenerEngine } from './viewEvents';
 import { FlowEngineProvider } from '../provider';
 import { createViewScopedEngine } from '../ViewScopedFlowEngine';
 import { createViewRecordResolveOnServer, getViewRecordFromParent } from '../utils/variablesParams';
 
 let uuid = 0;
 
+/** Global embed container element ID */
+export const GLOBAL_EMBED_CONTAINER_ID = 'nocobase-embed-container';
+/** Dataset key used to signal embed replacement in progress (skip style reset on close) */
+export const EMBED_REPLACING_DATA_KEY = 'nocobaseEmbedReplacing';
+
 // 稳定的 Holder 组件，避免在父组件重渲染时更换组件类型导致卸载， 否则切换主题时会丢失所有页面内容
 const PageElementsHolder = React.memo(
   React.forwardRef((props: any, ref: any) => {
     const [elements, patchElement] = usePatchElement();
     React.useImperativeHandle(ref, () => ({ patchElement }), [patchElement]);
-    console.log('[NocoBase] Rendering PageElementsHolder with elements count:', elements.length);
     return <>{elements}</>;
   }),
 );
 
 export function usePage() {
   const holderRef = React.useRef(null);
+  const globalEmbedActiveRef = React.useRef<null | { destroy: () => void }>(null);
 
   const open = (config, flowContext) => {
+    const parentEngine = flowContext?.engine;
     uuid += 1;
     const pageRef = React.createRef<{
       destroy: () => void;
@@ -75,11 +82,33 @@ export function usePage() {
       return null; // Header 组件本身不渲染内容
     };
 
-    const { target, content, preventClose, inheritContext = true, inputArgs, ...restConfig } = config;
+    const {
+      target,
+      content,
+      preventClose,
+      inheritContext = true,
+      inputArgs: viewInputArgs = {},
+      ...restConfig
+    } = config;
+    const isGlobalEmbedContainer = target instanceof HTMLElement && target.id === GLOBAL_EMBED_CONTAINER_ID;
+
+    // Global embed container uses "replace" behavior: opening a new view destroys the previous one.
+    if (isGlobalEmbedContainer && globalEmbedActiveRef.current) {
+      try {
+        // Avoid style "reset flicker" when replacing: tell embed wrappers to skip resetting container styles.
+        target.dataset[EMBED_REPLACING_DATA_KEY] = '1';
+        globalEmbedActiveRef.current.destroy();
+      } finally {
+        delete target.dataset[EMBED_REPLACING_DATA_KEY];
+        globalEmbedActiveRef.current = null;
+      }
+    }
 
     const ctx = new FlowContext();
     // 为当前视图创建作用域引擎（隔离实例与缓存）
     const scopedEngine = createViewScopedEngine(flowContext.engine);
+    const openerEngine = resolveOpenerEngine(parentEngine, scopedEngine);
+
     ctx.defineProperty('engine', { value: scopedEngine });
     ctx.addDelegate(scopedEngine.context);
     if (inheritContext) {
@@ -91,13 +120,27 @@ export function usePage() {
     // 构造 currentPage 实例
     const currentPage = {
       type: 'embed' as const,
-      inputArgs: config.inputArgs || {},
+      inputArgs: viewInputArgs,
       preventClose: !!config.preventClose,
       destroy: (result?: any) => {
         config.onClose?.();
         resolvePromise?.(result);
         pageRef.current?.destroy();
         closeFunc?.();
+
+        if (isGlobalEmbedContainer) {
+          globalEmbedActiveRef.current = null;
+        }
+
+        // Notify opener view that it becomes active again.
+        const isReplacing =
+          isGlobalEmbedContainer && target instanceof HTMLElement && target.dataset?.[EMBED_REPLACING_DATA_KEY] === '1';
+        if (!isReplacing) {
+          const openerEmitter = openerEngine?.emitter;
+          bumpViewActivatedVersion(openerEmitter);
+          openerEmitter?.emit?.(VIEW_ACTIVATED_EVENT, { type: 'embed', viewUid: currentPage?.inputArgs?.viewUid });
+        }
+
         // 关闭时修正 previous/next 指针
         scopedEngine.unlinkFromStack();
       },
@@ -132,7 +175,6 @@ export function usePage() {
 
     ctx.defineProperty('view', {
       get: () => currentPage,
-      // meta: createViewMeta(ctx),
       // 仅当访问关联字段或前端无本地记录数据时，才交给服务端解析
       resolveOnServer: createViewRecordResolveOnServer(ctx, () => getViewRecordFromParent(flowContext, ctx)),
     });
@@ -180,7 +222,7 @@ export function usePage() {
       },
     );
 
-    const key = inputArgs?.viewUid || `page-${uuid}`;
+    const key = viewInputArgs?.viewUid || `page-${uuid}`;
     const page = (
       <FlowEngineProvider key={key} engine={scopedEngine}>
         <FlowViewContextProvider context={ctx}>
@@ -195,6 +237,10 @@ export function usePage() {
       closeFunc = holderRef.current?.patchElement(page);
     }
 
+    if (isGlobalEmbedContainer) {
+      globalEmbedActiveRef.current = { destroy: currentPage.destroy };
+    }
+
     return Object.assign(promise, currentPage);
   };
 

package/src/views/usePopover.tsx

@@ -40,8 +40,11 @@ const PopoverComponent = React.forwardRef<any, any>(({ afterClose, content, plac
       destroyTooltipOnHide
       content={config.content}
       placement={config.placement}
-      getPopupContainer={() => document.body}
+      getPopupContainer={() => document.querySelector('#nocobase-app-container') || document.body}
       onOpenChange={(nextOpen) => {
+        if (!nextOpen && config.preventClose) {
+          return;
+        }
         setVisible(nextOpen);
         if (!nextOpen) {
           afterClose?.();

package/src/views/viewEvents.ts

@@ -0,0 +1,55 @@
+/**
+ * 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 { FlowEngine } from '../flowEngine';
+
+export const VIEW_ACTIVATED_VERSION = Symbol.for('__NOCOBASE_VIEW_ACTIVATED_VERSION__');
+
+export const VIEW_ACTIVATED_EVENT = 'view:activated' as const;
+export const DATA_SOURCE_DIRTY_EVENT = 'dataSource:dirty' as const;
+
+export const ENGINE_SCOPE_KEY = '__NOCOBASE_ENGINE_SCOPE__' as const;
+export const VIEW_ENGINE_SCOPE = 'view' as const;
+
+export function getEmitterViewActivatedVersion(emitter): number {
+  const raw = Reflect.get(emitter, VIEW_ACTIVATED_VERSION);
+  const num = typeof raw === 'number' ? raw : Number(raw);
+  return Number.isFinite(num) && num > 0 ? num : 0;
+}
+
+export function bumpViewActivatedVersion(emitter): number {
+  const current = getEmitterViewActivatedVersion(emitter);
+  if (!Object.isExtensible(emitter)) return current;
+  const next = current + 1;
+  Reflect.set(emitter, VIEW_ACTIVATED_VERSION, next);
+  return next;
+}
+
+function isViewEngine(engine: FlowEngine): boolean {
+  return Reflect.get(engine, ENGINE_SCOPE_KEY) === VIEW_ENGINE_SCOPE;
+}
+
+function findNearestViewEngine(engine: FlowEngine | undefined): FlowEngine | undefined {
+  let cur: FlowEngine | undefined = engine;
+  let guard = 0;
+  while (cur && guard++ < 50) {
+    if (isViewEngine(cur)) return cur;
+    cur = (cur as { previousEngine?: FlowEngine | undefined }).previousEngine;
+  }
+}
+
+export function resolveOpenerEngine(parentEngine: FlowEngine, scopedEngine: FlowEngine): FlowEngine | undefined {
+  if (!parentEngine) return undefined;
+  const parentViewEngine = findNearestViewEngine(parentEngine);
+  if (parentViewEngine) return parentViewEngine;
+
+  // Fallback: resolve from previous engine in the stack (historical behavior).
+  const previousEngine = scopedEngine?.previousEngine;
+  return findNearestViewEngine(previousEngine) || parentEngine;
+}