Merged PR 175: Implement drag drop

- [x] Implement drag drop to create an element at a specific index
- Add Swap behavrior
- Implement max contraints with simplex
~~- [ ] Implement drag drop to swap two container that flex~~

- Fixes tries number for simplex it can now go up to 2 * number of containers
- Fixes flex calling another flex behavior when not needed (remember that flex behavior is the only behavior that needs to communicate with siblings)
- Fix max width being ignored in input group

src/Components/Editor/Behaviors/AnchorBehaviors.ts

@@ -44,7 +44,7 @@ export function ApplyAnchor(container: IContainerModel): IContainerModel {
  * @param containers A list of containers
  * @returns A list of overlapping containers
  */
-function GetOverlappingContainers(
+export function GetOverlappingContainers(
   container: IContainerModel,
   containers: IContainerModel[]
 ): IContainerModel[] {

src/Components/Editor/Behaviors/Behaviors.ts

@@ -4,6 +4,7 @@ import { APPLY_BEHAVIORS_ON_CHILDREN } from '../../../utils/default';
 import { ApplyAnchor } from './AnchorBehaviors';
 import { Flex } from './FlexBehaviors';
 import { ApplyRigidBody } from './RigidBodyBehaviors';
+import { ApplySwap } from './SwapBehaviors';
 import { ApplySymbol } from './SymbolBehaviors';
 
 /**
@@ -13,28 +14,26 @@ import { ApplySymbol } from './SymbolBehaviors';
  * @returns Updated container
  */
 export function ApplyBehaviors(container: IContainerModel, symbols: Map<string, ISymbolModel>): IContainerModel {
-  try {
-    const symbol = symbols.get(container.properties.linkedSymbolId);
-    if (container.properties.linkedSymbolId !== '' && symbol !== undefined) {
-      ApplySymbol(container, symbol);
+  const symbol = symbols.get(container.properties.linkedSymbolId);
+  if (container.properties.linkedSymbolId !== '' && symbol !== undefined) {
+    ApplySymbol(container, symbol);
+  }
+
+  if (container.properties.isAnchor) {
+    ApplyAnchor(container);
+  }
+
+  ApplySwap(container);
+
+  Flex(container);
+
+  ApplyRigidBody(container);
+
+  if (APPLY_BEHAVIORS_ON_CHILDREN) {
+    // Apply DFS by recursion
+    for (const child of container.children) {
+      ApplyBehaviors(child, symbols);
     }
-
-    if (container.properties.isAnchor) {
-      ApplyAnchor(container);
-    }
-
-    Flex(container);
-
-    ApplyRigidBody(container);
-
-    if (APPLY_BEHAVIORS_ON_CHILDREN) {
-      // Apply DFS by recursion
-      for (const child of container.children) {
-        ApplyBehaviors(child, symbols);
-      }
-    }
-  } catch (error) {
-    console.debug(error);
   }
 
   return container;
@@ -46,7 +45,7 @@ export function ApplyBehaviors(container: IContainerModel, symbols: Map<string,
  * @param symbols
  * @returns
  */
-export function ApplyBehaviorsOnSiblings(newContainer: IContainerModel, symbols: Map<string, ISymbolModel>): void {
+export function ApplyBehaviorsOnSiblingsChildren(newContainer: IContainerModel, symbols: Map<string, ISymbolModel>): void {
   if (newContainer.parent === null || newContainer.parent === undefined) {
     return;
   }
@@ -57,6 +56,8 @@ export function ApplyBehaviorsOnSiblings(newContainer: IContainerModel, symbols:
         return;
       }
 
-      ApplyBehaviors(container, symbols);
+      for (const child of container.children) {
+        ApplyBehaviors(child, symbols);
+      }
     });
 }

src/Components/Editor/Behaviors/FlexBehaviors.ts

@@ -1,3 +1,4 @@
+import Swal from 'sweetalert2';
 import { IContainerModel } from '../../../Interfaces/IContainerModel';
 import { Simplex } from '../../../utils/simplex';
 import { ApplyWidthMargin, ApplyXMargin } from '../../../utils/svg';
@@ -49,16 +50,16 @@ 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.'
-    // });
+    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.');
   }
 
   const maxMinWidths = Math.max(...minWidths);
-  if (maxMinWidths * minWidths.length < requiredMaxWidth) {
+  if (maxMinWidths * minWidths.length <= requiredMaxWidth) {
     const wantedWidth = requiredMaxWidth / minWidths.length;
     // it fits, flex with maxMinWidths and fixed width
     let right = flexibleGroup.offset;
@@ -79,7 +80,9 @@ function FlexGroup(flexibleGroup: IFlexibleGroup): void {
   // does not fit
 
   /// SIMPLEX ///
-  const solutions: number[] = Simplex(minWidths, requiredMaxWidth);
+  const maxWidths = flexibleContainers
+    .map(sibling => sibling.properties.maxWidth);
+  const solutions: number[] = Simplex(minWidths, maxWidths, requiredMaxWidth);
 
   // apply the solutions
   for (let i = 0; i < flexibleContainers.length; i++) {

src/Components/Editor/Behaviors/SwapBehaviors.ts

@@ -0,0 +1,31 @@
+/**
+ * Swap two flex container when one is overlapping another
+ */
+
+import { IContainerModel } from '../../../Interfaces/IContainerModel';
+import { GetOverlappingContainers } from './AnchorBehaviors';
+
+export function ApplySwap(container: IContainerModel): void {
+  if (container.parent === null || container.parent === undefined) {
+    return;
+  }
+
+  const children = container.parent.children;
+  const overlappingContainers = GetOverlappingContainers(container, children);
+
+  if (overlappingContainers.length > 1 || overlappingContainers.length === 0) {
+    return;
+  }
+
+  const overlappingContainer = overlappingContainers.pop();
+
+  if (overlappingContainer === null || overlappingContainer === undefined) {
+    return;
+  }
+
+  // swap positions
+  [overlappingContainer.properties.x, container.properties.x] = [container.properties.x, overlappingContainer.properties.x];
+  const indexContainer = children.indexOf(container);
+  const indexOverlapping = children.indexOf(overlappingContainer);
+  [children[indexContainer], children[indexOverlapping]] = [children[indexOverlapping], children[indexContainer]];
+}