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/utils/default.ts

@@ -2,9 +2,9 @@ import { XPositionReference } from '../Enums/XPositionReference';
 import { IAvailableContainer } from '../Interfaces/IAvailableContainer';
 import { IConfiguration } from '../Interfaces/IConfiguration';
 import { IContainerModel } from '../Interfaces/IContainerModel';
-import IProperties from '../Interfaces/IProperties';
+import IContainerProperties from '../Interfaces/IContainerProperties';
 
-/// CONTAINRE DEFAULTS ///
+/// CONTAINER DEFAULTS ///
 
 export const SHOW_TEXT = true;
 export const DEFAULTCHILDTYPE_ALLOW_CYCLIC = false;
@@ -18,10 +18,16 @@ export const SHOW_DIMENSIONS_PER_DEPTH = true;
 export const DIMENSION_MARGIN = 50;
 export const NOTCHES_LENGTH = 4;
 
+/// SYMBOL DEFAULTS ///
+
+export const DEFAULT_SYMBOL_WIDTH = 32;
+export const DEFAULT_SYMBOL_HEIGHT = 32;
+
 /// EDITOR DEFAULTS ///
 
 export const ENABLE_SHORTCUTS = true;
 export const MAX_HISTORY = 200;
+export const APPLY_BEHAVIORS_ON_CHILDREN = true;
 
 export const DEFAULT_CONFIG: IConfiguration = {
   AvailableContainers: [
@@ -47,9 +53,10 @@ export const DEFAULT_CONFIG: IConfiguration = {
   }
 };
 
-export const DEFAULT_MAINCONTAINER_PROPS: IProperties = {
+export const DEFAULT_MAINCONTAINER_PROPS: IContainerProperties = {
   id: 'main',
   parentId: 'null',
+  linkedSymbolId: '',
   displayedText: 'main',
   x: 0,
   y: 0,
@@ -72,9 +79,10 @@ export const GetDefaultContainerProps = (
   x: number,
   y: number,
   containerConfig: IAvailableContainer
-): IProperties => ({
+): IContainerProperties => ({
   id: `${type}-${typeCount}`,
   parentId: parent.properties.id,
+  linkedSymbolId: '',
   displayedText: `${type}-${typeCount}`,
   x,
   y,
@@ -83,7 +91,7 @@ export const GetDefaultContainerProps = (
   isRigidBody: false, // set this to true to replicate Florian's project
   isAnchor: false,
   XPositionReference: containerConfig.XPositionReference ?? XPositionReference.Left,
-  minWidth: containerConfig.MinWidth ?? 0,
+  minWidth: containerConfig.MinWidth ?? 1,
   customSVG: containerConfig.CustomSVG,
   style: structuredClone(containerConfig.Style),
   userData: structuredClone(containerConfig.UserData)