From 9ce184df2606537ef0a5f99f756d355878e65e97 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Tue, 16 Aug 2022 13:12:53 +0200 Subject: [PATCH] Fix tests + implement radio buttons for XPositionReference --- src/Components/App/MenuActions.ts | 2 + src/Components/Editor/ContainerOperations.ts | 7 +-- src/Components/Editor/PropertiesOperations.ts | 21 +++++++-- .../ElementsSidebar/ElementsSidebar.test.tsx | 12 ++++- src/Components/Properties/DynamicForm.tsx | 45 +++++++++++++++---- src/Components/Properties/Properties.test.tsx | 2 + src/Components/Properties/Properties.tsx | 2 +- src/Components/Properties/StaticForm.tsx | 42 +++++++++++++---- src/Components/SVG/Elements/Container.tsx | 2 +- src/Components/SVG/Elements/Selector.tsx | 2 +- src/Interfaces/IProperties.ts | 2 +- src/utils/default.ts | 2 + 12 files changed, 111 insertions(+), 30 deletions(-) diff --git a/src/Components/App/MenuActions.ts b/src/Components/App/MenuActions.ts index b9a455e..1e37328 100644 --- a/src/Components/App/MenuActions.ts +++ b/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>, @@ -24,6 +25,7 @@ export function NewEditor( height: Number(configuration.MainContainer.Height), isRigidBody: false, isAnchor: false, + XPositionReference: XPositionReference.Left, style: { fillOpacity: 0, stroke: 'black' diff --git a/src/Components/Editor/ContainerOperations.ts b/src/Components/Editor/ContainerOperations.ts index d778d82..95a0889 100644 --- a/src/Components/Editor/ContainerOperations.ts +++ b/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; diff --git a/src/Components/Editor/PropertiesOperations.ts b/src/Components/Editor/PropertiesOperations.ts index 92e707d..9f35e63 100644 --- a/src/Components/Editor/PropertiesOperations.ts +++ b/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); + } } } diff --git a/src/Components/ElementsSidebar/ElementsSidebar.test.tsx b/src/Components/ElementsSidebar/ElementsSidebar.test.tsx index 8d34480..f207a46 100644 --- a/src/Components/ElementsSidebar/ElementsSidebar.test.tsx +++ b/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 }, diff --git a/src/Components/Properties/DynamicForm.tsx b/src/Components/Properties/DynamicForm.tsx index 7ef1031..008c6c2 100644 --- a/src/Components/Properties/DynamicForm.tsx +++ b/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 = (props) => { checked={props.properties.isAnchor} onChange={(event) => props.onChange('isAnchor', event.target.checked)} /> - props.onChange('xPositionReference', event.target.value)} - /> + +
+ + + +
{ getCSSInputs(props.properties, props.onChange) } ); diff --git a/src/Components/Properties/Properties.test.tsx b/src/Components/Properties/Properties.test.tsx index 8b8db31..e88bb68 100644 --- a/src/Components/Properties/Properties.test.tsx +++ b/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 }; diff --git a/src/Components/Properties/Properties.tsx b/src/Components/Properties/Properties.tsx index b72eead..cb38a60 100644 --- a/src/Components/Properties/Properties.tsx +++ b/src/Components/Properties/Properties.tsx @@ -33,4 +33,4 @@ export const Properties: React.FC = (props: IPropertiesProps) /> ); -}; \ No newline at end of file +}; diff --git a/src/Components/Properties/StaticForm.tsx b/src/Components/Properties/StaticForm.tsx index 06a186e..bd3bcec 100644 --- a/src/Components/Properties/StaticForm.tsx +++ b/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 = (props) => { type='checkbox' defaultChecked={props.properties.isAnchor} /> - + +
+ + + +
+ { getCSSInputs(props.properties) } ); diff --git a/src/Components/SVG/Elements/Container.tsx b/src/Components/SVG/Elements/Container.tsx index 11ec38d..3fea3a4 100644 --- a/src/Components/SVG/Elements/Container.tsx +++ b/src/Components/SVG/Elements/Container.tsx @@ -22,7 +22,7 @@ export const Container: React.FC = (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})`; diff --git a/src/Components/SVG/Elements/Selector.tsx b/src/Components/SVG/Elements/Selector.tsx index 5a0bb96..101f19a 100644 --- a/src/Components/SVG/Elements/Selector.tsx +++ b/src/Components/SVG/Elements/Selector.tsx @@ -20,7 +20,7 @@ export const Selector: React.FC = (props) => { x, y, props.selected.properties.width, - props.selected.properties.xPositionReference + props.selected.properties.XPositionReference ); const [width, height] = [ props.selected.properties.width, diff --git a/src/Interfaces/IProperties.ts b/src/Interfaces/IProperties.ts index c04584f..2513d74 100644 --- a/src/Interfaces/IProperties.ts +++ b/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 } diff --git a/src/utils/default.ts b/src/utils/default.ts index ae952bd..97df4b0 100644 --- a/src/utils/default.ts +++ b/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