feat: allow using rect for nodes

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

Author: castarco

src/BeautifulTree.tsx

@@ -7,18 +7,25 @@ export type CssClassesGetter = (
 	data?: Readonly<Record<string, unknown>> | undefined,
 ) => string[]
 
+export type NodeShapeGetter = (
+	data?: Readonly<Record<string, unknown>> | undefined,
+) => { type: 'circle' | 'rect' }
+
 export interface BeautifulTreeProps {
 	readonly id: string
 	readonly svgProps: {
 		readonly width: number
 		readonly height: number
 		readonly sizeUnit?: '%' | 'em' | 'px' | 'rem'
 	}
+	readonly nodeShape?: 'circle' | 'rect'
+	readonly hCoef?: number
 	readonly tree: Tree
 	readonly computeLayout: (
 		tree: Readonly<Tree>,
 	) => Readonly<WrappedTreeWithLayout>
 	readonly getNodeClass?: CssClassesGetter | undefined
+	readonly getNodeShape?: NodeShapeGetter | undefined
 	readonly getEdgeClass?: CssClassesGetter | undefined
 }
 
@@ -33,19 +40,24 @@ function runClassesGetter(
 export function BeautifulTree({
 	id,
 	svgProps,
+	nodeShape,
+	hCoef = 1,
 	tree,
 	computeLayout,
-	getNodeClass: nodeClassesInferrer,
-	getEdgeClass: edgeClassesInferrer,
+	getNodeClass,
+	getNodeShape,
+	getEdgeClass,
 }: Readonly<BeautifulTreeProps>): JSX.Element {
 	const { tree: treeWithLayout, mX, mY } = computeLayout(tree)
 	const { width, height, sizeUnit = 'px' } = svgProps
 
 	const xCoef = width / (mX + 2)
 	const yCoef = height / (mY + 2)
-	const maxNodeWidth = xCoef * 0.25
-	const maxNodeHeight = yCoef * 0.25
-	const maxNodeRadius = Math.min(maxNodeWidth, maxNodeHeight)
+	const maxNodeWidth = xCoef * 0.5
+	const maxNodeHeight = Math.min(yCoef * 0.5, maxNodeWidth * hCoef)
+	const widthCenterShift = maxNodeWidth * 0.5
+	const heightCenterShift = maxNodeHeight * 0.5
+	const maxNodeRadius = maxNodeHeight * 0.5
 
 	return (
 		<svg
@@ -58,13 +70,15 @@ export function BeautifulTree({
 			}}
 			className={'beautiful-tree-react'}
 		>
-			<style>{'line{stroke:black;}circle{stroke:black;fill:white;}'}</style>
+			<style>
+				{'line{stroke:black;}circle,rect{stroke:black;fill:white;}'}
+			</style>
 			{Array.from(edgesIterator(treeWithLayout), (edge, idx) => {
 				return (
 					<line
 						key={`${id}-edge-${idx}`}
 						className={`beautiful-tree-edge${runClassesGetter(
-							edgeClassesInferrer,
+							getEdgeClass,
 							edge.eData,
 						)}`}
 						x1={(edge.start.x + 1) * xCoef}
@@ -76,13 +90,30 @@ export function BeautifulTree({
 			})}
 			{Array.from(postOrderIterator(treeWithLayout), (node, idx) => {
 				const nm = node.meta
-				return (
+
+				const _nodeShape = getNodeShape?.(node.data) ?? nodeShape ?? 'circle'
+
+				return _nodeShape === 'rect' ? (
+					<rect
+						key={`${id}-node-${idx}`}
+						className={`beautiful-tree-node${
+							nm.isRoot ? ' beautiful-tree-root' : ''
+						}${nm.isLeaf ? ' beautiful-tree-leaf' : ''}${runClassesGetter(
+							getNodeClass,
+							node.data,
+						)}`}
+						x={(nm.pos.x + 1) * xCoef - widthCenterShift}
+						y={(nm.pos.y + 1) * yCoef - heightCenterShift}
+						width={maxNodeWidth}
+						height={maxNodeHeight}
+					/>
+				) : (
 					<circle
 						key={`${id}-node-${idx}`}
 						className={`beautiful-tree-node${
 							nm.isRoot ? ' beautiful-tree-root' : ''
 						}${nm.isLeaf ? ' beautiful-tree-leaf' : ''}${runClassesGetter(
-							nodeClassesInferrer,
+							getNodeClass,
 							node.data,
 						)}`}
 						cx={(nm.pos.x + 1) * xCoef}