XYFlow Svelte 1.0 正式发布：现代化流程图库的重大升级

XYFlow Svelte 1.0 正式发布：现代化流程图库的重大升级

xyflow React Flow | Svelte Flow - 这是两个强大的开源库，用于使用React（参见https://reactflow.dev）或Svelte（参见https://svelteflow.dev）构建基于节点的用户界面（UI）。它们开箱即用，并且具有无限的可定制性。 项目地址: https://gitcode.com/gh_mirrors/xy/xyflow

XYFlow 是一个基于 Svelte 的现代化流程图和节点编辑器库，它提供了构建可视化编辑器所需的所有核心功能。作为一个专门为 Svelte 设计的流程图解决方案，XYFlow 让开发者能够轻松创建复杂的节点连接系统、流程图和数据可视化工具。

1.0 版本核心特性解析

边缘重连功能

新版本引入了边缘重连功能，通过新增的 EdgeReconnectAnchor 组件，开发者可以在自定义边缘上添加重新连接点。这一特性极大地提升了用户体验，使得调整节点间连接关系变得更加直观和灵活。

键盘导航与无障碍访问

XYFlow 1.0 显著改进了键盘导航和无障碍访问功能。现在用户可以通过键盘：

• 使用 Tab 键在节点和边缘间导航
• 使用方向键移动选中的节点
• 通过键盘操作完成大部分交互

这些改进不仅提升了键盘用户的使用体验，也使屏幕阅读器能够更好地解释流程图内容。开发者可以通过 disableKeyboardA11y 参数选择禁用此功能。

点击连接模式

新增的点击连接模式改变了传统的拖拽连接方式，用户现在可以：

1. 点击源节点手柄
2. 点击目标节点手柄
3. 完成连接创建

这种分步操作方式在某些场景下比拖拽更加精确和可控。

技术架构改进

视口门户增强

ViewportPortal 组件得到了显著增强，现在开发者可以更精细地控制内容在视口中的渲染层级：

• 可以选择将内容渲染在节点和边缘下方
• 也可以选择渲染在上方
• 为覆盖层和背景层实现提供了更多可能性

视图适配优化

fitView 函数经过重新设计，能够更智能地处理动态添加的节点。新算法考虑了：

• 节点添加的时序
• 节点间的空间关系
• 画布当前视图状态 使得自动调整视图范围更加平滑自然。

开发者体验提升

渲染控制参数

新增了多个实用参数提升开发灵活性：

• colorModeSSR：为服务端渲染提供颜色模式回退
• elevateNodesOnSelect 和 elevateEdgesOnSelect：控制选中元素的z-index提升
• 自定义类名参数：允许修改禁用拖拽、缩放等操作的CSS类名

选择状态监听

新增的 onselectionchange 事件和 useOnSelectionChange hook 提供了更优雅的方式来监听选择状态变化，替代了传统的轮询或复杂的状态管理方案。

升级建议

对于现有项目升级到1.0版本，开发者需要注意：

• 新版本基于Svelte 5构建，需要相应升级项目基础
• 部分API进行了调整，建议仔细阅读变更说明
• 键盘导航功能默认启用，如需保留原有行为需要显式禁用
• 边缘重连功能需要更新自定义边缘组件的实现

XYFlow Svelte 1.0 的这些改进使其在功能完备性、用户体验和开发者友好度方面都达到了新的高度，是构建专业级可视化编辑器的理想选择。

xyflow React Flow | Svelte Flow - 这是两个强大的开源库，用于使用React（参见https://reactflow.dev）或Svelte（参见https://svelteflow.dev）构建基于节点的用户界面（UI）。它们开箱即用，并且具有无限的可定制性。 项目地址: https://gitcode.com/gh_mirrors/xy/xyflow