Moved ContainerModel to Interfaces + replace all components to purecomponent (#12)

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

src/Components/SVG/Elements/Container.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getDepth, IContainerModel } from './ContainerModel';
+import { getDepth, IContainerModel } from '../../../Interfaces/ContainerModel';
 import { Dimension } from './Dimension';
 
 export interface IContainerProps {
@@ -8,7 +8,7 @@ export interface IContainerProps {
 
 const GAP = 50;
 
-export class Container extends React.Component<IContainerProps> {
+export class Container extends React.PureComponent<IContainerProps> {
   /**
    * Render the container
    * @returns Render the container

src/Components/SVG/Elements/ContainerModel.ts

@@ -1,90 +0,0 @@
-import Properties from '../../../Interfaces/Properties';
-
-export interface IContainerModel {
-  children: IContainerModel[],
-  parent: IContainerModel | null,
-  properties: Properties,
-  userData: Record<string, string | number>
-}
-
-export class ContainerModel implements IContainerModel {
-  public children: IContainerModel[];
-  public parent: IContainerModel | null;
-  public properties: Properties;
-  public userData: Record<string, string | number>;
-
-  constructor(
-    parent: IContainerModel | null,
-    properties: Properties,
-    children: IContainerModel[] = [],
-    userData = {}) {
-    this.parent = parent;
-    this.properties = properties;
-    this.children = children;
-    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/Components/SVG/Elements/Dimension.tsx

@@ -9,7 +9,7 @@ interface IDimensionProps {
   strokeWidth: number;
 }
 
-export class Dimension extends React.Component<IDimensionProps> {
+export class Dimension extends React.PureComponent<IDimensionProps> {
   public render() {
     const style = {
       stroke: 'black'

src/Components/SVG/Elements/DimensionLayer.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ContainerModel, getDepth, MakeIterator } from './ContainerModel';
+import { ContainerModel, getDepth, MakeIterator } from '../../../Interfaces/ContainerModel';
 import { Dimension } from './Dimension';
 
 interface IDimensionLayerProps {

src/Components/SVG/Elements/Selector.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IContainerModel, getAbsolutePosition } from './ContainerModel';
+import { IContainerModel, getAbsolutePosition } from '../../../Interfaces/ContainerModel';
 
 interface ISelectorProps {
   selected: IContainerModel | null

src/Components/SVG/SVG.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReactSVGPanZoom, Tool, Value, TOOL_PAN } from 'react-svg-pan-zoom';
 import { Container } from './Elements/Container';
-import { ContainerModel } from './Elements/ContainerModel';
+import { ContainerModel } from '../../Interfaces/ContainerModel';
 import { Selector } from './Elements/Selector';
 
 interface ISVGProps {
@@ -16,7 +16,7 @@ interface ISVGState {
   tool: Tool
 }
 
-export class SVG extends React.Component<ISVGProps> {
+export class SVG extends React.PureComponent<ISVGProps> {
   public state: ISVGState;
   public svg: React.RefObject<SVGSVGElement>;