Rnd Components rerender will has wrong position when use scale

[mitcns]

I'm using react-rnd version [10.2.4]

My browser is: Chrome

I am sure this issue is not a duplicate

There is no problems when you create Rnd Comps in scale < 1 situations, but if you re-render Rnd Comps with same position & same scale, Comps position is confused. Result should be like this: but, we got this, and although the parent DOM is relative position, Comps's position will has puzzled problems if scale !== 1, like this(scale < 1):

[onuralpbicer]

Pretty sure I'm having the same/similar issue. When I have a scale !== 1 and then render Rnd(as in, conditionally render div in the beginning, then change that flag to render Rnd) the positions are halved, both x and y. When I do something to re-render, it snaps to its actual place.

If I render Rnd from the get go, the issue doesn't happen

Edit: So I played around with it a bit, if I exit early from the updateOffsetFromParent function with return {top: 0,left: 0,}, the issue doesn't happen. Still trying to find the actual cause

[bokuweb]

@mitcns @onuralpbicer If you are ok, please provide reproduced project in codesandbox?

[onuralpbicer]

@bokuweb I can't share that project's code as it's a work project, but I'll try and make a repro on codesandbox when I can.

In the meantime, doing the following seemed to at least work around the problem. This is on 10.3.1 btw

const RndComponent = (props: Omit<RndProps, 'ref'>): JSX.Element => {
	const rndRef = useRef<Rnd>(null)

	useEffect(() => {
		if (rndRef.current) {
			rndRef.current.updateOffsetFromParent()
			console.log('hello')
		}
	}, [rndRef.current])

	return <Rnd ref={rndRef} {...props}></Rnd>
}

export default RndComponent

[rygo11]

My problem seems more like the op. I've not figured out exactly why it's happening, I think it's somewhere in react-draggable but I can't be sure.

However the quick fix was to divide the default x and y positions by the scale in the Rnd props. This is not necessary for width and height, only for position. eg: default={{ width: storedWidth, height: storedHeight, x: storedX/storedScale, y: storedY/storedScale, }}

[danielhamam]

My problem seems more like the op. I've not figured out exactly why it's happening, I think it's somewhere in react-draggable but I can't be sure.

However the quick fix was to divide the default x and y positions by the scale in the Rnd props. This is not necessary for width and height, only for position. eg: default={{ width: storedWidth, height: storedHeight, x: storedX/storedScale, y: storedY/storedScale, }}

worked for me. thanks!

FYI to creators - positioning when scaling is a major flaw in this library.

(Edit - Another FYI): Although above comment is a great workaround, I have reached many issues regarding resizing when the element is scaled. Positioning may shift probably due to abstracted react-draggable transformations.

[stenalpjolly]

I'm also having issue while dragging element on scaled canvas

https://codesandbox.io/s/long-lake-9iyjtp