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/Editor/Behaviors/AnchorBehaviors.ts

@@ -21,7 +21,7 @@ import { constraintBodyInsideUnallocatedWidth } from './RigidBodyBehaviors';
  * Apply the following modification to the overlapping rigid body container :
  * @param container Container to impose its position
  */
-export function ImposePosition(container: IContainerModel): IContainerModel {
+export function ApplyAnchor(container: IContainerModel): IContainerModel {
   if (container.parent === undefined ||
     container.parent === null) {
     return container;

src/Components/Editor/Behaviors/Behaviors.ts

@@ -1,6 +1,9 @@
 import { IContainerModel } from '../../../Interfaces/IContainerModel';
-import { ImposePosition } from './AnchorBehaviors';
-import { RecalculatePhysics } from './RigidBodyBehaviors';
+import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
+import { APPLY_BEHAVIORS_ON_CHILDREN } from '../../../utils/default';
+import { ApplyAnchor } from './AnchorBehaviors';
+import { ApplyRigidBody } from './RigidBodyBehaviors';
+import { ApplySymbol } from './SymbolBehaviors';
 
 /**
  * Recalculate the position of the container and its neighbors
@@ -8,13 +11,25 @@ import { RecalculatePhysics } from './RigidBodyBehaviors';
  * @param container Container to recalculate its positions
  * @returns Updated container
  */
-export function ApplyBehaviors(container: IContainerModel): IContainerModel {
+export function ApplyBehaviors(container: IContainerModel, symbols: Map<string, ISymbolModel>): IContainerModel {
   if (container.properties.isAnchor) {
-    ImposePosition(container);
+    ApplyAnchor(container);
   }
 
   if (container.properties.isRigidBody) {
-    RecalculatePhysics(container);
+    ApplyRigidBody(container);
+  }
+
+  const symbol = symbols.get(container.properties.linkedSymbolId);
+  if (container.properties.linkedSymbolId !== '' && symbol !== undefined) {
+    ApplySymbol(container, symbol);
+  }
+
+  if (APPLY_BEHAVIORS_ON_CHILDREN) {
+    // Apply DFS by recursion
+    for (const child of container.children) {
+      ApplyBehaviors(child, symbols);
+    }
   }
 
   return container;

src/Components/Editor/Behaviors/RigidBodyBehaviors.ts

@@ -19,7 +19,7 @@ import { ISizePointer } from '../../../Interfaces/ISizePointer';
  * @param container Container to apply its rigid body properties
  * @returns A rigid body container
  */
-export function RecalculatePhysics(
+export function ApplyRigidBody(
   container: IContainerModel
 ): IContainerModel {
   container = constraintBodyInsideParent(container);
@@ -231,14 +231,15 @@ function getAvailableWidths(
   const width = container.properties.width;
   let unallocatedSpaces: ISizePointer[] = [{ x, width }];
 
-  // We will only uses containers that also are rigid or are anchors
-  const solidBodies = container.children.filter(
-    (child) => child.properties.isRigidBody || child.properties.isAnchor
-  );
+  for (const child of container.children) {
+    if (unallocatedSpaces.length < 1) {
+      return unallocatedSpaces;
+    }
 
-  for (const child of solidBodies) {
     // Ignore the exception
-    if (child === exception) {
+    // And we will also only uses containers that also are rigid or are anchors
+    if (child === exception ||
+      (!child.properties.isRigidBody && !child.properties.isAnchor)) {
       continue;
     }
     const childX = child.properties.x;

src/Components/Editor/Behaviors/SymbolBehaviors.ts

@@ -0,0 +1,9 @@
+import { IContainerModel } from '../../../Interfaces/IContainerModel';
+import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
+import { restoreX, transformX } from '../../../utils/svg';
+
+export function ApplySymbol(container: IContainerModel, symbol: ISymbolModel): IContainerModel {
+  container.properties.x = transformX(symbol.x, symbol.width, symbol.config.XPositionReference);
+  container.properties.x = restoreX(container.properties.x, container.properties.width, container.properties.XPositionReference);
+  return container;
+}