Separated the model and the Container entity in order to remove any mutation operation

src/Components/SVG/Elements/Container.tsx

@@ -1,92 +1,22 @@
 import * as React from 'react';
-import Properties from '../../../Interfaces/Properties';
+import { getDepth, IContainerModel } from './ContainerModel';
 import { Dimension } from './Dimension';
 
-interface IContainerProps {
-  // eslint-disable-next-line no-use-before-define
-  parent: Container | null,
-  // eslint-disable-next-line no-use-before-define
-  children: Container[],
-  properties: Properties,
-  userData?: Record<string, string | number>
+export interface IContainerProps {
+  model: IContainerModel
 }
 
 const GAP = 50;
 
 export class Container extends React.Component<IContainerProps> {
-  /**
-   * Returns A copy of the properties of the Container
-   * @returns A copy of the properties of the Container
-   */
-  public GetProperties(): Properties {
-    const properties : Properties = {
-      ...this.props.properties
-    };
-    return properties;
-  }
-
-  /**
-   * Returns a Generator iterating of over the children depth-first
-   */
-  public * MakeIterator(): Generator<Container, void, unknown> {
-    const queue: Container[] = [this];
-    const visited = new Set<Container>(queue);
-    while (queue.length > 0) {
-      const container = queue.pop() as Container;
-
-      yield container;
-
-      // if this reverse() gets costly, replace it by a simple for
-      container.props.children.reverse().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
-   */
-  public getDepth() {
-    let depth = 0;
-
-    let current: Container | null = this.props.parent;
-    while (current != null) {
-      depth++;
-      current = current.props.parent;
-    }
-
-    return depth;
-  }
-
-  /**
-   * Returns the absolute position by iterating to the parent
-   * @returns The absolute position of the container
-   */
-  public getAbsolutePosition(): [number, number] {
-    let x = Number(this.props.properties.x);
-    let y = Number(this.props.properties.y);
-    let current = this.props.parent;
-    while (current != null) {
-      x += Number(current.props.properties.x);
-      y += Number(current.props.properties.y);
-      current = current.props.parent;
-    }
-    return [x, y];
-  }
-
   /**
    * Render the container
    * @returns Render the container
    */
   public render(): React.ReactNode {
-    const containersElements = this.props.children.map(child => child.render());
-    const xText = Number(this.props.properties.width) / 2;
-    const yText = Number(this.props.properties.height) / 2;
+    const containersElements = this.props.model.children.map(child => new Container({ model: child } as IContainerProps).render());
+    const xText = Number(this.props.model.properties.width) / 2;
+    const yText = Number(this.props.model.properties.height) / 2;
 
     // g style
     const defaultStyle = {
@@ -98,7 +28,7 @@ export class Container extends React.Component<IContainerProps> {
     // Rect style
     const style = Object.assign(
       JSON.parse(JSON.stringify(defaultStyle)),
-      this.props.properties
+      this.props.model.properties
     );
     style.x = 0;
     style.y = 0;
@@ -106,18 +36,18 @@ export class Container extends React.Component<IContainerProps> {
     delete style.width;
 
     // Dimension props
-    const id = `dim-${this.props.properties.id}`;
+    const id = `dim-${this.props.model.properties.id}`;
     const xStart: number = 0;
-    const xEnd = Number(this.props.properties.width);
-    const y = -(GAP * (this.getDepth() + 1));
+    const xEnd = Number(this.props.model.properties.width);
+    const y = -(GAP * (getDepth(this.props.model) + 1));
     const strokeWidth = 1;
-    const text = (this.props.properties.width ?? 0).toString();
+    const text = (this.props.model.properties.width ?? 0).toString();
 
     return (
       <g
         style={defaultStyle}
-        transform={`translate(${this.props.properties.x}, ${this.props.properties.y})`}
-        key={`container-${this.props.properties.id}`}
+        transform={`translate(${this.props.model.properties.x}, ${this.props.model.properties.y})`}
+        key={`container-${this.props.model.properties.id}`}
       >
         <Dimension
           id={id}
@@ -128,8 +58,8 @@ export class Container extends React.Component<IContainerProps> {
           text={text}
         />
         <rect
-          width={this.props.properties.width}
-          height={this.props.properties.height}
+          width={this.props.model.properties.width}
+          height={this.props.model.properties.height}
           style={style}
         >
         </rect>
@@ -137,7 +67,7 @@ export class Container extends React.Component<IContainerProps> {
           x={xText}
           y={yText}
         >
-          {this.props.properties.id}
+          {this.props.model.properties.id}
         </text>
         { containersElements }
       </g>