Refactor PropertiesOperations for more readability

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') {
+      submitHTMLInput(input, container, property, form);
-        if (property === 'x') {
+      continue;
-          // Hardcoded fix for XPositionReference
+    }
 
-          const inputWidth: HTMLInputElement | null = (event.target as HTMLFormElement).querySelector('#width');
+    if (input instanceof HTMLDivElement) {
-          const inputRadio: HTMLDivElement | null = (event.target as HTMLFormElement).querySelector('#XPositionReference');
+      submitRadioButtons(input, container, property);
-
+      continue;
-          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;
     }
   }
 
   // Assign cssproperties
   for (const styleProperty in container.properties.style) {
-    const input: HTMLInputElement | null = (event.target as HTMLFormElement).querySelector(`#${styleProperty}`);
+    submitCSSForm(form, styleProperty, container);
-    if (input === null) {
-      continue;
-    }
-    (container.properties.style as any)[styleProperty] = input.value;
   }
 
   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;
+};