i wanna cry

src/components/area.jsx

@@ -1,10 +1,103 @@
 import { React, useState } from "react";
 
 export default function Area(props) {
-  const [size, setSize] = useState({
+  const [resize, setResize] = useState("none");
-    width: props.areaData.width,
+  const [initialMouseX, setInitialMouseX] = useState(0);
-    height: props.areaData.height,
+  const [initialMouseY, setInitialMouseY] = useState(0);
-  });
+  const [initialWidth, setInitialWidth] = useState(0);
+  const [initialHeight, setInitialHeight] = useState(0);
+  const [initialX, setInitialX] = useState(0);
+  const [initialY, setInitialY] = useState(0);
+
+  const handleMouseDown = (e, dir) => {
+    setResize(dir);
+    props.setPanning(false);
+    setInitialMouseX(e.clientX);
+    setInitialMouseY(e.clientY);
+    setInitialWidth(props.areaData.width);
+    setInitialHeight(props.areaData.height);
+    setInitialX(props.areaData.x);
+    setInitialY(props.areaData.y);
+  };
+
+  const handleMouseMove = (e) => {
+    props.setPanning(false);
+    if (resize === "br") {
+      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,
+              width: newWidth,
+              height: newHeight,
+            };
+          }
+          return a;
+        });
+      });
+    } else if (resize === "tl") {
+      const newX = initialX + (e.clientX - initialMouseX);
+      const newY = initialY + (e.clientY - initialMouseY);
+      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,
+              y: newY,
+              width: newWidth,
+              height: newHeight,
+            };
+          }
+          return a;
+        });
+      });
+    } else if (resize === "tr") {
+      const newY = initialY + (e.clientY - initialMouseY);
+      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,
+              y: newY,
+              width: newWidth,
+              height: newHeight,
+            };
+          }
+          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 = () => {
+    setResize("none");
+  };
 
   return (
     <g>
@@ -12,35 +105,78 @@ export default function Area(props) {
         key={props.areaData.id}
         x={props.areaData.x}
         y={props.areaData.y}
-        width={size.width}
+        width={props.areaData.width}
-        height={size.height}
+        height={props.areaData.height}
         style={{ cursor: "move" }}
         onMouseDown={props.onMouseDown}
       >
-        <div className="border-2 border-dashed border-blue-600 opacity-70 bg-slate-400 w-fill h-full">
+        <div className="border-2 border-dashed border-blue-600 opacity-70 bg-slate-400 w-fill h-full select-none">
           {props.areaData.name}
         </div>
       </foreignObject>
-      <circle cx={props.areaData.x} cy={props.areaData.y} r={5} fill="blue" />
+      <rect
-      <circle
+        x={props.areaData.x - 6}
-        cx={props.areaData.x + props.areaData.width}
+        y={props.areaData.y - 6}
-        cy={props.areaData.y}
+        width={32}
-        r={5}
+        height={32}
-        fill="blue"
+        fill="lightblue"
+        stroke="blue"
+        strokeWidth={1}
+        cursor="nwse-resize"
+        onMouseDown={(e) => handleMouseDown(e, "tl")}
+        onMouseUp={handleMouseUp}
+        onMouseMove={handleMouseMove}
+        onMouseLeave={(e) => {
+          setResize("none");
+        }}
       />
-      <circle
+      <rect
-        cx={props.areaData.x}
+        x={props.areaData.x + props.areaData.width - 6}
-        cy={props.areaData.y + props.areaData.height}
+        y={props.areaData.y - 6}
-        r={5}
+        width={32}
-        fill="blue"
+        height={32}
+        fill="lightblue"
+        stroke="blue"
+        strokeWidth={1}
+        cursor="nesw-resize"
+        onMouseDown={(e) => handleMouseDown(e, "tr")}
+        onMouseUp={handleMouseUp}
+        onMouseMove={handleMouseMove}
+        onMouseLeave={(e) => {
+          setResize("none");
+        }}
       />
-      <circle
+      <rect
-        cx={props.areaData.x + size.width}
+        x={props.areaData.x - 6}
-        cy={props.areaData.y + size.height}
+        y={props.areaData.y + props.areaData.height - 6}
-        r={5}
+        width={32}
-        fill="blue"
+        height={32}
-        cursor="pointer"
+        fill="lightblue"
-        onMouseDown={(e) => {}}
+        stroke="blue"
+        strokeWidth={1}
+        cursor="nesw-resize"
+        onMouseDown={(e) => handleMouseDown(e, "bl")}
+        onMouseUp={handleMouseUp}
+        onMouseMove={handleMouseMove}
+        onMouseLeave={(e) => {
+          setResize("none");
+        }}
+      />
+      <rect
+        x={props.areaData.x + props.areaData.width - 6}
+        y={props.areaData.y + props.areaData.height - 6}
+        width={32}
+        height={32}
+        fill="lightblue"
+        stroke="blue"
+        strokeWidth={1}
+        cursor="nwse-resize"
+        onMouseDown={(e) => handleMouseDown(e, "br")}
+        onMouseUp={handleMouseUp}
+        onMouseMove={handleMouseMove}
+        onMouseLeave={(e) => {
+          setResize("none");
+        }}
       />
     </g>
   );

src/components/canvas.jsx

@@ -283,6 +283,8 @@ export default function Canvas(props) {
               key={a.id}
               areaData={a}
               onMouseDown={(e) => handleMouseDownRect(e, a.id, ObjectType.AREA)}
+              setPanning={setPanning}
+              setAreas={props.setAreas}
             ></Area>
           ))}
           {props.tables.map((table, i) => (