src/Components/SVG/Elements/Container.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { XPositionReference } from '../../../Enums/XPositionReference';
 import { IContainerModel } from '../../../Interfaces/IContainerModel';
+import { DIMENSION_MARGIN } from '../../../utils/default';
 import { getDepth } from '../../../utils/itertools';
 import { Dimension } from './Dimension';
 
@@ -8,8 +9,6 @@ interface IContainerProps {
   model: IContainerModel
 }
 
-const GAP = 50;
-
 /**
  * Render the container
  * @returns Render the container
@@ -45,13 +44,35 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
   delete style.width;
 
   // Dimension props
+  const depth = getDepth(props.model);
+  const dimensionMargin = DIMENSION_MARGIN * (depth + 1);
   const id = `dim-${props.model.properties.id}`;
   const xStart: number = 0;
   const xEnd = Number(props.model.properties.width);
-  const y = -(GAP * (getDepth(props.model) + 1));
+  const y = -dimensionMargin;
   const strokeWidth = 1;
   const text = (props.model.properties.width ?? 0).toString();
 
+  let dimensionChildren: JSX.Element | null = null;
+  if (props.model.children.length > 0) {
+    const {
+      childrenId,
+      xChildrenStart,
+      xChildrenEnd,
+      yChildren,
+      textChildren
+    } = GetChildrenDimensionProps(props, dimensionMargin);
+    dimensionChildren = <Dimension
+      id={childrenId}
+      xStart={xChildrenStart}
+      xEnd={xChildrenEnd}
+      yStart={yChildren}
+      yEnd={yChildren}
+      strokeWidth={strokeWidth}
+      text={textChildren}
+    />;
+  }
+
   return (
     <g
       style={defaultStyle}
@@ -67,6 +88,7 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
         strokeWidth={strokeWidth}
         text={text}
       />
+      { dimensionChildren }
       <rect
         width={props.model.properties.width}
         height={props.model.properties.height}
@@ -84,6 +106,30 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
   );
 };
 
+function GetChildrenDimensionProps(props: IContainerProps, dimensionMargin: number):
+{ childrenId: string, xChildrenStart: number, xChildrenEnd: number, yChildren: number, textChildren: string } {
+  const childrenId = `dim-children-${props.model.properties.id}`;
+
+  const lastChild = props.model.children[props.model.children.length - 1];
+  let xChildrenStart = lastChild.properties.x;
+  let xChildrenEnd = lastChild.properties.x + Number(lastChild.properties.width);
+  for (let i = props.model.children.length - 2; i >= 0; i--) {
+    const child = props.model.children[i];
+    const left = child.properties.x;
+    if (left < xChildrenStart) {
+      xChildrenStart = left;
+    }
+    const right = child.properties.x + Number(child.properties.width);
+    if (right > xChildrenEnd) {
+      xChildrenEnd = right;
+    }
+  }
+
+  const yChildren = Number(props.model.properties.height) + dimensionMargin;
+  const textChildren = (xChildrenEnd - xChildrenStart).toString();
+  return { childrenId, xChildrenStart, xChildrenEnd, yChildren, textChildren };
+}
+
 function transformPosition(x: number, y: number, width: number, xPositionReference = XPositionReference.Left): [number, number] {
   let transformedX = x;
   if (xPositionReference === XPositionReference.Center) {

src/utils/default.ts

@@ -38,6 +38,7 @@ export const DEFAULT_MAINCONTAINER_PROPS: IProperties = {
   stroke: 'black'
 };
 
+export const DIMENSION_MARGIN = 50;
 export const NOTCHES_LENGTH = 4;
 
 export const MAX_HISTORY = 200;