Allow AddContainers to extends the default config

src/Components/Editor/Actions/ContainerOperations.ts

@@ -190,7 +190,7 @@ export function AddContainerToSelectedContainer(
  */
 export function AddContainers(
   index: number,
-  types: string[],
+  availableContainers: IAvailableContainer[],
   parentId: string,
   configuration: IConfiguration,
   fullHistory: IHistoryState[],
@@ -218,15 +218,19 @@ export function AddContainers(
   const containerIds: string[] = [];
 
   // Iterate over the containers
-  types.forEach((type, typeIndex) => {
+  availableContainers.forEach((availableContainer, typeIndex) => {
     // Get the preset properties from the API
-    const containerConfig = configuration.AvailableContainers
+    const type = availableContainer.Type;
+
+    const defaultConfig = configuration.AvailableContainers
       .find(option => option.Type === type);
 
-    if (containerConfig === undefined) {
-      throw new Error(`[AddContainer] Object type not found. Found: ${type}`);
+    if (defaultConfig === undefined) {
+      throw new Error(`[AddContainer] Object type not found among default config. Found: ${type}`);
     }
 
+    const containerConfig = Object.assign(defaultConfig, availableContainer);
+
     // Default margin
     const left: number = containerConfig.Margin?.left ?? 0;
     const bottom: number = containerConfig.Margin?.bottom ?? 0;
@@ -330,7 +334,8 @@ export function AddContainer(
   // just call AddContainers with an array on a single element
   return AddContainers(
     index,
-    [type],
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    [{ Type: type }],
     parentId,
     configuration,
     fullHistory,

src/Components/Editor/Actions/ContextMenuActions.ts

@@ -85,7 +85,7 @@ function HandleSetContainerList(
       setNewHistory(
         AddContainers(
           selectedContainer.children.length,
-          response.Containers.map(container => container.Type),
+          response.Containers,
           selectedContainer.properties.id,
           configuration,
           history,
@@ -121,8 +121,6 @@ function HandleReplace(
 
   const index = selectedContainer.parent.children.indexOf(selectedContainer);
 
-  const types = response.Containers.map(container => container.Type);
-
   const newHistoryAfterDelete = DeleteContainer(
     selectedContainer.properties.id,
     history,
@@ -131,7 +129,7 @@ function HandleReplace(
 
   const newHistoryBeforeDelete = AddContainers(
     index,
-    types,
+    response.Containers,
     selectedContainer.properties.parentId,
     configuration,
     newHistoryAfterDelete,
@@ -144,6 +142,7 @@ function HandleReplace(
   }
 
   // Rename the last action by Replace
+  const types = response.Containers.map(container => container.Type);
   newHistoryBeforeDelete[newHistoryBeforeDelete.length - 1].lastAction =
     `Replace ${selectedContainer.properties.id} by [${types.join(', ')}]`;
 

src/Interfaces/IConfiguration.ts

@@ -4,7 +4,7 @@ import { IAvailableSymbol } from './IAvailableSymbol';
 
 /** Model of configuration for the application to configure it */
 export interface IConfiguration {
-  AvailableContainers: IAvailableContainer[]
-  AvailableSymbols: IAvailableSymbol[]
+  AvailableContainers: IAvailableContainer[] // TODO: Use a Map<string, IAvailableContainer>
+  AvailableSymbols: IAvailableSymbol[] // TODO: Use a Map<string, IAvailableContainer>
   MainContainer: IAvailableContainer
 }