Merged PR 173: Implements API methods through right click + more (read desc)

- Implements API methods through right click
- Refactor events
- Refactor usage of setHistory and setHistoryCurrentStep into a single function
- Update ContainerOperations documentations
- Added AddContainers in order to add multiple containers + refactor AddContainer to use it
- Fix regression
- Fix AddContainer at index

.env.development

@@ -1 +1,2 @@
-VITE_API_URL=http://localhost:5000
+VITE_API_FETCH_URL=http://localhost:5000
+VITE_API_POST_URL=http://localhost:5000/ApplicationState

.env.production

@@ -1,2 +1,3 @@
 
-VITE_API_URL=https://localhost/SmartMenuiserieTemplate/Service.svc/GetSVGLayoutConfiguration
+VITE_API_FETCH_URL=https://localhost/SmartMenuiserieTemplate/Service.svc/GetSVGLayoutConfiguration
+VITE_API_POST_URL=https://localhost/SmartMenuiserieTemplate/Service.svc/ApplicationState

.env.test

@@ -1 +1,2 @@
-VITE_API_URL=http://localhost:5000
+VITE_API_FETCH_URL=http://localhost:5000
+VITE_API_POST_URL=http://localhost:5000

public/workers/worker.js

@@ -9,7 +9,7 @@ const getCircularReplacer = () => {
       return;
     }
 
-    if (key === 'Symbols') {
+    if (key === 'symbols') {
       return Array.from(value.entries());
     }
 

src/Components/API/api.test.tsx

@@ -3,7 +3,7 @@ import { FetchConfiguration } from './api';
 
 describe.concurrent('API test', () => {
   it('Load environment', () => {
-    const url = import.meta.env.VITE_API_URL;
+    const url = import.meta.env.VITE_API_FETCH_URL;
     expect(url).toBe('http://localhost:5000');
   });
 

src/Components/API/api.ts

@@ -1,11 +1,15 @@
 import { IConfiguration } from '../../Interfaces/IConfiguration';
+import { IHistoryState } from '../../Interfaces/IHistoryState';
+import { ISetContainerListRequest } from '../../Interfaces/ISetContainerListRequest';
+import { ISetContainerListResponse } from '../../Interfaces/ISetContainerListResponse';
+import { GetCircularReplacer } from '../../utils/saveload';
 
 /**
  * Fetch the configuration from the API
  * @returns {Configation} The model of the configuration for the application
  */
 export async function FetchConfiguration(): Promise<IConfiguration> {
-  const url = `${import.meta.env.VITE_API_URL}`;
+  const url = import.meta.env.VITE_API_FETCH_URL;
   // The test library cannot use the Fetch API
   // @ts-expect-error
   // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
@@ -28,3 +32,30 @@ export async function FetchConfiguration(): Promise<IConfiguration> {
     xhr.send();
   });
 }
+
+export async function SetContainerList(request: ISetContainerListRequest): Promise<ISetContainerListResponse> {
+  const url = import.meta.env.VITE_API_POST_URL;
+  const dataParsed = JSON.stringify(request, GetCircularReplacer());
+  // The test library cannot use the Fetch API
+  // @ts-expect-error
+  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+  if (window.fetch) {
+    return await fetch(url, {
+      method: 'POST',
+      body: dataParsed
+    })
+      .then(async(response) =>
+        await response.json()
+      ) as ISetContainerListResponse;
+  }
+  return await new Promise((resolve) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open('POST', url, true);
+    xhr.onreadystatechange = function() { // Call a function when the state changes.
+      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
+        resolve(JSON.parse(this.responseText));
+      }
+    };
+    xhr.send(dataParsed);
+  });
+}

src/Components/Editor/Actions/ContainerOperations.ts

@@ -1,4 +1,3 @@
-import { Dispatch, SetStateAction } from 'react';
 import { IHistoryState } from '../../../Interfaces/IHistoryState';
 import { IConfiguration } from '../../../Interfaces/IConfiguration';
 import { ContainerModel, IContainerModel } from '../../../Interfaces/IContainerModel';
@@ -16,14 +15,13 @@ import { PropertyType } from '../../../Enums/PropertyType';
 /**
  * Select a container
  * @param container Selected container
+ * @returns New history
  */
 export function SelectContainer(
   containerId: string,
   fullHistory: IHistoryState[],
-  historyCurrentStep: number,
+  historyCurrentStep: number
-  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
+): IHistoryState[] {
-  setHistoryCurrentStep: Dispatch<SetStateAction<number>>
-): void {
   const history = GetCurrentHistory(fullHistory, historyCurrentStep);
   const current = history[history.length - 1];
 
@@ -35,8 +33,7 @@ export function SelectContainer(
     symbols: structuredClone(current.symbols),
     selectedSymbolId: current.selectedSymbolId
   });
-  setHistory(history);
+  return history;
-  setHistoryCurrentStep(history.length - 1);
 }
 
 /**
@@ -44,16 +41,13 @@ export function SelectContainer(
  * @param containerId containerId of the container to delete
  * @param fullHistory History of the editor
  * @param historyCurrentStep Current step
- * @param setHistory State setter for History
+ * @returns New history
- * @param setHistoryCurrentStep State setter for current step
  */
 export function DeleteContainer(
   containerId: string,
   fullHistory: IHistoryState[],
-  historyCurrentStep: number,
+  historyCurrentStep: number
-  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
+): IHistoryState[] {
-  setHistoryCurrentStep: Dispatch<SetStateAction<number>>
-): void {
   const history = GetCurrentHistory(fullHistory, historyCurrentStep);
   const current = history[history.length - 1];
 
@@ -80,7 +74,7 @@ export function DeleteContainer(
   }
 
   const newSymbols = structuredClone(current.symbols);
-  UnlinkSymbol(newSymbols, container);
+  UnlinkContainerFromSymbols(newSymbols, container);
 
   const index = container.parent.children.indexOf(container);
   if (index > -1) {
@@ -108,10 +102,21 @@ export function DeleteContainer(
     symbols: newSymbols,
     selectedSymbolId: current.selectedSymbolId
   });
-  setHistory(history);
+  return history;
-  setHistoryCurrentStep(history.length - 1);
 }
 
+/**
+ * Returns the next container that will be selected
+ * after the selectedContainer is removed.
+ * If the selected container is removed, select the sibling before,
+ * If there is no sibling, select the parent,
+ *
+ * @param mainContainerClone Main container
+ * @param selectedContainerId Current selected container
+ * @param parent Parent of the selected/deleted container
+ * @param index Index of the selected/deleted container
+ * @returns {IContainerModel} Next selected container
+ */
 function GetSelectedContainerOnDelete(
   mainContainerClone: IContainerModel,
   selectedContainerId: string,
@@ -125,7 +130,13 @@ function GetSelectedContainerOnDelete(
   return newSelectedContainerId;
 }
 
-function UnlinkSymbol(symbols: Map<string, ISymbolModel>, container: IContainerModel): void {
+/**
+ * Unlink a container and its children to symbols
+ * (used when deleting a container)
+ * @param symbols Symbols to update
+ * @param container Container to unlink
+ */
+function UnlinkContainerFromSymbols(symbols: Map<string, ISymbolModel>, container: IContainerModel): void {
   const it = MakeIterator(container);
   for (const child of it) {
     const symbol = symbols.get(child.properties.linkedSymbolId);
@@ -142,8 +153,6 @@ function UnlinkSymbol(symbols: Map<string, ISymbolModel>, container: IContainerM
  * @param configuration Configuration of the App
  * @param fullHistory History of the editor
  * @param historyCurrentStep Current step
- * @param setHistory State setter for History
- * @param setHistoryCurrentStep State setter for current step
  * @returns void
  */
 export function AddContainerToSelectedContainer(
@@ -151,28 +160,153 @@ export function AddContainerToSelectedContainer(
   selected: IContainerModel | undefined,
   configuration: IConfiguration,
   fullHistory: IHistoryState[],
-  historyCurrentStep: number,
+  historyCurrentStep: number
-  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
+): IHistoryState[] | null {
-  setHistoryCurrentStep: Dispatch<SetStateAction<number>>
-): void {
   if (selected === null ||
     selected === undefined) {
-    return;
+    return null;
   }
 
   const parent = selected;
-  AddContainer(
+  return AddContainer(
     parent.children.length,
     type,
     parent.properties.id,
     configuration,
     fullHistory,
-    historyCurrentStep,
+    historyCurrentStep
-    setHistory,
-    setHistoryCurrentStep
   );
 }
 
+/**
+ * Create and add a new container at `index` in children of parent of `parentId`
+ * @param index Index where to insert to the new container
+ * @param type Type of container
+ * @param parentId Parent in which to insert the new container
+ * @param configuration Configuration of the app
+ * @param fullHistory History of the editor
+ * @param historyCurrentStep Current step
+ * @returns void
+ */
+export function AddContainers(
+  index: number,
+  types: string[],
+  parentId: string,
+  configuration: IConfiguration,
+  fullHistory: IHistoryState[],
+  historyCurrentStep: number
+): IHistoryState[] {
+  const history = GetCurrentHistory(fullHistory, historyCurrentStep);
+  const current = history[history.length - 1];
+
+  // Deep clone the main container for the history
+  const clone: IContainerModel = structuredClone(current.mainContainer);
+
+  // Find the parent in the clone
+  const parentClone: IContainerModel | undefined = FindContainerById(
+    clone, parentId
+  );
+
+  if (parentClone === null || parentClone === undefined) {
+    throw new Error('[AddContainer] Container model was not found among children of the main container!');
+  }
+
+  // Deep clone the counters
+  const newCounters = Object.assign({}, current.typeCounters);
+
+  // containerIds is used for logging purpose (see setHistory below)
+  const containerIds: string[] = [];
+
+  // Iterate over the containers
+  types.forEach((type, typeIndex) => {
+    // Get the preset properties from the API
+    const containerConfig = configuration.AvailableContainers
+      .find(option => option.Type === type);
+
+    if (containerConfig === undefined) {
+      throw new Error(`[AddContainer] Object type not found. Found: ${type}`);
+    }
+
+    // Default margin
+    const left: number = containerConfig.Margin?.left ?? 0;
+    const bottom: number = containerConfig.Margin?.bottom ?? 0;
+    const top: number = containerConfig.Margin?.top ?? 0;
+    const right: number = containerConfig.Margin?.right ?? 0;
+
+    // Default coordinates
+    let x = containerConfig.DefaultX ?? 0;
+    let y = containerConfig.DefaultY ?? 0;
+    let width = containerConfig.Width ?? containerConfig.MaxWidth ?? containerConfig.MinWidth ?? parentClone.properties.width;
+    let height = containerConfig.Height ?? parentClone.properties.height;
+
+    ({ x, y, width, height } = ApplyMargin(x, y, width, height, left, bottom, top, right));
+
+    // Apply an add method (append or insert/replace)
+    x = ApplyAddMethod(index + typeIndex, containerConfig, parentClone, x);
+
+    // Set the counter of the object type in order to assign an unique id
+    UpdateCounters(newCounters, type);
+    const count = newCounters[type];
+
+    const defaultProperties = GetDefaultContainerProps(
+      type,
+      count,
+      parentClone,
+      x,
+      y,
+      width,
+      height,
+      containerConfig
+    );
+
+    // Create the container
+    const newContainer = new ContainerModel(
+      parentClone,
+      defaultProperties,
+      [],
+      {
+        type
+      }
+    );
+
+    // Add it to the parent
+    if (index === parentClone.children.length) {
+      parentClone.children.push(newContainer);
+    } else {
+      parentClone.children.splice(index, 0, newContainer);
+    }
+
+    /// Handle behaviors here ///
+
+    // Initialize default children of the container
+    InitializeDefaultChild(configuration, containerConfig, newContainer, newCounters);
+
+    // Apply the behaviors (flex, rigid, anchor)
+    ApplyBehaviors(newContainer, current.symbols);
+
+    // Then, apply the behaviors on its siblings (mostly for flex)
+    ApplyBehaviorsOnSiblings(newContainer, current.symbols);
+
+    // Sort the parent children by x
+    UpdateParentChildrenList(parentClone);
+
+    // Add to the list of container id for logging purpose
+    containerIds.push(newContainer.properties.id);
+  });
+
+  // Update the state
+  history.push({
+    lastAction: `Add [${containerIds.join(', ')}] in ${parentClone.properties.id}`,
+    mainContainer: clone,
+    selectedContainerId: parentClone.properties.id,
+    typeCounters: newCounters,
+    symbols: structuredClone(current.symbols),
+    selectedSymbolId: current.selectedSymbolId
+  });
+
+  return history;
+}
+
 /**
  * Create and add a new container at `index` in children of parent of `parentId`
  * @param index Index where to insert to the new container
@@ -183,7 +317,7 @@ export function AddContainerToSelectedContainer(
  * @param historyCurrentStep Current step
  * @param setHistory State setter of History
  * @param setHistoryCurrentStep State setter of the current step
- * @returns void
+ * @returns new history
  */
 export function AddContainer(
   index: number,
@@ -191,104 +325,55 @@ export function AddContainer(
   parentId: string,
   configuration: IConfiguration,
   fullHistory: IHistoryState[],
-  historyCurrentStep: number,
+  historyCurrentStep: number
-  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
+): IHistoryState[] {
-  setHistoryCurrentStep: Dispatch<SetStateAction<number>>
+  // just call AddContainers with an array on a single element
-): void {
+  return AddContainers(
-  const history = GetCurrentHistory(fullHistory, historyCurrentStep);
+    index,
-  const current = history[history.length - 1];
+    [type],
-
+    parentId,
-  // Get the preset properties from the API
+    configuration,
-  const containerConfig = configuration.AvailableContainers
+    fullHistory,
-    .find(option => option.Type === type);
+    historyCurrentStep
-
-  if (containerConfig === undefined) {
-    throw new Error(`[AddContainer] Object type not found. Found: ${type}`);
-  }
-
-  // Set the counter of the object type in order to assign an unique id
-  const newCounters = Object.assign({}, current.typeCounters);
-  UpdateCounters(newCounters, type);
-  const count = newCounters[type];
-
-  // Create maincontainer model
-  const clone: IContainerModel = structuredClone(current.mainContainer);
-
-  // Find the parent
-  const parentClone: IContainerModel | undefined = FindContainerById(
-    clone, parentId
   );
-
-  if (parentClone === null || parentClone === undefined) {
-    throw new Error('[AddContainer] Container model was not found among children of the main container!');
-  }
-  const left: number = containerConfig.Margin?.left ?? 0;
-  const bottom: number = containerConfig.Margin?.bottom ?? 0;
-  const top: number = containerConfig.Margin?.top ?? 0;
-  const right: number = containerConfig.Margin?.right ?? 0;
-
-  let x = containerConfig.DefaultX ?? 0;
-  let y = containerConfig.DefaultY ?? 0;
-  let width = containerConfig.Width ?? containerConfig.MaxWidth ?? containerConfig.MinWidth ?? parentClone.properties.width;
-  let height = containerConfig.Height ?? parentClone.properties.height;
-
-  ({ x, y, width, height } = ApplyMargin(x, y, width, height, left, bottom, top, right));
-
-  x = ApplyAddMethod(index, containerConfig, parentClone, x);
-
-  const defaultProperties = GetDefaultContainerProps(
-    type,
-    count,
-    parentClone,
-    x,
-    y,
-    width,
-    height,
-    containerConfig
-  );
-
-  // Create the container
-  const newContainer = new ContainerModel(
-    parentClone,
-    defaultProperties,
-    [],
-    {
-      type
-    }
-  );
-
-  parentClone.children.push(newContainer);
-  UpdateParentChildrenList(parentClone);
-
-  InitializeDefaultChild(configuration, containerConfig, newContainer, newCounters);
-
-  ApplyBehaviors(newContainer, current.symbols);
-
-  ApplyBehaviorsOnSiblings(newContainer, current.symbols);
-
-  // Update the state
-  history.push({
-    lastAction: `Add ${newContainer.properties.id} in ${parentClone.properties.id}`,
-    mainContainer: clone,
-    selectedContainerId: parentClone.properties.id,
-    typeCounters: newCounters,
-    symbols: structuredClone(current.symbols),
-    selectedSymbolId: current.selectedSymbolId
-  });
-  setHistory(history);
-  setHistoryCurrentStep(history.length - 1);
 }
 
+/**
+ * Sort the parent children by x
+ * @param parentClone The clone used for the sort
+ * @returns void
+ */
 function UpdateParentChildrenList(parentClone: IContainerModel | null | undefined): void {
   if (parentClone === null || parentClone === undefined) {
     return;
   }
+  const children = parentClone.children;
   parentClone.children.sort(
-    (a, b) => TransformX(a.properties.x, a.properties.width, a.properties.xPositionReference) -
+    (a, b) => {
-      TransformX(b.properties.x, b.properties.width, b.properties.xPositionReference)
+      const xA = TransformX(a.properties.x, a.properties.width, a.properties.xPositionReference);
+      const xB = TransformX(b.properties.x, b.properties.width, b.properties.xPositionReference);
+      if (xA < xB) {
+        return -1;
+      }
+      if (xB < xA) {
+        return 1;
+      }
+      // xA = xB
+      const indexA = children.indexOf(a);
+      const indexB = children.indexOf(b);
+      return indexA - indexB;
+    }
   );
 }
 
+/**
+ * Initialize the children of the container
+ * @param configuration Current configuration of the app
+ * @param containerConfig The new container config used to read the default child type
+ * @param newContainer The new container to initialize its default children
+ * @param newCounters Type counter used for unique ids
+ * @returns
+ */
 function InitializeDefaultChild(
   configuration: IConfiguration,
   containerConfig: IAvailableContainer,
@@ -368,12 +453,18 @@ function InitializeDefaultChild(
  * @param x Additionnal offset
  * @returns New offset
  */
-function ApplyAddMethod(index: number, containerConfig: IAvailableContainer, parent: IContainerModel, x: number): number {
+function ApplyAddMethod(
+  index: number,
+  containerConfig: IAvailableContainer,
+  parent: IContainerModel,
+  x: number
+): number {
   if (index > 0 && (
     containerConfig.AddMethod === undefined ||
     containerConfig.AddMethod === AddMethod.Append)) {
     // Append method (default)
-    const lastChild: IContainerModel | undefined = parent.children.at(index - 1);
+    const lastChild: IContainerModel | undefined = parent.children
+      .at(index - 1);
 
     if (lastChild !== undefined) {
       x += (lastChild.properties.x + lastChild.properties.width);
@@ -394,10 +485,8 @@ export function OnPropertyChange(
   type: PropertyType = PropertyType.Simple,
   selected: IContainerModel | undefined,
   fullHistory: IHistoryState[],
-  historyCurrentStep: number,
+  historyCurrentStep: number
-  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
+): IHistoryState[] {
-  setHistoryCurrentStep: Dispatch<SetStateAction<number>>
-): void {
   const history = GetCurrentHistory(fullHistory, historyCurrentStep);
   const current = history[history.length - 1];
 
@@ -423,8 +512,7 @@ export function OnPropertyChange(
     symbols: structuredClone(current.symbols),
     selectedSymbolId: current.selectedSymbolId
   });
-  setHistory(history);
+  return history;
-  setHistoryCurrentStep(history.length - 1);
 }
 
 /**
@@ -465,6 +553,13 @@ function SetContainer(
   UpdateParentChildrenList(container.parent);
 }
 
+/**
+ * Assign the property to a container depending on the type
+ * @param container Container in which the property will be applied to
+ * @param key Key/Id of the property
+ * @param value Value of the property
+ * @param type Type of the property
+ */
 function AssignProperty(container: ContainerModel, key: string, value: string | number | boolean, type: PropertyType): void {
   switch (type) {
     case PropertyType.Style:
@@ -477,7 +572,12 @@ function AssignProperty(container: ContainerModel, key: string, value: string |
       (container.properties as any)[key] = value;
   }
 
+  /**
+   * Set the margin property
+   */
   function SetMargin(): void {
+    // We need to detect change in order to apply transformation to the width and height
+    // Knowing the current margin is not enough as we dont keep the original width and height
     const oldMarginValue: number = (container.properties.margin as any)[key];
     const diff = Number(value) - oldMarginValue;
     switch (key) {
@@ -500,6 +600,14 @@ function AssignProperty(container: ContainerModel, key: string, value: string |
   }
 }
 
+/**
+ * Link a symbol to a container
+ * @param containerId Container id
+ * @param oldSymbolId Old Symbol id
+ * @param newSymbolId New Symbol id
+ * @param symbols Current list of symbols
+ * @returns
+ */
 function LinkSymbol(
   containerId: string,
   oldSymbolId: string,
@@ -519,10 +627,18 @@ function LinkSymbol(
   newSymbol.linkedContainers.add(containerId);
 }
 
+/**
+ * Iterate over the siblings of newContainer and apply the behaviors
+ * @param newContainer
+ * @param symbols
+ * @returns
+ */
 function ApplyBehaviorsOnSiblings(newContainer: ContainerModel, symbols: Map<string, ISymbolModel>): void {
   if (newContainer.parent === null || newContainer.parent === undefined) {
     return;
   }
 
-  newContainer.parent.children.filter(container => newContainer !== container).forEach(container => ApplyBehaviors(container, symbols));
+  newContainer.parent.children
+    .filter(container => newContainer !== container)
+    .forEach(container => ApplyBehaviors(container, symbols));
 }

src/Components/Editor/Actions/ContextMenuActions.ts

@@ -0,0 +1,131 @@
+import Swal from 'sweetalert2';
+import { AddMethod } from '../../../Enums/AddMethod';
+import { IAction } from '../../../Interfaces/IAction';
+import { IConfiguration } from '../../../Interfaces/IConfiguration';
+import { IContainerModel } from '../../../Interfaces/IContainerModel';
+import { IHistoryState } from '../../../Interfaces/IHistoryState';
+import { ISetContainerListRequest } from '../../../Interfaces/ISetContainerListRequest';
+import { ISetContainerListResponse } from '../../../Interfaces/ISetContainerListResponse';
+import { FindContainerById } from '../../../utils/itertools';
+import { SetContainerList } from '../../API/api';
+import { AddContainers, DeleteContainer } from './ContainerOperations';
+
+export function GetAction(
+  action: IAction,
+  currentState: IHistoryState,
+  configuration: IConfiguration,
+  history: IHistoryState[],
+  historyCurrentStep: number,
+  setNewHistory: (newHistory: IHistoryState[]) => void
+): (target: HTMLElement) => void {
+  return (target: HTMLElement) => {
+    const id = target.id;
+    const container = FindContainerById(currentState.mainContainer, id);
+
+    if (container === undefined) {
+      Swal.fire({
+        title: 'Error',
+        text: 'No container was selected on right click',
+        icon: 'error'
+      });
+      throw new Error(`[API:${action.Action}] No container was selected`);
+    }
+
+    /* eslint-disable @typescript-eslint/naming-convention */
+    const request: ISetContainerListRequest = {
+      Container: container,
+      Action: action.Action,
+      ApplicationState: currentState
+    };
+    /* eslint-enable */
+
+    SetContainerList(request)
+      .then((response: ISetContainerListResponse) => {
+        HandleSetContainerList(
+          action,
+          container,
+          response,
+          configuration,
+          history,
+          historyCurrentStep,
+          setNewHistory
+        );
+      });
+  };
+}
+
+function HandleSetContainerList(
+  action: IAction,
+  selectedContainer: IContainerModel,
+  response: ISetContainerListResponse,
+  configuration: IConfiguration,
+  history: IHistoryState[],
+  historyCurrentStep: number,
+  setNewHistory: (newHistory: IHistoryState[]) => void
+): void {
+  switch (action.AddingBehavior) {
+    case AddMethod.Append:
+      setNewHistory(
+        AddContainers(
+          selectedContainer.children.length,
+          response.Containers.map(container => container.properties.type),
+          selectedContainer.properties.id,
+          configuration,
+          history,
+          historyCurrentStep
+        ));
+      break;
+    case AddMethod.Insert:
+      break;
+    case AddMethod.Replace:
+      setNewHistory(
+        HandleReplace(
+          selectedContainer,
+          response,
+          configuration,
+          history,
+          historyCurrentStep
+        )
+      );
+      break;
+  }
+}
+
+function HandleReplace(
+  selectedContainer: IContainerModel,
+  response: ISetContainerListResponse,
+  configuration: IConfiguration,
+  history: IHistoryState[],
+  historyCurrentStep: number
+): IHistoryState[] {
+  if (selectedContainer.parent === undefined || selectedContainer.parent === null) {
+    throw new Error('[ReplaceContainer] Cannot replace a container that does not exists');
+  }
+
+  const index = selectedContainer.parent.children.indexOf(selectedContainer);
+
+  const types = response.Containers.map(container => container.properties.type);
+  const newHistoryBeforeDelete = AddContainers(
+    index + 1,
+    types,
+    selectedContainer.properties.parentId,
+    configuration,
+    history,
+    historyCurrentStep
+  );
+
+  const newHistoryAfterDelete = DeleteContainer(
+    selectedContainer.properties.id,
+    newHistoryBeforeDelete,
+    newHistoryBeforeDelete.length - 1
+  );
+
+  // Remove AddContainers from history
+  newHistoryAfterDelete.splice(newHistoryAfterDelete.length - 2, 1);
+
+  // Rename the last action by Replace
+  newHistoryAfterDelete[newHistoryAfterDelete.length - 1].lastAction =
+    `Replace ${selectedContainer.properties.id} by [${types.join(', ')}]`;
+
+  return newHistoryAfterDelete;
+}

src/Components/Editor/Actions/SymbolOperations.ts

@@ -13,10 +13,8 @@ export function AddSymbol(
   name: string,
   configuration: IConfiguration,
   fullHistory: IHistoryState[],
-  historyCurrentStep: number,
+  historyCurrentStep: number
-  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
+): IHistoryState[] {
-  setHistoryCurrentStep: Dispatch<SetStateAction<number>>
-): void {
   const history = GetCurrentHistory(fullHistory, historyCurrentStep);
   const current = history[history.length - 1];
 
@@ -44,17 +42,14 @@ export function AddSymbol(
     symbols: newSymbols,
     selectedSymbolId: newSymbol.id
   });
-  setHistory(history);
+  return history;
-  setHistoryCurrentStep(history.length - 1);
 }
 
 export function SelectSymbol(
   symbolId: string,
   fullHistory: IHistoryState[],
-  historyCurrentStep: number,
+  historyCurrentStep: number
-  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
+): IHistoryState[] {
-  setHistoryCurrentStep: Dispatch<SetStateAction<number>>
-): void {
   const history = GetCurrentHistory(fullHistory, historyCurrentStep);
   const current = history[history.length - 1];
 
@@ -66,17 +61,14 @@ export function SelectSymbol(
     symbols: structuredClone(current.symbols),
     selectedSymbolId: symbolId
   });
-  setHistory(history);
+  return history;
-  setHistoryCurrentStep(history.length - 1);
 }
 
 export function DeleteSymbol(
   symbolId: string,
   fullHistory: IHistoryState[],
-  historyCurrentStep: number,
+  historyCurrentStep: number
-  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
+): IHistoryState[] {
-  setHistoryCurrentStep: Dispatch<SetStateAction<number>>
-): void {
   const history = GetCurrentHistory(fullHistory, historyCurrentStep);
   const current = history[history.length - 1];
 
@@ -89,7 +81,7 @@ export function DeleteSymbol(
 
   const newMainContainer = structuredClone(current.mainContainer);
 
-  UnlinkContainers(symbol, newMainContainer);
+  UnlinkSymbolFromContainers(symbol, newMainContainer);
 
   newSymbols.delete(symbolId);
 
@@ -101,13 +93,17 @@ export function DeleteSymbol(
     symbols: newSymbols,
     selectedSymbolId: symbolId
   });
-  setHistory(history);
+  return history;
-  setHistoryCurrentStep(history.length - 1);
 }
 
-function UnlinkContainers(symbol: ISymbolModel, newMainContainer: IContainerModel): void {
+/**
+ * Unlink a symbol to a container and its children
+ * @param symbol Symbol to remove
+ * @param root Container and its children to remove a symbol from
+ */
+function UnlinkSymbolFromContainers(symbol: ISymbolModel, root: IContainerModel): void {
   symbol.linkedContainers.forEach((containerId) => {
-    const container = FindContainerById(newMainContainer, containerId);
+    const container = FindContainerById(root, containerId);
 
     if (container === undefined) {
       return;
@@ -127,10 +123,8 @@ export function OnPropertyChange(
   key: string,
   value: string | number | boolean,
   fullHistory: IHistoryState[],
-  historyCurrentStep: number,
+  historyCurrentStep: number
-  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
+): IHistoryState[] {
-  setHistoryCurrentStep: Dispatch<SetStateAction<number>>
-): void {
   const history = GetCurrentHistory(fullHistory, historyCurrentStep);
   const current = history[history.length - 1];
 
@@ -166,6 +160,5 @@ export function OnPropertyChange(
     symbols: newSymbols,
     selectedSymbolId: symbol.id
   });
-  setHistory(history);
+  return history;
-  setHistoryCurrentStep(history.length - 1);
 }

src/Components/Editor/Editor.tsx

@@ -4,15 +4,16 @@ import { IConfiguration } from '../../Interfaces/IConfiguration';
 import { SVG } from '../SVG/SVG';
 import { IHistoryState } from '../../Interfaces/IHistoryState';
 import { UI } from '../UI/UI';
-import { SelectContainer, DeleteContainer, AddContainerToSelectedContainer, OnPropertyChange } from './Actions/ContainerOperations';
+import { SelectContainer, DeleteContainer, AddContainerToSelectedContainer, OnPropertyChange, AddContainers } from './Actions/ContainerOperations';
 import { SaveEditorAsJSON, SaveEditorAsSVG } from './Actions/Save';
 import { OnKey } from './Actions/Shortcuts';
-import EditorEvents from '../../Events/EditorEvents';
+import { events as EVENTS } from '../../Events/EditorEvents';
 import { IEditorState } from '../../Interfaces/IEditorState';
 import { MAX_HISTORY } from '../../utils/default';
 import { AddSymbol, OnPropertyChange as OnSymbolPropertyChange, DeleteSymbol, SelectSymbol } from './Actions/SymbolOperations';
 import { FindContainerById } from '../../utils/itertools';
-import { Menu } from '../Menu/Menu';
+import { IMenuAction, Menu } from '../Menu/Menu';
+import { GetAction } from './Actions/ContextMenuActions';
 
 interface IEditorProps {
   root: Element | Document
@@ -22,11 +23,11 @@ interface IEditorProps {
 }
 
 function InitActions(
-  menuActions: Map<any, any>,
+  menuActions: Map<string, IMenuAction[]>,
+  configuration: IConfiguration,
   history: IHistoryState[],
   historyCurrentStep: number,
-  setHistory: React.Dispatch<React.SetStateAction<IHistoryState[]>>,
+  setNewHistory: (newHistory: IHistoryState[]) => void
-  setHistoryCurrentStep: React.Dispatch<React.SetStateAction<number>>
 ): void {
   menuActions.set(
     'elements-sidebar-row',
@@ -34,13 +35,12 @@ function InitActions(
       text: 'Delete',
       action: (target: HTMLElement) => {
         const id = target.id;
-        DeleteContainer(
+        const newHistory = DeleteContainer(
           id,
           history,
-          historyCurrentStep,
+          historyCurrentStep
-          setHistory,
-          setHistoryCurrentStep
         );
+        setNewHistory(newHistory);
       }
     }]
   );
@@ -50,16 +50,43 @@ function InitActions(
       text: 'Delete',
       action: (target: HTMLElement) => {
         const id = target.id;
-        DeleteSymbol(
+        const newHistory = DeleteSymbol(
           id,
           history,
-          historyCurrentStep,
+          historyCurrentStep
-          setHistory,
-          setHistoryCurrentStep
         );
+        setNewHistory(newHistory);
       }
     }]
   );
+
+  // API Actions
+  for (const availableContainer of configuration.AvailableContainers) {
+    if (availableContainer.Actions === undefined) {
+      continue;
+    }
+
+    for (const action of availableContainer.Actions) {
+      if (menuActions.get(availableContainer.Type) === undefined) {
+        menuActions.set(availableContainer.Type, []);
+      }
+
+      const currentState = GetCurrentHistoryState(history, historyCurrentStep);
+      const newAction: IMenuAction = {
+        text: action.Label,
+        action: GetAction(
+          action,
+          currentState,
+          configuration,
+          history,
+          historyCurrentStep,
+          setNewHistory
+        )
+      };
+
+      menuActions.get(availableContainer.Type)?.push(newAction);
+    }
+  }
 }
 
 function UseShortcuts(
@@ -90,11 +117,9 @@ function UseWindowEvents(
   historyCurrentStep: number,
   configuration: IConfiguration,
   editorRef: React.RefObject<HTMLDivElement>,
-  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
+  setNewHistory: (newHistory: IHistoryState[]) => void
-  setHistoryCurrentStep: Dispatch<SetStateAction<number>>
 ): void {
   useEffect(() => {
-    const events = EditorEvents;
     const editorState: IEditorState = {
       history,
       historyCurrentStep,
@@ -102,13 +127,12 @@ function UseWindowEvents(
     };
 
     const funcs = new Map<string, () => void>();
-    for (const event of events) {
+    for (const event of EVENTS) {
       function Func(eventInitDict?: CustomEventInit): void {
         return event.func(
           root,
           editorState,
-          setHistory,
+          setNewHistory,
-          setHistoryCurrentStep,
           eventInitDict
         );
       }
@@ -116,7 +140,7 @@ function UseWindowEvents(
       funcs.set(event.name, Func);
     }
     return () => {
-      for (const event of events) {
+      for (const event of EVENTS) {
         const func = funcs.get(event.name);
         if (func === undefined) {
           continue;
@@ -127,11 +151,29 @@ function UseWindowEvents(
   });
 }
 
+/**
+ * Return a macro function to use both setHistory
+ * and setHistoryCurrentStep at the same time
+ * @param setHistory
+ * @param setHistoryCurrentStep
+ * @returns
+ */
+function UseNewHistoryState(
+  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
+  setHistoryCurrentStep: Dispatch<SetStateAction<number>>
+): (newHistory: IHistoryState[]) => void {
+  return (newHistory) => {
+    setHistory(newHistory);
+    setHistoryCurrentStep(newHistory.length - 1);
+  };
+}
+
 export function Editor(props: IEditorProps): JSX.Element {
   // States
   const [history, setHistory] = React.useState<IHistoryState[]>(structuredClone(props.history));
   const [historyCurrentStep, setHistoryCurrentStep] = React.useState<number>(props.historyCurrentStep);
   const editorRef = useRef<HTMLDivElement>(null);
+  const setNewHistory = UseNewHistoryState(setHistory, setHistoryCurrentStep);
 
   // Events
   UseShortcuts(history, historyCurrentStep, setHistoryCurrentStep);
@@ -141,13 +183,18 @@ export function Editor(props: IEditorProps): JSX.Element {
     historyCurrentStep,
     props.configuration,
     editorRef,
-    setHistory,
+    setNewHistory
-    setHistoryCurrentStep
   );
 
   // Context Menu
   const menuActions = new Map();
-  InitActions(menuActions, history, historyCurrentStep, setHistory, setHistoryCurrentStep);
+  InitActions(
+    menuActions,
+    props.configuration,
+    history,
+    historyCurrentStep,
+    setNewHistory
+  );
 
   // Render
   const configuration = props.configuration;
@@ -162,66 +209,62 @@ export function Editor(props: IEditorProps): JSX.Element {
         historyCurrentStep={historyCurrentStep}
         availableContainers={configuration.AvailableContainers}
         availableSymbols={configuration.AvailableSymbols}
-        selectContainer={(container) => SelectContainer(
+        selectContainer={(container) => setNewHistory(
-          container,
+          SelectContainer(
-          history,
+            container,
-          historyCurrentStep,
+            history,
-          setHistory,
+            historyCurrentStep
-          setHistoryCurrentStep
+          ))}
-        )}
+        deleteContainer={(containerId: string) => setNewHistory(
-        deleteContainer={(containerId: string) => DeleteContainer(
+          DeleteContainer(
-          containerId,
+            containerId,
-          history,
+            history,
-          historyCurrentStep,
+            historyCurrentStep
-          setHistory,
+          ))}
-          setHistoryCurrentStep
+        onPropertyChange={(key, value, type) => setNewHistory(
-        )}
+          OnPropertyChange(
-        onPropertyChange={(key, value, type) => OnPropertyChange(
+            key, value, type,
-          key, value, type,
+            selected,
-          selected,
+            history,
-          history,
+            historyCurrentStep
-          historyCurrentStep,
+          ))}
-          setHistory,
+        addContainer={(type) => {
-          setHistoryCurrentStep
+          const newHistory = AddContainerToSelectedContainer(
-        )}
+            type,
-        addContainer={(type) => AddContainerToSelectedContainer(
+            selected,
-          type,
+            configuration,
-          selected,
+            history,
-          configuration,
+            historyCurrentStep
-          history,
+          );
-          historyCurrentStep,
+          if (newHistory !== null) {
-          setHistory,
+            setNewHistory(newHistory);
-          setHistoryCurrentStep
+          }
-        )}
+        }}
-        addSymbol={(type) => AddSymbol(
+        addSymbol={(type) => setNewHistory(
-          type,
+          AddSymbol(
-          configuration,
+            type,
-          history,
+            configuration,
-          historyCurrentStep,
+            history,
-          setHistory,
+            historyCurrentStep
-          setHistoryCurrentStep
+          ))}
-        )}
+        onSymbolPropertyChange={(key, value) => setNewHistory(
-        onSymbolPropertyChange={(key, value) => OnSymbolPropertyChange(
+          OnSymbolPropertyChange(
-          key, value,
+            key, value,
-          history,
+            history,
-          historyCurrentStep,
+            historyCurrentStep
-          setHistory,
+          ))}
-          setHistoryCurrentStep
+        selectSymbol={(symbolId) => setNewHistory(
-        )}
+          SelectSymbol(
-        selectSymbol={(symbolId) => SelectSymbol(
+            symbolId,
-          symbolId,
+            history,
-          history,
+            historyCurrentStep
-          historyCurrentStep,
+          ))}
-          setHistory,
+        deleteSymbol={(symbolId) => setNewHistory(
-          setHistoryCurrentStep
+          DeleteSymbol(
-        )}
+            symbolId,
-        deleteSymbol={(symbolId) => DeleteSymbol(
+            history,
-          symbolId,
+            historyCurrentStep
-          history,
+          ))}
-          historyCurrentStep,
-          setHistory,
-          setHistoryCurrentStep
-        )}
         saveEditorAsJSON={() => SaveEditorAsJSON(
           history,
           historyCurrentStep,

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -50,7 +50,7 @@ export function ElementsSidebar(props: IElementsSidebarProps): JSX.Element {
     return (
       <button type="button"
         className={`w-full border-blue-500 elements-sidebar-row whitespace-pre
-          text-left text-sm font-medium transition-all ${selectedClass}`}
+          text-left text-sm font-medium transition-all ${container.properties.type} ${selectedClass}`}
         id={key}
         key={key}
         style={style}

src/Components/Menu/Menu.tsx

@@ -4,11 +4,11 @@ import { MenuItem } from './MenuItem';
 
 interface IMenuProps {
   getListener: () => HTMLElement | null
-  actions: Map<string, IAction[]>
+  actions: Map<string, IMenuAction[]>
   className?: string
 }
 
-export interface IAction {
+export interface IMenuAction {
   /** displayed  */
   text: string
 
@@ -75,23 +75,24 @@ export function Menu(props: IMenuProps): JSX.Element {
     setTarget
   );
 
-  let children;
+  const children: JSX.Element[] = [];
 
   if (target !== undefined) {
+    let count = 0;
     for (const className of target.classList) {
+      count++;
       const actions = props.actions.get(className);
       if (actions === undefined) {
         continue;
       }
 
-      children = actions.map((action, index) =>
+      actions.forEach((action, index) => {
-        <MenuItem
+        children.push(<MenuItem
-          key={`contextmenu-item-${index}`}
+          key={`contextmenu-item-${count}`}
           className="contextmenu-item"
           text={action.text}
-          onClick={() => action.action(target)} />
+          onClick={() => action.action(target)} />);
-      );
+      });
-      break;
     };
   }
 

src/Events/EditorEvents.ts

@@ -5,61 +5,48 @@ import { IEditorState } from '../Interfaces/IEditorState';
 import { IHistoryState } from '../Interfaces/IHistoryState';
 import { ReviveState } from '../utils/saveload';
 
-
+function InitEditor(configuration: IConfiguration): void {
-const initEditor = (configuration: IConfiguration): void => {
   // faire comme la callback de fetch
-
 }
 
-const getEditorState = (
+function GetEditorState(root: Element | Document,
-  root: Element | Document,
+  editorState: IEditorState): void {
-  editorState: IEditorState
-): void => {
   const customEvent = new CustomEvent<IEditorState>('getEditorState', { detail: editorState });
   root.dispatchEvent(customEvent);
-};
+}
 
-const getCurrentHistoryState = (
+function GetCurrentHistoryState(root: Element | Document,
-  root: Element | Document,
+  editorState: IEditorState): void {
-  editorState: IEditorState
-): void => {
   const customEvent = new CustomEvent<IHistoryState>(
     'getCurrentHistoryState',
     { detail: editorState.history[editorState.historyCurrentStep] });
   root.dispatchEvent(customEvent);
-};
+}
 
-const appendNewState = (
+function AppendNewState(root: Element | Document,
-  root: Element | Document,
   editorState: IEditorState,
-  setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
+  setNewHistory: (newHistory: IHistoryState[]) => void,
-  setHistoryCurrentStep: Dispatch<SetStateAction<number>>,
+  eventInitDict?: CustomEventInit): void {
-  eventInitDict?: CustomEventInit
-): void => {
   const state: IHistoryState = JSON.parse(eventInitDict?.detail.state);
   ReviveState(state);
   const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep);
 
   history.push(state);
-  setHistory(history);
+  setNewHistory(history);
-  setHistoryCurrentStep(history.length - 1);
+}
-};
 
 export interface IEditorEvent {
   name: string
   func: (
     root: Element | Document,
     editorState: IEditorState,
-    setHistory: Dispatch<SetStateAction<IHistoryState[]>>,
+    setNewHistory: (newHistory: IHistoryState[]) => void,
-    setHistoryCurrentStep: Dispatch<SetStateAction<number>>,
     eventInitDict?: CustomEventInit
   ) => void
 }
 
-const events: IEditorEvent[] = [
+export const events: IEditorEvent[] = [
-  { name: 'getEditorState', func: getEditorState },
+  { name: 'getEditorState', func: GetEditorState },
-  { name: 'getCurrentHistoryState', func: getCurrentHistoryState },
+  { name: 'getCurrentHistoryState', func: GetCurrentHistoryState },
-  { name: 'appendNewState', func: appendNewState }
+  { name: 'appendNewState', func: AppendNewState }
 ];
-
-export default events;

src/Interfaces/IAction.ts

@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { AddMethod } from '../Enums/AddMethod';
+import { IImage } from './IImage';
+
+export interface IAction {
+  Id: string
+  CustomLogo: IImage
+  Label: string
+  Description: string
+  Action: string
+  AddingBehavior: AddMethod
+}

src/Interfaces/IAvailableContainer.ts

@@ -2,6 +2,7 @@
 import React from 'react';
 import { AddMethod } from '../Enums/AddMethod';
 import { XPositionReference } from '../Enums/XPositionReference';
+import { IAction } from './IAction';
 import { IMargin } from './IMargin';
 
 /** Model of available container used in application configuration */
@@ -20,5 +21,6 @@ export interface IAvailableContainer {
   CustomSVG?: string
   DefaultChildType?: string
   Style?: React.CSSProperties
+  Actions?: IAction[]
   UserData?: object
 }

src/Interfaces/ISetContainerListRequest.ts

@@ -0,0 +1,14 @@
+import { IContainerModel } from './IContainerModel';
+import { IHistoryState } from './IHistoryState';
+
+/* eslint-disable @typescript-eslint/naming-convention */
+export interface ISetContainerListRequest {
+  /** Name of the action declared in the API */
+  Action: string
+
+  /** Selected container */
+  Container: IContainerModel
+
+  /** Current application state */
+  ApplicationState: IHistoryState
+}

src/Interfaces/ISetContainerListResponse.ts

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { IContainerModel } from './IContainerModel';
+
+export interface ISetContainerListResponse {
+  Containers: IContainerModel[]
+}

src/utils/saveload.ts

@@ -50,7 +50,7 @@ export function GetCircularReplacer(): (key: any, value: object | Map<string, an
       return;
     }
 
-    if (key === 'Symbols') {
+    if (key === 'symbols') {
       return Array.from((value as Map<string, any>).entries());
     }
 

src/vite-env.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  readonly VITE_API_URL: string
+  readonly VITE_API_FETCH_URL: string
+  readonly VITE_API_POST_URL: string
   // more env variables...
 }
 

test-server/http.js

@@ -90,6 +90,17 @@ const GetSVGLayoutConfiguration = () => {
           <line x1="{width}" y1="0" x2="0" y2="{height}" stroke="black" style='{userData.styleLine}'></line>
         `
         ,
+        Actions: [
+          {
+            Action: "SplitRemplissage",
+            Label: "Diviser le remplissage",
+            Description: "Diviser le remplissage en insérant un montant",
+            CustomLogo: {
+              Url: ""
+            },
+            AddingBehavior: 2
+          }
+        ],
         Style: {
           fillOpacity: 1,
           strokeWidth: 1,
@@ -186,20 +197,30 @@ const FillHoleWithChassis = (request) => {
     }
   }
   return {
-    ApplicationState: {
+    Containers: lstModels
-      Containers: lstModels
-    }
   };
 };
 
 const SplitRemplissage = (request) => {
   const lstModels = [
-    { Type: 'Remplissage' },
+    {
-    { Type: 'Montant' },
+      properties: {
-    { Type: 'Remplissage' }
+        type: 'Remplissage'
+      }
+    },
+    {
+      properties: {
+        type: 'Montant'
+      }
+    },
+    {
+      properties: {
+        type: 'Remplissage'
+      }
+    },
   ];
 
   return {
-    ApplicationState: { Containers: lstModels }
+    Containers: lstModels
   };
 };