src/App.tsx

@@ -5,6 +5,7 @@ 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 {
@@ -14,7 +15,7 @@ interface IAppState {
   isSidebarOpen: boolean,
   isSVGSidebarOpen: boolean,
   configuration: Configuration,
-  MainContainer: Container | null
+  MainContainer: MainContainer | null
 }
 
 class App extends React.Component<IAppProps> {
@@ -39,18 +40,11 @@ class App extends React.Component<IAppProps> {
       this.setState(prevState => ({
         ...prevState,
         configuration,
-        MainContainer: new Container(
+        MainContainer: new MainContainer(
           {
-            id: 'main',
-            x: 0,
-            y: 0,
             width: configuration.MainContainer.Width,
             height: configuration.MainContainer.Height,
-            children: [],
+            children: []
-            style: {
-              fillOpacity: 0,
-              stroke: 'black'
-            } as React.CSSProperties
           }
         )
       }));
@@ -94,13 +88,9 @@ class App extends React.Component<IAppProps> {
       }
     });
 
-    const newMainContainer = new Container({
+    const newMainContainer = new MainContainer({
-      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])
     });
 
@@ -119,7 +109,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 MainContainer={this.state.MainContainer} isOpen={this.state.isSVGSidebarOpen} onClick={() => this.ToggleSVGSidebar()}/>
+        <SVGSidebar 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>
+  userData?: Record<string, string | number | symbol>
 }
 
 export class Container extends React.Component<IContainerProps> {

src/Components/SVG/Elements/MainContainer.tsx

@@ -0,0 +1,30 @@
+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: Container | Container[] | null,
+  children: MainContainer | MainContainer[] | null,
 }
 
 interface ISVGState {

src/Components/SVGSidebar/SVGSidebar.tsx

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