Implement Highlight on symbols

src/Components/SVG/Elements/SelectorContainer/SelectorContainer.tsx

@@ -1,17 +1,17 @@
-import './Selector.scss';
+import '../Selector.scss';
 import * as React from 'react';
-import { IContainerModel } from '../../../../Interfaces/IContainerModel';
+import { type IContainerModel } from '../../../../Interfaces/IContainerModel';
 import { SHOW_SELECTOR_TEXT } from '../../../../utils/default';
 import { GetAbsolutePosition } from '../../../../utils/itertools';
 import { RemoveMargin } from '../../../../utils/svg';
 
-interface ISelectorProps {
+interface ISelectorContainerProps {
   containers: Map<string, IContainerModel>
   selected?: IContainerModel
   scale?: number
 }
 
-export function Selector(props: ISelectorProps): JSX.Element {
+export function SelectorContainer(props: ISelectorContainerProps): JSX.Element {
   if (props.selected === undefined || props.selected === null) {
     return (
       <rect visibility={'hidden'}>

src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx

@@ -0,0 +1,65 @@
+import '../Selector.scss';
+import * as React from 'react';
+import { SHOW_SELECTOR_TEXT, SYMBOL_MARGIN } from '../../../../utils/default';
+import { type ISymbolModel } from '../../../../Interfaces/ISymbolModel';
+
+interface ISelectorSymbolProps {
+  symbols: Map<string, ISymbolModel>
+  selected?: ISymbolModel
+  scale?: number
+}
+
+export function SelectorSymbol(props: ISelectorSymbolProps): JSX.Element {
+  if (props.selected === undefined || props.selected === null) {
+    return (
+      <rect visibility={'hidden'}>
+      </rect>
+    );
+  }
+
+  const scale = (props.scale ?? 1);
+  const [width, height] = [
+    props.selected.width,
+    props.selected.height / scale
+  ];
+
+  const [x, y] = [props.selected.x, -SYMBOL_MARGIN - height];
+
+  const xText = x + width / 2;
+  const yText = y + height / 2;
+
+  const style: React.CSSProperties = {
+    stroke: '#3B82F6',
+    strokeWidth: 4 / scale,
+    fillOpacity: 0,
+    transitionProperty: 'all',
+    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    transitionDuration: '150ms',
+    animation: 'fadein 750ms ease-in alternate infinite'
+  };
+
+  return (
+    <>
+      <rect
+        x={x}
+        y={y}
+        width={width}
+        height={height}
+        style={style}
+      >
+      </rect>
+      {SHOW_SELECTOR_TEXT
+        ? <text
+          x={xText}
+          y={yText}
+          style={{
+            transform: `scale(${1 / scale}) translateX(-50%)`,
+            transformBox: 'fill-box'
+          }}
+        >
+          {props.selected.displayedText}
+        </text>
+        : null}
+    </>
+  );
+}

src/Components/SVG/SVG.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import { ReactSVGPanZoom, Tool, TOOL_PAN, Value } from 'react-svg-pan-zoom';
+import { ReactSVGPanZoom, type Tool, TOOL_PAN, type Value } from 'react-svg-pan-zoom';
 import { Container } from './Elements/Container';
-import { IContainerModel } from '../../Interfaces/IContainerModel';
-import { Selector } from './Elements/Selector/Selector';
+import { type IContainerModel } from '../../Interfaces/IContainerModel';
+import { SelectorContainer } from './Elements/SelectorContainer/SelectorContainer';
 import { DepthDimensionLayer } from './Elements/DepthDimensionLayer';
 import { MAX_FRAMERATE, SHOW_DIMENSIONS_PER_DEPTH } from '../../utils/default';
 import { SymbolLayer } from './Elements/SymbolLayer';
-import { ISymbolModel } from '../../Interfaces/ISymbolModel';
+import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
 import { DimensionLayer } from './Elements/DimensionLayer';
+import { SelectorSymbol } from './Elements/SelectorSymbol/SelectorSymbol';
 
 interface ISVGProps {
   className?: string
@@ -17,9 +18,12 @@ interface ISVGProps {
   height: number
   containers: Map<string, IContainerModel>
   children: IContainerModel
-  selected?: IContainerModel
+  selectedContainer?: IContainerModel
   symbols: Map<string, ISymbolModel>
+  selectedSymbol?: ISymbolModel
   selectContainer: (containerId: string) => void
+  isComponentsOpen: boolean
+  isSymbolsOpen: boolean
 }
 
 export const ID = 'svg';
@@ -49,8 +53,7 @@ export function SVG(props: ISVGProps): JSX.Element {
     xmlns
   };
 
-  let children: React.ReactNode | React.ReactNode[] = [];
-  children = <Container
+  const children: React.ReactNode | React.ReactNode[] = <Container
     key={`container-${props.children.properties.id}`}
     containers={props.containers}
     model={props.children}
@@ -99,7 +102,9 @@ export function SVG(props: ISVGProps): JSX.Element {
             : null}
           <DimensionLayer containers={props.containers} symbols={props.symbols} scale={scale} root={props.children} />
           <SymbolLayer scale={scale} symbols={props.symbols} />
-          <Selector containers={props.containers} scale={scale} selected={props.selected} /> {/* leave this at the end so it can be removed during the svg export */}
+          {/* leave this at the end so it can be removed during the svg export */}
+          { props.isComponentsOpen ? <SelectorContainer containers={props.containers} scale={scale} selected={props.selectedContainer} /> : null }
+          { props.isSymbolsOpen ? <SelectorSymbol symbols={props.symbols} scale={scale} selected={props.selectedSymbol} /> : null }
         </svg>
       </ReactSVGPanZoom>
     </div>