Refactor Editor and module functions (#15)

Moved all module functions to separate utils modules

Replaced standard with standard with typescript

Extracted UI elements to separate component

Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/15

src/Components/SVG/Elements/Container.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { getDepth, IContainerModel } from '../../../Interfaces/ContainerModel';
+import { IContainerModel } from '../../../Interfaces/ContainerModel';
+import { getDepth } from '../../../utils/itertools';
 import { Dimension } from './Dimension';
 
 export interface IContainerProps {
@@ -20,11 +21,11 @@ export class Container extends React.PureComponent<IContainerProps> {
     const transform = `translate(${Number(this.props.model.properties.x)}, ${Number(this.props.model.properties.y)})`;
 
     // g style
-    const defaultStyle = {
+    const defaultStyle: React.CSSProperties = {
       transitionProperty: 'all',
       transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
       transitionDuration: '150ms'
-    } as React.CSSProperties;
+    };
 
     // Rect style
     const style = Object.assign(

src/Components/SVG/Elements/Dimension.tsx

@@ -1,19 +1,19 @@
 import * as React from 'react';
 
 interface IDimensionProps {
-  id: string;
-  xStart: number;
-  xEnd: number;
-  y: number;
-  text: string;
-  strokeWidth: number;
+  id: string
+  xStart: number
+  xEnd: number
+  y: number
+  text: string
+  strokeWidth: number
 }
 
 export class Dimension extends React.PureComponent<IDimensionProps> {
-  public render() {
-    const style = {
+  public render(): JSX.Element {
+    const style: React.CSSProperties = {
       stroke: 'black'
-    } as React.CSSProperties;
+    };
     return (
       <g key={this.props.id}>
         <line

src/Components/SVG/Elements/DimensionLayer.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { ContainerModel, getDepth, MakeIterator } from '../../../Interfaces/ContainerModel';
+import { ContainerModel } from '../../../Interfaces/ContainerModel';
+import { getDepth, MakeIterator } from '../../../utils/itertools';
 import { Dimension } from './Dimension';
 
 interface IDimensionLayerProps {
-  isHidden: boolean,
-  roots: ContainerModel | ContainerModel[] | null,
+  isHidden: boolean
+  roots: ContainerModel | ContainerModel[] | null
 }
 
 const GAP: number = 50;

src/Components/SVG/Elements/Selector.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { IContainerModel, getAbsolutePosition } from '../../../Interfaces/ContainerModel';
+import { IContainerModel } from '../../../Interfaces/ContainerModel';
+import { getAbsolutePosition } from '../../../utils/itertools';
 
 interface ISelectorProps {
   selected: IContainerModel | null
@@ -18,7 +19,7 @@ export const Selector: React.FC<ISelectorProps> = (props) => {
     props.selected.properties.width,
     props.selected.properties.height
   ];
-  const style = {
+  const style: React.CSSProperties = {
     stroke: '#3B82F6', // tw blue-500
     strokeWidth: 4,
     fillOpacity: 0,
@@ -26,7 +27,7 @@ export const Selector: React.FC<ISelectorProps> = (props) => {
     transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
     transitionDuration: '150ms',
     animation: 'fadein 750ms ease-in alternate infinite'
-  } as React.CSSProperties;
+  };
 
   return (
     <rect