Merged PR 179: Fix bugs about flex and context menu (see desc) + disable hard rigid behavior + add missing properties to form + Clean up css

- Clean up some css class
- Fix wrong order when applying flex
- Fix Replace behavior not working because previous container was still existing
- Disable hard rigid behavior which disallow two container to overlap
- Add ENABLE_FLEX, ENABLE_HARD_RIGID ENABLE_SWAP
- Add missing form properties with dimensions
- Update readme

src/Components/Editor/Actions/ContainerOperations.ts

@@ -276,6 +276,9 @@ export function AddContainers(
       parentClone.children.splice(index, 0, newContainer);
     }
 
+    // Sort the parent children by x
+    UpdateParentChildrenList(parentClone);
+
     /// Handle behaviors here ///
 
     // Initialize default children of the container
@@ -287,9 +290,6 @@ export function AddContainers(
     // Then, apply the behaviors on its siblings (mostly for flex)
     ApplyBehaviorsOnSiblingsChildren(newContainer, current.symbols);
 
-    // Sort the parent children by x
-    UpdateParentChildrenList(parentClone);
-
     // Add to the list of container id for logging purpose
     containerIds.push(newContainer.properties.id);
   });

src/Components/Editor/Actions/ContextMenuActions.ts

@@ -105,27 +105,30 @@ function HandleReplace(
   const index = selectedContainer.parent.children.indexOf(selectedContainer);
 
   const types = response.Containers.map(container => container.Type);
-  const newHistoryBeforeDelete = AddContainers(
-    index + 1,
-    types,
-    selectedContainer.properties.parentId,
-    configuration,
+
+  const newHistoryAfterDelete = DeleteContainer(
+    selectedContainer.properties.id,
     history,
     historyCurrentStep
   );
 
-  const newHistoryAfterDelete = DeleteContainer(
-    selectedContainer.properties.id,
-    newHistoryBeforeDelete,
-    newHistoryBeforeDelete.length - 1
+  const newHistoryBeforeDelete = AddContainers(
+    index,
+    types,
+    selectedContainer.properties.parentId,
+    configuration,
+    newHistoryAfterDelete,
+    newHistoryAfterDelete.length - 1
   );
 
   // Remove AddContainers from history
-  newHistoryAfterDelete.splice(newHistoryAfterDelete.length - 2, 1);
+  if (import.meta.env.PROD) {
+    newHistoryBeforeDelete.splice(newHistoryBeforeDelete.length - 2, 1);
+  }
 
   // Rename the last action by Replace
-  newHistoryAfterDelete[newHistoryAfterDelete.length - 1].lastAction =
+  newHistoryBeforeDelete[newHistoryBeforeDelete.length - 1].lastAction =
     `Replace ${selectedContainer.properties.id} by [${types.join(', ')}]`;
 
-  return newHistoryAfterDelete;
+  return newHistoryBeforeDelete;
 }

src/Components/Editor/Behaviors/Behaviors.ts

@@ -1,6 +1,6 @@
 import { IContainerModel } from '../../../Interfaces/IContainerModel';
 import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
-import { APPLY_BEHAVIORS_ON_CHILDREN } from '../../../utils/default';
+import { APPLY_BEHAVIORS_ON_CHILDREN, ENABLE_RIGID, ENABLE_SWAP } from '../../../utils/default';
 import { ApplyAnchor } from './AnchorBehaviors';
 import { Flex } from './FlexBehaviors';
 import { ApplyRigidBody } from './RigidBodyBehaviors';
@@ -23,11 +23,15 @@ export function ApplyBehaviors(container: IContainerModel, symbols: Map<string,
     ApplyAnchor(container);
   }
 
-  ApplySwap(container);
+  if (ENABLE_SWAP) {
+    ApplySwap(container);
+  }
 
   Flex(container);
 
-  ApplyRigidBody(container);
+  if (ENABLE_RIGID) {
+    ApplyRigidBody(container);
+  }
 
   if (APPLY_BEHAVIORS_ON_CHILDREN) {
     // Apply DFS by recursion

src/Components/Editor/Behaviors/FlexBehaviors.ts

@@ -38,6 +38,10 @@ function FlexGroup(flexibleGroup: IFlexibleGroup): void {
     nonFlexibleContainers
   } = SeparateFlexibleContainers(children);
 
+  if (flexibleContainers.length === 0) {
+    return;
+  }
+
   const minWidths = flexibleContainers
     .map(sibling => sibling.properties.minWidth);
 
@@ -50,12 +54,8 @@ function FlexGroup(flexibleGroup: IFlexibleGroup): void {
 
   const checkSumMinWidthsIsFitting = minimumPossibleWidth > requiredMaxWidth;
   if (checkSumMinWidthsIsFitting) {
-    Swal.fire({
-      icon: 'error',
-      title: 'Cannot fit!',
-      text: 'Cannot fit at all even when squeezing all flex containers to the minimum.'
-    });
-    throw new Error('[FlexBehavior] Cannot fit at all even when squeezing all flex containers to the minimum.');
+    console.warn('[FlexBehavior] Cannot fit at all even when squeezing all flex containers to the minimum.');
+    return;
   }
 
   const maxMinWidths = Math.max(...minWidths);

src/Components/Editor/Behaviors/RigidBodyBehaviors.ts

@@ -9,6 +9,7 @@
 import Swal from 'sweetalert2';
 import { IContainerModel } from '../../../Interfaces/IContainerModel';
 import { ISizePointer } from '../../../Interfaces/ISizePointer';
+import { ENABLE_HARD_RIGID } from '../../../utils/default';
 
 /**
  * "Transform the container into a rigid body"
@@ -23,7 +24,11 @@ export function ApplyRigidBody(
   container: IContainerModel
 ): IContainerModel {
   container = ConstraintBodyInsideParent(container);
-  container = ConstraintBodyInsideUnallocatedWidth(container);
+
+  if (ENABLE_HARD_RIGID) {
+    container = ConstraintBodyInsideUnallocatedWidth(container);
+  }
+
   return container;
 }