@rxflow/workflow 0.0.1-alpha.0

package/cjs/components/Handle/index.js

@@ -0,0 +1,165 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Handle = void 0;
+var _PlusOutlined = _interopRequireDefault(require("@ant-design/icons/PlusOutlined"));
+var _ = require("../..");
+var _react = require("@xyflow/react");
+var _ahooks = require("ahooks");
+var _base = require("@rxflow/base");
+var _classcat = _interopRequireDefault(require("classcat"));
+var _react2 = require("react");
+require("./index.less");
+var _useWorkFlow = require("../../hooks/useWorkFlow");
+var _events = require("../../utils/events");
+var _NodePopover = require("./NodePopover");
+var _ExclamationOutlined = _interopRequireDefault(require("@ant-design/icons/lib/icons/ExclamationOutlined"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * @author: yanxianliang
+ * @date: 2025-09-06 09:52
+ * @modified：2025/9/6 09:52 by yanxianliang
+ * @desc: Handle 自定义
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+
+/**
+ * 链接桩组件
+ * @param props
+ * @constructor
+ */
+const Handle = props => {
+  const nodeId = (0, _react.useNodeId)();
+  const {
+    quickAdd,
+    onNodeTypeDrop
+  } = (0, _base.usePropsSelector)(props => ({
+    quickAdd: !!props.quickAdd,
+    onNodeTypeDrop: props.onNodeTypeDrop
+  }));
+  const {
+    position,
+    style,
+    id,
+    type,
+    readOnly: isReadonly = !onNodeTypeDrop,
+    required = true,
+    errorMessage = '端口未连接'
+  } = props;
+  const connections = (0, _react.useNodeConnections)({
+    handleType: type,
+    id: nodeId || undefined,
+    handleId: id || undefined
+  });
+  const {
+    getNode,
+    connect
+  } = (0, _useWorkFlow.useWorkFlow)();
+  const {
+    getState
+  } = (0, _react.useStoreApi)();
+  const [open, setOpen] = (0, _react2.useState)(false);
+  const nodeTypeMap = (0, _base.useNodeTypeMap)();
+  /**
+   * 创建节点实例
+   */
+  const onNodeCreate = (0, _ahooks.useMemoizedFn)(async type => {
+    setOpen(false);
+    if (!onNodeTypeDrop) {
+      return;
+    }
+    const {
+      nodeLookup
+    } = getState();
+    const node = getNode(nodeId);
+    const parentFlow = (0, _.getParentFlow)(nodeLookup, nodeTypeMap, node?.parentId);
+    const positionInFlow = {
+      x: position === _react.Position.Left ? (node?.position?.x || 0) - ((0, _base.getNodeWidth)(node) + 50) : (node?.position?.x || 0) + ((0, _base.getNodeWidth)(node) + 50),
+      y: node?.position?.y || 0
+    };
+    try {
+      const node = await onNodeTypeDrop(parentFlow, positionInFlow, type);
+      if (node) {
+        const {
+          id: copyNodeId,
+          connectSourceHandle: sourceHandle,
+          connectTargetHandle: targetHandle
+        } = node;
+        const autoLinkEdge = position === _react.Position.Left ? {
+          source: copyNodeId,
+          target: nodeId,
+          sourceHandle: sourceHandle,
+          targetHandle: targetHandle // inputHandle 通过 create 返回，默认输出 sourceHandle 通过接口返回
+        } : {
+          source: nodeId,
+          target: copyNodeId,
+          sourceHandle: id,
+          targetHandle: targetHandle
+        };
+        connect(autoLinkEdge); // 自动连接
+      }
+    } catch (e) {
+      // reject 忽略
+    }
+  });
+  const connected = connections.length > 0;
+  const isError = !isReadonly && required && !connected; // 只读模式下不执行端口检测
+
+  const handle = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Handle, {
+    ...props,
+    className: (0, _classcat.default)(['rxflow-handle', props.className, {
+      'rxflow-handle-error': isError,
+      'rxflow-handle-linked': connected
+    }]),
+    style: {
+      [position === _react.Position.Left ? 'left' : 'right']: 0,
+      ...style
+    },
+    onClick: _events.stopPropagation,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: 'rxflow-handle-circle'
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: 'rxflow-handle-bg',
+      children: isError ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExclamationOutlined.default, {
+        className: 'rxflow-handle-icon'
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlusOutlined.default, {
+        className: 'rxflow-handle-icon'
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.Tooltip, {
+      color: 'red',
+      title: isError ? errorMessage : null,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: 'rxflow-handle-anchor'
+      })
+    })]
+  });
+  if (!quickAdd || isReadonly) {
+    return handle;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.Popover, {
+    arrow: false,
+    destroyOnHidden: true,
+    placement: position === _react.Position.Left ? 'leftTop' : 'rightTop',
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NodePopover.NodePopover, {
+      nodeId: nodeId,
+      onNodeCreate: onNodeCreate
+    }),
+    trigger: 'click',
+    open: open,
+    onOpenChange: setOpen,
+    styles: {
+      root: {
+        paddingLeft: 0
+      }
+    },
+    classNames: {
+      root: 'rxflow-handle-dropdown'
+    },
+    children: handle
+  });
+};
+exports.Handle = Handle;

package/cjs/components/Handle/index.less

@@ -0,0 +1,111 @@
+.rxflow-handle {
+  &.react-flow__handle {
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    border: none;
+    background-color: transparent;
+  }
+
+  &-circle {
+    background-color: #fff;
+    position: absolute;
+    transform: scale(.5);
+    width: 18px;
+    height: 18px;
+    align-items: center;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    transition: all .2s linear 0s;
+  }
+
+  &-bg{
+    align-items: center;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    transition: all .2s linear 0s;
+    background: #9197f1;
+    height: 100%;
+    position: relative;
+    transform: scale(.4);
+    width: 100%;
+  }
+
+  &-linked &-bg {
+    background: #4d53e8;
+  }
+
+  &-anchor {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+  }
+
+  &-dropdown {
+    .rxflow-popover-inner-content {
+      padding: 0;
+    }
+
+    &-content {
+      width: 360px;
+      padding: 12px 16px;
+    }
+  }
+
+
+  &.react-flow__handle {
+    background-color: transparent;
+    border: none;
+  }
+
+  .rxflow-handle-icon {
+    z-index: 2;
+    color: #fff;
+    font-size: 6px;
+    transition: all .2s linear 0s;
+    pointer-events: none;
+    opacity: 0;
+  }
+
+
+  &.rxflow-handle-error > &-bg {
+    background: red!important;
+  }
+
+  .react-flow__node:hover &-circle {
+    transform: scale(1);
+  }
+
+  .react-flow__node:hover &-bg {
+    background: #4d53e8;
+    transform: scale(.7);
+  }
+
+  .react-flow__node:hover &:hover > &-circle {
+    transform: scale(0.5); // 还原
+  }
+
+  .react-flow__node:hover &:hover > &-bg {
+    background: #4d53e8;
+    border: none;
+    cursor: crosshair;
+    transform: scale(1);
+
+    .rxflow-handle-icon {
+      opacity: 1;
+      font-size: 12px;
+    }
+  }
+
+  &-dropdown {
+    width: 360px;
+  }
+}

package/cjs/components/InlineCodeEditor/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @author: yanxianliang
+ * @date: 2025-07-21 10:10
+ * @modified：2025/7/21 10:10 by yanxianliang
+ * @desc: 代码编辑器（行内模式)
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+import { InlineCodeEditorProps } from "./types";
+export declare const InlineCodeEditor: ({ height, value, onChange, readOnly }: InlineCodeEditorProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/cjs/components/InlineCodeEditor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAC,qBAAqB,EAAC,MAAM,SAAS,CAAC;AAG9C,eAAO,MAAM,gBAAgB,0CAMxB,qBAAqB,4CAIzB,CAAA"}

package/cjs/components/InlineCodeEditor/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineCodeEditor = void 0;
+var _Python = require("../CodeEditor/editors/Python");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * @author: yanxianliang
+ * @date: 2025-07-21 10:10
+ * @modified：2025/7/21 10:10 by yanxianliang
+ * @desc: 代码编辑器（行内模式)
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+
+const InlineCodeEditor = ({
+  height = 400,
+  value,
+  onChange,
+  readOnly
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Python.PythonEditor, {
+    value: value,
+    height: height,
+    readOnly: readOnly,
+    onChange: onChange
+  });
+};
+exports.InlineCodeEditor = InlineCodeEditor;

package/cjs/components/InlineCodeEditor/types.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @author: yanxianliang
+ * @date: 2025-07-21 10:26
+ * @modified：2025/7/21 10:26 by yanxianliang
+ * @desc: 类型定义
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+
+export type InlineCodeEditorProps = {
+  /**
+   * @description: 编辑区域高度
+   * @default: 400
+   */
+  height?: number;
+
+  value?: string;
+
+  readOnly?: boolean;
+
+  onChange?: (code?: string) => void;
+}

package/cjs/components/Layout/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @author: yanxianliang
+ * @date: 2025-07-27 12:11
+ * @modified：2025/7/27 12:11 by yanxianliang
+ * @desc: 布局组件
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+import { type IBaseFlowProps } from "@rxflow/base";
+import { WorkflowExtendProps, WorkflowNode } from "../..";
+import './index.less';
+import { Edge } from "@xyflow/react";
+export declare const WorkFlowLayout: <NodeType extends WorkflowNode = WorkflowNode, EdgeType extends Edge = Edge>(props: IBaseFlowProps<NodeType, EdgeType> & WorkflowExtendProps<NodeType>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/cjs/components/Layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAO,KAAK,cAAc,EAAC,MAAM,cAAc,CAAC;AACvD,OAAO,EAAC,mBAAmB,EAAE,YAAY,EAAC,cAAyB;AACnE,OAAO,cAAc,CAAC;AACtB,OAAO,EAAC,IAAI,EAAC,MAAM,eAAe,CAAC;AAInC,eAAO,MAAM,cAAc,sFAGlB,eAAe,QAAQ,EAAE,QAAQ,CAAC,GAAG,oBAAoB,QAAQ,CAAC,4CAkB1E,CAAA"}

package/cjs/components/Layout/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WorkFlowLayout = void 0;
+var _base = require("@rxflow/base");
+require("./index.less");
+var _CanvasLoading = _interopRequireDefault(require("../CanvasLoading"));
+var _Sider = require("../Sider");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * @author: yanxianliang
+ * @date: 2025-07-27 12:11
+ * @modified：2025/7/27 12:11 by yanxianliang
+ * @desc: 布局组件
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+
+const WorkFlowLayout = props => {
+  const {
+    readOnly,
+    sider,
+    loading,
+    children
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: 'rxflow-workflow',
+    style: {
+      height: props.height
+    },
+    children: [readOnly ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Sider.Sider, {
+      ...sider,
+      nodeTypes: props.nodeTypes
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: 'rxflow-graph',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CanvasLoading.default, {
+        loading: loading,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.Flow, {
+          ...props,
+          children: children
+        })
+      })
+    })]
+  });
+};
+exports.WorkFlowLayout = WorkFlowLayout;

package/cjs/components/Layout/index.less

@@ -0,0 +1,14 @@
+.rxflow {
+  &-workflow{
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    height: 100%;
+  }
+
+  &-graph {
+    flex: 1;
+    width: 0;
+    position: relative;
+  }
+}

package/cjs/components/LoadingButton.d.ts

@@ -0,0 +1,16 @@
+import { ButtonProps } from 'antd';
+/**
+ * LoadingButton 组件
+ * - 支持 loading 状态受控/非受控
+ * - 支持点击防抖（防止重复点击）
+ * - 支持异步 onClick
+ *
+ * @param props
+ *   onClick: 点击事件，支持返回 Promise
+ *   throttle: 防抖间隔，默认 300ms
+ */
+export declare const LoadingButton: (props: Omit<ButtonProps, "onClick"> & {
+    onClick?: ((e: React.MouseEvent<HTMLButtonElement>) => Promise<void> | void) | undefined;
+    throttle?: number | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LoadingButton.d.ts.map

package/cjs/components/LoadingButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingButton.d.ts","sourceRoot":"","sources":["LoadingButton.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAU,WAAW,EAAE,MAAM,MAAM,CAAC;AAG3C;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa;mBAER,gBAAgB,CAAC,iBAAiB,CAAC,KAAK,QAAQ,IAAI,CAAC,GAAG,IAAI;;6CAuD7E,CAAC"}

package/cjs/components/LoadingButton.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoadingButton = void 0;
+var _ahooks = require("ahooks");
+var _antd = require("antd");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+/*
+ * @author: yanxianliang
+ * @date: 2025-05-23 15:19
+ * @desc: Loading Button
+ *
+ * 支持业务防抖
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+
+/**
+ * LoadingButton 组件
+ * - 支持 loading 状态受控/非受控
+ * - 支持点击防抖（防止重复点击）
+ * - 支持异步 onClick
+ *
+ * @param props
+ *   onClick: 点击事件，支持返回 Promise
+ *   throttle: 防抖间隔，默认 300ms
+ */
+const LoadingButton = props => {
+  const lockRef = (0, _react.useRef)(false); // 点击锁，loading 无法解决鼠标连击问题
+  const throttle = props.throttle ?? 300;
+
+  /**
+   * loading 状态受控/非受控
+   */
+  const [loading, setLoading] = (0, _ahooks.useControllableValue)(props, {
+    valuePropName: 'loading',
+    trigger: 'onLoadingChange'
+  });
+
+  /**
+   * 包装点击事件，支持防抖和 loading
+   */
+  const onButtonClick = (0, _ahooks.useMemoizedFn)(e => {
+    if (lockRef.current) {
+      return; // 防抖拦截
+    }
+    lockRef.current = true;
+    const result = props.onClick?.(e);
+    if (result && result instanceof Promise) {
+      (async () => {
+        setLoading(true);
+        try {
+          await result;
+          // eslint-disable-next-line @typescript-eslint/no-shadow
+        } catch (e) {
+          /* empty */
+        } finally {
+          setLoading(false);
+          setTimeout(() => {
+            lockRef.current = false;
+          }, throttle);
+        }
+      })();
+    } else {
+      setTimeout(() => {
+        /**
+         * 纯前端交互的，进行前端防抖
+         */
+        lockRef.current = false;
+      }, throttle);
+    }
+  });
+
+  /**
+   * 渲染按钮
+   */
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
+    ...props,
+    loading: loading,
+    onClick: onButtonClick
+  });
+};
+exports.LoadingButton = LoadingButton;

package/cjs/components/Sider/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @author: yanxianliang
+ * @date: 2025-07-27 11:34
+ * @modified：2025/7/27 11:34 by yanxianliang
+ * @desc: 节点列表
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+import './index.less';
+import { WorkflowNode, WorkFlowNodeDefinition } from "../..";
+export declare const Sider: <NodeType extends WorkflowNode = WorkflowNode>({ loading, nodeTypes, }: {
+    loading?: boolean | undefined;
+    nodeTypes?: WorkFlowNodeDefinition<NodeType["data"]>[] | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/cjs/components/Sider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,cAAc,CAAC;AAGtB,OAAO,EAAC,YAAY,EAAE,sBAAsB,EAAC,cAAyB;AAQtE,eAAO,MAAM,KAAK;;;6CAqGjB,CAAA"}