@rxflow/workflow 0.0.1-alpha.0

package/cjs/components/CodeEditor/index.js

@@ -0,0 +1,230 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CodeEditor = CodeEditor;
+var _FileTree = require("./FileTree");
+var _Python = require("./editors/Python");
+var _DebugPanel = _interopRequireDefault(require("./DebugPanel"));
+var _antd = require("antd");
+var _react = require("react");
+var _rcDialog = _interopRequireDefault(require("rc-dialog"));
+require("./style.less");
+var _Header = require("./Header");
+var _classcat = _interopRequireDefault(require("classcat"));
+var _Terminal = require("./Terminal");
+var _ahooks = require("ahooks");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * @author: yanxianliang
+ * @date: 2025-07-21 10:11
+ * @modified：2025/7/21 10:11 by yanxianliang
+ * @desc: 代码编辑器（全屏)
+ *
+ *  左右 Split 布局，使用三方组件实现
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+
+function CodeEditor({
+  onClose,
+  files,
+  activeFileKey,
+  value,
+  onChange,
+  onActiveFileChange,
+  libraries,
+  onExecute,
+  onSyncSchema,
+  defaultInputValue
+}) {
+  const [sizes, setSizes] = (0, _react.useState)({
+    left: 280,
+    // 左侧默认 260，
+    main: 0,
+    // 中间自动计算剩余部分
+    right: 600,
+    // 右侧默认 600
+    top: 0,
+    // 代码区域高度自动计算
+    bottom: 200 // 控制台默认 200
+  });
+  const rightSizeCache = (0, _react.useRef)(sizes.right);
+  const containerRef = (0, _react.useRef)(null);
+  const containerSizes = (0, _ahooks.useSize)(containerRef);
+  (0, _react.useEffect)(() => {
+    if (containerSizes) {
+      const {
+        width,
+        height
+      } = containerSizes;
+      setSizes(beforeSizes => {
+        const {
+          left,
+          right,
+          bottom
+        } = beforeSizes;
+        return {
+          left,
+          right,
+          main: width - left - right,
+          bottom,
+          top: height - bottom
+        };
+      });
+    }
+  }, [containerSizes]);
+  const [debug, setDebug] = (0, _react.useState)(true);
+  const terminalRef = (0, _react.useRef)(null);
+  const toggleDebug = (0, _ahooks.useMemoizedFn)(() => {
+    setDebug(debug => !debug);
+    const {
+      width
+    } = containerSizes;
+    setSizes(beforeSizes => {
+      const {
+        left
+      } = beforeSizes;
+      const right = debug ? 0 : rightSizeCache.current;
+      return {
+        ...beforeSizes,
+        right: right,
+        main: width - right - left
+      };
+    });
+  });
+  const onResize = (0, _ahooks.useMemoizedFn)(sizes => {
+    // 更新到 sizes中
+    rightSizeCache.current = sizes[2];
+    setSizes(beforeSizes => {
+      return {
+        ...beforeSizes,
+        left: sizes[0],
+        main: sizes[1],
+        right: sizes[2]
+      };
+    });
+  });
+  const onMainResize = (0, _ahooks.useMemoizedFn)(sizes => {
+    setSizes(beforeSizes => {
+      return {
+        ...beforeSizes,
+        top: sizes[0],
+        bottom: sizes[1]
+      };
+    });
+  });
+  const writeToTerminal = (0, _ahooks.useMemoizedFn)(data => {
+    terminalRef.current?.clear();
+    terminalRef.current?.writeIn(data);
+  });
+  const hasDebugAction = !!onExecute;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ConfigProvider, {
+    theme: {
+      algorithm: _antd.theme.darkAlgorithm,
+      components: {
+        Tree: {
+          indentSize: 12
+        }
+      }
+    },
+    prefixCls: 'rxflow',
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classcat.default)(['rxflow-editor-dark', 'rxflow-editor']),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.Header, {
+        debug: debug,
+        onClose: onClose,
+        onDebug: hasDebugAction ? toggleDebug : undefined
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: containerRef,
+        className: 'rxflow-editor-body',
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Splitter, {
+          className: 'rxflow-editor-content',
+          onResize: onResize,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Splitter.Panel, {
+            size: sizes.left,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: 'rxflow-editor-left',
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileTree.FileTree, {
+                libraries: libraries,
+                files: files,
+                value: activeFileKey,
+                onChange: onActiveFileChange
+              })
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Splitter.Panel, {
+            size: sizes.main,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Splitter, {
+              layout: "vertical",
+              onResize: onMainResize,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Splitter.Panel, {
+                size: sizes.top,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Python.PythonEditor, {
+                  value: value,
+                  onChange: onChange
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Splitter.Panel, {
+                size: sizes.bottom,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Terminal.Terminal, {
+                  xTermRef: terminalRef
+                })
+              })]
+            })
+          }), hasDebugAction ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Splitter.Panel, {
+            size: sizes.right,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DebugPanel.default, {
+              onSyncSchema: onSyncSchema,
+              onExecute: onExecute,
+              closeModal: onClose,
+              writeToTerminal: writeToTerminal,
+              defaultInputValue: defaultInputValue
+            })
+          }) : null]
+        })
+      })]
+    })
+  });
+}
+CodeEditor.Modal = function ({
+  onClose,
+  open,
+  files,
+  value,
+  onChange,
+  zIndex = 100,
+  activeFileKey,
+  onActiveFileChange,
+  libraries,
+  onExecute,
+  onSyncSchema,
+  defaultInputValue
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_rcDialog.default, {
+    classNames: {
+      mask: 'rxflow-editor-mask',
+      wrapper: 'rxflow-editor-dialog'
+    },
+    zIndex: zIndex,
+    closable: false,
+    footer: null,
+    visible: open,
+    title: null,
+    height: '100vh',
+    width: '100vw',
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CodeEditor, {
+      zIndex: zIndex,
+      libraries: libraries,
+      activeFileKey: activeFileKey,
+      onActiveFileChange: onActiveFileChange,
+      value: value,
+      onChange: onChange,
+      files: files,
+      onClose: onClose,
+      onExecute: onExecute,
+      onSyncSchema: onSyncSchema,
+      defaultInputValue: defaultInputValue
+    })
+  });
+};

package/cjs/components/CodeEditor/style.less

@@ -0,0 +1,49 @@
+.rxflow {
+  &-editor {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+
+    &-dark {
+      background-color: #2d2f32;
+
+      .cm-theme-dark .cm-editor {
+        background-color: #202124;
+      }
+    }
+
+    &-body {
+      flex: 1;
+      height: 0;
+      display: flex;
+      flex-direction: column;
+    }
+
+    &-content {
+      flex: 1;
+      height: 0;
+    }
+
+    &-left {
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      scrollbar-width: thin;
+      scrollbar-color: #4c4d4f transparent;
+    }
+
+    &-dialog{
+      position: fixed;
+      left: 0;
+      top: 0;
+    }
+
+    &-mask{
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      top: 0;
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+/**
+ * @author: yanxianliang
+ * @date: 2025-07-22 16:03
+ * @modified：2025/7/22 16:03 by yanxianliang
+ * @desc: 类型定义
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+
+type FileType = {
+  title: string;
+  key: string;
+  isLeaf?: boolean; // 是否是文件
+  children?: FileType[];
+}
+
+export type CodeEditorProps = {
+  onClose?: () => void;
+  open?: boolean;
+  files?: FileType[];
+  zIndex?: number;
+  value?: string;
+  onChange?: (code?: string)=>void;
+  activeFileKey?: string;
+  onActiveFileChange?:(key?: string)=>void;
+  libraries?: Library;
+  onExecute: (input: Record<string, any>) => Promise<{
+    result: any;
+    stdout?: string;
+    stderr?: string;
+  }>;
+  onSyncSchema?: (output?: Record<string, any>) => void; // 结果同步到配置中
+  defaultInputValue?: Record<string, any>;
+}
+
+
+export type Package = {
+  title: string;
+  version: string;
+  key: string;
+}
+
+export type Library = {
+  title: string;
+  children: Array<Package>
+}

package/cjs/components/Handle/NodePopover.d.ts

@@ -0,0 +1,15 @@
+import { WorkflowNode } from "../..";
+import { Edge } from "@xyflow/react";
+import '../Sider/index.less';
+/**
+ * 快速新增节点 Popover
+ * @param onNodeCreate
+ * @param isPreview
+ * @param nodeId
+ * @constructor
+ */
+export declare const NodePopover: <NodeType extends WorkflowNode = WorkflowNode, EdgeType extends Edge = Edge>({ onNodeCreate, nodeId, }: {
+    nodeId: string;
+    onNodeCreate: (type: string) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NodePopover.d.ts.map

package/cjs/components/Handle/NodePopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodePopover.d.ts","sourceRoot":"","sources":["NodePopover.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAiB,YAAY,EAAE,cAAyB;AAC/D,OAAO,EAAC,IAAI,EAAc,MAAM,eAAe,CAAC;AAMhD,OAAO,qBAAqB,CAAC;AAY7B;;;;;;GAMG;AACH,eAAO,MAAM,WAAW;YAKZ,MAAM;yBACO,MAAM,KAAK,IAAI;6CAkGvC,CAAC"}

package/cjs/components/Handle/NodePopover.js

@@ -0,0 +1,169 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NodePopover = void 0;
+var _SearchOutlined = _interopRequireDefault(require("@ant-design/icons/lib/icons/SearchOutlined"));
+var _base = require("@rxflow/base");
+var _react = require("@xyflow/react");
+var _antd = require("antd");
+var _groupBy = _interopRequireDefault(require("lodash/groupBy"));
+var _react2 = _interopRequireWildcard(require("react"));
+var _reactHighlightWords = _interopRequireDefault(require("react-highlight-words"));
+var _useWorkFlow = require("../../hooks/useWorkFlow");
+require("../Sider/index.less");
+var _dropTargetsCheck = require("../../utils/dropTargetsCheck");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/*
+ * @author: yanxianliang
+ * @date: 2025-04-22 10:30
+ * @desc: 节点快速创建
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+
+/**
+ * 不拦截，会触发 flow 的 PointerDown 事件，导致向 body 派发 mousedown事件，自动关闭浮层
+ * @param e
+ */const onPointerDown = e => {
+  e.stopPropagation();
+};
+
+/**
+ * 快速新增节点 Popover
+ * @param onNodeCreate
+ * @param isPreview
+ * @param nodeId
+ * @constructor
+ */
+const NodePopover = ({
+  onNodeCreate,
+  nodeId
+}) => {
+  const {
+    getNode
+  } = (0, _useWorkFlow.useWorkFlow)();
+  const {
+    nodeTypes: nodeTypeList = []
+  } = (0, _base.usePropsSelector)();
+  const [filter, setFilter] = (0, _react2.useState)('');
+  const nodeTypeMap = (0, _base.useNodeTypeMap)();
+  const {
+    getState
+  } = (0, _react.useStoreApi)();
+  /**
+   * 分组节点类型列表
+   */
+  const nodeCategoryList = (0, _react2.useMemo)(() => {
+    if (!nodeTypeList || !nodeTypeList.length) {
+      return [];
+    }
+
+    // 在循环体中不支持再创建循环节点
+    const handleNode = getNode(nodeId);
+
+    // 分组
+    const groups = (0, _groupBy.default)(nodeTypeList.filter(definition => {
+      if (definition.hideInSider || definition.label && definition.label.indexOf(filter) === -1) {
+        return false;
+      }
+      const {
+        nodeLookup
+      } = getState();
+      // 检测当前节点所处环境是否支持，例如父节点等等
+      const parentId = handleNode?.parentId;
+      if (!(0, _dropTargetsCheck.canAddInNode)(nodeLookup, parentId, [definition.type], nodeTypeMap)) {
+        return false;
+      }
+      return true;
+    }), node => node.group || '');
+    return Object.keys(groups).map(group => {
+      return {
+        group,
+        list: groups[group] || []
+      };
+    });
+  }, [nodeTypeList, filter]);
+  const onSearch = (0, _react2.useCallback)(e => {
+    setFilter(e.currentTarget.value);
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: 'handle-dropdown-content',
+    onPointerDown: onPointerDown,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: 'rxflow-sider-search',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Input, {
+        onChange: onSearch,
+        prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchOutlined.default, {
+          style: {
+            color: 'rgba(32, 41, 69, 0.62)'
+          }
+        }),
+        placeholder: '搜索节点'
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: 'rxflow-sider-scroll',
+      style: {
+        height: 400
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: 'rxflow-sider-content',
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space, {
+          size: 12,
+          direction: 'vertical',
+          style: {
+            width: '100%'
+          },
+          children: nodeCategoryList.map(categoryItem => {
+            const {
+              group,
+              list
+            } = categoryItem;
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              children: [group ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: 'rxflow-sider-group',
+                children: group
+              }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.List, {
+                grid: {
+                  gutter: 0,
+                  column: 2
+                },
+                dataSource: list,
+                renderItem: item => {
+                  const {
+                    icon,
+                    label
+                  } = item;
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.List.Item, {
+                    className: 'rxflow-sider-item',
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                      className: 'rxflow-sider-card',
+                      onClick: () => {
+                        onNodeCreate(item.type);
+                      },
+                      children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                        className: 'rxflow-sider-icon',
+                        children: icon
+                      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHighlightWords.default, {
+                          highlightClassName: 'rxflow-sider-highlight',
+                          textToHighlight: label || '',
+                          searchWords: [filter]
+                        })
+                      })]
+                    })
+                  }, item.type);
+                }
+              })]
+            }, group);
+          })
+        })
+      })
+    })]
+  });
+};
+exports.NodePopover = NodePopover;

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

@@ -0,0 +1,24 @@
+/**
+ * @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.
+ */
+import { WorkflowNode } from "../..";
+import { Edge } from '@xyflow/react';
+import type { HandleProps } from '@xyflow/system';
+import { HTMLAttributes } from 'react';
+import './index.less';
+/**
+ * 链接桩组件
+ * @param props
+ * @constructor
+ */
+export declare const Handle: <NodeType extends WorkflowNode = WorkflowNode, EdgeType extends Edge = Edge>(props: HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'> & {
+    readOnly?: boolean;
+    required?: boolean;
+    errorMessage?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAGL,YAAY,EACb,cAAyB;AAC1B,OAAO,EACL,IAAI,EAML,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAIhD,OAAO,EAAC,cAAc,EAAW,MAAM,OAAO,CAAC;AAC/C,OAAO,cAAc,CAAC;AAMtB;;;;GAIG;AACH,eAAO,MAAM,MAAM,sFACV,WAAW,GAChB,KAAK,eAAe,cAAc,CAAC,EAAE,IAAI,CAAC,GAAG;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,4CAiIF,CAAC"}