Reflex Enterprise React Flow 核心组件完全指南provider、Flow、Background、Controls 与 MiniMap 的配置与实战【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflexrxe.flow是 Reflex Enterprisereflex_enterprise中基于 React Flow 封装的可视化流程编辑器组件库本文聚焦其五大核心组件rxe.flow.provider、rxe.flow、rxe.flow.background、rxe.flow.controls与rxe.flow.mini_map。通过完整继承官方文档的 Props 定义与示例并结合仓库源码底层依赖xyflow/react12.8.4与同目录配套文档帮助你掌握在纯 Python 应用中搭建可交互流程图的全部组件级知识读完即可独立完成一个带背景网格、缩放控制、缩略图导航的受控流程图。一、组件家族总览rxe.flow的模块化设计在docs/enterprise/react_flow/components.md中rxe.flow被定义为一组以子组件children组合方式使用的 React Flow 封装。与一次性渲染整张图的单体组件不同rxe.flow采用主组件 功能子组件的架构rxe.flow.providerFlowProvider—— 上下文提供者让流程内部状态在ReactFlow /之外也可被访问是所有 Hooks 生效的前提rxe.flowFlow—— 渲染画布的主组件接收 nodes/edges 并暴露全部交互事件rxe.flow.backgroundBackground—— 背景图案线条、圆点、十字rxe.flow.controlsControls—— 缩放/适配/锁定控制面板rxe.flow.mini_mapMiniMap—— 全览缩略图。从依赖角度看仓库中docs/app/reflex.lock/package.json声明了前端依赖xyflow/react版本 12.8.4与reactflow^11.11.4说明该组件库在底层直接复用 React Flow 生态。如果你对如何把一个 React 库封装成 Reflex 组件的底层机制感兴趣可参考 wrapping-react 示例其中以reactflow为例演示了rx.Component的tag、library、rx.Var与rx.EventHandler封装方式而rxe.flow的各组件正是同一封装思路在企业级组件库中的成品落地。二、rxe.flow.provider流程上下文的枢纽FlowProvider是一个上下文提供者context provider它使得流程的内部状态可以在ReactFlow /组件之外被访问。官方文档明确指出我们提供的许多 Hooks 都依赖此组件才能工作——具体包括rxe.flow.api模块下的get_nodes、set_nodes、get_edges、screen_to_flow_position、get_connection等详见 Hooks 文档。Props 一览Prop类型说明initial_nodesSequence[Node]用于初始化流程的节点非动态后续变化不会同步回 statedefault_edgesSequence[Edge]用于初始化流程的边非动态initial_widthfloat初始宽度服务端执行fitView时所必需initial_heightfloat初始高度服务端执行fitView时所必需fit_viewbool为True时流程会自动缩放并平移以适配最初提供的所有节点initial_fit_view_optionsFitViewOptions自定义初始fitView行为的选项对象initial_min_zoomfloat初始最小缩放级别initial_max_zoomfloat初始最大缩放级别node_originNodeOrigin节点在流程中放置或查询其 x/y 坐标时使用的原点node_extentCoordinateExtent节点可被移动的边界范围关键约束事件处理器必须放在内层rxe.flow.provider不接受任何事件处理器。所有事件on_nodes_change、on_edges_change、on_connect等都必须设置在内层的rxe.flow组件上。这一点在架构上非常重要FlowProvider只负责提供状态访问通道而交互逻辑全部收敛在渲染层。官方示例受控流程import reflex as rx import reflex_enterprise as rxe from reflex_enterprise.components.flow.types import Node, Edge rx.box( rxe.flow.provider( rxe.flow( rxe.flow.background(), nodesFlowState.nodes, edgesFlowState.edges, on_nodes_changelambda changes: FlowState.set_nodes( rxe.flow.util.apply_node_changes(FlowState.nodes, changes) ), on_edges_changelambda changes: FlowState.set_edges( rxe.flow.util.apply_edge_changes(FlowState.edges, changes) ), fit_viewTrue, ) ), height100vh, width100vw, )此示例同时展示了受控流程的标准接线模式state 中的nodes/edges是唯一数据源交互产生的 changes 通过rxe.flow.util.apply_node_changes/apply_edge_changes在客户端求值后回写。关于受控 vs 非受控与变更应用位置必须在组件代码的 lambda 中而非rx.event内的完整讨论见 interactivity 文档。三、rxe.flow渲染画布主组件Flow是渲染流程的主组件。它接收 nodes 与 edges并为用户交互提供事件处理器。Props 一览Prop类型说明nodesSequence[Node]受控流程中要渲染的节点数组edgesSequence[Edge]受控流程中要渲染的边数组default_nodesSequence[Node]非受控流程的初始节点default_edgesSequence[Edge]非受控流程的初始边node_typesMapping[str, Any]自定义节点类型edge_typesMapping[str, Any]自定义边类型on_nodes_changeEvent handler节点发生变化时触发on_edges_changeEvent handler边发生变化时触发on_connectEvent handler用户拖拽建立连接时触发fit_viewbool为True时自动缩放平移以适配全部初始节点fit_view_optionsFitViewOptionsfit_view的选项styleCSS 样式组件样式受控与非受控在 interactivity 文档 中进一步明确了二者的语义传入nodes/edges→受控controlledstate 是唯一事实来源画布精确渲染 state 内容。此时必须接线on_nodes_change与on_edges_change否则拖拽、选择、删除等交互会被丢弃仅传default_nodes/default_edges→非受控uncontrolled组件内部自行管理变化但 state 永远无法得知这些变化。事件触发时机on_nodes_change节点被拖拽、选择、缩放或移除时触发on_edges_change边被选择或移除时触发on_connect用户从某个 handle 拖拽连接到另一个 handle 时触发可用rxe.flow.util.add_edge(connection, edges)基于 connection 构建新边列表见 utils 文档。注意rxe.flow填充其父容器因此外层必须显式设置height与width如官方示例中的height100vh, width100vw否则流程不可见。官方基础流程示例import reflex as rx import reflex_enterprise as rxe from reflex_enterprise.components.flow.types import Node, Edge def flow_example(): return rx.box( rxe.flow( # 核心子组件 rxe.flow.controls(), rxe.flow.background(), rxe.flow.mini_map(), # 流程配置 default_nodesFlowState.nodes, default_edgesFlowState.edges, nodesFlowState.nodes, edgesFlowState.edges, # 视觉设置 fit_viewTrue, attribution_positionbottom-right, ), height100vh, width100vw, )该示例来自 basic_flow 文档展示了三个功能子组件在同一画布内的组合方式。四、rxe.flow.background背景图案Background为流程渲染背景支持**线条lines、圆点dots、十字cross**三种图案。Props 一览Prop类型说明colorstr图案的颜色bg_colorstr背景的颜色variantLiteral[lines, dots, cross]要渲染的图案类型gapfloat \| tuple[float, float]图案之间的间距可分别指定 x/ysizefloat图案元素的大小官方示例rxe.flow.background(variantdots, gap20, size1)在 nodes 文档 的自定义节点示例中bg_color甚至被绑定到 state 变量rxe.flow.background(bg_colorCustomNodeState.bg_color)实现切换节点颜色时画布背景同步变色的动态效果可见背景组件同样支持响应式 Props。五、rxe.flow.controls缩放控制面板Controls渲染一个包含放大、缩小、适配视图fit view、锁定视口按钮的面板。Props 一览Prop类型说明show_zoombool是否显示缩放按钮show_fit_viewbool是否显示适配视图按钮show_interactivebool是否显示锁定按钮positionPanelPosition控制面板在画布上的位置官方示例rxe.flow.controls()面板默认显示全部按钮通过show_*系列布尔 Props 可精细控制每个按钮的显隐position用于把面板摆放到画布的四个角落之一。六、rxe.flow.mini_map全览缩略图MiniMap渲染流程的小型概览图方便用户在复杂流程中快速定位。Props 一览Prop类型说明node_colorstr \| Any缩略图中节点的颜色node_stroke_colorstr \| Any缩略图中节点的描边颜色pannablebool是否允许在缩略图内拖拽来平移视口zoomablebool是否允许在缩略图内滚动来缩放视口positionPanelPosition缩略图在画布上的位置官方示例rxe.flow.mini_map(pannableTrue, zoomableTrue)在 nodes 文档 中node_color与node_stroke_color还可以接收ArgsFunctionOperation包装的函数按节点类型input/selectorNode/output动态返回颜色——即缩略图配色可跟随状态实时变化rxe.flow.mini_map( node_stroke_colorrx.vars.function.ArgsFunctionOperation.create( (node,), node_stroke_color(rx.Var(node).to(Node)) ), node_colorrx.vars.function.ArgsFunctionOperation.create( (node,), node_color(rx.Var(node).to(Node)) ), )七、组件组合实战从基础到进阶7.1 最小可用组合对照 basic_flow 文档 的最简形态一个可运行的流程至少需要rxe.flowrxe.flow.background视觉参考fit_viewTrue自动适配节点与边通过 state 提供class FlowState(rx.State): nodes: list[Node] [ {id: 1, type: input, position: {x: 100, y: 100}, data: {label: Input Node}}, {id: 2, type: default, position: {x: 300, y: 200}, data: {label: Default Node}}, {id: 3, type: output, position: {x: 500, y: 100}, data: {label: Output Node}}, ] edges: list[Edge] [ {id: e1-2, source: 1, target: 2, animated: True}, {id: e2-3, source: 2, target: 3}, ]7.2 依赖 provider 的高级交互当需要在 ReactFlow 组件之外操作流程例如在on_connect_end中把屏幕坐标转换为画布坐标来落点创建节点时必须使用rxe.flow.provider包裹再调用rxe.flow.api.screen_to_flow_position见 examples 文档 的 Add Node on Edge Drop 完整实现rxe.flow.provider( rxe.flow( ..., on_connect_endlambda connection_status, event: FlowState.handle_connect_end( connection_status, rxe.flow.api.screen_to_flow_position( xevent.client_x, yevent.client_y, ), ), ) )八、组件库在仓库中的位置与延伸阅读本文档在仓库中的路径为 docs/enterprise/react_flow/components.md属于 Reflex Enterprise 文档的 React Flow 章节侧边栏导航配置见 enterprise.pyReact Flow 分组包含 Overview、Basic Flow、Interactivity、Components、Hooks、Edges、Nodes、Theming、Utils、Examples 共 10 个页面。组件底层依赖xyflow/react12.8.4与reactflow^11.11.4见 package.json。同一主题的配套资料overview.md——节点Nodes、Handles、边Edges、连接线Connection Line、视口Viewport等核心概念interactivity.md——受控/非受控流程与事件接线hooks.md——依赖 provider 的rxe.flow.apiHooks 全集nodes.md / edges.md——节点与边的字段定义、内置类型与自定义方式utils.md——apply_node_changes、apply_edge_changes、add_edge等工具函数theming.md——通过 CSS 变量与自定义样式表覆盖默认主题examples.md——Edge Drop 添加节点、连接数限制等完整可运行示例。九、小结rxe.flow组件家族采用上下文提供者 画布主组件 可组合子组件的架构provider解锁 Hooks 与跨组件状态访问Flow承担渲染与交互事件background/controls/mini_map则按需增强画布的可用性。掌握每个组件的 Props 语义尤其是fit_view/initial_fit_view_options的配合、provider不接受事件处理器这一约束以及受控流程必须接线on_nodes_change/on_edges_change的规则即可在纯 Python 中构建出专业、可交互的流程图应用。【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Reflex Enterprise React Flow 核心组件完全指南：provider、Flow、Background、Controls 与 MiniMap 的配置与实战
Reflex Enterprise React Flow 核心组件完全指南provider、Flow、Background、Controls 与 MiniMap 的配置与实战【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflexrxe.flow是 Reflex Enterprisereflex_enterprise中基于 React Flow 封装的可视化流程编辑器组件库本文聚焦其五大核心组件rxe.flow.provider、rxe.flow、rxe.flow.background、rxe.flow.controls与rxe.flow.mini_map。通过完整继承官方文档的 Props 定义与示例并结合仓库源码底层依赖xyflow/react12.8.4与同目录配套文档帮助你掌握在纯 Python 应用中搭建可交互流程图的全部组件级知识读完即可独立完成一个带背景网格、缩放控制、缩略图导航的受控流程图。一、组件家族总览rxe.flow的模块化设计在docs/enterprise/react_flow/components.md中rxe.flow被定义为一组以子组件children组合方式使用的 React Flow 封装。与一次性渲染整张图的单体组件不同rxe.flow采用主组件 功能子组件的架构rxe.flow.providerFlowProvider—— 上下文提供者让流程内部状态在ReactFlow /之外也可被访问是所有 Hooks 生效的前提rxe.flowFlow—— 渲染画布的主组件接收 nodes/edges 并暴露全部交互事件rxe.flow.backgroundBackground—— 背景图案线条、圆点、十字rxe.flow.controlsControls—— 缩放/适配/锁定控制面板rxe.flow.mini_mapMiniMap—— 全览缩略图。从依赖角度看仓库中docs/app/reflex.lock/package.json声明了前端依赖xyflow/react版本 12.8.4与reactflow^11.11.4说明该组件库在底层直接复用 React Flow 生态。如果你对如何把一个 React 库封装成 Reflex 组件的底层机制感兴趣可参考 wrapping-react 示例其中以reactflow为例演示了rx.Component的tag、library、rx.Var与rx.EventHandler封装方式而rxe.flow的各组件正是同一封装思路在企业级组件库中的成品落地。二、rxe.flow.provider流程上下文的枢纽FlowProvider是一个上下文提供者context provider它使得流程的内部状态可以在ReactFlow /组件之外被访问。官方文档明确指出我们提供的许多 Hooks 都依赖此组件才能工作——具体包括rxe.flow.api模块下的get_nodes、set_nodes、get_edges、screen_to_flow_position、get_connection等详见 Hooks 文档。Props 一览Prop类型说明initial_nodesSequence[Node]用于初始化流程的节点非动态后续变化不会同步回 statedefault_edgesSequence[Edge]用于初始化流程的边非动态initial_widthfloat初始宽度服务端执行fitView时所必需initial_heightfloat初始高度服务端执行fitView时所必需fit_viewbool为True时流程会自动缩放并平移以适配最初提供的所有节点initial_fit_view_optionsFitViewOptions自定义初始fitView行为的选项对象initial_min_zoomfloat初始最小缩放级别initial_max_zoomfloat初始最大缩放级别node_originNodeOrigin节点在流程中放置或查询其 x/y 坐标时使用的原点node_extentCoordinateExtent节点可被移动的边界范围关键约束事件处理器必须放在内层rxe.flow.provider不接受任何事件处理器。所有事件on_nodes_change、on_edges_change、on_connect等都必须设置在内层的rxe.flow组件上。这一点在架构上非常重要FlowProvider只负责提供状态访问通道而交互逻辑全部收敛在渲染层。官方示例受控流程import reflex as rx import reflex_enterprise as rxe from reflex_enterprise.components.flow.types import Node, Edge rx.box( rxe.flow.provider( rxe.flow( rxe.flow.background(), nodesFlowState.nodes, edgesFlowState.edges, on_nodes_changelambda changes: FlowState.set_nodes( rxe.flow.util.apply_node_changes(FlowState.nodes, changes) ), on_edges_changelambda changes: FlowState.set_edges( rxe.flow.util.apply_edge_changes(FlowState.edges, changes) ), fit_viewTrue, ) ), height100vh, width100vw, )此示例同时展示了受控流程的标准接线模式state 中的nodes/edges是唯一数据源交互产生的 changes 通过rxe.flow.util.apply_node_changes/apply_edge_changes在客户端求值后回写。关于受控 vs 非受控与变更应用位置必须在组件代码的 lambda 中而非rx.event内的完整讨论见 interactivity 文档。三、rxe.flow渲染画布主组件Flow是渲染流程的主组件。它接收 nodes 与 edges并为用户交互提供事件处理器。Props 一览Prop类型说明nodesSequence[Node]受控流程中要渲染的节点数组edgesSequence[Edge]受控流程中要渲染的边数组default_nodesSequence[Node]非受控流程的初始节点default_edgesSequence[Edge]非受控流程的初始边node_typesMapping[str, Any]自定义节点类型edge_typesMapping[str, Any]自定义边类型on_nodes_changeEvent handler节点发生变化时触发on_edges_changeEvent handler边发生变化时触发on_connectEvent handler用户拖拽建立连接时触发fit_viewbool为True时自动缩放平移以适配全部初始节点fit_view_optionsFitViewOptionsfit_view的选项styleCSS 样式组件样式受控与非受控在 interactivity 文档 中进一步明确了二者的语义传入nodes/edges→受控controlledstate 是唯一事实来源画布精确渲染 state 内容。此时必须接线on_nodes_change与on_edges_change否则拖拽、选择、删除等交互会被丢弃仅传default_nodes/default_edges→非受控uncontrolled组件内部自行管理变化但 state 永远无法得知这些变化。事件触发时机on_nodes_change节点被拖拽、选择、缩放或移除时触发on_edges_change边被选择或移除时触发on_connect用户从某个 handle 拖拽连接到另一个 handle 时触发可用rxe.flow.util.add_edge(connection, edges)基于 connection 构建新边列表见 utils 文档。注意rxe.flow填充其父容器因此外层必须显式设置height与width如官方示例中的height100vh, width100vw否则流程不可见。官方基础流程示例import reflex as rx import reflex_enterprise as rxe from reflex_enterprise.components.flow.types import Node, Edge def flow_example(): return rx.box( rxe.flow( # 核心子组件 rxe.flow.controls(), rxe.flow.background(), rxe.flow.mini_map(), # 流程配置 default_nodesFlowState.nodes, default_edgesFlowState.edges, nodesFlowState.nodes, edgesFlowState.edges, # 视觉设置 fit_viewTrue, attribution_positionbottom-right, ), height100vh, width100vw, )该示例来自 basic_flow 文档展示了三个功能子组件在同一画布内的组合方式。四、rxe.flow.background背景图案Background为流程渲染背景支持**线条lines、圆点dots、十字cross**三种图案。Props 一览Prop类型说明colorstr图案的颜色bg_colorstr背景的颜色variantLiteral[lines, dots, cross]要渲染的图案类型gapfloat \| tuple[float, float]图案之间的间距可分别指定 x/ysizefloat图案元素的大小官方示例rxe.flow.background(variantdots, gap20, size1)在 nodes 文档 的自定义节点示例中bg_color甚至被绑定到 state 变量rxe.flow.background(bg_colorCustomNodeState.bg_color)实现切换节点颜色时画布背景同步变色的动态效果可见背景组件同样支持响应式 Props。五、rxe.flow.controls缩放控制面板Controls渲染一个包含放大、缩小、适配视图fit view、锁定视口按钮的面板。Props 一览Prop类型说明show_zoombool是否显示缩放按钮show_fit_viewbool是否显示适配视图按钮show_interactivebool是否显示锁定按钮positionPanelPosition控制面板在画布上的位置官方示例rxe.flow.controls()面板默认显示全部按钮通过show_*系列布尔 Props 可精细控制每个按钮的显隐position用于把面板摆放到画布的四个角落之一。六、rxe.flow.mini_map全览缩略图MiniMap渲染流程的小型概览图方便用户在复杂流程中快速定位。Props 一览Prop类型说明node_colorstr \| Any缩略图中节点的颜色node_stroke_colorstr \| Any缩略图中节点的描边颜色pannablebool是否允许在缩略图内拖拽来平移视口zoomablebool是否允许在缩略图内滚动来缩放视口positionPanelPosition缩略图在画布上的位置官方示例rxe.flow.mini_map(pannableTrue, zoomableTrue)在 nodes 文档 中node_color与node_stroke_color还可以接收ArgsFunctionOperation包装的函数按节点类型input/selectorNode/output动态返回颜色——即缩略图配色可跟随状态实时变化rxe.flow.mini_map( node_stroke_colorrx.vars.function.ArgsFunctionOperation.create( (node,), node_stroke_color(rx.Var(node).to(Node)) ), node_colorrx.vars.function.ArgsFunctionOperation.create( (node,), node_color(rx.Var(node).to(Node)) ), )七、组件组合实战从基础到进阶7.1 最小可用组合对照 basic_flow 文档 的最简形态一个可运行的流程至少需要rxe.flowrxe.flow.background视觉参考fit_viewTrue自动适配节点与边通过 state 提供class FlowState(rx.State): nodes: list[Node] [ {id: 1, type: input, position: {x: 100, y: 100}, data: {label: Input Node}}, {id: 2, type: default, position: {x: 300, y: 200}, data: {label: Default Node}}, {id: 3, type: output, position: {x: 500, y: 100}, data: {label: Output Node}}, ] edges: list[Edge] [ {id: e1-2, source: 1, target: 2, animated: True}, {id: e2-3, source: 2, target: 3}, ]7.2 依赖 provider 的高级交互当需要在 ReactFlow 组件之外操作流程例如在on_connect_end中把屏幕坐标转换为画布坐标来落点创建节点时必须使用rxe.flow.provider包裹再调用rxe.flow.api.screen_to_flow_position见 examples 文档 的 Add Node on Edge Drop 完整实现rxe.flow.provider( rxe.flow( ..., on_connect_endlambda connection_status, event: FlowState.handle_connect_end( connection_status, rxe.flow.api.screen_to_flow_position( xevent.client_x, yevent.client_y, ), ), ) )八、组件库在仓库中的位置与延伸阅读本文档在仓库中的路径为 docs/enterprise/react_flow/components.md属于 Reflex Enterprise 文档的 React Flow 章节侧边栏导航配置见 enterprise.pyReact Flow 分组包含 Overview、Basic Flow、Interactivity、Components、Hooks、Edges、Nodes、Theming、Utils、Examples 共 10 个页面。组件底层依赖xyflow/react12.8.4与reactflow^11.11.4见 package.json。同一主题的配套资料overview.md——节点Nodes、Handles、边Edges、连接线Connection Line、视口Viewport等核心概念interactivity.md——受控/非受控流程与事件接线hooks.md——依赖 provider 的rxe.flow.apiHooks 全集nodes.md / edges.md——节点与边的字段定义、内置类型与自定义方式utils.md——apply_node_changes、apply_edge_changes、add_edge等工具函数theming.md——通过 CSS 变量与自定义样式表覆盖默认主题examples.md——Edge Drop 添加节点、连接数限制等完整可运行示例。九、小结rxe.flow组件家族采用上下文提供者 画布主组件 可组合子组件的架构provider解锁 Hooks 与跨组件状态访问Flow承担渲染与交互事件background/controls/mini_map则按需增强画布的可用性。掌握每个组件的 Props 语义尤其是fit_view/initial_fit_view_options的配合、provider不接受事件处理器这一约束以及受控流程必须接线on_nodes_change/on_edges_change的规则即可在纯 Python 中构建出专业、可交互的流程图应用。【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
