React Flow 12 终于发布了！带有一个新的包名 @xyflow/react！

🌐 React Flow 12 is finally out! With a new package name @xyflow/react!

主要特点

🌐 Main features

• SSR / SSG: 你可以为节点定义 width、height 和 handles。这使得可以在服务器上渲染流程，并在客户端进行 hydrate：SSR 指南
  • 详情：在 v11 中，一旦节点被测量，库就会设置 width 和 height。这种情况仍然发生，但我们现在使用 measured.width 和 measured.height 来存储这些信息。在先前的版本中，关于 width 和 height 总是存在很多混淆。很难理解的是，你不能用它来传递实际的宽度或高度。也不是很明显这些属性是由库添加的。我们认为新的实现解决了这两个问题：width 和 height 是可选属性，可用于定义尺寸，而测量后的尺寸存储在 measured 中。
• 反应流: 新的钩子 useHandleConnections 和 useNodesData 以及新的 updateNode 和 updateNodeData 函数可以用于管理节点之间的数据流：计算流指南
  • 详情：处理响应式流非常常见。你更新节点 A，并希望在连接的节点 B 上对这些变化做出反应。直到现在，每个人都必须自己想出一个自定义解决方案。通过这个版本，我们希望改变这一点，并为你提供高效的辅助工具来处理它。如果你对此感到兴奋，可以查看这个示例：
• 夜间模式和 CSS 变量： React Flow 现在带有内置的夜间模式，可以通过使用新的 colorMode 属性（“light”、“dark” 或 “system”）来切换：夜间模式示例
  • 详情：在此版本中，我们希望让切换深色和浅色模式更加容易，并为深色流程提供一个更好的起点。如果你传入 colorMode=“dark”，我们会在封装器上添加类名“dark”，并用它来调整样式。为了让我们更容易实现这个新功能，我们将大部分样式切换为使用 CSS 变量。这些变量也可以在用户端用于自定义流程。

更多功能和更新

🌐 More features and updates

还有更多！除了新的主要功能外，我们还添加了一些在我们的清单上已经很久的小功能。我们还开始使用 TS 文档来改善文档质量。我们已经开始为一些类型和 hooks 添加文档，这应该会提升开发者体验。

🌐 There is more! Besides the new main features, we added some minor things that were on our list for a long time. We also started to use TS docs for better docs. We already started to add some docs for some types and hooks which should improve the developer experience.

• useConnection 钩子： 使用此钩子，你可以访问正在进行的连接。例如，你可以使用它为句柄上色，或者根据当前的起始/结束句柄自定义连接线的样式。
• 受控 viewport： 这是一个高级功能。可能的使用场景包括动画化视口或对低分辨率屏幕进行变换圆整等。该功能带来了两个新属性： viewport 和 onViewportChange。
• ViewportPortal 组件： 这使得可以在视口中渲染元素，而无需实现自定义节点。
• onDelete 处理程序：我们添加了一个用于 onDeleteNodes 和 onDeleteEdges 的组合处理程序，以便更容易地对删除操作做出反应。
• onBeforeDelete 处理程序：使用此处理程序，你可以防止/管理删除。
• isValidConnection 属性： 这使得为所有连接实现一个验证函数成为可能。它也会在程序matically添加的边上被调用。
• autoPanSpeed 属性： 用于控制自动平移时的速度。
• 背景组件：添加 patternClassName 属性，以便能够通过使用类名来设置背景图案的样式。例如，如果你想使用 Tailwind 来设置背景图案的样式，这会很有用。
• onMove 回调 会在库调用的视口更新（例如 fitView 或 zoom-in）时触发
• deleteElements 现在返回已删除的节点和已删除的边
• 为节点添加 origin 属性
• 为边添加 selectable 属性
• 节点调整器：当组调整大小时，子节点不会移动，范围和展开被正确识别
• BezierEdge、StepEdge、SmoothStepEdge 和 StraightEdge 组件的正确类型
• 库创建的新边只有在设置了这些属性时才会有 sourceHandle 和 targetHandle 属性。（我们以前会传递 sourceHandle: null 和 targetHandle: null）
• 当 z 索引更改时，边不会挂载/卸载
• 连接线知道目标句柄的位置，以便路径被正确绘制
• nodeDragThreshold 默认是 1，而不是 0
• 更好的选择框可用性（拖出流程时捕获）
• 将 selectable、deletable、draggable 和 parentId 添加到 NodeProps
• 当样式未加载时添加警告