Fix tests + implement radio buttons for XPositionReference

src/Components/App/MenuActions.ts

@@ -4,6 +4,7 @@ import { ContainerModel } from '../../Interfaces/IContainerModel';
 import { fetchConfiguration } from '../API/api';
 import { IEditorState } from '../../Interfaces/IEditorState';
 import { LoadState } from './Load';
+import { XPositionReference } from '../../Enums/XPositionReference';
 
 export function NewEditor(
   setEditorState: Dispatch<SetStateAction<IEditorState>>,
@@ -24,6 +25,7 @@ export function NewEditor(
           height: Number(configuration.MainContainer.Height),
           isRigidBody: false,
           isAnchor: false,
+          XPositionReference: XPositionReference.Left,
           style: {
             fillOpacity: 0,
             stroke: 'black'

src/Components/Editor/ContainerOperations.ts

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction } from 'react';
 import { IHistoryState } from '../../Interfaces/IHistoryState';
 import { IConfiguration } from '../../Interfaces/IConfiguration';
 import { ContainerModel, IContainerModel } from '../../Interfaces/IContainerModel';
@@ -8,6 +8,7 @@ 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';
 
 /**
  * Select a container
@@ -217,7 +218,7 @@ export function AddContainer(
     height,
     isRigidBody: false,
     isAnchor: false,
-    xPositionReference: containerConfig.XPositionReference,
+    XPositionReference: containerConfig.XPositionReference ?? XPositionReference.Left,
     style: containerConfig.Style
   };
 
@@ -270,7 +271,7 @@ function ApplyAddMethod(index: number, containerConfig: IAvailableContainer, par
         lastChild.properties.x,
         lastChild.properties.y,
         lastChild.properties.width,
-        lastChild.properties.xPositionReference
+        lastChild.properties.XPositionReference
       );
 
       x += transformedX + lastChild.properties.width;

src/Components/Editor/PropertiesOperations.ts

@@ -97,15 +97,28 @@ export function OnPropertiesSubmit(
 
   // Assign container properties
   for (const property in container.properties) {
-    const input: HTMLInputElement | null = (event.target as HTMLFormElement).querySelector(`#${property}`);
+    const input: HTMLInputElement | HTMLDivElement | null = (event.target as HTMLFormElement).querySelector(`#${property}`);
 
     if (input === null) {
       continue;
     }
 
-    (container.properties as any)[property] = input.value;
-    if (INPUT_TYPES[property] === 'number') {
-      (container.properties as any)[property] = Number(input.value);
+    if (input instanceof HTMLInputElement) {
+      (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`);
+
+      if (radiobutton === null) {
+        continue;
+      }
+
+      (container.properties as any)[property] = radiobutton.value;
+      if (INPUT_TYPES[property] === 'number') {
+        (container.properties as any)[property] = Number(radiobutton.value);
+      }
     }
   }
 

src/Components/ElementsSidebar/ElementsSidebar.test.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { fireEvent, render, screen } from '../../utils/test-utils';
 import { ElementsSidebar } from './ElementsSidebar';
 import { IContainerModel } from '../../Interfaces/IContainerModel';
+import { XPositionReference } from '../../Enums/XPositionReference';
 
 describe.concurrent('Elements sidebar', () => {
   it('With a MainContainer', () => {
@@ -17,6 +18,7 @@ describe.concurrent('Elements sidebar', () => {
           y: 0,
           width: 2000,
           height: 100,
+          XPositionReference: XPositionReference.Left,
           isRigidBody: false,
           isAnchor: false
         },
@@ -49,7 +51,8 @@ describe.concurrent('Elements sidebar', () => {
         width: 2000,
         height: 100,
         isRigidBody: false,
-        isAnchor: false
+        isAnchor: false,
+        XPositionReference: XPositionReference.Left
       },
       userData: {}
     };
@@ -105,6 +108,7 @@ describe.concurrent('Elements sidebar', () => {
         y: 0,
         width: 2000,
         height: 100,
+        XPositionReference: XPositionReference.Left,
         isRigidBody: false,
         isAnchor: false
       },
@@ -123,7 +127,8 @@ describe.concurrent('Elements sidebar', () => {
           width: 0,
           height: 0,
           isRigidBody: false,
-          isAnchor: false
+          isAnchor: false,
+          XPositionReference: XPositionReference.Left
         },
         userData: {}
       }
@@ -140,6 +145,7 @@ describe.concurrent('Elements sidebar', () => {
           y: 0,
           width: 0,
           height: 0,
+          XPositionReference: XPositionReference.Left,
           isRigidBody: false,
           isAnchor: false
         },
@@ -178,6 +184,7 @@ describe.concurrent('Elements sidebar', () => {
         y: 0,
         width: 2000,
         height: 100,
+        XPositionReference: XPositionReference.Left,
         isRigidBody: false,
         isAnchor: false
       },
@@ -194,6 +201,7 @@ describe.concurrent('Elements sidebar', () => {
         y: 0,
         width: 0,
         height: 0,
+        XPositionReference: XPositionReference.Left,
         isRigidBody: false,
         isAnchor: false
       },

src/Components/Properties/DynamicForm.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { XPositionReference } from '../../Enums/XPositionReference';
 import IProperties from '../../Interfaces/IProperties';
 import { InputGroup } from '../InputGroup/InputGroup';
 
@@ -102,15 +103,41 @@ const DynamicForm: React.FunctionComponent<IDynamicFormProps> = (props) => {
         checked={props.properties.isAnchor}
         onChange={(event) => props.onChange('isAnchor', event.target.checked)}
       />
-      <InputGroup
-        labelText='Horizontal alignment'
-        inputKey='xPositionReference'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        checked={props.properties.isRigidBody}
-        onChange={(event) => props.onChange('xPositionReference', event.target.value)}
-      />
+      <label>
+        Horizontal alignment
+      </label>
+      <div id='XPositionReference'>
+        <label>
+          <input
+            type='radio'
+            name='XPositionReference'
+            value={XPositionReference.Left}
+            checked={props.properties.XPositionReference === XPositionReference.Left}
+            onChange={(event) => props.onChange('XPositionReference', (event.target as HTMLInputElement).value)}
+          />
+        Left
+        </label>
+        <label>
+          <input
+            type='radio'
+            name='XPositionReference'
+            value={XPositionReference.Center}
+            checked={props.properties.XPositionReference === XPositionReference.Center}
+            onChange={(event) => props.onChange('XPositionReference', (event.target as HTMLInputElement).value)}
+          />
+        Center
+        </label>
+        <label>
+          <input
+            type='radio'
+            name='XPositionReference'
+            value={XPositionReference.Right}
+            checked={props.properties.XPositionReference === XPositionReference.Right}
+            onChange={(event) => props.onChange('XPositionReference', (event.target as HTMLInputElement).value)}
+          />
+        Right
+        </label>
+      </div>
       { getCSSInputs(props.properties, props.onChange) }
     </div>
   );

src/Components/Properties/Properties.test.tsx

@@ -1,6 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import * as React from 'react';
 import { expect, describe, it, vi } from 'vitest';
+import { XPositionReference } from '../../Enums/XPositionReference';
 import IProperties from '../../Interfaces/IProperties';
 import { Properties } from './Properties';
 
@@ -26,6 +27,7 @@ describe.concurrent('Properties', () => {
       y: 1,
       width: 1,
       height: 1,
+      XPositionReference: XPositionReference.Left,
       isRigidBody: false,
       isAnchor: false
     };

src/Components/Properties/StaticForm.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { XPositionReference } from '../../Enums/XPositionReference';
 import IProperties from '../../Interfaces/IProperties';
 import { InputGroup } from '../InputGroup/InputGroup';
 
@@ -96,14 +97,39 @@ const StaticForm: React.FunctionComponent<IStaticFormProps> = (props) => {
         type='checkbox'
         defaultChecked={props.properties.isAnchor}
       />
-      <InputGroup
-        labelText='Horizontal alignment'
-        inputKey='xPositionReference'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        defaultChecked={props.properties.isRigidBody}
-      />
+      <label>
+        Horizontal alignment
+      </label>
+      <div id='XPositionReference'>
+        <label>
+          <input
+            type='radio'
+            name='XPositionReference'
+            value={XPositionReference.Left}
+            defaultChecked={props.properties.XPositionReference === XPositionReference.Left}
+          />
+        Left
+        </label>
+        <label>
+          <input
+            type='radio'
+            name='XPositionReference'
+            value={XPositionReference.Center}
+            defaultChecked={props.properties.XPositionReference === XPositionReference.Center}
+          />
+        Center
+        </label>
+        <label>
+          <input
+            type='radio'
+            name='XPositionReference'
+            value={XPositionReference.Right}
+            defaultChecked={props.properties.XPositionReference === XPositionReference.Right}
+          />
+        Right
+        </label>
+      </div>
+
       { getCSSInputs(props.properties) }
     </div>
   </form>);

src/Components/SVG/Elements/Container.tsx

@@ -22,7 +22,7 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
     props.model.properties.x,
     props.model.properties.y,
     props.model.properties.width,
-    props.model.properties.xPositionReference
+    props.model.properties.XPositionReference
   );
   const transform = `translate(${transformedX}, ${transformedY})`;
 

src/Components/SVG/Elements/Selector.tsx

@@ -20,7 +20,7 @@ export const Selector: React.FC<ISelectorProps> = (props) => {
     x,
     y,
     props.selected.properties.width,
-    props.selected.properties.xPositionReference
+    props.selected.properties.XPositionReference
   );
   const [width, height] = [
     props.selected.properties.width,

src/Interfaces/IProperties.ts

@@ -19,6 +19,6 @@ export default interface IProperties {
   height: number
   isRigidBody: boolean
   isAnchor: boolean
-  xPositionReference?: XPositionReference
+  XPositionReference: XPositionReference
   style?: React.CSSProperties
 }

src/utils/default.ts

@@ -1,3 +1,4 @@
+import { XPositionReference } from '../Enums/XPositionReference';
 import { IConfiguration } from '../Interfaces/IConfiguration';
 import IProperties from '../Interfaces/IProperties';
 
@@ -34,6 +35,7 @@ export const DEFAULT_MAINCONTAINER_PROPS: IProperties = {
   height: Number(DEFAULT_CONFIG.MainContainer.Height),
   isRigidBody: false,
   isAnchor: false,
+  XPositionReference: XPositionReference.Left,
   style: {
     stroke: 'black',
     fillOpacity: 0