Moved ElementsSidebar dfs to iterator in Container

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -14,26 +14,13 @@ interface IElementsSidebarProps {
 
 export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
   public iterateChilds(handleContainer: (container: Container) => void): React.ReactNode {
-    const root = this.props.MainContainer;
+    if (!this.props.MainContainer) {
-    if (!root) {
       return null;
     }
 
-    const queue = [root];
+    const it = this.props.MainContainer.MakeIterator();
-    const visited = new Set([root]);
+    for (const container of it) {
-    while (queue.length > 0) {
-      const container = queue.pop() as Container;
-
       handleContainer(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);
-      });
     }
   }
 

src/Components/SVG/Elements/Container.tsx

@@ -21,6 +21,25 @@ export class Container extends React.Component<IContainerProps> {
     return properties;
   }
 
+  public * MakeIterator() {
+    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);
+      });
+    }
+  }
+
   public render(): React.ReactNode {
     const containersElements = this.props.children.map(child => child.render());
     const defaultStyle = {