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/Properties/DynamicForm.tsx

@@ -1,18 +1,21 @@
 import { MenuAlt2Icon, MenuAlt3Icon, MenuIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { XPositionReference } from '../../Enums/XPositionReference';
-import IProperties from '../../Interfaces/IProperties';
+import IContainerProperties from '../../Interfaces/IContainerProperties';
+import { ISymbolModel } from '../../Interfaces/ISymbolModel';
+import { restoreX, transformX } from '../../utils/svg';
 import { InputGroup } from '../InputGroup/InputGroup';
 import { RadioGroupButtons } from '../RadioGroupButtons/RadioGroupButtons';
-import { restoreX, transformX } from '../SVG/Elements/Container';
+import { Select } from '../Select/Select';
 
 interface IDynamicFormProps {
-  properties: IProperties
+  properties: IContainerProperties
+  symbols: Map<string, ISymbolModel>
   onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
 }
 
 const getCSSInputs = (
-  properties: IProperties,
+  properties: IContainerProperties,
   onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
 ): JSX.Element[] => {
   const groupInput: JSX.Element[] = [];
@@ -67,6 +70,7 @@ const DynamicForm: React.FunctionComponent<IDynamicFormProps> = (props) => {
         labelClassName=''
         inputClassName=''
         type='number'
+        isDisabled={props.properties.linkedSymbolId !== ''}
         value={transformX(props.properties.x, props.properties.width, props.properties.XPositionReference).toString()}
         onChange={(event) => props.onChange('x', restoreX(Number(event.target.value), props.properties.width, props.properties.XPositionReference))}
       />
@@ -160,9 +164,22 @@ const DynamicForm: React.FunctionComponent<IDynamicFormProps> = (props) => {
         ]}
         onChange={(event) => props.onChange('XPositionReference', Number(event.target.value))}
       />
+      <Select
+        inputKey='linkedSymbolId'
+        labelText='Align with symbol'
+        labelClassName=''
+        inputClassName=''
+        inputs={[...props.symbols.values()].map(symbol => ({
+          text: symbol.id,
+          value: symbol.id
+        }))}
+        value={props.properties.linkedSymbolId ?? ''}
+        onChange={(event) => props.onChange('linkedSymbolId', event.target.value)}
+      />
       { getCSSInputs(props.properties, props.onChange) }
     </div>
   );
 };
 
+
 export default DynamicForm;