fix: use post-order for siblings even spacing

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

Author: castarco

src/layouts.ts

@@ -155,11 +155,15 @@ const _siblingsEvenSpacing = (
 	// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
 	tracer: { mX: number },
 	depth = 0,
-	shift = 0,
 	// eslint-disable-next-line sonarjs/cognitive-complexity
 ): void => {
 	const tc = tree[C]
 	const numChildren = tc?.length ?? 0
+
+	for (const { node } of tc ?? []) {
+		_siblingsEvenSpacing(node, offsets, tracer, depth + 1)
+	}
+
 	let lastFixedIdx: number | undefined
 	let maxSpacing = 1
 	for (const [idx, { node }] of (tc ?? []).entries()) {
@@ -177,32 +181,26 @@ const _siblingsEvenSpacing = (
 		}
 	}
 
-	let accShift = shift
+	let accShift = 0
 	for (const [idx, { node }] of (tc ?? []).entries()) {
 		if (idx === 0) {
 			if (numChildren > 1) {
 				accShift = M(
 					0,
-					shift +
-						// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-						_getPosX(tc![1]!) -
-						maxSpacing -
-						node.meta.pos.x,
+					// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+					_getPosX(tc![1]!) - maxSpacing - node.meta.pos.x,
 				)
 			}
 		} else {
-			accShift =
-				shift +
-				M(
-					0,
-					// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-					_getPosX(tc![idx - 1]!) + maxSpacing - node.meta.pos.x,
-				)
+			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+			accShift = _getPosX(tc![idx - 1]!) + maxSpacing - node.meta.pos.x
 		}
-		_siblingsEvenSpacing(node, offsets, tracer, depth + 1, accShift)
+
+		node.meta.pos.x += accShift
+		node.meta.m = (node.meta.m ?? 0) + accShift
 	}
 
-	_inPlaceEvenSpacingUpdate(numChildren, tree, shift, offsets, depth, tracer)
+	_inPlaceEvenSpacingUpdate(numChildren, tree, 0, offsets, depth, tracer)
 }
 
 const _cousinsEvenSpacing = (

src/stories/BeautifulTree.stories.ts

@@ -39,8 +39,8 @@ export const LeftShifted_Tree: Story = {
 	args: {
 		id: 'leftshifted-small-tree',
 		svgProps: {
-			width: 100,
-			height: 100,
+			width: 400,
+			height: 400,
 		},
 		tree: smallTree,
 		computeLayout: computeNaiveLayout,
@@ -51,8 +51,8 @@ export const LeftShifted_Big_Tree: Story = {
 	args: {
 		id: 'leftshifted-big-tree',
 		svgProps: {
-			width: 100,
-			height: 100,
+			width: 400,
+			height: 400,
 		},
 		tree: bigTree,
 		computeLayout: computeNaiveLayout,
@@ -63,8 +63,8 @@ export const Centered3_Tree: Story = {
 	args: {
 		id: 'centered3-small-tree',
 		svgProps: {
-			width: 100,
-			height: 100,
+			width: 400,
+			height: 400,
 		},
 		tree: smallTree,
 		computeLayout: computeSmartLayout,
@@ -77,8 +77,8 @@ export const Centered3_Big_Tree: Story = {
 	args: {
 		id: 'centered3-big-tree',
 		svgProps: {
-			width: 100,
-			height: 100,
+			width: 400,
+			height: 400,
 		},
 		tree: bigTree,
 		computeLayout: computeSmartLayout,
@@ -91,8 +91,8 @@ export const Centered3_Wide_Tree_A: Story = {
 	args: {
 		id: 'centered3-wide-tree-a',
 		svgProps: {
-			width: 100,
-			height: 100,
+			width: 400,
+			height: 400,
 		},
 		tree: wideTree_A,
 		computeLayout: computeSmartLayout,
@@ -106,8 +106,8 @@ export const Centered3_Wide_Tree_B: Story = {
 	args: {
 		id: 'centered3-wide-tree-b',
 		svgProps: {
-			width: 100,
-			height: 100,
+			width: 400,
+			height: 400,
 		},
 		tree: wideTree_B,
 		computeLayout: computeSmartLayout,
@@ -120,8 +120,8 @@ export const Centered3_Wide_Tree_Bm: Story = {
 	args: {
 		id: 'centered3-wide-tree-bm',
 		svgProps: {
-			width: 100,
-			height: 100,
+			width: 400,
+			height: 400,
 		},
 		tree: wideTree_Bm,
 		computeLayout: computeSmartLayout,
@@ -134,8 +134,8 @@ export const Centered3_Wide_Tree_C: Story = {
 	args: {
 		id: 'centered3-wide-tree-c',
 		svgProps: {
-			width: 100,
-			height: 100,
+			width: 400,
+			height: 400,
 		},
 		tree: wideTree_C,
 		computeLayout: computeSmartLayout,
@@ -148,8 +148,8 @@ export const Centered3_Wide_Tree_D: Story = {
 	args: {
 		id: 'centered3-wide-tree-d',
 		svgProps: {
-			width: 100,
-			height: 100,
+			width: 400,
+			height: 400,
 		},
 		tree: wideTree_D,
 		computeLayout: computeSmartLayout,