panning :D

src/components/draw_area.jsx

@@ -4,14 +4,18 @@ import Rect from "./rect";
 import Node from "./node";
 
 export default function Canvas(props) {
-  const [dragging, setDragging] = useState(false);
+  const [dragging, setDragging] = useState(-1);
   const [offset, setOffset] = useState({ x: 0, y: 0 });
   const [links, setLinks] = useState([]);
+  const [onRect, setOnRect] = useState(false);
+  const [panning, setPanning] = useState(false);
+  const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });
+  const [cursor, setCursor] = useState("default");
 
   const canvas = useRef(null);
 
-  const handleMouseDown = (event, id) => {
+  const handleMouseDownRect = (e, id) => {
-    const { clientX, clientY } = event;
+    const { clientX, clientY } = e;
     const rectangle = props.rectangles.find((rect) => rect.id === id);
     setOffset({
       x: clientX - rectangle.x,
@@ -20,9 +24,27 @@ export default function Canvas(props) {
     setDragging(id);
   };
 
-  const handleMouseMove = (event) => {
+  const handleMouseMove = (e) => {
-    if (dragging === false) return;
+    if (dragging < 0 && panning) {
-    const { clientX, clientY } = event;
+      const dx = e.clientX - panOffset.x;
+      const dy = e.clientY - panOffset.y;
+      setPanOffset({ x: e.clientX, y: e.clientY });
+
+      const updatedRectangles = props.rectangles.map((rect) => ({
+        ...rect,
+        x: rect.x + dx,
+        y: rect.y + dy,
+      }));
+      props.setRectangles(updatedRectangles);
+
+      const updatedLinks = links.map((link) => ({
+        ...link,
+        x: link.x + dx,
+        y: link.y + dy,
+      }));
+      setLinks(updatedLinks);
+    } else if (dragging >= 0) {
+      const { clientX, clientY } = e;
       const updatedRectangles = props.rectangles.map((rect) => {
         if (rect.id === dragging) {
           const updatedRect = {
@@ -75,10 +97,23 @@ export default function Canvas(props) {
         return rect;
       });
       props.setRectangles(updatedRectangles);
+    }
+  };
+
+  const handleMouseDown = (e) => {
+    if (dragging < 0) {
+      if (!onRect) {
+        setPanning(true);
+        setPanOffset({ x: e.clientX, y: e.clientY });
+        setCursor("grabbing");
+      }
+    }
   };
 
   const handleMouseUp = () => {
-    setDragging(false);
+    setDragging(-1);
+    setPanning(false);
+    setCursor("default");
   };
 
   const [, drop] = useDrop(
@@ -110,14 +145,14 @@ export default function Canvas(props) {
     }),
     [props.rectangles]
   );
-
   return (
     <div ref={drop} className="flex-grow" id="canvas">
       <div ref={canvas} className="w-full h-screen">
         <svg
           onMouseMove={handleMouseMove}
+          onMouseDown={handleMouseDown}
           onMouseUp={handleMouseUp}
-          style={{ width: "100%", height: "100%" }}
+          style={{ width: "100%", height: "100%", cursor: cursor }}
         >
           {props.rectangles.map((rectangle) => (
             <Rect
@@ -128,9 +163,10 @@ export default function Canvas(props) {
               label={rectangle.label}
               width={rectangle.width}
               height={rectangle.height}
+              setOnRect={setOnRect}
               links={links}
               setLinks={setLinks}
-              onMouseDown={(event) => handleMouseDown(event, rectangle.id)}
+              onMouseDown={(e) => handleMouseDownRect(e, rectangle.id)}
             />
           ))}
           {links.map(

src/components/rect.jsx

@@ -18,9 +18,11 @@ const Rect = (props) => {
         onMouseDown={props.onMouseDown}
         onMouseEnter={() => {
           setIsHovered(true);
+          props.setOnRect(true);
         }}
         onMouseLeave={() => {
           setIsHovered(false);
+          props.setOnRect(false);
         }}
       >
         <div