@rxflow/base 0.0.1-alpha.0

package/cjs/utils/measureText.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 计算文案宽度，根据内容自动计算节点宽度
+ * @param text
+ * @param fontStyle
+ */
+export declare function measureTextWidth(text: string, fontStyle?: string): number;
+/**
+ * 文本宽度是否超出了允许的最大宽度
+ * @param text
+ * @param maxWidth
+ * @param fontStyle
+ */
+export declare function isTextOverflow(text: string, maxWidth: number, fontStyle: string): boolean;
+/**
+ * 文本根据宽度计算溢出显示结果
+ * @param text
+ * @param maxWidth
+ * @param fontStyle
+ */
+export declare function truncateTextWithEllipsis(text: string, maxWidth: number, fontStyle: string): string;
+//# sourceMappingURL=measureText.d.ts.map

package/cjs/utils/measureText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"measureText.d.ts","sourceRoot":"","sources":["measureText.ts"],"names":[],"mappings":"AAYA;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,SAAsC,UAG7F;AAGD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,WAG/E;AAkBD;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,UAmBxF"}

package/cjs/utils/measureText.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isTextOverflow = isTextOverflow;
+exports.measureTextWidth = measureTextWidth;
+exports.truncateTextWithEllipsis = truncateTextWithEllipsis;
+/*
+ * @author: yanxianliang
+ * @date: 2025-05-16 23:49
+ * @desc: 检测文字宽度
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+
+// 离线canvas，支持在worker 中使用
+const canvas = new OffscreenCanvas(2000, 200);
+const context = canvas.getContext('2d');
+
+/**
+ * 计算文案宽度，根据内容自动计算节点宽度
+ * @param text
+ * @param fontStyle
+ */
+function measureTextWidth(text, fontStyle = '14px Arial, helvetica, sans-serif') {
+  context.font = fontStyle; // 设置字体样式
+  return context.measureText(text).width;
+}
+
+/**
+ * 文本宽度是否超出了允许的最大宽度
+ * @param text
+ * @param maxWidth
+ * @param fontStyle
+ */
+function isTextOverflow(text, maxWidth, fontStyle) {
+  const textWidth = measureTextWidth(text, fontStyle);
+  return textWidth > maxWidth;
+}
+const ellipsisCalcCache = new Map();
+const ellipsis = '...';
+function calcEllipsisWidth(fontStyle) {
+  if (ellipsisCalcCache.has(fontStyle)) {
+    return ellipsisCalcCache.get(fontStyle);
+  }
+  const width = measureTextWidth(ellipsis, fontStyle);
+  ellipsisCalcCache.set(fontStyle, width);
+  return width;
+}
+
+/**
+ * 文本根据宽度计算溢出显示结果
+ * @param text
+ * @param maxWidth
+ * @param fontStyle
+ */
+function truncateTextWithEllipsis(text, maxWidth, fontStyle) {
+  if (!isTextOverflow(text, maxWidth, fontStyle)) {
+    return text;
+  }
+  const ellipsisWidth = calcEllipsisWidth(fontStyle);
+  const contentMaxWidth = maxWidth - ellipsisWidth;
+  let low = 0,
+    high = text.length;
+  while (low <= high) {
+    const mid = Math.floor((low + high) / 2);
+    const currentText = text.substring(0, mid);
+    if (measureTextWidth(currentText) <= contentMaxWidth) {
+      low = mid + 1;
+    } else {
+      high = mid - 1;
+    }
+  }
+  return text.substring(0, high) + ellipsis;
+}

package/cjs/utils/parse.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @author: yanxianliang
+ * @date: 2025-10-09 13:00
+ * @modified：2025/10/9 13:00 by yanxianliang
+ * @desc: 数据转换
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+import { NodeHandle, NodeHandleBounds } from "@xyflow/system";
+export declare const parseHandles: (handles?: NodeHandle[] | NodeHandleBounds) => NodeHandle[] | undefined;
+//# sourceMappingURL=parse.d.ts.map

package/cjs/utils/parse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse.d.ts","sourceRoot":"","sources":["parse.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAC,UAAU,EAAE,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AAE5D,eAAO,MAAM,YAAY,aAAc,UAAU,EAAE,GAAG,gBAAgB,6BASrE,CAAA"}

package/cjs/utils/parse.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseHandles = void 0;
+/**
+ * @author: yanxianliang
+ * @date: 2025-10-09 13:00
+ * @modified：2025/10/9 13:00 by yanxianliang
+ * @desc: 数据转换
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+
+const parseHandles = handles => {
+  if (!handles) {
+    return undefined;
+  }
+  if (Array.isArray(handles)) {
+    return handles;
+  }
+  const {
+    source,
+    target
+  } = handles;
+  return [...(source || []), ...(target || [])];
+};
+exports.parseHandles = parseHandles;

package/cjs/utils/preCreateInnerNode.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @author: yanxianliang
+ * @date: 2025-07-08 13:41
+ * @desc: 预创建内部节点实例，创建之后首次渲染virtual才会生效
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+import { type Node, NodeOrigin, type InternalNode } from '@xyflow/react';
+import { NodeTypeComponent } from "..";
+export declare const preCreateInnerNode: <NodeType extends Node = Node>(node: NodeType, nodeTypes?: Record<string, NodeTypeComponent>, nodeOrigin?: NodeOrigin) => InternalNode<NodeType>;
+//# sourceMappingURL=preCreateInnerNode.d.ts.map

package/cjs/utils/preCreateInnerNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preCreateInnerNode.d.ts","sourceRoot":"","sources":["preCreateInnerNode.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAC,KAAK,IAAI,EAAE,UAAU,EAAE,KAAK,YAAY,EAAC,MAAM,eAAe,CAAC;AAEvE,OAAO,EAAC,iBAAiB,EAAC,WAAqB;AAE/C,eAAO,MAAM,kBAAkB,uCACvB,QAAQ,cACF,OAAO,MAAM,EAAE,iBAAiB,CAAC,eAChC,UAAU,2BAuBxB,CAAA"}

package/cjs/utils/preCreateInnerNode.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.preCreateInnerNode = void 0;
+var _system = require("@xyflow/system");
+/**
+ * @author: yanxianliang
+ * @date: 2025-07-08 13:41
+ * @desc: 预创建内部节点实例，创建之后首次渲染virtual才会生效
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+
+const preCreateInnerNode = (node, nodeTypes, nodeOrigin) => {
+  const {
+    id,
+    type,
+    measured,
+    position
+  } = node;
+  const definition = nodeTypes?.[type];
+  const handles = definition?.measureHandles?.(node);
+  return {
+    id,
+    type: node.type,
+    measured: measured,
+    ...measured,
+    position,
+    data: node.data,
+    selected: node.selected,
+    deletable: node.deletable,
+    sourcePosition: node.sourcePosition,
+    targetPosition: node.targetPosition,
+    dragHandle: node.dragHandle,
+    parentId: node.parentId,
+    internals: {
+      handleBounds: handles,
+      positionAbsolute: (0, _system.getNodePositionWithOrigin)(node, nodeOrigin)
+    }
+  };
+};
+exports.preCreateInnerNode = preCreateInnerNode;

package/cjs/utils/uuid.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @author: yanxianliang
+ * @date: 2025-07-23 15:24
+ * @modified：2025/7/23 15:24 by yanxianliang
+ * @desc: 生成唯一 id
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+export * from 'uuid';
+//# sourceMappingURL=uuid.d.ts.map

package/cjs/utils/uuid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uuid.d.ts","sourceRoot":"","sources":["uuid.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,cAAc,MAAM,CAAC"}

package/cjs/utils/uuid.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _uuid = require("uuid");
+Object.keys(_uuid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _uuid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _uuid[key];
+    }
+  });
+});

package/esm/Flow.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @author: yanxianliang
+ * @date: 2025-07-27 16:33
+ * @modified：2025/7/27 16:33 by yanxianliang
+ * @desc: Flow
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+import '@xyflow/react/dist/style.css';
+import { IBaseFlowProps } from "./types";
+import { Edge, Node } from "@xyflow/react";
+import "./index.less";
+export declare function Flow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(props: IBaseFlowProps<NodeType, EdgeType>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Flow.d.ts.map

package/esm/Flow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flow.d.ts","sourceRoot":"","sources":["Flow.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,8BAA8B,CAAC;AACtC,OAAO,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAQvC,OAAO,EAGL,IAAI,EAGJ,IAAI,EAOL,MAAM,eAAe,CAAC;AAavB,OAAO,cAAc,CAAC;AAMtB,wBAAgB,IAAI,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,KAAK,EAAE,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,2CAoPzH"}

package/esm/Flow.js

@@ -0,0 +1,251 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/**
+ * @author: yanxianliang
+ * @date: 2025-07-27 16:33
+ * @modified：2025/7/27 16:33 by yanxianliang
+ * @desc: Flow
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+import '@xyflow/react/dist/style.css';
+import { Legend } from "./components";
+import { MarkerDefinitions } from "./components";
+import { useForceUpdate } from "./hooks";
+import { useGetState } from "./hooks";
+import { useNodeTypes } from "./hooks";
+import { useTheme } from "./hooks";
+import { useThemeVars } from "./hooks";
+import { Background, BackgroundVariant, MiniMap, ReactFlow, SelectionMode, useReactFlow, useStoreApi } from "@xyflow/react";
+import { useMemoizedFn } from "ahooks";
+import { omit } from "lodash";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import Controls from "./components/Controls";
+import { DebugInfo } from "./components/DebugInfo";
+import { SmartEdge } from "./edges/SmartEdge";
+import { useGetEdgesChangeHandlers } from "./hooks/edges/useGetEdgesChangeHandlers";
+import { useSetNodeDragging } from "./hooks/node/useSetNodeDragging";
+import { useForceUpdateTimes } from "./hooks/render/useForceUpdateTimes";
+import { useListenRender } from "./hooks/useListenRender";
+import { Scrollbar } from "./plugins/scrollbar";
+import { hasDimensionsChange } from "./utils/hasDimensionsChange";
+import "./index.less";
+import { baseLayout } from "./utils/layouts/base";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var proOptions = {
+  hideAttribution: true
+}; // 默认隐藏水印
+
+export function Flow(props) {
+  var width = props.width,
+    height = props.height,
+    _props$showControls = props.showControls,
+    showControls = _props$showControls === void 0 ? true : _props$showControls,
+    _props$controlsPositi = props.controlsPosition,
+    controlsPosition = _props$controlsPositi === void 0 ? 'top-right' : _props$controlsPositi,
+    showMiniMap = props.showMiniMap,
+    showLegend = props.showLegend,
+    _props$background = props.background,
+    background = _props$background === void 0 ? '#F2F7FAFF' : _props$background,
+    showFullscreen = props.showFullscreen,
+    showForceLayout = props.showForceLayout,
+    showInteractive = props.showInteractive,
+    showFitView = props.showFitView,
+    showZoom = props.showZoom,
+    _props$onlyRenderVisi = props.onlyRenderVisibleElements,
+    onlyRenderVisibleElements = _props$onlyRenderVisi === void 0 ? true : _props$onlyRenderVisi,
+    _rootStyle = props.rootStyle,
+    fitViewOptions = props.fitViewOptions,
+    nodes = props.nodes,
+    edges = props.edges,
+    _props$layout = props.layout,
+    layout = _props$layout === void 0 ? baseLayout : _props$layout,
+    _props$autoCenter = props.autoCenter,
+    autoCenter = _props$autoCenter === void 0 ? false : _props$autoCenter,
+    _props$omitProps = props.omitProps,
+    omitProps = _props$omitProps === void 0 ? [] : _props$omitProps,
+    _props$forceLayout = props.forceLayout,
+    forceLayout = _props$forceLayout === void 0 ? !!props.layout : _props$forceLayout,
+    getMiniMapNodeColor = props.getMiniMapNodeColor,
+    markers = props.markers,
+    plugins = props.plugins,
+    readOnly = props.readOnly,
+    onZoomOut = props.onZoomOut,
+    onZoomIn = props.onZoomIn,
+    onFitView = props.onFitView,
+    onInteractiveChange = props.onInteractiveChange,
+    customControls = props.customControls,
+    _nodeTypes = props.nodeTypes,
+    onEdgesChange = props.onEdgesChange,
+    children = props.children,
+    forceFitView = props.forceFitView;
+  useListenRender(); // 性能监听 hook
+
+  var _useState = useState(!!(showMiniMap && !showControls)),
+    _useState2 = _slicedToArray(_useState, 2),
+    minimapVisible = _useState2[0],
+    setMinimapVisible = _useState2[1]; // 不显示控制器是默认按照字段控制 miniMap显示状态
+
+  var storeApi = useStoreApi();
+  var containerRef = useRef(null);
+  var theme = useTheme();
+  var themeVars = useThemeVars();
+  var nodeTypes = useNodeTypes(_nodeTypes); // 获取注册的节点类型
+  var forceUpdateTimes = useForceUpdateTimes();
+  var triggerLayout = useForceUpdate();
+  var setNodeDragging = useSetNodeDragging();
+  var instance = useReactFlow();
+  var getState = useGetState();
+  var rootStyle = useMemo(function () {
+    return _objectSpread(_objectSpread({
+      width: typeof width === 'number' ? "".concat(width, "px") : width,
+      height: typeof height === 'number' ? "".concat(height, "px") : height
+    }, _rootStyle), themeVars);
+  }, [width, height, _rootStyle, themeVars]);
+  var _useMemo = useMemo(function () {
+      var store = storeApi.getState();
+      return layout({
+        nodeTypes: nodeTypes,
+        originNodes: nodes || [],
+        originEdges: edges || [],
+        theme: theme,
+        onlyRenderVisibleElements: onlyRenderVisibleElements,
+        // 不支持修改该参数
+        store: store,
+        state: getState(),
+        flowProps: props
+      });
+    }, [nodes, edges, forceUpdateTimes]),
+    _nodes = _useMemo.nodes,
+    _edges = _useMemo.edges;
+  var flowProps = useMemo(function () {
+    var options = _objectSpread(_objectSpread({
+      selectNodesOnDrag: false,
+      preventScrolling: true,
+      panOnScroll: false,
+      zoomOnScroll: true,
+      nodesDraggable: false,
+      proOptions: proOptions,
+      fitViewOptions: _objectSpread({
+        nodes: _nodes !== null && _nodes !== void 0 && _nodes.length && autoCenter ? [_nodes[0]] : undefined
+      }, props.fitViewOptions),
+      fitView: true,
+      onlyRenderVisibleElements: onlyRenderVisibleElements
+    }, omit(props, ['flowInstanceRef', 'width', 'height', 'nodes', 'edges', 'fitViewOptions', 'theme', 'background', 'nodeTypes', 'showControls', 'showMiniMap', 'autoCenter', 'rootStyle', 'layout', 'onNodesChange', 'omitProps', 'forceLayout', 'controlsPosition', 'getMiniMapNodeColor', 'markers', 'onBeforeLayout', 'onLayout', 'onAfterLayout', 'plugins', 'readOnly', 'showFitView', 'showFullscreen', 'showInteractive', 'showZoom', 'showForceLayout', 'onInteractiveChange', 'onZoomOut', 'onZoomIn', 'onFitView', 'customControls'].concat(_toConsumableArray(omitProps)))), {}, {
+      edgeTypes: _objectSpread({
+        smart: SmartEdge
+      }, props.edgeTypes || {})
+    });
+    if (plugins !== null && plugins !== void 0 && plugins.scroller) {
+      var _options$panOnDrag, _options$selectionOnD, _options$selectionMod;
+      // 只读模式也需要
+      options.zoomOnScroll = false;
+      options.panOnScroll = true;
+      options.panOnDrag = (_options$panOnDrag = options.panOnDrag) !== null && _options$panOnDrag !== void 0 ? _options$panOnDrag : [1, 2];
+      options.selectionOnDrag = (_options$selectionOnD = options.selectionOnDrag) !== null && _options$selectionOnD !== void 0 ? _options$selectionOnD : true;
+      options.selectionMode = (_options$selectionMod = options.selectionMode) !== null && _options$selectionMod !== void 0 ? _options$selectionMod : SelectionMode.Partial;
+    }
+    if (readOnly) {
+      options.nodesDraggable = false;
+      options.nodesConnectable = false;
+      options.elementsSelectable = false;
+    }
+    return options;
+  }, [props, _nodes, readOnly, onlyRenderVisibleElements]);
+  var onNodesChange = useMemoizedFn(function (changes) {
+    var _props$onNodesChange;
+    if (forceLayout && hasDimensionsChange(changes)) {
+      // 强制布局
+      triggerLayout();
+    }
+    (_props$onNodesChange = props.onNodesChange) === null || _props$onNodesChange === void 0 || _props$onNodesChange.call(props, changes);
+  });
+  var onNodeDragStart = useMemoizedFn(function (event, node, nodes) {
+    var _flowProps$onNodeDrag;
+    setNodeDragging(true);
+    (_flowProps$onNodeDrag = flowProps.onNodeDragStart) === null || _flowProps$onNodeDrag === void 0 || _flowProps$onNodeDrag.call(flowProps, event, node, nodes);
+  });
+  var onNodeDragStop = useMemoizedFn(function (event, node, nodes) {
+    var _flowProps$onNodeDrag2;
+    setNodeDragging(false);
+    (_flowProps$onNodeDrag2 = flowProps.onNodeDragStop) === null || _flowProps$onNodeDrag2 === void 0 || _flowProps$onNodeDrag2.call(flowProps, event, node, nodes);
+  });
+  var getEdgesChangeHandlers = useGetEdgesChangeHandlers();
+  var _onEdgesChange = useMemoizedFn(function (changes) {
+    var _getEdgesChangeHandle;
+    onEdgesChange === null || onEdgesChange === void 0 || onEdgesChange(changes);
+    // 触发注册事件
+    (_getEdgesChangeHandle = getEdgesChangeHandlers()) === null || _getEdgesChangeHandle === void 0 || _getEdgesChangeHandle.forEach(function (onEdgesChange) {
+      onEdgesChange === null || onEdgesChange === void 0 || onEdgesChange(changes);
+    });
+  });
+  useEffect(function () {
+    if (forceFitView) {
+      instance.fitView(fitViewOptions);
+    }
+  }, [nodes]);
+  return /*#__PURE__*/_jsxs("div", {
+    ref: containerRef,
+    style: rootStyle,
+    children: [/*#__PURE__*/_jsx(DebugInfo, {
+      debug: props.debug
+    }), markers ? /*#__PURE__*/_jsx(MarkerDefinitions, {
+      marks: markers
+    }) : null, /*#__PURE__*/_jsxs(ReactFlow, _objectSpread(_objectSpread({
+      nodeTypes: nodeTypes
+    }, flowProps), {}, {
+      nodes: _nodes,
+      edges: _edges,
+      onNodesChange: onNodesChange,
+      onNodeDragStart: onNodeDragStart,
+      onNodeDragStop: onNodeDragStop,
+      onEdgesChange: _onEdgesChange,
+      children: [plugins !== null && plugins !== void 0 && plugins.scroller ? /*#__PURE__*/_jsx(Scrollbar, _objectSpread(_objectSpread({}, plugins.scroller), {}, {
+        width: width,
+        height: height
+      })) : null, /*#__PURE__*/_jsx(Background, {
+        bgColor: background,
+        className: 'rxflow-bg-hide-pattern',
+        variant: BackgroundVariant.Lines
+      }), minimapVisible && /*#__PURE__*/_jsx(MiniMap, {
+        zoomable: true,
+        pannable: true,
+        nodeColor: getMiniMapNodeColor
+      }), showControls && /*#__PURE__*/_jsx(Controls, {
+        showFullscreen: showFullscreen,
+        containerRef: containerRef,
+        fitViewOptions: fitViewOptions,
+        position: controlsPosition,
+        showInteractive: showInteractive,
+        showMiniMap: showMiniMap,
+        showFitView: showFitView,
+        showZoom: showZoom,
+        setMinimapVisible: setMinimapVisible,
+        minimapVisible: minimapVisible,
+        showForceLayout: showForceLayout,
+        onFitView: onFitView,
+        onZoomOut: onZoomOut,
+        onZoomIn: onZoomIn,
+        onInteractiveChange: onInteractiveChange,
+        children: customControls
+      }), showLegend && /*#__PURE__*/_jsx(Legend, {
+        showLegend: showLegend
+      }), children]
+    }))]
+  });
+}

package/esm/components/CollapseButton/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @author: yanxianliang
+ * @date: 2025-06-21 13:53
+ * @desc: 折叠按钮
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+import { CollapseButtonProps } from "../../types";
+import './index.less';
+export declare function CollapseButton(props: CollapseButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/esm/components/CollapseButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAQH,OAAO,EAAC,mBAAmB,EAAC,MAAM,aAAa,CAAC;AAChD,OAAO,cAAc,CAAC;AAItB,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CA4CxD"}

package/esm/components/CollapseButton/index.js

@@ -0,0 +1,59 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * @author: yanxianliang
+ * @date: 2025-06-21 13:53
+ * @desc: 折叠按钮
+ *
+ * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
+ */
+
+import LoadingOutlined from "@ant-design/icons/lib/icons/LoadingOutlined";
+import MinusOutlined from '@ant-design/icons/MinusOutlined';
+import PlusOutlined from '@ant-design/icons/PlusOutlined';
+import { useMemoizedFn } from "ahooks";
+import cc from 'classcat';
+import { useTheme } from "../../hooks";
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var stopClickEvent = function stopClickEvent(event) {
+  return event.stopPropagation();
+};
+export function CollapseButton(props) {
+  var _props$collapsed = props.collapsed,
+    collapsed = _props$collapsed === void 0 ? true : _props$collapsed,
+    _props$position = props.position,
+    position = _props$position === void 0 ? 'right' : _props$position,
+    count = props.count,
+    onCollapse = props.onCollapse,
+    loading = props.loading,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
+    _props$autoHideCountW = props.autoHideCountWhenExpanded,
+    _autoHideCountWhenExpanded = _props$autoHideCountW === void 0 ? false : _props$autoHideCountW;
+  var theme = useTheme();
+  var _theme$collapseButton = theme.collapseButtonShape,
+    collapseButtonShape = _theme$collapseButton === void 0 ? 'rect' : _theme$collapseButton,
+    _theme$autoHideCountW = theme.autoHideCountWhenExpanded,
+    autoHideCountWhenExpanded = _theme$autoHideCountW === void 0 ? false : _theme$autoHideCountW,
+    _theme$showCount = theme.showCount,
+    showCount = _theme$showCount === void 0 ? true : _theme$showCount;
+  var onClick = useMemoizedFn(function () {
+    onCollapse === null || onCollapse === void 0 || onCollapse(!collapsed);
+  });
+  return /*#__PURE__*/_jsxs("div", {
+    className: cc(['rxflow-collapse', "rxflow-collapse-".concat(position)]),
+    onClick: stopClickEvent,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: cc(["rxflow-collapse-icon", "rxflow-collapse-shape-".concat(collapseButtonShape), _defineProperty({}, 'rxflow-collapse-loading', loading)]),
+      onClick: loading ? undefined : onClick,
+      children: loading ? /*#__PURE__*/_jsx(LoadingOutlined, {}) : collapsed ? /*#__PURE__*/_jsx(PlusOutlined, {}) : /*#__PURE__*/_jsx(MinusOutlined, {})
+    }), (autoHideCountWhenExpanded || _autoHideCountWhenExpanded) && !collapsed || !showCount ? null : /*#__PURE__*/_jsx("div", {
+      className: cc(["rxflow-collapse-count", direction === 'vertical' ? 'rxflow-collapse-vertical' : null]),
+      children: count
+    })]
+  });
+}

package/esm/components/CollapseButton/index.less

@@ -0,0 +1,68 @@
+.rxflow{
+  &-collapse {
+    position: absolute;
+    display: flex;
+    top: 50%;
+    align-items: center;
+    transform: translate3d(0, -50%, 0);
+
+    &-right {
+      left: 100%;
+      flex-direction: row;
+      margin-left: 2px;
+    }
+
+    &-right &-vertical {
+      left: 3px;
+    }
+
+    &-left {
+      right: 100%;
+      flex-direction: row-reverse;
+      margin-right: 2px;
+    }
+
+    &-left &-vertical {
+      right: 3px;
+    }
+
+    &-icon {
+      display: flex;
+      width: 16px;
+      height: 16px;
+      border: 1px solid rgba(5, 5, 5, 0.06);
+      background-color: #fff;
+      font-size: 12px;
+      align-items: center;
+      justify-content: center;
+      color: #1677ff;
+      cursor: pointer;
+    }
+
+
+    &-shape-rect {
+      border-radius: 2px;
+    }
+
+    &-shape-circle {
+      border-radius: 8px;
+    }
+
+    &-loading {
+      cursor: not-allowed;
+    }
+
+
+    &-count {
+      font-size: 10px;
+      color: #333;
+      cursor: grab;
+      margin-left: 2px;
+    }
+
+    &-vertical {
+      position: absolute;
+      top: -18px;
+    }
+  }
+}