chore: Update Monaco Editor to version 0.48.0 and update dev dependen…

…cies
eelab-dev · May 15, 2024 · 5841c0e · 5841c0e
1 parent af2b9a0
commit 5841c0e
Show file tree

Hide file tree

Showing 4 changed files with 1,720 additions and 1,615 deletions.
diff --git a/package.json b/package.json
@@ -15,31 +15,31 @@
   "author": "Danial Chitnis",
   "license": "MIT",
   "devDependencies": {
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
-    "@parcel/core": "^2.10.3",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.15.0",
-    "eslint": "^8.56.0",
-    "parcel": "^2.10.3",
-    "prettier": "^3.1.1",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@parcel/core": "^2.12.0",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.9.0",
+    "eslint": "^9.2.0",
+    "parcel": "^2.12.0",
+    "prettier": "^3.2.5",
     "process": "^0.11.10",
-    "serve": "^14.2.1",
-    "typescript": "^5.3.3",
-    "vercel": "^33.0.1"
+    "serve": "^14.2.3",
+    "typescript": "^5.4.5",
+    "vercel": "^34.1.14"
   },
   "dependencies": {
     "@chakra-ui/react": "2.8.2",
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "comlink": "^4.4.1",
-    "framer-motion": "^10.16.16",
-    "monaco-editor": "^0.45.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-focus-lock": "^2.9.6",
+    "framer-motion": "^11.1.9",
+    "monaco-editor": "^0.48.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-focus-lock": "^2.12.1",
     "webgl-plot": "^0.7.1"
   },
-  "packageManager": "yarn@4.0.2"
+  "packageManager": "yarn@4.2.2"
 }
diff --git a/src/editor/monacoLoader.ts b/src/editor/monacoLoader.ts
@@ -7,7 +7,7 @@ import type * as MonacoEditor from "monaco-editor/esm/vs/editor/editor.api";
 
 const monacoLoader = (): Promise<typeof MonacoEditor> => {
   return new Promise((resolve) => {
-    const monacoPath = "https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs";
+    const monacoPath = "https://cdn.jsdelivr.net/npm/monaco-editor@0.48.0/min/vs";
 
     const loaded2 = (e: CustomEvent) => {
       resolve(e.detail);

diff --git a/src/plotArray.tsx b/src/plotArray.tsx
@@ -386,10 +386,12 @@ function PlotArray({ resultArray: resultArray, displayData }: PlotType): JSX.Ele
   };
 
   const mouseMove = (e: React.MouseEvent) => {
-    const eOffset = (e.target as HTMLCanvasElement).getBoundingClientRect().x;
+    const xOffset = (e.target as HTMLCanvasElement).getBoundingClientRect().left;
+    const yOffSet = (e.target as HTMLCanvasElement).getBoundingClientRect().top;
     const width = (e.target as HTMLCanvasElement).getBoundingClientRect().width;
+    const height = (e.target as HTMLCanvasElement).getBoundingClientRect().height;
     if (mouseZoom.started) {
-      const cursorOffsetX = (2 * (e.clientX - eOffset - width / 2)) / width;
+      const cursorOffsetX = (2 * (e.clientX - xOffset - width / 2)) / width;
       setMouseZoom({
         started: true,
         cursorDownX: mouseZoom.cursorDownX,
@@ -412,7 +414,7 @@ function PlotArray({ resultArray: resultArray, displayData }: PlotType): JSX.Ele
     }
     /************Mouse Drag Evenet********* */
     if (mouseDrag.started) {
-      const moveX = (e.clientX - eOffset) * devicePixelRatio - mouseDrag.dragInitialX;
+      const moveX = (e.clientX - xOffset) * devicePixelRatio - mouseDrag.dragInitialX;
       const offsetX = moveX / width;
       wglp.gOffsetX = offsetX + mouseDrag.dragOffsetOld;
     }
@@ -421,25 +423,15 @@ function PlotArray({ resultArray: resultArray, displayData }: PlotType): JSX.Ele
     const canvas = canvasMain.current;
 
     if (canvas && plotOptions.crosshair) {
-      const devicePixelRatio = window.devicePixelRatio || 1;
-      //canvas.width = canvas.clientWidth * devicePixelRatio;
-      //canvas.height = canvas.clientHeight * devicePixelRatio;
-      //console.log("canvas->", canvas.width / devicePixelRatio, ",", canvas.offsetLeft);
-      //???????????????????????????????????????????????????????????????????????????????????????
+      const xPosRel = (2 * (e.clientX - xOffset - width / 2)) / width;
+      const x = (1 / wglp.gScaleX) * (xPosRel - wglp.gOffsetX);
+      //console.log("cross-->", xPosRel, "--> ", x);
 
-      //const x1 = 2 * ((e.pageX - canvas.offsetLeft) * devicePixelRatio - canvas.width / 2);
-      const xPosRel =
-        ((e.pageX - canvas.offsetLeft) * devicePixelRatio) / (width * devicePixelRatio);
+      const yPosRel = 1 - 2 * (e.clientY - yOffSet) / height;
+      const y = (1 / wglp.gScaleY) * (yPosRel - wglp.gOffsetY);
 
-      //const x = (1 / wglp.gScaleX) * (x1 / canvas.width) - wglp.gOffsetX;
-      const x = (2 * xPosRel) / wglp.gScaleX - (wglp.gOffsetX + 1) / wglp.gScaleX;
-      //console.log("cross-->", xPosRel, "--> ", x);
-      const y =
-        (1 / wglp.gScaleY) *
-        ((2 * (canvas.height / 2 - (e.pageY - canvas.offsetTop) * devicePixelRatio)) /
-          canvas.height -
-          wglp.gOffsetY);
       cross(x, y);
+
     }
   };
   const cross = (x: number, y: number): void => {