Replace svg-pan-zoom by react-svg-pan-zoom

src/SVG/SVG.tsx

@@ -2,14 +2,16 @@ 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';
+import { ReactSVGPanZoom, Tool, Value, TOOL_PAN } from 'react-svg-pan-zoom';
 
 interface ISVGProps {
   MainContainer: AvailableContainer
 }
 
 interface ISVGState {
-  viewBox: number[]
+  viewBox: number[],
+  value: Value,
+  tool: Tool
 }
 
 export class SVG extends React.Component<ISVGProps> {
@@ -24,7 +26,14 @@ export class SVG extends React.Component<ISVGProps> {
         0,
         window.innerWidth,
         window.innerHeight
-      ]
+      ],
+      value: {
+        viewerWidth: window.innerWidth,
+        viewerHeight: window.innerHeight,
+        SVGHeight: this.props.MainContainer.Height,
+        SVGWidth: this.props.MainContainer.Width
+      } as Value,
+      tool: TOOL_PAN
     };
     this.svg = React.createRef<SVGSVGElement>();
   }
@@ -41,16 +50,11 @@ export class SVG extends React.Component<ISVGProps> {
   }
 
   componentDidMount() {
-    if (this.svg === null ||
-      this.svg === undefined ||
-      this.svg.current === null) {
-      return;
-    }
-    const settings: SvgPanZoom.Options = {
-      zoomScaleSensitivity: 1
-    };
+    window.addEventListener('resize', this.resizeViewBox.bind(this));
+  }
 
-    SvgPanZoom(this.svg.current, settings);
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resizeViewBox.bind(this));
   }
 
   render() {
@@ -64,6 +68,14 @@ export class SVG extends React.Component<ISVGProps> {
     const children: Container[] = [];
 
     return (
+      <ReactSVGPanZoom
+        width={window.innerWidth}
+        height={window.innerHeight}
+        background={'#ffffff'}
+        defaultTool='pan'
+        value={this.state.value} onChangeValue={value => this.setState({ value })}
+        tool={this.state.tool} onChangeTool={tool => this.setState({ tool })}
+      >
         <svg ref={this.svg} {...properties}>
           <MainContainer
             width={this.props.MainContainer.Width}
@@ -72,6 +84,7 @@ export class SVG extends React.Component<ISVGProps> {
             { children }
           </MainContainer>
         </svg>
+      </ReactSVGPanZoom>
     );
   };
 }