Merged PR 162: Implement symbols and other stuff (see desc)

Implement symbols
- Add, Remove, Select Container
- Form
- Link with container
- Symbol behavior application to container (move to x with xpositionreference)

Important changes
- Remove SelectedContainer from HistoryState, meaning that it will be slower for each load but will be faster for each operations* (SetHistory, SelectContainer, DeleteContainer, SymbolOperations)
- ElementsSidebar now opens with isSidebarOpen meaning that both sidebar will open on toggle
- Moved camelize, transformX, restoreX to different modules (stringtools.ts, svg.ts)

src/Components/Editor/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>