src/Components/Editor/ContainerOperations.ts

@@ -7,6 +7,7 @@ import { getCurrentHistory } from './Editor';
 import IProperties from '../../Interfaces/IProperties';
 import { AddMethod } from '../../Enums/AddMethod';
 import { IAvailableContainer } from '../../Interfaces/IAvailableContainer';
+import { transformPosition } from '../SVG/Elements/Container';
 import { XPositionReference } from '../../Enums/XPositionReference';
 
 /**
@@ -57,7 +58,7 @@ export function DeleteContainer(
   setHistoryCurrentStep: Dispatch<SetStateAction<number>>
 ): void {
   const history = getCurrentHistory(fullHistory, historyCurrentStep);
-  const current = history[history.length - 1];
+  const current = history[historyCurrentStep];
 
   const mainContainerClone: IContainerModel = structuredClone(current.MainContainer);
   const container = findContainerById(mainContainerClone, containerId);
@@ -266,7 +267,14 @@ function ApplyAddMethod(index: number, containerConfig: IAvailableContainer, par
     const lastChild: IContainerModel | undefined = parent.children.at(index - 1);
 
     if (lastChild !== undefined) {
-      x += (lastChild.properties.x + lastChild.properties.width);
+      const [transformedX] = transformPosition(
+        lastChild.properties.x,
+        lastChild.properties.y,
+        lastChild.properties.width,
+        lastChild.properties.XPositionReference
+      );
+
+      x += transformedX + lastChild.properties.width;
     }
   }
   return x;

src/Components/Editor/PropertiesOperations.ts

@@ -6,7 +6,6 @@ import { getCurrentHistory } from './Editor';
 import { RecalculatePhysics } from './Behaviors/RigidBodyBehaviors';
 import { INPUT_TYPES } from '../Properties/PropertiesInputTypes';
 import { ImposePosition } from './Behaviors/AnchorBehaviors';
-import { restoreX } from '../SVG/Elements/Container';
 
 /**
   * Handled the property change event in the properties form
@@ -41,7 +40,11 @@ export function OnPropertyChange(
   if (isStyle) {
     (container.properties.style as any)[key] = value;
   } else {
-    (container.properties as any)[key] = value;
+    if (INPUT_TYPES[key] === 'number') {
+      (container.properties as any)[key] = Number(value);
+    } else {
+      (container.properties as any)[key] = value;
+    }
   }
 
   if (container.properties.isAnchor) {
@@ -101,33 +104,10 @@ export function OnPropertiesSubmit(
     }
 
     if (input instanceof HTMLInputElement) {
-      if (INPUT_TYPES[property] === 'number') {
-        if (property === 'x') {
-          // Hardcoded fix for XPositionReference
-
-          const inputWidth: HTMLInputElement | null = (event.target as HTMLFormElement).querySelector('#width');
-          const inputRadio: HTMLDivElement | null = (event.target as HTMLFormElement).querySelector('#XPositionReference');
-
-          if (inputWidth === null || inputRadio === null) {
-            throw new Error('[OnPropertiesSubmit] Missing inputs for width or XPositionReference');
-          }
-
-          const radiobutton: HTMLInputElement | null = inputRadio.querySelector('input[name="XPositionReference"]:checked');
-
-          if (radiobutton === null) {
-            throw new Error('[OnPropertiesSubmit] Missing inputs for XPositionReference');
-          }
-
-          const x = restoreX(Number(input.value), Number(inputWidth.value), Number(radiobutton.value));
-          (container.properties as any)[property] = x;
-          continue;
-        }
-
-        (container.properties as any)[property] = Number(input.value);
-        continue;
-      }
-
       (container.properties as any)[property] = input.value;
+      if (INPUT_TYPES[property] === 'number') {
+        (container.properties as any)[property] = Number(input.value);
+      }
     } else if (input instanceof HTMLDivElement) {
       const radiobutton: HTMLInputElement | null = input.querySelector(`input[name="${property}"]:checked`);
 
@@ -135,12 +115,10 @@ export function OnPropertiesSubmit(
         continue;
       }
 
+      (container.properties as any)[property] = radiobutton.value;
       if (INPUT_TYPES[property] === 'number') {
         (container.properties as any)[property] = Number(radiobutton.value);
-        continue;
       }
-
-      (container.properties as any)[property] = radiobutton.value;
     }
   }
 

src/Components/Properties/DynamicForm.tsx

@@ -4,7 +4,6 @@ import { XPositionReference } from '../../Enums/XPositionReference';
 import IProperties from '../../Interfaces/IProperties';
 import { InputGroup } from '../InputGroup/InputGroup';
 import { RadioGroupButtons } from '../RadioGroupButtons/RadioGroupButtons';
-import { restoreX, transformX } from '../SVG/Elements/Container';
 
 interface IDynamicFormProps {
   properties: IProperties
@@ -58,8 +57,8 @@ const DynamicForm: React.FunctionComponent<IDynamicFormProps> = (props) => {
         labelClassName=''
         inputClassName=''
         type='number'
-        value={transformX(props.properties.x, props.properties.width, props.properties.XPositionReference).toString()}
+        value={props.properties.x.toString()}
-        onChange={(event) => props.onChange('x', restoreX(Number(event.target.value), props.properties.width, props.properties.XPositionReference))}
+        onChange={(event) => props.onChange('x', event.target.value)}
       />
       <InputGroup
         labelText='y'
@@ -68,7 +67,7 @@ const DynamicForm: React.FunctionComponent<IDynamicFormProps> = (props) => {
         inputClassName=''
         type='number'
         value={props.properties.y.toString()}
-        onChange={(event) => props.onChange('y', Number(event.target.value))}
+        onChange={(event) => props.onChange('y', event.target.value)}
       />
       <InputGroup
         labelText='Width'
@@ -77,7 +76,7 @@ const DynamicForm: React.FunctionComponent<IDynamicFormProps> = (props) => {
         inputClassName=''
         type='number'
         value={props.properties.width.toString()}
-        onChange={(event) => props.onChange('width', Number(event.target.value))}
+        onChange={(event) => props.onChange('width', event.target.value)}
       />
       <InputGroup
         labelText='Height'
@@ -86,7 +85,7 @@ const DynamicForm: React.FunctionComponent<IDynamicFormProps> = (props) => {
         inputClassName=''
         type='number'
         value={props.properties.height.toString()}
-        onChange={(event) => props.onChange('height', Number(event.target.value))}
+        onChange={(event) => props.onChange('height', event.target.value)}
       />
       <InputGroup
         labelText='Rigid'
@@ -137,7 +136,7 @@ const DynamicForm: React.FunctionComponent<IDynamicFormProps> = (props) => {
             value: XPositionReference.Right.toString()
           }
         ]}
-        onChange={(event) => props.onChange('XPositionReference', Number(event.target.value))}
+        onChange={(event) => props.onChange('XPositionReference', event.target.value)}
       />
       { getCSSInputs(props.properties, props.onChange) }
     </div>

src/Components/Properties/StaticForm.tsx

@@ -4,7 +4,6 @@ import { XPositionReference } from '../../Enums/XPositionReference';
 import IProperties from '../../Interfaces/IProperties';
 import { InputGroup } from '../InputGroup/InputGroup';
 import { RadioGroupButtons } from '../RadioGroupButtons/RadioGroupButtons';
-import { transformX } from '../SVG/Elements/Container';
 
 interface IStaticFormProps {
   properties: IProperties
@@ -58,7 +57,7 @@ const StaticForm: React.FunctionComponent<IStaticFormProps> = (props) => {
         labelClassName=''
         inputClassName=''
         type='number'
-        defaultValue={transformX(props.properties.x, props.properties.width, props.properties.XPositionReference).toString()}
+        defaultValue={props.properties.x.toString()}
       />
       <InputGroup
         labelText='y'

src/Components/SVG/Elements/Container.tsx

@@ -18,7 +18,13 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
   const xText = props.model.properties.width / 2;
   const yText = props.model.properties.height / 2;
 
-  const transform = `translate(${props.model.properties.x}, ${props.model.properties.y})`;
+  const [transformedX, transformedY] = transformPosition(
+    props.model.properties.x,
+    props.model.properties.y,
+    props.model.properties.width,
+    props.model.properties.XPositionReference
+  );
+  const transform = `translate(${transformedX}, ${transformedY})`;
 
   // g style
   const defaultStyle: React.CSSProperties = {
@@ -101,17 +107,17 @@ function GetChildrenDimensionProps(props: IContainerProps, dimensionMargin: numb
   const childrenId = `dim-children-${props.model.properties.id}`;
 
   const lastChild = props.model.children[props.model.children.length - 1];
-  let xChildrenStart = transformX(lastChild.properties.x, lastChild.properties.width, lastChild.properties.XPositionReference);
+  let xChildrenStart = lastChild.properties.x;
-  let xChildrenEnd = transformX(lastChild.properties.x, lastChild.properties.width, lastChild.properties.XPositionReference);
+  let xChildrenEnd = lastChild.properties.x;
 
   // Find the min and max
   for (let i = props.model.children.length - 2; i >= 0; i--) {
     const child = props.model.children[i];
-    const left = transformX(child.properties.x, child.properties.width, child.properties.XPositionReference);
+    const left = child.properties.x;
     if (left < xChildrenStart) {
       xChildrenStart = left;
     }
-    const right = transformX(child.properties.x, child.properties.width, child.properties.XPositionReference);
+    const right = child.properties.x;
     if (right > xChildrenEnd) {
       xChildrenEnd = right;
     }
@@ -122,22 +128,12 @@ function GetChildrenDimensionProps(props: IContainerProps, dimensionMargin: numb
   return { childrenId, xChildrenStart, xChildrenEnd, yChildren, textChildren };
 }
 
-export function transformX(x: number, width: number, xPositionReference = XPositionReference.Left): number {
+export function transformPosition(x: number, y: number, width: number, xPositionReference = XPositionReference.Left): [number, number] {
-  let transformedX = x;
-  if (xPositionReference === XPositionReference.Center) {
-    transformedX += width / 2;
-  } else if (xPositionReference === XPositionReference.Right) {
-    transformedX += width;
-  }
-  return transformedX;
-}
-
-export function restoreX(x: number, width: number, xPositionReference = XPositionReference.Left): number {
   let transformedX = x;
   if (xPositionReference === XPositionReference.Center) {
     transformedX -= width / 2;
   } else if (xPositionReference === XPositionReference.Right) {
     transformedX -= width;
   }
-  return transformedX;
+  return [transformedX, y];
 }

src/Components/SVG/Elements/Selector.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { IContainerModel } from '../../../Interfaces/IContainerModel';
 import { getAbsolutePosition } from '../../../utils/itertools';
+import { transformPosition } from './Container';
 
 interface ISelectorProps {
   selected: IContainerModel | null
@@ -15,6 +16,12 @@ export const Selector: React.FC<ISelectorProps> = (props) => {
   }
 
   const [x, y] = getAbsolutePosition(props.selected);
+  const [transformedX, transformedY] = transformPosition(
+    x,
+    y,
+    props.selected.properties.width,
+    props.selected.properties.XPositionReference
+  );
   const [width, height] = [
     props.selected.properties.width,
     props.selected.properties.height
@@ -31,8 +38,8 @@ export const Selector: React.FC<ISelectorProps> = (props) => {
 
   return (
     <rect
-      x={x}
+      x={transformedX}
-      y={y}
+      y={transformedY}
       width={width}
       height={height}
       style={style}