Big refactoring with properties + Implement Property

src/App.tsx

@@ -43,16 +43,16 @@ class App extends React.Component<IAppProps> {
       const MainContainer = new Container(
         {
           parent: null,
-          id: 'main',
-          x: 0,
-          y: 0,
-          width: configuration.MainContainer.Width,
-          height: configuration.MainContainer.Height,
-          children: [],
-          style: {
+          properties: {
+            id: 'main',
+            x: 0,
+            y: 0,
+            width: configuration.MainContainer.Width,
+            height: configuration.MainContainer.Height,
             fillOpacity: 0,
             stroke: 'black'
-          } as React.CSSProperties
+          },
+          children: []
         }
       );
       this.setState(prevState => ({
@@ -82,6 +82,46 @@ class App extends React.Component<IAppProps> {
     } as IAppProps);
   }
 
+  public OnPropertyChange(key: string, value: string) {
+    if (this.state.SelectedContainer === null ||
+      this.state.SelectedContainer === undefined) {
+      throw new Error('Property was changed before selecting a Container');
+    }
+
+    if (this.state.MainContainer === null ||
+      this.state.MainContainer === undefined) {
+      throw new Error('Property was changed before the main container was added');
+    }
+
+    const pair = {} as Record<string, string>;
+    pair[key] = value;
+    const properties = Object.assign(this.state.SelectedContainer.props.properties, pair);
+    const props = {
+      ...this.state.SelectedContainer.props,
+      properties
+    };
+
+    const newSelectedContainer = new Container(props);
+
+    const parent = this.state.SelectedContainer.props.parent;
+    if (parent === null) {
+      this.setState({
+        SelectedContainer: newSelectedContainer,
+        MainContainer: newSelectedContainer
+      });
+      return;
+    }
+
+    const index = parent.props.children.indexOf(this.state.SelectedContainer);
+    parent.props.children[index] = newSelectedContainer;
+
+    const newMainContainer = new Container(Object.assign({}, this.state.MainContainer.props));
+    this.setState({
+      SelectedContainer: newSelectedContainer,
+      MainContainer: newMainContainer
+    });
+  }
+
   public AddContainer(type: string): void {
     if (this.state.SelectedContainer === null ||
       this.state.SelectedContainer === undefined) {
@@ -111,13 +151,15 @@ class App extends React.Component<IAppProps> {
     const count = newCounters[type];
     const container = new Container({
       parent,
-      id: `${type}-${count}`,
-      x: 0,
-      y: 0,
-      width: properties?.Width,
-      height: parent.props.height,
+      properties: {
+        id: `${type}-${count}`,
+        x: 0,
+        y: 0,
+        width: properties?.Width,
+        height: parent.props.properties.height,
+        ...properties.Style
+      },
       children: [],
-      style: properties.Style,
       userData: {
         type
       }
@@ -148,6 +190,7 @@ class App extends React.Component<IAppProps> {
           SelectedContainer={this.state.SelectedContainer}
           isOpen={this.state.isSVGSidebarOpen}
           onClick={() => this.ToggleSVGSidebar()}
+          onPropertyChange={(key: string, value: string) => this.OnPropertyChange(key, value)}
           selectContainer={(container: Container) => this.SelectContainer(container)}
         />
         <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>