Add svgpanzoom

src/App.scss

@@ -1,5 +1,7 @@
 html,
 body,
-#root {
+#root,
+svg {
   height: 100%;
+  width: 100%;
 }

src/SVG/SVG.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { AvailableContainer } from '../Interfaces/AvailableContainer';
 import { Container } from './Elements/Container';
 import { MainContainer } from './Elements/MainContainer';
+import * as svgPanZoom from 'svg-pan-zoom';
 
 interface ISVGProps {
   MainContainer: AvailableContainer
@@ -13,6 +14,7 @@ interface ISVGState {
 
 export class SVG extends React.Component<ISVGProps> {
   public state: ISVGState;
+  public svg: React.RefObject<SVGSVGElement>;
 
   constructor(props: ISVGProps) {
     super(props);
@@ -24,9 +26,10 @@ export class SVG extends React.Component<ISVGProps> {
         window.innerHeight
       ]
     };
+    this.svg = React.createRef<SVGSVGElement>();
   }
 
-  updateViewBox() {
+  resizeViewBox() {
     this.setState({
       viewBox: [
         0,
@@ -38,11 +41,13 @@ export class SVG extends React.Component<ISVGProps> {
   }
 
   componentDidMount() {
-    window.addEventListener('resize', this.updateViewBox.bind(this));
-  }
+    if (this.svg === null ||
+      this.svg === undefined ||
+      this.svg.current === null) {
+      return;
+    }
 
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.updateViewBox.bind(this));
+    svgPanZoom(this.svg.current);
   }
 
   render() {
@@ -56,7 +61,7 @@ export class SVG extends React.Component<ISVGProps> {
     const children: Container[] = [];
 
     return (
-        <svg {...properties}>
+        <svg ref={this.svg} {...properties}>
           <MainContainer
             width={this.props.MainContainer.Width}
             height={this.props.MainContainer.Height}