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.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}
       />