fix: arithmetic operations on undefined

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

Author: castarco

src/BeautifulTree.tsx

@@ -1,4 +1,5 @@
 import { edgesIterator, postOrderIterator } from './traversal'
+import { Fragment } from 'react'
 import type { Tree } from './types'
 import type { WrappedTreeWithLayout } from './layouts'
 export { computeNaiveLayout, computeSmartLayout } from './layouts'
@@ -107,10 +108,10 @@ export function BeautifulTree({
 				}${runClassesGetter(getNodeClass, node.data)}`
 
 				return (
-					<>
+					<Fragment key={`${id}-node-w-${idx}`}>
 						{_nodeShape === 'rect' ? (
 							<rect
-								key={`${id}-node-${idx}`}
+								key={`${id}-node-r-${idx}`}
 								className={`beautiful-tree-node${
 									nm.isRoot ? ' beautiful-tree-root' : ''
 								}${nm.isLeaf ? ' beautiful-tree-leaf' : ''}${runClassesGetter(
@@ -124,7 +125,7 @@ export function BeautifulTree({
 							/>
 						) : (
 							<circle
-								key={`${id}-node-${idx}`}
+								key={`${id}-node-c-${idx}`}
 								className={`beautiful-tree-node${_nodeClass}`}
 								cx={(nm.pos.x + 1) * xCoef}
 								cy={(nm.pos.y + 1) * yCoef}
@@ -133,18 +134,21 @@ export function BeautifulTree({
 						)}
 						{getNodeContent ? (
 							<foreignObject
-								key={`${id}-node-content-${idx}`}
+								key={`${id}-node-fo-${idx}`}
 								x={(nm.pos.x + 1) * xCoef - widthCenterShift}
 								y={(nm.pos.y + 1) * yCoef - heightCenterShift}
 								width={maxNodeWidth}
 								height={maxNodeHeight}
 							>
-								<div className={`beautiful-tree-node-content${_nodeClass}`}>
+								<div
+									key={`${id}-node-div-${idx}`}
+									className={`beautiful-tree-node-content${_nodeClass}`}
+								>
 									{getNodeContent(node.data)}
 								</div>
 							</foreignObject>
 						) : undefined}
-					</>
+					</Fragment>
 				)
 			})}
 		</svg>

src/layouts.ts

@@ -57,11 +57,11 @@ const _addMods = (
 ): void => {
 	meta.pos.x += modsum
 	tracer.mX = M(tracer.mX, meta.pos.x)
-	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-	modsum += meta.m! // We know it's defined because we control when it's called
+	modsum += meta.m ?? 0
 	for (const child of children ?? []) {
 		_addMods(child.node, modsum, tracer)
 	}
+	delete meta.m
 }
 
 const _getPosX = (v: { readonly node: Readonly<TreeWithLayout> }): number => {
@@ -129,18 +129,20 @@ const _inPlaceEvenSpacingUpdate = (
 	const tmp = tm.pos
 	if (numChildren === 0) {
 		tmp.x += shift
+		delete tm.m
 	} else if (numChildren === 1) {
 		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 		tmp.x = _getPosX(tree[C]![0]!)
+		delete tm.m
 	} else {
 		const c = // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 			(_getPosX(tree[C]![0]!) +
 				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 				_getPosX(tree[C]![numChildren - 1]!)) *
 			0.5
 		tmp.x = M(offsets[depth] ?? 0, c)
+		tm.m = tmp.x - c
 	}
-	delete tm.m
 	tracer.mX = M(tracer.mX, tmp.x)
 	offsets[depth] = 1 + tmp.x
 }
@@ -251,7 +253,10 @@ export const computeSmartLayout = (
 	_addMods(t, 0, tracer)
 
 	_cousinsEvenSpacing(t, [], tracer)
+	_addMods(t, 0, tracer)
+
 	_siblingsEvenSpacing(t, [], tracer)
+	_addMods(t, 0, tracer)
 
 	return {
 		tree: t,

src/stories/BeautifulTree.stories.ts

@@ -288,6 +288,34 @@ const wideTree_D: Tree = {
 	],
 }
 
+const wideTree_E: Tree = {
+	children: [
+		{
+			node: {
+				children: [
+					{ node: {} },
+					{
+						node: {
+							children: [
+								{ node: {} },
+								{ node: { children: [{ node: {} }, { node: {} }] } },
+								{
+									node: {
+										children: [{ node: {} }, { node: {} }, { node: {} }],
+									},
+								},
+							],
+						},
+					},
+					{ node: {} },
+				],
+			},
+		},
+		{ node: { children: [{ node: {} }] } },
+		{ node: {} },
+	],
+}
+
 const getCssFromNodeData = (
 	data?: Readonly<Record<string, unknown>>,
 ): string[] => {
@@ -423,6 +451,20 @@ export const Centered3_Wide_Tree_D: Story = {
 	},
 }
 
+export const Centered3_Wide_Tree_E: Story = {
+	args: {
+		id: 'centered3-wide-tree-e',
+		svgProps: {
+			width: 400,
+			height: 400,
+		},
+		tree: wideTree_E,
+		computeLayout: computeSmartLayout,
+		getNodeClass: getCssFromNodeData,
+		getEdgeClass: getCssFromEdgeData,
+	},
+}
+
 const buildRandomTree = (maxDepth = 4): Readonly<Tree> => {
 	const numChildren = maxDepth > 0 ? Math.floor(Math.random() * 4) : 0
 	const tree: Tree = {