rowHeight not refreshing while dragging

We are working with the rowHeight-function to give the nodes different heights depending on the nested level of each node. This is working well so far.

But we ran into problems while dragging a node. The calculated heights need to be recalculated while dragging, but they don’t. We noticed this is working well with isVirtualized is false, but not if it’s set to true.

Anyone got an idea?

[dcporter44]

i hacked around this by forcing calling recomputeRowHeights on drag change. On drag I set an interval at 250ms to recompute row heights. When stopped dragging, I clear the interval. I originally didnt use an interval and called recomputeRowHeights within the onChange prop, but that caused me to call recomputeRowHeights hundreds of times (for every pixel i moved my cursor while dragging). Feel free to change 250ms to a lower number. But calling recomputeRowHeights too often will hurt performance. This method isnt perfect, but it does the job:

<SortableTree>
...
reactVirtualizedListProps={{
   autoHeight: true,
   ref: ref => this.list = ref;
}}
onDragStateChanged={({ isDragging }) => {
     if (this.list) {
       const recompute = () => {
          this.list.wrappedInstance.recomputeRowHeights();
        };
        if (isDragging) {
          this.dragInterval = setInterval(recompute, 250);
        } else {
          clearInterval(this.dragInterval);
          this.list.wrappedInstance.recomputeRowHeights();
        }
    }
}}
</SortableTree>

[mx2323]

i was able to get the correct behavior for refreshing row height while dragging on my own local fork of react-sortable-tree. the changes probably are not usable by anyone else, nor are they the ‘right’ way to do things, but i’m happy enough with the resulting behavior that it’s usable for us for now.

the issue is that if you modify the code to call recomputeRowHeights() more frequently like everyone is doing above, a larger and smaller row will end up toggling in the tree infinitely while you hover over a fixed location with your mouse pointer. by calling recompute row heights every time the state is changed on hover() in react-sortable-tree.js, it just exposes a problem in the library where moving variable height rows around with the current logic can cause infinite toggling of the draggedNode location.

for instance, this happens whenever a smaller height node A is hovered over the bottom portion of a larger drop target node B, A is inserted in the tree above B by the library, but on redraw, if the currently hovering node A is over B, it will try to move A down and B up. But, then on the next redraw, it will detect the node is over B, and then will try to again insert A above B, which leaves you in that infinite loop of redrawing because you are recomputing row heights

i made a change to the library in dnd-manager.js so that if it is hovering over a lower portion over a component, it will try to insert it after instead of always trying to place it above the target node.

if people are interested, i can work on a diff. it’s probably not the the right way to do this, but appears to be working good enough for our purposes.