Merged PR 212: Optimize FindChildrenById from O(n) to O(1)

Optimize FindChildrenById from O(n) to O(1):
- Deprecate FindContainerByIdDFS
- Container: Replace Children to string[]
- Add HashMap to IHistoryState that contains all containers

To access a container by id now cost O(1) without any additional cost

+ Implement CICD for SVGLibs

src/Components/ElementsList/ElementsList.tsx

@@ -9,6 +9,7 @@ import { PropertyType } from '../../Enums/PropertyType';
 import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 
 interface IElementsListProps {
+  containers: Map<string, IContainerModel>
   mainContainer: IContainerModel
   symbols: Map<string, ISymbolModel>
   selectedContainer: IContainerModel | undefined
@@ -59,6 +60,7 @@ function HandleDragOver(
 
 function HandleOnDrop(
   event: React.DragEvent,
+  containers: Map<string, IContainerModel>,
   mainContainer: IContainerModel,
   addContainer: (index: number, type: string, parent: string) => void
 ): void {
@@ -68,7 +70,7 @@ function HandleOnDrop(
   RemoveBorderClasses(target);
 
   const targetContainer: IContainerModel | undefined = FindContainerById(
-    mainContainer,
+    containers,
     target.id
   );
 
@@ -95,7 +97,7 @@ function HandleOnDrop(
 
   // locate the hitboxes
   if (y < 12) {
-    const index = targetContainer.parent.children.indexOf(targetContainer);
+    const index = targetContainer.parent.children.indexOf(targetContainer.properties.id);
     addContainer(
       index,
       type,
@@ -107,7 +109,7 @@ function HandleOnDrop(
       type,
       targetContainer.properties.id);
   } else {
-    const index = targetContainer.parent.children.indexOf(targetContainer);
+    const index = targetContainer.parent.children.indexOf(targetContainer.properties.id);
     addContainer(
       index + 1,
       type,
@@ -119,10 +121,10 @@ function HandleOnDrop(
 export function ElementsList(props: IElementsListProps): JSX.Element {
   // States
   const divRef = React.useRef<HTMLDivElement>(null);
-  const [width, height] = useSize(divRef);
+  const [, height] = useSize(divRef);
 
   // Render
-  const it = MakeRecursionDFSIterator(props.mainContainer, 0, [0, 0], true);
+  const it = MakeRecursionDFSIterator(props.mainContainer, props.containers, 0, [0, 0], true);
   const containers = [...it];
   function Row({
     index, style
@@ -154,7 +156,7 @@ export function ElementsList(props: IElementsListProps): JSX.Element {
         style={style}
         title={container.properties.warning}
         onClick={() => props.selectContainer(container.properties.id)}
-        onDrop={(event) => HandleOnDrop(event, props.mainContainer, props.addContainer)}
+        onDrop={(event) => HandleOnDrop(event, props.containers, props.mainContainer, props.addContainer)}
         onDragOver={(event) => HandleDragOver(event, props.mainContainer)}
         onDragLeave={(event) => HandleDragLeave(event)}
       >