@nocobase/flow-engine 2.0.0-alpha.2

package/lib/components/FormItem.js

@@ -0,0 +1,147 @@
+/**
+ * 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.
+ */
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var FormItem_exports = {};
+__export(FormItem_exports, {
+  FormItem: () => FormItem
+});
+module.exports = __toCommonJS(FormItem_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+const formItemPropKeys = [
+  "colon",
+  "dependencies",
+  "extra",
+  "getValueFromEvent",
+  "getValueProps",
+  "hasFeedback",
+  "help",
+  "htmlFor",
+  "initialValue",
+  "label",
+  "labelAlign",
+  "labelCol",
+  "messageVariables",
+  "name",
+  "normalize",
+  "noStyle",
+  "preserve",
+  "rules",
+  "tooltip",
+  "trigger",
+  "validateStatus",
+  "validateTrigger",
+  "valuePropName",
+  "wrapperCol",
+  "labelWidth",
+  "labelWrap",
+  "layout",
+  "required",
+  "showLabel"
+];
+const FormItem = /* @__PURE__ */ __name(({
+  children,
+  showLabel = true,
+  labelWidth,
+  ...rest
+}) => {
+  const childProps = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => !formItemPropKeys.includes(key))
+  );
+  const processedChildren = typeof children === "function" ? children : import_react.default.Children.map(children, (child) => {
+    if (import_react.default.isValidElement(child)) {
+      return import_react.default.cloneElement(child, { ...childProps });
+    }
+    return child;
+  });
+  const { label, labelWrap, colon = true, layout } = rest;
+  const effectiveLabelWrap = !layout || layout === "vertical" ? true : labelWrap;
+  const renderLabel = /* @__PURE__ */ __name(() => {
+    if (!showLabel) return null;
+    if (effectiveLabelWrap) {
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          style: {
+            width: "100%",
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            fontWeight: 600
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement("span", { style: { flex: 1 } }, label),
+        colon && /* @__PURE__ */ import_react.default.createElement("span", { style: { marginLeft: 4, flexShrink: 0 } }, ":")
+      );
+    }
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: label }, /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          maxWidth: (typeof labelWidth === "number" ? labelWidth : 120) - 20,
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          verticalAlign: "middle",
+          fontWeight: 600
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement("span", { style: { flexShrink: 1, overflow: "hidden", textOverflow: "ellipsis" } }, label),
+      colon && /* @__PURE__ */ import_react.default.createElement("span", { style: { marginLeft: 4, flexShrink: 0 } }, ":")
+    ));
+  }, "renderLabel");
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Form.Item,
+    {
+      ...rest,
+      labelCol: { style: { width: labelWidth } },
+      layout,
+      label: renderLabel(),
+      colon: false,
+      extra: rest.extra && /* @__PURE__ */ import_react.default.createElement("span", { style: { whiteSpace: "pre-wrap" } }, rest.extra)
+    },
+    processedChildren
+  );
+}, "FormItem");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FormItem
+});

package/lib/components/common/FlowSettingsButton.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 { ButtonProps } from 'antd';
+import React from 'react';
+export declare const FlowSettingsButton: React.MemoExoticComponent<import("@formily/reactive-react").ReactFC<ButtonProps>>;

package/lib/components/common/FlowSettingsButton.js

@@ -0,0 +1,66 @@
+/**
+ * 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.
+ */
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var FlowSettingsButton_exports = {};
+__export(FlowSettingsButton_exports, {
+  FlowSettingsButton: () => FlowSettingsButton
+});
+module.exports = __toCommonJS(FlowSettingsButton_exports);
+var import_antd = require("antd");
+var import_react = __toESM(require("react"));
+var import_withFlowDesignMode = require("./withFlowDesignMode");
+const FlowSettingsButtonCore = /* @__PURE__ */ __name((props) => {
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Button,
+    {
+      ...props,
+      type: "dashed",
+      style: {
+        ...props.style,
+        borderColor: "var(--colorSettings)",
+        color: "var(--colorSettings)",
+        alignSelf: "flex-start"
+      }
+    }
+  );
+}, "FlowSettingsButtonCore");
+const FlowSettingsButton = (0, import_withFlowDesignMode.withFlowDesignMode)(FlowSettingsButtonCore);
+FlowSettingsButton.displayName = "FlowSettingsButton";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FlowSettingsButton
+});

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

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+export * from './FlowSettingsButton';

package/lib/components/common/index.js

@@ -0,0 +1,30 @@
+/**
+ * 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.
+ */
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var common_exports = {};
+module.exports = __toCommonJS(common_exports);
+__reExport(common_exports, require("./FlowSettingsButton"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./FlowSettingsButton")
+});

package/lib/components/common/withFlowDesignMode.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 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 React from 'react';
+/**
+ * 高阶组件：仅在设计模式启用时渲染子组件
+ *
+ * @param WrappedComponent 要包装的组件
+ * @returns 包装后的组件，只在 flowSettings.enabled 为 true 时渲染
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = withFlowDesignMode(({ model, ...props }) => {
+ *   // 这些计算只在设计模式启用时才会执行
+ *   const expensiveData = useMemo(() => complexCalculation(), []);
+ *
+ *   return <div>{expensiveData}</div>;
+ * });
+ * ```
+ */
+export declare function withFlowDesignMode<P extends Record<string, any>>(WrappedComponent: React.ComponentType<P>): React.MemoExoticComponent<import("@formily/reactive-react").ReactFC<React.PropsWithoutRef<P>>>;

package/lib/components/common/withFlowDesignMode.js

@@ -0,0 +1,61 @@
+/**
+ * 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.
+ */
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var withFlowDesignMode_exports = {};
+__export(withFlowDesignMode_exports, {
+  withFlowDesignMode: () => withFlowDesignMode
+});
+module.exports = __toCommonJS(withFlowDesignMode_exports);
+var import_react = __toESM(require("react"));
+var import_reactive_react = require("@formily/reactive-react");
+var import_provider = require("../../provider");
+function withFlowDesignMode(WrappedComponent) {
+  const WithFlowDesignModeComponent = (0, import_reactive_react.observer)((props) => {
+    const flowEngine = (0, import_provider.useFlowEngine)();
+    if (!flowEngine.flowSettings.enabled) {
+      return null;
+    }
+    return /* @__PURE__ */ import_react.default.createElement(WrappedComponent, { ...props });
+  });
+  WithFlowDesignModeComponent.displayName = `withFlowDesignMode(${WrappedComponent.displayName || WrappedComponent.name || "Component"})`;
+  return WithFlowDesignModeComponent;
+}
+__name(withFlowDesignMode, "withFlowDesignMode");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  withFlowDesignMode
+});

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

@@ -0,0 +1,50 @@
+/**
+ * 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.
+ */
+export declare enum ElementPosition {
+    TOP = "top",
+    BOTTOM = "bottom",
+    LEFT = "left",
+    RIGHT = "right",
+    TOP_EDGE = "top-edge",
+    BOTTOM_EDGE = "bottom-edge",
+    LEFT_EDGE = "left-edge",
+    RIGHT_EDGE = "right-edge"
+}
+interface MousePosition {
+    x: number;
+    y: number;
+}
+interface ElementBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface GetMousePositionOptions {
+    initialMousePos: MousePosition;
+    mouseOffset: MousePosition;
+    elementBounds: ElementBounds;
+    edgeThreshold?: number;
+    topBottomHeightRatio?: number;
+}
+/**
+ * 计算鼠标指针在元素上的位置
+ *
+ * 区域划分逻辑：
+ * 1. 上区域：宽度=元素宽度，高度=元素高度*topBottomHeightRatio，位于元素顶部
+ * 2. 下区域：宽度=元素宽度，高度=元素高度*topBottomHeightRatio，位于元素底部
+ * 3. 左区域：剩余中间部分的左侧
+ * 4. 右区域：剩余中间部分的右侧
+ * 5. 边缘区域：在各个区域的边缘处，厚度为edgeThreshold
+ *
+ * @param options 配置选项
+ * @returns 鼠标在元素上的位置
+ */
+export declare const getMousePositionOnElement: ({ initialMousePos, mouseOffset, elementBounds, edgeThreshold, topBottomHeightRatio, }: GetMousePositionOptions) => ElementPosition;
+export {};

package/lib/components/dnd/getMousePositionOnElement.js

@@ -0,0 +1,95 @@
+/**
+ * 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.
+ */
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var getMousePositionOnElement_exports = {};
+__export(getMousePositionOnElement_exports, {
+  ElementPosition: () => ElementPosition,
+  getMousePositionOnElement: () => getMousePositionOnElement
+});
+module.exports = __toCommonJS(getMousePositionOnElement_exports);
+var ElementPosition = /* @__PURE__ */ ((ElementPosition2) => {
+  ElementPosition2["TOP"] = "top";
+  ElementPosition2["BOTTOM"] = "bottom";
+  ElementPosition2["LEFT"] = "left";
+  ElementPosition2["RIGHT"] = "right";
+  ElementPosition2["TOP_EDGE"] = "top-edge";
+  ElementPosition2["BOTTOM_EDGE"] = "bottom-edge";
+  ElementPosition2["LEFT_EDGE"] = "left-edge";
+  ElementPosition2["RIGHT_EDGE"] = "right-edge";
+  return ElementPosition2;
+})(ElementPosition || {});
+const getMousePositionOnElement = /* @__PURE__ */ __name(({
+  initialMousePos,
+  mouseOffset,
+  elementBounds,
+  edgeThreshold = 5,
+  topBottomHeightRatio = 0.25
+}) => {
+  const currentMouseX = initialMousePos.x + mouseOffset.x;
+  const currentMouseY = initialMousePos.y + mouseOffset.y;
+  const relativeX = currentMouseX - elementBounds.x;
+  const relativeY = currentMouseY - elementBounds.y;
+  if (relativeX < 0 || relativeX > elementBounds.width || relativeY < 0 || relativeY > elementBounds.height) {
+    if (relativeY < 0) return "top" /* TOP */;
+    if (relativeY > elementBounds.height) return "bottom" /* BOTTOM */;
+    if (relativeX < 0) return "left" /* LEFT */;
+    return "right" /* RIGHT */;
+  }
+  const topBottomHeight = elementBounds.height * topBottomHeightRatio;
+  const middleAreaTop = topBottomHeight;
+  const middleAreaBottom = elementBounds.height - topBottomHeight;
+  const middleAreaHeight = middleAreaBottom - middleAreaTop;
+  if (relativeY <= topBottomHeight) {
+    if (relativeY <= edgeThreshold) {
+      return "top-edge" /* TOP_EDGE */;
+    }
+    return "top" /* TOP */;
+  } else if (relativeY >= middleAreaBottom) {
+    if (relativeY >= elementBounds.height - edgeThreshold) {
+      return "bottom-edge" /* BOTTOM_EDGE */;
+    }
+    return "bottom" /* BOTTOM */;
+  } else {
+    const middleAreaCenterX = elementBounds.width / 2;
+    if (relativeX <= middleAreaCenterX) {
+      if (relativeX <= edgeThreshold) {
+        return "left-edge" /* LEFT_EDGE */;
+      }
+      return "left" /* LEFT */;
+    } else {
+      if (relativeX >= elementBounds.width - edgeThreshold) {
+        return "right-edge" /* RIGHT_EDGE */;
+      }
+      return "right" /* RIGHT */;
+    }
+  }
+}, "getMousePositionOnElement");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ElementPosition,
+  getMousePositionOnElement
+});

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

@@ -0,0 +1,24 @@
+/**
+ * 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 { DndContextProps } from '@dnd-kit/core';
+import React, { FC } from 'react';
+import { FlowModel } from '../../models';
+import { PersistOptions } from '../../types';
+export * from './getMousePositionOnElement';
+export * from './moveBlock';
+export declare const EMPTY_COLUMN_UID = "EMPTY_COLUMN";
+export declare const DragHandler: FC<{
+    model: FlowModel;
+    children: React.ReactNode;
+}>;
+export declare const Droppable: FC<{
+    model: FlowModel<any>;
+    children: React.ReactNode;
+}>;
+export declare const DndProvider: FC<DndContextProps & PersistOptions>;