rowHeight not refreshing while dragging

[svenadlung]

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?

[svenadlung]

To be more precise I think height is not re-set at all until toggling visibilities or removing and adding nodes. Even updating the state (changing sorting) is causing the issue.

Can anybody provide help please?

[jcalebj]

I came across the same problem as @svenadlung

I have rowHeight set to:

  rowHeight = ({ node }) => {
    console.log(node);
    if (!node.parent) {
      return 116;
    } else {
      return 46;
    }
  }

When isVirtualized = false, after initial load, I can see the rowHeight func firing in the console and correctly setting the height as I drag around a node, but when isVirtualized = true the rowHeight func does not fire at all (after initial load) when dragging the node around.

Any ideas?

[aviov]

Nice component:) and here is the same thing about rowHeight being invoked only at onVisibilityToggle, if isVirtualized={true}. @checklist was going to resolve this via custom NodeRendererDefault in issue #192 Does not seem to be shortcut solution. Would be cool to invoke rowHeight programmatically.

[jcalebj]

Thanks for the comment @asynchub!
I think the issue lies outside of having a custom NodeRendererDefault. In react-sortable-tree.js it seems like the renderRow function's style prop is different when isVirtualized vs !isVirtualized. When isVirtualized is false, the style uses rowHeight func to calculate height (as seen here on line 684). However, when isVirtualized is true, the style does not seem to be using the rowHeight func I pass in. As seen here on line 666

[jcalebj]

So what if at this line there was:

style: {
            ...rowStyle,
            height:
              typeof rowHeight !== 'function'
                ? rowHeight
                : rowHeight({
                    index,
                    treeIndex: index,
                    node: row.node,
                    path: row.path,
                  }),
          },

[aviov]

nice hack @jcalebj 👍
instead of row.node and row.path apply rows[index].node and rows[index].path there.
rowHeight invoked now, node height is changed, but next nodes are "not moved down" when node height button is toggled. setState does not affect other rows movement either before or after.
experimented with transpiled code:

style: Object.assign({}, rowStyle, {
                                          height: typeof rowHeight !== 'function' ? rowHeight : rowHeight({
                                            index: index,
                                            treeIndex: index,
                                            node: rows[index].node,
                                            path: rows[index].path
                                          })
                                        }),

[aviov]

to ScrollZoneVirtualList, which is actually withScrolling from 'react-dnd-scrollzone' there lines like theese are passed:
height={height}
estimatedRowSize={
typeof rowHeight !== 'function' ? rowHeight : undefined
}
interesting, if they can affect another rows to move down on toggling the target row?
need to check that later today.

[jcalebj]

@asynchub I spent the majority of the day yesterday trying to track down the reason for this behavior 😒
I traced it down through ScrollZoneVirtualList to react-virtualized and found this issue this morning. It seems that the second to last comment references this in the docs and may be the solution we've been looking for 😻 I'll report back with my results

[aviov]

thanks a lot for your find @jcalebj 👍
having same feeling to deal with react-virtualized
hopefully you are right, that recomputeRowHeight can resolve this.
will try this later in the evening as well :)

[svenadlung]

Yeah, I was thinking the issue is with react-virtualized. I didn't dig deeper so far. Did you progress your work?

[jcalebj]

Yeah @asynchub @svenadlung , I found a solution for resetting the height correctly after moving/dragging a node. To be clear, the issue is not with react-virtualized.

react-sortable-tree.js is missing a call to List.recomputeRowHeights(). See docs here and an example here.

Right now I have that call within moveNode function (which happens after drag is finished) which updates the row heights correctly after a move happens.

The rowHeights update while dragging is still not working though. I don't know where to call the recomputeRowHeights function to update the rowHeights while dragging. I've tried several different places in the lifecylce, but there's a point between a row of height X and a row of height Y that it sits between "slideRegion" of both rows, so it shifts back and forth from below to above the hovered row. You can see this behavior in the attached gif. I have a debounce in place to slow it down, else it happens so often you can't see it and it nearly crashes. You can see that if I leave that particular "middle ground" slide region and go lower or higher than the row, that it resolves and sets the correct rowHeight both when it's above and below the row with the larger rowHeight.

I can open up a PR on what I have that fixes the rowHeight issue after moving a node, but will need some more time and/or assistance resolving the problem while dragging (detailed above). What do you guys think?

[aviov]

hi @svenadlung have found how to invoke the function recomputeRowHeights inside ScrollZoneVirtualList.
need to find out, where to call this function exactly to make clicked node height and offset position of next rows. working on this.
any ideas @svenadlung, @jcalebj
update:) just seen previous post from @jcalebj, thanks a lot, will study this.

[jcalebj]

@asynchub see my last comment for my findings