Merged PR 196: Implement Vertical orientation + Upgrade Heroicons to 2.0

Implémenter l'orientation verticale

Modifier l'effet de append

Implementer RigidBody

Implementer Flex et simplex

Implémenter Push

Implémenter Swap

Implement MinMaxHeight without behaviors

Fix Margin for Height

Implement PositionReference

Fix dimension vertical position inside children

Add orientation change in form

Implement sortChildren

Implement Anchor

Fix warning message on overlapping

Fix minimap when root container is vertical

#7287
#7288
#7289
#7290
#7291
#7292
#7294
#7295
#7296
#7297
#7298
#7299
#7300
#7301
#7302

src/Components/ElementsSidebar/ElementsSidebar.test.tsx

@@ -3,9 +3,10 @@ import * as React from 'react';
 import { fireEvent, render, screen } from '../../utils/test-utils';
 import { ElementsSidebar } from './ElementsSidebar';
 import { IContainerModel } from '../../Interfaces/IContainerModel';
-import { XPositionReference } from '../../Enums/XPositionReference';
+import { PositionReference } from '../../Enums/PositionReference';
 import { FindContainerById } from '../../utils/itertools';
 import { DEFAULT_MAINCONTAINER_PROPS } from '../../utils/default';
+import { Orientation } from '../../Interfaces/Orientation';
 
 describe.concurrent('Elements sidebar', () => {
   it('With a MainContainer', () => {
@@ -94,14 +95,17 @@ describe.concurrent('Elements sidebar', () => {
           parentId: 'main',
           linkedSymbolId: '',
           displayedText: 'child-1',
+          orientation: Orientation.Horizontal,
           x: 0,
           y: 0,
           minWidth: 1,
+          minHeight: 1,
           width: 0,
           height: 0,
           margin: {},
           isFlex: false,
           maxWidth: Infinity,
+          maxHeight: Infinity,
           type: 'type',
           isAnchor: false,
           warning: '',
@@ -110,7 +114,7 @@ describe.concurrent('Elements sidebar', () => {
           showSelfDimensions: true,
           isDimensionBorrower: true,
           markPositionToDimensionBorrower: false,
-          xPositionReference: XPositionReference.Left
+          positionReference: PositionReference.TopLeft
         },
         userData: {}
       }
@@ -125,18 +129,21 @@ describe.concurrent('Elements sidebar', () => {
           parentId: 'main',
           linkedSymbolId: '',
           displayedText: 'child-2',
+          orientation: Orientation.Horizontal,
           x: 0,
           y: 0,
           margin: {},
           minWidth: 1,
+          minHeight: 1,
           width: 0,
           height: 0,
-          xPositionReference: XPositionReference.Left,
+          positionReference: PositionReference.TopLeft,
           isFlex: false,
           maxWidth: Infinity,
+          maxHeight: Infinity,
           type: 'type',
           warning: '',
-        hideChildrenInTreeview: false,
+          hideChildrenInTreeview: false,
           showChildrenDimensions: true,
           showSelfDimensions: true,
           isDimensionBorrower: true,
@@ -182,16 +189,19 @@ describe.concurrent('Elements sidebar', () => {
         parentId: 'main',
         linkedSymbolId: '',
         displayedText: 'child-1',
+        orientation: Orientation.Horizontal,
         x: 0,
         y: 0,
         minWidth: 1,
+        minHeight: 1,
         width: 0,
         height: 0,
         warning: '',
-        xPositionReference: XPositionReference.Left,
+        positionReference: PositionReference.TopLeft,
         margin: {},
         isFlex: false,
         maxWidth: Infinity,
+        maxHeight: Infinity,
         type: 'type',
         hideChildrenInTreeview: false,
         showChildrenDimensions: true,

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { FixedSizeList as List } from 'react-window';
 import { Properties } from '../ContainerProperties/ContainerProperties';
 import { IContainerModel } from '../../Interfaces/IContainerModel';
-import { FindContainerById, GetDepth, MakeIterator } from '../../utils/itertools';
+import { FindContainerById, MakeRecursionDFSIterator } from '../../utils/itertools';
 import { ISymbolModel } from '../../Interfaces/ISymbolModel';
 import { PropertyType } from '../../Enums/PropertyType';
-import { ExclamationIcon } from '@heroicons/react/outline';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 
 interface IElementsSidebarProps {
   mainContainer: IContainerModel
@@ -124,7 +124,7 @@ export function ElementsSidebar(props: IElementsSidebarProps): JSX.Element {
     isOpenClasses = props.isHistoryOpen ? 'right-64' : 'right-0';
   }
 
-  const it = MakeIterator(props.mainContainer, true);
+  const it = MakeRecursionDFSIterator(props.mainContainer, 0, [0, 0], true);
   const containers = [...it];
   function Row({
     index, style
@@ -132,12 +132,12 @@ export function ElementsSidebar(props: IElementsSidebarProps): JSX.Element {
     index: number
     style: React.CSSProperties
   }): JSX.Element {
-    const container = containers[index];
-    const depth: number = GetDepth(container);
+    const { container, depth } = containers[index];
     const key = container.properties.id.toString();
+    const tabs = '|\t'.repeat(depth);
     const text = container.properties.displayedText === key
-      ? `${'|\t'.repeat(depth)} ${key}`
-      : `${'|\t'.repeat(depth)} ${container.properties.displayedText} (${key})`;
+      ? `${key}`
+      : `${container.properties.displayedText}`;
     const selectedClass: string = props.selectedContainer !== undefined &&
       props.selectedContainer !== null &&
       props.selectedContainer.properties.id === container.properties.id
@@ -157,9 +157,10 @@ export function ElementsSidebar(props: IElementsSidebarProps): JSX.Element {
         onDragOver={(event) => HandleDragOver(event, props.mainContainer)}
         onDragLeave={(event) => HandleDragLeave(event)}
       >
+        {tabs}
         {text}
         {container.properties.warning.length > 0 &&
-          <ExclamationIcon></ExclamationIcon>
+          <ExclamationTriangleIcon className='w-8'/>
         }
       </button>
     );