Move SVG folder to Components

src/Components/SVG/SVG.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { MainContainer } from './Elements/MainContainer';
+import { ReactSVGPanZoom, Tool, Value, TOOL_PAN } from 'react-svg-pan-zoom';
+
+interface ISVGProps {
+  children: MainContainer | MainContainer[] | null,
+}
+
+interface ISVGState {
+  viewBox: number[],
+  value: Value,
+  tool: Tool
+}
+
+export class SVG extends React.Component<ISVGProps> {
+  public state: ISVGState;
+  public svg: React.RefObject<SVGSVGElement>;
+
+  constructor(props: ISVGProps) {
+    super(props);
+    this.state = {
+      viewBox: [
+        0,
+        0,
+        window.innerWidth,
+        window.innerHeight
+      ],
+      value: {
+        viewerWidth: window.innerWidth,
+        viewerHeight: window.innerHeight
+      } as Value,
+      tool: TOOL_PAN
+    };
+    this.svg = React.createRef<SVGSVGElement>();
+  }
+
+  resizeViewBox() {
+    this.setState({
+      viewBox: [
+        0,
+        0,
+        window.innerWidth,
+        window.innerHeight
+      ]
+    });
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.resizeViewBox.bind(this));
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resizeViewBox.bind(this));
+  }
+
+  render() {
+    const xmlns = '<http://www.w3.org/2000/svg>';
+
+    const properties = {
+      viewBox: this.state.viewBox.join(' '),
+      xmlns
+    };
+
+    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
+        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}>
+          { children }
+        </svg>
+      </ReactSVGPanZoom>
+    );
+  };
+}