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)

src/utils/saveload.ts

@@ -18,6 +18,11 @@ export function Revive(editorState: IEditorState): void {
       continue;
     }
 
+    state.Symbols = new Map(state.Symbols);
+    for (const symbol of state.Symbols.values()) {
+      symbol.linkedContainers = new Set(symbol.linkedContainers);
+    }
+
     const it = MakeIterator(state.MainContainer);
     for (const container of it) {
       const parentId = container.properties.parentId;
@@ -31,24 +36,21 @@ export function Revive(editorState: IEditorState): void {
       }
       container.parent = parent;
     }
-
-    const selected = findContainerById(state.MainContainer, state.SelectedContainerId);
-    if (selected === undefined) {
-      state.SelectedContainer = null;
-      continue;
-    }
-    state.SelectedContainer = selected;
   }
 }
 
-export const getCircularReplacer = (): (key: any, value: object | null) => object | null | undefined => {
+export const getCircularReplacer = (): (key: any, value: object | Map<string, any> | null) => object | null | undefined => {
   return (key: any, value: object | null) => {
     if (key === 'parent') {
       return;
     }
 
-    if (key === 'SelectedContainer') {
-      return;
+    if (key === 'Symbols') {
+      return Array.from((value as Map<string, any>).entries());
+    }
+
+    if (key === 'linkedContainers') {
+      return Array.from(value as Set<string>);
     }
 
     return value;

src/utils/stringtools.ts

@@ -4,3 +4,7 @@ export function truncateString(str: string, num: number): string {
   }
   return `${str.slice(0, num)}...`;
 }
+
+export function camelize(str: string): any {
+  return str.split('-').map((word, index) => index > 0 ? word.charAt(0).toUpperCase() + word.slice(1) : word).join('');
+}

src/utils/svg.ts

@@ -0,0 +1,21 @@
+import { XPositionReference } from '../Enums/XPositionReference';
+
+export function transformX(x: number, width: number, xPositionReference = XPositionReference.Left): number {
+  let transformedX = x;
+  if (xPositionReference === XPositionReference.Center) {
+    transformedX += width / 2;
+  } else if (xPositionReference === XPositionReference.Right) {
+    transformedX += width;
+  }
+  return transformedX;
+}
+
+export function restoreX(x: number, width: number, xPositionReference = XPositionReference.Left): number {
+  let transformedX = x;
+  if (xPositionReference === XPositionReference.Center) {
+    transformedX -= width / 2;
+  } else if (xPositionReference === XPositionReference.Right) {
+    transformedX -= width;
+  }
+  return transformedX;
+}