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/IContainerProperties.ts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { XPositionReference } from '../Enums/XPositionReference';
+
+/**
+ * Properties of a container
+ */
+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
+
+  /** horizontal offset */
+  x: number
+
+  /** vertical offset */
+  y: number
+
+  /**
+   * Minimum width (min=1)
+   * Allows the container to set isRigidBody to false when it gets squeezed
+   * by an anchor
+   */
+  minWidth: number
+
+  /** width */
+  width: number
+
+  /** height */
+  height: number
+
+  /** true if rigid, false otherwise */
+  isRigidBody: boolean
+
+  /** true if anchor, false otherwise */
+  isAnchor: boolean
+
+  /** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */
+  XPositionReference: XPositionReference
+
+  /**
+   * (optional)
+   * Replace a <rect> by a customized "SVG". It is not really an svg but it at least allows
+   * to draw some patterns that can be bind to the properties of the container
+   * Use {prop} to bind a property. Use {{ styleProp }} to use an object.
+   * Example :
+   * ```
+   * `<rect width="{width}" height="{height}" style="{style}"></rect>
+   * <rect  width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect>
+   * <line x1="0" y1="0" x2="{width}" y2="{height}" stroke="black" style='{{ "transform":"scaleY(0.5)"}}'></line>
+   * <line x1="{width}" y1="0" x2="0" y2="{height}" stroke="black" style='{userData.styleLine}'></line>
+   * `
+   * ```
+   */
+  customSVG?: string
+
+  /**
+   * (optional)
+   * Style of the <rect>
+   */
+  style?: React.CSSProperties
+
+  /**
+   * (optional)
+   * User data that can be used for data storage or custom SVG
+   */
+  userData?: object
+}