Fix getAvailableWidthsTwoLines when there is no overlap

src/Components/Editor/Behaviors/AnchorBehaviors.ts

@@ -17,8 +17,9 @@ import { IContainerModel } from '../../../Interfaces/IContainerModel';
 import { constraintBodyInsideUnallocatedWidth } from './RigidBodyBehaviors';
 
 /**
- * Impose the container position
+ * Impose the container position to its siblings
  * Apply the following modification to the overlapping rigid body container :
+ * @param container Container to impose its position
  */
 export function ImposePosition(container: IContainerModel): IContainerModel {
   if (container.parent === undefined ||
@@ -26,7 +27,6 @@ export function ImposePosition(container: IContainerModel): IContainerModel {
     return container;
   }
 
-  // Get the closest one
   const rigidBodies = container.parent.children.filter(
     child => child.properties.isRigidBody && !child.properties.isAnchor
   );
@@ -38,27 +38,33 @@ export function ImposePosition(container: IContainerModel): IContainerModel {
   return container;
 }
 
+/**
+ * Returns the overlapping containers with container
+ * @param container A container
+ * @param containers A list of containers
+ * @returns A list of overlapping containers
+ */
 function getOverlappingContainers(
   container: IContainerModel,
-  siblings: IContainerModel[]
+  containers: IContainerModel[]
 ): IContainerModel[] {
   const min1 = container.properties.x;
   const max1 = container.properties.x + Number(container.properties.width);
   const overlappingContainers: IContainerModel[] = [];
-  for (const sibling of siblings) {
-    if (sibling === container) {
+  for (const other of containers) {
+    if (other === container) {
       continue;
     }
 
-    const min2 = sibling.properties.x;
-    const max2 = sibling.properties.x + Number(sibling.properties.width);
+    const min2 = other.properties.x;
+    const max2 = other.properties.x + Number(other.properties.width);
     const isOverlapping = Math.min(max1, max2) - Math.max(min1, min2) > 0;
 
     if (!isOverlapping) {
       continue;
     }
 
-    overlappingContainers.push(sibling);
+    overlappingContainers.push(other);
   }
   return overlappingContainers;
 }

src/Components/Editor/Behaviors/RigidBodyBehaviors.ts

@@ -240,39 +240,49 @@ function getAvailableWidths(
 
 /**
  * Returns the unallocated widths between two lines in 1D
- * @param min1 left of the first line
- * @param max1 rigth of the first line
- * @param min2 left of the second line
- * @param max2 right of the second line
+ * @param unalloctedSpaceLeft left of the first line
+ * @param unallocatedSpaceRight rigth of the first line
+ * @param rectLeft left of the second line
+ * @param rectRight right of the second line
  * @returns Available widths
  */
 function getAvailableWidthsTwoLines(
-  min1: number,
-  max1: number,
-  min2: number,
-  max2: number
+  unalloctedSpaceLeft: number,
+  unallocatedSpaceRight: number,
+  rectLeft: number,
+  rectRight: number
 ): ISizePointer[] {
-  if (min2 < min1 && max2 > max1) {
+  if (unallocatedSpaceRight < rectLeft ||
+    unalloctedSpaceLeft > rectRight
+  ) {
+    // object 1 and 2 are not overlapping
+    return [{
+      x: unalloctedSpaceLeft,
+      width: unallocatedSpaceRight - unalloctedSpaceLeft
+    }];
+  }
+
+  if (rectLeft < unalloctedSpaceLeft && rectRight > unallocatedSpaceRight) {
     // object 2 is overlapping full width
     return [];
   }
 
-  if (min1 >= min2) {
+  if (unalloctedSpaceLeft >= rectLeft) {
     // object 2 is partially overlapping on the left
     return [
       {
-        x: max2,
-        width: max1 - max2
+        x: rectRight,
+        width: unallocatedSpaceRight - rectRight
       }
     ];
   }
 
-  if (max2 >= max1) {
+  if (rectRight >= unallocatedSpaceRight) {
     // object 2 is partially overlapping on the right
     return [
       {
-        x: min2,
-        width: max2 - min1
+        x: rectLeft,
+        width: rectRight - unalloctedSpaceLeft
       }
     ];
   }
@@ -280,12 +290,12 @@ function getAvailableWidthsTwoLines(
   // object 2 is overlapping in the middle
   return [
     {
-      x: min1,
-      width: min2 - min1
+      x: unalloctedSpaceLeft,
+      width: rectLeft - unalloctedSpaceLeft
     },
     {
-      x: max2,
-      width: max1 - max2
+      x: rectRight,
+      width: unallocatedSpaceRight - rectRight
     }
   ];
 }