feat: naive nodes drawing

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

Author: castarco

.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 './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/stories/BeautifulTree.stories.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,
 	},
 }