Added Standard with Typescript + Moved module methods to utils/itertools

src/Components/SVG/SVG.tsx

@@ -1,34 +1,21 @@
 import * as React from 'react';
-import { ReactSVGPanZoom, Tool, Value, TOOL_PAN } from 'react-svg-pan-zoom';
+import { UncontrolledReactSVGPanZoom } from 'react-svg-pan-zoom';
 import { Container } from './Elements/Container';
 import { ContainerModel } from '../../Interfaces/ContainerModel';
 import { Selector } from './Elements/Selector';
 
 interface ISVGProps {
-  width: number,
-  height: number,
-  children: ContainerModel | ContainerModel[] | null,
+  width: number
+  height: number
+  children: ContainerModel | ContainerModel[] | null
   selected: ContainerModel | null
 }
 
-interface ISVGState {
-  value: Value,
-  tool: Tool
-}
-
 export class SVG extends React.PureComponent<ISVGProps> {
-  public state: ISVGState;
   public static ID = 'svg';
 
   constructor(props: ISVGProps) {
     super(props);
-    this.state = {
-      value: {
-        viewerWidth: window.innerWidth,
-        viewerHeight: window.innerHeight
-      } as Value,
-      tool: TOOL_PAN
-    };
   }
 
   render() {
@@ -49,13 +36,11 @@ export class SVG extends React.PureComponent<ISVGProps> {
 
     return (
       <div id={SVG.ID}>
-        <ReactSVGPanZoom
+        <UncontrolledReactSVGPanZoom
           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 })}
           miniatureProps={{
             position: 'left',
             background: '#616264',
@@ -67,9 +52,8 @@ export class SVG extends React.PureComponent<ISVGProps> {
             { children }
             <Selector selected={this.props.selected} />
           </svg>
-        </ReactSVGPanZoom>
+        </UncontrolledReactSVGPanZoom>
       </div>
-
     );
   };
 }