反應流渲染器和可移動元素 position 和比例不保持不變

Question

嗨，我在使用 react-moveable 和 react-flow-renderer 來使我的元素既可移動又可擴展時遇到了一些困難。

在我目前的位置，我可以縮放和旋轉元素，但是在此之后，當我嘗試移動它們時，縮放和旋轉會恢復，並且它們會移動到不同的 x 和 y position，而不是停留在用戶縮放它們的位置。

此外，當您移動元素時，外部容器元素的縮放也會恢復。 這是我的代碼框的鏈接以供參考。

如果有人可以提供幫助，我將不勝感激。

https://codesandbox.io/s/sandpack-project-forked-y4o4h1?file=/App.js謝謝！

Answer 1

這是因為你只改變了 dom 的風格。 您必須更改節點的樣式才能保留它。 在您的示例中，您必須在可移動中使用 onResize 來更改節點和 dom 樣式（高度）和（寬度）。 如果只更改 dom 樣式，則不會保存。

你可以這樣使用：

 <Moveable ref={moveableRef} target={target} resizable={true} renderDirections={['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se']} onResize={({ target, width, height, delta }) => { delta[0] && (target.style.width = `${width}px`); // change dom style can work but can't be save when your node change delta[1] && (target.style.height = `${height}px`); // change dom style can work but can't be save when your node change updateNodeStyle(target.dataset.id, { width: `${width}px`, height: `${height}px` }); // function about change node style,you should write this function by yourself }} />

之后，您應該編寫 updateNodeStyle function 以通過 id 過濾掉您的節點並更改其樣式

 const updateNodeStyle = (nodeId,value) => { setNodes((nds) => nds.map((node) => { if (node.id === nodeId) { node.style = {...node.style, width: value.width, height: value.height }; } return node; }) ); };