Refactor selector

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

@@ -1,7 +1,8 @@
 import '../Selector.scss';
 import * as React from 'react';
-import { SHOW_SELECTOR_TEXT, SYMBOL_MARGIN } from '../../../../utils/default';
+import { SYMBOL_MARGIN } from '../../../../utils/default';
 import { type ISymbolModel } from '../../../../Interfaces/ISymbolModel';
+import { Selector } from '../Selector/Selector';
 
 interface ISelectorSymbolProps {
   symbols: Map<string, ISymbolModel>
@@ -27,43 +28,20 @@ export function SelectorSymbol(props: ISelectorSymbolProps): JSX.Element {
     props.selected.x + props.selected.width / 2,
     -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',
     transform: 'translateX(-50%)',
     transformBox: 'fill-box'
   };
 
   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}
-    </>
+    <Selector
+      text={props.selected.displayedText}
+      x={x}
+      y={y}
+      width={width}
+      height={height}
+      scale={scale}
+      style={style}
+    />
   );
 }