Make area resize smoother

src/components/area.jsx

@@ -1,21 +1,11 @@
 import { React, useState } from "react";
 
 export default function Area(props) {
-  const [resize, setResize] = useState("none");
-  const [initCoords, setInitCoords] = useState({
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0,
-    mouseX: 0,
-    mouseY: 0,
-  });
   const [hovered, setHovered] = useState(false);
 
   const handleMouseDown = (e, dir) => {
-    setResize(dir);
+    props.setResize({id: props.areaData.id, dir: dir});
-    props.setPanning(false);
+    props.setInitCoords({
-    setInitCoords({
       x: props.areaData.x,
       y: props.areaData.y,
       width: props.areaData.width,
@@ -25,52 +15,6 @@ export default function Area(props) {
     });
   };
 
-  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") {
-      newWidth = initCoords.width + (e.clientX - initCoords.mouseX);
-      newHeight = initCoords.height + (e.clientY - initCoords.mouseY);
-    } else if (resize === "tl") {
-      newX = initCoords.x + (e.clientX - initCoords.mouseX);
-      newY = initCoords.y + (e.clientY - initCoords.mouseY);
-      newWidth = initCoords.width - (e.clientX - initCoords.mouseX);
-      newHeight = initCoords.height - (e.clientY - initCoords.mouseY);
-    } else if (resize === "tr") {
-      newY = initCoords.y + (e.clientY - initCoords.mouseY);
-      newWidth = initCoords.width + (e.clientX - initCoords.mouseX);
-      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,
-          };
-        }
-        return a;
-      });
-    });
-  };
-
-  const unableResize = () => {
-    setResize("none");
-  };
-
   return (
     <g
       onMouseEnter={() => setHovered(true)}
@@ -82,70 +26,57 @@ export default function Area(props) {
         y={props.areaData.y}
         width={props.areaData.width > 0 ? props.areaData.width : 0}
         height={props.areaData.height > 0 ? props.areaData.height : 0}
-        style={{ cursor: "move" }}
         onMouseDown={props.onMouseDown}
       >
-        <div className="border-2 border-dashed border-blue-600 opacity-70 bg-slate-400 w-fill h-full select-none">
+        <div className="border-2 border-dashed border-blue-600 opacity-70 bg-slate-400 w-fill h-full select-none cursor-move">
           {props.areaData.name}
         </div>
       </foreignObject>
       {hovered && (
         <>
           <rect
-            x={props.areaData.x - 8}
+            x={props.areaData.x - 5}
-            y={props.areaData.y - 8}
+            y={props.areaData.y - 5}
-            width={16}
+            width={10}
-            height={16}
+            height={10}
             fill="lightblue"
             stroke="blue"
             strokeWidth={1}
             cursor="nwse-resize"
             onMouseDown={(e) => handleMouseDown(e, "tl")}
-            onMouseUp={unableResize}
-            onMouseMove={handleMouseMove}
-            onMouseLeave={unableResize}
           />
           <rect
-            x={props.areaData.x + props.areaData.width - 8}
+            x={props.areaData.x + props.areaData.width - 5}
-            y={props.areaData.y - 8}
+            y={props.areaData.y - 5}
-            width={16}
+            width={10}
-            height={16}
+            height={10}
             fill="lightblue"
             stroke="blue"
             strokeWidth={1}
             cursor="nesw-resize"
             onMouseDown={(e) => handleMouseDown(e, "tr")}
-            onMouseUp={unableResize}
-            onMouseMove={handleMouseMove}
-            onMouseLeave={unableResize}
           />
           <rect
-            x={props.areaData.x - 8}
+            x={props.areaData.x - 5}
-            y={props.areaData.y + props.areaData.height - 8}
+            y={props.areaData.y + props.areaData.height - 5}
-            width={16}
+            width={10}
-            height={16}
+            height={10}
             fill="lightblue"
             stroke="blue"
             strokeWidth={1}
             cursor="nesw-resize"
             onMouseDown={(e) => handleMouseDown(e, "bl")}
-            onMouseUp={unableResize}
-            onMouseMove={handleMouseMove}
-            onMouseLeave={unableResize}
           />
           <rect
-            x={props.areaData.x + props.areaData.width - 8}
+            x={props.areaData.x + props.areaData.width - 5}
-            y={props.areaData.y + props.areaData.height - 8}
+            y={props.areaData.y + props.areaData.height - 5}
-            width={16}
+            width={10}
-            height={16}
+            height={10}
             fill="lightblue"
             stroke="blue"
             strokeWidth={1}
             cursor="nwse-resize"
             onMouseDown={(e) => handleMouseDown(e, "br")}
-            onMouseUp={unableResize}
-            onMouseMove={handleMouseMove}
-            onMouseLeave={unableResize}
           />
         </>
       )}

src/components/canvas.jsx

@@ -35,6 +35,15 @@ export default function Canvas(props) {
   });
   const [panning, setPanning] = useState(false);
   const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });
+  const [areaResize, setAreaResize] = useState({ id: -1, dir: "none" });
+  const [initCoords, setInitCoords] = useState({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    mouseX: 0,
+    mouseY: 0,
+  });
   const [cursor, setCursor] = useState("default");
 
   const canvas = useRef(null);
@@ -69,7 +78,11 @@ export default function Canvas(props) {
         endX: e.clientX - offsetX,
         endY: e.clientY - offsetY,
       });
-    } else if (dragging[0] === ObjectType.NONE && panning) {
+    } else if (
+      dragging[0] === ObjectType.NONE &&
+      panning &&
+      areaResize === -1
+    ) {
       const dx = e.clientX - panOffset.x;
       const dy = e.clientY - panOffset.y;
       setPanOffset({ x: e.clientX, y: e.clientY });
@@ -130,7 +143,11 @@ export default function Canvas(props) {
         return r;
       });
       props.setRelationships(updatedRelationShips);
-    } else if (dragging[0] === ObjectType.AREA && dragging[1] >= 0) {
+    } else if (
+      dragging[0] === ObjectType.AREA &&
+      dragging[1] >= 0 &&
+      areaResize.id === -1
+    ) {
       const updatedAreas = props.areas.map((t) => {
         if (t.id === dragging[1]) {
           const updatedArea = {
@@ -143,6 +160,46 @@ export default function Canvas(props) {
         return t;
       });
       props.setAreas(updatedAreas);
+    } else if (areaResize.id !== -1) {
+      if (areaResize.dir === "none") return;
+
+      let newX = initCoords.x;
+      let newY = initCoords.y;
+      let newWidth = initCoords.width;
+      let newHeight = initCoords.height;
+      setPanning(false);
+      if (areaResize.dir === "br") {
+        newWidth = initCoords.width + (e.clientX - initCoords.mouseX);
+        newHeight = initCoords.height + (e.clientY - initCoords.mouseY);
+      } else if (areaResize.dir === "tl") {
+        newX = initCoords.x + (e.clientX - initCoords.mouseX);
+        newY = initCoords.y + (e.clientY - initCoords.mouseY);
+        newWidth = initCoords.width - (e.clientX - initCoords.mouseX);
+        newHeight = initCoords.height - (e.clientY - initCoords.mouseY);
+      } else if (areaResize.dir === "tr") {
+        newY = initCoords.y + (e.clientY - initCoords.mouseY);
+        newWidth = initCoords.width + (e.clientX - initCoords.mouseX);
+        newHeight = initCoords.height - (e.clientY - initCoords.mouseY);
+      } else if (areaResize.dir === "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) =>
+        prev.map((a) => {
+          if (a.id === areaResize.id) {
+            return {
+              ...a,
+              x: newX,
+              y: newY,
+              width: newWidth,
+              height: newHeight,
+            };
+          }
+          return a;
+        })
+      );
     }
   };
 
@@ -158,6 +215,15 @@ export default function Canvas(props) {
     setCursor("default");
     if (linking) handleLinking();
     setLinking(false);
+    setAreaResize({ id: -1, dir: "none" });
+    setInitCoords({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      mouseX: 0,
+      mouseY: 0,
+    });
   };
 
   const handleGripField = (id) => {
@@ -279,7 +345,10 @@ export default function Canvas(props) {
               key={a.id}
               areaData={a}
               onMouseDown={(e) => handleMouseDownRect(e, a.id, ObjectType.AREA)}
-              setPanning={setPanning}
+              resize={areaResize}
+              setResize={setAreaResize}
+              initCoords={initCoords}
+              setInitCoords={setInitCoords}
               setAreas={props.setAreas}
             ></Area>
           ))}