Add text to container

src/Components/SVG/Elements/Container.tsx

@@ -57,12 +57,17 @@ export class Container extends React.Component<IContainerProps> {
 
   public render(): React.ReactNode {
     const containersElements = this.props.children.map(child => child.render());
+    const xText = (this.props.properties.x * 2 + Number(this.props.properties.width)) / 2;
+    const yText = (this.props.properties.y * 2 + Number(this.props.properties.height)) / 2;
+
+    // g style
     const defaultStyle = {
       transitionProperty: 'all',
       transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
       transitionDuration: '150ms'
     } as React.CSSProperties;
 
+    // Rect style
     const style = Object.assign(
       JSON.parse(JSON.stringify(defaultStyle)),
       this.props.properties
@@ -72,6 +77,7 @@ export class Container extends React.Component<IContainerProps> {
     delete style.height;
     delete style.width;
 
+    // Dimension props
     const id = `dim-${this.props.properties.id}`;
     const xStart: number = 0;
     const xEnd = Number(this.props.properties.width);
@@ -99,6 +105,12 @@ export class Container extends React.Component<IContainerProps> {
           style={style}
         >
         </rect>
+        <text
+          x={xText}
+          y={yText}
+        >
+          {this.props.properties.id}
+        </text>
         { containersElements }
       </g>
     );