From aa5978f2a6c655ec8a534f8b17ca26c24f329d4c Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Thu, 2 Nov 2023 11:34:07 +0100
Subject: [PATCH] refactor: create HOC for the resizer component

---
 .../1d/integral/IntegralResizable.tsx         | 23 ++++-------
 src/component/1d/ranges/Range.tsx             | 30 ++++----------
 src/component/elements/ResizerWithScale.tsx   | 41 +++++++++++++++++++
 3 files changed, 58 insertions(+), 36 deletions(-)
 create mode 100644 src/component/elements/ResizerWithScale.tsx

diff --git a/src/component/1d/integral/IntegralResizable.tsx b/src/component/1d/integral/IntegralResizable.tsx
index 46bd8410ad..98bd1c0a24 100644
--- a/src/component/1d/integral/IntegralResizable.tsx
+++ b/src/component/1d/integral/IntegralResizable.tsx
@@ -4,9 +4,8 @@ import { Integral } from 'nmr-processing';
 
 import { useChartData } from '../../context/ChartContext';
 import { useDispatch } from '../../context/DispatchContext';
-import { useGlobal } from '../../context/GlobalContext';
 import { useScaleChecked } from '../../context/ScaleContext';
-import Resizer from '../../elements/resizer/Resizer';
+import { ResizerWithScale } from '../../elements/ResizerWithScale';
 import { HighlightEventSource, useHighlight } from '../../highlight/index';
 import { useResizerStatus } from '../../hooks/useResizerStatus';
 
@@ -52,10 +51,9 @@ function IntegralResizable({
   integralFormat,
 }: IntegralResizableProps) {
   const { height, margin } = useChartData();
-  const { viewerRef } = useGlobal();
   const { scaleX } = useScaleChecked();
   const dispatch = useDispatch();
-  const { id, integral } = integralData;
+  const { id, integral, to, from } = integralData;
   const highlight = useHighlight([id], {
     type: HighlightEventSource.INTEGRAL,
     extra: { id },
@@ -74,25 +72,20 @@ function IntegralResizable({
     });
   }
 
-  const from = integralData.from ? scaleX()(integralData.from) : 0;
-  const to = integralData.to ? scaleX()(integralData.to) : 0;
-
   const bottom = height - margin.bottom;
 
-  const isResizeingActive = useResizerStatus('integral');
+  const isResizingActive = useResizerStatus('integral');
 
   return (
     <g
       onMouseEnter={() => highlight.show()}
       onMouseLeave={() => highlight.hide()}
     >
-      <Resizer
-        tag="svg"
-        initialPosition={{ x1: to, x2: from }}
+      <ResizerWithScale
+        from={from}
+        to={to}
         onEnd={handleOnStopResizing}
-        parentElement={viewerRef}
-        key={`${id}_${to}_${from}`}
-        disabled={!isResizeingActive}
+        disabled={!isResizingActive}
       >
         {({ x1, x2 }, isActive) => {
           const width = x2 - x1;
@@ -119,7 +112,7 @@ function IntegralResizable({
             </g>
           );
         }}
-      </Resizer>
+      </ResizerWithScale>
     </g>
   );
 }
diff --git a/src/component/1d/ranges/Range.tsx b/src/component/1d/ranges/Range.tsx
index 4a3a0cda50..67fd87d4da 100644
--- a/src/component/1d/ranges/Range.tsx
+++ b/src/component/1d/ranges/Range.tsx
@@ -1,7 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
 import { Range as RangeType } from 'nmr-processing';
-import { useEffect, useState } from 'react';
 
 import { isRangeAssigned } from '../../../data/data1d/Spectrum1D/isRangeAssigned';
 import { checkRangeKind } from '../../../data/utilities/RangeUtilities';
@@ -11,8 +10,7 @@ import {
 } from '../../assignment/AssignmentsContext';
 import { filterForIDsWithAssignment } from '../../assignment/utilities/filterForIDsWithAssignment';
 import { useDispatch } from '../../context/DispatchContext';
-import { useGlobal } from '../../context/GlobalContext';
-import Resizer from '../../elements/resizer/Resizer';
+import { ResizerWithScale } from '../../elements/ResizerWithScale';
 import { HighlightEventSource, useHighlight } from '../../highlight';
 import { useResizerStatus } from '../../hooks/useResizerStatus';
 import { options } from '../../toolbar/ToolTypes';
@@ -47,7 +45,6 @@ function Range({
   selectedTool,
   relativeFormat,
 }: RangeProps) {
-  const { viewerRef } = useGlobal();
   const { id, integration, signals, diaIDs, from, to } = range;
   const assignmentData = useAssignmentData();
   const assignmentRange = useAssignment(id);
@@ -63,13 +60,6 @@ function Range({
 
   const scaleX = useScaleX();
   const dispatch = useDispatch();
-  const [position, setPosition] = useState({ x1: 0, x2: 0 });
-
-  useEffect(() => {
-    const x2 = scaleX()(from);
-    const x1 = scaleX()(to);
-    setPosition({ x1, x2 });
-  }, [from, scaleX, to]);
 
   const isBlockedByEditing =
     selectedTool && selectedTool === options.editRange.id;
@@ -118,7 +108,7 @@ function Range({
     isBlockedByEditing || highlightRange.isActive || assignmentRange.isActive;
 
   const isAssigned = isRangeAssigned(range);
-  const isResizeingActive = useResizerStatus('rangePicking');
+  const isResizingActive = useResizerStatus('rangePicking');
 
   return (
     <g
@@ -129,16 +119,14 @@ function Range({
       onMouseLeave={mouseLeaveHandler}
       {...(!assignmentRange.isActive && { css: style })}
     >
-      <Resizer
-        tag="svg"
-        position={position}
+      <ResizerWithScale
+        from={from}
+        to={to}
         onEnd={handleOnStopResizing}
-        parentElement={viewerRef}
-        disabled={!isResizeingActive}
-        onMove={(p) => setPosition(p)}
+        disabled={!isResizingActive}
       >
-        {(xs, isActive) => {
-          const width = position.x2 - position.x1;
+        {({ x1, x2 }, isActive) => {
+          const width = x2 - x1;
           return (
             <g>
               {isAssigned && !isHighlighted && !isActive && (
@@ -166,7 +154,7 @@ function Range({
             </g>
           );
         }}
-      </Resizer>
+      </ResizerWithScale>
 
       {showMultiplicityTrees && (
         <MultiplicityTree range={range} onUnlink={unAssignHandler} />
diff --git a/src/component/elements/ResizerWithScale.tsx b/src/component/elements/ResizerWithScale.tsx
new file mode 100644
index 0000000000..c29c9787dd
--- /dev/null
+++ b/src/component/elements/ResizerWithScale.tsx
@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+
+import { useScaleX } from '../1d/utilities/scale';
+import { useGlobal } from '../context/GlobalContext';
+
+import Resizer, { ResizerProps } from './resizer/Resizer';
+
+interface ResizerWithScaleProps {
+  disabled: boolean;
+  from: number;
+  to: number;
+  onEnd: ResizerProps['onEnd'];
+  children: ResizerProps['children'];
+}
+
+export function ResizerWithScale(props: ResizerWithScaleProps) {
+  const { from, to, onEnd, disabled, children } = props;
+  const { viewerRef } = useGlobal();
+  const scaleX = useScaleX();
+
+  const [position, setPosition] = useState({ x1: to, x2: from });
+
+  useEffect(() => {
+    const x2 = scaleX()(from);
+    const x1 = scaleX()(to);
+    setPosition({ x1, x2 });
+  }, [from, scaleX, to]);
+
+  return (
+    <Resizer
+      tag="svg"
+      position={position}
+      onEnd={onEnd}
+      parentElement={viewerRef}
+      disabled={disabled}
+      onMove={(p) => setPosition(p)}
+    >
+      {children}
+    </Resizer>
+  );
+}