src/App.tsx

@@ -4,8 +4,6 @@ import Sidebar from './Components/Sidebar/Sidebar';
 import { SVGSidebar } from './Components/SVGSidebar/SVGSidebar';
 import { AvailableContainer } from './Interfaces/AvailableContainer';
 import { Configuration } from './Interfaces/Configuration';
-import { Container } from './SVG/Elements/Container';
-import { MainContainer } from './SVG/Elements/MainContainer';
 import { SVG } from './SVG/SVG';
 
 interface IAppProps {
@@ -14,8 +12,7 @@ interface IAppProps {
 interface IAppState {
   isSidebarOpen: boolean,
   isSVGSidebarOpen: boolean,
-  configuration: Configuration,
-  MainContainer: MainContainer | null
+  configuration: Configuration
 }
 
 class App extends React.Component<IAppProps> {
@@ -30,8 +27,7 @@ class App extends React.Component<IAppProps> {
         AvailableContainers: [],
         AvailableSymbols: [],
         MainContainer: {} as AvailableContainer
-      },
-      MainContainer: null
+      }
     };
   }
 
@@ -39,70 +35,33 @@ class App extends React.Component<IAppProps> {
     fetchConfiguration().then((configuration: Configuration) => {
       this.setState(prevState => ({
         ...prevState,
-        configuration,
-        MainContainer: new MainContainer(
-          {
-            width: configuration.MainContainer.Width,
-            height: configuration.MainContainer.Height,
-            children: []
-          }
-        )
+        configuration
       }));
     });
   }
 
   public ToggleSidebar() {
-    this.setState({
+    this.setState(prevState => ({
+      ...prevState,
       isSidebarOpen: !this.state.isSidebarOpen
-    } as IAppState);
+    } as IAppState));
   }
 
   public ToggleSVGSidebar() {
-    this.setState({
+    this.setState(prevState => ({
+      ...prevState,
       isSVGSidebarOpen: !this.state.isSVGSidebarOpen
-    } as IAppState);
-  }
-
-  public AddContainer(type: string): void {
-    if (this.state.MainContainer === null ||
-      this.state.MainContainer === undefined) {
-      return;
-    }
-
-    const container = new Container({
-      x: 0,
-      y: 0,
-      width: 300,
-      height: this.state.configuration.MainContainer.Height,
-      children: []
-    });
-
-    const newMainContainer = new MainContainer({
-      width: this.state.MainContainer.props.width,
-      height: this.state.MainContainer.props.height,
-      children: this.state.MainContainer.props.children.concat([container])
-    });
-
-    this.setState({
-      MainContainer: newMainContainer
-    });
+    } as IAppState));
   }
 
   render() {
     return (
       <div className="App font-sans h-full">
-        <Sidebar
-          componentOptions={this.state.configuration.AvailableContainers}
-          isOpen={this.state.isSidebarOpen}
-          onClick={() => this.ToggleSidebar()}
-          buttonOnClick={(type: string) => this.AddContainer(type)}
-        />
+        <Sidebar componentOptions={this.state.configuration.AvailableContainers} isOpen={this.state.isSidebarOpen} onClick={() => this.ToggleSidebar()} />
         <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()}/>
         <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 }
-        </SVG>
+        <SVG MainContainer={this.state.configuration.MainContainer} />
       </div>
     );
   }

src/Components/Sidebar/Sidebar.tsx

@@ -5,13 +5,12 @@ interface ISidebarProps {
   componentOptions: AvailableContainer[]
   isOpen: boolean;
   onClick: () => void;
-  buttonOnClick: (type: string) => void;
 }
 
 export default class Sidebar extends React.Component<ISidebarProps> {
   public render() {
     const listElements = this.props.componentOptions.map(componentOption =>
-      <button className='hover:bg-blue-600 transition-all sidebar-row' key={componentOption.Type} onClick={() => this.props.buttonOnClick(componentOption.Type)}>
+      <button className='hover:bg-blue-600 transition-all sidebar-row' key={componentOption.Type}>
         {componentOption.Type}
       </button>
     );

src/SVG/Elements/Container.tsx

@@ -7,22 +7,16 @@ interface IContainerProps {
   y: number,
   width: number,
   height: number,
-  style?: React.CSSProperties,
+  style: React.CSSProperties,
 }
 
 export class Container extends React.Component<IContainerProps> {
-  public static ContainerCount = 0;
-
-  componentWillUnMount() {
-  }
-
   public render(): React.ReactNode {
-    Container.ContainerCount++;
     const containersElements = this.props.children.map(child => child.render());
+
     return (
       <g
         transform={`translate(${this.props.x}, ${this.props.y})`}
-        key={`container-${Container.ContainerCount}`}
       >
         <rect
           width={this.props.width}

src/SVG/SVG.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
+import { AvailableContainer } from '../Interfaces/AvailableContainer';
+import { Container } from './Elements/Container';
 import { MainContainer } from './Elements/MainContainer';
 import { ReactSVGPanZoom, Tool, Value, TOOL_PAN } from 'react-svg-pan-zoom';
 
 interface ISVGProps {
-  children: MainContainer | MainContainer[] | null,
+  MainContainer: AvailableContainer
 }
 
 interface ISVGState {
@@ -27,7 +29,9 @@ export class SVG extends React.Component<ISVGProps> {
       ],
       value: {
         viewerWidth: window.innerWidth,
-        viewerHeight: window.innerHeight
+        viewerHeight: window.innerHeight,
+        SVGHeight: this.props.MainContainer.Height,
+        SVGWidth: this.props.MainContainer.Width
       } as Value,
       tool: TOOL_PAN
     };
@@ -61,12 +65,7 @@ export class SVG extends React.Component<ISVGProps> {
       xmlns
     };
 
-    let children: React.ReactNode | React.ReactNode[] = [];
-    if (Array.isArray(this.props.children)) {
-      children = this.props.children.map(child => child.render());
-    } else if (this.props.children !== null) {
-      children = this.props.children.render();
-    }
+    const children: Container[] = [];
 
     return (
       <ReactSVGPanZoom
@@ -78,7 +77,12 @@ export class SVG extends React.Component<ISVGProps> {
         tool={this.state.tool} onChangeTool={tool => this.setState({ tool })}
       >
         <svg ref={this.svg} {...properties}>
-          { children }
+          <MainContainer
+            width={this.props.MainContainer.Width}
+            height={this.props.MainContainer.Height}
+          >
+            { children }
+          </MainContainer>
         </svg>
       </ReactSVGPanZoom>
     );