Merged PR 162: Implement symbols and other stuff (see desc)

Implement symbols
- Add, Remove, Select Container
- Form
- Link with container
- Symbol behavior application to container (move to x with xpositionreference)

Important changes
- Remove SelectedContainer from HistoryState, meaning that it will be slower for each load but will be faster for each operations* (SetHistory, SelectContainer, DeleteContainer, SymbolOperations)
- ElementsSidebar now opens with isSidebarOpen meaning that both sidebar will open on toggle
- Moved camelize, transformX, restoreX to different modules (stringtools.ts, svg.ts)

src/Components/ElementsSidebar/ElementsSidebar.test.tsx

@@ -4,16 +4,19 @@ import { fireEvent, render, screen } from '../../utils/test-utils';
 import { ElementsSidebar } from './ElementsSidebar';
 import { IContainerModel } from '../../Interfaces/IContainerModel';
 import { XPositionReference } from '../../Enums/XPositionReference';
+import { findContainerById } from '../../utils/itertools';
 
 describe.concurrent('Elements sidebar', () => {
   it('With a MainContainer', () => {
     render(<ElementsSidebar
+      symbols={new Map()}
       MainContainer={{
         children: [],
         parent: null,
         properties: {
           id: 'main',
           parentId: null,
+          linkedSymbolId: '',
           displayedText: 'main',
           x: 0,
           y: 0,
@@ -28,7 +31,7 @@ describe.concurrent('Elements sidebar', () => {
       }}
       isOpen={true}
       isHistoryOpen={false}
-      SelectedContainer={null}
+      SelectedContainer={undefined}
       OnPropertyChange={() => {}}
       OnPropertiesSubmit={() => {}}
       SelectContainer={() => {}}
@@ -42,12 +45,13 @@ describe.concurrent('Elements sidebar', () => {
   });
 
   it('With a selected MainContainer', () => {
-    const MainContainer = {
+    const MainContainer: IContainerModel = {
       children: [],
       parent: null,
       properties: {
         id: 'main',
         parentId: '',
+        linkedSymbolId: '',
         displayedText: 'main',
         x: 0,
         y: 0,
@@ -62,6 +66,7 @@ describe.concurrent('Elements sidebar', () => {
     };
 
     const { container } = render(<ElementsSidebar
+      symbols={new Map()}
       MainContainer={MainContainer}
       isOpen={true}
       isHistoryOpen={false}
@@ -102,12 +107,13 @@ describe.concurrent('Elements sidebar', () => {
 
   it('With multiple containers', () => {
     const children: IContainerModel[] = [];
-    const MainContainer = {
+    const MainContainer: IContainerModel = {
       children,
       parent: null,
       properties: {
         id: 'main',
         parentId: '',
+        linkedSymbolId: '',
         displayedText: 'main',
         x: 0,
         y: 0,
@@ -128,6 +134,7 @@ describe.concurrent('Elements sidebar', () => {
         properties: {
           id: 'child-1',
           parentId: 'main',
+          linkedSymbolId: '',
           displayedText: 'child-1',
           x: 0,
           y: 0,
@@ -149,6 +156,7 @@ describe.concurrent('Elements sidebar', () => {
         properties: {
           id: 'child-2',
           parentId: 'main',
+          linkedSymbolId: '',
           displayedText: 'child-2',
           x: 0,
           y: 0,
@@ -164,6 +172,7 @@ describe.concurrent('Elements sidebar', () => {
     );
 
     render(<ElementsSidebar
+      symbols={new Map()}
       MainContainer={MainContainer}
       isOpen={true}
       isHistoryOpen={false}
@@ -190,6 +199,7 @@ describe.concurrent('Elements sidebar', () => {
       properties: {
         id: 'main',
         parentId: '',
+        linkedSymbolId: '',
         displayedText: 'main',
         x: 0,
         y: 0,
@@ -209,6 +219,7 @@ describe.concurrent('Elements sidebar', () => {
       properties: {
         id: 'child-1',
         parentId: 'main',
+        linkedSymbolId: '',
         displayedText: 'child-1',
         x: 0,
         y: 0,
@@ -223,12 +234,13 @@ describe.concurrent('Elements sidebar', () => {
     };
     children.push(child1Model);
 
-    let SelectedContainer = MainContainer;
-    const selectContainer = vi.fn((container: IContainerModel) => {
-      SelectedContainer = container;
+    let SelectedContainer: IContainerModel | undefined = MainContainer;
+    const selectContainer = vi.fn((containerId: string) => {
+      SelectedContainer = findContainerById(MainContainer, containerId);
     });
 
     const { container, rerender } = render(<ElementsSidebar
+      symbols={new Map()}
       MainContainer={MainContainer}
       isOpen={true}
       isHistoryOpen={false}
@@ -253,6 +265,7 @@ describe.concurrent('Elements sidebar', () => {
     fireEvent.click(child1);
 
     rerender(<ElementsSidebar
+      symbols={new Map()}
       MainContainer={MainContainer}
       isOpen={true}
       isHistoryOpen={false}

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -7,15 +7,17 @@ import { Menu } from '../Menu/Menu';
 import { MenuItem } from '../Menu/MenuItem';
 import { handleDragLeave, handleDragOver, handleLeftClick, handleOnDrop, handleRightClick } from './MouseEventHandlers';
 import { IPoint } from '../../Interfaces/IPoint';
+import { ISymbolModel } from '../../Interfaces/ISymbolModel';
 
 interface IElementsSidebarProps {
   MainContainer: IContainerModel
+  symbols: Map<string, ISymbolModel>
   isOpen: boolean
   isHistoryOpen: boolean
-  SelectedContainer: IContainerModel | null
+  SelectedContainer: IContainerModel | undefined
   OnPropertyChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
   OnPropertiesSubmit: (event: React.FormEvent<HTMLFormElement>) => void
-  SelectContainer: (container: IContainerModel) => void
+  SelectContainer: (containerId: string) => void
   DeleteContainer: (containerid: string) => void
   AddContainer: (index: number, type: string, parent: string) => void
 }
@@ -104,7 +106,7 @@ export const ElementsSidebar: React.FC<IElementsSidebarProps> = (props: IElement
         onDrop={(event) => handleOnDrop(event, props.MainContainer, props.AddContainer)}
         onDragOver={(event) => handleDragOver(event, props.MainContainer)}
         onDragLeave={(event) => handleDragLeave(event)}
-        onClick={() => props.SelectContainer(container)}
+        onClick={() => props.SelectContainer(container.properties.id)}
       >
         { text }
       </button>
@@ -140,6 +142,7 @@ export const ElementsSidebar: React.FC<IElementsSidebarProps> = (props: IElement
       </Menu>
       <Properties
         properties={props.SelectedContainer?.properties}
+        symbols={props.symbols}
         onChange={props.OnPropertyChange}
         onSubmit={props.OnPropertiesSubmit}
       />