Implement Highlight on symbols

src/Components/Viewer/Viewer.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { IContainerModel } from '../../Interfaces/IContainerModel';
-import { IHistoryState } from '../../Interfaces/IHistoryState';
-import { IPoint } from '../../Interfaces/IPoint';
+import { type IContainerModel } from '../../Interfaces/IContainerModel';
+import { type IHistoryState } from '../../Interfaces/IHistoryState';
+import { type IPoint } from '../../Interfaces/IPoint';
 import { DIMENSION_MARGIN, USE_EXPERIMENTAL_CANVAS_API } from '../../utils/default';
 import { FindContainerById, MakeRecursionDFSIterator } from '../../utils/itertools';
 import { BAR_WIDTH } from '../Bar/Bar';
@@ -11,13 +11,17 @@ import { RenderSelector } from '../Canvas/Selector';
 import { SVG } from '../SVG/SVG';
 import { RenderSymbol } from '../Canvas/Symbol';
 import { useState } from 'react';
+import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
 
 interface IViewerProps {
   className?: string
   current: IHistoryState
   selectedContainer: IContainerModel | undefined
   selectContainer: (containerId: string) => void
+  selectedSymbol: ISymbolModel | undefined
   margin: number
+  isComponentsOpen: boolean
+  isSymbolsOpen: boolean
 }
 
 export function Viewer({
@@ -25,7 +29,10 @@ export function Viewer({
   current,
   selectedContainer,
   selectContainer,
-  margin
+  selectedSymbol,
+  margin,
+  isComponentsOpen,
+  isSymbolsOpen
 }: IViewerProps): JSX.Element {
   function computeWidth(margin: number): number {
     return window.innerWidth - (window.innerWidth < 768 ? BAR_WIDTH : margin);
@@ -134,11 +141,13 @@ export function Viewer({
       width={mainContainer.properties.width}
       height={mainContainer.properties.height}
       containers={current.containers}
-      selected={selectedContainer}
+      selectedContainer={selectedContainer}
       symbols={current.symbols}
+      selectedSymbol={selectedSymbol}
       selectContainer={selectContainer}
+      isComponentsOpen={isComponentsOpen}
+      isSymbolsOpen={isSymbolsOpen}
     >
-
       {mainContainer}
     </SVG>
   );