Implement Insert in SetContainerList

src/Components/Editor/Actions/AddContainer.ts

@@ -12,7 +12,7 @@ import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
 import { Orientation } from '../../../Enums/Orientation';
 import { GetDefaultContainerProps } from '../../../utils/default';
 import { FindContainerById } from '../../../utils/itertools';
-import { ApplyMargin } from '../../../utils/svg';
+import { ApplyMargin, RestoreX, RestoreY, TransformX } from '../../../utils/svg';
 import { ApplyBehaviors, ApplyBehaviorsOnSiblingsChildren } from '../Behaviors/Behaviors';
 import { GetCurrentHistory, UpdateCounters } from '../Editor';
 import { SortChildren } from './ContainerOperations';
@@ -130,10 +130,10 @@ function AddNewContainerToParent(
   const right: number = containerConfig.Margin?.right ?? 0;
 
   // Default coordinates
-  let x = containerConfig.X ?? 0;
-  let y = containerConfig.Y ?? 0;
   let width = containerConfig.Width ?? containerConfig.MaxWidth ?? containerConfig.MinWidth ?? parentClone.properties.width;
   let height = containerConfig.Height ?? containerConfig.MaxHeight ?? containerConfig.MinHeight ?? parentClone.properties.height;
+  let x = RestoreX(containerConfig.X ?? 0, width, containerConfig.PositionReference);
+  let y = RestoreY(containerConfig.Y ?? 0, height, containerConfig.PositionReference);
 
   ({ x, y, width, height } = ApplyMargin(x, y, width, height, left, bottom, top, right));
 

src/Components/Editor/Actions/ContextMenuActions.ts

@@ -201,9 +201,12 @@ function HandleSetContainerList(
   const addingBehavior = response.AddingBehavior ?? action.AddingBehavior;
   const current = GetCurrentHistoryState(history, historyCurrentStep);
   const containers = current.containers;
-  const parent = FindContainerById(containers, selectedContainer.properties.parentId);
   switch (addingBehavior) {
+    case AddMethod.Insert:
     case AddMethod.Append:
+      response.Containers.forEach(config => {
+        config.AddMethod = config.AddMethod ?? addingBehavior;
+      });
       setNewHistory(
         AddContainers(
           selectedContainer.children.length,
@@ -214,8 +217,6 @@ function HandleSetContainerList(
           historyCurrentStep
         ));
       break;
-    case AddMethod.Insert:
-      throw new Error('Not yet supported');
     case AddMethod.Replace:
       setNewHistory(
         HandleReplace(
@@ -228,7 +229,8 @@ function HandleSetContainerList(
         )
       );
       break;
-    case AddMethod.ReplaceParent:
+    case AddMethod.ReplaceParent: {
+      const parent = FindContainerById(containers, selectedContainer.properties.parentId);
       if (parent === undefined || parent === null) {
         Swal.fire({
           title: 'Error',
@@ -248,6 +250,7 @@ function HandleSetContainerList(
         )
       );
       break;
+    }
   }
 }
 
@@ -293,3 +296,46 @@ function HandleReplace(
 
   return newHistoryBeforeDelete;
 }
+
+function HandleInsert(
+  containers: Map<string, IContainerModel>,
+  selectedContainer: IContainerModel,
+  response: ISetContainerListResponse,
+  configuration: IConfiguration,
+  history: IHistoryState[],
+  historyCurrentStep: number
+): IHistoryState[] {
+  const parent = FindContainerById(containers, selectedContainer.properties.id);
+  if (parent === undefined || parent === null) {
+    throw new Error('[InsertContainer] Cannot insert in a container that does not exists');
+  }
+
+  const index = parent.children.indexOf(selectedContainer.properties.id);
+
+  const newHistoryAfterDelete = DeleteContainer(
+    selectedContainer.properties.id,
+    history,
+    historyCurrentStep
+  );
+
+  const newHistoryBeforeDelete = AddContainers(
+    index,
+    response.Containers,
+    selectedContainer.properties.parentId,
+    configuration,
+    newHistoryAfterDelete,
+    newHistoryAfterDelete.length - 1
+  );
+
+  // Remove AddContainers from history
+  if (import.meta.env.PROD) {
+    newHistoryBeforeDelete.splice(newHistoryBeforeDelete.length - 2, 1);
+  }
+
+  // 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(', ')}]`;
+
+  return newHistoryBeforeDelete;
+}

test-server/http.js

@@ -22,6 +22,9 @@ const requestListener = async (request, response) => {
         case 'FillHoleWithChassis':
           json = FillHoleWithChassis(bodyParsed);
           break;
+        case 'Insert':
+          json = Insert(bodyParsed);
+          break;
         case 'SplitRemplissage':
           json = SplitRemplissage(bodyParsed);
           break;
@@ -118,6 +121,19 @@ const GetSVGLayoutConfiguration = () => {
         },
         Category: "Stuff",
         Actions: [
+          {
+            Id: "Insert",
+            Action: "Insert",
+            Label: "Insert containers",
+            Description: "Insert containers",
+            CustomLogo: {
+              Base64Image: null,
+              Name: 'Image1',
+              Svg: null,
+              Url: ""
+            },
+            AddingBehavior: 1
+          },
           {
             Id: "SplitRemplissage",
             Action: "SplitRemplissage",
@@ -131,32 +147,6 @@ const GetSVGLayoutConfiguration = () => {
             },
             AddingBehavior: 2
           },
-          {
-            Id: "SplitRemplissageParent",
-            Action: "SplitRemplissageParent",
-            Label: "Diviser le remplissage en insérant un montant",
-            Description: "Diviser le remplissage en insérant un montant",
-            CustomLogo: {
-              Base64Image: null,
-              Name: 'Image1',
-              Svg: null,
-              Url: ""
-            },
-            AddingBehavior: 3
-          },
-          {
-            Id: "SplitRemplissageParent",
-            Action: "SplitRemplissageParent",
-            Label: "Diviser le remplissage en insérant un montant",
-            Description: "Diviser le remplissage en insérant un montant",
-            CustomLogo: {
-              Base64Image: null,
-              Name: 'Image1',
-              Svg: null,
-              Url: ""
-            },
-            AddingBehavior: 3
-          },
           {
             Id: "SplitRemplissageParent",
             Action: "SplitRemplissageParent",
@@ -369,13 +359,15 @@ const FillHoleWithChassis = (request) => {
 const SplitRemplissage = (request) => {
   const lstModels = [
     {
-      Type: 'Remplissage'
+      Type: 'Remplissage',
+      IsFlex: true
     },
     {
       Type: 'Montant'
     },
     {
-      Type: 'Remplissage'
+      Type: 'Remplissage',
+      IsFlex: true
     },
   ];
 
@@ -385,3 +377,24 @@ const SplitRemplissage = (request) => {
 };
 
 
+const Insert = (request) => {
+  const lstModels = [
+    {
+      Type: 'Remplissage',
+      IsFlex: true
+    },
+    {
+      Type: 'Montant',
+      X: 5,
+      IsAnchor: true
+    },
+    {
+      Type: 'Remplissage',
+      IsFlex: true
+    },
+  ];
+
+  return {
+    Containers: lstModels
+  };
+};