Implement add on 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(
-          {
-            id: 'main',
-            x: 0,
-            y: 0,
-            width: configuration.MainContainer.Width,
-            height: configuration.MainContainer.Height,
-            children: [],
-            style: {
-              fillOpacity: 0,
-              stroke: 'black'
-            } as React.CSSProperties
-          }
-        )
+        MainContainer,
+        SelectedContainer: MainContainer
       }));
     });
   }
@@ -69,7 +74,18 @@ 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;
@@ -81,12 +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({
-      id: this.state.MainContainer.props.children.length.toString(),
-      x: 0 + properties?.Width * this.state.MainContainer.props.children.length,
+      parent,
+      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: {
@@ -94,15 +114,9 @@ class App extends React.Component<IAppProps> {
       }
     });
 
-    const newMainContainer = new Container({
-      id: this.state.MainContainer.props.id,
-      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])
-    });
+    parent.props.children.push(container);
+
+    const newMainContainer = new Container(Object.assign({}, this.state.MainContainer.props));
 
     this.setState({
       MainContainer: newMainContainer
@@ -119,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

@@ -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[],
@@ -33,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>
       );