Add Container to SVGSidebar + disable Symbol for userdata

src/App.tsx

@@ -5,7 +5,6 @@ import { SVGSidebar } from './Components/SVGSidebar/SVGSidebar';
 import { AvailableContainer } from './Interfaces/AvailableContainer';
 import { Configuration } from './Interfaces/Configuration';
 import { Container } from './Components/SVG/Elements/Container';
-import { MainContainer } from './Components/SVG/Elements/MainContainer';
 import { SVG } from './Components/SVG/SVG';
 
 interface IAppProps {
@@ -15,7 +14,7 @@ interface IAppState {
   isSidebarOpen: boolean,
   isSVGSidebarOpen: boolean,
   configuration: Configuration,
-  MainContainer: MainContainer | null
+  MainContainer: Container | null
 }
 
 class App extends React.Component<IAppProps> {
@@ -40,11 +39,18 @@ class App extends React.Component<IAppProps> {
       this.setState(prevState => ({
         ...prevState,
         configuration,
-        MainContainer: new MainContainer(
+        MainContainer: new Container(
           {
+            id: 'main',
+            x: 0,
+            y: 0,
             width: configuration.MainContainer.Width,
             height: configuration.MainContainer.Height,
-            children: []
+            children: [],
+            style: {
+              fillOpacity: 0,
+              stroke: 'black'
+            } as React.CSSProperties
           }
         )
       }));
@@ -88,9 +94,13 @@ class App extends React.Component<IAppProps> {
       }
     });
 
-    const newMainContainer = new MainContainer({
+    const newMainContainer = new Container({
+      id: this.state.MainContainer.props.id,
+      x: this.state.MainContainer.props.x,
+      y: this.state.MainContainer.props.y,
       width: this.state.MainContainer.props.width,
       height: this.state.MainContainer.props.height,
+      style: this.state.MainContainer.props.style,
       children: this.state.MainContainer.props.children.concat([container])
     });
 
@@ -109,7 +119,7 @@ class App extends React.Component<IAppProps> {
           buttonOnClick={(type: string) => this.AddContainer(type)}
         />
         <button className='fixed z-10 top-4 left-4 text-lg bg-blue-200 hover:bg-blue-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSidebar()}>&#9776; Menu</button>
-        <SVGSidebar isOpen={this.state.isSVGSidebarOpen} onClick={() => this.ToggleSVGSidebar()}/>
+        <SVGSidebar MainContainer={this.state.MainContainer} isOpen={this.state.isSVGSidebarOpen} onClick={() => this.ToggleSVGSidebar()}/>
         <button className='fixed z-10 top-4 right-12 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSVGSidebar()}>&#9776; Menu</button>
         <SVG>
           { this.state.MainContainer }

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/SVG/Elements/MainContainer.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { Container } from './Container';
-
-interface IMainContainerProps {
-  children: Container[],
-  width: number,
-  height: number,
-}
-
-export class MainContainer extends React.Component<IMainContainerProps> {
-  public render() {
-    const style: React.CSSProperties = {
-      fillOpacity: 0,
-      stroke: 'black'
-    };
-
-    return (
-      <Container
-      id={'main'}
-      x={0}
-      y={0}
-      width={this.props.width}
-      height={this.props.height}
-      style={style}
-      >
-        { this.props.children }
-      </Container>
-    );
-  }
-}

src/Components/SVG/SVG.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { MainContainer } from './Elements/MainContainer';
 import { ReactSVGPanZoom, Tool, Value, TOOL_PAN } from 'react-svg-pan-zoom';
+import { Container } from './Elements/Container';
 
 interface ISVGProps {
-  children: MainContainer | MainContainer[] | null,
+  children: Container | Container[] | null,
 }
 
 interface ISVGState {

src/Components/SVGSidebar/SVGSidebar.tsx

@@ -1,13 +1,49 @@
 import * as React from 'react';
+import { Container } from '../SVG/Elements/Container';
 
 interface ISVGSidebarProps {
-  isOpen: boolean;
-  onClick: () => void;
+  MainContainer: Container | null,
+  isOpen: boolean,
+  onClick: () => void
 }
 
 export class SVGSidebar extends React.Component<ISVGSidebarProps> {
+  public iterateChilds(handleContainer: (container: Container) => void): React.ReactNode {
+    const root = this.props.MainContainer;
+    if (!root) {
+      return null;
+    }
+
+    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}>
@@ -16,6 +52,7 @@ export class SVGSidebar extends React.Component<ISVGSidebarProps> {
         <div className='bg-slate-500 sidebar-row'>
           Liste des éléments
         </div>
+        { containerRows }
       </div>
     );
   }