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 */}
-          { props.isComponentsOpen ? <SelectorContainer containers={props.containers} scale={scale} selected={props.selectedContainer} /> : null }
-          { props.isSymbolsOpen ? <SelectorSymbol symbols={props.symbols} scale={scale} selected={props.selectedSymbol} /> : null }
+          <Selector />
         </svg>
       </ReactSVGPanZoom>
     </div>