clean

src/components/area.jsx

@@ -2,69 +2,60 @@ import { React, useState } from "react";
 
 export default function Area(props) {
   const [resize, setResize] = useState("none");
-  const [initialMouseX, setInitialMouseX] = useState(0);
+  const [initCoords, setInitCoords] = useState({
-  const [initialMouseY, setInitialMouseY] = useState(0);
+    x: 0,
-  const [initialWidth, setInitialWidth] = useState(0);
+    y: 0,
-  const [initialHeight, setInitialHeight] = useState(0);
+    width: 0,
-  const [initialX, setInitialX] = useState(0);
+    height: 0,
-  const [initialY, setInitialY] = useState(0);
+    mouseX: 0,
+    mouseY: 0,
+  });
 
   const handleMouseDown = (e, dir) => {
     setResize(dir);
     props.setPanning(false);
-    setInitialMouseX(e.clientX);
+    setInitCoords({
-    setInitialMouseY(e.clientY);
+      x: props.areaData.x,
-    setInitialWidth(props.areaData.width);
+      y: props.areaData.y,
-    setInitialHeight(props.areaData.height);
+      width: props.areaData.width,
-    setInitialX(props.areaData.x);
+      height: props.areaData.height,
-    setInitialY(props.areaData.y);
+      mouseX: e.clientX,
+      mouseY: e.clientY,
+    });
   };
 
   const handleMouseMove = (e) => {
+    if (resize === "none") return;
+
+    let newX = initCoords.x;
+    let newY = initCoords.y;
+    let newWidth = initCoords.width;
+    let newHeight = initCoords.height;
     props.setPanning(false);
     if (resize === "br") {
-      const newWidth = initialWidth + (e.clientX - initialMouseX);
+      newWidth = initCoords.width + (e.clientX - initCoords.mouseX);
-      const newHeight = initialHeight + (e.clientY - initialMouseY);
+      newHeight = initCoords.height + (e.clientY - initCoords.mouseY);
-      props.setAreas((prev) => {
-        return prev.map((a) => {
-          if (a.id === props.areaData.id) {
-            return {
-              ...a,
-              width: newWidth,
-              height: newHeight,
-            };
-          }
-          return a;
-        });
-      });
     } else if (resize === "tl") {
-      const newX = initialX + (e.clientX - initialMouseX);
+      newX = initCoords.x + (e.clientX - initCoords.mouseX);
-      const newY = initialY + (e.clientY - initialMouseY);
+      newY = initCoords.y + (e.clientY - initCoords.mouseY);
-      const newWidth = initialWidth - (e.clientX - initialMouseX);
+      newWidth = initCoords.width - (e.clientX - initCoords.mouseX);
-      const newHeight = initialHeight - (e.clientY - initialMouseY);
+      newHeight = initCoords.height - (e.clientY - initCoords.mouseY);
-      props.setAreas((prev) => {
-        return prev.map((a) => {
-          if (a.id === props.areaData.id) {
-            return {
-              ...a,
-              x: newX,
-              y: newY,
-              width: newWidth,
-              height: newHeight,
-            };
-          }
-          return a;
-        });
-      });
     } else if (resize === "tr") {
-      const newY = initialY + (e.clientY - initialMouseY);
+      newY = initCoords.y + (e.clientY - initCoords.mouseY);
-      const newWidth = initialWidth + (e.clientX - initialMouseX);
+      newWidth = initCoords.width + (e.clientX - initCoords.mouseX);
-      const newHeight = initialHeight - (e.clientY - initialMouseY);
+      newHeight = initCoords.height - (e.clientY - initCoords.mouseY);
+    } else if (resize === "bl") {
+      newX = initCoords.x + (e.clientX - initCoords.mouseX);
+      newWidth = initCoords.width - (e.clientX - initCoords.mouseX);
+      newHeight = initCoords.height + (e.clientY - initCoords.mouseY);
+    }
+
     props.setAreas((prev) => {
       return prev.map((a) => {
         if (a.id === props.areaData.id) {
           return {
             ...a,
+            x: newX,
             y: newY,
             width: newWidth,
             height: newHeight,
@@ -73,26 +64,6 @@ export default function Area(props) {
         return a;
       });
     });
-    } else if (resize === "bl") {
-      const newX = initialX + (e.clientX - initialMouseX);
-      const newWidth = initialWidth - (e.clientX - initialMouseX);
-      const newHeight = initialHeight + (e.clientY - initialMouseY);
-      props.setAreas((prev) => {
-        return prev.map((a) => {
-          if (a.id === props.areaData.id) {
-            return {
-              ...a,
-              x: newX,
-              width: newWidth,
-              height: newHeight,
-            };
-          }
-          return a;
-        });
-      });
-    } else {
-      return;
-    }
   };
 
   const handleMouseUp = () => {