From 7ad866fc94ed3d07983fd8dfbb422ee092626e2b Mon Sep 17 00:00:00 2001
From: Eric NGUYEN <enguyen@techform.fr>
Date: Mon, 13 Feb 2023 16:38:00 +0100
Subject: [PATCH] Refactor selector

---
 .../SVG/Elements/Selector/Selector.tsx        | 54 +++++++++++++++++++
 .../SelectorContainer/SelectorContainer.tsx   | 45 ++++------------
 .../SelectorSymbol/SelectorSymbol.tsx         | 44 ++++-----------
 3 files changed, 74 insertions(+), 69 deletions(-)
 create mode 100644 src/Components/SVG/Elements/Selector/Selector.tsx

diff --git a/src/Components/SVG/Elements/Selector/Selector.tsx b/src/Components/SVG/Elements/Selector/Selector.tsx
new file mode 100644
index 0000000..1a8fb3e
--- /dev/null
+++ b/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}
+    </>
+  );
+}
diff --git a/src/Components/SVG/Elements/SelectorContainer/SelectorContainer.tsx b/src/Components/SVG/Elements/SelectorContainer/SelectorContainer.tsx
index c85f2b3..c2ad3e2 100644
--- a/src/Components/SVG/Elements/SelectorContainer/SelectorContainer.tsx
+++ b/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 (
-    <>
-      <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.properties.displayedText}
-        </text>
-        : null}
-    </>
+    <Selector
+      text={props.selected.properties.displayedText}
+      x={x}
+      y={y}
+      width={width}
+      height={height}
+      scale={scale}
+    />
   );
 }
diff --git a/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx b/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx
index fd45870..01133fb 100644
--- a/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx
+++ b/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}
+    />
   );
 }