src/App.tsx

@@ -14,8 +14,7 @@ interface IAppState {
   isSidebarOpen: boolean,
   isSVGSidebarOpen: boolean,
   configuration: Configuration,
-  MainContainer: Container | null,
+  MainContainer: Container | null
-  SelectedContainer: Container | null
 }
 
 class App extends React.Component<IAppProps> {
@@ -31,33 +30,29 @@ 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,
+        MainContainer: new Container(
-        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
+          }
+        )
       }));
     });
   }
@@ -74,18 +69,7 @@ class App extends React.Component<IAppProps> {
     } as IAppState);
   }
 
-  public SelectContainer(container: Container) {
-    this.setState({
-      SelectedContainer: container
-    } as 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;
@@ -97,16 +81,12 @@ class App extends React.Component<IAppProps> {
       throw new Error(`[AddContainer] Object type not found. Found: ${type}`);
     }
 
-    const parent = this.state.SelectedContainer;
-
-    const depth: number = Container.getDepth(parent) + 1;
     const container = new Container({
-      parent,
+      id: this.state.MainContainer.props.children.length.toString(),
-      id: `${depth}-${parent.props.children.length.toString()}`,
+      x: 0 + properties?.Width * this.state.MainContainer.props.children.length,
-      x: 0,
       y: 0,
       width: properties?.Width,
-      height: parent.props.height,
+      height: this.state.configuration.MainContainer.Height,
       children: [],
       style: properties.Style,
       userData: {
@@ -114,9 +94,15 @@ class App extends React.Component<IAppProps> {
       }
     });
 
-    parent.props.children.push(container);
+    const newMainContainer = new Container({
-
+      id: this.state.MainContainer.props.id,
-    const newMainContainer = new Container(Object.assign({}, this.state.MainContainer.props));
+      x: this.state.MainContainer.props.x,
+      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
@@ -133,12 +119,7 @@ class App extends React.Component<IAppProps> {
           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>
-        <SVGSidebar
+        <SVGSidebar MainContainer={this.state.MainContainer} isOpen={this.state.isSVGSidebarOpen} onClick={() => this.ToggleSVGSidebar()}/>
-          MainContainer={this.state.MainContainer}
-          isOpen={this.state.isSVGSidebarOpen}
-          onClick={() => this.ToggleSVGSidebar()}
-          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.ToggleSVGSidebar()}>&#9776; Menu</button>
         <SVG>
           { this.state.MainContainer }

src/Components/SVG/Elements/Container.tsx

@@ -1,8 +1,6 @@
 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[],
@@ -35,16 +33,4 @@ export class Container extends React.Component<IContainerProps> {
       </g>
     );
   }
-
-  public static getDepth(container: Container): number {
-    let depth = 0;
-
-    let current: Container | null = container.props.parent;
-    while (current != null) {
-      depth++;
-      current = current.props.parent;
-    }
-
-    return depth;
-  }
 }

src/Components/SVGSidebar/SVGSidebar.tsx

@@ -4,13 +4,11 @@ import { Container } from '../SVG/Elements/Container';
 interface ISVGSidebarProps {
   MainContainer: Container | null,
   isOpen: boolean,
-  onClick: () => void,
+  onClick: () => void
-  selectContainer: (container: Container) => void
 }
 
 export class SVGSidebar extends React.Component<ISVGSidebarProps> {
   public iterateChilds(handleContainer: (container: Container, depth: number) => void): React.ReactNode {
-    // TODO: fix this by using dfs or sort
     const root = this.props.MainContainer;
     if (!root) {
       return null;
@@ -47,7 +45,7 @@ export class SVGSidebar extends React.Component<ISVGSidebarProps> {
       const key = container.props.id.toString();
       const text = '\t\t'.repeat(depth) + key;
       containerRows.push(
-        <button className='sidebar-row whitespace-pre text-left hover:bg-slate-600 transition-all' key={key} onClick={() => this.props.selectContainer(container)}>
+        <button className='sidebar-row whitespace-pre text-left hover:bg-slate-600 transition-all' key={key}>
           { text }
         </button>
       );