Implement container adding

src/App.tsx

@@ -4,6 +4,8 @@ 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 {
@@ -12,7 +14,8 @@ interface IAppProps {
 interface IAppState {
   isSidebarOpen: boolean,
   isSVGSidebarOpen: boolean,
-  configuration: Configuration
+  configuration: Configuration,
+  MainContainer: MainContainer | null
 }
 
 class App extends React.Component<IAppProps> {
@@ -27,7 +30,8 @@ class App extends React.Component<IAppProps> {
         AvailableContainers: [],
         AvailableSymbols: [],
         MainContainer: {} as AvailableContainer
-      }
+      },
+      MainContainer: null
     };
   }
 
@@ -35,33 +39,70 @@ class App extends React.Component<IAppProps> {
     fetchConfiguration().then((configuration: Configuration) => {
       this.setState(prevState => ({
         ...prevState,
-        configuration
+        configuration,
+        MainContainer: new MainContainer(
+          {
+            width: configuration.MainContainer.Width,
+            height: configuration.MainContainer.Height,
+            children: []
+          }
+        )
       }));
     });
   }
 
   public ToggleSidebar() {
-    this.setState(prevState => ({
-      ...prevState,
+    this.setState({
       isSidebarOpen: !this.state.isSidebarOpen
-    } as IAppState));
+    } as IAppState);
   }
 
   public ToggleSVGSidebar() {
-    this.setState(prevState => ({
-      ...prevState,
+    this.setState({
       isSVGSidebarOpen: !this.state.isSVGSidebarOpen
-    } as IAppState));
+    } 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
+    });
   }
 
   render() {
     return (
       <div className="App font-sans h-full">
-        <Sidebar componentOptions={this.state.configuration.AvailableContainers} isOpen={this.state.isSidebarOpen} onClick={() => this.ToggleSidebar()} />
+        <Sidebar
+          componentOptions={this.state.configuration.AvailableContainers}
+          isOpen={this.state.isSidebarOpen}
+          onClick={() => this.ToggleSidebar()}
+          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()}/>
         <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 MainContainer={this.state.configuration.MainContainer} />
+        <SVG>
+          { this.state.MainContainer }
+        </SVG>
       </div>
     );
   }

src/Components/Sidebar/Sidebar.tsx

@@ -5,12 +5,13 @@ 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}>
+      <button className='hover:bg-blue-600 transition-all sidebar-row' key={componentOption.Type} onClick={() => this.props.buttonOnClick(componentOption.Type)}>
         {componentOption.Type}
       </button>
     );

src/SVG/Elements/Container.tsx

@@ -7,16 +7,22 @@ interface IContainerProps {
   y: number,
   width: number,
   height: number,
-  style: React.CSSProperties,
+  style?: React.CSSProperties,
 }
 
 export class Container extends React.Component<IContainerProps> {
-  public render(): React.ReactNode {
-    const containersElements = this.props.children.map(child => child.render());
+  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,11 +1,9 @@
 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 {
-  MainContainer: AvailableContainer
+  children: MainContainer | MainContainer[] | null,
 }
 
 interface ISVGState {
@@ -29,9 +27,7 @@ export class SVG extends React.Component<ISVGProps> {
       ],
       value: {
         viewerWidth: window.innerWidth,
-        viewerHeight: window.innerHeight,
-        SVGHeight: this.props.MainContainer.Height,
-        SVGWidth: this.props.MainContainer.Width
+        viewerHeight: window.innerHeight
       } as Value,
       tool: TOOL_PAN
     };
@@ -65,7 +61,12 @@ export class SVG extends React.Component<ISVGProps> {
       xmlns
     };
 
-    const children: Container[] = [];
+    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();
+    }
 
     return (
       <ReactSVGPanZoom
@@ -77,12 +78,7 @@ export class SVG extends React.Component<ISVGProps> {
         tool={this.state.tool} onChangeTool={tool => this.setState({ tool })}
       >
         <svg ref={this.svg} {...properties}>
-          <MainContainer
-            width={this.props.MainContainer.Width}
-            height={this.props.MainContainer.Height}
-          >
-            { children }
-          </MainContainer>
+          { children }
         </svg>
       </ReactSVGPanZoom>
     );