refactor: change the integration value position and shape (#1840)

* refactor: change the integration value position and shape

close: #1835

* test: fix integral test by select the first path element

* style: fix overlap between line and text for the integration

* refactor: integrals

* refactor: use the same integral indicator in ranges

* refactor: remove useless useCallback hook

* chore: fix prettier

* refcator: dim the range if its kind is not signal

src/component/1d/Chart1D.tsx

@@ -2,10 +2,10 @@ import FloatMoleculeStructures from '../tool/FloatMoleculeStructures';
 
 import ApdoizationLine from './ApodizationLine';
 import ExclusionZonesAnnotations from './ExclusionZonesAnnotations';
-import IntegralsSeries from './IntegralsSeries';
 import LinesSeries from './LinesSeries';
 import XAxis from './XAxis';
 import DatabaseElements from './database/DatabaseElements';
+import IntegralsSeries from './integral/IntegralsSeries';
 import JGraph from './jCouplingGraph/JGraph';
 import MultiAnalysisRanges from './multiAnalysis/MultiAnalysisRanges';
 import PeakAnnotations from './peaks/PeakAnnotations';

src/component/1d/Integral.tsx → src/component/1d/integral/Integral.tsx

@@ -1,5 +1,5 @@
-import useIntegralPath from '../hooks/useIntegralPath';
-import { usePanelPreferences } from '../hooks/usePanelPreferences';
+import useIntegralPath from '../../hooks/useIntegralPath';
+import { usePanelPreferences } from '../../hooks/usePanelPreferences';
 
 import IntegralResizable from './IntegralResizable';
 

src/component/1d/integral/IntegralIndicator.tsx

@@ -0,0 +1,48 @@
+import { CSSProperties } from 'react';
+
+import { useChartData } from '../../context/ChartContext';
+import { formatNumber } from '../../utility/formatNumber';
+
+interface IntegralIndicatorProps {
+  value: number | undefined;
+  format: string;
+  width: number;
+  opacity?: number;
+}
+
+const styles: Record<'text' | 'path', CSSProperties> = {
+  text: {
+    fontSize: '11px',
+    textAnchor: 'middle',
+    dominantBaseline: 'middle',
+    writingMode: 'vertical-rl',
+    fill: 'black',
+  },
+  path: {
+    fill: 'none',
+    strokeWidth: '1px',
+    shapeRendering: 'crispEdges',
+    stroke: 'black',
+  },
+};
+
+export function IntegralIndicator(props: IntegralIndicatorProps) {
+  const { value, width, format, opacity = 1 } = props;
+  const { height, margin } = useChartData();
+
+  const bottom = height - margin.bottom;
+
+  return (
+    <g style={{ transform: `translate(0,${bottom - 10}px) `, opacity }}>
+      <text
+        style={{
+          ...styles.text,
+          transform: `translate(${width / 2}px,-12px) scale(-1)`,
+        }}
+      >
+        {value ? formatNumber(value, format) : ''}
+      </text>
+      <path style={styles.path} d={`M0 0 L0 5 L${width} 5 L${width} 0 `} />
+    </g>
+  );
+}

src/component/1d/integral/IntegralResizable.tsx

@@ -0,0 +1,130 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
+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 { HighlightEventSource, useHighlight } from '../../highlight/index';
+import { RESIZE_INTEGRAL } from '../../reducer/types/Types';
+import { options } from '../../toolbar/ToolTypes';
+
+import { IntegralIndicator } from './IntegralIndicator';
+
+const stylesOnHover = css`
+  pointer-events: bounding-box;
+  @-moz-document url-prefix() {
+    pointer-events: fill;
+  }
+  .highlight {
+    fill: transparent;
+  }
+  .target {
+    visibility: hidden;
+  }
+`;
+
+const stylesHighlighted = css`
+  pointer-events: bounding-box;
+
+  @-moz-document url-prefix() {
+    pointer-events: fill;
+  }
+  fill: #ff6f0057;
+
+  .target {
+    visibility: visible;
+  }
+`;
+
+interface IntegralResizableProps {
+  integralData: {
+    id: string;
+    from: number;
+    to: number;
+    integral?: number;
+  };
+  integralFormat: string;
+}
+
+function IntegralResizable({
+  integralData,
+  integralFormat,
+}: IntegralResizableProps) {
+  const {
+    height,
+    margin,
+    toolOptions: { selectedTool },
+  } = useChartData();
+  const { viewerRef } = useGlobal();
+  const { scaleX } = useScaleChecked();
+  const dispatch = useDispatch();
+  const { id, integral } = integralData;
+  const highlight = useHighlight([id], {
+    type: HighlightEventSource.INTEGRAL,
+    extra: { id },
+  });
+
+  function handleOnStopResizing(position) {
+    dispatch({
+      type: RESIZE_INTEGRAL,
+      payload: {
+        data: {
+          ...integralData,
+          from: scaleX().invert(position.x2),
+          to: scaleX().invert(position.x1),
+        },
+      },
+    });
+  }
+
+  const from = integralData.from ? scaleX()(integralData.from) : 0;
+  const to = integralData.to ? scaleX()(integralData.to) : 0;
+
+  const bottom = height - margin.bottom;
+
+  return (
+    <g
+      onMouseEnter={() => highlight.show()}
+      onMouseLeave={() => highlight.hide()}
+    >
+      <Resizer
+        tag="svg"
+        initialPosition={{ x1: to, x2: from }}
+        onEnd={handleOnStopResizing}
+        parentElement={viewerRef}
+        key={`${id}_${to}_${from}`}
+        disabled={selectedTool !== options.integral.id}
+      >
+        {({ x1, x2 }, isActive) => {
+          const width = x2 - x1;
+
+          return (
+            <g
+              css={
+                highlight.isActive || isActive
+                  ? stylesHighlighted
+                  : stylesOnHover
+              }
+            >
+              <rect
+                width={width}
+                height={bottom}
+                className="highlight"
+                data-no-export="true"
+              />
+              <IntegralIndicator
+                value={integral}
+                format={integralFormat}
+                width={width}
+              />
+            </g>
+          );
+        }}
+      </Resizer>
+    </g>
+  );
+}
+
+export default IntegralResizable;

src/component/1d/IntegralsSeries.tsx → src/component/1d/integral/IntegralsSeries.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 
-import { isSpectrum1D } from '../../data/data1d/Spectrum1D';
-import { useChartData } from '../context/ChartContext';
-import { useActiveSpectrum } from '../reducer/Reducer';
+import { isSpectrum1D } from '../../../data/data1d/Spectrum1D';
+import { useChartData } from '../../context/ChartContext';
+import { useActiveSpectrum } from '../../reducer/Reducer';
 
 import Integral from './Integral';