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/Interfaces/Configuration.ts

@@ -3,7 +3,7 @@ import { AvailableSymbolModel } from './AvailableSymbol';
 
 /** Model of configuration for the application to configure it */
 export interface Configuration {
-  AvailableContainers: AvailableContainer[];
-  AvailableSymbols: AvailableSymbolModel[];
-  MainContainer: AvailableContainer;
+  AvailableContainers: AvailableContainer[]
+  AvailableSymbols: AvailableSymbolModel[]
+  MainContainer: AvailableContainer
 }

src/Interfaces/ContainerModel.ts

@@ -1,9 +1,9 @@
 import Properties from './Properties';
 
 export interface IContainerModel {
-  children: IContainerModel[],
-  parent: IContainerModel | null,
-  properties: Properties,
+  children: IContainerModel[]
+  parent: IContainerModel | null
+  properties: Properties
   userData: Record<string, string | number>
 }
 
@@ -24,67 +24,3 @@ export class ContainerModel implements IContainerModel {
     this.userData = userData;
   }
 };
-
-/**
- * Returns a Generator iterating of over the children depth-first
- */
-export function * MakeIterator(root: IContainerModel): Generator<IContainerModel, void, unknown> {
-  const queue: IContainerModel[] = [root];
-  const visited = new Set<IContainerModel>(queue);
-  while (queue.length > 0) {
-    const container = queue.pop() as IContainerModel;
-
-    yield container;
-
-    // if this reverse() gets costly, replace it by a simple for
-    container.children.forEach((child) => {
-      if (visited.has(child)) {
-        return;
-      }
-      visited.add(child);
-      queue.push(child);
-    });
-  }
-}
-
-/**
-   * Returns the depth of the container
-   * @returns The depth of the container
-   */
-export function getDepth(parent: IContainerModel) {
-  let depth = 0;
-
-  let current: IContainerModel | null = parent;
-  while (current != null) {
-    depth++;
-    current = current.parent;
-  }
-
-  return depth;
-}
-
-/**
-   * Returns the absolute position by iterating to the parent
-   * @returns The absolute position of the container
-   */
-export function getAbsolutePosition(container: IContainerModel): [number, number] {
-  let x = Number(container.properties.x);
-  let y = Number(container.properties.y);
-  let current = container.parent;
-  while (current != null) {
-    x += Number(current.properties.x);
-    y += Number(current.properties.y);
-    current = current.parent;
-  }
-  return [x, y];
-}
-
-export function findContainerById(root: IContainerModel, id: string): IContainerModel | undefined {
-  const it = MakeIterator(root);
-  for (const container of it) {
-    if (container.properties.id === id) {
-      return container;
-    }
-  }
-  return undefined;
-}

src/Interfaces/Image.ts

@@ -1,7 +1,7 @@
 /** Model of an image with multiple source */
 export interface Image {
-    Name: string;
-    Url: string;
-    Base64Image: string;
-    Svg: string;
+  Name: string
+  Url: string
+  Base64Image: string
+  Svg: string
 }

src/Interfaces/Properties.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
 export default interface Properties extends React.CSSProperties {
-  id: string,
-  parentId: string | null,
-  x: number,
+  id: string
+  parentId: string | null
+  x: number
   y: number
 }