Replace isComponentsOpen, isSymbolsOpen by SelectorMode in SVG.tsx

src/Components/SVG/SVG.tsx

@@ -21,9 +21,14 @@ interface ISVGProps {
   selectedContainer?: IContainerModel
   symbols: Map<string, ISymbolModel>
   selectedSymbol?: ISymbolModel
+  selectorMode: SelectorMode
   selectContainer: (containerId: string) => void
-  isComponentsOpen: boolean
+}
-  isSymbolsOpen: boolean
+
+export enum SelectorMode {
+  Nothing,
+  Containers,
+  Symbols
 }
 
 export const ID = 'svg';
@@ -62,6 +67,25 @@ export function SVG(props: ISVGProps): JSX.Element {
     selectContainer={props.selectContainer}
   />;
 
+  function Selector(): JSX.Element {
+    switch (props.selectorMode) {
+      case SelectorMode.Containers:
+        return <SelectorContainer
+          containers={props.containers}
+          scale={scale}
+          selected={props.selectedContainer}
+        />;
+      case SelectorMode.Symbols:
+        return <SelectorSymbol
+          symbols={props.symbols}
+          scale={scale}
+          selected={props.selectedSymbol}
+        />;
+      default:
+        return <></>;
+    }
+  }
+
   return (
     <div id={ID} className={props.className}>
       <ReactSVGPanZoom
@@ -102,9 +126,7 @@ 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} />
-          {/* leave this at the end so it can be removed during the svg export */}
+          <Selector />
-          { 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>

src/Components/Viewer/Viewer.tsx

@@ -8,7 +8,7 @@ import { BAR_WIDTH } from '../Bar/Bar';
 import { Canvas } from '../Canvas/Canvas';
 import { AddDimensions } from '../Canvas/DimensionLayer';
 import { RenderSelector } from '../Canvas/Selector';
-import { SVG } from '../SVG/SVG';
+import { SelectorMode, SVG } from '../SVG/SVG';
 import { RenderSymbol } from '../Canvas/Symbol';
 import { useState } from 'react';
 import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
@@ -71,6 +71,13 @@ export function Viewer({
     return <></>;
   }
 
+  let selectorMode = SelectorMode.Nothing;
+  if (isComponentsOpen) {
+    selectorMode = SelectorMode.Containers;
+  } else if (isSymbolsOpen) {
+    selectorMode = SelectorMode.Symbols;
+  }
+
   if (USE_EXPERIMENTAL_CANVAS_API) {
     function Draw(ctx: CanvasRenderingContext2D, frameCount: number, scale: number, translatePos: IPoint): void {
       if (mainContainer === undefined) {
@@ -144,9 +151,8 @@ export function Viewer({
       selectedContainer={selectedContainer}
       symbols={current.symbols}
       selectedSymbol={selectedSymbol}
+      selectorMode={selectorMode}
       selectContainer={selectContainer}
-      isComponentsOpen={isComponentsOpen}
-      isSymbolsOpen={isSymbolsOpen}
     >
       {mainContainer}
     </SVG>