Merged PR 181: Add warning to elements sidebar + remove swals from behaviors

- Add warning to elements sidebar
- Remove obnoxious swals from behaviors

src/Components/ContainerProperties/ContainerProperties.test.tsx

@@ -36,6 +36,7 @@ describe.concurrent('Properties', () => {
       xPositionReference: XPositionReference.Left,
       isFlex: false,
       isAnchor: false,
+      warning: '',
       showChildrenDimensions: true, // TODO: put the dimension at the top (see pdf)
       showSelfDimensions: true, // TODO: put the dimension at the bottom (see pdf)
       isDimensionBorrower: true, // second dimensions from the bottom

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;
     }
 

src/Components/ElementsSidebar/ElementsSidebar.test.tsx

@@ -104,6 +104,7 @@ describe.concurrent('Elements sidebar', () => {
           maxWidth: Infinity,
           type: 'type',
           isAnchor: false,
+          warning: '',
           showChildrenDimensions: true,
           showSelfDimensions: true,
           isDimensionBorrower: true,
@@ -133,6 +134,7 @@ describe.concurrent('Elements sidebar', () => {
           isFlex: false,
           maxWidth: Infinity,
           type: 'type',
+          warning: '',
           showChildrenDimensions: true,
           showSelfDimensions: true,
           isDimensionBorrower: true,
@@ -183,6 +185,7 @@ describe.concurrent('Elements sidebar', () => {
         minWidth: 1,
         width: 0,
         height: 0,
+        warning: '',
         xPositionReference: XPositionReference.Left,
         margin: {},
         isFlex: false,

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -5,6 +5,7 @@ import { IContainerModel } from '../../Interfaces/IContainerModel';
 import { FindContainerById, GetDepth, MakeIterator } from '../../utils/itertools';
 import { ISymbolModel } from '../../Interfaces/ISymbolModel';
 import { PropertyType } from '../../Enums/PropertyType';
+import { ExclamationIcon } from '@heroicons/react/outline';
 
 interface IElementsSidebarProps {
   mainContainer: IContainerModel
@@ -146,16 +147,20 @@ export function ElementsSidebar(props: IElementsSidebarProps): JSX.Element {
     return (
       <button type="button"
         className={`w-full border-blue-500 elements-sidebar-row whitespace-pre
-          text-left text-sm font-medium transition-all ${container.properties.type} ${selectedClass}`}
+          text-left text-sm font-medium transition-all inline-flex ${container.properties.type} ${selectedClass}`}
         id={key}
         key={key}
         style={style}
+        title={container.properties.warning}
         onClick={() => props.selectContainer(container.properties.id)}
         onDrop={(event) => HandleOnDrop(event, props.mainContainer, props.addContainer)}
         onDragOver={(event) => HandleDragOver(event, props.mainContainer)}
         onDragLeave={(event) => HandleDragLeave(event)}
       >
         {text}
+        {container.properties.warning.length > 0 &&
+          <ExclamationIcon></ExclamationIcon>
+        }
       </button>
     );
   }

src/Interfaces/IContainerProperties.ts

@@ -75,6 +75,11 @@ export interface IContainerProperties {
    */
   isDimensionBorrower: boolean
 
+  /**
+   * Warnings of a container
+   */
+  warning: string
+
   /**
    * (optional)
    * Replace a <rect> by a customized "SVG". It is not really an svg but it at least allows

src/utils/default.ts

@@ -129,6 +129,7 @@ export const DEFAULT_MAINCONTAINER_PROPS: IContainerProperties = {
   showSelfDimensions: true, // TODO: put the dimension at the bottom (see pdf)
   isDimensionBorrower: true, // second dimensions from the bottom
   markPositionToDimensionBorrower: false,
+  warning: '',
   style: {
     stroke: 'black',
     fillOpacity: 0
@@ -173,6 +174,7 @@ export function GetDefaultContainerProps(type: string,
     showSelfDimensions: containerConfig.ShowSelfDimensions ?? false,
     markPositionToDimensionBorrower: containerConfig.MarkPositionToDimensionBorrower ?? false,
     isDimensionBorrower: containerConfig.IsDimensionBorrower ?? false,
+    warning: '',
     customSVG: containerConfig.CustomSVG,
     style: structuredClone(containerConfig.Style),
     userData: structuredClone(containerConfig.UserData)