diff --git a/src/Components/Editor/ContainerOperations.ts b/src/Components/Editor/ContainerOperations.ts index 95a0889..28af9e7 100644 --- a/src/Components/Editor/ContainerOperations.ts +++ b/src/Components/Editor/ContainerOperations.ts @@ -7,7 +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 { transformX } from '../SVG/Elements/Container'; import { XPositionReference } from '../../Enums/XPositionReference'; /** @@ -267,14 +267,7 @@ function ApplyAddMethod(index: number, containerConfig: IAvailableContainer, par const lastChild: IContainerModel | undefined = parent.children.at(index - 1); if (lastChild !== undefined) { - const [transformedX] = transformPosition( - lastChild.properties.x, - lastChild.properties.y, - lastChild.properties.width, - lastChild.properties.XPositionReference - ); - - x += transformedX + lastChild.properties.width; + x += (lastChild.properties.x + lastChild.properties.width); } } return x; diff --git a/src/Components/Editor/PropertiesOperations.ts b/src/Components/Editor/PropertiesOperations.ts index 9f35e63..59098a6 100644 --- a/src/Components/Editor/PropertiesOperations.ts +++ b/src/Components/Editor/PropertiesOperations.ts @@ -6,6 +6,7 @@ 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 @@ -40,11 +41,7 @@ export function OnPropertyChange( if (isStyle) { (container.properties.style as any)[key] = value; } else { - if (INPUT_TYPES[key] === 'number') { - (container.properties as any)[key] = Number(value); - } else { - (container.properties as any)[key] = value; - } + (container.properties as any)[key] = value; } if (container.properties.isAnchor) { @@ -104,10 +101,33 @@ export function OnPropertiesSubmit( } if (input instanceof HTMLInputElement) { - (container.properties as any)[property] = input.value; 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; } else if (input instanceof HTMLDivElement) { const radiobutton: HTMLInputElement | null = input.querySelector(`input[name="${property}"]:checked`); @@ -115,10 +135,12 @@ 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; } } diff --git a/src/Components/Properties/DynamicForm.tsx b/src/Components/Properties/DynamicForm.tsx index 0be155d..b5665b6 100644 --- a/src/Components/Properties/DynamicForm.tsx +++ b/src/Components/Properties/DynamicForm.tsx @@ -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 = (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))} /> = (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))} /> = (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))} /> = (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))} /> = (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) } diff --git a/src/Components/Properties/StaticForm.tsx b/src/Components/Properties/StaticForm.tsx index f16d196..9f6055b 100644 --- a/src/Components/Properties/StaticForm.tsx +++ b/src/Components/Properties/StaticForm.tsx @@ -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 { transformX } from '../SVG/Elements/Container'; interface IStaticFormProps { properties: IProperties @@ -57,7 +58,7 @@ const StaticForm: React.FunctionComponent = (props) => { labelClassName='' inputClassName='' type='number' - defaultValue={props.properties.x.toString()} + defaultValue={transformX(props.properties.x, props.properties.width, props.properties.XPositionReference).toString()} /> = (props: IContainerProps) => const xText = props.model.properties.width / 2; const yText = props.model.properties.height / 2; - 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})`; + const transform = `translate(${props.model.properties.x}, ${props.model.properties.y})`; // g style const defaultStyle: React.CSSProperties = { @@ -107,17 +101,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 = lastChild.properties.x; - let xChildrenEnd = lastChild.properties.x; + let xChildrenStart = transformX(lastChild.properties.x, lastChild.properties.width, lastChild.properties.XPositionReference); + let xChildrenEnd = transformX(lastChild.properties.x, lastChild.properties.width, lastChild.properties.XPositionReference); // Find the min and max for (let i = props.model.children.length - 2; i >= 0; i--) { const child = props.model.children[i]; - const left = child.properties.x; + const left = transformX(child.properties.x, child.properties.width, child.properties.XPositionReference); if (left < xChildrenStart) { xChildrenStart = left; } - const right = child.properties.x; + const right = transformX(child.properties.x, child.properties.width, child.properties.XPositionReference); if (right > xChildrenEnd) { xChildrenEnd = right; } @@ -128,12 +122,22 @@ function GetChildrenDimensionProps(props: IContainerProps, dimensionMargin: numb return { childrenId, xChildrenStart, xChildrenEnd, yChildren, textChildren }; } -export function transformPosition(x: number, y: number, width: number, xPositionReference = XPositionReference.Left): [number, number] { +export function transformX(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; +} + +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, y]; + return transformedX; } diff --git a/src/Components/SVG/Elements/Selector.tsx b/src/Components/SVG/Elements/Selector.tsx index 101f19a..e70ca79 100644 --- a/src/Components/SVG/Elements/Selector.tsx +++ b/src/Components/SVG/Elements/Selector.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { IContainerModel } from '../../../Interfaces/IContainerModel'; import { getAbsolutePosition } from '../../../utils/itertools'; -import { transformPosition } from './Container'; interface ISelectorProps { selected: IContainerModel | null @@ -16,12 +15,6 @@ export const Selector: React.FC = (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 @@ -38,8 +31,8 @@ export const Selector: React.FC = (props) => { return (