fix: update dependencies (#1428)

Re-introduce shadow root with style reset. Closes: #1424 * fix: work around chrome bug related to mouse enter in shadow dom * feat: resizer component * refactor: range and integral resizer * refactor: remove unused code * test: fix e2e tests with new resizer * chore: fix "wraper" typo * fix: export as features * chore: fix build * refactor: analysis range component to use new resizer component * refactor: remove react-draggable package * fix: prevent export certain elements as SVG Co-authored-by: hamed-musallam <hamed.musallam@gmail.com>
cheminfo · Apr 5, 2022 · 21ffc50 · 21ffc50
1 parent f065a93
commit 21ffc50
Show file tree

Hide file tree

Showing 23 changed files with 1,107 additions and 803 deletions.
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -6,6 +6,7 @@ rules:
   '@typescript-eslint/no-explicit-any': off
   '@typescript-eslint/naming-convention': off
   '@typescript-eslint/no-implied-eval': off
+  '@typescript-eslint/no-misused-promises': off
   no-new-func: off
   no-restricted-imports:
     - error

diff --git a/.ncurc.json b/.ncurc.json
@@ -3,6 +3,9 @@
   "reject": [
     "react-color",
     "// TODO: Migrate to v6",
-    "react-router-dom"
+    "react-router-dom",
+    "// TODO: Migrate to v18",
+    "react",
+    "react-dom"
   ]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,25 +38,25 @@
     "url": "git+https://github.com/cheminfo/nmrium.git"
   },
   "volta": {
-    "node": "16.14.0"
+    "node": "16.14.2"
   },
   "peerDependencies": {
     "react": ">=16.0.0",
     "react-dom": ">=16.0.0"
   },
   "dependencies": {
     "@emotion/react": "^11.8.2",
-    "analysis-ui-components": "^0.10.3",
+    "analysis-ui-components": "^0.11.1",
     "cheminfo-font": "^1.8.1",
     "cheminfo-types": "^1.1.0",
-    "d3": "^7.3.0",
+    "d3": "^7.4.2",
     "eventemitter3": "^4.0.7",
     "file-saver": "^2.0.5",
     "formik": "^2.2.9",
     "immer": "^9.0.12",
-    "jszip": "^3.7.1",
+    "jszip": "^3.8.0",
     "lodash": "^4.17.21",
-    "mf-parser": "^1.4.5",
+    "mf-parser": "^1.4.6",
     "ml-airpls": "^1.0.0",
     "ml-array-max": "^1.2.4",
     "ml-array-mean": "^1.1.6",
@@ -65,20 +65,19 @@
     "ml-baseline-correction-regression": "^1.0.0",
     "ml-conrec": "^3.2.1",
     "ml-gsd": "^10.2.0",
-    "ml-spectra-processing": "^11.1.0",
+    "ml-spectra-processing": "^11.2.0",
     "ml-stat": "^1.3.3",
     "multiplet-analysis": "^2.0.0",
     "nmr-correlation": "^2.2.5",
     "nmr-parser": "^1.7.3",
-    "nmr-processing": "^7.4.1",
+    "nmr-processing": "^7.4.2",
     "nmredata": "^0.6.1",
     "numeral": "^2.0.6",
     "openchemlib": "^7.4.3",
     "openchemlib-utils": "^1.10.0",
     "re-resizable": "^6.9.5",
     "react-color": "2.17.2",
     "react-d3-utils": "^0.5.0",
-    "react-draggable": "^4.4.4",
     "react-dropzone": "^12.0.4",
     "react-error-boundary": "^3.1.4",
     "react-icons": "^4.3.1",
@@ -88,7 +87,7 @@
     "react-ocl-nmr": "^1.1.0",
     "react-plot": "^0.16.0",
     "react-rnd": "^10.3.5",
-    "react-slider": "^1.3.1",
+    "react-slider": "^2.0.0",
     "react-table": "^7.7.0",
     "react-transition-group": "^4.4.2",
     "react-use": "^17.3.2",
@@ -99,29 +98,29 @@
     "@babel/plugin-transform-modules-commonjs": "^7.17.7",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@playwright/test": "^1.20.1",
+    "@playwright/test": "^1.20.2",
     "@simbathesailor/use-what-changed": "^2.0.0",
     "@types/d3": "^7.1.0",
     "@types/jest": "^27.4.1",
     "@types/node": "^17.0.23",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
     "@types/react-router-dom": "^5.3.3",
-    "@vitejs/plugin-react": "^1.2.0",
+    "@vitejs/plugin-react": "^1.3.0",
     "@zakodium/eslint-config": "^5.1.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.11.0",
+    "eslint": "^8.12.0",
     "jest": "^27.5.1",
     "modern-normalize": "^1.1.0",
-    "prettier": "^2.6.1",
-    "rc-menu": "^9.5.1",
+    "prettier": "^2.6.2",
+    "rc-menu": "^9.5.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
     "rimraf": "^3.0.2",
     "rollup-plugin-analyzer": "^4.0.0",
     "serve": "^13.0.2",
     "typescript": "~4.6.3",
-    "vite": "^2.8.6"
+    "vite": "^2.9.1"
   }
-}
+}
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -11,7 +11,7 @@ const config: PlaywrightTestConfig = {
   use: {
     browserName,
     headless: true,
-    viewport: { width: 1280, height: 720 },
+    viewport: { width: 1400, height: 900 },
     ignoreHTTPSErrors: true,
     // video: 'on-first-retry',
     launchOptions: {

diff --git a/src/component/1d/IntegralResizable.tsx b/src/component/1d/IntegralResizable.tsx
@@ -1,15 +1,14 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { useCallback, useState, useEffect } from 'react';
+import { useCallback } from 'react';
 
 import { useChartData } from '../context/ChartContext';
 import { useDispatch } from '../context/DispatchContext';
 import { useScaleChecked } from '../context/ScaleContext';
+import Resizer from '../elements/resizer/Resizer';
 import { HighlightedSource, useHighlight } from '../highlight/index';
 import { RESIZE_INTEGRAL } from '../reducer/types/Types';
 
-import Resizable from './Resizable';
-
 const stylesOnHover = css`
   pointer-events: bounding-box;
   @-moz-document url-prefix() {
@@ -49,25 +48,26 @@ function IntegralResizable({ integralData }: IntegralResizableProps) {
   const { height, margin } = useChartData();
   const { scaleX } = useScaleChecked();
   const dispatch = useDispatch();
-
-  const [{ id, integral, from, to }, setIntegral] = useState(integralData);
+  const { id, from, to, integral } = integralData;
   const highlight = useHighlight([id], {
     type: HighlightedSource.INTEGRAL,
     extra: { id },
   });
 
-  useEffect(() => {
-    setIntegral(integralData);
-  }, [integralData]);
-
   const handleOnStopResizing = useCallback(
-    (resized) => {
+    (position) => {
       dispatch({
         type: RESIZE_INTEGRAL,
-        payload: { data: { ...integralData, ...resized } },
+        payload: {
+          data: {
+            ...integralData,
+            from: scaleX().invert(position.x2),
+            to: scaleX().invert(position.x1),
+          },
+        },
       });
     },
-    [dispatch, integralData],
+    [dispatch, integralData, scaleX],
   );
 
   const handleOnEnterNotation = useCallback(() => {
@@ -78,10 +78,6 @@ function IntegralResizable({ integralData }: IntegralResizableProps) {
     highlight.hide();
   }, [highlight]);
 
-  const dragHandler = useCallback((boundary) => {
-    setIntegral((integral) => ({ ...integral, ...boundary }));
-  }, []);
-
   const x0 = from ? scaleX()(from) : 0;
   const x1 = to ? scaleX()(to) : 0;
 
@@ -91,31 +87,32 @@ function IntegralResizable({ integralData }: IntegralResizableProps) {
       onMouseEnter={handleOnEnterNotation}
       onMouseLeave={handleOnMouseLeaveNotation}
     >
-      <rect
-        data-no-export="true"
-        x={`${x1}`}
-        y="0"
-        width={`${x0 - x1}`}
-        height={height - margin.bottom}
-        className="highlight"
-      />
-      {/* {highlight.isActive && ( */}
-      <text
-        x={x1}
-        y={height - margin.bottom + 30}
-        fill="black"
-        style={{ fontSize: '12px', fontWeight: 'bold' }}
+      <Resizer
+        tag="svg"
+        initialPosition={{ x1: x1, x2: x0 }}
+        onEnd={handleOnStopResizing}
       >
-        {integral !== undefined ? integral.toFixed(2) : ''}
-      </text>
-      {/* )} */}
-      <Resizable
-        from={integralData.from}
-        to={integralData.to}
-        onDrag={dragHandler}
-        onDrop={handleOnStopResizing}
-        data-no-export="true"
-      />
+        {(x1, x2) => (
+          <g>
+            <rect
+              x="0"
+              y="0"
+              width={x2 - x1}
+              height={height - margin.bottom}
+              className="highlight"
+              data-no-export="true"
+            />
+            <text
+              x={0}
+              y={height - margin.bottom + 30}
+              fill="black"
+              style={{ fontSize: '12px', fontWeight: 'bold' }}
+            >
+              {integral !== undefined ? integral.toFixed(2) : ''}
+            </text>
+          </g>
+        )}
+      </Resizer>
     </g>
   );
 }