@rxflow/base 0.0.4-alpha.3 → 0.0.4-alpha.5

package/cjs/Flow.d.ts.map

@@ -1 +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;AA2HtB,wBAAgB,IAAI,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,KAAK,EAAE,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,2CA0NzH"}
+{"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;AAYvB,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,2CAwZzH"}

package/cjs/Flow.js

@@ -9,8 +9,7 @@ var _components = require("./components");
 var _hooks = require("./hooks");
 var _react = require("@xyflow/react");
 var _ahooks = require("ahooks");
-var _lodash = require("lodash");
-var _react2 = _interopRequireWildcard(require("react"));
+var _react2 = require("react");
 var _Controls = _interopRequireDefault(require("./components/Controls"));
 var _DebugInfo = require("./components/DebugInfo");
 var _manhattan = require("./edges/manhattan");
@@ -24,8 +23,6 @@ require("./index.less");
 var _base = require("./utils/layouts/base");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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; }
 /**
  * @author: yanxianliang
  * @date: 2025-07-27 16:33
@@ -35,20 +32,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
  */
 
-/**
- * ReactFlow 原生支持的属性列表
- * 这些属性会透传给 ReactFlow
- */const REACT_FLOW_PROPS = [
-// 核心数据
-'defaultNodes', 'defaultEdges', 'defaultEdgeOptions',
-// 视图控制
-'fitView', 'fitViewOptions', 'minZoom', 'maxZoom', 'defaultViewport', 'snapToGrid', 'snapGrid', 'onlyRenderVisibleElements',
-// 交互控制
-'nodesDraggable', 'nodesConnectable', 'nodesFocusable', 'edgesFocusable', 'elementsSelectable', 'selectNodesOnDrag', 'panOnDrag', 'panOnScroll', 'panOnScrollSpeed', 'panOnScrollMode', 'zoomOnScroll', 'zoomOnPinch', 'zoomOnDoubleClick', 'preventScrolling', 'connectionMode', 'connectionLineType', 'connectionLineStyle', 'connectionLineComponent', 'connectionLineContainerStyle', 'connectionRadius', 'isValidConnection', 'nodeDragThreshold', 'autoPanOnConnect', 'autoPanOnNodeDrag', 'autoPanSpeed', 'selectionOnDrag', 'selectionMode', 'selectionKeyCode', 'multiSelectionKeyCode', 'zoomActivationKeyCode', 'panActivationKeyCode', 'deleteKeyCode', 'nodeExtent', 'translateExtent', 'elevateNodesOnSelect', 'elevateEdgesOnSelect', 'disableKeyboardA11y', 'noDragClassName', 'noWheelClassName', 'noPanClassName',
-// 事件回调
-'onNodeClick', 'onNodeDoubleClick', 'onNodeMouseEnter', 'onNodeMouseMove', 'onNodeMouseLeave', 'onNodeContextMenu', 'onNodeDragStart', 'onNodeDrag', 'onNodeDragStop', 'onNodesDelete', 'onEdgeClick', 'onEdgeDoubleClick', 'onEdgeMouseEnter', 'onEdgeMouseMove', 'onEdgeMouseLeave', 'onEdgeContextMenu', 'onEdgeUpdate', 'onEdgeUpdateStart', 'onEdgeUpdateEnd', 'onEdgesDelete', 'onConnect', 'onConnectStart', 'onConnectEnd', 'onClickConnectStart', 'onClickConnectEnd', 'onDrop', 'onMove', 'onMoveStart', 'onMoveEnd', 'onSelectionChange', 'onSelectionDragStart', 'onSelectionDrag', 'onSelectionDragStop', 'onSelectionContextMenu', 'onSelectionStart', 'onSelectionEnd', 'onPaneClick', 'onPaneContextMenu', 'onPaneScroll', 'onPaneMouseEnter', 'onPaneMouseMove', 'onPaneMouseLeave', 'onInit', 'onError', 'onDelete', 'onBeforeDelete',
-// 样式
-'style', 'className', 'id', 'colorMode'];
 const proOptions = {
   hideAttribution: true
 }; // 默认隐藏水印
@@ -70,12 +53,7 @@ function Flow(props) {
     showInteractive,
     showFitView,
     showZoom,
-    onlyRenderVisibleElements = true,
-    // 默认开启虚拟渲染
     rootStyle: _rootStyle,
-    fitViewOptions,
-    nodes,
-    edges,
     layout = _base.baseLayout,
     autoCenter = false,
     forceLayout = !!props.layout,
@@ -90,11 +68,78 @@ function Flow(props) {
     onInteractiveChange,
     customControls,
     nodeTypes: _nodeTypes,
-    onEdgesChange,
+    edgeTypes: userEdgeTypes,
+    nodes,
+    edges,
+    onNodesChange: userOnNodesChange,
+    onEdgesChange: userOnEdgesChange,
     children,
-    forceFitView
+    forceFitView,
+    // 常用 ReactFlow 属性（外层定义）
+    fitView: userFitView = true,
+    fitViewOptions: userFitViewOptions,
+    minZoom: userMinZoom,
+    maxZoom: userMaxZoom,
+    defaultViewport: userDefaultViewport,
+    onInit: userOnInit,
+    onNodeClick: userOnNodeClick,
+    onNodeDoubleClick: userOnNodeDoubleClick,
+    onNodeContextMenu: userOnNodeContextMenu,
+    onNodeMouseEnter: userOnNodeMouseEnter,
+    onNodeMouseLeave: userOnNodeMouseLeave,
+    onNodeMouseMove: userOnNodeMouseMove,
+    onEdgeClick: userOnEdgeClick,
+    onEdgeDoubleClick: userOnEdgeDoubleClick,
+    onEdgeContextMenu: userOnEdgeContextMenu,
+    onEdgeMouseEnter: userOnEdgeMouseEnter,
+    onEdgeMouseLeave: userOnEdgeMouseLeave,
+    onEdgeMouseMove: userOnEdgeMouseMove,
+    onPaneClick: userOnPaneClick,
+    onPaneContextMenu: userOnPaneContextMenu,
+    onPaneScroll: userOnPaneScroll,
+    onPaneMouseEnter: userOnPaneMouseEnter,
+    onPaneMouseLeave: userOnPaneMouseLeave,
+    onPaneMouseMove: userOnPaneMouseMove,
+    onSelectionChange: userOnSelectionChange,
+    onSelectionContextMenu: userOnSelectionContextMenu,
+    // 画布鼠标事件（外层定义）
+    onMouseEnter: userOnMouseEnter,
+    onMouseLeave: userOnMouseLeave,
+    onMouseMove: userOnMouseMove,
+    onMouseDown: userOnMouseDown,
+    onMouseUp: userOnMouseUp,
+    // 移动和缩放事件（外层定义）
+    onMove: userOnMove,
+    onMoveStart: userOnMoveStart,
+    onMoveEnd: userOnMoveEnd,
+    // 节点交互相关（外层定义）
+    nodesDraggable: userNodesDraggable,
+    nodesConnectable: userNodesConnectable,
+    elementsSelectable: userElementsSelectable,
+    selectNodesOnDrag: userSelectNodesOnDrag,
+    nodeOrigin: userNodeOrigin,
+    // 画布交互相关（外层定义）
+    panOnDrag: userPanOnDrag,
+    panOnScroll: userPanOnScroll,
+    zoomOnScroll: userZoomOnScroll,
+    selectionOnDrag: userSelectionOnDrag,
+    selectionMode: userSelectionMode,
+    deleteKeyCode: userDeleteKeyCode,
+    // 连接相关（外层定义）
+    isValidConnection: userIsValidConnection,
+    onConnect: userOnConnect,
+    onBeforeDelete: userOnBeforeDelete,
+    // 拖拽相关事件（外层定义）
+    onDrop: userOnDrop,
+    onDragOver: userOnDragOver,
+    onNodeDrag: userOnNodeDrag,
+    onNodeDragStart: userOnNodeDragStart,
+    onNodeDragStop: userOnNodeDragStop,
+    // 性能相关配置（外层定义）
+    onlyRenderVisibleElements = true,
+    // 扩展属性
+    flowProps: userFlowProps = {}
   } = props;
-  console.log('render', '------');
   (0, _useListenRender.useListenRender)(); // 性能监听 hook
 
   const [minimapVisible, setMinimapVisible] = (0, _react2.useState)(!!(showMiniMap && !showControls)); // 不显示控制器是默认按照字段控制 miniMap显示状态
@@ -128,7 +173,6 @@ function Flow(props) {
       originEdges: edges || [],
       theme,
       onlyRenderVisibleElements,
-      // 不支持修改该参数
       store,
       state: getState(),
       flowProps: props
@@ -137,29 +181,85 @@ function Flow(props) {
   const edgeTypes = (0, _react2.useMemo)(() => {
     return {
       manhattan: _manhattan.ManhattanEdge,
-      ...(props.edgeTypes || {})
+      ...(userEdgeTypes || {})
     };
-  }, [props.edgeTypes]);
-  const flowProps = (0, _react2.useMemo)(() => {
-    // 使用 pick 选择需要透传的属性，而不是 omit 排除
-    const passthroughProps = (0, _lodash.pick)(props, REACT_FLOW_PROPS);
+  }, [userEdgeTypes]);
+  const reactFlowProps = (0, _react2.useMemo)(() => {
+    // 构建传递给 ReactFlow 的属性
     const options = {
       // 默认配置
-      selectNodesOnDrag: false,
       preventScrolling: true,
-      panOnScroll: false,
-      zoomOnScroll: true,
-      nodesDraggable: false,
       proOptions: proOptions,
+      // 透传用户传入的 ReactFlow 扩展属性（flowProps，优先级最低）
+      ...userFlowProps,
+      // 外层定义的属性（优先级高于 flowProps）
+      // 视图和缩放相关
+      fitView: userFitView ?? true,
+      minZoom: userMinZoom,
+      maxZoom: userMaxZoom,
+      defaultViewport: userDefaultViewport,
+      onlyRenderVisibleElements,
+      // 节点交互相关
+      nodesDraggable: userNodesDraggable ?? false,
+      nodesConnectable: userNodesConnectable,
+      elementsSelectable: userElementsSelectable,
+      selectNodesOnDrag: userSelectNodesOnDrag ?? false,
+      nodeOrigin: userNodeOrigin,
+      // 画布交互相关
+      panOnDrag: userPanOnDrag,
+      panOnScroll: userPanOnScroll ?? false,
+      zoomOnScroll: userZoomOnScroll ?? true,
+      selectionOnDrag: userSelectionOnDrag,
+      selectionMode: userSelectionMode,
+      deleteKeyCode: userDeleteKeyCode,
+      // 连接相关
+      isValidConnection: userIsValidConnection,
+      onConnect: userOnConnect,
+      onBeforeDelete: userOnBeforeDelete,
+      // 事件回调
+      onInit: userOnInit,
+      onNodeClick: userOnNodeClick,
+      onNodeDoubleClick: userOnNodeDoubleClick,
+      onNodeContextMenu: userOnNodeContextMenu,
+      onNodeMouseEnter: userOnNodeMouseEnter,
+      onNodeMouseLeave: userOnNodeMouseLeave,
+      onNodeMouseMove: userOnNodeMouseMove,
+      onEdgeClick: userOnEdgeClick,
+      onEdgeDoubleClick: userOnEdgeDoubleClick,
+      onEdgeContextMenu: userOnEdgeContextMenu,
+      onEdgeMouseEnter: userOnEdgeMouseEnter,
+      onEdgeMouseLeave: userOnEdgeMouseLeave,
+      onEdgeMouseMove: userOnEdgeMouseMove,
+      onPaneClick: userOnPaneClick,
+      onPaneContextMenu: userOnPaneContextMenu,
+      onPaneScroll: userOnPaneScroll,
+      onPaneMouseEnter: userOnPaneMouseEnter,
+      onPaneMouseLeave: userOnPaneMouseLeave,
+      onPaneMouseMove: userOnPaneMouseMove,
+      onSelectionChange: userOnSelectionChange,
+      onSelectionContextMenu: userOnSelectionContextMenu,
+      // 画布鼠标事件
+      onMouseEnter: userOnMouseEnter,
+      onMouseLeave: userOnMouseLeave,
+      onMouseMove: userOnMouseMove,
+      onMouseDown: userOnMouseDown,
+      onMouseUp: userOnMouseUp,
+      // 移动和缩放事件
+      onMove: userOnMove,
+      onMoveStart: userOnMoveStart,
+      onMoveEnd: userOnMoveEnd,
+      // 拖拽相关事件
+      onDrop: userOnDrop,
+      onDragOver: userOnDragOver,
+      onNodeDrag: userOnNodeDrag,
+      // fitViewOptions 需要特殊合并处理
       fitViewOptions: {
         nodes: _nodes?.length && autoCenter ? [_nodes[0]] : undefined,
-        ...props.fitViewOptions
-      },
-      fitView: true,
-      onlyRenderVisibleElements,
-      // 透传 ReactFlow 原生属性
-      ...passthroughProps
+        ...userFitViewOptions
+      }
     };
+
+    // scroller 插件特殊处理
     if (plugins?.scroller) {
       options.zoomOnScroll = false;
       options.panOnScroll = true;
@@ -167,39 +267,57 @@ function Flow(props) {
       options.selectionOnDrag = options.selectionOnDrag ?? true;
       options.selectionMode = options.selectionMode ?? _react.SelectionMode.Partial;
     }
+
+    // 只读模式特殊处理
     if (readOnly) {
       options.nodesDraggable = false;
       options.nodesConnectable = false;
       options.elementsSelectable = false;
     }
     return options;
-  }, [props, _nodes, readOnly, onlyRenderVisibleElements, autoCenter, plugins?.scroller]);
+  }, [userFlowProps, _nodes, readOnly, onlyRenderVisibleElements, autoCenter, plugins?.scroller,
+  // 视图和缩放相关
+  userFitView, userFitViewOptions, userMinZoom, userMaxZoom, userDefaultViewport,
+  // 节点交互相关
+  userNodesDraggable, userNodesConnectable, userElementsSelectable, userSelectNodesOnDrag, userNodeOrigin,
+  // 画布交互相关
+  userPanOnDrag, userPanOnScroll, userZoomOnScroll, userSelectionOnDrag, userSelectionMode, userDeleteKeyCode,
+  // 连接相关
+  userIsValidConnection, userOnConnect, userOnBeforeDelete,
+  // 事件回调
+  userOnInit, userOnNodeClick, userOnNodeDoubleClick, userOnNodeContextMenu, userOnNodeMouseEnter, userOnNodeMouseLeave, userOnNodeMouseMove, userOnEdgeClick, userOnEdgeDoubleClick, userOnEdgeContextMenu, userOnEdgeMouseEnter, userOnEdgeMouseLeave, userOnEdgeMouseMove, userOnPaneClick, userOnPaneContextMenu, userOnPaneScroll, userOnPaneMouseEnter, userOnPaneMouseLeave, userOnPaneMouseMove, userOnSelectionChange, userOnSelectionContextMenu,
+  // 画布鼠标事件
+  userOnMouseEnter, userOnMouseLeave, userOnMouseMove, userOnMouseDown, userOnMouseUp,
+  // 移动和缩放事件
+  userOnMove, userOnMoveStart, userOnMoveEnd,
+  // 拖拽相关事件
+  userOnDrop, userOnDragOver, userOnNodeDrag]);
   const onNodesChange = (0, _ahooks.useMemoizedFn)(changes => {
     if (forceLayout && (0, _hasDimensionsChange.hasDimensionsChange)(changes)) {
       // 强制布局
       triggerLayout();
     }
-    props.onNodesChange?.(changes);
+    userOnNodesChange?.(changes);
   });
   const onNodeDragStart = (0, _ahooks.useMemoizedFn)((event, node, nodes) => {
     setNodeDragging(true);
-    flowProps.onNodeDragStart?.(event, node, nodes);
+    userOnNodeDragStart?.(event, node, nodes);
   });
   const onNodeDragStop = (0, _ahooks.useMemoizedFn)((event, node, nodes) => {
     setNodeDragging(false);
-    flowProps.onNodeDragStop?.(event, node, nodes);
+    userOnNodeDragStop?.(event, node, nodes);
   });
   const getEdgesChangeHandlers = (0, _useGetEdgesChangeHandlers.useGetEdgesChangeHandlers)();
-  const _onEdgesChange = (0, _ahooks.useMemoizedFn)(changes => {
-    onEdgesChange?.(changes);
+  const onEdgesChange = (0, _ahooks.useMemoizedFn)(changes => {
+    userOnEdgesChange?.(changes);
     // 触发注册事件
-    getEdgesChangeHandlers()?.forEach(onEdgesChange => {
-      onEdgesChange?.(changes);
+    getEdgesChangeHandlers()?.forEach(handler => {
+      handler?.(changes);
     });
   });
   (0, _react2.useEffect)(() => {
     if (forceFitView) {
-      instance.fitView(fitViewOptions);
+      instance.fitView(reactFlowProps.fitViewOptions);
     }
   }, [nodes]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -211,14 +329,14 @@ function Flow(props) {
       marks: markers
     }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.ReactFlow, {
       nodeTypes: nodeTypes,
-      ...flowProps,
+      ...reactFlowProps,
       edgeTypes: edgeTypes,
       nodes: _nodes,
       edges: _edges,
       onNodesChange: onNodesChange,
       onNodeDragStart: onNodeDragStart,
       onNodeDragStop: onNodeDragStop,
-      onEdgesChange: _onEdgesChange,
+      onEdgesChange: onEdgesChange,
       children: [plugins?.scroller ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_scrollbar.Scrollbar, {
         ...plugins.scroller,
         width: width,
@@ -234,7 +352,7 @@ function Flow(props) {
       }), showControls && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Controls.default, {
         showFullscreen: showFullscreen,
         containerRef: containerRef,
-        fitViewOptions: fitViewOptions,
+        fitViewOptions: reactFlowProps.fitViewOptions,
         position: controlsPosition,
         showInteractive: showInteractive,
         showMiniMap: showMiniMap,

package/cjs/store/PropsStore.js

@@ -92,7 +92,7 @@ const PropsStore = ({
       inputProps,
       flowProps,
       // 其他状态
-      id: flowProps.id || defaultId,
+      id: flowProps.flowProps?.id || defaultId,
       nodeTypeMap
     });
   }, [inputDataProps, flowDataProps]);

package/cjs/types.d.ts

@@ -5,7 +5,7 @@
  *
  * Copyright (c) 2025 by yanxianliang, All Rights Reserved.
  */
-import { Edge, MarkerType, Node, PanelPosition, ReactFlowState, NodeProps, OnEdgesChange, ReactFlowProps } from "@xyflow/react";
+import { Edge, MarkerType, Node, PanelPosition, ReactFlowState, NodeProps, OnEdgesChange, ReactFlowProps, EdgeTypes } from "@xyflow/react";
 import { NodeHandleBounds } from "@xyflow/system";
 import React, { ComponentType } from "react";
 import { MarkDefinition } from "./components/MarkerDefinitions/types";
@@ -48,6 +48,16 @@ export interface BaseThemeConfig {
      */
     showCount?: boolean;
 }
+/**
+ * 从 ReactFlowProps 中排除的属性（在外层已定义或内部固定处理）
+ */
+type ExcludedFlowProps = 'nodeTypes' | 'edgeTypes' | 'nodes' | 'edges' | 'width' | 'height' | 'onNodesChange' | 'onEdgesChange' | 'proOptions' | 'children' | 'fitView' | 'fitViewOptions' | 'minZoom' | 'maxZoom' | 'defaultViewport' | 'nodeOrigin' | 'nodesDraggable' | 'nodesConnectable' | 'elementsSelectable' | 'selectNodesOnDrag' | 'panOnDrag' | 'panOnScroll' | 'zoomOnScroll' | 'selectionOnDrag' | 'selectionMode' | 'deleteKeyCode' | 'isValidConnection' | 'onConnect' | 'onBeforeDelete' | 'onInit' | 'onNodeClick' | 'onNodeDoubleClick' | 'onNodeContextMenu' | 'onNodeMouseEnter' | 'onNodeMouseLeave' | 'onNodeMouseMove' | 'onEdgeClick' | 'onEdgeDoubleClick' | 'onEdgeContextMenu' | 'onEdgeMouseEnter' | 'onEdgeMouseLeave' | 'onEdgeMouseMove' | 'onPaneClick' | 'onPaneContextMenu' | 'onPaneScroll' | 'onPaneMouseEnter' | 'onPaneMouseLeave' | 'onPaneMouseMove' | 'onSelectionChange' | 'onSelectionContextMenu' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseMove' | 'onMouseDown' | 'onMouseUp' | 'onDrop' | 'onDragOver' | 'onNodeDrag' | 'onNodeDragStart' | 'onNodeDragStop' | 'onMove' | 'onMoveStart' | 'onMoveEnd' | 'onlyRenderVisibleElements';
+/**
+ * ReactFlow 原生属性类型（扩展属性）
+ * 排除了已在 IBaseFlowProps 外层定义的属性
+ * 用于传递不常用的 ReactFlow 配置
+ */
+export type FlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = Omit<ReactFlowProps<NodeType, EdgeType>, ExcludedFlowProps>;
 export type LayoutConfig<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
     nodeTypes: Record<string, NodeTypeComponent>;
     originNodes: NodeType[];
@@ -86,7 +96,11 @@ export interface INodeDefinition<DataType extends Record<string, unknown> = Reco
     };
     [key: string]: any;
 }
-export interface IBaseFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> extends Omit<ReactFlowProps<NodeType, EdgeType>, 'nodeTypes' | 'width' | 'height'> {
+/**
+ * BaseFlow 组件自身的属性
+ * 这些属性由 BaseFlow 组件处理，不会透传给 ReactFlow
+ */
+export interface IBaseFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> {
     /**
      * @description graph 宽度
      */
@@ -103,7 +117,256 @@ export interface IBaseFlowProps<NodeType extends Node = Node, EdgeType extends E
      * @description 主题配置
      */
     theme?: BaseThemeConfig;
+    /**
+     * @description 节点数据
+     */
+    nodes?: NodeType[];
+    /**
+     * @description 边数据
+     */
+    edges?: EdgeType[];
+    /**
+     * @description 节点类型定义，使用数组方式定义，可以用在 sider 上
+     * 注意：这是组件库扩展的属性，会转换为 ReactFlow 的 nodeTypes
+     */
     nodeTypes?: Array<INodeDefinition<NodeType['data']>>;
+    /**
+     * @description 边类型定义
+     */
+    edgeTypes?: EdgeTypes;
+    /**
+     * @description 节点变化回调
+     */
+    onNodesChange?: ReactFlowProps<NodeType, EdgeType>['onNodesChange'];
+    /**
+     * @description 边变化回调
+     */
+    onEdgesChange?: ReactFlowProps<NodeType, EdgeType>['onEdgesChange'];
+    /**
+     * @description 是否自动适配视图
+     * @default true
+     */
+    fitView?: boolean;
+    /**
+     * @description 适配视图选项
+     */
+    fitViewOptions?: ReactFlowProps<NodeType, EdgeType>['fitViewOptions'];
+    /**
+     * @description 最小缩放比例
+     */
+    minZoom?: number;
+    /**
+     * @description 最大缩放比例
+     */
+    maxZoom?: number;
+    /**
+     * @description 默认视口配置
+     */
+    defaultViewport?: ReactFlowProps<NodeType, EdgeType>['defaultViewport'];
+    /**
+     * @description ReactFlow 初始化完成回调
+     */
+    onInit?: ReactFlowProps<NodeType, EdgeType>['onInit'];
+    /**
+     * @description 节点点击回调
+     */
+    onNodeClick?: ReactFlowProps<NodeType, EdgeType>['onNodeClick'];
+    /**
+     * @description 节点双击回调
+     */
+    onNodeDoubleClick?: ReactFlowProps<NodeType, EdgeType>['onNodeDoubleClick'];
+    /**
+     * @description 节点右键菜单回调
+     */
+    onNodeContextMenu?: ReactFlowProps<NodeType, EdgeType>['onNodeContextMenu'];
+    /**
+     * @description 节点鼠标进入回调
+     */
+    onNodeMouseEnter?: ReactFlowProps<NodeType, EdgeType>['onNodeMouseEnter'];
+    /**
+     * @description 节点鼠标离开回调
+     */
+    onNodeMouseLeave?: ReactFlowProps<NodeType, EdgeType>['onNodeMouseLeave'];
+    /**
+     * @description 节点鼠标移动回调
+     */
+    onNodeMouseMove?: ReactFlowProps<NodeType, EdgeType>['onNodeMouseMove'];
+    /**
+     * @description 边点击回调
+     */
+    onEdgeClick?: ReactFlowProps<NodeType, EdgeType>['onEdgeClick'];
+    /**
+     * @description 边双击回调
+     */
+    onEdgeDoubleClick?: ReactFlowProps<NodeType, EdgeType>['onEdgeDoubleClick'];
+    /**
+     * @description 边右键菜单回调
+     */
+    onEdgeContextMenu?: ReactFlowProps<NodeType, EdgeType>['onEdgeContextMenu'];
+    /**
+     * @description 边鼠标进入回调
+     */
+    onEdgeMouseEnter?: ReactFlowProps<NodeType, EdgeType>['onEdgeMouseEnter'];
+    /**
+     * @description 边鼠标离开回调
+     */
+    onEdgeMouseLeave?: ReactFlowProps<NodeType, EdgeType>['onEdgeMouseLeave'];
+    /**
+     * @description 边鼠标移动回调
+     */
+    onEdgeMouseMove?: ReactFlowProps<NodeType, EdgeType>['onEdgeMouseMove'];
+    /**
+     * @description 画布点击回调
+     */
+    onPaneClick?: ReactFlowProps<NodeType, EdgeType>['onPaneClick'];
+    /**
+     * @description 画布右键菜单回调
+     */
+    onPaneContextMenu?: ReactFlowProps<NodeType, EdgeType>['onPaneContextMenu'];
+    /**
+     * @description 画布滚动回调
+     */
+    onPaneScroll?: ReactFlowProps<NodeType, EdgeType>['onPaneScroll'];
+    /**
+     * @description 画布鼠标进入回调
+     */
+    onPaneMouseEnter?: ReactFlowProps<NodeType, EdgeType>['onPaneMouseEnter'];
+    /**
+     * @description 画布鼠标离开回调
+     */
+    onPaneMouseLeave?: ReactFlowProps<NodeType, EdgeType>['onPaneMouseLeave'];
+    /**
+     * @description 画布鼠标移动回调
+     */
+    onPaneMouseMove?: ReactFlowProps<NodeType, EdgeType>['onPaneMouseMove'];
+    /**
+     * @description 选择变化回调
+     */
+    onSelectionChange?: ReactFlowProps<NodeType, EdgeType>['onSelectionChange'];
+    /**
+     * @description 选择右键菜单回调
+     */
+    onSelectionContextMenu?: ReactFlowProps<NodeType, EdgeType>['onSelectionContextMenu'];
+    /**
+     * @description 节点是否可拖拽
+     * @default false
+     */
+    nodesDraggable?: boolean;
+    /**
+     * @description 节点是否可连接
+     * @default true
+     */
+    nodesConnectable?: boolean;
+    /**
+     * @description 元素是否可选择
+     * @default true
+     */
+    elementsSelectable?: boolean;
+    /**
+     * @description 拖拽时是否选中节点
+     * @default false
+     */
+    selectNodesOnDrag?: boolean;
+    /**
+     * @description 节点原点位置
+     * @default [0, 0]
+     */
+    nodeOrigin?: ReactFlowProps<NodeType, EdgeType>['nodeOrigin'];
+    /**
+     * @description 拖拽画布的鼠标按键配置
+     */
+    panOnDrag?: ReactFlowProps<NodeType, EdgeType>['panOnDrag'];
+    /**
+     * @description 是否支持滚动平移
+     * @default false
+     */
+    panOnScroll?: boolean;
+    /**
+     * @description 是否支持滚轮缩放
+     * @default true
+     */
+    zoomOnScroll?: boolean;
+    /**
+     * @description 是否支持拖拽选择
+     */
+    selectionOnDrag?: boolean;
+    /**
+     * @description 选择模式
+     */
+    selectionMode?: ReactFlowProps<NodeType, EdgeType>['selectionMode'];
+    /**
+     * @description 删除快捷键
+     */
+    deleteKeyCode?: ReactFlowProps<NodeType, EdgeType>['deleteKeyCode'];
+    /**
+     * @description 连接验证函数
+     */
+    isValidConnection?: ReactFlowProps<NodeType, EdgeType>['isValidConnection'];
+    /**
+     * @description 连接完成回调
+     */
+    onConnect?: ReactFlowProps<NodeType, EdgeType>['onConnect'];
+    /**
+     * @description 删除前回调
+     */
+    onBeforeDelete?: ReactFlowProps<NodeType, EdgeType>['onBeforeDelete'];
+    /**
+     * @description 拖拽放置回调（用于从外部拖入元素）
+     */
+    onDrop?: ReactFlowProps<NodeType, EdgeType>['onDrop'];
+    /**
+     * @description 拖拽经过回调
+     */
+    onDragOver?: ReactFlowProps<NodeType, EdgeType>['onDragOver'];
+    /**
+     * @description 节点拖拽中回调
+     */
+    onNodeDrag?: ReactFlowProps<NodeType, EdgeType>['onNodeDrag'];
+    /**
+     * @description 节点拖拽开始回调
+     */
+    onNodeDragStart?: ReactFlowProps<NodeType, EdgeType>['onNodeDragStart'];
+    /**
+     * @description 节点拖拽结束回调
+     */
+    onNodeDragStop?: ReactFlowProps<NodeType, EdgeType>['onNodeDragStop'];
+    /**
+     * @description 画布鼠标进入回调（整个 ReactFlow 容器）
+     */
+    onMouseEnter?: ReactFlowProps<NodeType, EdgeType>['onMouseEnter'];
+    /**
+     * @description 画布鼠标离开回调（整个 ReactFlow 容器）
+     */
+    onMouseLeave?: ReactFlowProps<NodeType, EdgeType>['onMouseLeave'];
+    /**
+     * @description 画布鼠标移动回调（整个 ReactFlow 容器）
+     */
+    onMouseMove?: ReactFlowProps<NodeType, EdgeType>['onMouseMove'];
+    /**
+     * @description 画布鼠标按下回调（整个 ReactFlow 容器）
+     */
+    onMouseDown?: ReactFlowProps<NodeType, EdgeType>['onMouseDown'];
+    /**
+     * @description 画布鼠标抬起回调（整个 ReactFlow 容器）
+     */
+    onMouseUp?: ReactFlowProps<NodeType, EdgeType>['onMouseUp'];
+    /**
+     * @description 视口移动回调
+     */
+    onMove?: ReactFlowProps<NodeType, EdgeType>['onMove'];
+    /**
+     * @description 视口移动开始回调
+     */
+    onMoveStart?: ReactFlowProps<NodeType, EdgeType>['onMoveStart'];
+    /**
+     * @description 视口移动结束回调
+     */
+    onMoveEnd?: ReactFlowProps<NodeType, EdgeType>['onMoveEnd'];
+    /**
+     * @description 是否只渲染可见元素（性能优化）
+     * @default true
+     */
+    onlyRenderVisibleElements?: boolean;
     /**
      * @description 是否显示控制器
      * @default true
@@ -149,10 +412,6 @@ export interface IBaseFlowProps<NodeType extends Node = Node, EdgeType extends E
     plugins?: {
         scroller?: false | ScrollbarPluginOptions;
     };
-    /**
-     * @description 是否开启 service worker 模式，当为数字时，检测当前的节点数量，节点数量大于配置阈值时启用 serviceWorker模式，否则直接在 js中执行；当为true时强制使用 service worker 执行计算逻辑。false时默认关闭
-     * @default false
-     */
     readOnly?: boolean;
     onZoomIn?: () => void;
     /** Called in addition the default zoom behavior when the zoom out button is clicked. */
@@ -173,6 +432,20 @@ export interface IBaseFlowProps<NodeType extends Node = Node, EdgeType extends E
      */
     forceFitView?: boolean;
     loading?: boolean;
+    /**
+     * @description ReactFlow 扩展属性（不常用的配置）
+     * 用于传递未在外层定义的 ReactFlow 原生属性
+     * 如：nodesDraggable, panOnDrag, zoomOnScroll, 其他事件回调等
+     */
+    flowProps?: FlowProps<NodeType, EdgeType>;
+    /**
+     * @description 子元素
+     */
+    children?: React.ReactNode;
+    /**
+     * @description 调试模式
+     */
+    debug?: boolean;
 }
 export type CollapseButtonProps = {
     position?: 'left' | 'right';
@@ -225,4 +498,5 @@ export type BaseStateType = {
 export type ExtractState<S> = S extends {
     getState: () => infer T;
 } ? T : never;
+export {};
 //# sourceMappingURL=types.d.ts.map