From 092b156cc07061cc7da03c48978fd1d49be24d47 Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Mon, 1 Aug 2022 10:50:58 +0200
Subject: [PATCH 1/2] Implement selected container

---
 src/App.tsx                               | 59 ++++++++++++-----------
 src/Components/SVG/Elements/Container.tsx |  2 +
 2 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 6245066..fc3b721 100644
--- a/src/App.tsx
+++ b/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
       }));
     });
   }
@@ -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(),
-      x: 0 + properties?.Width * this.state.MainContainer.props.children.length,
+      parent: this.state.SelectedContainer,
+      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({
-      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])
-    });
+    this.state.SelectedContainer.props.children.push(container);
+
+    const newMainContainer = new Container(Object.assign({}, this.state.MainContainer.props));
 
     this.setState({
       MainContainer: newMainContainer
diff --git a/src/Components/SVG/Elements/Container.tsx b/src/Components/SVG/Elements/Container.tsx
index 86f69cd..b9d33a3 100644
--- a/src/Components/SVG/Elements/Container.tsx
+++ b/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[],

From 893b525d45b531c6b7acd4ffc1805683bbb337f2 Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Mon, 1 Aug 2022 11:02:44 +0200
Subject: [PATCH 2/2] Implement add on selected container

---
 src/App.tsx                               | 24 ++++++++++++++++++-----
 src/Components/SVG/Elements/Container.tsx | 12 ++++++++++++
 src/Components/SVGSidebar/SVGSidebar.tsx  |  6 ++++--
 3 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index fc3b721..c6d5b13 100644
--- a/src/App.tsx
+++ b/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,
-      id: this.state.SelectedContainer.props.children.length.toString(),
+      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: {
@@ -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 }
diff --git a/src/Components/SVG/Elements/Container.tsx b/src/Components/SVG/Elements/Container.tsx
index b9d33a3..728a954 100644
--- a/src/Components/SVG/Elements/Container.tsx
+++ b/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;
+  }
 }
diff --git a/src/Components/SVGSidebar/SVGSidebar.tsx b/src/Components/SVGSidebar/SVGSidebar.tsx
index a40adf8..bac4a5a 100644
--- a/src/Components/SVGSidebar/SVGSidebar.tsx
+++ b/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>
       );