Merged PR 366: Refactor Canvas, SVG and Viewer parameters

src/Components/SVG/SVG.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import { ReactSVGPanZoom, type Tool, TOOL_PAN, type Value, ALIGN_CENTER } from 'react-svg-pan-zoom';
 import { Container } from './Elements/Container';
-import { IContainerModel } from '../../Interfaces/IContainerModel';
 import { SelectorContainer } from './Elements/SelectorContainer/SelectorContainer';
 import { MAX_FRAMERATE } from '../../utils/default';
 import { SymbolLayer } from './Elements/SymbolLayer';
-import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
 import { DimensionLayer } from './Elements/DimensionLayer';
 import { SelectorSymbol } from './Elements/SelectorSymbol/SelectorSymbol';
-import { IToolbarProps, Toolbar } from './SVGReactPanZoom/ui-toolbar/toolbar';
+import { type IToolbarProps, Toolbar } from './SVGReactPanZoom/ui-toolbar/toolbar';
+import { type DrawParams } from '../Viewer/Viewer';
 
 interface ISVGProps {
   className?: string
@@ -16,12 +15,7 @@ interface ISVGProps {
   viewerHeight: number
   width: number
   height: number
-  containers: Map<string, IContainerModel>
-  children: IContainerModel
-  selectedContainer?: IContainerModel
-  symbols: Map<string, ISymbolModel>
-  selectedSymbol?: ISymbolModel
-  selectorMode: SelectorMode
+  drawParams: DrawParams
   selectContainer: (containerId: string) => void
 }
 
@@ -34,6 +28,14 @@ export enum SelectorMode {
 export const ID = 'svg';
 
 export function SVG(props: ISVGProps): JSX.Element {
+  const {
+    mainContainer,
+    selectorMode,
+    selectedContainer,
+    selectedSymbol,
+    containers,
+    symbols
+  } = props.drawParams;
   const [tool, setTool] = React.useState<Tool>(TOOL_PAN);
   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
   const [value, setValue] = React.useState<Value>({} as Value);
@@ -59,27 +61,27 @@ export function SVG(props: ISVGProps): JSX.Element {
   };
 
   const children: React.ReactNode | React.ReactNode[] = <Container
-    key={`container-${props.children.properties.id}`}
-    containers={props.containers}
-    model={props.children}
+    key={`container-${mainContainer.properties.id}`}
+    containers={containers}
+    model={mainContainer}
     depth={0}
     scale={scale}
     selectContainer={props.selectContainer}
   />;
 
   function Selector(): JSX.Element {
-    switch (props.selectorMode) {
+    switch (selectorMode) {
       case SelectorMode.Containers:
         return <SelectorContainer
-          containers={props.containers}
+          containers={containers}
           scale={scale}
-          selected={props.selectedContainer}
+          selected={selectedContainer}
         />;
       case SelectorMode.Symbols:
         return <SelectorSymbol
-          symbols={props.symbols}
+          symbols={symbols}
           scale={scale}
-          selected={props.selectedSymbol}
+          selected={selectedSymbol}
         />;
       default:
         return <></>;
@@ -132,8 +134,13 @@ export function SVG(props: ISVGProps): JSX.Element {
       >
         <svg {...properties}>
           {children}
-          <DimensionLayer containers={props.containers} symbols={props.symbols} scale={scale} root={props.children} />
-          <SymbolLayer scale={scale} symbols={props.symbols} />
+          <DimensionLayer
+            containers={containers}
+            symbols={symbols}
+            scale={scale}
+            root={mainContainer}
+          />
+          <SymbolLayer scale={scale} symbols={symbols} />
           <Selector />
         </svg>
       </ReactSVGPanZoom>