From 63d72b883b1f144895c76aeec6e4693a84fb562c Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Sun, 31 Jul 2022 23:40:04 +0200
Subject: [PATCH] Remove MainContainer as it is the same as Container

---
 src/App.tsx                                   | 22 ++++++++++----
 src/Components/SVG/Elements/MainContainer.tsx | 30 -------------------
 src/Components/SVG/SVG.tsx                    |  4 +--
 src/Components/SVGSidebar/SVGSidebar.tsx      | 16 ++++++++--
 4 files changed, 32 insertions(+), 40 deletions(-)
 delete mode 100644 src/Components/SVG/Elements/MainContainer.tsx

diff --git a/src/App.tsx b/src/App.tsx
index eaebbb1..6245066 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,7 +5,6 @@ import { SVGSidebar } from './Components/SVGSidebar/SVGSidebar';
 import { AvailableContainer } from './Interfaces/AvailableContainer';
 import { Configuration } from './Interfaces/Configuration';
 import { Container } from './Components/SVG/Elements/Container';
-import { MainContainer } from './Components/SVG/Elements/MainContainer';
 import { SVG } from './Components/SVG/SVG';
 
 interface IAppProps {
@@ -15,7 +14,7 @@ interface IAppState {
   isSidebarOpen: boolean,
   isSVGSidebarOpen: boolean,
   configuration: Configuration,
-  MainContainer: MainContainer | null
+  MainContainer: Container | null
 }
 
 class App extends React.Component<IAppProps> {
@@ -40,11 +39,18 @@ class App extends React.Component<IAppProps> {
       this.setState(prevState => ({
         ...prevState,
         configuration,
-        MainContainer: new MainContainer(
+        MainContainer: new Container(
           {
+            id: 'main',
+            x: 0,
+            y: 0,
             width: configuration.MainContainer.Width,
             height: configuration.MainContainer.Height,
-            children: []
+            children: [],
+            style: {
+              fillOpacity: 0,
+              stroke: 'black'
+            } as React.CSSProperties
           }
         )
       }));
@@ -88,9 +94,13 @@ class App extends React.Component<IAppProps> {
       }
     });
 
-    const newMainContainer = new MainContainer({
+    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])
     });
 
@@ -109,7 +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 isOpen={this.state.isSVGSidebarOpen} onClick={() => this.ToggleSVGSidebar()}/>
+        <SVGSidebar MainContainer={this.state.MainContainer} isOpen={this.state.isSVGSidebarOpen} onClick={() => this.ToggleSVGSidebar()}/>
         <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/MainContainer.tsx b/src/Components/SVG/Elements/MainContainer.tsx
deleted file mode 100644
index 725a032..0000000
--- a/src/Components/SVG/Elements/MainContainer.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { Container } from './Container';
-
-interface IMainContainerProps {
-  children: Container[],
-  width: number,
-  height: number,
-}
-
-export class MainContainer extends React.Component<IMainContainerProps> {
-  public render() {
-    const style: React.CSSProperties = {
-      fillOpacity: 0,
-      stroke: 'black'
-    };
-
-    return (
-      <Container
-      id={'main'}
-      x={0}
-      y={0}
-      width={this.props.width}
-      height={this.props.height}
-      style={style}
-      >
-        { this.props.children }
-      </Container>
-    );
-  }
-}
diff --git a/src/Components/SVG/SVG.tsx b/src/Components/SVG/SVG.tsx
index 3edb8cd..4555da2 100644
--- a/src/Components/SVG/SVG.tsx
+++ b/src/Components/SVG/SVG.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { MainContainer } from './Elements/MainContainer';
 import { ReactSVGPanZoom, Tool, Value, TOOL_PAN } from 'react-svg-pan-zoom';
+import { Container } from './Elements/Container';
 
 interface ISVGProps {
-  children: MainContainer | MainContainer[] | null,
+  children: Container | Container[] | null,
 }
 
 interface ISVGState {
diff --git a/src/Components/SVGSidebar/SVGSidebar.tsx b/src/Components/SVGSidebar/SVGSidebar.tsx
index 5d1b184..c6e6f8d 100644
--- a/src/Components/SVGSidebar/SVGSidebar.tsx
+++ b/src/Components/SVGSidebar/SVGSidebar.tsx
@@ -1,11 +1,23 @@
 import * as React from 'react';
+import { Container } from '../SVG/Elements/Container';
 
 interface ISVGSidebarProps {
-  isOpen: boolean;
-  onClick: () => void;
+  MainContainer: Container | null,
+  isOpen: boolean,
+  onClick: () => void
 }
 
 export class SVGSidebar extends React.Component<ISVGSidebarProps> {
+  public iterateChilds(handleContainer: () => void): React.ReactNode {
+    if (!this.props.MainContainer) {
+      return undefined;
+    }
+
+    if (this.props.MainContainer) {
+
+    }
+  }
+
   public render() {
     const isOpenClasses = this.props.isOpen ? 'right-0' : '-right-64';
     return (