ticlo
Dragging a Panel does not work with controlled layout
I created a minimal example to demonstrate this, see https://github.com/ldegen/rc-dock-issue-159
I use rc-dock as "controlled layout".
When I try to drag a panel (not a tab!) to another position, it just snaps back to the previous position when I release the mouse button.
The same works with "uncontrolled layout". As reported by another user in #154, I see that two onLayoutChanged callbacks are fired, the first one seems "correct", but the second one carries the original, now outdated layout data.
I tried to step through the code and make sense of what is happening.
The following bit drew my attention: https://github.com/ticlo/rc-dock/blob/94de9cad4d1019cc275ab73c88643f841f389c24/src/dragdrop/DragDropDiv.tsx#L208-L214
If I understand this correctly, the first call in line 210 to state._onDragEnd(...) will (among other things) correctly calculate the new layout and pass it to the onLayoutChanged handler registered by the application.
But then the second call to onDragEndT(...) in line 212 will cause a second callback, but this time with outdated layout.
My guess is, because the code somehow assumes that the state is updated synchronously after the first callback.
Which for some reason seems not to be the case in my case.
I see that basically the same works in the controlled-layout example.
Maybe this is somehow related to changes in React 18?
Idegen, There is a bug in React 18 in controlled layouts because onLayoutChange appears to be called twice on some changes. I fixed this by debouncing onLayoutChange with a time comparison. Not exactly an elegant solution, but it works for me.
let currentTime: Date = new Date();
if (currentTime.getTime() - lastChange.getTime() < 20) return;
setLastChange(currentTime);
setLayout( {... newLayout });
edits for appearance
