feat: naive layout computation

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

Author: castarco

.github/workflows/tests.yml

@@ -39,4 +39,5 @@ jobs:
       run: pnpm lint
     - name: Build Library
       run: pnpm build
-    # - run: pnpm test
+    - name: Run Tests
+      run: pnpm test

.gitignore

@@ -1,6 +1,8 @@
 # Caches & Artifacts
+coverage/
 dist/
 node_modules/
+storybook-static/
 
 # Lockfiles
 pnpm-lock.yaml

.hooks/pre-push

@@ -5,3 +5,4 @@ set -o pipefail
 
 pnpm run lint
 pnpm publint
+pnpm test

.prettierrc.mjs

@@ -1,11 +1,11 @@
 const config = {
-  semi: false,
-  singleQuote: true,
-  parser: 'typescript',
-  trailingComma: 'all',
-		options: {
-			editorconfig: true
-		},
+	semi: false,
+	singleQuote: true,
+	parser: 'typescript',
+	trailingComma: 'all',
+	options: {
+		editorconfig: true
+	},
 }
 
 export default config

src/BeautifulTree.tsx

@@ -1,10 +1,4 @@
-export type Tree = {
-	data: Record<string, unknown>,
-	children: {
-		edgeData: Record<string, unknown>,
-		node: Tree
-	}[]
-}
+import type { Tree } from './core'
 
 export interface BeautifulTreeProps {
 	id: string,

src/core.ts

@@ -0,0 +1,45 @@
+export type TreeChild<T extends Tree = Tree> = {
+	node: T,
+	edgeData: Record<string, unknown>,
+}
+
+export type Node = {
+	data: Record<string, unknown>,
+}
+
+export type Tree = Node & {
+	children?: TreeChild[]
+}
+
+export type TreeWithLayout = Node & {
+	children?: Required<TreeChild<TreeWithLayout>>[]
+	layout: {
+		plan: { x: number, y: number },
+	}
+}
+
+type InternalTreeLayout = number[][]
+
+const _computeLeftShiftLayout = (tree: Tree, depth: number = 0, layout?: InternalTreeLayout): TreeWithLayout => {
+	layout ??= []
+
+	if (layout[depth] === undefined) {
+		layout[depth] = []
+	}
+	const x = (layout[depth]?.at(-1) ?? -1) + 1
+	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+	layout[depth]!.push(x)
+
+	const treeWithLayout = {
+		data: tree.data,
+		children: tree.children?.map(child => ({
+			edgeData: child.edgeData,
+			node: _computeLeftShiftLayout(child.node, depth + 1, layout),
+		})) ?? [],
+		layout: { plan: { x, y: depth } },
+	} satisfies TreeWithLayout
+
+	return treeWithLayout
+}
+
+export const computeLeftShiftLayout: ((tree: Tree) => TreeWithLayout) = _computeLeftShiftLayout

src/tests/core.test.ts

@@ -0,0 +1,50 @@
+import { describe, it, expect } from 'vitest'
+import { computeLeftShiftLayout } from '../core'
+
+describe('computeLeftShiftLayout', () => {
+	it('sets x=0,y=0 for a single-node tree, and data is preserved', () => {
+		const resultWithoutChildren = computeLeftShiftLayout({
+			data: { v: 42 },
+		})
+		expect(resultWithoutChildren).toMatchObject({
+			data: { v: 42 },
+			layout: { plan: { x: 0, y: 0 } },
+		})
+
+		const resultWithEmptyChildren = computeLeftShiftLayout({
+			data: { v: 42 },
+			children: [],
+		})
+		expect(resultWithEmptyChildren).toMatchObject({
+			data: { v: 42 },
+			children: [],
+			layout: { plan: { x: 0, y: 0 } },
+		})
+	})
+
+	it('sets x=0,y=0 & x=0,y=1 for tree with single child', () => {
+		const result = computeLeftShiftLayout({
+			data: { v: 42 },
+			children: [
+				{
+					edgeData: {},
+					node: { data: { v: 43 } },
+				}
+			],
+		})
+
+		expect(result).toMatchObject({
+			data: { v: 42 },
+			children: [
+				{
+					edgeData: {},
+					node: {
+						data: { v: 43 },
+						layout: { plan: { x: 0, y: 1 } },
+					},
+				}
+			],
+			layout: { plan: { x: 0, y: 0 } },
+		})
+	})
+})