@nocobase/flow-engine 2.1.0-alpha.4 → 2.1.0-alpha.40

package/src/components/settings/wrappers/contextual/useFloatToolbarVisibility.ts

@@ -0,0 +1,361 @@
+/**
+ * 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 { useCallback, useEffect, useRef, useState } from 'react';
+import type { MouseEvent as ReactMouseEvent, RefObject } from 'react';
+import { TOOLBAR_DRAG_ACTIVITY_EVENT } from '../../../dnd';
+
+const TOOLBAR_HIDE_DELAY = 180;
+const CHILD_FLOAT_MENU_ACTIVITY_EVENT = 'nb-float-menu-child-activity';
+
+interface UseFloatToolbarVisibilityOptions {
+  modelUid: string;
+  containerRef: RefObject<HTMLDivElement>;
+  toolbarContainerRef: RefObject<HTMLDivElement>;
+  updatePortalRect: () => void;
+  schedulePortalRectUpdate: () => void;
+}
+
+interface UseFloatToolbarVisibilityResult {
+  isToolbarVisible: boolean;
+  shouldRenderToolbar: boolean;
+  handleSettingsMenuOpenChange: (open: boolean) => void;
+  handleChildHover: (e: ReactMouseEvent) => void;
+  handleHostMouseEnter: () => void;
+  handleHostMouseLeave: (e: ReactMouseEvent<HTMLDivElement>) => void;
+  handleToolbarMouseEnter: () => void;
+  handleToolbarMouseLeave: (e: ReactMouseEvent<HTMLDivElement>) => void;
+  handleResizeDragStart: () => void;
+  handleResizeDragEnd: () => void;
+}
+
+const isNodeWithin = (target: EventTarget | null, container: HTMLElement | null): boolean => {
+  return target instanceof Node && !!container?.contains(target);
+};
+
+const getToolbarModelUidFromTarget = (target: EventTarget | null): string | null => {
+  if (!(target instanceof Element)) {
+    return null;
+  }
+
+  return target.closest('.nb-toolbar-container[data-model-uid]')?.getAttribute('data-model-uid') || null;
+};
+
+const isNodeWithinDescendantFloatToolbar = (
+  target: EventTarget | null,
+  container: HTMLElement | null,
+  currentModelUid: string,
+): boolean => {
+  const targetModelUid = getToolbarModelUidFromTarget(target);
+  if (!container || !targetModelUid || targetModelUid === currentModelUid) {
+    return false;
+  }
+
+  return Array.from(
+    container.querySelectorAll<HTMLElement>('[data-has-float-menu="true"][data-float-menu-model-uid]'),
+  ).some(
+    (hostElement) =>
+      hostElement !== container && hostElement.getAttribute('data-float-menu-model-uid') === targetModelUid,
+  );
+};
+
+export const useFloatToolbarVisibility = ({
+  modelUid,
+  containerRef,
+  toolbarContainerRef,
+  updatePortalRect,
+  schedulePortalRectUpdate,
+}: UseFloatToolbarVisibilityOptions): UseFloatToolbarVisibilityResult => {
+  const [hideMenu, setHideMenu] = useState(false);
+  const [isHostHovered, setIsHostHovered] = useState(false);
+  const [isToolbarHovered, setIsToolbarHovered] = useState(false);
+  const [isDraggingToolbar, setIsDraggingToolbar] = useState(false);
+  const [isDraggingToolbarItem, setIsDraggingToolbarItem] = useState(false);
+  const [isToolbarPinned, setIsToolbarPinned] = useState(false);
+  const [isHidePending, setIsHidePending] = useState(false);
+  const [activeChildToolbarIds, setActiveChildToolbarIds] = useState<string[]>([]);
+  const hideToolbarTimerRef = useRef<number | null>(null);
+  const reportedChildActivityToAncestorsRef = useRef(false);
+  const isHostHoveredRef = useRef(false);
+  const isToolbarHoveredRef = useRef(false);
+  const isDraggingToolbarRef = useRef(false);
+  const isDraggingToolbarItemRef = useRef(false);
+  const isToolbarPinnedRef = useRef(false);
+
+  const setHostHovered = useCallback((value: boolean) => {
+    isHostHoveredRef.current = value;
+    setIsHostHovered(value);
+  }, []);
+
+  const setToolbarHovered = useCallback((value: boolean) => {
+    isToolbarHoveredRef.current = value;
+    setIsToolbarHovered(value);
+  }, []);
+
+  const setDraggingToolbar = useCallback((value: boolean) => {
+    isDraggingToolbarRef.current = value;
+    setIsDraggingToolbar(value);
+  }, []);
+
+  const setDraggingToolbarItem = useCallback((value: boolean) => {
+    isDraggingToolbarItemRef.current = value;
+    setIsDraggingToolbarItem(value);
+  }, []);
+
+  const setToolbarPinned = useCallback((value: boolean) => {
+    isToolbarPinnedRef.current = value;
+    setIsToolbarPinned(value);
+  }, []);
+
+  const hasActiveChildToolbar = activeChildToolbarIds.length > 0;
+  const isToolbarVisible =
+    !hideMenu &&
+    !hasActiveChildToolbar &&
+    (isHostHovered || isToolbarHovered || isDraggingToolbar || isDraggingToolbarItem || isToolbarPinned);
+  const shouldRenderToolbar = isToolbarVisible || isToolbarPinned || isDraggingToolbar || isDraggingToolbarItem;
+  const isToolbarInteractionActive =
+    isHostHovered || isToolbarHovered || isDraggingToolbar || isDraggingToolbarItem || isToolbarPinned || isHidePending;
+
+  const clearHideToolbarTimer = useCallback(() => {
+    if (hideToolbarTimerRef.current !== null) {
+      window.clearTimeout(hideToolbarTimerRef.current);
+      hideToolbarTimerRef.current = null;
+    }
+    setIsHidePending(false);
+  }, []);
+
+  const scheduleHideToolbar = useCallback(() => {
+    clearHideToolbarTimer();
+    setIsHidePending(true);
+    hideToolbarTimerRef.current = window.setTimeout(() => {
+      hideToolbarTimerRef.current = null;
+      setIsHidePending(false);
+      if (isDraggingToolbarRef.current || isDraggingToolbarItemRef.current || isToolbarPinnedRef.current) {
+        return;
+      }
+      setHostHovered(false);
+      setToolbarHovered(false);
+    }, TOOLBAR_HIDE_DELAY);
+  }, [clearHideToolbarTimer, setHostHovered, setToolbarHovered]);
+
+  const handleSettingsMenuOpenChange = useCallback(
+    (open: boolean) => {
+      setToolbarPinned(open);
+    },
+    [setToolbarPinned],
+  );
+
+  useEffect(() => {
+    const hostElement = containerRef.current;
+    if (!hostElement) {
+      return;
+    }
+
+    const handleChildToolbarActivity = (event: Event) => {
+      const customEvent = event as CustomEvent<{ active?: boolean; modelUid?: string }>;
+      if (!(customEvent.target instanceof HTMLElement) || customEvent.target === hostElement) {
+        return;
+      }
+
+      const childModelUid = customEvent.detail?.modelUid;
+      if (!childModelUid) {
+        return;
+      }
+
+      setActiveChildToolbarIds((prevIds) => {
+        return customEvent.detail?.active
+          ? prevIds.includes(childModelUid)
+            ? prevIds
+            : [...prevIds, childModelUid]
+          : prevIds.filter((id) => id !== childModelUid);
+      });
+    };
+
+    hostElement.addEventListener(CHILD_FLOAT_MENU_ACTIVITY_EVENT, handleChildToolbarActivity as EventListener);
+    return () => {
+      hostElement.removeEventListener(CHILD_FLOAT_MENU_ACTIVITY_EVENT, handleChildToolbarActivity as EventListener);
+    };
+  }, [containerRef]);
+
+  useEffect(() => {
+    const hostElement = containerRef.current;
+    const ownerDocument = hostElement?.ownerDocument;
+    if (!ownerDocument) {
+      return;
+    }
+
+    const handleToolbarDragActivity = (event: Event) => {
+      const customEvent = event as CustomEvent<{ active?: boolean; modelUid?: string }>;
+      if (customEvent.detail?.modelUid !== modelUid) {
+        return;
+      }
+
+      if (customEvent.detail?.active) {
+        clearHideToolbarTimer();
+        setDraggingToolbarItem(true);
+        return;
+      }
+
+      setDraggingToolbarItem(false);
+      if (isHostHoveredRef.current || isToolbarHoveredRef.current || isToolbarPinnedRef.current) {
+        clearHideToolbarTimer();
+        return;
+      }
+
+      scheduleHideToolbar();
+    };
+
+    ownerDocument.addEventListener(TOOLBAR_DRAG_ACTIVITY_EVENT, handleToolbarDragActivity as EventListener);
+    return () => {
+      ownerDocument.removeEventListener(TOOLBAR_DRAG_ACTIVITY_EVENT, handleToolbarDragActivity as EventListener);
+    };
+  }, [clearHideToolbarTimer, containerRef, modelUid, scheduleHideToolbar, setDraggingToolbarItem]);
+
+  useEffect(() => {
+    const hostElement = containerRef.current;
+    if (!hostElement || reportedChildActivityToAncestorsRef.current === isToolbarInteractionActive) {
+      return;
+    }
+
+    reportedChildActivityToAncestorsRef.current = isToolbarInteractionActive;
+    hostElement.dispatchEvent(
+      new CustomEvent(CHILD_FLOAT_MENU_ACTIVITY_EVENT, {
+        bubbles: true,
+        detail: { active: isToolbarInteractionActive, modelUid },
+      }),
+    );
+  }, [containerRef, isToolbarInteractionActive, modelUid]);
+
+  useEffect(() => {
+    const hostElement = containerRef.current;
+
+    return () => {
+      if (hostElement && reportedChildActivityToAncestorsRef.current) {
+        hostElement.dispatchEvent(
+          new CustomEvent(CHILD_FLOAT_MENU_ACTIVITY_EVENT, {
+            bubbles: true,
+            detail: { active: false, modelUid },
+          }),
+        );
+        reportedChildActivityToAncestorsRef.current = false;
+      }
+      clearHideToolbarTimer();
+    };
+  }, [clearHideToolbarTimer, containerRef, modelUid]);
+
+  useEffect(() => {
+    if (isToolbarPinned) {
+      clearHideToolbarTimer();
+      updatePortalRect();
+    }
+  }, [clearHideToolbarTimer, isToolbarPinned, updatePortalRect]);
+
+  const handleChildHover = useCallback(
+    (e: ReactMouseEvent) => {
+      const target = e.target as HTMLElement;
+      const childWithMenu = target.closest('[data-has-float-menu]');
+      const isCurrentHostTarget = !childWithMenu || childWithMenu === containerRef.current;
+
+      if (isCurrentHostTarget) {
+        clearHideToolbarTimer();
+        setHostHovered(true);
+      }
+
+      setHideMenu(!!childWithMenu && childWithMenu !== containerRef.current);
+    },
+    [clearHideToolbarTimer, containerRef, setHostHovered],
+  );
+
+  const handleHostMouseEnter = useCallback(() => {
+    clearHideToolbarTimer();
+    setHideMenu(false);
+    updatePortalRect();
+    setHostHovered(true);
+  }, [clearHideToolbarTimer, setHostHovered, updatePortalRect]);
+
+  const handleHostMouseLeave = useCallback(
+    (e: ReactMouseEvent<HTMLDivElement>) => {
+      if (isToolbarPinnedRef.current) {
+        setHostHovered(false);
+        return;
+      }
+      if (isNodeWithin(e.relatedTarget, toolbarContainerRef.current)) {
+        clearHideToolbarTimer();
+        setHostHovered(false);
+        setToolbarHovered(true);
+        return;
+      }
+      if (isNodeWithinDescendantFloatToolbar(e.relatedTarget, containerRef.current, modelUid)) {
+        clearHideToolbarTimer();
+        setHideMenu(false);
+        setHostHovered(true);
+        return;
+      }
+      scheduleHideToolbar();
+    },
+    [
+      clearHideToolbarTimer,
+      containerRef,
+      modelUid,
+      scheduleHideToolbar,
+      setHostHovered,
+      setToolbarHovered,
+      toolbarContainerRef,
+    ],
+  );
+
+  const handleToolbarMouseEnter = useCallback(() => {
+    clearHideToolbarTimer();
+    updatePortalRect();
+    setHostHovered(false);
+    setToolbarHovered(true);
+  }, [clearHideToolbarTimer, setHostHovered, setToolbarHovered, updatePortalRect]);
+
+  const handleToolbarMouseLeave = useCallback(
+    (e: ReactMouseEvent<HTMLDivElement>) => {
+      if (isToolbarPinnedRef.current || isDraggingToolbarItemRef.current) {
+        clearHideToolbarTimer();
+        setToolbarHovered(false);
+        return;
+      }
+      setToolbarHovered(false);
+      if (isNodeWithin(e.relatedTarget, containerRef.current)) {
+        clearHideToolbarTimer();
+        setHostHovered(true);
+        return;
+      }
+      scheduleHideToolbar();
+    },
+    [clearHideToolbarTimer, containerRef, scheduleHideToolbar, setHostHovered, setToolbarHovered],
+  );
+
+  const handleResizeDragStart = useCallback(() => {
+    updatePortalRect();
+    setDraggingToolbar(true);
+    schedulePortalRectUpdate();
+  }, [schedulePortalRectUpdate, setDraggingToolbar, updatePortalRect]);
+
+  const handleResizeDragEnd = useCallback(() => {
+    setDraggingToolbar(false);
+    schedulePortalRectUpdate();
+  }, [schedulePortalRectUpdate, setDraggingToolbar]);
+
+  return {
+    isToolbarVisible,
+    shouldRenderToolbar,
+    handleSettingsMenuOpenChange,
+    handleChildHover,
+    handleHostMouseEnter,
+    handleHostMouseLeave,
+    handleToolbarMouseEnter,
+    handleToolbarMouseLeave,
+    handleResizeDragStart,
+    handleResizeDragEnd,
+  };
+};

package/src/components/subModel/AddSubModelButton.tsx

@@ -9,7 +9,7 @@
 
 import { Switch } from 'antd';
 import _ from 'lodash';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { FlowModelContext } from '../../flowContext';
 import { FlowModel } from '../../models';
 import { CreateModelOptions, ModelConstructor } from '../../types';
@@ -542,6 +542,22 @@ const AddSubModelButtonCore = function AddSubModelButton({
     [model, subModelKey, subModelType],
   );
 
+  React.useEffect(() => {
+    const handleSubModelChanged = () => {
+      setRefreshTick((x) => x + 1);
+    };
+
+    model.emitter?.on('onSubModelAdded', handleSubModelChanged);
+    model.emitter?.on('onSubModelRemoved', handleSubModelChanged);
+    model.emitter?.on('onSubModelReplaced', handleSubModelChanged);
+
+    return () => {
+      model.emitter?.off('onSubModelAdded', handleSubModelChanged);
+      model.emitter?.off('onSubModelRemoved', handleSubModelChanged);
+      model.emitter?.off('onSubModelReplaced', handleSubModelChanged);
+    };
+  }, [model]);
+
   // 点击处理逻辑
   const onClick = async (info: any) => {
     const clickedItem = info.originalItem || info;
@@ -594,7 +610,7 @@ const AddSubModelButtonCore = function AddSubModelButton({
     let addedModel: FlowModel | undefined;
 
     try {
-      addedModel = model.flowEngine.createModel({
+      addedModel = await model.flowEngine.createModelAsync({
         ..._.cloneDeep(createOpts),
         parentId: model.uid,
         subKey: subModelKey,
@@ -651,6 +667,20 @@ const AddSubModelButtonCore = function AddSubModelButton({
     [finalItems, model, subModelKey, subModelType],
   );
 
+  useEffect(() => {
+    const handleSubModelChange = () => {
+      setRefreshTick((x) => x + 1);
+    };
+
+    model.emitter.on('onSubModelAdded', handleSubModelChange);
+    model.emitter.on('onSubModelRemoved', handleSubModelChange);
+
+    return () => {
+      model.emitter.off('onSubModelAdded', handleSubModelChange);
+      model.emitter.off('onSubModelRemoved', handleSubModelChange);
+    };
+  }, [model]);
+
   return (
     <LazyDropdown
       menu={{

package/src/components/subModel/LazyDropdown.tsx

@@ -358,6 +358,32 @@ const SearchInputWithAutoFocus: FC<InputProps & { visible: boolean }> = (props)
 
 const getKeyPath = (path: string[], key: string) => [...path, key].join('/');
 
+const normalizeOpenKeys = (nextOpenKeys: string[]) => {
+  const latestKey = nextOpenKeys[nextOpenKeys.length - 1];
+
+  if (!latestKey) {
+    return [];
+  }
+
+  return nextOpenKeys.filter((key) => latestKey === key || latestKey.startsWith(`${key}/`));
+};
+
+const getLabelSearchText = (label: React.ReactNode): string => {
+  if (label === null || label === undefined || typeof label === 'boolean') {
+    return '';
+  }
+  if (typeof label === 'string' || typeof label === 'number') {
+    return String(label);
+  }
+  if (Array.isArray(label)) {
+    return label.map(getLabelSearchText).join(' ');
+  }
+  if (React.isValidElement(label)) {
+    return getLabelSearchText(label.props.children);
+  }
+  return '';
+};
+
 const createSearchItem = (
   item: Item,
   searchKey: string,
@@ -406,6 +432,11 @@ const createEmptyItem = (itemKey: string, t: (key: string) => string) => ({
   disabled: true,
 });
 
+const KEEP_OPEN_LABEL_STYLE: React.CSSProperties = {
+  display: 'block',
+  width: '100%',
+};
+
 // ==================== Main Component ====================
 
 // 短暂保持打开状态的注册表（用于跨父节点快速重建时的恢复）
@@ -435,6 +466,19 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
   const { searchValues, isSearching, updateSearchValue } = useMenuSearch();
   const { requestKeepOpen, shouldPreventClose } = useKeepDropdownOpen();
   useSubmenuStyles(menuVisible, dropdownMaxHeight);
+  const handleMenuOpenChange = useCallback(
+    (nextOpenKeys: string[]) => {
+      if (!nextOpenKeys.length && shouldPreventClose()) {
+        dropdownMenuProps.onOpenChange?.(Array.from(openKeys));
+        return;
+      }
+
+      const normalized = normalizeOpenKeys(nextOpenKeys);
+      setOpenKeys(new Set(normalized));
+      dropdownMenuProps.onOpenChange?.(normalized);
+    },
+    [dropdownMenuProps, openKeys, shouldPreventClose],
+  );
 
   // 在挂载时，若存在 persistKey 且仍在持久期内，则尝试恢复打开状态
   useEffect(() => {
@@ -460,6 +504,12 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
     };
   }, [persistKey, menuVisible]);
 
+  useEffect(() => {
+    if (!menuVisible) {
+      setOpenKeys(new Set());
+    }
+  }, [menuVisible]);
+
   // 加载根 items，支持同步/异步函数
   useEffect(() => {
     const loadRootItems = async () => {
@@ -498,15 +548,10 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
     const filteredChildren = currentSearchValue
       ? (function deepFilter(items: Item[]): Item[] {
           const searchText = currentSearchValue.toLowerCase();
-          const tryString = (v: any) => {
-            if (!v) return '';
-            return typeof v === 'string' ? v : String(v);
-          };
           return items
             .map((child) => {
-              const labelStr = tryString(child.label).toLowerCase();
-              const selfMatch =
-                labelStr.includes(searchText) || (child.key && String(child.key).toLowerCase().includes(searchText));
+              const labelStr = getLabelSearchText(child.label).toLowerCase();
+              const selfMatch = labelStr.includes(searchText);
               if (child.type === 'group' && Array.isArray(child.children)) {
                 const nested = deepFilter(child.children);
                 if (selfMatch || nested.length > 0) {
@@ -588,56 +633,73 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
         return { type: 'divider', key: keyPath };
       }
 
+      const label = typeof item.label === 'string' ? t(item.label) : item.label;
+
       // 非 group 的“子菜单”也支持本层级搜索：当 item.searchable = true 且存在 children 时
       if (item.searchable && children) {
         return {
-          key: item.key,
-          label: typeof item.label === 'string' ? t(item.label) : item.label,
+          key: keyPath,
+          label,
           onClick: (info: any) => {},
-          onMouseEnter: () => {
-            setOpenKeys((prev) => {
-              if (prev.has(keyPath)) return prev;
-              const next = new Set(prev);
-              next.add(keyPath);
-              return next;
-            });
-          },
           children: buildSearchChildren(children, item, keyPath, path, menuVisible, resolveItems),
         };
       }
 
+      const itemShouldKeepOpen = !children && (item.keepDropdownOpen ?? keepDropdownOpen ?? false);
+      const handleLeafClick = (info: any) => {
+        if (children) {
+          return;
+        }
+
+        if (itemShouldKeepOpen) {
+          requestKeepOpen();
+        }
+
+        const extendedInfo: ExtendedMenuInfo = {
+          ...info,
+          key: info?.key ?? keyPath,
+          keyPath: info?.keyPath ?? [keyPath],
+          item: info?.item || item,
+          originalItem: item,
+          keepDropdownOpen: itemShouldKeepOpen,
+        };
+
+        menu.onClick?.(extendedInfo);
+      };
+
       return {
         key: keyPath,
-        label: typeof item.label === 'string' ? t(item.label) : item.label,
+        label: itemShouldKeepOpen ? (
+          <div
+            style={KEEP_OPEN_LABEL_STYLE}
+            onMouseDown={(event) => {
+              event.stopPropagation();
+              requestKeepOpen();
+            }}
+            onClick={(event) => {
+              event.stopPropagation();
+              handleLeafClick({
+                key: keyPath,
+                keyPath: [keyPath],
+                item,
+                domEvent: event,
+              });
+            }}
+          >
+            {label}
+          </div>
+        ) : (
+          label
+        ),
         onClick: (info: any) => {
-          if (children) {
+          if (!itemShouldKeepOpen) handleLeafClick(info);
+        },
+        onMouseDown: () => {
+          if (!itemShouldKeepOpen) {
             return;
           }
 
-          // 检查是否应该保持下拉菜单打开
-          const itemShouldKeepOpen = item.keepDropdownOpen ?? keepDropdownOpen ?? false;
-
-          // 如果需要保持菜单打开，请求保持打开状态
-          if (itemShouldKeepOpen) {
-            requestKeepOpen();
-          }
-
-          const extendedInfo: ExtendedMenuInfo = {
-            ...info,
-            item: info.item || item,
-            originalItem: item,
-            keepDropdownOpen: itemShouldKeepOpen,
-          };
-
-          menu.onClick?.(extendedInfo);
-        },
-        onMouseEnter: () => {
-          setOpenKeys((prev) => {
-            if (prev.has(keyPath)) return prev;
-            const next = new Set(prev);
-            next.add(keyPath);
-            return next;
-          });
+          requestKeepOpen();
         },
         children:
           children && children.length > 0
@@ -684,8 +746,10 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
       placement="bottomLeft"
       menu={{
         ...dropdownMenuProps,
+        openKeys: Array.from(openKeys),
         items: items,
         onClick: () => {},
+        onOpenChange: handleMenuOpenChange,
         style: {
           maxHeight: dropdownMaxHeight,
           overflowY: 'auto',