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

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -1,26 +1,26 @@
 import * as React from 'react';
 import { motion } from 'framer-motion';
 import { Properties } from '../Properties/Properties';
-import { Container } from '../SVG/Elements/Container';
+import { IContainerModel, getDepth, MakeIterator } from '../SVG/Elements/ContainerModel';
 
 interface IElementsSidebarProps {
-  MainContainer: Container | null,
+  MainContainer: IContainerModel | null,
   isOpen: boolean,
-  SelectedContainer: Container | null,
+  SelectedContainer: IContainerModel | null,
   onClick: () => void,
   onPropertyChange: (key: string, value: string) => void,
-  selectContainer: (container: Container) => void
+  selectContainer: (container: IContainerModel) => void
 }
 
 export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
-  public iterateChilds(handleContainer: (container: Container) => void): React.ReactNode {
+  public iterateChilds(handleContainer: (container: IContainerModel) => void): React.ReactNode {
     if (!this.props.MainContainer) {
       return null;
     }
 
-    const it = this.props.MainContainer.MakeIterator();
+    const it = MakeIterator(this.props.MainContainer);
     for (const container of it) {
-      handleContainer(container);
+      handleContainer(container as IContainerModel);
     }
   }
 
@@ -28,29 +28,29 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
     const isOpenClasses = this.props.isOpen ? 'right-0' : '-right-64';
 
     const containerRows: React.ReactNode[] = [];
-    this.iterateChilds((container: Container) => {
-      const depth: number = container.getDepth();
-      const key = container.props.properties.id.toString();
+    this.iterateChilds((container: IContainerModel) => {
+      const depth: number = getDepth(container);
+      const key = container.properties.id.toString();
       const text = '|\t'.repeat(depth) + key;
       const selectedClass: string = this.props.SelectedContainer !== null &&
-        this.props.SelectedContainer.props.properties.id === container.props.properties.id
+        this.props.SelectedContainer.properties.id === container.properties.id
         ? 'bg-blue-500 hover:bg-blue-600'
         : 'bg-slate-400 hover:bg-slate-600';
       containerRows.push(
         <motion.button
-        whileHover={{ scale: 1.05 }}
-        whileTap={{ scale: 1.2 }}
-        initial={{ opacity: 0, scale: 0 }}
-        animate={{ opacity: 1, scale: 1 }}
-        transition={{
-          duration: 0.150
-        }}
-        className={
-          `w-full elements-sidebar-row whitespace-pre 
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 1.2 }}
+          initial={{ opacity: 0, scale: 0 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{
+            duration: 0.150
+          }}
+          className={
+            `w-full elements-sidebar-row whitespace-pre 
           text-left text-sm font-medium transition-all ${selectedClass}`
-        }
-        key={key}
-        onClick={() => this.props.selectContainer(container)}>
+          }
+          key={key}
+          onClick={() => this.props.selectContainer(container)}>
           { text }
         </motion.button>
       );
@@ -67,7 +67,7 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
         <div className='overflow-y-auto overflow-x-hidden text-slate-200 flex-grow divide-y divide-solid divide-slate-500'>
           { containerRows }
         </div>
-        <Properties properties={this.props.SelectedContainer?.GetProperties()} onChange={this.props.onPropertyChange}></Properties>
+        <Properties properties={this.props.SelectedContainer?.properties} onChange={this.props.onPropertyChange}></Properties>
       </div>
     );
   }