Drop doesn't work unless cursor is *exactly* on top of `renderDragBetweenLine`

[AssisrMatheus]

trafficstars

Describe the bug When dropping a between-items event. The cursor must stay exactly on top of renderDragBetweenLine, or else the drop won't work. Even though the line is shown

This is visible when dragging under the last element of a tree

It's even possible to see the cursor show the + symbol when exactly on top of renderDragBetweenLine but not otherwise

To Reproduce Steps to reproduce the behavior:

• Drag an item under the last element of a tree

Expected behavior Either allow the user to drop when cursor is not on top of renderDragBetweenLine, which drops at the last place the line was rendered. Or hide renderDragBetweenLine.

Screenshots

Desktop (please complete the following information):

• OS: macOS Monterey 12.4
• Browser: Chrome 105.0.5195.102
• Version: 1.1.6

[AssisrMatheus]

If needed, renderDragBetweenLine is as such:

renderDragBetweenLine={({ draggingPosition, lineProps }) => {
        // console.log(draggingPosition, lineProps);
        return (
          // Ref: https://github.com/lukasbach/react-complex-tree/blob/beab519f98052e6afa17fd931ba6f822d3f2fc86/packages/blueprintjs-renderers/src/renderers.tsx#L101
          <div
            {...lineProps}
            className="absolute right-0 h-1 bg-gray-500"
            style={{
              top:
                draggingPosition.targetType === 'between-items' && draggingPosition.linePosition === 'top'
                  ? '0px'
                  : draggingPosition.targetType === 'between-items' && draggingPosition.linePosition === 'bottom'
                  ? '-4px'
                  : '-2px',
              left: `${draggingPosition.depth * 23}px`
            }}
          />
        );
      }}

[lukasbach]

The issue is a bit different than what it looks like: The drop only works if the mouse was within the tree when the mouse button was released. If the mouse is outside the boundaries of the tree, the drag is considered cancelled. This is consistent with what other tree implementations do.

I think what increases the issue here, is that the viable drop area for "in-between" targets is in fact not that big. The top 20% and bottom 20% of an item are considered the drop target for dropping in between items, and the 60% in the middle of an item are the drop area for dropping the item into another item.

I now changed something that should improve this: For items that can't actually contain any children, i.e. non-folders, the drop target size for top and bottom will now be 50% each, so there is more space for the user to drop the item to. I hope this improves the underlying issue. I will release this change within the following days.

[lukasbach]

I just released v2.0.0, in which a further improvement is done to this, where a drop is also registered as below the last item, if the tree container is bigger than its contents and the mouse drops in the whitespace below the last item. I think this should also improve the UX around this topic.

I'll close this for now since I don't see a lot of ways for further improvements. Feel free to reopen if you have additional suggestions.