@nocobase/flow-engine 2.1.0-beta.9 → 2.2.0-alpha.1

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

@@ -7,18 +7,47 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 import { DndContextProps } from '@dnd-kit/core';
+import type { Transform } from '@dnd-kit/utilities';
 import React, { FC } from 'react';
 import { FlowModel } from '../../models';
 import { PersistOptions } from '../../types';
 export * from './findModelUidPosition';
 export * from './gridDragPlanner';
 export declare const EMPTY_COLUMN_UID = "EMPTY_COLUMN";
+export declare const TOOLBAR_DRAG_ACTIVITY_EVENT = "nb-toolbar-drag-activity";
+type ToolbarDragAnchorPoint = {
+    x: number;
+    y: number;
+};
+export declare const resolveOverlayAnchorTransform: ({ activeId, active, transform, activeNodeRect, dragAnchorPoint, }: {
+    activeId: string | null;
+    active: {
+        id: string | number;
+    } | null | undefined;
+    transform: Transform;
+    activeNodeRect: {
+        top: number;
+        left: number;
+    } | null;
+    dragAnchorPoint: ToolbarDragAnchorPoint | null;
+}) => Transform;
 export declare const DragHandler: FC<{
     model: FlowModel;
-    children: React.ReactNode;
+    children?: React.ReactNode;
 }>;
 export declare const Droppable: FC<{
     model: FlowModel<any>;
     children: React.ReactNode;
 }>;
-export declare const DndProvider: FC<DndContextProps & PersistOptions>;
+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;
+}
+export declare const DndProvider: FC<DndProviderProps>;

package/lib/components/dnd/index.js

@@ -41,7 +41,9 @@ __export(dnd_exports, {
   DndProvider: () => DndProvider,
   DragHandler: () => DragHandler,
   Droppable: () => Droppable,
-  EMPTY_COLUMN_UID: () => EMPTY_COLUMN_UID
+  EMPTY_COLUMN_UID: () => EMPTY_COLUMN_UID,
+  TOOLBAR_DRAG_ACTIVITY_EVENT: () => TOOLBAR_DRAG_ACTIVITY_EVENT,
+  resolveOverlayAnchorTransform: () => resolveOverlayAnchorTransform
 });
 module.exports = __toCommonJS(dnd_exports);
 var import_icons = require("@ant-design/icons");
@@ -52,17 +54,186 @@ var import_provider = require("../../provider");
 __reExport(dnd_exports, require("./findModelUidPosition"), module.exports);
 __reExport(dnd_exports, require("./gridDragPlanner"), module.exports);
 const EMPTY_COLUMN_UID = "EMPTY_COLUMN";
+const TOOLBAR_DRAG_ACTIVITY_EVENT = "nb-toolbar-drag-activity";
+const TOOLBAR_DRAG_ANCHOR_EVENT = "nb-toolbar-drag-anchor";
+const MENU_SUBMENU_POPUP_SELECTOR = ".ant-menu-submenu-popup";
+const resolveOverlayAnchorTransform = /* @__PURE__ */ __name(({
+  activeId,
+  active,
+  transform,
+  activeNodeRect,
+  dragAnchorPoint
+}) => {
+  if (!activeId || (active == null ? void 0 : active.id) !== activeId || !dragAnchorPoint || !activeNodeRect) {
+    return transform;
+  }
+  return {
+    ...transform,
+    x: transform.x + dragAnchorPoint.x - activeNodeRect.left,
+    y: transform.y + dragAnchorPoint.y - activeNodeRect.top
+  };
+}, "resolveOverlayAnchorTransform");
+const resolveDraggableHostNode = /* @__PURE__ */ __name((activatorNode) => {
+  const ownerDocument = activatorNode == null ? void 0 : activatorNode.ownerDocument;
+  const floatToolbarContainer = activatorNode == null ? void 0 : activatorNode.closest(".nb-toolbar-container[data-model-uid]");
+  const toolbarModelUid = floatToolbarContainer == null ? void 0 : floatToolbarContainer.getAttribute("data-model-uid");
+  if (!ownerDocument || !toolbarModelUid) {
+    return activatorNode;
+  }
+  const matchedHosts = Array.from(
+    ownerDocument.querySelectorAll(
+      `[data-has-float-menu="true"][data-float-menu-model-uid="${toolbarModelUid}"]`
+    )
+  );
+  const popupRoot = floatToolbarContainer == null ? void 0 : floatToolbarContainer.closest(MENU_SUBMENU_POPUP_SELECTOR);
+  if (popupRoot) {
+    return matchedHosts.find((hostNode) => hostNode.closest(MENU_SUBMENU_POPUP_SELECTOR) === popupRoot) || activatorNode;
+  }
+  return matchedHosts.find((hostNode) => !hostNode.closest(MENU_SUBMENU_POPUP_SELECTOR)) || matchedHosts[0] || activatorNode;
+}, "resolveDraggableHostNode");
 const DragHandler = /* @__PURE__ */ __name(({
   model,
   children = /* @__PURE__ */ import_react.default.createElement(import_icons.DragOutlined, null)
 }) => {
-  const { attributes, listeners, setNodeRef } = (0, import_core.useDraggable)({ id: model.uid });
+  const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef } = (0, import_core.useDraggable)({ id: model.uid });
+  const dragHandlerRef = (0, import_react.useRef)(null);
+  const draggableNodeRef = (0, import_react.useRef)(null);
+  const pointerPressCleanupRef = (0, import_react.useRef)(null);
+  const isDraggingRef = (0, import_react.useRef)(isDragging);
+  const isPointerPressActiveRef = (0, import_react.useRef)(false);
+  const isToolbarDragActiveRef = (0, import_react.useRef)(false);
+  const syncDraggableNodeRef = (0, import_react.useCallback)(
+    (activatorNode) => {
+      const nextNode = resolveDraggableHostNode(activatorNode);
+      if (draggableNodeRef.current === nextNode) {
+        return;
+      }
+      draggableNodeRef.current = nextNode;
+      setNodeRef(nextNode);
+    },
+    [setNodeRef]
+  );
+  const setDragHandlerNodeRef = (0, import_react.useCallback)(
+    (node) => {
+      dragHandlerRef.current = node;
+      setActivatorNodeRef(node);
+      syncDraggableNodeRef(node);
+    },
+    [setActivatorNodeRef, syncDraggableNodeRef]
+  );
+  const dispatchToolbarDragActivity = (0, import_react.useCallback)(
+    (active) => {
+      var _a;
+      const ownerDocument = (_a = dragHandlerRef.current) == null ? void 0 : _a.ownerDocument;
+      if (!ownerDocument) {
+        return;
+      }
+      ownerDocument.dispatchEvent(
+        new CustomEvent(TOOLBAR_DRAG_ACTIVITY_EVENT, {
+          detail: { active, modelUid: model.uid }
+        })
+      );
+    },
+    [model.uid]
+  );
+  const dispatchToolbarDragAnchor = (0, import_react.useCallback)(
+    (detail) => {
+      var _a;
+      const ownerDocument = (_a = dragHandlerRef.current) == null ? void 0 : _a.ownerDocument;
+      if (!ownerDocument) {
+        return;
+      }
+      ownerDocument.dispatchEvent(
+        new CustomEvent(TOOLBAR_DRAG_ANCHOR_EVENT, {
+          detail: { modelUid: model.uid, point: detail.point }
+        })
+      );
+    },
+    [model.uid]
+  );
+  const clearPointerPressListeners = (0, import_react.useCallback)(() => {
+    var _a;
+    (_a = pointerPressCleanupRef.current) == null ? void 0 : _a.call(pointerPressCleanupRef);
+    pointerPressCleanupRef.current = null;
+  }, []);
+  const syncToolbarDragActivity = (0, import_react.useCallback)(() => {
+    const nextActive = isPointerPressActiveRef.current || isDraggingRef.current;
+    if (nextActive === isToolbarDragActiveRef.current) {
+      return;
+    }
+    isToolbarDragActiveRef.current = nextActive;
+    dispatchToolbarDragActivity(nextActive);
+  }, [dispatchToolbarDragActivity]);
+  const handlePointerPressEnd = (0, import_react.useCallback)(() => {
+    isPointerPressActiveRef.current = false;
+    clearPointerPressListeners();
+    syncToolbarDragActivity();
+  }, [clearPointerPressListeners, syncToolbarDragActivity]);
+  const registerPointerPressListeners = (0, import_react.useCallback)(() => {
+    var _a;
+    const ownerDocument = (_a = dragHandlerRef.current) == null ? void 0 : _a.ownerDocument;
+    const ownerWindow = ownerDocument == null ? void 0 : ownerDocument.defaultView;
+    if (!ownerDocument) {
+      return;
+    }
+    clearPointerPressListeners();
+    const handlePointerEnd = /* @__PURE__ */ __name(() => {
+      handlePointerPressEnd();
+    }, "handlePointerEnd");
+    const handleKeyDown = /* @__PURE__ */ __name((event) => {
+      if (event.key === "Escape") {
+        handlePointerPressEnd();
+      }
+    }, "handleKeyDown");
+    ownerDocument.addEventListener("pointerup", handlePointerEnd, true);
+    ownerDocument.addEventListener("pointercancel", handlePointerEnd, true);
+    ownerDocument.addEventListener("keydown", handleKeyDown, true);
+    ownerWindow == null ? void 0 : ownerWindow.addEventListener("blur", handlePointerEnd);
+    pointerPressCleanupRef.current = () => {
+      ownerDocument.removeEventListener("pointerup", handlePointerEnd, true);
+      ownerDocument.removeEventListener("pointercancel", handlePointerEnd, true);
+      ownerDocument.removeEventListener("keydown", handleKeyDown, true);
+      ownerWindow == null ? void 0 : ownerWindow.removeEventListener("blur", handlePointerEnd);
+    };
+  }, [clearPointerPressListeners, handlePointerPressEnd]);
+  (0, import_react.useEffect)(() => {
+    syncDraggableNodeRef(dragHandlerRef.current);
+  }, [syncDraggableNodeRef]);
+  (0, import_react.useEffect)(() => {
+    isDraggingRef.current = isDragging;
+    syncToolbarDragActivity();
+  }, [isDragging, syncToolbarDragActivity]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (isToolbarDragActiveRef.current) {
+        dispatchToolbarDragActivity(false);
+      }
+      isPointerPressActiveRef.current = false;
+      isDraggingRef.current = false;
+      isToolbarDragActiveRef.current = false;
+      clearPointerPressListeners();
+    };
+  }, [clearPointerPressListeners, dispatchToolbarDragActivity]);
   return /* @__PURE__ */ import_react.default.createElement(
     "span",
     {
-      ref: setNodeRef,
+      ref: setDragHandlerNodeRef,
       ...listeners,
       ...attributes,
+      onPointerDownCapture: (event) => {
+        if (event.button !== 0) {
+          return;
+        }
+        dispatchToolbarDragAnchor({
+          point: {
+            x: event.clientX,
+            y: event.clientY
+          }
+        });
+        isPointerPressActiveRef.current = true;
+        syncToolbarDragActivity();
+        registerPointerPressListeners();
+      },
       style: {
         cursor: "grab"
       }
@@ -103,22 +274,54 @@ const Droppable = /* @__PURE__ */ __name(({ model, children }) => {
 }, "Droppable");
 const DndProvider = /* @__PURE__ */ __name(({
   persist = true,
+  showDragOverlay = true,
   children,
+  onDragStart,
   onDragEnd,
+  onDragCancel,
   ...restProps
 }) => {
   const [activeId, setActiveId] = (0, import_react.useState)(null);
+  const [dragAnchorPoint, setDragAnchorPoint] = (0, import_react.useState)(null);
   const flowEngine = (0, import_provider.useFlowEngine)();
+  (0, import_react.useEffect)(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const handleToolbarDragAnchor = /* @__PURE__ */ __name((event) => {
+      var _a;
+      const customEvent = event;
+      setDragAnchorPoint(((_a = customEvent.detail) == null ? void 0 : _a.point) || null);
+    }, "handleToolbarDragAnchor");
+    document.addEventListener(TOOLBAR_DRAG_ANCHOR_EVENT, handleToolbarDragAnchor);
+    return () => {
+      document.removeEventListener(TOOLBAR_DRAG_ANCHOR_EVENT, handleToolbarDragAnchor);
+    };
+  }, []);
+  const overlayAnchorModifier = (0, import_react.useCallback)(
+    ({ active, activeNodeRect, transform }) => {
+      const nextTransform = resolveOverlayAnchorTransform({
+        activeId,
+        active,
+        transform,
+        activeNodeRect,
+        dragAnchorPoint
+      });
+      return nextTransform;
+    },
+    [activeId, dragAnchorPoint]
+  );
   return /* @__PURE__ */ import_react.default.createElement(
     import_core.DndContext,
     {
+      ...restProps,
       onDragStart: (event) => {
-        var _a;
         setActiveId(event.active.id);
-        (_a = restProps.onDragStart) == null ? void 0 : _a.call(restProps, event);
+        onDragStart == null ? void 0 : onDragStart(event);
       },
       onDragEnd: (event) => {
         setActiveId(null);
+        setDragAnchorPoint(null);
         if (!onDragEnd) {
           if (event.over) {
             flowEngine.moveModel(event.active.id, event.over.id, { persist });
@@ -127,30 +330,46 @@ const DndProvider = /* @__PURE__ */ __name(({
           onDragEnd(event);
         }
       },
+      onDragCancel: (event) => {
+        setActiveId(null);
+        setDragAnchorPoint(null);
+        onDragCancel == null ? void 0 : onDragCancel(event);
+      },
       ...restProps
     },
     children,
-    (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ import_react.default.createElement(import_core.DragOverlay, { dropAnimation: null, zIndex: 2e3 }, activeId && /* @__PURE__ */ import_react.default.createElement(
-        "span",
+    showDragOverlay && typeof document !== "undefined" ? (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ import_react.default.createElement(
+        import_core.DragOverlay,
         {
-          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)"
-          }
+          dropAnimation: null,
+          modifiers: [overlayAnchorModifier],
+          zIndex: 2e3,
+          style: { pointerEvents: "none" }
         },
-        flowEngine.translate("Dragging")
-      )),
+        activeId && /* @__PURE__ */ import_react.default.createElement(
+          "span",
+          {
+            "data-testid": "flow-drag-preview",
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              whiteSpace: "nowrap",
+              background: "#fff",
+              border: "1px solid #1890ff",
+              borderRadius: 4,
+              padding: "4px 12px",
+              color: "#1890ff",
+              pointerEvents: "none",
+              // fontSize: 18,
+              boxShadow: "0 2px 8px rgba(0,0,0,0.15)"
+            }
+          },
+          flowEngine.translate("Dragging")
+        )
+      ),
       document.body
-    )
+    ) : null
   );
 }, "DndProvider");
 // Annotate the CommonJS export names for ESM import in node:
@@ -159,6 +378,8 @@ const DndProvider = /* @__PURE__ */ __name(({
   DragHandler,
   Droppable,
   EMPTY_COLUMN_UID,
+  TOOLBAR_DRAG_ACTIVITY_EVENT,
+  resolveOverlayAnchorTransform,
   ...require("./findModelUidPosition"),
   ...require("./gridDragPlanner")
 });

package/lib/components/settings/wrappers/component/SelectWithTitle.d.ts

@@ -15,5 +15,6 @@ export interface SelectWithTitleProps {
     itemKey?: string;
     onChange?: (...args: any[]) => void;
     dropdownRender?: any;
+    tooltip?: any;
 }
-export declare function SelectWithTitle({ title, getDefaultValue, onChange, options, fieldNames, itemKey, ...others }: SelectWithTitleProps): React.JSX.Element;
+export declare function SelectWithTitle({ title, getDefaultValue, onChange, options, fieldNames, itemKey, tooltip, ...others }: SelectWithTitleProps): React.JSX.Element;

package/lib/components/settings/wrappers/component/SelectWithTitle.js

@@ -50,6 +50,7 @@ function SelectWithTitle({
   options,
   fieldNames,
   itemKey,
+  tooltip,
   ...others
 }) {
   const [open, setOpen] = (0, import_react.useState)(false);
@@ -80,6 +81,18 @@ function SelectWithTitle({
     setValue(val);
     onChange == null ? void 0 : onChange({ [itemKey]: val });
   }, "handleChange");
+  const titleNode = /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      style: {
+        whiteSpace: "nowrap",
+        // 不换行
+        flexShrink: 0
+        // 不被挤压
+      }
+    },
+    title
+  );
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
@@ -94,18 +107,7 @@ function SelectWithTitle({
         }, 200);
       }
     },
-    /* @__PURE__ */ import_react.default.createElement(
-      "span",
-      {
-        style: {
-          whiteSpace: "nowrap",
-          // 不换行
-          flexShrink: 0
-          // 不被挤压
-        }
-      },
-      title
-    ),
+    tooltip ? /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: tooltip, placement: "top", destroyTooltipOnHide: true }, titleNode) : titleNode,
     /* @__PURE__ */ import_react.default.createElement(
       import_antd.Select,
       {

package/lib/components/settings/wrappers/contextual/DefaultSettingsIcon.d.ts

@@ -6,6 +6,7 @@
  * 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 type { DropdownProps } from 'antd';
 import React from 'react';
 import { FlowModel } from '../../../../models';
 /**
@@ -18,6 +19,8 @@ interface DefaultSettingsIconProps {
     showCopyUidButton?: boolean;
     menuLevels?: number;
     flattenSubMenus?: boolean;
+    onDropdownVisibleChange?: (open: boolean) => void;
+    getPopupContainer?: DropdownProps['getPopupContainer'];
     [key: string]: any;
 }
 export declare const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps>;