Delegate MainContainer to App

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>
     );