azure-pipelines.yml

@@ -21,7 +21,7 @@ steps:
     path: $(pnpm_config_cache)
   displayName: Cache pnpm
 
-- bash: |
+- script: |
     curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm@7
     pnpm config set store-dir $(pnpm_config_cache)
   displayName: "Setup pnpm"
@@ -31,8 +31,7 @@ steps:
     versionSpec: '16.x'
   displayName: 'Install Node.js 16.x LTS'
 
-- bash: |
+- script: |
-    set -euo pipefail
     node --version
     node ./test-server/node-http.js &
     jobs
@@ -47,8 +46,7 @@ steps:
     versionSpec: '>=18.7.0'
   displayName: 'Install Node.js Latest'
 
-- bash: |
+- script: |
-    set -euo pipefail
     node --version
     node ./test-server/node-http.js &
     jobs

public/workers/worker.js

@@ -4,19 +4,22 @@ onmessage = (e) => {
 };
 
 const getCircularReplacer = () => {
+  const seen = new WeakSet();
   return (key, value) => {
     if (key === 'parent') {
       return;
     }
 
-    if (key === 'Symbols') {
+    if (key === 'SelectedContainer') {
-      return Array.from(value.entries());
+      return;
     }
 
-    if (key === 'linkedContainers') {
+    if (typeof value === 'object' && value !== null) {
-      return Array.from(value);
+      if (seen.has(value)) {
+        return;
+      }
+      seen.add(value);
     }
-
     return value;
   };
 };

src/Components/App/App.tsx

@@ -26,10 +26,9 @@ export const App: React.FunctionComponent<IAppProps> = (props) => {
     history: [{
       LastAction: '',
       MainContainer: defaultMainContainer,
+      SelectedContainer: defaultMainContainer,
       SelectedContainerId: defaultMainContainer.properties.id,
-      TypeCounters: {},
+      TypeCounters: {}
-      Symbols: new Map(),
-      SelectedSymbolId: ''
     }],
     historyCurrentStep: 0
   });

src/Components/App/MenuActions.ts

@@ -4,6 +4,7 @@ import { ContainerModel } from '../../Interfaces/IContainerModel';
 import { fetchConfiguration } from '../API/api';
 import { IEditorState } from '../../Interfaces/IEditorState';
 import { LoadState } from './Load';
+import { XPositionReference } from '../../Enums/XPositionReference';
 import { DEFAULT_MAINCONTAINER_PROPS } from '../../utils/default';
 
 export function NewEditor(
@@ -25,7 +26,6 @@ export function NewEditor(
 
       // Save the configuration and the new MainContainer
       // and default the selected container to it
-      // TODO: Put this in default.ts
       const editorState: IEditorState = {
         configuration,
         history:
@@ -33,10 +33,9 @@ export function NewEditor(
             {
               LastAction: '',
               MainContainer,
+              SelectedContainer: MainContainer,
               SelectedContainerId: MainContainer.properties.id,
-              TypeCounters: {},
+              TypeCounters: {}
-              Symbols: new Map(),
-              SelectedSymbolId: ''
             }
           ],
         historyCurrentStep: 0

src/Components/Bar/Bar.tsx

@@ -1,14 +1,13 @@
-import { ClockIcon, CubeIcon, LinkIcon, MapIcon } from '@heroicons/react/outline';
+import { ClockIcon, CubeIcon, MapIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { BarIcon } from './BarIcon';
 
 interface IBarProps {
   isSidebarOpen: boolean
-  isSymbolsOpen: boolean
   isElementsSidebarOpen: boolean
   isHistoryOpen: boolean
   ToggleSidebar: () => void
-  ToggleSymbols: () => void
+  ToggleElementsSidebar: () => void
   ToggleTimeline: () => void
 }
 
@@ -24,10 +23,10 @@ export const Bar: React.FC<IBarProps> = (props) => {
         <CubeIcon className='heroicon'/>
       </BarIcon>
       <BarIcon
-        isActive={props.isSymbolsOpen}
+        isActive={props.isElementsSidebarOpen}
-        title='Symbols'
+        title='Map'
-        onClick={() => props.ToggleSymbols()}>
+        onClick={() => props.ToggleElementsSidebar()}>
-        <LinkIcon className='heroicon'/>
+        <MapIcon className='heroicon'/>
       </BarIcon>
       <BarIcon
         isActive={props.isHistoryOpen}

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 ApplyAnchor(container: IContainerModel): IContainerModel {
+export function ImposePosition(container: IContainerModel): IContainerModel {
   if (container.parent === undefined ||
     container.parent === null) {
     return container;

src/Components/Editor/Behaviors/Behaviors.ts

@@ -1,9 +1,7 @@
 import { IContainerModel } from '../../../Interfaces/IContainerModel';
-import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
 import { APPLY_BEHAVIORS_ON_CHILDREN } from '../../../utils/default';
-import { ApplyAnchor } from './AnchorBehaviors';
+import { ImposePosition } from './AnchorBehaviors';
-import { ApplyRigidBody } from './RigidBodyBehaviors';
+import { RecalculatePhysics } from './RigidBodyBehaviors';
-import { ApplySymbol } from './SymbolBehaviors';
 
 /**
  * Recalculate the position of the container and its neighbors
@@ -11,24 +9,19 @@ import { ApplySymbol } from './SymbolBehaviors';
  * @param container Container to recalculate its positions
  * @returns Updated container
  */
-export function ApplyBehaviors(container: IContainerModel, symbols: Map<string, ISymbolModel>): IContainerModel {
+export function ApplyBehaviors(container: IContainerModel): IContainerModel {
   if (container.properties.isAnchor) {
-    ApplyAnchor(container);
+    ImposePosition(container);
   }
 
   if (container.properties.isRigidBody) {
-    ApplyRigidBody(container);
+    RecalculatePhysics(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);
+      ApplyBehaviors(child);
     }
   }
 

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 ApplyRigidBody(
+export function RecalculatePhysics(
   container: IContainerModel
 ): IContainerModel {
   container = constraintBodyInsideParent(container);

src/Components/Editor/Behaviors/SymbolBehaviors.ts

@@ -1,9 +0,0 @@
-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;
-}

src/Components/Editor/ContainerOperations.ts

@@ -2,20 +2,19 @@ import { Dispatch, SetStateAction } from 'react';
 import { IHistoryState } from '../../Interfaces/IHistoryState';
 import { IConfiguration } from '../../Interfaces/IConfiguration';
 import { ContainerModel, IContainerModel } from '../../Interfaces/IContainerModel';
-import { findContainerById, MakeIterator } from '../../utils/itertools';
+import { findContainerById } from '../../utils/itertools';
-import { getCurrentHistory, UpdateCounters } from './Editor';
+import { getCurrentHistory } 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(
-  containerId: string,
+  container: ContainerModel,
   fullHistory: IHistoryState[],
   historyCurrentStep: number,
   setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
@@ -24,13 +23,19 @@ 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 ${containerId}`,
+    LastAction: `Select ${selectedContainer.properties.id}`,
-    MainContainer: structuredClone(current.MainContainer),
+    MainContainer: mainContainerClone,
-    SelectedContainerId: containerId,
+    SelectedContainer: selectedContainer,
-    TypeCounters: Object.assign({}, current.TypeCounters),
+    SelectedContainerId: selectedContainer.properties.id,
-    Symbols: structuredClone(current.Symbols),
+    TypeCounters: Object.assign({}, current.TypeCounters)
-    SelectedSymbolId: current.SelectedSymbolId
   });
   setHistory(history);
   setHistoryCurrentStep(history.length - 1);
@@ -71,8 +76,6 @@ 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) {
@@ -91,26 +94,14 @@ 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
@@ -123,19 +114,21 @@ function UnlinkSymbol(symbols: Map<string, ISymbolModel>, container: IContainerM
  */
 export function AddContainerToSelectedContainer(
   type: string,
-  selected: IContainerModel | undefined,
   configuration: IConfiguration,
   fullHistory: IHistoryState[],
   historyCurrentStep: number,
   setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
   setHistoryCurrentStep: Dispatch<SetStateAction<number>>
 ): void {
-  if (selected === null ||
+  const history = getCurrentHistory(fullHistory, historyCurrentStep);
-      selected === undefined) {
+  const current = history[history.length - 1];
+
+  if (current.SelectedContainer === null ||
+      current.SelectedContainer === undefined) {
     return;
   }
 
-  const parent = selected;
+  const parent = current.SelectedContainer;
   AddContainer(
     parent.children.length,
     type,
@@ -173,6 +166,11 @@ 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);
@@ -222,7 +220,7 @@ export function AddContainer(
     }
   );
 
-  ApplyBehaviors(newContainer, current.Symbols);
+  ApplyBehaviors(newContainer);
 
   // And push it the the parent children
   if (index === parentClone.children.length) {
@@ -237,15 +235,23 @@ 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,

src/Components/Editor/Editor.tsx

@@ -11,8 +11,6 @@ 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
@@ -20,15 +18,6 @@ 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)
@@ -81,16 +70,13 @@ 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,
@@ -107,7 +93,6 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
         )}
         OnPropertyChange={(key, value, isStyle) => OnPropertyChange(
           key, value, isStyle,
-          selected,
           history,
           historyCurrentStep,
           setHistory,
@@ -115,7 +100,6 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
         )}
         OnPropertiesSubmit={(event) => OnPropertiesSubmit(
           event,
-          selected,
           history,
           historyCurrentStep,
           setHistory,
@@ -123,7 +107,6 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
         )}
         AddContainerToSelectedContainer={(type) => AddContainerToSelectedContainer(
           type,
-          selected,
           configuration,
           history,
           historyCurrentStep,
@@ -140,35 +123,6 @@ 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,
@@ -180,8 +134,7 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
       <SVG
         width={current.MainContainer?.properties.width}
         height={current.MainContainer?.properties.height}
-        selected={selected}
+        selected={current.SelectedContainer}
-        symbols={current.Symbols}
       >
         { current.MainContainer }
       </SVG>

src/Components/Editor/PropertiesOperations.ts

@@ -3,9 +3,8 @@ 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
@@ -17,7 +16,6 @@ export function OnPropertyChange(
   key: string,
   value: string | number | boolean,
   isStyle: boolean = false,
-  selected: IContainerModel | undefined,
   fullHistory: IHistoryState[],
   historyCurrentStep: number,
   setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
@@ -26,66 +24,37 @@ export function OnPropertyChange(
   const history = getCurrentHistory(fullHistory, historyCurrentStep);
   const current = history[history.length - 1];
 
-  if (selected === null ||
+  if (current.SelectedContainer === null ||
-      selected === undefined) {
+      current.SelectedContainer === undefined) {
     throw new Error('[OnPropertyChange] Property was changed before selecting a Container');
   }
 
   const mainContainerClone: IContainerModel = structuredClone(current.MainContainer);
-  const container: ContainerModel | undefined = findContainerById(mainContainerClone, selected.properties.id);
+  const container: ContainerModel | undefined = findContainerById(mainContainerClone, current.SelectedContainer.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;
   }
 
-  LinkSymbol(
+  ApplyBehaviors(container);
-    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
@@ -94,7 +63,6 @@ function LinkSymbol(
   */
 export function OnPropertiesSubmit(
   event: React.SyntheticEvent<HTMLFormElement>,
-  selected: IContainerModel | undefined,
   fullHistory: IHistoryState[],
   historyCurrentStep: number,
   setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
@@ -104,13 +72,13 @@ export function OnPropertiesSubmit(
   const history = getCurrentHistory(fullHistory, historyCurrentStep);
   const current = history[history.length - 1];
 
-  if (selected === null ||
+  if (current.SelectedContainer === null ||
-      selected === undefined) {
+      current.SelectedContainer === undefined) {
     throw new Error('[OnPropertyChange] Property was changed before selecting a Container');
   }
 
   const mainContainerClone: IContainerModel = structuredClone(current.MainContainer);
-  const container: ContainerModel | undefined = findContainerById(mainContainerClone, selected.properties.id);
+  const container: ContainerModel | undefined = findContainerById(mainContainerClone, current.SelectedContainer.properties.id);
 
   if (container === null || container === undefined) {
     throw new Error('[OnPropertyChange] Container model was not found among children of the main container!');
@@ -142,15 +110,14 @@ export function OnPropertiesSubmit(
   }
 
   // Apply the behaviors
-  ApplyBehaviors(container, current.Symbols);
+  ApplyBehaviors(container);
 
   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);
@@ -220,4 +187,3 @@ const submitRadioButtons = (
 
   (container.properties as any)[property] = radiobutton.value;
 };
-

src/Components/Editor/SymbolOperations.ts

@@ -1,180 +0,0 @@
-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);
-}

src/Components/ElementsSidebar/ElementsSidebar.test.tsx

@@ -4,19 +4,16 @@ import { fireEvent, render, screen } from '../../utils/test-utils';
 import { ElementsSidebar } from './ElementsSidebar';
 import { IContainerModel } from '../../Interfaces/IContainerModel';
 import { XPositionReference } from '../../Enums/XPositionReference';
-import { findContainerById } from '../../utils/itertools';
 
 describe.concurrent('Elements sidebar', () => {
   it('With a MainContainer', () => {
     render(<ElementsSidebar
-      symbols={new Map()}
       MainContainer={{
         children: [],
         parent: null,
         properties: {
           id: 'main',
           parentId: null,
-          linkedSymbolId: '',
           displayedText: 'main',
           x: 0,
           y: 0,
@@ -31,7 +28,7 @@ describe.concurrent('Elements sidebar', () => {
       }}
       isOpen={true}
       isHistoryOpen={false}
-      SelectedContainer={undefined}
+      SelectedContainer={null}
       OnPropertyChange={() => {}}
       OnPropertiesSubmit={() => {}}
       SelectContainer={() => {}}
@@ -45,13 +42,12 @@ describe.concurrent('Elements sidebar', () => {
   });
 
   it('With a selected MainContainer', () => {
-    const MainContainer: IContainerModel = {
+    const MainContainer = {
       children: [],
       parent: null,
       properties: {
         id: 'main',
         parentId: '',
-        linkedSymbolId: '',
         displayedText: 'main',
         x: 0,
         y: 0,
@@ -66,7 +62,6 @@ describe.concurrent('Elements sidebar', () => {
     };
 
     const { container } = render(<ElementsSidebar
-      symbols={new Map()}
       MainContainer={MainContainer}
       isOpen={true}
       isHistoryOpen={false}
@@ -107,13 +102,12 @@ describe.concurrent('Elements sidebar', () => {
 
   it('With multiple containers', () => {
     const children: IContainerModel[] = [];
-    const MainContainer: IContainerModel = {
+    const MainContainer = {
       children,
       parent: null,
       properties: {
         id: 'main',
         parentId: '',
-        linkedSymbolId: '',
         displayedText: 'main',
         x: 0,
         y: 0,
@@ -134,7 +128,6 @@ describe.concurrent('Elements sidebar', () => {
         properties: {
           id: 'child-1',
           parentId: 'main',
-          linkedSymbolId: '',
           displayedText: 'child-1',
           x: 0,
           y: 0,
@@ -156,7 +149,6 @@ describe.concurrent('Elements sidebar', () => {
         properties: {
           id: 'child-2',
           parentId: 'main',
-          linkedSymbolId: '',
           displayedText: 'child-2',
           x: 0,
           y: 0,
@@ -172,7 +164,6 @@ describe.concurrent('Elements sidebar', () => {
     );
 
     render(<ElementsSidebar
-      symbols={new Map()}
       MainContainer={MainContainer}
       isOpen={true}
       isHistoryOpen={false}
@@ -199,7 +190,6 @@ describe.concurrent('Elements sidebar', () => {
       properties: {
         id: 'main',
         parentId: '',
-        linkedSymbolId: '',
         displayedText: 'main',
         x: 0,
         y: 0,
@@ -219,7 +209,6 @@ describe.concurrent('Elements sidebar', () => {
       properties: {
         id: 'child-1',
         parentId: 'main',
-        linkedSymbolId: '',
         displayedText: 'child-1',
         x: 0,
         y: 0,
@@ -234,13 +223,12 @@ describe.concurrent('Elements sidebar', () => {
     };
     children.push(child1Model);
 
-    let SelectedContainer: IContainerModel | undefined = MainContainer;
+    let SelectedContainer = MainContainer;
-    const selectContainer = vi.fn((containerId: string) => {
+    const selectContainer = vi.fn((container: IContainerModel) => {
-      SelectedContainer = findContainerById(MainContainer, containerId);
+      SelectedContainer = container;
     });
 
     const { container, rerender } = render(<ElementsSidebar
-      symbols={new Map()}
       MainContainer={MainContainer}
       isOpen={true}
       isHistoryOpen={false}
@@ -265,7 +253,6 @@ describe.concurrent('Elements sidebar', () => {
     fireEvent.click(child1);
 
     rerender(<ElementsSidebar
-      symbols={new Map()}
       MainContainer={MainContainer}
       isOpen={true}
       isHistoryOpen={false}

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -7,17 +7,15 @@ import { Menu } from '../Menu/Menu';
 import { MenuItem } from '../Menu/MenuItem';
 import { handleDragLeave, handleDragOver, handleLeftClick, handleOnDrop, handleRightClick } from './MouseEventHandlers';
 import { IPoint } from '../../Interfaces/IPoint';
-import { ISymbolModel } from '../../Interfaces/ISymbolModel';
 
 interface IElementsSidebarProps {
   MainContainer: IContainerModel
-  symbols: Map<string, ISymbolModel>
   isOpen: boolean
   isHistoryOpen: boolean
-  SelectedContainer: IContainerModel | undefined
+  SelectedContainer: IContainerModel | null
   OnPropertyChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
   OnPropertiesSubmit: (event: React.FormEvent<HTMLFormElement>) => void
-  SelectContainer: (containerId: string) => void
+  SelectContainer: (container: IContainerModel) => void
   DeleteContainer: (containerid: string) => void
   AddContainer: (index: number, type: string, parent: string) => void
 }
@@ -106,7 +104,7 @@ export const ElementsSidebar: React.FC<IElementsSidebarProps> = (props: IElement
         onDrop={(event) => handleOnDrop(event, props.MainContainer, props.AddContainer)}
         onDragOver={(event) => handleDragOver(event, props.MainContainer)}
         onDragLeave={(event) => handleDragLeave(event)}
-        onClick={() => props.SelectContainer(container.properties.id)}
+        onClick={() => props.SelectContainer(container)}
       >
         { text }
       </button>
@@ -142,7 +140,6 @@ export const ElementsSidebar: React.FC<IElementsSidebarProps> = (props: IElement
       </Menu>
       <Properties
         properties={props.SelectedContainer?.properties}
-        symbols={props.symbols}
         onChange={props.OnPropertyChange}
         onSubmit={props.OnPropertiesSubmit}
       />

src/Components/Properties/DynamicForm.tsx

@@ -1,21 +1,18 @@
 import { MenuAlt2Icon, MenuAlt3Icon, MenuIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { XPositionReference } from '../../Enums/XPositionReference';
-import IContainerProperties from '../../Interfaces/IContainerProperties';
+import IProperties from '../../Interfaces/IProperties';
-import { ISymbolModel } from '../../Interfaces/ISymbolModel';
-import { restoreX, transformX } from '../../utils/svg';
 import { InputGroup } from '../InputGroup/InputGroup';
 import { RadioGroupButtons } from '../RadioGroupButtons/RadioGroupButtons';
-import { Select } from '../Select/Select';
+import { restoreX, transformX } from '../SVG/Elements/Container';
 
 interface IDynamicFormProps {
-  properties: IContainerProperties
+  properties: IProperties
-  symbols: Map<string, ISymbolModel>
   onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
 }
 
 const getCSSInputs = (
-  properties: IContainerProperties,
+  properties: IProperties,
   onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
 ): JSX.Element[] => {
   const groupInput: JSX.Element[] = [];
@@ -70,7 +67,6 @@ const DynamicForm: React.FunctionComponent<IDynamicFormProps> = (props) => {
         labelClassName=''
         inputClassName=''
         type='number'
-        isDisabled={props.properties.linkedSymbolId !== ''}
         value={transformX(props.properties.x, props.properties.width, props.properties.XPositionReference).toString()}
         onChange={(event) => props.onChange('x', restoreX(Number(event.target.value), props.properties.width, props.properties.XPositionReference))}
       />
@@ -164,22 +160,9 @@ const DynamicForm: React.FunctionComponent<IDynamicFormProps> = (props) => {
         ]}
         onChange={(event) => props.onChange('XPositionReference', Number(event.target.value))}
       />
-      <Select
-        inputKey='linkedSymbolId'
-        labelText='Align with symbol'
-        labelClassName=''
-        inputClassName=''
-        inputs={[...props.symbols.values()].map(symbol => ({
-          text: symbol.id,
-          value: symbol.id
-        }))}
-        value={props.properties.linkedSymbolId ?? ''}
-        onChange={(event) => props.onChange('linkedSymbolId', event.target.value)}
-      />
       { getCSSInputs(props.properties, props.onChange) }
     </div>
   );
 };
 
-
 export default DynamicForm;

src/Components/Properties/Form.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react';
-import IContainerProperties from '../../Interfaces/IContainerProperties';
+import IProperties from '../../Interfaces/IProperties';
-import { ISymbolModel } from '../../Interfaces/ISymbolModel';
 import DynamicForm from './DynamicForm';
 import StaticForm from './StaticForm';
 
 interface IFormProps {
-  properties: IContainerProperties
+  properties: IProperties
-  symbols: Map<string, ISymbolModel>
   isDynamicInput: boolean
   onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
   onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
@@ -16,7 +14,6 @@ export const Form: React.FunctionComponent<IFormProps> = (props) => {
   if (props.isDynamicInput) {
     return <DynamicForm
       properties={props.properties}
-      symbols={props.symbols}
       onChange={props.onChange}
     />;
   }

src/Components/Properties/Properties.test.tsx

@@ -2,7 +2,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import * as React from 'react';
 import { expect, describe, it, vi } from 'vitest';
 import { XPositionReference } from '../../Enums/XPositionReference';
-import IContainerProperties from '../../Interfaces/IContainerProperties';
+import IProperties from '../../Interfaces/IProperties';
 import { Properties } from './Properties';
 
 describe.concurrent('Properties', () => {
@@ -11,7 +11,6 @@ describe.concurrent('Properties', () => {
       properties={undefined}
       onChange={() => {}}
       onSubmit={() => {}}
-      symbols={new Map()}
     />);
 
     expect(screen.queryByText('id')).toBeNull();
@@ -21,10 +20,9 @@ describe.concurrent('Properties', () => {
   });
 
   it('Some properties, change values with dynamic input', () => {
-    const prop: IContainerProperties = {
+    const prop: IProperties = {
       id: 'stuff',
       parentId: 'parentId',
-      linkedSymbolId: '',
       displayedText: 'stuff',
       x: 1,
       y: 1,
@@ -44,7 +42,6 @@ describe.concurrent('Properties', () => {
       properties={prop}
       onChange={handleChange}
       onSubmit={() => {}}
-      symbols={new Map()}
     />);
 
     expect(screen.queryByText('id')).toBeDefined();
@@ -79,7 +76,6 @@ describe.concurrent('Properties', () => {
       properties={Object.assign({}, prop)}
       onChange={handleChange}
       onSubmit={() => {}}
-      symbols={new Map()}
     />);
 
     propertyId = container.querySelector('#id');

src/Components/Properties/Properties.tsx

@@ -1,12 +1,10 @@
 import React, { useState } from 'react';
-import IContainerProperties from '../../Interfaces/IContainerProperties';
+import IProperties from '../../Interfaces/IProperties';
-import { ISymbolModel } from '../../Interfaces/ISymbolModel';
 import { ToggleButton } from '../ToggleButton/ToggleButton';
 import { Form } from './Form';
 
 interface IPropertiesProps {
-  properties?: IContainerProperties
+  properties?: IProperties
-  symbols: Map<string, ISymbolModel>
   onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
   onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
 }
@@ -29,7 +27,6 @@ export const Properties: React.FC<IPropertiesProps> = (props: IPropertiesProps)
       />
       <Form
         properties={props.properties}
-        symbols={props.symbols}
         isDynamicInput={isDynamicInput}
         onChange={props.onChange}
         onSubmit={props.onSubmit}

src/Components/Properties/StaticForm.tsx

@@ -1,17 +1,17 @@
 import { MenuAlt2Icon, MenuIcon, MenuAlt3Icon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { XPositionReference } from '../../Enums/XPositionReference';
-import IContainerProperties from '../../Interfaces/IContainerProperties';
+import IProperties from '../../Interfaces/IProperties';
-import { transformX } from '../../utils/svg';
 import { InputGroup } from '../InputGroup/InputGroup';
 import { RadioGroupButtons } from '../RadioGroupButtons/RadioGroupButtons';
+import { transformX } from '../SVG/Elements/Container';
 
 interface IStaticFormProps {
-  properties: IContainerProperties
+  properties: IProperties
   onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
 }
 
-const getCSSInputs = (properties: IContainerProperties): JSX.Element[] => {
+const getCSSInputs = (properties: IProperties): JSX.Element[] => {
   const groupInput: JSX.Element[] = [];
   for (const key in properties.style) {
     groupInput.push(<InputGroup

src/Components/SVG/Elements/Container.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { Interweave, Node } from 'interweave';
+import { XPositionReference } from '../../../Enums/XPositionReference';
 import { IContainerModel } from '../../../Interfaces/IContainerModel';
 import { DIMENSION_MARGIN, SHOW_CHILDREN_DIMENSIONS, SHOW_PARENT_DIMENSION, SHOW_TEXT } from '../../../utils/default';
 import { getDepth } from '../../../utils/itertools';
 import { Dimension } from './Dimension';
-import IContainerProperties from '../../../Interfaces/IContainerProperties';
+import IProperties from '../../../Interfaces/IProperties';
-import { transformX } from '../../../utils/svg';
-import { camelize } from '../../../utils/stringtools';
 
 interface IContainerProps {
   model: IContainerModel
@@ -46,7 +45,7 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
     </rect>);
   // Dimension props
   const depth = getDepth(props.model);
-  const dimensionMargin = DIMENSION_MARGIN * depth;
+  const dimensionMargin = DIMENSION_MARGIN * (depth + 1);
   const id = `dim-${props.model.properties.id}`;
   const xStart: number = 0;
   const xEnd = props.model.properties.width;
@@ -133,7 +132,27 @@ function GetChildrenDimensionProps(props: IContainerProps, dimensionMargin: numb
   return { childrenId, xChildrenStart, xChildrenEnd, yChildren, textChildren };
 }
 
-function CreateReactCustomSVG(customSVG: string, props: IContainerProperties): React.ReactNode {
+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;
+}
+
+function CreateReactCustomSVG(customSVG: string, props: IProperties): React.ReactNode {
   return <Interweave
     tagName='g'
     disableLineBreaks={true}
@@ -143,7 +162,7 @@ function CreateReactCustomSVG(customSVG: string, props: IContainerProperties): R
   />;
 }
 
-function transform(node: HTMLElement, children: Node[], props: IContainerProperties): React.ReactNode {
+function transform(node: HTMLElement, children: Node[], props: IProperties): React.ReactNode {
   const supportedTags = ['line', 'path', 'rect'];
   if (supportedTags.includes(node.tagName.toLowerCase())) {
     const attributes: {[att: string]: string | object | null} = {};
@@ -188,3 +207,7 @@ function transform(node: HTMLElement, children: Node[], props: IContainerPropert
   }
   return undefined;
 }
+
+function camelize(str: string): any {
+  return str.split('-').map((word, index) => index > 0 ? word.charAt(0).toUpperCase() + word.slice(1) : word).join('');
+}

src/Components/SVG/Elements/DepthDimensionLayer.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ContainerModel } from '../../../Interfaces/IContainerModel';
 import { DIMENSION_MARGIN } from '../../../utils/default';
 import { getAbsolutePosition, MakeBFSIterator } from '../../../utils/itertools';
-import { transformX } from '../../../utils/svg';
+import { transformX } from './Container';
 import { Dimension } from './Dimension';
 
 interface IDimensionLayerProps {

src/Components/SVG/Elements/Selector.tsx

@@ -3,7 +3,7 @@ import { IContainerModel } from '../../../Interfaces/IContainerModel';
 import { getAbsolutePosition } from '../../../utils/itertools';
 
 interface ISelectorProps {
-  selected?: IContainerModel
+  selected: IContainerModel | null
 }
 
 export const Selector: React.FC<ISelectorProps> = (props) => {

src/Components/SVG/Elements/Symbol.tsx

@@ -1,39 +0,0 @@
-import { Interweave } from 'interweave';
-import * as React from 'react';
-import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
-import { DIMENSION_MARGIN } from '../../../utils/default';
-
-interface ISymbolProps {
-  model: ISymbolModel
-}
-
-export const Symbol: React.FC<ISymbolProps> = (props) => {
-  const href = props.model.config.Image.Base64Image ?? props.model.config.Image.Url;
-  const hasSVG = props.model.config.Image.Svg !== undefined &&
-    props.model.config.Image.Svg !== null;
-  if (hasSVG) {
-    return (
-      <g
-        x={props.model.x}
-        y={-DIMENSION_MARGIN}
-      >
-        <Interweave
-          noWrap={true}
-          disableLineBreaks={true}
-          content={props.model.config.Image.Svg}
-          allowElements={true}
-        />
-      </g>
-    );
-  }
-
-  return (
-    <image
-      href={href}
-      x={props.model.x}
-      y={-DIMENSION_MARGIN}
-      height={props.model.height}
-      width={props.model.width}
-    />
-  );
-};

src/Components/SVG/Elements/SymbolLayer.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
-import { Symbol } from './Symbol';
-
-interface ISymbolLayerProps {
-  symbols: Map<string, ISymbolModel>
-}
-
-export const SymbolLayer: React.FC<ISymbolLayerProps> = (props) => {
-  const symbols: JSX.Element[] = [];
-  props.symbols.forEach((symbol) => {
-    symbols.push(
-      <Symbol key={`symbol-${symbol.id}`} model={symbol} />
-    );
-  });
-  return (
-    <g>
-      {
-        symbols
-      }
-    </g>
-  );
-};

src/Components/SVG/SVG.tsx

@@ -4,17 +4,15 @@ import { Container } from './Elements/Container';
 import { ContainerModel } from '../../Interfaces/IContainerModel';
 import { Selector } from './Elements/Selector';
 import { BAR_WIDTH } from '../Bar/Bar';
+import { DimensionLayer } from './Elements/DimensionLayer';
 import { DepthDimensionLayer } from './Elements/DepthDimensionLayer';
 import { SHOW_DIMENSIONS_PER_DEPTH } from '../../utils/default';
-import { SymbolLayer } from './Elements/SymbolLayer';
-import { ISymbolModel } from '../../Interfaces/ISymbolModel';
 
 interface ISVGProps {
   width: number
   height: number
   children: ContainerModel | ContainerModel[] | null
-  selected?: ContainerModel
+  selected: ContainerModel | null
-  symbols: Map<string, ISymbolModel>
 }
 
 interface Viewer {
@@ -83,7 +81,6 @@ export const SVG: React.FC<ISVGProps> = (props: ISVGProps) => {
               ? <DepthDimensionLayer roots={props.children}/>
               : null
           }
-          <SymbolLayer symbols={props.symbols} />
           <Selector selected={props.selected} /> {/* leave this at the end so it can be removed during the svg export */}
         </svg>
       </UncontrolledReactSVGPanZoom>

src/Components/Select/Select.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react';
-import { IInputGroup } from '../../Interfaces/IInputGroup';
-
-interface ISelectProps {
-  labelKey?: string
-  labelText: string
-  inputKey: string
-  labelClassName: string
-  inputClassName: string
-  inputs: IInputGroup[]
-  value?: string
-  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void
-}
-
-const className = `
-        w-full
-        text-xs font-medium transition-all text-gray-800 mt-1 px-3 py-2
-        bg-white border-2 border-white rounded-lg placeholder-gray-800
-        focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
-        disabled:bg-slate-300 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none`;
-
-export const Select: React.FC<ISelectProps> = (props) => {
-  const options = [(
-    <option key='symbol-none' value=''>None</option>
-  )];
-
-  props.inputs.forEach(input => {
-    options.push(<option
-      key={input.value}
-      value={input.value}
-    >
-      {input.text}
-    </option>);
-  });
-
-  return (
-    <>
-      <label
-        key={props.labelKey}
-        className={`mt-4 text-xs font-medium text-gray-800 ${props.labelClassName}`}
-        htmlFor={props.inputKey}
-      >
-        { props.labelText }
-      </label>
-      <select
-        id={props.inputKey}
-        value={props.value}
-        onChange={props.onChange}
-        className={className}
-      >
-        { options }
-      </select>
-    </>
-  );
-};

src/Components/SymbolProperties/DynamicForm.tsx

@@ -1,56 +0,0 @@
-import * as React from 'react';
-import { ISymbolModel } from '../../Interfaces/ISymbolModel';
-import { restoreX, transformX } from '../../utils/svg';
-import { InputGroup } from '../InputGroup/InputGroup';
-
-interface IDynamicFormProps {
-  symbol: ISymbolModel
-  symbols: Map<string, ISymbolModel>
-  onChange: (key: string, value: string | number | boolean) => void
-}
-const DynamicForm: React.FunctionComponent<IDynamicFormProps> = (props) => {
-  return (
-    <div className='grid grid-cols-2 gap-y-4'>
-      <InputGroup
-        labelText='Name'
-        inputKey='id'
-        labelClassName=''
-        inputClassName=''
-        type='string'
-        value={props.symbol.id.toString()}
-        isDisabled={true}
-      />
-      <InputGroup
-        labelText='x'
-        inputKey='x'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        value={transformX(props.symbol.x, props.symbol.width, props.symbol.config.XPositionReference).toString()}
-        onChange={(event) => props.onChange('x', restoreX(Number(event.target.value), props.symbol.width, props.symbol.config.XPositionReference))}
-      />
-      <InputGroup
-        labelText='Height'
-        inputKey='height'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        min={0}
-        value={props.symbol.height.toString()}
-        onChange={(event) => props.onChange('height', Number(event.target.value))}
-      />
-      <InputGroup
-        labelText='Width'
-        inputKey='width'
-        labelClassName=''
-        inputClassName=''
-        type='number'
-        min={0}
-        value={props.symbol.width.toString()}
-        onChange={(event) => props.onChange('width', Number(event.target.value))}
-      />
-    </div>
-  );
-};
-
-export default DynamicForm;

src/Components/SymbolProperties/Form.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { ISymbolModel } from '../../Interfaces/ISymbolModel';
-import DynamicForm from './DynamicForm';
-
-interface IFormProps {
-  symbol: ISymbolModel
-  symbols: Map<string, ISymbolModel>
-  onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
-}
-
-export const Form: React.FunctionComponent<IFormProps> = (props) => {
-  return <DynamicForm
-    symbol={props.symbol}
-    symbols={props.symbols}
-    onChange={props.onChange}
-  />;
-};

src/Components/SymbolProperties/SymbolProperties.tsx

@@ -1,27 +0,0 @@
-import React, { useState } from 'react';
-import IContainerProperties from '../../Interfaces/IContainerProperties';
-import { ISymbolModel } from '../../Interfaces/ISymbolModel';
-import { ToggleButton } from '../ToggleButton/ToggleButton';
-import { Form } from './Form';
-
-interface ISymbolPropertiesProps {
-  symbol?: ISymbolModel
-  symbols: Map<string, ISymbolModel>
-  onChange: (key: string, value: string | number | boolean) => void
-}
-
-export const SymbolProperties: React.FC<ISymbolPropertiesProps> = (props: ISymbolPropertiesProps) => {
-  if (props.symbol === undefined) {
-    return <div></div>;
-  }
-
-  return (
-    <div className='h-3/5 p-3 bg-slate-200 overflow-y-auto'>
-      <Form
-        symbol={props.symbol}
-        symbols={props.symbols}
-        onChange={props.onChange}
-      />
-    </div>
-  );
-};

src/Components/Symbols/Symbols.tsx

@@ -1,68 +0,0 @@
-import * as React from 'react';
-import { IAvailableSymbol } from '../../Interfaces/IAvailableSymbol';
-import { truncateString } from '../../utils/stringtools';
-
-interface ISymbolsProps {
-  componentOptions: IAvailableSymbol[]
-  isOpen: boolean
-  buttonOnClick: (type: string) => void
-}
-
-function handleDragStart(event: React.DragEvent<HTMLButtonElement>): void {
-  event.dataTransfer.setData('type', (event.target as HTMLButtonElement).id);
-}
-
-export const Symbols: React.FC<ISymbolsProps> = (props: ISymbolsProps) => {
-  const listElements = props.componentOptions.map(componentOption => {
-    if (componentOption.Image.Url !== undefined || componentOption.Image.Base64Image !== undefined) {
-      const url = componentOption.Image.Base64Image ?? componentOption.Image.Url;
-      return (<button
-        className='justify-center sidebar-component-card hover:h-full'
-        key={componentOption.Name}
-        id={componentOption.Name}
-        title={componentOption.Name}
-        onClick={() => props.buttonOnClick(componentOption.Name)}
-        draggable={true}
-        onDragStart={(event) => handleDragStart(event)}
-      >
-        <div>
-          <img
-            className='transition-all h-12 w-full object-cover'
-            src={url}
-          />
-        </div>
-        <div>
-          {truncateString(componentOption.Name, 5)}
-        </div>
-      </button>);
-    }
-
-    return (<button
-      className='group justify-center sidebar-component hover:h-full'
-      key={componentOption.Name}
-      id={componentOption.Name}
-      title={componentOption.Name}
-      onClick={() => props.buttonOnClick(componentOption.Name)}
-      draggable={true}
-      onDragStart={(event) => handleDragStart(event)}
-    >
-
-      {truncateString(componentOption.Name, 5)}
-    </button>);
-  });
-
-  const isOpenClasses = props.isOpen ? 'left-16' : '-left-64';
-  return (
-    <div className={`fixed z-10 bg-slate-200
-      text-gray-700 transition-all h-full w-64
-      overflow-y-auto ${isOpenClasses}`}>
-      <div className='bg-slate-100 sidebar-title'>
-          Symbols
-      </div>
-      <div className='grid grid-cols-1 md:grid-cols-3 gap-2
-         m-2 md:text-xs font-bold'>
-        {listElements}
-      </div>
-    </div>
-  );
-};

src/Components/SymbolsSidebar/MouseEventHandlers.ts

@@ -1,34 +0,0 @@
-import { IPoint } from '../../Interfaces/IPoint';
-
-export function handleRightClick(
-  event: MouseEvent,
-  setIsContextMenuOpen: React.Dispatch<React.SetStateAction<boolean>>,
-  setOnClickSymbolId: React.Dispatch<React.SetStateAction<string>>,
-  setContextMenuPosition: React.Dispatch<React.SetStateAction<IPoint>>
-): void {
-  event.preventDefault();
-
-  if (!(event.target instanceof HTMLButtonElement)) {
-    setIsContextMenuOpen(false);
-    setOnClickSymbolId('');
-    return;
-  }
-
-  const contextMenuPosition: IPoint = { x: event.pageX, y: event.pageY };
-  setIsContextMenuOpen(true);
-  setOnClickSymbolId(event.target.id);
-  setContextMenuPosition(contextMenuPosition);
-}
-
-export function handleLeftClick(
-  isContextMenuOpen: boolean,
-  setIsContextMenuOpen: React.Dispatch<React.SetStateAction<boolean>>,
-  setOnClickContainerId: React.Dispatch<React.SetStateAction<string>>
-): void {
-  if (!isContextMenuOpen) {
-    return;
-  }
-
-  setIsContextMenuOpen(false);
-  setOnClickContainerId('');
-}

src/Components/SymbolsSidebar/SymbolsSidebar.tsx

@@ -1,137 +0,0 @@
-import * as React from 'react';
-import { FixedSizeList as List } from 'react-window';
-import { Menu } from '../Menu/Menu';
-import { MenuItem } from '../Menu/MenuItem';
-import { handleLeftClick, handleRightClick } from './MouseEventHandlers';
-import { IPoint } from '../../Interfaces/IPoint';
-import { ISymbolModel } from '../../Interfaces/ISymbolModel';
-import { SymbolProperties } from '../SymbolProperties/SymbolProperties';
-
-interface ISymbolsSidebarProps {
-  SelectedSymbolId: string
-  symbols: Map<string, ISymbolModel>
-  isOpen: boolean
-  isHistoryOpen: boolean
-  OnPropertyChange: (key: string, value: string | number | boolean) => void
-  SelectSymbol: (symbolId: string) => void
-  DeleteSymbol: (containerid: string) => void
-}
-
-export const SymbolsSidebar: React.FC<ISymbolsSidebarProps> = (props: ISymbolsSidebarProps): JSX.Element => {
-  // States
-  const [isContextMenuOpen, setIsContextMenuOpen] = React.useState<boolean>(false);
-  const [onClickSymbolId, setOnClickSymbolId] = React.useState<string>('');
-  const [contextMenuPosition, setContextMenuPosition] = React.useState<IPoint>({
-    x: 0,
-    y: 0
-  });
-
-  const elementRef = React.useRef<HTMLDivElement>(null);
-
-  // Event listeners
-  React.useEffect(() => {
-    const onContextMenu = (event: MouseEvent): void => handleRightClick(
-      event,
-      setIsContextMenuOpen,
-      setOnClickSymbolId,
-      setContextMenuPosition
-    );
-
-    const onLeftClick = (): void => handleLeftClick(
-      isContextMenuOpen,
-      setIsContextMenuOpen,
-      setOnClickSymbolId
-    );
-
-    elementRef.current?.addEventListener(
-      'contextmenu',
-      onContextMenu
-    );
-
-    window.addEventListener(
-      'click',
-      onLeftClick
-    );
-
-    return () => {
-      elementRef.current?.removeEventListener(
-        'contextmenu',
-        onContextMenu
-      );
-
-      window.removeEventListener(
-        'click',
-        onLeftClick
-      );
-    };
-  });
-
-  // Render
-  let isOpenClasses = '-right-64';
-  if (props.isOpen) {
-    isOpenClasses = props.isHistoryOpen
-      ? 'right-64'
-      : 'right-0';
-  }
-
-  const containers = [...props.symbols.values()];
-  const Row = ({ index, style }: {index: number, style: React.CSSProperties}): JSX.Element => {
-    const container = containers[index];
-    const key = container.id.toString();
-    const text = key;
-    const selectedClass: string = props.SelectedSymbolId !== '' &&
-        props.SelectedSymbolId === container.id
-      ? 'border-l-4 bg-slate-400/60 hover:bg-slate-400'
-      : 'bg-slate-300/60 hover:bg-slate-300';
-
-    return (
-      <button
-        className={
-          `w-full border-blue-500 elements-sidebar-row whitespace-pre
-          text-left text-sm font-medium transition-all ${selectedClass}`
-        }
-        id={key}
-        key={key}
-        style={style}
-        onClick={() => props.SelectSymbol(key)}
-      >
-        { text }
-      </button>
-    );
-  };
-
-  return (
-    <div className={`fixed flex flex-col bg-slate-100 text-gray-800 transition-all h-full w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
-      <div className='bg-slate-100 font-bold sidebar-title'>
-          Elements
-      </div>
-      <div ref={elementRef} className='h-96 text-gray-800'>
-        <List
-          className='List divide-y divide-black'
-          itemCount={containers.length}
-          itemSize={35}
-          height={384}
-          width={256}
-        >
-          { Row }
-        </List>
-      </div>
-      <Menu
-        className='transition-opacity rounded bg-slate-200 py-1 drop-shadow-xl'
-        x={contextMenuPosition.x}
-        y={contextMenuPosition.y}
-        isOpen={isContextMenuOpen}
-      >
-        <MenuItem className='contextmenu-item' text='Delete' onClick={() => {
-          setIsContextMenuOpen(false);
-          props.DeleteSymbol(onClickSymbolId);
-        }} />
-      </Menu>
-      <SymbolProperties
-        symbol={props.symbols.get(props.SelectedSymbolId)}
-        symbols={props.symbols}
-        onChange={props.OnPropertyChange}
-      />
-    </div>
-  );
-};

src/Components/UI/UI.tsx

@@ -3,55 +3,38 @@ import { ElementsSidebar } from '../ElementsSidebar/ElementsSidebar';
 import { Sidebar } from '../Sidebar/Sidebar';
 import { History } from '../History/History';
 import { IAvailableContainer } from '../../Interfaces/IAvailableContainer';
-import { IContainerModel } from '../../Interfaces/IContainerModel';
+import { ContainerModel } from '../../Interfaces/IContainerModel';
 import { IHistoryState } from '../../Interfaces/IHistoryState';
 import { PhotographIcon, UploadIcon } from '@heroicons/react/outline';
 import { FloatingButton } from '../FloatingButton/FloatingButton';
 import { Bar } from '../Bar/Bar';
-import { IAvailableSymbol } from '../../Interfaces/IAvailableSymbol';
-import { Symbols } from '../Symbols/Symbols';
-import { SymbolsSidebar } from '../SymbolsSidebar/SymbolsSidebar';
 
 interface IUIProps {
-  SelectedContainer: IContainerModel | undefined
   current: IHistoryState
   history: IHistoryState[]
   historyCurrentStep: number
   AvailableContainers: IAvailableContainer[]
-  AvailableSymbols: IAvailableSymbol[]
+  SelectContainer: (container: ContainerModel) => void
-  SelectContainer: (containerId: string) => void
   DeleteContainer: (containerId: string) => void
   OnPropertyChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
   OnPropertiesSubmit: (event: React.FormEvent<HTMLFormElement>) => void
   AddContainerToSelectedContainer: (type: string) => void
   AddContainer: (index: number, type: string, parentId: string) => void
-  AddSymbol: (type: string) => void
-  OnSymbolPropertyChange: (key: string, value: string | number | boolean) => void
-  SelectSymbol: (symbolId: string) => void
-  DeleteSymbol: (symbolId: string) => void
   SaveEditorAsJSON: () => void
   SaveEditorAsSVG: () => void
   LoadState: (move: number) => void
 }
 
-function CloseOtherSidebars(
-  setIsSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>,
-  setIsSymbolsOpen: React.Dispatch<React.SetStateAction<boolean>>
-): void {
-  setIsSidebarOpen(false);
-  setIsSymbolsOpen(false);
-}
-
 export const UI: React.FunctionComponent<IUIProps> = (props: IUIProps) => {
   const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
-  const [isSymbolsOpen, setIsSymbolsOpen] = React.useState(false);
+  const [isElementsSidebarOpen, setIsElementsSidebarOpen] = React.useState(false);
   const [isHistoryOpen, setIsHistoryOpen] = React.useState(false);
 
   let buttonRightOffsetClasses = 'right-12';
-  if (isSidebarOpen || isHistoryOpen) {
+  if (isElementsSidebarOpen || isHistoryOpen) {
     buttonRightOffsetClasses = 'right-72';
   }
-  if (isHistoryOpen && isSidebarOpen) {
+  if (isHistoryOpen && isElementsSidebarOpen) {
     buttonRightOffsetClasses = 'right-[544px]';
   }
 
@@ -59,35 +42,22 @@ export const UI: React.FunctionComponent<IUIProps> = (props: IUIProps) => {
     <>
       <Bar
         isSidebarOpen={isSidebarOpen}
-        isSymbolsOpen={isSymbolsOpen}
+        isElementsSidebarOpen={isElementsSidebarOpen}
-        isElementsSidebarOpen={isSidebarOpen}
         isHistoryOpen={isHistoryOpen}
-        ToggleSidebar={() => {
+        ToggleElementsSidebar={() => setIsElementsSidebarOpen(!isElementsSidebarOpen)}
-          CloseOtherSidebars(setIsSidebarOpen, setIsSymbolsOpen);
+        ToggleSidebar={() => setIsSidebarOpen(!isSidebarOpen)}
-          setIsSidebarOpen(!isSidebarOpen);
-        }}
-        ToggleSymbols={() => {
-          CloseOtherSidebars(setIsSidebarOpen, setIsSymbolsOpen);
-          setIsSymbolsOpen(!isSymbolsOpen);
-        }}
         ToggleTimeline={() => setIsHistoryOpen(!isHistoryOpen)}
       />
 
       <Sidebar
         componentOptions={props.AvailableContainers}
         isOpen={isSidebarOpen}
-        buttonOnClick={props.AddContainerToSelectedContainer}
+        buttonOnClick={(type: string) => props.AddContainerToSelectedContainer(type)}
-      />
-      <Symbols
-        componentOptions={props.AvailableSymbols}
-        isOpen={isSymbolsOpen}
-        buttonOnClick={props.AddSymbol}
       />
       <ElementsSidebar
         MainContainer={props.current.MainContainer}
-        symbols={props.current.Symbols}
+        SelectedContainer={props.current.SelectedContainer}
-        SelectedContainer={props.SelectedContainer}
+        isOpen={isElementsSidebarOpen}
-        isOpen={isSidebarOpen}
         isHistoryOpen={isHistoryOpen}
         OnPropertyChange={props.OnPropertyChange}
         OnPropertiesSubmit={props.OnPropertiesSubmit}
@@ -95,15 +65,6 @@ export const UI: React.FunctionComponent<IUIProps> = (props: IUIProps) => {
         DeleteContainer={props.DeleteContainer}
         AddContainer={props.AddContainer}
       />
-      <SymbolsSidebar
-        SelectedSymbolId={props.current.SelectedSymbolId}
-        symbols={props.current.Symbols}
-        isOpen={isSymbolsOpen}
-        isHistoryOpen={isHistoryOpen}
-        OnPropertyChange={props.OnSymbolPropertyChange}
-        SelectSymbol={props.SelectSymbol}
-        DeleteSymbol={props.DeleteSymbol}
-      />
       <History
         history={props.history}
         historyCurrentStep={props.historyCurrentStep}

src/Interfaces/IAvailableSymbol.ts

@@ -5,8 +5,8 @@ import { IImage } from './IImage';
  * Model of available symbol to configure the application */
 export interface IAvailableSymbol {
   Name: string
+  XPositionReference: XPositionReference
   Image: IImage
-  Width?: number
+  Width: number
-  Height?: number
+  Height: number
-  XPositionReference?: XPositionReference
 }

src/Interfaces/IContainerModel.ts

@@ -1,25 +1,21 @@
-import IContainerProperties from './IContainerProperties';
+import IProperties from './IProperties';
 
 export interface IContainerModel {
   children: IContainerModel[]
   parent: IContainerModel | null
-  properties: IContainerProperties
+  properties: IProperties
   userData: Record<string, string | number>
 }
 
-/**
- * Macro for creating the interface
- * Do not add methods since they will be lost during serialization
- */
 export class ContainerModel implements IContainerModel {
   public children: IContainerModel[];
   public parent: IContainerModel | null;
-  public properties: IContainerProperties;
+  public properties: IProperties;
   public userData: Record<string, string | number>;
 
   constructor(
     parent: IContainerModel | null,
-    properties: IContainerProperties,
+    properties: IProperties,
     children: IContainerModel[] = [],
     userData = {}) {
     this.parent = parent;

src/Interfaces/IHistoryState.ts

@@ -1,22 +1,9 @@
 import { IContainerModel } from './IContainerModel';
-import { ISymbolModel } from './ISymbolModel';
 
 export interface IHistoryState {
-  /** Last editor action */
   LastAction: string
-
-  /** Reference to the main container */
   MainContainer: IContainerModel
-
+  SelectedContainer: IContainerModel | null
-  /** Id of the selected container */
   SelectedContainerId: string
-
-  /** Counter of type of container. Used for ids. */
   TypeCounters: Record<string, number>
-
-  /** List of symbols */
-  Symbols: Map<string, ISymbolModel>
-
-  /** Selected symbols id */
-  SelectedSymbolId: string
 }

src/Interfaces/IImage.ts

@@ -1,20 +1,7 @@
-/**
+/** Model of an image with multiple source */
- * Model of an image with multiple source
- * It must at least have one source.
- *
- * If Url/Base64Image and Svg are set,
- * Url/Base64Image will be shown in the menu while SVG will be drawn
- */
 export interface IImage {
-  /** Name of the image */
   Name: string
-
+  Url: string
-  /** (optional) Url of the image */
+  Base64Image: string
-  Url?: string
+  Svg: string
-
-  /** (optional) base64 data of the image */
-  Base64Image?: string
-
-  /** (optional) SVG string */
-  Svg?: string
 }

src/Interfaces/IProperties.ts

@@ -4,17 +4,13 @@ import { XPositionReference } from '../Enums/XPositionReference';
 /**
  * Properties of a container
  */
-export default interface IContainerProperties {
+export default interface IProperties {
   /** 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
 

src/Interfaces/ISymbolModel.ts

@@ -1,24 +0,0 @@
-import { IAvailableSymbol } from './IAvailableSymbol';
-
-export interface ISymbolModel {
-  /** Identifier */
-  id: string
-
-  /** Type */
-  type: string
-
-  /** Configuration of the symbol */
-  config: IAvailableSymbol
-
-  /** Horizontal offset */
-  x: number
-
-  /** Width */
-  width: number
-
-  /** Height */
-  height: number
-
-  /** List of linked container id */
-  linkedContainers: Set<string>
-}

src/index.scss

@@ -11,10 +11,6 @@
     @apply transition-all px-2 py-6 text-sm rounded-lg bg-slate-300/60 hover:bg-slate-300
   }
 
-  .sidebar-component-card {
-    @apply transition-all overflow-hidden text-sm rounded-lg bg-slate-300/60 hover:bg-slate-300
-  }
-
   .elements-sidebar-row {
     @apply pl-6 pr-6 pt-2 pb-2 w-full
   }

src/utils/default.ts

@@ -2,7 +2,7 @@ import { XPositionReference } from '../Enums/XPositionReference';
 import { IAvailableContainer } from '../Interfaces/IAvailableContainer';
 import { IConfiguration } from '../Interfaces/IConfiguration';
 import { IContainerModel } from '../Interfaces/IContainerModel';
-import IContainerProperties from '../Interfaces/IContainerProperties';
+import IProperties from '../Interfaces/IProperties';
 
 /// CONTAINER DEFAULTS ///
 
@@ -18,11 +18,6 @@ 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;
@@ -53,10 +48,9 @@ export const DEFAULT_CONFIG: IConfiguration = {
   }
 };
 
-export const DEFAULT_MAINCONTAINER_PROPS: IContainerProperties = {
+export const DEFAULT_MAINCONTAINER_PROPS: IProperties = {
   id: 'main',
   parentId: 'null',
-  linkedSymbolId: '',
   displayedText: 'main',
   x: 0,
   y: 0,
@@ -79,10 +73,9 @@ export const GetDefaultContainerProps = (
   x: number,
   y: number,
   containerConfig: IAvailableContainer
-): IContainerProperties => ({
+): IProperties => ({
   id: `${type}-${typeCount}`,
   parentId: parent.properties.id,
-  linkedSymbolId: '',
   displayedText: `${type}-${typeCount}`,
   x,
   y,

src/utils/saveload.ts

@@ -18,11 +18,6 @@ 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;
@@ -36,21 +31,24 @@ 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 | Map<string, any> | null) => object | null | undefined => {
+export const getCircularReplacer = (): (key: any, value: object | null) => object | null | undefined => {
   return (key: any, value: object | null) => {
     if (key === 'parent') {
       return;
     }
 
-    if (key === 'Symbols') {
+    if (key === 'SelectedContainer') {
-      return Array.from((value as Map<string, any>).entries());
+      return;
-    }
-
-    if (key === 'linkedContainers') {
-      return Array.from(value as Set<string>);
     }
 
     return value;

src/utils/stringtools.ts

@@ -4,7 +4,3 @@ 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

@@ -1,21 +0,0 @@
-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;
-}

test-server/http.js

@@ -112,8 +112,7 @@ const GetSVGLayoutConfiguration = () => {
     ],
     AvailableSymbols: [
       {
-        Width: 32,
+        Height: 0,
-        Height: 32,
         Image: {
           Base64Image: null,
           Name: null,
@@ -121,11 +120,11 @@ const GetSVGLayoutConfiguration = () => {
           Url: 'https://www.manutan.fr/img/S/GRP/ST/AIG3930272.jpg'
         },
         Name: 'Poteau structure',
+        Width: 0,
         XPositionReference: 1
       },
       {
-        Width: 32,
+        Height: 0,
-        Height: 32,
         Image: {
           Base64Image: null,
           Name: null,
@@ -133,6 +132,7 @@ const GetSVGLayoutConfiguration = () => {
           Url: 'https://e7.pngegg.com/pngimages/647/127/png-clipart-svg-working-group-information-world-wide-web-internet-structure.png'
         },
         Name: 'Joint de structure',
+        Width: 0,
         XPositionReference: 0
       }
     ],