WIP

src/Components/Components/Components.tsx

@@ -11,6 +11,7 @@ interface IComponentsProps {
   selectedContainer: IContainerModel | undefined
   componentOptions: IAvailableContainer[]
   categories: ICategory[]
+  replaceableCategoryName: string | undefined
   buttonOnClick: (type: string) => void
 }
 
@@ -62,6 +63,10 @@ export function Components(props: IComponentsProps): JSX.Element {
       disabled = config.Blacklist?.find(type => type === componentOption.Type) !== undefined ?? false;
     }
 
+    if (componentOption.Category !== props.replaceableCategoryName) {
+      disabled = true;
+    }
+
     if (disabled && hideDisabled) {
       return;
     }

src/Components/Editor/Actions/ContainerOperations.ts

@@ -8,6 +8,7 @@ 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';
 
 /**
  * Select a container
@@ -109,6 +110,68 @@ export function DeleteContainer(
   return history;
 }
 
+/**
+ * Replace a container
+ * @param containerId containerId of the container to delete
+ * @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;
+// }
+
 /**
  * Returns the next container that will be selected
  * after the selectedContainer is removed.
@@ -371,9 +434,8 @@ function AssignProperty(container: IContainerModel, 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
+ * @param oldSymbol
+ * @param newSymbol
  * @returns
  */
 export function LinkSymbol(

src/Components/Editor/Actions/ContextMenuActions.ts

@@ -56,9 +56,18 @@ export function InitActions(
   menuActions.set(
     'elements-sidebar-row',
     [{
+      text: Text({ textId: '@ReplaceByContainer' }),
+      title: Text({ textId: '@ReplaceByContainerTitle' }),
+      shortcut: '<kbd>R</kbd>',
+      action: (target: HTMLElement) => {
+        const id = target.id;
+        console.log('replace');
+      }
+    }, {
       text: Text({ textId: '@DeleteContainer' }),
       title: Text({ textId: '@DeleteContainerTitle' }),
       shortcut: '<kbd>Suppr</kbd>',
+
       action: (target: HTMLElement) => {
         const id = target.id;
         const newHistory = DeleteContainer(
@@ -68,7 +77,8 @@ export function InitActions(
         );
         setNewHistory(newHistory);
       }
-    }]
+    }
+    ]
   );
 
   menuActions.set(

src/Components/UI/UI.tsx

@@ -97,11 +97,15 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
   switch (selectedSidebar) {
     case SidebarType.Components:
       leftSidebarTitle = Text({ textId: '@Components' });
+
+      const AllowedReplaceCategory = undefined;
+
       leftChildren = <Components
         selectedContainer={selectedContainer}
         componentOptions={configuration.AvailableContainers}
         categories={configuration.Categories}
         buttonOnClick={methods.addContainer}
+        replaceableCategoryName={AllowedReplaceCategory}
       />;
       rightSidebarTitle = Text({ textId: '@Elements' });
       rightChildren = <ElementsList