0

Hi I'm facing some difficulties utilizing react-moveable with react-flow-renderer to make my elements both movable and scalable.

At my current place, I am able to scale and rotate elements but after this when I try to move them the scaling and rotation reverts and they move to a different x and y position instead of staying where the user scaled them to.

Additionally the scaling of the outer container elements reverts when you move the element as well. Here's a link to my codesandbox for reference.

If anybody could help I'd really appreciate it.

https://codesandbox.io/s/sandpack-project-forked-y4o4h1?file=/App.js Thank you!

Jon E
  • 3
  • 4

1 Answers1

0

This is because you are changing only style of dom. You must change style of node to keep it. In your example, you must use onResize in moveable to change both node and dom style (height) and (width). If you only change dom style, it won't be saved.

you can use like this:

<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
        }}
/>

after then you should write updateNodeStyle function to filter out your node by id and change its style

  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;
      })
    );
  };
Dylan Tsou
  • 36
  • 3