fitView 变得更好了！

🌐 fitView just got a lot better!

你有没有在添加或更改节点后，让 fitView 正常工作时遇到困难？你的代码看起来像这样吗？

🌐 Have ever struggled with making fitView work right after adding or changing your nodes? Does your code look something like this?

setNodes((nodes) => [nodes, ...newNode]);
requestAnimationFrame(() => {
  fitView();
});
// renders the node first and then fits the view :(

好吧，你将会有一次愉快的体验！不再有漏洞，不再有 setTimeout 或 requestAnimationFrame，也不再有不匹配视图的瞬间帧！

🌐 Well, you are in for a treat! No more hacks, no more setTimeout or requestAnimationFrame and no more split second frames of unfitted views!

setNodes((nodes) => [nodes, ...newNode]);
fitView(); // it just works.
// adding a new node and fitting the view happens at the same time

还有一件事

🌐 One more thing

你可能已经注意到，fitViewOptions 的 padding 值相当奇怪！padding: 0.3 究竟意味着什么？嗯，我们也不知道，所以你现在可以传递像素值 '25px'、视口百分比 '10%'，真正的高手甚至可以

🌐 You might have realized that the padding value for fitViewOptions is quite a weird fella! What does padding: 0.3 even mean? Well we don’t know either, so you you can now pass pixel values '25px', viewport percentages '10%' and true pros can now even

const fitViewOptions = {
  padding: {
    /** horizontal */
    x: '100px',
    /** vertical */
    y: '50px',
    /** e.g. top overwrites x */
    top: '25px',
    /** mix and match units */
    left: '15%',
    /** legacy units still work */
    bottom: 0.1,
    /** have a modal on the right that stretches 50% over the screen? */
    right: '50%',
  },
};

setNodes((nodes) => [nodes, ...newNode]);
fitView(); // it just works.
// adding a new node and fitting the view happens at the same time

新功能

🌐 New Features

• #5067  为每一侧在 ‘px’ 或 ’%’ 中定义不同的 fitView 内边距。

补丁更改

🌐 Patch Changes

• #5067  修复在添加新节点后 fitView 无法立即生效的问题
• #5059  当连接进行中时，防止 onPaneClick 触发。
• #5093  隐藏节点不再显示在小地图上
• #5090  即使在输入输出字段聚焦时也释放按键
• 感谢 @dimaMachina ！- 感谢你改进了 BackgroundProps、EdgeLabelOptions、ControlProps、NodeToolbarProps、EdgeLabelRendererProps、EdgeLabelOptions 和 EdgeTextProps 的 TSDoc 注释