Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Final fix for XPositionReference : We are now lying to the user in the form. The transformation is applied to the value that is shown but the transformation is restored for the computing afterward

Browse source
This commit is contained in:
Eric NGUYEN 2022-08-16 16:34:32 +02:00
parent 7014f520b9
commit 1622816035
6 changed files with 59 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/Components/Properties/DynamicForm.tsx
View file

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