Merged PR 366: Refactor Canvas, SVG and Viewer parameters

src/Components/Viewer/Viewer.tsx

@@ -1,44 +1,48 @@
 import * as React from 'react';
 import { type IContainerModel } from '../../Interfaces/IContainerModel';
 import { type IHistoryState } from '../../Interfaces/IHistoryState';
-import { type IPoint } from '../../Interfaces/IPoint';
 import { USE_EXPERIMENTAL_CANVAS_API } from '../../utils/default';
-import { FindContainerById, MakeRecursionDFSIterator } from '../../utils/itertools';
+import { FindContainerById } from '../../utils/itertools';
 import { BAR_WIDTH } from '../Bar/Bar';
 import { Canvas } from '../Canvas/Canvas';
-import { RenderContainerSelector } from '../Canvas/SelectorContainer';
 import { SelectorMode, SVG } from '../SVG/SVG';
 import { useState } from 'react';
 import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
-import { RenderContainers, RenderContainerDimensions, RenderSymbols } from '../Canvas/Renderer';
-import { RenderContainer } from '../Canvas/Container';
-import { RenderSymbolSelector } from '../Canvas/SelectorSymbol';
 
 interface IViewerProps {
   className: string
   current: IHistoryState
   selectedContainer: IContainerModel | undefined
-  selectContainer: (containerId: string) => void
   selectedSymbol: ISymbolModel | undefined
   margin: number
   isComponentsOpen: boolean
   isSymbolsOpen: boolean
+  selectContainer: (containerId: string) => void
+}
+
+export interface DrawParams {
+  mainContainer: IContainerModel
+  selectorMode: SelectorMode
+  selectedContainer: IContainerModel | undefined
+  selectedSymbol: ISymbolModel | undefined
+  containers: Map<string, IContainerModel>
+  symbols: Map<string, ISymbolModel>
+}
+
+function computeWidth(margin: number): number {
+  return window.innerWidth - (window.innerWidth < 768 ? BAR_WIDTH : margin);
 }
 
 export function Viewer({
   className,
   current,
   selectedContainer,
-  selectContainer,
   selectedSymbol,
   margin,
   isComponentsOpen,
-  isSymbolsOpen
+  isSymbolsOpen,
+  selectContainer
 }: IViewerProps): JSX.Element {
-  function computeWidth(margin: number): number {
-    return window.innerWidth - (window.innerWidth < 768 ? BAR_WIDTH : margin);
-  }
-
   const [windowSize, setWindowSize] = useState([
     computeWidth(margin),
     window.innerHeight
@@ -79,63 +83,22 @@ export function Viewer({
     selectorMode = SelectorMode.Symbols;
   }
 
+  const drawParams: DrawParams = {
+    mainContainer,
+    selectorMode,
+    selectedContainer,
+    selectedSymbol,
+    containers: current.containers,
+    symbols: current.symbols
+  };
+
   if (USE_EXPERIMENTAL_CANVAS_API) {
-    function Draw(
-      ctx: CanvasRenderingContext2D,
-      frameCount: number,
-      scale: number,
-      translatePos: IPoint
-    ): void {
-      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';
-
-      // Draw containers and symbol dimensions
-      RenderContainers(
-        ctx,
-        mainContainer,
-        current.containers,
-        leftDim, bottomDim, topDim, rightDim, scale);
-
-      // Draw symbols and symbol dimensions
-      RenderSymbols(ctx, current, scale);
-
-      // Draw selector
-      switch (selectorMode) {
-        case SelectorMode.Containers:
-          RenderContainerSelector(ctx, frameCount, {
-            containers: current.containers,
-            scale,
-            selected: selectedContainer
-          });
-          break;
-        case SelectorMode.Symbols:
-          RenderSymbolSelector(ctx, frameCount, {
-            symbols: current.symbols,
-            scale,
-            selected: selectedSymbol
-          });
-          break;
-      }
-
-      ctx.restore();
-    }
     return (
       <Canvas
-        draw={Draw}
-        className={`ml-16 ${className}`}
+        className={className}
         width={window.innerWidth - BAR_WIDTH}
         height={window.innerHeight}
+        drawParams={drawParams}
       />
     );
   }
@@ -147,14 +110,8 @@ export function Viewer({
       viewerHeight={windowSize[1]}
       width={mainContainer.properties.width}
       height={mainContainer.properties.height}
-      containers={current.containers}
-      selectedContainer={selectedContainer}
-      symbols={current.symbols}
-      selectedSymbol={selectedSymbol}
-      selectorMode={selectorMode}
+      drawParams={drawParams}
       selectContainer={selectContainer}
-    >
-      {mainContainer}
-    </SVG>
+    />
   );
 }