Better description of add + fix regression form validation + fix http server not using strokeWidth + add doc about hardcoded

docs/Hardcoded.md

@@ -0,0 +1,14 @@
+> Here you will find the documentation of desastrous stuff that I made
+
+# XPositionReference
+
+XPositionReference is used as a fake horizontal offset indicator.
+
+The truth is that the svg will always take the left for its transformations and the best for us is to do the same.
+
+That's why everything that is shown to the user about XPositionReference is an illusion. Like for example:
+- The inputs, see `PropertiesOperations.ts`, `StaticForm`, `DynamicForm`.
+- Child dimensions, see `Container.ts`.
+
+
+Look for use of `transformX()` and `restoreX()`.

src/Components/Editor/ContainerOperations.ts

@@ -240,7 +240,7 @@ export function AddContainer(
 
   // Update the state
   history.push({
-    LastAction: 'Add container',
+    LastAction: `Add ${type} in ${parentClone.properties.id}`,
     MainContainer: clone,
     SelectedContainer: parentClone,
     SelectedContainerId: parentClone.properties.id,

src/Components/Editor/PropertiesOperations.ts

@@ -3,8 +3,7 @@ import { IContainerModel, ContainerModel } from '../../Interfaces/IContainerMode
 import { IHistoryState } from '../../Interfaces/IHistoryState';
 import { findContainerById } from '../../utils/itertools';
 import { getCurrentHistory } from './Editor';
-import { constraintBodyInsideUnallocatedWidth, RecalculatePhysics } from './Behaviors/RigidBodyBehaviors';
-import { INPUT_TYPES } from '../Properties/PropertiesInputTypes';
+import { RecalculatePhysics } from './Behaviors/RigidBodyBehaviors';
 import { ImposePosition } from './Behaviors/AnchorBehaviors';
 import { restoreX } from '../SVG/Elements/Container';
 
@@ -138,8 +137,9 @@ const submitHTMLInput = (
   property: string,
   form: HTMLFormElement
 ): void => {
-  if (INPUT_TYPES[property] !== 'number') {
+  if (input.type !== 'number') {
     (container.properties as any)[property] = input.value;
+    return;
   }
 
   if (property === 'x') {
@@ -188,7 +188,7 @@ const submitRadioButtons = (
     return;
   }
 
-  if (INPUT_TYPES[property] === 'number') {
+  if (radiobutton.type === 'radio') {
     (container.properties as any)[property] = Number(radiobutton.value);
     return;
   }

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -116,7 +116,7 @@ export const ElementsSidebar: React.FC<IElementsSidebarProps> = (props: IElement
       </div>
       <div ref={elementRef} className='h-96 text-gray-800'>
         <List
-          className='List'
+          className='List divide-y divide-black'
           itemCount={containers.length}
           itemSize={35}
           height={384}

src/Components/Properties/PropertiesInputTypes.tsx

@@ -1,9 +0,0 @@
-export const INPUT_TYPES: Record<string, string> = {
-  x: 'number',
-  y: 'number',
-  width: 'number',
-  height: 'number',
-  isRigidBody: 'checkbox',
-  isAnchor: 'checkbox',
-  XPositionReference: 'number'
-};

test-server/http.js

@@ -56,10 +56,9 @@ const GetSVGLayoutConfiguration = () => {
         Width: 500,
         Style: {
           fillOpacity: 1,
-          borderWidth: 2,
+          strokeWidth: 2,
           stroke: 'red',
           fill: '#78350F',
-          stroke: 'red'
         }
       },
       {
@@ -70,7 +69,7 @@ const GetSVGLayoutConfiguration = () => {
         Height: 180,
         Style: {
           fillOpacity: 1,
-          borderWidth: 2,
+          strokeWidth: 2,
           stroke: 'green',
           fill: 'white'
         }
@@ -79,7 +78,7 @@ const GetSVGLayoutConfiguration = () => {
         Type: 'Remplissage',
         Style: {
           fillOpacity: 1,
-          borderWidth: 2,
+          strokeWidth: 2,
           stroke: '#bfdbfe',
           fill: '#bfdbfe'
         }
@@ -90,7 +89,7 @@ const GetSVGLayoutConfiguration = () => {
         XPositionReference: 1,
         Style: {
           fillOpacity: 0,
-          borderWidth: 2,
+          strokeWidth: 2,
           stroke: '#713f12',
           fill: '#713f12',
         }