Change css class on sidebar and symbols

src/Components/Editor/Actions/ContainerOperations.ts

@@ -549,15 +549,14 @@ function SetContainer(
     container.properties.linkedSymbolId,
     symbols
   );
+  // sort the children list by their position
+  UpdateParentChildrenList(container.parent);
 
   // Apply special behaviors: rigid, flex, symbol, anchor
   ApplyBehaviors(container, symbols);
 
   // Apply special behaviors on siblings
   ApplyBehaviorsOnSiblingsChildren(container, symbols);
-
-  // sort the children list by their position
-  UpdateParentChildrenList(container.parent);
 }
 
 /**

src/Components/Editor/Behaviors/Behaviors.ts

@@ -1,7 +1,7 @@
 import { IContainerModel } from '../../../Interfaces/IContainerModel';
 import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
 import { APPLY_BEHAVIORS_ON_CHILDREN, ENABLE_RIGID, ENABLE_SWAP } from '../../../utils/default';
-import { ApplyAnchor } from './AnchorBehaviors';
+import { ApplyAnchor, GetOverlappingContainers } from './AnchorBehaviors';
 import { Flex } from './FlexBehaviors';
 import { ApplyRigidBody } from './RigidBodyBehaviors';
 import { ApplySwap } from './SwapBehaviors';
@@ -14,30 +14,41 @@ import { ApplySymbol } from './SymbolBehaviors';
  * @returns Updated container
  */
 export function ApplyBehaviors(container: IContainerModel, symbols: Map<string, ISymbolModel>): IContainerModel {
-  const symbol = symbols.get(container.properties.linkedSymbolId);
-  if (container.properties.linkedSymbolId !== '' && symbol !== undefined) {
-    ApplySymbol(container, symbol);
-  }
-
-  if (container.properties.isAnchor) {
-    ApplyAnchor(container);
-  }
-
-  if (ENABLE_SWAP) {
-    ApplySwap(container);
-  }
-
-  Flex(container);
-
-  if (ENABLE_RIGID) {
-    ApplyRigidBody(container);
-  }
-
-  if (APPLY_BEHAVIORS_ON_CHILDREN) {
-    // Apply DFS by recursion
-    for (const child of container.children) {
-      ApplyBehaviors(child, symbols);
+  try {
+    const symbol = symbols.get(container.properties.linkedSymbolId);
+    if (container.properties.linkedSymbolId !== '' && symbol !== undefined) {
+      ApplySymbol(container, symbol);
     }
+
+    if (container.properties.isAnchor) {
+      ApplyAnchor(container);
+    }
+
+    if (ENABLE_SWAP) {
+      ApplySwap(container);
+    }
+
+    Flex(container);
+
+    if (ENABLE_RIGID) {
+      ApplyRigidBody(container);
+    }
+
+    if (APPLY_BEHAVIORS_ON_CHILDREN) {
+    // Apply DFS by recursion
+      for (const child of container.children) {
+        ApplyBehaviors(child, symbols);
+      }
+    }
+  } catch (e) {
+    let message = '';
+    if (typeof e === 'string') {
+      message = e;
+    } else if (e instanceof Error) {
+      message = e.message;
+    }
+    container.properties.warning = message;
+    throw new Error(message);
   }
 
   return container;
@@ -56,6 +67,14 @@ export function ApplyBehaviorsOnSiblingsChildren(newContainer: IContainerModel,
 
   newContainer.parent.children
     .forEach((container: IContainerModel) => {
+      if (container.parent != null) {
+        const overlappingContainers = GetOverlappingContainers(container, container.parent.children);
+        if (overlappingContainers.length > 0) {
+          container.properties.warning = `There are overlapping containers: ${overlappingContainers.map(c => c.properties.id).join(' ')}`;
+        } else {
+          container.properties.warning = '';
+        }
+      }
       if (container === newContainer) {
         return;
       }

src/Components/Editor/Behaviors/FlexBehaviors.ts

@@ -1,4 +1,3 @@
-import Swal from 'sweetalert2';
 import { IContainerModel } from '../../../Interfaces/IContainerModel';
 import { Simplex } from '../../../utils/simplex';
 import { ApplyWidthMargin, ApplyXMargin } from '../../../utils/svg';

src/Components/Editor/Behaviors/RigidBodyBehaviors.ts

@@ -6,7 +6,6 @@
  * If the contraints fails, an error message will be returned
  */
 
-import Swal from 'sweetalert2';
 import { IContainerModel } from '../../../Interfaces/IContainerModel';
 import { ISizePointer } from '../../../Interfaces/ISizePointer';
 import { ENABLE_HARD_RIGID } from '../../../utils/default';
@@ -132,11 +131,6 @@ export function ConstraintBodyInsideUnallocatedWidth(
 
   // Check if there is still some space
   if (availableWidths.length === 0) {
-    Swal.fire({
-      icon: 'error',
-      title: 'Not enough space!',
-      text: 'Try to free the parent a little bit!'
-    });
     throw new Error(
       'No available space found on the parent container. Try to free the parent a bit.'
     );
@@ -180,14 +174,6 @@ export function ConstraintBodyInsideUnallocatedWidth(
 
     if (availableWidth === undefined) {
       console.debug(`Container ${container.properties.id} cannot fit in any space due to its minimum width being to large.`);
-      // Swal.fire({
-      //   position: 'top-end',
-      //   title: `Container ${container.properties.id} cannot fit!`,
-      //   text: 'Its rigid body property is now disabled. Change its the minimum width or free the parent container.',
-      //   timerProgressBar: true,
-      //   showConfirmButton: false,
-      //   timer: 5000
-      // });
       return container;
     }