Big refactoring with properties + Implement Property

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Properties } from '../Properties/Properties';
 import { Container } from '../SVG/Elements/Container';
 
 interface IElementsSidebarProps {
@@ -6,6 +7,7 @@ interface IElementsSidebarProps {
   isOpen: boolean,
   SelectedContainer: Container | null,
   onClick: () => void,
+  onPropertyChange: (key: string, value: string) => void,
   selectContainer: (container: Container) => void
 }
 
@@ -39,10 +41,10 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
     const containerRows: React.ReactNode[] = [];
     this.iterateChilds((container: Container) => {
       const depth: number = Container.getDepth(container);
-      const key = container.props.id.toString();
+      const key = container.props.properties.id.toString();
       const text = '|\t'.repeat(depth) + key;
       const selectedClass: string = this.props.SelectedContainer !== null &&
-        this.props.SelectedContainer.props.id === container.props.id
+        this.props.SelectedContainer.props.properties.id === container.props.properties.id
         ? 'bg-blue-500 hover:bg-blue-600'
         : 'bg-slate-400 hover:bg-slate-600';
       containerRows.push(
@@ -53,7 +55,7 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
     });
 
     return (
-      <div className={`fixed bg-slate-400 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
+      <div className={`fixed flex flex-col bg-slate-400 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
         <button className='close-button hover:bg-slate-600 justify-start' onClick={this.props.onClick}>
           &times; Close
         </button>
@@ -63,6 +65,7 @@ export class ElementsSidebar extends React.Component<IElementsSidebarProps> {
         <div className='overflow-auto divide-y divide-solid divide-slate-500'>
           { containerRows }
         </div>
+        <Properties properties={this.props.SelectedContainer?.GetProperties()} onChange={this.props.onPropertyChange}></Properties>
       </div>
     );
   }

src/Components/Properties/Properties.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import ContainerProperties from '../../Interfaces/Properties';
+
+interface IPropertiesProps {
+  properties?: ContainerProperties,
+  onChange: (key: string, value: string) => void
+}
+
+interface IPropertiesState {
+  hasUpdate: boolean
+}
+
+export class Properties extends React.Component<IPropertiesProps, IPropertiesState> {
+  public state: IPropertiesState;
+
+  constructor(props: IPropertiesProps) {
+    super(props);
+    this.state = {
+      hasUpdate: false
+    };
+  }
+
+  public render() {
+    if (this.props.properties === undefined) {
+      return <div></div>;
+    }
+
+    const groupInput: React.ReactNode[] = [];
+    Object.entries(this.props.properties).forEach((pair) => this.handleProperties(pair, groupInput));
+
+    return (
+      <div>
+        { groupInput }
+      </div>
+    );
+  }
+
+  public handleProperties = ([key, value]: [string, string | number], groupInput: React.ReactNode[]) => {
+    const id = `property-${key}`;
+    const type = typeof value === 'number' ? 'number' : 'text';
+    groupInput.push(
+      <div key={id}>
+        <label className='' htmlFor={id}>{key}</label>
+        <input className='text-black' type={type} id={id} value={value} onChange={(event) => this.props.onChange(key, event.target.value)} />
+      </div>
+    );
+  };
+}

src/Components/SVG/Elements/Container.tsx

@@ -1,16 +1,12 @@
 import * as React from 'react';
+import Properties from '../../../Interfaces/Properties';
 
 interface IContainerProps {
   // eslint-disable-next-line no-use-before-define
   parent: Container | null,
-  id: string,
   // eslint-disable-next-line no-use-before-define
   children: Container[],
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  style?: React.CSSProperties,
+  properties: Properties,
   userData?: Record<string, string | number>
 }
 
@@ -18,17 +14,25 @@ export class Container extends React.Component<IContainerProps> {
   componentWillUnMount() {
   }
 
+  public GetProperties(): Properties {
+    const properties : Properties = {
+      ...this.props.properties
+    };
+    return properties;
+  }
+
   public render(): React.ReactNode {
     const containersElements = this.props.children.map(child => child.render());
+    const style = Object.assign({}, this.props.properties);
+    style.x = 0;
+    style.y = 0;
     return (
       <g
-        transform={`translate(${this.props.x}, ${this.props.y})`}
-        key={`container-${this.props.id}`}
+        transform={`translate(${this.props.properties.x}, ${this.props.properties.y})`}
+        key={`container-${this.props.properties.id}`}
       >
         <rect
-          width={this.props.width}
-          height={this.props.height}
-          style={this.props.style}
+          style={style}
         >
         </rect>
         { containersElements }