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/Interfaces/IAvailableSymbol.ts

@@ -5,8 +5,8 @@ import { IImage } from './IImage';
  * Model of available symbol to configure the application */
 export interface IAvailableSymbol {
   Name: string
-  XPositionReference: XPositionReference
   Image: IImage
-  Width: number
-  Height: number
+  Width?: number
+  Height?: number
+  XPositionReference?: XPositionReference
 }

src/Interfaces/IContainerModel.ts

@@ -1,21 +1,25 @@
-import IProperties from './IProperties';
+import IContainerProperties from './IContainerProperties';
 
 export interface IContainerModel {
   children: IContainerModel[]
   parent: IContainerModel | null
-  properties: IProperties
+  properties: IContainerProperties
   userData: Record<string, string | number>
 }
 
+/**
+ * Macro for creating the interface
+ * Do not add methods since they will be lost during serialization
+ */
 export class ContainerModel implements IContainerModel {
   public children: IContainerModel[];
   public parent: IContainerModel | null;
-  public properties: IProperties;
+  public properties: IContainerProperties;
   public userData: Record<string, string | number>;
 
   constructor(
     parent: IContainerModel | null,
-    properties: IProperties,
+    properties: IContainerProperties,
     children: IContainerModel[] = [],
     userData = {}) {
     this.parent = parent;

src/Interfaces/IContainerProperties.ts

@@ -4,13 +4,17 @@ import { XPositionReference } from '../Enums/XPositionReference';
 /**
  * Properties of a container
  */
-export default interface IProperties {
+export default interface IContainerProperties {
   /** id of the container */
   id: string
 
+  // TODO: replace null by empty string
   /** id of the parent container (null when there is no parent) */
   parentId: string | null
 
+  /** id of the linked symbol ('' when there is no parent) */
+  linkedSymbolId: string
+
   /** Text displayed in the container */
   displayedText: string
 

src/Interfaces/IHistoryState.ts

@@ -1,9 +1,22 @@
 import { IContainerModel } from './IContainerModel';
+import { ISymbolModel } from './ISymbolModel';
 
 export interface IHistoryState {
+  /** Last editor action */
   LastAction: string
+
+  /** Reference to the main container */
   MainContainer: IContainerModel
-  SelectedContainer: IContainerModel | null
+
+  /** Id of the selected container */
   SelectedContainerId: string
+
+  /** Counter of type of container. Used for ids. */
   TypeCounters: Record<string, number>
+
+  /** List of symbols */
+  Symbols: Map<string, ISymbolModel>
+
+  /** Selected symbols id */
+  SelectedSymbolId: string
 }

src/Interfaces/IImage.ts

@@ -1,7 +1,20 @@
-/** Model of an image with multiple source */
+/**
+ * Model of an image with multiple source
+ * It must at least have one source.
+ *
+ * If Url/Base64Image and Svg are set,
+ * Url/Base64Image will be shown in the menu while SVG will be drawn
+ */
 export interface IImage {
+  /** Name of the image */
   Name: string
-  Url: string
-  Base64Image: string
-  Svg: string
+
+  /** (optional) Url of the image */
+  Url?: string
+
+  /** (optional) base64 data of the image */
+  Base64Image?: string
+
+  /** (optional) SVG string */
+  Svg?: string
 }

src/Interfaces/ISymbolModel.ts

@@ -0,0 +1,24 @@
+import { IAvailableSymbol } from './IAvailableSymbol';
+
+export interface ISymbolModel {
+  /** Identifier */
+  id: string
+
+  /** Type */
+  type: string
+
+  /** Configuration of the symbol */
+  config: IAvailableSymbol
+
+  /** Horizontal offset */
+  x: number
+
+  /** Width */
+  width: number
+
+  /** Height */
+  height: number
+
+  /** List of linked container id */
+  linkedContainers: Set<string>
+}