Change menu buttons

src/App.scss

@@ -4,4 +4,16 @@ body,
 svg {
   height: 100%;
   width: 100%;
+}
+
+text {
+  font-size: 18px;
+  font-weight: 800;
+  fill: none;
+  fill-opacity: 0;
+  stroke: #000000;
+  stroke-width: 1px;
+  stroke-linecap: butt;
+  stroke-linejoin: miter;
+  stroke-opacity: 1;
 }

src/App.tsx

@@ -218,7 +218,7 @@ class App extends React.Component<IAppProps> {
           onClick={() => this.ToggleSidebar()}
           buttonOnClick={(type: string) => this.AddContainer(type)}
         />
-        <button className='fixed z-10 top-4 left-4 text-lg bg-blue-200 hover:bg-blue-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSidebar()}>&#9776; Menu</button>
+        <button className='fixed z-10 top-4 left-4 text-lg bg-blue-200 hover:bg-blue-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSidebar()}>&#9776; Components</button>
         <ElementsSidebar
           MainContainer={this.state.MainContainer}
           SelectedContainer={this.state.SelectedContainer}
@@ -227,7 +227,7 @@ class App extends React.Component<IAppProps> {
           onPropertyChange={(key: string, value: string) => this.OnPropertyChange(key, value)}
           selectContainer={(container: Container) => this.SelectContainer(container)}
         />
-        <button className='fixed z-10 top-4 right-12 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleElementsSidebar()}>&#9776; Menu</button>
+        <button className='fixed z-10 top-4 right-12 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleElementsSidebar()}>&#9776; Elements</button>
         <SVG>
           { this.state.MainContainer }
         </SVG>
@@ -243,6 +243,8 @@ class App extends React.Component<IAppProps> {
 export async function fetchConfiguration(): Promise<Configuration> {
   const url = `${import.meta.env.VITE_API_URL}`;
 
+  // The test library cannot use the Fetch API
+  // @ts-ignore
   if (window.fetch) {
     return await fetch(url, {
       method: 'POST'

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>
     );

src/main.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
-import './index.css';
+import './index.scss';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>