From 6441cd11e8e7f213eec393d615b1a1b9a7435b45 Mon Sep 17 00:00:00 2001 From: Eric Nguyen Date: Thu, 8 Sep 2022 14:32:55 +0000 Subject: [PATCH] Merged PR 181: Add warning to elements sidebar + remove swals from behaviors - Add warning to elements sidebar - Remove obnoxious swals from behaviors --- .../ContainerProperties.test.tsx | 1 + .../Editor/Actions/ContainerOperations.ts | 5 +- src/Components/Editor/Behaviors/Behaviors.ts | 67 ++++++++++++------- .../Editor/Behaviors/FlexBehaviors.ts | 1 - .../Editor/Behaviors/RigidBodyBehaviors.ts | 14 ---- .../ElementsSidebar/ElementsSidebar.test.tsx | 3 + .../ElementsSidebar/ElementsSidebar.tsx | 7 +- src/Interfaces/IContainerProperties.ts | 5 ++ src/utils/default.ts | 2 + 9 files changed, 62 insertions(+), 43 deletions(-) diff --git a/src/Components/ContainerProperties/ContainerProperties.test.tsx b/src/Components/ContainerProperties/ContainerProperties.test.tsx index b660475..1ff330b 100644 --- a/src/Components/ContainerProperties/ContainerProperties.test.tsx +++ b/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 diff --git a/src/Components/Editor/Actions/ContainerOperations.ts b/src/Components/Editor/Actions/ContainerOperations.ts index e702259..3e87c12 100644 --- a/src/Components/Editor/Actions/ContainerOperations.ts +++ b/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); } /** diff --git a/src/Components/Editor/Behaviors/Behaviors.ts b/src/Components/Editor/Behaviors/Behaviors.ts index 116917b..1edfa73 100644 --- a/src/Components/Editor/Behaviors/Behaviors.ts +++ b/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): 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; } diff --git a/src/Components/Editor/Behaviors/FlexBehaviors.ts b/src/Components/Editor/Behaviors/FlexBehaviors.ts index 10f6cf0..57d30a8 100644 --- a/src/Components/Editor/Behaviors/FlexBehaviors.ts +++ b/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'; diff --git a/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts b/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts index 90e4ac9..d83c525 100644 --- a/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts +++ b/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; } diff --git a/src/Components/ElementsSidebar/ElementsSidebar.test.tsx b/src/Components/ElementsSidebar/ElementsSidebar.test.tsx index 14159e0..e3a54c2 100644 --- a/src/Components/ElementsSidebar/ElementsSidebar.test.tsx +++ b/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, diff --git a/src/Components/ElementsSidebar/ElementsSidebar.tsx b/src/Components/ElementsSidebar/ElementsSidebar.tsx index c124758..cf8d45b 100644 --- a/src/Components/ElementsSidebar/ElementsSidebar.tsx +++ b/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 ( ); } diff --git a/src/Interfaces/IContainerProperties.ts b/src/Interfaces/IContainerProperties.ts index 9457cf5..6e5c668 100644 --- a/src/Interfaces/IContainerProperties.ts +++ b/src/Interfaces/IContainerProperties.ts @@ -75,6 +75,11 @@ export interface IContainerProperties { */ isDimensionBorrower: boolean + /** + * Warnings of a container + */ + warning: string + /** * (optional) * Replace a by a customized "SVG". It is not really an svg but it at least allows diff --git a/src/utils/default.ts b/src/utils/default.ts index 0488fe4..98a0758 100644 --- a/src/utils/default.ts +++ b/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)