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

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { ISymbolModel } from '../../Interfaces/ISymbolModel';
+import { restoreX, transformX } from '../../utils/svg';
+import { InputGroup } from '../InputGroup/InputGroup';
+
+interface IDynamicFormProps {
+  symbol: ISymbolModel
+  symbols: Map<string, ISymbolModel>
+  onChange: (key: string, value: string | number | boolean) => void
+}
+const DynamicForm: React.FunctionComponent<IDynamicFormProps> = (props) => {
+  return (
+    <div className='grid grid-cols-2 gap-y-4'>
+      <InputGroup
+        labelText='Name'
+        inputKey='id'
+        labelClassName=''
+        inputClassName=''
+        type='string'
+        value={props.symbol.id.toString()}
+        isDisabled={true}
+      />
+      <InputGroup
+        labelText='x'
+        inputKey='x'
+        labelClassName=''
+        inputClassName=''
+        type='number'
+        value={transformX(props.symbol.x, props.symbol.width, props.symbol.config.XPositionReference).toString()}
+        onChange={(event) => props.onChange('x', restoreX(Number(event.target.value), props.symbol.width, props.symbol.config.XPositionReference))}
+      />
+      <InputGroup
+        labelText='Height'
+        inputKey='height'
+        labelClassName=''
+        inputClassName=''
+        type='number'
+        min={0}
+        value={props.symbol.height.toString()}
+        onChange={(event) => props.onChange('height', Number(event.target.value))}
+      />
+      <InputGroup
+        labelText='Width'
+        inputKey='width'
+        labelClassName=''
+        inputClassName=''
+        type='number'
+        min={0}
+        value={props.symbol.width.toString()}
+        onChange={(event) => props.onChange('width', Number(event.target.value))}
+      />
+    </div>
+  );
+};
+
+export default DynamicForm;

src/Components/SymbolProperties/Form.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ISymbolModel } from '../../Interfaces/ISymbolModel';
+import DynamicForm from './DynamicForm';
+
+interface IFormProps {
+  symbol: ISymbolModel
+  symbols: Map<string, ISymbolModel>
+  onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
+}
+
+export const Form: React.FunctionComponent<IFormProps> = (props) => {
+  return <DynamicForm
+    symbol={props.symbol}
+    symbols={props.symbols}
+    onChange={props.onChange}
+  />;
+};

src/Components/SymbolProperties/SymbolProperties.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import IContainerProperties from '../../Interfaces/IContainerProperties';
+import { ISymbolModel } from '../../Interfaces/ISymbolModel';
+import { ToggleButton } from '../ToggleButton/ToggleButton';
+import { Form } from './Form';
+
+interface ISymbolPropertiesProps {
+  symbol?: ISymbolModel
+  symbols: Map<string, ISymbolModel>
+  onChange: (key: string, value: string | number | boolean) => void
+}
+
+export const SymbolProperties: React.FC<ISymbolPropertiesProps> = (props: ISymbolPropertiesProps) => {
+  if (props.symbol === undefined) {
+    return <div></div>;
+  }
+
+  return (
+    <div className='h-3/5 p-3 bg-slate-200 overflow-y-auto'>
+      <Form
+        symbol={props.symbol}
+        symbols={props.symbols}
+        onChange={props.onChange}
+      />
+    </div>
+  );
+};