Change css class on sidebar and symbols

.gitignore

@@ -22,3 +22,409 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Created by https://www.toptal.com/developers/gitignore/api/visualstudio
+# Edit at https://www.toptal.com/developers/gitignore?templates=visualstudio
+
+### VisualStudio ###
+## Ignore Visual Studio temporary files, build results, and
+## files generated by popular Visual Studio add-ons.
+##
+## Get latest from https://github.com/github/gitignore/blob/main/VisualStudio.gitignore
+
+# User-specific files
+*.rsuser
+*.suo
+*.user
+*.userosscache
+*.sln.docstates
+
+# User-specific files (MonoDevelop/Xamarin Studio)
+*.userprefs
+
+# Mono auto generated files
+mono_crash.*
+
+# Build results
+[Dd]ebug/
+[Dd]ebugPublic/
+[Rr]elease/
+[Rr]eleases/
+x64/
+x86/
+[Ww][Ii][Nn]32/
+[Aa][Rr][Mm]/
+[Aa][Rr][Mm]64/
+bld/
+[Bb]in/
+[Oo]bj/
+[Ll]og/
+[Ll]ogs/
+
+# Visual Studio 2015/2017 cache/options directory
+.vs/
+# Uncomment if you have tasks that create the project's static files in wwwroot
+#wwwroot/
+
+# Visual Studio 2017 auto generated files
+Generated\ Files/
+
+# MSTest test Results
+[Tt]est[Rr]esult*/
+[Bb]uild[Ll]og.*
+
+# NUnit
+*.VisualState.xml
+TestResult.xml
+nunit-*.xml
+
+# Build Results of an ATL Project
+[Dd]ebugPS/
+[Rr]eleasePS/
+dlldata.c
+
+# Benchmark Results
+BenchmarkDotNet.Artifacts/
+
+# .NET Core
+project.lock.json
+project.fragment.lock.json
+artifacts/
+
+# ASP.NET Scaffolding
+ScaffoldingReadMe.txt
+
+# StyleCop
+StyleCopReport.xml
+
+# Files built by Visual Studio
+*_i.c
+*_p.c
+*_h.h
+*.ilk
+*.meta
+*.obj
+*.iobj
+*.pch
+*.pdb
+*.ipdb
+*.pgc
+*.pgd
+*.rsp
+*.sbr
+*.tlb
+*.tli
+*.tlh
+*.tmp
+*.tmp_proj
+*_wpftmp.csproj
+*.log
+*.tlog
+*.vspscc
+*.vssscc
+.builds
+*.pidb
+*.svclog
+*.scc
+
+# Chutzpah Test files
+_Chutzpah*
+
+# Visual C++ cache files
+ipch/
+*.aps
+*.ncb
+*.opendb
+*.opensdf
+*.sdf
+*.cachefile
+*.VC.db
+*.VC.VC.opendb
+
+# Visual Studio profiler
+*.psess
+*.vsp
+*.vspx
+*.sap
+
+# Visual Studio Trace Files
+*.e2e
+
+# TFS 2012 Local Workspace
+$tf/
+
+# Guidance Automation Toolkit
+*.gpState
+
+# ReSharper is a .NET coding add-in
+_ReSharper*/
+*.[Rr]e[Ss]harper
+*.DotSettings.user
+
+# TeamCity is a build add-in
+_TeamCity*
+
+# DotCover is a Code Coverage Tool
+*.dotCover
+
+# AxoCover is a Code Coverage Tool
+.axoCover/*
+!.axoCover/settings.json
+
+# Coverlet is a free, cross platform Code Coverage Tool
+coverage*.json
+coverage*.xml
+coverage*.info
+
+# Visual Studio code coverage results
+*.coverage
+*.coveragexml
+
+# NCrunch
+_NCrunch_*
+.*crunch*.local.xml
+nCrunchTemp_*
+
+# MightyMoose
+*.mm.*
+AutoTest.Net/
+
+# Web workbench (sass)
+.sass-cache/
+
+# Installshield output folder
+[Ee]xpress/
+
+# DocProject is a documentation generator add-in
+DocProject/buildhelp/
+DocProject/Help/*.HxT
+DocProject/Help/*.HxC
+DocProject/Help/*.hhc
+DocProject/Help/*.hhk
+DocProject/Help/*.hhp
+DocProject/Help/Html2
+DocProject/Help/html
+
+# Click-Once directory
+publish/
+
+# Publish Web Output
+*.[Pp]ublish.xml
+*.azurePubxml
+# Note: Comment the next line if you want to checkin your web deploy settings,
+# but database connection strings (with potential passwords) will be unencrypted
+*.pubxml
+*.publishproj
+
+# Microsoft Azure Web App publish settings. Comment the next line if you want to
+# checkin your Azure Web App publish settings, but sensitive information contained
+# in these scripts will be unencrypted
+PublishScripts/
+
+# NuGet Packages
+*.nupkg
+# NuGet Symbol Packages
+*.snupkg
+# The packages folder can be ignored because of Package Restore
+**/[Pp]ackages/*
+# except build/, which is used as an MSBuild target.
+!**/[Pp]ackages/build/
+# Uncomment if necessary however generally it will be regenerated when needed
+#!**/[Pp]ackages/repositories.config
+# NuGet v3's project.json files produces more ignorable files
+*.nuget.props
+*.nuget.targets
+
+# Microsoft Azure Build Output
+csx/
+*.build.csdef
+
+# Microsoft Azure Emulator
+ecf/
+rcf/
+
+# Windows Store app package directories and files
+AppPackages/
+BundleArtifacts/
+Package.StoreAssociation.xml
+_pkginfo.txt
+*.appx
+*.appxbundle
+*.appxupload
+
+# Visual Studio cache files
+# files ending in .cache can be ignored
+*.[Cc]ache
+# but keep track of directories ending in .cache
+!?*.[Cc]ache/
+
+# Others
+ClientBin/
+~$*
+*~
+*.dbmdl
+*.dbproj.schemaview
+*.jfm
+*.pfx
+*.publishsettings
+orleans.codegen.cs
+
+# Including strong name files can present a security risk
+# (https://github.com/github/gitignore/pull/2483#issue-259490424)
+#*.snk
+
+# Since there are multiple workflows, uncomment next line to ignore bower_components
+# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
+#bower_components/
+
+# RIA/Silverlight projects
+Generated_Code/
+
+# Backup & report files from converting an old project file
+# to a newer Visual Studio version. Backup files are not needed,
+# because we have git ;-)
+_UpgradeReport_Files/
+Backup*/
+UpgradeLog*.XML
+UpgradeLog*.htm
+ServiceFabricBackup/
+*.rptproj.bak
+
+# SQL Server files
+*.mdf
+*.ldf
+*.ndf
+
+# Business Intelligence projects
+*.rdl.data
+*.bim.layout
+*.bim_*.settings
+*.rptproj.rsuser
+*- [Bb]ackup.rdl
+*- [Bb]ackup ([0-9]).rdl
+*- [Bb]ackup ([0-9][0-9]).rdl
+
+# Microsoft Fakes
+FakesAssemblies/
+
+# GhostDoc plugin setting file
+*.GhostDoc.xml
+
+# Node.js Tools for Visual Studio
+.ntvs_analysis.dat
+node_modules/
+
+# Visual Studio 6 build log
+*.plg
+
+# Visual Studio 6 workspace options file
+*.opt
+
+# Visual Studio 6 auto-generated workspace file (contains which files were open etc.)
+*.vbw
+
+# Visual Studio 6 auto-generated project file (contains which files were open etc.)
+*.vbp
+
+# Visual Studio 6 workspace and project file (working project files containing files to include in project)
+*.dsw
+*.dsp
+
+# Visual Studio 6 technical files
+
+# Visual Studio LightSwitch build output
+**/*.HTMLClient/GeneratedArtifacts
+**/*.DesktopClient/GeneratedArtifacts
+**/*.DesktopClient/ModelManifest.xml
+**/*.Server/GeneratedArtifacts
+**/*.Server/ModelManifest.xml
+_Pvt_Extensions
+
+# Paket dependency manager
+.paket/paket.exe
+paket-files/
+
+# FAKE - F# Make
+.fake/
+
+# CodeRush personal settings
+.cr/personal
+
+# Python Tools for Visual Studio (PTVS)
+__pycache__/
+*.pyc
+
+# Cake - Uncomment if you are using it
+# tools/**
+# !tools/packages.config
+
+# Tabs Studio
+*.tss
+
+# Telerik's JustMock configuration file
+*.jmconfig
+
+# BizTalk build output
+*.btp.cs
+*.btm.cs
+*.odx.cs
+*.xsd.cs
+
+# OpenCover UI analysis results
+OpenCover/
+
+# Azure Stream Analytics local run output
+ASALocalRun/
+
+# MSBuild Binary and Structured Log
+*.binlog
+
+# NVidia Nsight GPU debugger configuration file
+*.nvuser
+
+# MFractors (Xamarin productivity tool) working folder
+.mfractor/
+
+# Local History for Visual Studio
+.localhistory/
+
+# Visual Studio History (VSHistory) files
+.vshistory/
+
+# BeatPulse healthcheck temp database
+healthchecksdb
+
+# Backup folder for Package Reference Convert tool in Visual Studio 2017
+MigrationBackup/
+
+# Ionide (cross platform F# VS Code tools) working folder
+.ionide/
+
+# Fody - auto-generated XML schema
+FodyWeavers.xsd
+
+# VS Code files for those working on multiple tools
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+*.code-workspace
+
+# Local History for Visual Studio Code
+.history/
+
+# Windows Installer files from build outputs
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# JetBrains Rider
+*.sln.iml
+
+### VisualStudio Patch ###
+# Additional files built by Visual Studio
+
+# End of https://www.toptal.com/developers/gitignore/api/visualstudio

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);
+  try {
-  if (container.properties.linkedSymbolId !== '' && symbol !== undefined) {
+    const symbol = symbols.get(container.properties.linkedSymbolId);
-    ApplySymbol(container, symbol);
+    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);
     }
+
+    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)