feat: new centered layout

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

Author: castarco

src/BeautifulTree.tsx

@@ -1,7 +1,7 @@
 import { edgesIterator, postOrderIterator } from './traversal'
 import type { Tree } from './types'
 import type { WrappedTreeWithLayout } from './layouts'
-import { computeLeftShiftLayout } from './layouts'
+export { computeLeftShiftLayout, computeCenter1Layout } from './layouts'
 
 export interface BeautifulTreeProps {
 	readonly id: string
@@ -11,7 +11,7 @@ export interface BeautifulTreeProps {
 		readonly sizeUnit?: '%' | 'em' | 'px' | 'rem'
 	}
 	readonly tree: Tree
-	readonly computeLayout?: (
+	readonly computeLayout: (
 		tree: Readonly<Tree>,
 	) => Readonly<WrappedTreeWithLayout>
 }
@@ -20,7 +20,7 @@ export function BeautifulTree({
 	id,
 	svgProps,
 	tree,
-	computeLayout = computeLeftShiftLayout,
+	computeLayout,
 }: Readonly<BeautifulTreeProps>): JSX.Element {
 	const { tree: treeWithLayout, maxX, maxY } = computeLayout(tree)
 	const { width, height, sizeUnit = 'px' } = svgProps
@@ -60,8 +60,8 @@ export function BeautifulTree({
 				)
 			})}
 			{[...postOrderIterator(treeWithLayout)].map((node, idx) => {
-				const aX = node.meta.abstractPosition.x
-				const aY = node.meta.abstractPosition.y
+				const aX = node.meta.pos.x
+				const aY = node.meta.pos.y
 				return (
 					<circle
 						key={`${id}-node-${idx}`}

src/layouts.ts

@@ -27,7 +27,7 @@ const _computeLeftShiftLayout = (
 		meta: {
 			isRoot: depth === 0,
 			isLeaf: tree.children === undefined || tree.children.length === 0,
-			abstractPosition: { x, y: depth },
+			pos: { x, y: depth },
 		},
 	} satisfies Readonly<TreeWithLayout>
 }
@@ -42,3 +42,95 @@ export const computeLeftShiftLayout = (
 		maxY: counters.layers.length - 1,
 	}
 }
+
+type DeepWriteable<T> = { -readonly [P in keyof T]: DeepWriteable<T[P]> }
+
+const _addMods = (
+	// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+	tree: DeepWriteable<TreeWithLayout>,
+	modsum = 0,
+	// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+	tracer: { maxX: number },
+): void => {
+	tree.meta.pos.x += modsum
+	tracer.maxX = Math.max(tracer.maxX, tree.meta.pos.x)
+	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+	modsum += tree.meta.m! // We know it's defined because we control when it's called
+	for (const child of tree.children ?? []) {
+		_addMods(child.node, modsum, tracer)
+	}
+}
+
+const _computeCenter1Layout = (
+	tree: Tree,
+	depth = 0,
+	// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+	offsets: number[],
+	// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+	nexts: number[],
+): DeepWriteable<TreeWithLayout> => {
+	const children = tree.children?.map((child) => ({
+		edgeData: child.edgeData,
+		node: _computeCenter1Layout(child.node, depth + 1, offsets, nexts),
+	}))
+
+	let place: number
+	let x: number
+
+	const numChildren = tree.children?.length ?? 0
+	if (numChildren === 0) {
+		place = nexts[depth] ?? 0
+		x = place
+	} else if (numChildren === 1) {
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		place = children![0]!.node.meta.pos.x
+	} else {
+		place =
+			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+			(children![0]!.node.meta.pos.x +
+				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+				children![numChildren - 1]!.node.meta.pos.x) *
+			0.5
+	}
+
+	offsets[depth] = Math.max(offsets[depth] ?? 0, nexts[depth] ?? 0 - place)
+	if (numChildren > 0) {
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		x = place + offsets[depth]!
+	}
+	nexts[depth] = (nexts[depth] ?? 0) + 1
+
+	return {
+		data: tree.data,
+		children,
+		meta: {
+			isRoot: depth === 0,
+			isLeaf: tree.children === undefined || tree.children.length === 0,
+			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+			pos: { x: x!, y: depth },
+			m: offsets[depth],
+		},
+	} satisfies Readonly<TreeWithLayout> as DeepWriteable<TreeWithLayout>
+}
+
+export const computeCenter1Layout = (
+	tree: Readonly<Tree>,
+): Readonly<WrappedTreeWithLayout> => {
+	const nexts: number[] = []
+	const t = _computeCenter1Layout(tree, 0, [], nexts)
+
+	console.log('without mods')
+	console.log(t)
+
+	const tracer = { maxX: 0 }
+	_addMods(t, 0, tracer)
+
+	console.log('with mods')
+	console.log(t)
+
+	return {
+		tree: t,
+		maxY: nexts.length - 1,
+		maxX: tracer.maxX,
+	}
+}

src/stories/BeautifulTree.stories.ts

@@ -1,5 +1,9 @@
+import {
+	BeautifulTree,
+	computeCenter1Layout,
+	computeLeftShiftLayout,
+} from '../BeautifulTree'
 import type { Meta, StoryObj } from '@storybook/react'
-import { BeautifulTree } from '../BeautifulTree'
 
 const meta = {
 	title: 'BeautifulTree',
@@ -18,21 +22,54 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-const testTree = {
+const smallTree = {
 	data: { v: 42 },
 	children: [
 		{
-			edgeData: {},
 			node: {
 				data: { v: 43 },
 				children: [
 					{
-						edgeData: {},
 						node: { data: { v: 45 } },
 					},
 				],
 			},
 		},
+		{
+			node: {
+				data: { v: 44 },
+				children: [
+					{
+						node: { data: { v: 46 } },
+					},
+					{
+						node: { data: { v: 47 } },
+					},
+				],
+			},
+		},
+	],
+}
+
+const bigTree = {
+	data: { v: 42 },
+	children: [
+		{
+			node: {
+				data: { v: 43 },
+				children: [
+					{
+						node: {
+							data: { v: 45 },
+							children: [
+								{ node: { data: { v: 48 } } },
+								{ node: { data: { v: 49 } } },
+							],
+						},
+					},
+				],
+			},
+		},
 		{
 			edgeData: {},
 			node: {
@@ -44,21 +81,64 @@ const testTree = {
 					},
 					{
 						edgeData: {},
-						node: { data: { v: 47 } },
+						node: {
+							data: { v: 47 },
+							children: [
+								{ node: { data: { v: 50 } } },
+								{ node: { data: { v: 51 } } },
+							],
+						},
 					},
 				],
 			},
 		},
 	],
 }
 
-export const SimpleTree: Story = {
+export const LeftShifted_Tree: Story = {
+	args: {
+		id: 'leftshifted-beautiful-tree',
+		svgProps: {
+			width: 100,
+			height: 100,
+		},
+		tree: smallTree,
+		computeLayout: computeLeftShiftLayout,
+	},
+}
+
+export const LeftShifted_Big_Tree: Story = {
+	args: {
+		id: 'leftshifted-beautiful-tree',
+		svgProps: {
+			width: 100,
+			height: 100,
+		},
+		tree: bigTree,
+		computeLayout: computeLeftShiftLayout,
+	},
+}
+
+export const Centered1_Tree: Story = {
+	args: {
+		id: 'centered1-beautiful-tree',
+		svgProps: {
+			width: 100,
+			height: 100,
+		},
+		tree: smallTree,
+		computeLayout: computeCenter1Layout,
+	},
+}
+
+export const Centered1_Big_Tree: Story = {
 	args: {
-		id: 'simple-beautiful-tree',
+		id: 'centered1-beautiful-tree',
 		svgProps: {
 			width: 100,
 			height: 100,
 		},
-		tree: testTree,
+		tree: bigTree,
+		computeLayout: computeCenter1Layout,
 	},
 }

src/tests/traversal.test.ts

@@ -68,15 +68,15 @@ describe('edgesIterator', () => {
 								meta: {
 									isRoot: false,
 									isLeaf: true,
-									abstractPosition: { x: 0, y: 2 },
+									pos: { x: 0, y: 2 },
 								},
 							},
 						},
 					],
 					meta: {
 						isRoot: false,
 						isLeaf: false,
-						abstractPosition: { x: 0, y: 1 },
+						pos: { x: 0, y: 1 },
 					},
 				},
 			},
@@ -92,7 +92,7 @@ describe('edgesIterator', () => {
 								meta: {
 									isRoot: false,
 									isLeaf: true,
-									abstractPosition: { x: 1, y: 2 },
+									pos: { x: 1, y: 2 },
 								},
 							},
 						},
@@ -103,23 +103,23 @@ describe('edgesIterator', () => {
 								meta: {
 									isRoot: false,
 									isLeaf: true,
-									abstractPosition: { x: 2, y: 2 },
+									pos: { x: 2, y: 2 },
 								},
 							},
 						},
 					],
 					meta: {
 						isRoot: false,
 						isLeaf: false,
-						abstractPosition: { x: 1, y: 1 },
+						pos: { x: 1, y: 1 },
 					},
 				},
 			},
 		],
 		meta: {
 			isRoot: true,
 			isLeaf: false,
-			abstractPosition: { x: 0, y: 0 },
+			pos: { x: 0, y: 0 },
 		},
 	}
 

src/traversal.ts

@@ -20,8 +20,8 @@ export function* edgesIterator(
 ): Generator<Readonly<Edge>, void> {
 	for (const child of tree.children ?? []) {
 		yield {
-			start: tree.meta.abstractPosition,
-			end: child.node.meta.abstractPosition,
+			start: tree.meta.pos,
+			end: child.node.meta.pos,
 			edgeData: child.edgeData,
 		}
 		yield* edgesIterator(child.node)

src/types.ts

@@ -18,10 +18,11 @@ export type TreeWithLayout = Node & {
 	readonly meta: {
 		readonly isRoot: boolean
 		readonly isLeaf: boolean
-		readonly abstractPosition: {
+		readonly pos: {
 			readonly x: number
 			readonly y: number
 		}
+		readonly m?: number | undefined
 	}
 }