Implement add on selected container

src/App.tsx

@@ -74,6 +74,12 @@ 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) {
@@ -91,13 +97,16 @@ 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: this.state.SelectedContainer,
+      parent,
-      id: this.state.SelectedContainer.props.children.length.toString(),
+      id: `${depth}-${parent.props.children.length.toString()}`,
       x: 0,
       y: 0,
       width: properties?.Width,
-      height: this.state.configuration.MainContainer.Height,
+      height: parent.props.height,
       children: [],
       style: properties.Style,
       userData: {
@@ -105,7 +114,7 @@ class App extends React.Component<IAppProps> {
       }
     });
 
-    this.state.SelectedContainer.props.children.push(container);
+    parent.props.children.push(container);
 
     const newMainContainer = new Container(Object.assign({}, this.state.MainContainer.props));
 
@@ -124,7 +133,12 @@ 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 MainContainer={this.state.MainContainer} isOpen={this.state.isSVGSidebarOpen} onClick={() => this.ToggleSVGSidebar()}/>
+        <SVGSidebar
+          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

@@ -35,4 +35,16 @@ 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,11 +4,13 @@ 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;
@@ -45,7 +47,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}>
+        <button className='sidebar-row whitespace-pre text-left hover:bg-slate-600 transition-all' key={key} onClick={() => this.props.selectContainer(container)}>
           { text }
         </button>
       );