@nocobase/flow-engine 2.1.0-beta.8 → 2.1.0

package/lib/FlowContextProvider.d.ts

@@ -8,7 +8,7 @@
  */
 import React from 'react';
 import { FlowContext, FlowEngineContext } from './flowContext';
-import { FlowView } from './views/FlowView';
+import { FlowView, FlowViewer } from './views/FlowView';
 export declare const FlowReactContext: React.Context<FlowContext>;
 export declare const FlowViewContext: React.Context<FlowContext>;
 export declare function FlowContextProvider(props: {
@@ -22,3 +22,7 @@ export declare const FlowViewContextProvider: React.MemoExoticComponent<(props:
 export declare function useFlowContext<T = FlowEngineContext>(): T;
 export declare function useFlowViewContext<T = FlowEngineContext>(): T;
 export declare function useFlowView(): FlowView;
+/**
+ * Access the `FlowViewer` that opens new drawers / modals / pages (`viewer.drawer({...})`, `viewer.modal({...})`, etc.). This is the counterpart to `useFlowView()`: `useFlowView()` returns the *current* mounted view (use it to close yourself, render Header/Footer slots, etc.), while `useFlowViewer()` returns the surface that lets you open a *new* view from inside any flow-context subtree.
+ */
+export declare function useFlowViewer(): FlowViewer;

package/lib/FlowContextProvider.js

@@ -43,7 +43,8 @@ __export(FlowContextProvider_exports, {
   FlowViewContextProvider: () => FlowViewContextProvider,
   useFlowContext: () => useFlowContext,
   useFlowView: () => useFlowView,
-  useFlowViewContext: () => useFlowViewContext
+  useFlowViewContext: () => useFlowViewContext,
+  useFlowViewer: () => useFlowViewer
 });
 module.exports = __toCommonJS(FlowContextProvider_exports);
 var import_react = __toESM(require("react"));
@@ -70,6 +71,11 @@ function useFlowView() {
   return ctx.view;
 }
 __name(useFlowView, "useFlowView");
+function useFlowViewer() {
+  const ctx = useFlowContext();
+  return ctx.viewer;
+}
+__name(useFlowViewer, "useFlowViewer");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   FlowContextProvider,
@@ -78,5 +84,6 @@ __name(useFlowView, "useFlowView");
   FlowViewContextProvider,
   useFlowContext,
   useFlowView,
-  useFlowViewContext
+  useFlowViewContext,
+  useFlowViewer
 });

package/lib/components/FieldModelRenderer.js

@@ -40,7 +40,7 @@ __export(FieldModelRenderer_exports, {
   FieldModelRenderer: () => FieldModelRenderer
 });
 module.exports = __toCommonJS(FieldModelRenderer_exports);
-var import_flow_engine = require("@nocobase/flow-engine");
+var import_FlowModelRenderer = require("./FlowModelRenderer");
 var import_lodash = __toESM(require("lodash"));
 var import_react = __toESM(require("react"));
 const flowModelRendererPropKeys = [
@@ -93,7 +93,7 @@ function FieldModelRenderer(props) {
   (0, import_react.useEffect)(() => {
     model && model.setProps(modelProps);
   }, [modelProps]);
-  return /* @__PURE__ */ import_react.default.createElement(import_flow_engine.FlowModelRenderer, { model, ...rest });
+  return /* @__PURE__ */ import_react.default.createElement(import_FlowModelRenderer.FlowModelRenderer, { model, ...rest });
 }
 __name(FieldModelRenderer, "FieldModelRenderer");
 // Annotate the CommonJS export names for ESM import in node:

package/lib/components/FlowModelRenderer.d.ts

@@ -19,7 +19,9 @@ export interface FlowModelRendererProps {
         showBackground?: boolean;
         showBorder?: boolean;
         showDragHandle?: boolean;
-        /** 自定义工具栏样式 */
+        /** 是否显示事件流入口，默认 true */
+        showDynamicFlowsEditor?: boolean;
+        /** 自定义工具栏样式，`top/left/right/bottom` 会作为 portal overlay 的 inset 使用 */
         style?: React.CSSProperties;
         /**
          * @default 'inside'

package/lib/components/FlowModelRenderer.js

@@ -61,11 +61,12 @@ const FlowModelRendererWithAutoFlows = (0, import_reactive.observer)(
     showErrorFallback,
     settingsMenuLevel,
     extraToolbarItems,
-    fallback
+    fallback,
+    useCache
   }) => {
     const { loading: pending, error: autoFlowsError } = (0, import_hooks.useApplyAutoFlows)(model, inputArgs, {
       throwOnError: false,
-      useCache: model.context.useCache
+      useCache
     });
     (0, import_utils.setAutoFlowError)(model, autoFlowsError || null);
     if (pending) {
@@ -134,6 +135,7 @@ const FlowModelRendererCore = (0, import_reactive.observer)(
             showBackground: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.showBackground : void 0,
             showBorder: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.showBorder : void 0,
             showDragHandle: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.showDragHandle : void 0,
+            showDynamicFlowsEditor: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.showDynamicFlowsEditor : void 0,
             settingsMenuLevel,
             extraToolbarItems,
             toolbarStyle: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.style : void 0,
@@ -166,6 +168,7 @@ const FlowModelRendererCore = (0, import_reactive.observer)(
             showBackground: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.showBackground : void 0,
             showBorder: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.showBorder : void 0,
             showDragHandle: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.showDragHandle : void 0,
+            showDynamicFlowsEditor: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.showDynamicFlowsEditor : void 0,
             settingsMenuLevel,
             extraToolbarItems,
             toolbarStyle: import_lodash.default.isObject(showFlowSettings) ? showFlowSettings.style : void 0,
@@ -195,13 +198,15 @@ const FlowModelRenderer = (0, import_reactive.observer)(
     extraToolbarItems,
     useCache
   }) => {
+    var _a;
+    const resolvedUseCache = typeof useCache === "boolean" ? useCache : (_a = model == null ? void 0 : model.context) == null ? void 0 : _a.useCache;
     (0, import_react.useEffect)(() => {
-      if (model == null ? void 0 : model.context) {
+      if ((model == null ? void 0 : model.context) && typeof resolvedUseCache !== "undefined") {
         model.context.defineProperty("useCache", {
-          value: typeof useCache === "boolean" ? useCache : model.context.useCache
+          value: resolvedUseCache
         });
       }
-    }, [model == null ? void 0 : model.context, useCache]);
+    }, [model == null ? void 0 : model.context, resolvedUseCache]);
     if (!model || typeof model.render !== "function") {
       console.warn("FlowModelRenderer: Invalid model or render method not found.", model);
       return null;
@@ -218,7 +223,8 @@ const FlowModelRenderer = (0, import_reactive.observer)(
         showErrorFallback,
         settingsMenuLevel,
         extraToolbarItems,
-        fallback
+        fallback,
+        useCache: resolvedUseCache
       }
     );
     if (showErrorFallback) {

package/lib/components/FormItem.d.ts

@@ -14,5 +14,11 @@ interface ExtendedFormItemProps extends FormItemProps {
     labelWrap?: boolean;
     showLabel?: boolean;
 }
+export declare const verticalFormItemLabelStyle: {
+    paddingBottom: number;
+};
+export declare const formItemStyle: {
+    marginBottom: number;
+};
 export declare const FormItem: ({ children, showLabel, labelWidth, ...rest }: ExtendedFormItemProps & ChildExtraProps) => React.JSX.Element;
 export {};

package/lib/components/FormItem.js

@@ -37,11 +37,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var FormItem_exports = {};
 __export(FormItem_exports, {
-  FormItem: () => FormItem
+  FormItem: () => FormItem,
+  formItemStyle: () => formItemStyle,
+  verticalFormItemLabelStyle: () => verticalFormItemLabelStyle
 });
 module.exports = __toCommonJS(FormItem_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
+const verticalFormItemLabelStyle = { paddingBottom: 0 };
+const formItemStyle = { marginBottom: 12 };
 const formItemPropKeys = [
   "colon",
   "dependencies",
@@ -90,6 +94,7 @@ const FormItem = /* @__PURE__ */ __name(({
   });
   const { label, labelWrap, colon = true, layout } = rest;
   const effectiveLabelWrap = !layout || layout === "vertical" ? true : labelWrap;
+  const labelColStyle = layout === "vertical" ? { width: labelWidth, ...verticalFormItemLabelStyle } : { width: labelWidth };
   const renderLabel = /* @__PURE__ */ __name(() => {
     if (!showLabel) return null;
     if (effectiveLabelWrap) {
@@ -132,7 +137,8 @@ const FormItem = /* @__PURE__ */ __name(({
     import_antd.Form.Item,
     {
       ...rest,
-      labelCol: { style: { width: labelWidth } },
+      style: { ...formItemStyle, ...rest.style },
+      labelCol: { style: labelColStyle },
       layout,
       label: renderLabel(),
       colon: false,
@@ -147,5 +153,7 @@ const FormItem = /* @__PURE__ */ __name(({
 }, "FormItem");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  FormItem
+  FormItem,
+  formItemStyle,
+  verticalFormItemLabelStyle
 });

package/lib/components/MobilePopup.js

@@ -41,11 +41,12 @@ __export(MobilePopup_exports, {
 });
 module.exports = __toCommonJS(MobilePopup_exports);
 var import_antd = require("antd");
-var import_antd_mobile = require("antd-mobile");
 var import_react = __toESM(require("react"));
-var import_antd_mobile_icons = require("antd-mobile-icons");
 var import_MobilePopup = require("./MobilePopup.style");
 var import_react_i18next = require("react-i18next");
+var import_lazy_helper = require("../lazy-helper");
+const { Popup } = (0, import_lazy_helper.lazy)(() => import("antd-mobile"), "Popup");
+const { CloseOutline } = (0, import_lazy_helper.lazy)(() => import("antd-mobile-icons"), "CloseOutline");
 const MobilePopup = /* @__PURE__ */ __name((props) => {
   const { title, visible, onClose: closePopup, children, minHeight, className, footer } = props;
   const { t } = (0, import_react_i18next.useTranslation)();
@@ -67,7 +68,7 @@ const MobilePopup = /* @__PURE__ */ __name((props) => {
     };
   }, []);
   return /* @__PURE__ */ import_react.default.createElement(import_antd.ConfigProvider, { theme }, /* @__PURE__ */ import_react.default.createElement(
-    import_antd_mobile.Popup,
+    Popup,
     {
       className: `${componentCls} ${hashId} ${className || ""}`,
       visible,
@@ -81,7 +82,7 @@ const MobilePopup = /* @__PURE__ */ __name((props) => {
       style,
       destroyOnClose: true
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "nb-mobile-action-drawer-placeholder" }, /* @__PURE__ */ import_react.default.createElement(import_antd_mobile_icons.CloseOutline, null)), /* @__PURE__ */ import_react.default.createElement("span", null, title), /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "nb-mobile-action-drawer-placeholder" }, /* @__PURE__ */ import_react.default.createElement(CloseOutline, null)), /* @__PURE__ */ import_react.default.createElement("span", null, title), /* @__PURE__ */ import_react.default.createElement(
       "span",
       {
         className: "nb-mobile-action-drawer-close-icon",
@@ -90,7 +91,7 @@ const MobilePopup = /* @__PURE__ */ __name((props) => {
         tabIndex: 0,
         "aria-label": t("Close")
       },
-      /* @__PURE__ */ import_react.default.createElement(import_antd_mobile_icons.CloseOutline, null)
+      /* @__PURE__ */ import_react.default.createElement(CloseOutline, null)
     )),
     children,
     footer && /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-footer" }, footer)

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

@@ -32,6 +32,33 @@ export interface GridLayoutData {
     rows: Record<string, string[][]>;
     sizes: Record<string, number[]>;
     rowOrder?: string[];
+    layout?: GridLayoutV2;
+}
+export interface GridLayoutV2 {
+    version: 2;
+    rows: GridRowV2[];
+}
+export interface GridRowV2 {
+    id: string;
+    cells: GridCellV2[];
+    sizes: number[];
+}
+export interface GridCellV2 {
+    id: string;
+    items?: string[];
+    rows?: GridRowV2[];
+}
+export interface GridLayoutPathEntry {
+    rowId: string;
+    cellId?: string;
+}
+export type GridLayoutPath = GridLayoutPathEntry[];
+export interface GridLayoutPosition {
+    path: GridLayoutPath;
+    rowIndex: number;
+    cellIndex: number;
+    itemIndex: number;
+    itemUid: string;
 }
 export interface ColumnSlot {
     type: 'column';
@@ -40,6 +67,7 @@ export interface ColumnSlot {
     insertIndex: number;
     position: 'before' | 'after';
     rect: Rect;
+    path?: GridLayoutPath;
 }
 export interface ColumnEdgeSlot {
     type: 'column-edge';
@@ -47,12 +75,14 @@ export interface ColumnEdgeSlot {
     columnIndex: number;
     direction: 'left' | 'right';
     rect: Rect;
+    path?: GridLayoutPath;
 }
 export interface RowGapSlot {
     type: 'row-gap';
     targetRowId: string;
     position: 'above' | 'below';
     rect: Rect;
+    path?: GridLayoutPath;
 }
 export interface EmptyRowSlot {
     type: 'empty-row';
@@ -63,8 +93,19 @@ export interface EmptyColumnSlot {
     rowId: string;
     columnIndex: number;
     rect: Rect;
+    path?: GridLayoutPath;
 }
-export type LayoutSlot = ColumnSlot | ColumnEdgeSlot | RowGapSlot | EmptyRowSlot | EmptyColumnSlot;
+export interface ItemEdgeSlot {
+    type: 'item-edge';
+    rowId: string;
+    columnIndex: number;
+    itemIndex: number;
+    itemUid: string;
+    direction: 'left' | 'right';
+    rect: Rect;
+    path?: GridLayoutPath;
+}
+export type LayoutSlot = ColumnSlot | ColumnEdgeSlot | RowGapSlot | EmptyRowSlot | EmptyColumnSlot | ItemEdgeSlot;
 /**
  * 列内插入的配置
  */
@@ -122,10 +163,26 @@ export interface BuildLayoutSnapshotOptions {
 export declare const buildLayoutSnapshot: ({ container }: BuildLayoutSnapshotOptions) => LayoutSnapshot;
 export declare const getSlotKey: (slot: LayoutSlot) => string;
 export declare const resolveDropIntent: (point: Point, slots: LayoutSlot[]) => LayoutSlot | null;
+export declare const projectLayoutToLegacyRows: (layout: GridLayoutV2) => GridLayoutData;
+export declare const normalizeGridLayout: ({ layout, rows, sizes, rowOrder, itemUids, generateId, logger, gridUid, }: {
+    layout?: GridLayoutV2 | null;
+    rows?: Record<string, string[][]>;
+    sizes?: Record<string, number[]>;
+    rowOrder?: string[];
+    itemUids?: string[];
+    generateId?: () => string;
+    logger?: Pick<Console, 'warn'>;
+    gridUid?: string;
+}) => GridLayoutV2;
+export declare const replaceUidInGridLayout: (layout: GridLayoutV2, fromUid: string, toUid: string) => GridLayoutV2;
+export declare const findModelUidLayoutPosition: (layout: GridLayoutV2, uidValue: string) => GridLayoutPosition | null;
+export declare const isSameGridLayout: (a: GridLayoutV2, b: GridLayoutV2) => boolean;
 export interface SimulateLayoutOptions {
     slot: LayoutSlot;
     sourceUid: string;
     layout: GridLayoutData;
     generateRowId?: () => string;
+    generatedIds?: Map<string, string>;
+    generateId?: (key: string) => string;
 }
-export declare const simulateLayoutForSlot: ({ slot, sourceUid, layout, generateRowId, }: SimulateLayoutOptions) => GridLayoutData;
+export declare const simulateLayoutForSlot: ({ slot, sourceUid, layout, generateRowId, generatedIds, generateId, }: SimulateLayoutOptions) => GridLayoutData;