Drag line position is incorrect when giving item-container a margin.

[ethan-vanderheijden]

Describe the bug
If you give the item-container element a vertical margin, the drag line position is calculated incorrectly.

To Reproduce
Give item-container a vertical margin like so:

.rct-tree-item-title-container {
    margin-top: 2px;
    margin-bottom: 2px;
}

2024-07-25.21-27-25_edited.mp4

Additional context
The issue is that it is calculating the item container's height incorrectly:

react-complex-tree/packages/core/src/controlledEnvironment/layoutUtils.ts

Lines 3 to 8 in 596a624

	export const computeItemHeight = (treeId: string) => {
	const firstItem = getDocument()?.querySelector<HTMLElement>(
	`[data-rct-tree="${treeId}"] [data-rct-item-container="true"]`
	);
	return firstItem?.offsetHeight ?? 5;
	};

It uses .offsetHeight, which doesn't take into account margins. The following patch worked for me:

const firstItem = getDocument()?.querySelector(
    `[data-rct-tree="${treeId}"] [data-rct-item-container="true"]`
);
if (firstItem) {
    const style = getComputedStyle(firstItem);
    // note: divide total margin by two
    // when two item containers are adjacent and both have margins, only one margin is rendered
    return firstItem.offsetHeight + (parseFloat(style.marginBottom) + parseFloat(style.marginTop)) / 2;
} else {
    return 5;
}

[lukasbach]

Thanks for the report, I've fixed it in the latest version.

I've changed the implementation to just use maximum value of full top and full bottom margin instead of the average of top and bottom margin. Your implementation works fine if top and bottom margin are equal, in which case the new implementation will behave identical. But generally, an DOM element with top margin will have its margin flow into the bottom margin of the preceding element, and for differing margins this behaves inconsistent.

Now, if the bottom margin is larger than the top margin, the top margin is ignored completely since it completely flows into the bottom margin of the preceding item. If the top margin is larger, it extends beyond the bottom margin of the preceding element, and the top margin can thus be ignored.

Again, thank you very much for your report and the sample code, that was very helpful.