Move SVG folder to Components

src/Components/SVG/Elements/Container.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+interface IContainerProps {
+  id: string,
+  // eslint-disable-next-line no-use-before-define
+  children: Container[],
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  style?: React.CSSProperties,
+}
+
+export class Container extends React.Component<IContainerProps> {
+  componentWillUnMount() {
+  }
+
+  public render(): React.ReactNode {
+    const containersElements = this.props.children.map(child => child.render());
+    return (
+      <g
+        transform={`translate(${this.props.x}, ${this.props.y})`}
+        key={`container-${this.props.id}`}
+      >
+        <rect
+          width={this.props.width}
+          height={this.props.height}
+          style={this.props.style}
+        >
+        </rect>
+        { containersElements }
+      </g>
+    );
+  }
+}

src/Components/SVG/Elements/MainContainer.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Container } from './Container';
+
+interface IMainContainerProps {
+  children: Container[],
+  width: number,
+  height: number,
+}
+
+export class MainContainer extends React.Component<IMainContainerProps> {
+  public render() {
+    const style: React.CSSProperties = {
+      fillOpacity: 0,
+      stroke: 'black'
+    };
+
+    return (
+      <Container
+      id={'main'}
+      x={0}
+      y={0}
+      width={this.props.width}
+      height={this.props.height}
+      style={style}
+      >
+        { this.props.children }
+      </Container>
+    );
+  }
+}

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