From 05622c3a64ba96e566bfaee7a8d225183a12e73c Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Mon, 1 Aug 2022 19:42:28 +0200
Subject: [PATCH] Fix type check + moved width and height to rect property

---
 src/App.tsx                               | 4 ++--
 src/Components/Properties/Properties.tsx  | 5 ++---
 src/Components/SVG/Elements/Container.tsx | 4 ++++
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 9e78592..299e9dd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -82,7 +82,7 @@ class App extends React.Component<IAppProps> {
     } as IAppProps);
   }
 
-  public OnPropertyChange(key: string, value: string) {
+  public OnPropertyChange(key: string, value: string | number) {
     if (this.state.SelectedContainer === null ||
       this.state.SelectedContainer === undefined) {
       throw new Error('Property was changed before selecting a Container');
@@ -93,7 +93,7 @@ class App extends React.Component<IAppProps> {
       throw new Error('Property was changed before the main container was added');
     }
 
-    const pair = {} as Record<string, string>;
+    const pair = {} as Record<string, string | number>;
     pair[key] = value;
     const properties = Object.assign(this.state.SelectedContainer.props.properties, pair);
     const props = {
diff --git a/src/Components/Properties/Properties.tsx b/src/Components/Properties/Properties.tsx
index 3c8c425..09c156d 100644
--- a/src/Components/Properties/Properties.tsx
+++ b/src/Components/Properties/Properties.tsx
@@ -42,7 +42,7 @@ export class Properties extends React.Component<IPropertiesProps, IPropertiesSta
     groupInput: React.ReactNode[]
   ) => {
     const id = `property-${key}`;
-    const type = typeof value === 'number' ? 'number' : 'text';
+    const type = isNaN(Number(value)) ? 'text' : 'number';
     const isDisabled = key === 'id'; // hardcoded
     groupInput.push(
       <div key={id} className='mt-4'>
@@ -52,8 +52,7 @@ export class Properties extends React.Component<IPropertiesProps, IPropertiesSta
           bg-slate-600 border-2 border-slate-600 rounded-lg shadow-sm placeholder-slate-400
           focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
          disabled:bg-slate-700 disabled:text-slate-400 disabled:border-slate-700 disabled:shadow-none
-         invalid:border-pink-500 invalid:text-pink-600
-         focus:invalid:border-pink-500 focus:invalid:ring-pink-5002'
+         '
           type={type}
           id={id}
           value={value}
diff --git a/src/Components/SVG/Elements/Container.tsx b/src/Components/SVG/Elements/Container.tsx
index 674b916..ab23a7d 100644
--- a/src/Components/SVG/Elements/Container.tsx
+++ b/src/Components/SVG/Elements/Container.tsx
@@ -31,6 +31,8 @@ export class Container extends React.Component<IContainerProps> {
     const style = Object.assign(defaultStyle, this.props.properties);
     style.x = 0;
     style.y = 0;
+    delete style.height;
+    delete style.width;
 
     return (
       <g
@@ -39,6 +41,8 @@ export class Container extends React.Component<IContainerProps> {
         key={`container-${this.props.properties.id}`}
       >
         <rect
+          width={this.props.properties.width}
+          height={this.props.properties.height}
           style={style}
         >
         </rect>