Fix dfs and Element's id

src/App.tsx

@@ -16,6 +16,7 @@ interface IAppState {
   configuration: Configuration,
   MainContainer: Container | null,
   SelectedContainer: Container | null
+  Counters: Record<string, number>
 }
 
 class App extends React.Component<IAppProps> {
@@ -32,7 +33,8 @@ class App extends React.Component<IAppProps> {
         MainContainer: {} as AvailableContainer
       },
       MainContainer: null,
-      SelectedContainer: null
+      SelectedContainer: null,
+      Counters: {}
     };
   }
 
@@ -97,12 +99,19 @@ class App extends React.Component<IAppProps> {
       throw new Error(`[AddContainer] Object type not found. Found: ${type}`);
     }
 
-    const parent = this.state.SelectedContainer;
+    const newCounters = Object.assign({}, this.state.Counters);
+    if (newCounters[type] === null ||
+      newCounters[type] === undefined) {
+      newCounters[type] = 0;
+    } else {
+      newCounters[type]++;
+    }
 
-    const depth: number = Container.getDepth(parent) + 1;
+    const parent = this.state.SelectedContainer;
+    const count = newCounters[type];
     const container = new Container({
       parent,
-      id: `${type}-${depth}-${parent.props.children.length.toString()}`,
+      id: `${type}-${count}`,
       x: 0,
       y: 0,
       width: properties?.Width,
@@ -119,7 +128,8 @@ class App extends React.Component<IAppProps> {
     const newMainContainer = new Container(Object.assign({}, this.state.MainContainer.props));
 
     this.setState({
-      MainContainer: newMainContainer
+      MainContainer: newMainContainer,
+      Counters: newCounters
     });
   }
 

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -10,8 +10,7 @@ interface IElementsSidebarProps {
 }
 
 export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
-  public iterateChilds(handleContainer: (container: Container, depth: number) => void): React.ReactNode {
-    // TODO: fix this by using dfs or sort
+  public iterateChilds(handleContainer: (container: Container) => void): React.ReactNode {
     const root = this.props.MainContainer;
     if (!root) {
       return null;
@@ -19,14 +18,10 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
 
     const queue = [root];
     const visited = new Set([root]);
-    let depth = 0;
     while (queue.length > 0) {
-      let size = queue.length;
+      const container = queue.pop() as Container;
 
-      while (size-- > 0) {
-        const container = queue.shift() as Container;
-
-        handleContainer(container, depth);
+      handleContainer(container);
 
       container.props.children.forEach((child) => {
         if (visited.has(child)) {
@@ -36,15 +31,14 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
         queue.push(child);
       });
     }
-      depth++;
-    }
   }
 
   public render() {
     const isOpenClasses = this.props.isOpen ? 'right-0' : '-right-64';
 
     const containerRows: React.ReactNode[] = [];
-    this.iterateChilds((container: Container, depth: number) => {
+    this.iterateChilds((container: Container) => {
+      const depth: number = Container.getDepth(container);
       const key = container.props.id.toString();
       const text = '\t\t'.repeat(depth) + key;
       const selectedClass: string = this.props.SelectedContainer !== null &&