diff --git a/src/Components/Editor/PropertiesOperations.ts b/src/Components/Editor/PropertiesOperations.ts index 59098a6..0e3802c 100644 --- a/src/Components/Editor/PropertiesOperations.ts +++ b/src/Components/Editor/PropertiesOperations.ts @@ -3,7 +3,7 @@ import { IContainerModel, ContainerModel } from '../../Interfaces/IContainerMode import { IHistoryState } from '../../Interfaces/IHistoryState'; import { findContainerById } from '../../utils/itertools'; import { getCurrentHistory } from './Editor'; -import { RecalculatePhysics } from './Behaviors/RigidBodyBehaviors'; +import { constraintBodyInsideUnallocatedWidth, RecalculatePhysics } from './Behaviors/RigidBodyBehaviors'; import { INPUT_TYPES } from '../Properties/PropertiesInputTypes'; import { ImposePosition } from './Behaviors/AnchorBehaviors'; import { restoreX } from '../SVG/Elements/Container'; @@ -93,64 +93,28 @@ export function OnPropertiesSubmit( } // Assign container properties + const form: HTMLFormElement = event.target as HTMLFormElement; for (const property in container.properties) { - const input: HTMLInputElement | HTMLDivElement | null = (event.target as HTMLFormElement).querySelector(`#${property}`); + const input: HTMLInputElement | HTMLDivElement | null = form.querySelector(`#${property}`); if (input === null) { continue; } if (input instanceof HTMLInputElement) { - if (INPUT_TYPES[property] === 'number') { - if (property === 'x') { - // Hardcoded fix for XPositionReference + submitHTMLInput(input, container, property, form); + continue; + } - 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`); - - if (radiobutton === null) { - continue; - } - - if (INPUT_TYPES[property] === 'number') { - (container.properties as any)[property] = Number(radiobutton.value); - continue; - } - - (container.properties as any)[property] = radiobutton.value; + if (input instanceof HTMLDivElement) { + submitRadioButtons(input, container, property); + continue; } } // Assign cssproperties for (const styleProperty in container.properties.style) { - const input: HTMLInputElement | null = (event.target as HTMLFormElement).querySelector(`#${styleProperty}`); - if (input === null) { - continue; - } - (container.properties.style as any)[styleProperty] = input.value; + submitCSSForm(form, styleProperty, container); } if (container.properties.isRigidBody) { @@ -167,3 +131,67 @@ export function OnPropertiesSubmit( setHistory(history); setHistoryCurrentStep(history.length - 1); } + +const submitHTMLInput = ( + input: HTMLInputElement, + container: IContainerModel, + property: string, + form: HTMLFormElement +): void => { + if (INPUT_TYPES[property] !== 'number') { + (container.properties as any)[property] = input.value; + } + + if (property === 'x') { + // Hardcoded fix for XPositionReference + const x = RestoreX(form, input); + (container.properties as any)[property] = x; + return; + } + + (container.properties as any)[property] = Number(input.value); +}; + +const submitCSSForm = (form: HTMLFormElement, styleProperty: string, container: ContainerModel): void => { + const input: HTMLInputElement | null = form.querySelector(`#${styleProperty}`); + if (input === null) { + return; + } + (container.properties.style as any)[styleProperty] = input.value; +}; + +const RestoreX = ( + form: HTMLFormElement, + input: HTMLInputElement +): number => { + const inputWidth: HTMLInputElement | null = form.querySelector('#width'); + const inputRadio: HTMLDivElement | null = form.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'); + } + + return restoreX(Number(input.value), Number(inputWidth.value), Number(radiobutton.value)); +}; + +const submitRadioButtons = ( + div: HTMLDivElement, + container: IContainerModel, + property: string +): void => { + const radiobutton: HTMLInputElement | null = div.querySelector(`input[name="${property}"]:checked`); + if (radiobutton === null) { + return; + } + + if (INPUT_TYPES[property] === 'number') { + (container.properties as any)[property] = Number(radiobutton.value); + return; + } + + (container.properties as any)[property] = radiobutton.value; +};