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

Refactor PropertiesOperations for more readability
Some checks failed
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/pr Build is failing
Details

Browse source
This commit is contained in:
Eric NGUYEN 2022-08-16 16:48:43 +02:00
parent 0fcc2244bb
commit e3190dfe0a
1 changed files with 74 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

114
src/Components/Editor/PropertiesOperations.ts
View file

@ -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
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;
submitHTMLInput(input, container, property, form);
continue;
}
(container.properties as any)[property] = Number(input.value);
if (input instanceof HTMLDivElement) {
submitRadioButtons(input, container, property);
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;
}
}
// 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;
};