feat: allow controlling component size units

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

Author: castarco

src/BeautifulTree.tsx

@@ -7,35 +7,29 @@ export interface BeautifulTreeProps {
 	readonly svgProps: {
 		readonly width: number
 		readonly height: number
+		readonly sizeUnit?: '%' | 'em' | 'px' | 'rem'
 	}
 	readonly tree: Tree
 }
 
-export function BeautifulTree(
-	props: Readonly<BeautifulTreeProps>,
-): JSX.Element {
-	const treeWithLayout = computeLeftShiftLayout(props.tree)
+export function BeautifulTree({
+	id,
+	svgProps,
+	tree,
+}: Readonly<BeautifulTreeProps>): JSX.Element {
+	const { tree: treeWithLayout, maxX, maxY } = computeLeftShiftLayout(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
-		}
-	}
+	const { width, height, sizeUnit = 'px' } = svgProps
 
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
-			id={props.id}
-			viewBox={`0 0 ${props.svgProps.width} ${props.svgProps.height}`}
+			id={id}
+			viewBox={`0 0 ${width} ${height}`}
 			style={{
-				width: `${props.svgProps.width}px`,
-				height: `${props.svgProps.height}px`,
+				width: `${width}${sizeUnit}`,
+				height: `${height}${sizeUnit}`,
 			}}
 			className={'beautiful-tree-react'}
 		>
@@ -44,11 +38,12 @@ export function BeautifulTree(
 				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"
+						key={`${id}-node-${idx}`}
+						className={'beautiful-tree-node'}
+						cx={((aX + 1) * width) / (maxX + 2)}
+						cy={((aY + 1) * height) / (maxY + 2)}
+						stroke="black"
+						fill="white"
 						r="5"
 					/>
 				)

src/layouts.ts

@@ -1,19 +1,26 @@
 import type { Tree, TreeChild, TreeWithLayout } from './types'
 
+export interface WrappedTreeWithLayout {
+	readonly tree: Readonly<TreeWithLayout>
+	readonly maxX: number
+	readonly maxY: number
+}
+
 const _computeLeftShiftLayout = (
 	tree: Tree,
 	depth = 0,
 	// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
-	counters?: number[][],
-): TreeWithLayout => {
-	counters ??= []
+	counters: { layers: number[][]; maxX: number },
+): Readonly<TreeWithLayout> => {
+	const layers = counters.layers
 
-	if (counters[depth] === undefined) {
-		counters[depth] = []
+	if (layers[depth] === undefined) {
+		layers[depth] = []
 	}
-	const x = (counters[depth]?.at(-1) ?? -1) + 1
+	const x = (layers[depth]?.at(-1) ?? -1) + 1
 	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-	counters[depth]!.push(x)
+	layers[depth]!.push(x)
+	counters.maxX = Math.max(counters.maxX, x)
 
 	return {
 		data: tree.data,
@@ -26,8 +33,16 @@ const _computeLeftShiftLayout = (
 			isLeaf: tree.children === undefined || tree.children.length === 0,
 			abstractPosition: { x, y: depth },
 		},
-	} satisfies TreeWithLayout
+	} satisfies Readonly<TreeWithLayout>
 }
 
-export const computeLeftShiftLayout: (tree: Tree) => TreeWithLayout =
-	_computeLeftShiftLayout
+export const computeLeftShiftLayout = (
+	tree: Readonly<Tree>,
+): Readonly<WrappedTreeWithLayout> => {
+	const counters = { layers: [], maxX: 0 }
+	return {
+		tree: _computeLeftShiftLayout(tree, 0, counters),
+		maxX: counters.maxX,
+		maxY: counters.layers.length - 1,
+	}
+}