diff --git a/src/Components/Editor/ContainerOperations.ts b/src/Components/Editor/ContainerOperations.ts index 3d9e91e..95a0889 100644 --- a/src/Components/Editor/ContainerOperations.ts +++ b/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> ): 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; diff --git a/src/Components/Editor/PropertiesOperations.ts b/src/Components/Editor/PropertiesOperations.ts index 59098a6..9f35e63 100644 --- a/src/Components/Editor/PropertiesOperations.ts +++ b/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; } } diff --git a/src/Components/Properties/DynamicForm.tsx b/src/Components/Properties/DynamicForm.tsx index b5665b6..0be155d 100644 --- a/src/Components/Properties/DynamicForm.tsx +++ b/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 = (props) => { labelClassName='' inputClassName='' type='number' - 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))} + value={props.properties.x.toString()} + onChange={(event) => props.onChange('x', event.target.value)} /> = (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)} /> = (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)} /> = (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)} /> = (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) } diff --git a/src/Components/Properties/StaticForm.tsx b/src/Components/Properties/StaticForm.tsx index 9f6055b..f16d196 100644 --- a/src/Components/Properties/StaticForm.tsx +++ b/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 = (props) => { labelClassName='' inputClassName='' type='number' - defaultValue={transformX(props.properties.x, props.properties.width, props.properties.XPositionReference).toString()} + defaultValue={props.properties.x.toString()} /> = (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 xChildrenEnd = transformX(lastChild.properties.x, lastChild.properties.width, lastChild.properties.XPositionReference); + let xChildrenStart = lastChild.properties.x; + 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 { - 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 { +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; + return [transformedX, y]; } diff --git a/src/Components/SVG/Elements/Selector.tsx b/src/Components/SVG/Elements/Selector.tsx index e70ca79..101f19a 100644 --- a/src/Components/SVG/Elements/Selector.tsx +++ b/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 = (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 = (props) => { return (