Add Container to SVGSidebar + disable Symbol for userdata

src/Components/SVG/Elements/Container.tsx

@@ -9,7 +9,7 @@ interface IContainerProps {
   width: number,
   height: number,
   style?: React.CSSProperties,
-  userData?: Record<string, string | number | symbol>
+  userData?: Record<string, string | number>
 }
 
 export class Container extends React.Component<IContainerProps> {

src/Components/SVGSidebar/SVGSidebar.tsx

@@ -8,18 +8,42 @@ interface ISVGSidebarProps {
 }
 
 export class SVGSidebar extends React.Component<ISVGSidebarProps> {
-  public iterateChilds(handleContainer: () => void): React.ReactNode {
-    if (!this.props.MainContainer) {
-      return undefined;
+  public iterateChilds(handleContainer: (container: Container) => void): React.ReactNode {
+    const root = this.props.MainContainer;
+    if (!root) {
+      return null;
     }
 
-    if (this.props.MainContainer) {
+    const queue = [root];
+    const visited = new Set([root]);
+    while (queue.length > 0) {
+      const container = queue.pop() as Container;
 
+      handleContainer(container);
+
+      container.props.children.forEach((child) => {
+        if (visited.has(child)) {
+          return;
+        }
+        visited.add(child);
+        queue.push(child);
+      });
     }
   }
 
   public render() {
     const isOpenClasses = this.props.isOpen ? 'right-0' : '-right-64';
+
+    const containerRows: React.ReactNode[] = [];
+    this.iterateChilds((container: Container) => {
+      const key = container.props.id.toString();
+      containerRows.push(
+        <button className='hover:bg-slate-600 transition-all sidebar-row' key={key} >
+          { key }
+        </button>
+      );
+    });
+
     return (
       <div className={`fixed bg-slate-400 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
         <div className='w-full h-auto p-4 flex justify-start' onClick={this.props.onClick}>
@@ -28,6 +52,7 @@ export class SVGSidebar extends React.Component<ISVGSidebarProps> {
         <div className='bg-slate-500 sidebar-row'>
           Liste des éléments
         </div>
+        { containerRows }
       </div>
     );
   }