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)
2022-08-22 13:58:32 +00:00 · 2022-08-22 13:58:32 +00:00 · 8b8d88f885
commit 8b8d88f885
parent 58ef28fe89
48 changed files with 1453 additions and 188 deletions
--- a/src/Components/Editor/Behaviors/AnchorBehaviors.ts
+++ b/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;
--- a/src/Components/Editor/Behaviors/Behaviors.ts
+++ b/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;
--- a/src/Components/Editor/Behaviors/RigidBodyBehaviors.ts
+++ b/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;
--- a/src/Components/Editor/Behaviors/SymbolBehaviors.ts
+++ b/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;
+}
--- a/src/Components/Editor/ContainerOperations.ts
+++ b/src/Components/Editor/ContainerOperations.ts
@ -2,19 +2,20 @@ import { Dispatch, SetStateAction } from 'react';
 import { IHistoryState } from '../../Interfaces/IHistoryState';
 import { IConfiguration } from '../../Interfaces/IConfiguration';
 import { ContainerModel, IContainerModel } from '../../Interfaces/IContainerModel';
-import { findContainerById } from '../../utils/itertools';
-import { getCurrentHistory } from './Editor';
+import { findContainerById, MakeIterator } from '../../utils/itertools';
+import { getCurrentHistory, UpdateCounters } from './Editor';
 import { AddMethod } from '../../Enums/AddMethod';
 import { IAvailableContainer } from '../../Interfaces/IAvailableContainer';
 import { GetDefaultContainerProps, DEFAULTCHILDTYPE_ALLOW_CYCLIC, DEFAULTCHILDTYPE_MAX_DEPTH } from '../../utils/default';
 import { ApplyBehaviors } from './Behaviors/Behaviors';
+import { ISymbolModel } from '../../Interfaces/ISymbolModel';

 /**
 * Select a container
 * @param container Selected container
 */
 export function SelectContainer(
-  container: ContainerModel,
+  containerId: string,
  fullHistory: IHistoryState[],
  historyCurrentStep: number,
  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
@ -23,19 +24,13 @@ export function SelectContainer(
  const history = getCurrentHistory(fullHistory, historyCurrentStep);
  const current = history[history.length - 1];

-  const mainContainerClone = structuredClone(current.MainContainer);
-  const selectedContainer = findContainerById(mainContainerClone, container.properties.id);
-
-  if (selectedContainer === undefined) {
-    throw new Error('[SelectContainer] Cannot find container among children of main container!');
-  }
-
  history.push({
-    LastAction: `Select ${selectedContainer.properties.id}`,
-    MainContainer: mainContainerClone,
-    SelectedContainer: selectedContainer,
-    SelectedContainerId: selectedContainer.properties.id,
-    TypeCounters: Object.assign({}, current.TypeCounters)
+    LastAction: `Select ${containerId}`,
+    MainContainer: structuredClone(current.MainContainer),
+    SelectedContainerId: containerId,
+    TypeCounters: Object.assign({}, current.TypeCounters),
+    Symbols: structuredClone(current.Symbols),
+    SelectedSymbolId: current.SelectedSymbolId
  });
  setHistory(history);
  setHistoryCurrentStep(history.length - 1);
@ -76,6 +71,8 @@ export function DeleteContainer(
  if (container === null || container === undefined) {
    throw new Error('[DeleteContainer] Container model was not found among children of the main container!');
  }
+  const newSymbols = structuredClone(current.Symbols)
+  UnlinkSymbol(newSymbols, container);

  const index = container.parent.children.indexOf(container);
  if (index > -1) {
@ -94,14 +91,26 @@ export function DeleteContainer(
  history.push({
    LastAction: `Delete ${containerId}`,
    MainContainer: mainContainerClone,
-    SelectedContainer,
    SelectedContainerId,
-    TypeCounters: Object.assign({}, current.TypeCounters)
+    TypeCounters: Object.assign({}, current.TypeCounters),
+    Symbols: newSymbols,
+    SelectedSymbolId: current.SelectedSymbolId
  });
  setHistory(history);
  setHistoryCurrentStep(history.length - 1);
 }

+function UnlinkSymbol(symbols: Map<string, ISymbolModel>, container: IContainerModel): void {
+  const it = MakeIterator(container);
+  for (const child of it) {
+    const symbol = symbols.get(child.properties.linkedSymbolId);
+    if (symbol === undefined) {
+      continue;
+    }
+    symbol.linkedContainers.delete(child.properties.id);
+  }
+}
+
 /**
 * Add a new container to a selected container
 * @param type The type of container
@ -114,21 +123,19 @@ export function DeleteContainer(
 */
 export function AddContainerToSelectedContainer(
  type: string,
+  selected: IContainerModel | undefined,
  configuration: IConfiguration,
  fullHistory: IHistoryState[],
  historyCurrentStep: number,
  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
  setHistoryCurrentStep: Dispatch<SetStateAction<number>>
 ): void {
-  const history = getCurrentHistory(fullHistory, historyCurrentStep);
-  const current = history[history.length - 1];
-
-  if (current.SelectedContainer === null ||
-      current.SelectedContainer === undefined) {
+  if (selected === null ||
+      selected === undefined) {
    return;
  }

-  const parent = current.SelectedContainer;
+  const parent = selected;
  AddContainer(
    parent.children.length,
    type,
@ -166,11 +173,6 @@ export function AddContainer(
  const history = getCurrentHistory(fullHistory, historyCurrentStep);
  const current = history[history.length - 1];

-  if (current.MainContainer === null ||
-      current.MainContainer === undefined) {
-    return;
-  }
-
  // Get the preset properties from the API
  const containerConfig = configuration.AvailableContainers
    .find(option => option.Type === type);
@ -220,7 +222,7 @@ export function AddContainer(
    }
  );

-  ApplyBehaviors(newContainer);
+  ApplyBehaviors(newContainer, current.Symbols);

  // And push it the the parent children
  if (index === parentClone.children.length) {
@ -235,23 +237,15 @@ export function AddContainer(
  history.push({
    LastAction: `Add ${newContainer.properties.id} in ${parentClone.properties.id}`,
    MainContainer: clone,
-    SelectedContainer: parentClone,
    SelectedContainerId: parentClone.properties.id,
-    TypeCounters: newCounters
+    TypeCounters: newCounters,
+    Symbols: structuredClone(current.Symbols),
+    SelectedSymbolId: current.SelectedSymbolId
  });
  setHistory(history);
  setHistoryCurrentStep(history.length - 1);
 }

-function UpdateCounters(counters: Record<string, number>, type: string): void {
-  if (counters[type] === null ||
-    counters[type] === undefined) {
-    counters[type] = 0;
-  } else {
-    counters[type]++;
-  }
-}
-
 function InitializeDefaultChild(
  configuration: IConfiguration,
  containerConfig: IAvailableContainer,
--- a/src/Components/Editor/Editor.tsx
+++ b/src/Components/Editor/Editor.tsx
@ -11,6 +11,8 @@ import { OnPropertyChange, OnPropertiesSubmit } from './PropertiesOperations';
 import EditorEvents from '../../Events/EditorEvents';
 import { IEditorState } from '../../Interfaces/IEditorState';
 import { MAX_HISTORY } from '../../utils/default';
+import { AddSymbol, OnPropertyChange as OnSymbolPropertyChange, DeleteSymbol, SelectSymbol } from './SymbolOperations';
+import { findContainerById } from '../../utils/itertools';

 interface IEditorProps {
  configuration: IConfiguration
@ -18,6 +20,15 @@ interface IEditorProps {
  historyCurrentStep: number
 }

+export function UpdateCounters(counters: Record<string, number>, type: string): void {
+  if (counters[type] === null ||
+    counters[type] === undefined) {
+    counters[type] = 0;
+  } else {
+    counters[type]++;
+  }
+}
+
 export const getCurrentHistory = (history: IHistoryState[], historyCurrentStep: number): IHistoryState[] =>
  history.slice(
    Math.max(0, history.length - MAX_HISTORY), // change this to 0 for unlimited (not recommanded because of overflow)
@ -70,13 +81,16 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {

  const configuration = props.configuration;
  const current = getCurrentHistoryState(history, historyCurrentStep);
+  const selected = findContainerById(current.MainContainer, current.SelectedContainerId);
  return (
    <div ref={editorRef} className="Editor font-sans h-full">
      <UI
+        SelectedContainer={selected}
        current={current}
        history={history}
        historyCurrentStep={historyCurrentStep}
        AvailableContainers={configuration.AvailableContainers}
+        AvailableSymbols={configuration.AvailableSymbols}
        SelectContainer={(container) => SelectContainer(
          container,
          history,
@ -93,6 +107,7 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
        )}
        OnPropertyChange={(key, value, isStyle) => OnPropertyChange(
          key, value, isStyle,
+          selected,
          history,
          historyCurrentStep,
          setHistory,
@ -100,6 +115,7 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
        )}
        OnPropertiesSubmit={(event) => OnPropertiesSubmit(
          event,
+          selected,
          history,
          historyCurrentStep,
          setHistory,
@ -107,6 +123,7 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
        )}
        AddContainerToSelectedContainer={(type) => AddContainerToSelectedContainer(
          type,
+          selected,
          configuration,
          history,
          historyCurrentStep,
@ -123,6 +140,35 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
          setHistory,
          setHistoryCurrentStep
        )}
+        AddSymbol={(type) => AddSymbol(
+          type,
+          configuration,
+          history,
+          historyCurrentStep,
+          setHistory,
+          setHistoryCurrentStep
+        )}
+        OnSymbolPropertyChange={(key, value) => OnSymbolPropertyChange(
+          key, value,
+          history,
+          historyCurrentStep,
+          setHistory,
+          setHistoryCurrentStep
+        )}
+        SelectSymbol={(symbolId) => SelectSymbol(
+          symbolId,
+          history,
+          historyCurrentStep,
+          setHistory,
+          setHistoryCurrentStep
+        )}
+        DeleteSymbol={(symbolId) => DeleteSymbol(
+          symbolId,
+          history,
+          historyCurrentStep,
+          setHistory,
+          setHistoryCurrentStep
+        )}
        SaveEditorAsJSON={() => SaveEditorAsJSON(
          history,
          historyCurrentStep,
@ -134,7 +180,8 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
      <SVG
        width={current.MainContainer?.properties.width}
        height={current.MainContainer?.properties.height}
-        selected={current.SelectedContainer}
+        selected={selected}
+        symbols={current.Symbols}
      >
        { current.MainContainer }
      </SVG>
--- a/src/Components/Editor/PropertiesOperations.ts
+++ b/src/Components/Editor/PropertiesOperations.ts
@ -3,8 +3,9 @@ import { IContainerModel, ContainerModel } from '../../Interfaces/IContainerMode
 import { IHistoryState } from '../../Interfaces/IHistoryState';
 import { findContainerById } from '../../utils/itertools';
 import { getCurrentHistory } from './Editor';
-import { restoreX } from '../SVG/Elements/Container';
 import { ApplyBehaviors } from './Behaviors/Behaviors';
+import { restoreX } from '../../utils/svg';
+import { ISymbolModel } from '../../Interfaces/ISymbolModel';

 /**
  * Handled the property change event in the properties form
@ -16,6 +17,7 @@ export function OnPropertyChange(
  key: string,
  value: string | number | boolean,
  isStyle: boolean = false,
+  selected: IContainerModel | undefined,
  fullHistory: IHistoryState[],
  historyCurrentStep: number,
  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
@ -24,37 +26,66 @@ export function OnPropertyChange(
  const history = getCurrentHistory(fullHistory, historyCurrentStep);
  const current = history[history.length - 1];

-  if (current.SelectedContainer === null ||
-      current.SelectedContainer === undefined) {
+  if (selected === null ||
+      selected === undefined) {
    throw new Error('[OnPropertyChange] Property was changed before selecting a Container');
  }

  const mainContainerClone: IContainerModel = structuredClone(current.MainContainer);
-  const container: ContainerModel | undefined = findContainerById(mainContainerClone, current.SelectedContainer.properties.id);
+  const container: ContainerModel | undefined = findContainerById(mainContainerClone, selected.properties.id);

  if (container === null || container === undefined) {
    throw new Error('[OnPropertyChange] Container model was not found among children of the main container!');
  }

+  const oldSymbolId = container.properties.linkedSymbolId;
+
  if (isStyle) {
    (container.properties.style as any)[key] = value;
  } else {
    (container.properties as any)[key] = value;
  }

-  ApplyBehaviors(container);
+  LinkSymbol(
+    container.properties.id,
+    oldSymbolId,
+    container.properties.linkedSymbolId,
+    current.Symbols
+  );
+
+  ApplyBehaviors(container, current.Symbols);

  history.push({
    LastAction: `Change ${key} of ${container.properties.id}`,
    MainContainer: mainContainerClone,
-    SelectedContainer: container,
    SelectedContainerId: container.properties.id,
-    TypeCounters: Object.assign({}, current.TypeCounters)
+    TypeCounters: Object.assign({}, current.TypeCounters),
+    Symbols: structuredClone(current.Symbols),
+    SelectedSymbolId: current.SelectedSymbolId
  });
  setHistory(history);
  setHistoryCurrentStep(history.length - 1);
 }

+function LinkSymbol(
+  containerId: string,
+  oldSymbolId: string,
+  newSymbolId: string,
+  symbols: Map<string, ISymbolModel>
+): void {
+  const oldSymbol = symbols.get(oldSymbolId);
+  const newSymbol = symbols.get(newSymbolId);
+
+  if (newSymbol === undefined) {
+    if (oldSymbol !== undefined) {
+      oldSymbol.linkedContainers.delete(containerId);
+    }
+    return;
+  }
+
+  newSymbol.linkedContainers.add(containerId);
+}
+
 /**
  * Handled the property change event in the properties form
  * @param key Property name
@ -63,6 +94,7 @@ export function OnPropertyChange(
  */
 export function OnPropertiesSubmit(
  event: React.SyntheticEvent<HTMLFormElement>,
+  selected: IContainerModel | undefined,
  fullHistory: IHistoryState[],
  historyCurrentStep: number,
  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
@ -72,13 +104,13 @@ export function OnPropertiesSubmit(
  const history = getCurrentHistory(fullHistory, historyCurrentStep);
  const current = history[history.length - 1];

-  if (current.SelectedContainer === null ||
-      current.SelectedContainer === undefined) {
+  if (selected === null ||
+      selected === undefined) {
    throw new Error('[OnPropertyChange] Property was changed before selecting a Container');
  }

  const mainContainerClone: IContainerModel = structuredClone(current.MainContainer);
-  const container: ContainerModel | undefined = findContainerById(mainContainerClone, current.SelectedContainer.properties.id);
+  const container: ContainerModel | undefined = findContainerById(mainContainerClone, selected.properties.id);

  if (container === null || container === undefined) {
    throw new Error('[OnPropertyChange] Container model was not found among children of the main container!');
@ -110,14 +142,15 @@ export function OnPropertiesSubmit(
  }

  // Apply the behaviors
-  ApplyBehaviors(container);
+  ApplyBehaviors(container, current.Symbols);

  history.push({
    LastAction: `Change properties of ${container.properties.id}`,
    MainContainer: mainContainerClone,
-    SelectedContainer: container,
    SelectedContainerId: container.properties.id,
-    TypeCounters: Object.assign({}, current.TypeCounters)
+    TypeCounters: Object.assign({}, current.TypeCounters),
+    Symbols: structuredClone(current.Symbols),
+    SelectedSymbolId: current.SelectedSymbolId
  });
  setHistory(history);
  setHistoryCurrentStep(history.length - 1);
@ -187,3 +220,4 @@ const submitRadioButtons = (

  (container.properties as any)[property] = radiobutton.value;
 };
+
--- a/src/Components/Editor/SymbolOperations.ts
+++ b/src/Components/Editor/SymbolOperations.ts
@ -0,0 +1,180 @@
+import { Dispatch, SetStateAction } from 'react';
+import { IConfiguration } from '../../Interfaces/IConfiguration';
+import { IContainerModel } from '../../Interfaces/IContainerModel';
+import { IHistoryState } from '../../Interfaces/IHistoryState';
+import { ISymbolModel } from '../../Interfaces/ISymbolModel';
+import { DEFAULT_SYMBOL_HEIGHT, DEFAULT_SYMBOL_WIDTH } from '../../utils/default';
+import { findContainerById } from '../../utils/itertools';
+import { restoreX } from '../../utils/svg';
+import { ApplyBehaviors } from './Behaviors/Behaviors';
+import { getCurrentHistory, UpdateCounters } from './Editor';
+
+export function AddSymbol(
+  name: string,
+  configuration: IConfiguration,
+  fullHistory: IHistoryState[],
+  historyCurrentStep: number,
+  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
+  setHistoryCurrentStep: Dispatch<SetStateAction<number>>
+): void {
+  const history = getCurrentHistory(fullHistory, historyCurrentStep);
+  const current = history[history.length - 1];
+
+  const symbolConfig = configuration.AvailableSymbols
+    .find(option => option.Name === name);
+
+  if (symbolConfig === undefined) {
+    throw new Error('[AddSymbol] Symbol could not be found in the config');
+  }
+  const type = `symbol-${name}`;
+  const newCounters = structuredClone(current.TypeCounters);
+  UpdateCounters(newCounters, type);
+
+  const newSymbols = structuredClone(current.Symbols);
+  // TODO: Put this in default.ts as GetDefaultConfig
+  const newSymbol: ISymbolModel = {
+    id: `${name}-${newCounters[type]}`,
+    type: name,
+    config: structuredClone(symbolConfig),
+    x: 0,
+    width: symbolConfig.Width ?? DEFAULT_SYMBOL_WIDTH,
+    height: symbolConfig.Height ?? DEFAULT_SYMBOL_HEIGHT,
+    linkedContainers: new Set()
+  };
+  newSymbol.x = restoreX(newSymbol.x, newSymbol.width, newSymbol.config.XPositionReference);
+
+  newSymbols.set(newSymbol.id, newSymbol);
+
+  history.push({
+    LastAction: `Add ${name}`,
+    MainContainer: structuredClone(current.MainContainer),
+    SelectedContainerId: current.SelectedContainerId,
+    TypeCounters: newCounters,
+    Symbols: newSymbols,
+    SelectedSymbolId: newSymbol.id
+  });
+  setHistory(history);
+  setHistoryCurrentStep(history.length - 1);
+}
+
+export function SelectSymbol(
+  symbolId: string,
+  fullHistory: IHistoryState[],
+  historyCurrentStep: number,
+  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
+  setHistoryCurrentStep: Dispatch<SetStateAction<number>>
+): void {
+  const history = getCurrentHistory(fullHistory, historyCurrentStep);
+  const current = history[history.length - 1];
+
+  history.push({
+    LastAction: `Select ${symbolId}`,
+    MainContainer: structuredClone(current.MainContainer),
+    SelectedContainerId: current.SelectedContainerId,
+    TypeCounters: structuredClone(current.TypeCounters),
+    Symbols: structuredClone(current.Symbols),
+    SelectedSymbolId: symbolId
+  });
+  setHistory(history);
+  setHistoryCurrentStep(history.length - 1);
+}
+
+export function DeleteSymbol(
+  symbolId: string,
+  fullHistory: IHistoryState[],
+  historyCurrentStep: number,
+  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
+  setHistoryCurrentStep: Dispatch<SetStateAction<number>>
+): void {
+  const history = getCurrentHistory(fullHistory, historyCurrentStep);
+  const current = history[history.length - 1];
+
+  const newSymbols = structuredClone(current.Symbols);
+  const symbol = newSymbols.get(symbolId);
+
+  if (symbol === undefined) {
+    throw new Error(`[DeleteSymbol] Could not find symbol in the current state!: ${symbolId}`);
+  }
+
+  const newMainContainer = structuredClone(current.MainContainer);
+
+  UnlinkContainers(symbol, newMainContainer);
+
+  newSymbols.delete(symbolId);
+
+  history.push({
+    LastAction: `Select ${symbolId}`,
+    MainContainer: newMainContainer,
+    SelectedContainerId: current.SelectedContainerId,
+    TypeCounters: structuredClone(current.TypeCounters),
+    Symbols: newSymbols,
+    SelectedSymbolId: symbolId
+  });
+  setHistory(history);
+  setHistoryCurrentStep(history.length - 1);
+}
+
+function UnlinkContainers(symbol: ISymbolModel, newMainContainer: IContainerModel) {
+  symbol.linkedContainers.forEach((containerId) => {
+    const container = findContainerById(newMainContainer, containerId);
+
+    if (container === undefined) {
+      return;
+    }
+
+    container.properties.linkedSymbolId = '';
+  });
+}
+
+/**
+  * Handled the property change event in the properties form
+  * @param key Property name
+  * @param value New value of the property
+  * @returns void
+  */
+export function OnPropertyChange(
+  key: string,
+  value: string | number | boolean,
+  fullHistory: IHistoryState[],
+  historyCurrentStep: number,
+  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
+  setHistoryCurrentStep: Dispatch<SetStateAction<number>>
+): void {
+  const history = getCurrentHistory(fullHistory, historyCurrentStep);
+  const current = history[history.length - 1];
+
+  if (current.SelectedSymbolId === '') {
+    throw new Error('[OnSymbolPropertyChange] Property was changed before selecting a symbol');
+  }
+
+  const newSymbols: Map<string, ISymbolModel> = structuredClone(current.Symbols);
+  const symbol = newSymbols.get(current.SelectedSymbolId);
+
+  if (symbol === null || symbol === undefined) {
+    throw new Error('[OnSymbolPropertyChange] Symbol model was not found in state!');
+  }
+
+  (symbol as any)[key] = value;
+
+  const newMainContainer = structuredClone(current.MainContainer);
+  symbol.linkedContainers.forEach((containerId) => {
+    const container = findContainerById(newMainContainer, containerId);
+
+    if (container === undefined) {
+      return;
+    }
+
+    ApplyBehaviors(container, newSymbols);
+  });
+
+  history.push({
+    LastAction: `Change ${key} of ${symbol.id}`,
+    MainContainer: newMainContainer,
+    SelectedContainerId: current.SelectedContainerId,
+    TypeCounters: Object.assign({}, current.TypeCounters),
+    Symbols: newSymbols,
+    SelectedSymbolId: symbol.id
+  });
+  setHistory(history);
+  setHistoryCurrentStep(history.length - 1);
+}