src/Components/Editor/Behaviors/Behaviors.ts

@@ -0,0 +1,21 @@
+import { IContainerModel } from '../../../Interfaces/IContainerModel';
+import { ImposePosition } from './AnchorBehaviors';
+import { RecalculatePhysics } from './RigidBodyBehaviors';
+
+/**
+ * Recalculate the position of the container and its neighbors
+ * Mutate and returns the updated container
+ * @param container Container to recalculate its positions
+ * @returns Updated container
+ */
+export function ApplyBehaviors(container: IContainerModel): IContainerModel {
+  if (container.properties.isAnchor) {
+    ImposePosition(container);
+  }
+
+  if (container.properties.isRigidBody) {
+    RecalculatePhysics(container);
+  }
+
+  return container;
+}

src/Components/Editor/ContainerOperations.ts

@@ -7,6 +7,7 @@ import { getCurrentHistory } from './Editor';
 import { AddMethod } from '../../Enums/AddMethod';
 import { IAvailableContainer } from '../../Interfaces/IAvailableContainer';
 import { GetDefaultContainerProps } from '../../utils/default';
+import { ApplyBehaviors } from './Behaviors/Behaviors';
 
 /**
  * Select a container
@@ -224,6 +225,8 @@ export function AddContainer(
     }
   );
 
+  ApplyBehaviors(newContainer);
+
   // And push it the the parent children
   if (index === parentClone.children.length) {
     parentClone.children.push(newContainer);

src/Components/Editor/PropertiesOperations.ts

@@ -3,9 +3,8 @@ 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 { ImposePosition } from './Behaviors/AnchorBehaviors';
 import { restoreX } from '../SVG/Elements/Container';
+import { ApplyBehaviors } from './Behaviors/Behaviors';
 
 /**
   * Handled the property change event in the properties form
@@ -43,13 +42,7 @@ export function OnPropertyChange(
     (container.properties as any)[key] = value;
   }
 
-  if (container.properties.isAnchor) {
-    ImposePosition(container);
-  }
-
-  if (container.properties.isRigidBody) {
-    RecalculatePhysics(container);
-  }
+  ApplyBehaviors(container);
 
   history.push({
     LastAction: `Change ${key} of ${container.properties.id}`,
@@ -116,9 +109,8 @@ export function OnPropertiesSubmit(
     submitCSSForm(form, styleProperty, container);
   }
 
-  if (container.properties.isRigidBody) {
-    RecalculatePhysics(container);
-  }
+  // Apply the behaviors
+  ApplyBehaviors(container);
 
   history.push({
     LastAction: `Change properties of ${container.properties.id}`,

src/utils/default.ts

@@ -59,7 +59,7 @@ export const GetDefaultContainerProps = (
   y,
   width: containerConfig.Width ?? containerConfig.MinWidth ?? parent.properties.width,
   height: containerConfig.Height ?? parent.properties.height,
-  isRigidBody: false,
+  isRigidBody: false, // set this to true to replicate Florian's project
   isAnchor: false,
   XPositionReference: containerConfig.XPositionReference ?? XPositionReference.Left,
   minWidth: containerConfig.MinWidth ?? 0,