Implemtation in progress, UIX working , replacing in ContainerOperations.ts working but not properly need fix

src/Components/Editor/Actions/ContainerOperations.ts

@@ -8,7 +8,8 @@ import Swal from 'sweetalert2';
 import { PropertyType } from '../../../Enums/PropertyType';
 import { TransformX, TransformY } from '../../../utils/svg';
 import { Orientation } from '../../../Enums/Orientation';
-import { AddContainers, AddContainerToSelectedContainer } from './AddContainer';
+import { AddContainerToSelectedContainer } from './AddContainer';
+import { IConfiguration } from '../../../Interfaces/IConfiguration';
 
 /**
  * Select a container
@@ -113,64 +114,44 @@ export function DeleteContainer(
 /**
  * Replace a container
  * @param containerId containerId of the container to delete
+ * @param newContainerId
+ * @param configuration
  * @param fullHistory History of the editor
  * @param historyCurrentStep Current step
  * @returns New history
  */
-// export function ReplaceByContainer(
-//     containerId: string,
-//     newContainerId: string,
-//     fullHistory: IHistoryState[],
-//     historyCurrentStep: number
-// ): IHistoryState[] {
-//   const history = GetCurrentHistory(fullHistory, historyCurrentStep);
-//   const current = history[history.length - 1];
-//
-//
-//   const containers = structuredClone(current.containers);
-//   const container = FindContainerById(containers, containerId);
-//   if (container === undefined) {
-//     throw new Error(`[ReplaceContainer] Tried to delete a container that is not present in the main container: ${containerId}`);
-//   }
-//   ///
-//   const parent = FindContainerById(containers, container.properties.parentId);
-//   if (parent === undefined || parent === null) {
-//     throw new Error('[ReplaceContainer] Cannot replace a container that does not exists');
-//   }
-//
-//   const index = parent.children.indexOf(container.properties.id);
-//
-//   const newHistoryAfterDelete = DeleteContainer(
-//       container.properties.id,
-//       history,
-//       historyCurrentStep
-//   );
-//
-//   const newContainer = FindContainerById(containers, container.properties.parentId);
-//
-//   AddContainerToSelectedContainer(
-//       ne,
-//       selected,
-//       configuration,
-//       history,
-//       historyCurrentStep
-//   );
-//
-//
-//   /// /
-//
-//
-//   history.push({
-//     lastAction: `Replace ${containerId} By InsertnewId`,
-//     mainContainer: current.mainContainer,
-//     containers,
-//     newContainerId,
-//     typeCounters: Object.assign({}, current.typeCounters),
-//     symbols: newSymbols,
-//     selectedSymbolId: current.selectedSymbolId
-//   });
-//   return history;
-// }
+export function ReplaceByContainer(
+  containerId: string,
+  newContainerId: string,
+  configuration: IConfiguration,
+  fullHistory: IHistoryState[],
+  historyCurrentStep: number
+): IHistoryState[] {
+  const history = GetCurrentHistory(fullHistory, historyCurrentStep);
+  const current = history[history.length - 1];
+
+  const historyDelete = DeleteContainer(containerId, fullHistory, historyCurrentStep);
+  const currentDelete = historyDelete[historyDelete.length - 1];
+  const selectedContainer = FindContainerById(currentDelete.containers, currentDelete.selectedContainerId);
+  if (selectedContainer != null) {
+    const historyAdd = AddContainerToSelectedContainer(newContainerId, selectedContainer, configuration, fullHistory, historyCurrentStep);
+
+    const currentAdd = historyAdd[historyAdd.length - 1];
+
+    fullHistory.push({
+      lastAction: `Replace ${containerId} by ${newContainerId}`,
+      mainContainer: currentAdd.mainContainer,
+      containers: currentAdd.containers,
+      selectedContainerId: currentAdd.selectedContainerId,
+      typeCounters: Object.assign({}, currentAdd.typeCounters),
+      symbols: current.symbols,
+      selectedSymbolId: current.selectedSymbolId
+    });
+
+    return fullHistory;
+  }
+  return history;
+}
 
 /**
  * Returns the next container that will be selected
@@ -178,7 +159,7 @@ export function DeleteContainer(
  * If the selected container is removed, select the sibling after,
  * If there is no sibling, select the parent,
  *
- * @param mainContainerClone Main container
+ * @param containers
  * @param selectedContainerId Current selected container
  * @param parent Parent of the selected/deleted container
  * @param index Index of the selected/deleted container
@@ -190,11 +171,10 @@ function GetSelectedContainerOnDelete(
   parent: IContainerModel,
   index: number
 ): string {
-  const newSelectedContainerId = FindContainerById(containers, selectedContainerId)?.properties.id ??
-    parent.children.at(index) ??
-    parent.children.at(index - 1) ??
-    parent.properties.id;
-  return newSelectedContainerId;
+  return FindContainerById(containers, selectedContainerId)?.properties.id ??
+      parent.children.at(index) ??
+      parent.children.at(index - 1) ??
+      parent.properties.id;
 }
 
 /**
@@ -220,11 +200,15 @@ function UnlinkContainerFromSymbols(
 }
 
 /**
-  * Handled the property change event in the properties form
-  * @param key Property name
-  * @param value New value of the property
-  * @returns void
-  */
+ * Handled the property change event in the properties form
+ * @param key Property name
+ * @param value New value of the property
+ * @param type
+ * @param selected
+ * @param fullHistory
+ * @param historyCurrentStep
+ * @returns void
+ */
 export function OnPropertyChange(
   key: string,
   value: string | number | boolean | number[],
@@ -264,6 +248,7 @@ export function OnPropertyChange(
 
 /**
  * Sort the parent children by x
+ * @param containers
  * @param parent The clone used for the sort
  * @returns void
  */
@@ -328,6 +313,7 @@ export function SortChildren(
 
 /**
  * Set the container with properties and behaviors (mutate)
+ * @param containers
  * @param container Container to update
  * @param key Key of the property to update
  * @param value Value of the property to update