fix: tree layout quirks

Signed-off-by: Andres Correa Casablanca <castarco@coderspirit.xyz>

Author: castarco

src/layouts.ts

@@ -128,19 +128,20 @@ const _inPlaceEvenSpacingUpdate = (
 	const tm = tree.meta
 	const tmp = tm.pos
 	if (numChildren === 0) {
-		tmp.x += shift
+		tmp.x = M(offsets[depth] ?? 0, tmp.x + shift)
 		delete tm.m
 	} else if (numChildren === 1) {
 		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		tmp.x = _getPosX(tree[C]![0]!)
-		delete tm.m
+		const c = _getPosX(tree[C]![0]!)
+		tmp.x = M(offsets[depth] ?? 0, c + shift)
+		tm.m = tmp.x - c
 	} else {
 		const c = // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 			(_getPosX(tree[C]![0]!) +
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 				_getPosX(tree[C]![numChildren - 1]!)) *
 			0.5
-		tmp.x = M(offsets[depth] ?? 0, c)
+		tmp.x = M(offsets[depth] ?? 0, c + shift)
 		tm.m = tmp.x - c
 	}
 	tracer.mX = M(tracer.mX, tmp.x)
@@ -199,6 +200,13 @@ const _siblingsEvenSpacing = (
 		node.meta.pos.x += accShift
 		node.meta.m = (node.meta.m ?? 0) + accShift
 	}
+	if (numChildren > 0) {
+		offsets[depth + 1] = M(
+			offsets[depth + 1] ?? 0,
+			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+			tc![numChildren - 1]!.node.meta.pos.x + 1,
+		)
+	}
 
 	_inPlaceEvenSpacingUpdate(numChildren, tree, 0, offsets, depth, tracer)
 }

src/tests/BeautifulTree.test.tsx

@@ -13,6 +13,7 @@ import {
 	wideTree_Bm,
 	wideTree_C,
 	wideTree_D,
+	wideTree_E,
 } from '../stories/treeFixtures'
 import { describe, expect, it } from 'vitest'
 import { render } from '@testing-library/react'
@@ -183,4 +184,24 @@ describe('BeautifulTree : Smart Layout', () => {
 
 		expect(rendered).toMatchSnapshot()
 	})
+
+	it('renders wide tree E, with rect shape, node content display, and dynamic css classes', () => {
+		const rendered = render(
+			<BeautifulTree
+				id="smart-wide-e-tree"
+				svgProps={{
+					width: 400,
+					height: 400,
+				}}
+				tree={wideTree_E}
+				computeLayout={computeSmartLayout}
+				nodeShape="rect"
+				getNodeContent={(data): string => data?.['v']?.toString() ?? ''}
+				getNodeClass={getCssFromNodeData}
+				getEdgeClass={getCssFromEdgeData}
+			/>,
+		)
+
+		expect(rendered).toMatchSnapshot()
+	})
 })