Implement selected container

src/App.tsx

@@ -14,7 +14,8 @@ interface IAppState {
   isSidebarOpen: boolean,
   isSVGSidebarOpen: boolean,
   configuration: Configuration,
-  MainContainer: Container | null
+  MainContainer: Container | null,
+  SelectedContainer: Container | null
 }
 
 class App extends React.Component<IAppProps> {
@@ -30,29 +31,33 @@ class App extends React.Component<IAppProps> {
         AvailableSymbols: [],
         MainContainer: {} as AvailableContainer
       },
-      MainContainer: null
+      MainContainer: null,
+      SelectedContainer: null
     };
   }
 
   componentDidMount() {
     fetchConfiguration().then((configuration: Configuration) => {
+      const MainContainer = new Container(
+        {
+          parent: null,
+          id: 'main',
+          x: 0,
+          y: 0,
+          width: configuration.MainContainer.Width,
+          height: configuration.MainContainer.Height,
+          children: [],
+          style: {
+            fillOpacity: 0,
+            stroke: 'black'
+          } as React.CSSProperties
+        }
+      );
       this.setState(prevState => ({
         ...prevState,
         configuration,
-        MainContainer: new Container(
+        MainContainer,
-          {
+        SelectedContainer: MainContainer
-            id: 'main',
-            x: 0,
-            y: 0,
-            width: configuration.MainContainer.Width,
-            height: configuration.MainContainer.Height,
-            children: [],
-            style: {
-              fillOpacity: 0,
-              stroke: 'black'
-            } as React.CSSProperties
-          }
-        )
       }));
     });
   }
@@ -70,6 +75,11 @@ class App extends React.Component<IAppProps> {
   }
 
   public AddContainer(type: string): void {
+    if (this.state.SelectedContainer === null ||
+      this.state.SelectedContainer === undefined) {
+      return;
+    }
+
     if (this.state.MainContainer === null ||
       this.state.MainContainer === undefined) {
       return;
@@ -82,8 +92,9 @@ class App extends React.Component<IAppProps> {
     }
 
     const container = new Container({
-      id: this.state.MainContainer.props.children.length.toString(),
+      parent: this.state.SelectedContainer,
-      x: 0 + properties?.Width * this.state.MainContainer.props.children.length,
+      id: this.state.SelectedContainer.props.children.length.toString(),
+      x: 0,
       y: 0,
       width: properties?.Width,
       height: this.state.configuration.MainContainer.Height,
@@ -94,15 +105,9 @@ class App extends React.Component<IAppProps> {
       }
     });
 
-    const newMainContainer = new Container({
+    this.state.SelectedContainer.props.children.push(container);
-      id: this.state.MainContainer.props.id,
+
-      x: this.state.MainContainer.props.x,
+    const newMainContainer = new Container(Object.assign({}, this.state.MainContainer.props));
-      y: this.state.MainContainer.props.y,
-      width: this.state.MainContainer.props.width,
-      height: this.state.MainContainer.props.height,
-      style: this.state.MainContainer.props.style,
-      children: this.state.MainContainer.props.children.concat([container])
-    });
 
     this.setState({
       MainContainer: newMainContainer

src/Components/SVG/Elements/Container.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 
 interface IContainerProps {
+  // eslint-disable-next-line no-use-before-define
+  parent: Container | null,
   id: string,
   // eslint-disable-next-line no-use-before-define
   children: Container[],