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/Viewer/Viewer.tsx

@@ -3,7 +3,7 @@ import { IContainerModel } from '../../Interfaces/IContainerModel';
 import { IHistoryState } from '../../Interfaces/IHistoryState';
 import { IPoint } from '../../Interfaces/IPoint';
 import { DIMENSION_MARGIN, USE_EXPERIMENTAL_CANVAS_API } from '../../utils/default';
-import { MakeRecursionDFSIterator } from '../../utils/itertools';
+import { FindContainerById, MakeRecursionDFSIterator } from '../../utils/itertools';
 import { BAR_WIDTH } from '../Bar/Bar';
 import { Canvas } from '../Canvas/Canvas';
 import { AddDimensions } from '../Canvas/DimensionLayer';
@@ -96,22 +96,32 @@ export function Viewer({
     viewerHeight: window.innerHeight
   });
 
+  const mainContainer = FindContainerById(current.containers, current.mainContainer);
+
+  if (mainContainer === undefined) {
+    return <></>;
+  }
+
   UseSVGAutoResizerOnWindowResize(isLeftSidebarOpen, isRightSidebarOpen, setViewer);
   UseSVGAutoResizerOnSidebar(isLeftSidebarOpen, isRightSidebarOpen, setViewer);
 
   if (USE_EXPERIMENTAL_CANVAS_API) {
     function Draw(ctx: CanvasRenderingContext2D, frameCount: number, scale: number, translatePos: IPoint): void {
-      const topDim = current.mainContainer.properties.y;
-      const leftDim = current.mainContainer.properties.x;
-      const rightDim = current.mainContainer.properties.x + current.mainContainer.properties.width;
-      const bottomDim = current.mainContainer.properties.y + current.mainContainer.properties.height;
+      if (mainContainer === undefined) {
+        return;
+      }
+
+      const topDim = mainContainer.properties.y;
+      const leftDim = mainContainer.properties.x;
+      const rightDim = mainContainer.properties.x + mainContainer.properties.width;
+      const bottomDim = mainContainer.properties.y + mainContainer.properties.height;
 
       ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
       ctx.save();
       ctx.setTransform(scale, 0, 0, scale, translatePos.x, translatePos.y);
       ctx.fillStyle = '#000000';
 
-      const it = MakeRecursionDFSIterator(current.mainContainer, 0, [0, 0]);
+      const it = MakeRecursionDFSIterator(mainContainer, current.containers, 0, [0, 0]);
       for (const { container, depth, currentTransform } of it) {
         const [x, y] = [
           container.properties.x + currentTransform[0],
@@ -130,6 +140,7 @@ export function Viewer({
           rightDim,
           depth,
           scale,
+          current.containers,
           container,
           currentTransform
         );
@@ -160,13 +171,14 @@ export function Viewer({
       className={marginClasses}
       viewerWidth={viewer.viewerWidth}
       viewerHeight={viewer.viewerHeight}
-      width={current.mainContainer?.properties.width}
-      height={current.mainContainer?.properties.height}
+      width={mainContainer.properties.width}
+      height={mainContainer.properties.height}
+      containers={current.containers}
       selected={selectedContainer}
       symbols={current.symbols}
       selectContainer={selectContainer}
     >
-      {current.mainContainer}
+      {mainContainer}
     </SVG>
   );
 }
@@ -188,6 +200,7 @@ function RenderDimensions(
   rightDim: number,
   depth: number,
   scale: number,
+  containers: Map<string, IContainerModel>,
   container: IContainerModel,
   currentTransform: [number, number]
 ): void {
@@ -197,7 +210,7 @@ function RenderDimensions(
   const containerBottomDim = bottomDim + (DIMENSION_MARGIN * (depth + 1)) / scale;
   const containerRightDim = rightDim + (DIMENSION_MARGIN * (depth + 1)) / scale;
   const dimMapped = [containerLeftDim, containerBottomDim, containerTopDim, containerRightDim];
-  AddDimensions(ctx, container, dimMapped, currentTransform, scale, depth);
+  AddDimensions(ctx, containers, container, dimMapped, currentTransform, scale, depth);
   ctx.restore();
 }