XYFlow React 12.5.0版本发布：增强视图适配与交互体验

XYFlow React 12.5.0版本发布：增强视图适配与交互体验

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

XYFlow是一个用于构建交互式节点图应用的React库，它提供了丰富的节点、边和交互功能，广泛应用于流程图、拓扑图等可视化场景。本次发布的12.5.0版本带来了多项功能增强和问题修复，主要集中在视图适配和交互体验方面。

视图适配功能增强

新版本对fitViewOptions中的padding参数进行了扩展，现在支持更灵活的padding设置方式：

1. 像素单位设置：可以直接使用'30px'这样的像素值
2. 视口百分比设置：可以使用'20%'这样的百分比值
3. 各边独立设置：可以为上下左右分别设置不同的padding值

这个改进使得开发者能够更精确地控制节点在视口中的显示位置和边距，特别是在需要为不同设备或布局提供不同视图适配时特别有用。

交互体验优化

本次更新修复了几个影响用户体验的问题：

1. 修复了在建立连接过程中意外触发pane点击事件的问题，现在当用户正在进行连接操作时，不会误触发背景点击事件。
2. 改进了键盘按键释放的处理逻辑，现在即使输入框处于焦点状态，也能正确释放按键状态，避免了某些快捷键失效的问题。
3. 隐藏节点现在不会出现在迷你地图中，这使迷你地图能更准确地反映当前可见的节点布局。

性能与稳定性改进

针对视图适配功能，修复了添加新节点后立即调用fitView可能无效的问题，确保了视图适配的即时性和可靠性。这个修复对于动态添加节点的场景尤为重要，比如从API加载数据后需要立即适配视图的情况。

开发者体验提升

本次更新还包含大量TSDoc注释的改进，包括：

1. BackgroundProps的类型文档更加清晰
2. EdgeLabelOptions和BaseEdgeProps的注释更加完善
3. ControlProps的文档说明更加详细
4. NodeToolbarProps的注释得到增强
5. 新增了EdgeLabelRendererProps的导出

这些改进使得开发者在使用TypeScript开发时能获得更好的类型提示和文档支持，提高了开发效率。

总结

XYFlow 12.5.0版本通过增强视图适配功能、优化交互体验和改进开发者文档，进一步提升了库的实用性和易用性。这些改进使得开发者能够更轻松地构建复杂、交互性强的节点图应用，同时为用户提供更流畅的操作体验。对于正在使用或考虑使用XYFlow的开发者来说，这个版本值得升级。

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