From 5f312b9ff7ebdce21366611f02db42aa7c26ef62 Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Wed, 3 Aug 2022 22:43:42 +0200
Subject: [PATCH] Add text to container

---
 src/Components/SVG/Elements/Container.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/Components/SVG/Elements/Container.tsx b/src/Components/SVG/Elements/Container.tsx
index 907b4af..d5671e2 100644
--- a/src/Components/SVG/Elements/Container.tsx
+++ b/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>
     );