feat: nodes drawing for naive layout (#10)

Author: castarco

.github/workflows/tests.yml

@@ -41,4 +41,4 @@ jobs:
     - name: Build Library
       run: pnpm build
     - name: Run Tests
-      run: pnpm test
+      run: pnpm test:coverage

.hooks/pre-push

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

src/BeautifulTree.tsx

@@ -1,4 +1,6 @@
-import type { Tree } from './core'
+import type { Tree } from './types'
+import { computeLeftShiftLayout } from './layouts'
+import { postOrderIterator } from './traversal'
 
 export interface BeautifulTreeProps {
 	readonly id: string
@@ -12,12 +14,45 @@ export interface BeautifulTreeProps {
 export function BeautifulTree(
 	props: Readonly<BeautifulTreeProps>,
 ): JSX.Element {
+	const treeWithLayout = computeLeftShiftLayout(props.tree)
+	const orderedNodes = [...postOrderIterator(treeWithLayout)]
+
+	let maxX = 0
+	let maxY = 0
+	for (const node of orderedNodes) {
+		if (node.meta.abstractPosition.x > maxX) {
+			maxX = node.meta.abstractPosition.x
+		}
+		if (node.meta.abstractPosition.y > maxY) {
+			maxY = node.meta.abstractPosition.y
+		}
+	}
+
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
 			id={props.id}
 			viewBox={`0 0 ${props.svgProps.width} ${props.svgProps.height}`}
+			style={{
+				width: `${props.svgProps.width}px`,
+				height: `${props.svgProps.height}px`,
+			}}
 			className={'beautiful-tree-react'}
-		></svg>
+		>
+			{orderedNodes.map((node, idx) => {
+				const aX = node.meta.abstractPosition.x
+				const aY = node.meta.abstractPosition.y
+				return (
+					<circle
+						key={`${props.id}-node-${idx}`}
+						cx={((aX + 1) * props.svgProps.width) / (maxX + 2)}
+						cy={((aY + 1) * props.svgProps.height) / (maxY + 2)}
+						stroke="blue"
+						fill="purple"
+						r="5"
+					/>
+				)
+			})}
+		</svg>
 	)
 }

src/core.ts

@@ -0,0 +1,33 @@
+import type { Tree, TreeChild, TreeWithLayout } from './types'
+
+const _computeLeftShiftLayout = (
+	tree: Tree,
+	depth = 0,
+	// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+	counters?: number[][],
+): TreeWithLayout => {
+	counters ??= []
+
+	if (counters[depth] === undefined) {
+		counters[depth] = []
+	}
+	const x = (counters[depth]?.at(-1) ?? -1) + 1
+	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+	counters[depth]!.push(x)
+
+	return {
+		data: tree.data,
+		children: tree.children?.map((child: Readonly<TreeChild>) => ({
+			edgeData: child.edgeData,
+			node: _computeLeftShiftLayout(child.node, depth + 1, counters),
+		})),
+		meta: {
+			isRoot: depth === 0,
+			isLeaf: tree.children === undefined || tree.children.length === 0,
+			abstractPosition: { x, y: depth },
+		},
+	} satisfies TreeWithLayout
+}
+
+export const computeLeftShiftLayout: (tree: Tree) => TreeWithLayout =
+	_computeLeftShiftLayout

src/layouts.ts

@@ -18,16 +18,47 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Empty: Story = {
+const testTree = {
+	data: { v: 42 },
+	children: [
+		{
+			edgeData: {},
+			node: {
+				data: { v: 43 },
+				children: [
+					{
+						edgeData: {},
+						node: { data: { v: 45 } },
+					},
+				],
+			},
+		},
+		{
+			edgeData: {},
+			node: {
+				data: { v: 44 },
+				children: [
+					{
+						edgeData: {},
+						node: { data: { v: 46 } },
+					},
+					{
+						edgeData: {},
+						node: { data: { v: 47 } },
+					},
+				],
+			},
+		},
+	],
+}
+
+export const SimpleTree: Story = {
 	args: {
-		id: 'empty-beautiful-tree',
+		id: 'simple-beautiful-tree',
 		svgProps: {
 			width: 100,
 			height: 100,
 		},
-		tree: {
-			data: {},
-			children: [],
-		},
+		tree: testTree,
 	},
 }