Refactor selector

src/Components/SVG/Elements/Selector/Selector.tsx

@@ -0,0 +1,54 @@
+import '../Selector.scss';
+import * as React from 'react';
+import { SHOW_SELECTOR_TEXT } from '../../../../utils/default';
+
+interface ISelectorProps {
+  text: string
+  x: number
+  y: number
+  width: number
+  height: number
+  scale: number
+  style?: React.CSSProperties
+}
+
+export function Selector({ text, x, y, width, height, scale, style: overrideStyle }: ISelectorProps): JSX.Element {
+  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',
+    ...overrideStyle
+  };
+
+  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'
+          }}
+        >
+          { text }
+        </text>
+        : null}
+    </>
+  );
+}

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

@@ -1,9 +1,9 @@
 import '../Selector.scss';
 import * as React from 'react';
 import { type IContainerModel } from '../../../../Interfaces/IContainerModel';
-import { SHOW_SELECTOR_TEXT } from '../../../../utils/default';
 import { GetAbsolutePosition } from '../../../../utils/itertools';
 import { RemoveMargin } from '../../../../utils/svg';
+import { Selector } from '../Selector/Selector';
 
 interface ISelectorContainerProps {
   containers: Map<string, IContainerModel>
@@ -33,41 +33,14 @@ export function SelectorContainer(props: ISelectorContainerProps): JSX.Element {
     props.selected.properties.margin.right
   ));
 
-  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 (
-    <>
+    <Selector
-      <rect
+      text={props.selected.properties.displayedText}
-        x={x}
+      x={x}
-        y={y}
+      y={y}
-        width={width}
+      width={width}
-        height={height}
+      height={height}
-        style={style}
+      scale={scale}
-      >
+    />
-      </rect>
-      {SHOW_SELECTOR_TEXT
-        ? <text
-          x={xText}
-          y={yText}
-          style={{
-            transform: `scale(${1 / scale}) translateX(-50%)`,
-            transformBox: 'fill-box'
-          }}
-        >
-          {props.selected.properties.displayedText}
-        </text>
-        : null}
-    </>
   );
 }

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 (
-    <>
+    <Selector
-      <rect
+      text={props.selected.displayedText}
-        x={x}
+      x={x}
-        y={y}
+      y={y}
-        width={width}
+      width={width}
-        height={height}
+      height={height}
-        style={style}
+      scale={scale}
-      >
+      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}
-    </>
   );
 }