Updated links for devsoc

client/src/components/Features/Features.tsx

@@ -116,7 +116,7 @@ const Features = () => {
             </ListItemIcon>
             <Typography color="textSecondary">
               <Link
-                href="https://github.com/csesoc/Structs.sh"
+                href="https://github.com/devsoc-unsw/structs.sh"
                 color="textSecondary"
                 target="_blank"
               >
@@ -128,7 +128,7 @@ const Features = () => {
         <Box padding="20px">
           <div
             className="github-card"
-            data-github="csesoc/structs.sh"
+            data-github="devsoc-unsw/structs.sh"
             data-width="100%"
             data-theme="medium"
           />

client/src/components/Footer/Footer.tsx

@@ -34,7 +34,7 @@ const Footer = () => {
               Information
             </Typography>
             <Typography color="textSecondary">
-              <Link href="https://github.com/csesoc/Structs.sh" color="inherit">
+              <Link href="https://github.com/devsoc-unsw/structs.sh" color="inherit">
                 GitHub Repository
               </Link>
             </Typography>
@@ -61,25 +61,20 @@ const Footer = () => {
               Social
             </Typography>
             <Typography color="textSecondary">
-              <Link href="https://csesoc.unsw.edu.au/" color="inherit">
-                CSESoc Website
+              <Link href="https://devsoc.app/" color="inherit">
+                DevSoc Website
               </Link>
             </Typography>
             <Typography color="textSecondary">
-              <Link href="https://www.facebook.com/csesoc/" color="inherit">
+              <Link href="https://www.facebook.com/devsocUNSW" color="inherit">
                 Facebook
               </Link>
             </Typography>
-            <Typography color="textSecondary">
-              <Link href="https://www.youtube.com/channel/UC1JHpRrf9j5IKluzXhprUJg" color="inherit">
-                YouTube
-              </Link>
-            </Typography>
           </Grid>
         </Grid>
       </Container>
       <Box textAlign="center" paddingTop={5}>
-        <Typography color="textSecondary">© {new Date().getFullYear()} — CSESoc UNSW</Typography>
+        <Typography color="textSecondary">© {new Date().getFullYear()} — Software Development Society (DevSoc)</Typography>
       </Box>
     </StyledFooter>
   );

client/src/components/Visualiser/VisualiserCanvas.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { PointerEvent, useEffect, useRef, useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
@@ -19,6 +19,10 @@ const ZoomableSvg = styled('svg')(({ scale }) => ({
  */
 const VisualiserCanvas: React.FC = () => {
   const [scale, setScale] = useState(1);
+  const svgRef = useRef(null);
+  const [height, setHeight] = useState(1000);
+  const [width, setWidth] = useState(1000);
+
   const ZOOM_SPEED = 0.05;
   const MAX_SCALE = 2;
   const MIN_SCALE = 0.5;
@@ -30,15 +34,83 @@ const VisualiserCanvas: React.FC = () => {
     }
   };
 
+  const [isPointerDown, setIsPointerDown] = useState(false);
+
+  const [pointerOrigin, setPointerOrigin] = useState({
+    x: 0,
+    y: 0,
+  });
+
+  const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    setIsPointerDown(true);
+
+    setPointerOrigin({
+      x: event.clientX,
+      y: event.clientY,
+    });
+  };
+
+  const [viewBox, setViewBox] = useState({
+    x: 0,
+    y: 0,
+  });
+
+  const [newViewBox, setNewViewBox] = useState({
+    x: 0,
+    y: 0,
+  });
+
+  const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {
+    if (!isPointerDown) {
+      return;
+    }
+
+    event.preventDefault();
+
+    // Ensure x is between -width and width and y is between -height and height
+    setNewViewBox({
+      x: Math.min(width, Math.max(-width, viewBox.x - (event.clientX - pointerOrigin.x))),
+      y: Math.min(height, Math.max(-height, viewBox.y - (event.clientY - pointerOrigin.y))),
+    });
+  };
+
+  const handlePointerUp = () => {
+    setIsPointerDown(false);
+
+    setViewBox({
+      x: newViewBox.x,
+      y: newViewBox.y,
+    });
+  };
+
+  useEffect(() => {
+    setHeight(svgRef.current.clientHeight);
+    setWidth(svgRef.current.clientWidth);
+    setViewBox((prevViewBox) => ({
+      ...prevViewBox,
+      height,
+      width,
+    }));
+  }, []);
+
   return (
     <Box
       onWheel={onScroll}
       id="visualiser-container"
       margin="auto"
       height="100vh"
       width={window.screen.width}
+      onPointerDown={handlePointerDown}
+      onPointerUp={handlePointerUp}
+      onPointerMove={handlePointerMove}
+      onPointerLeave={handlePointerUp}
     >
-      <ZoomableSvg onWheel={onScroll} id="visualiser-canvas" scale={scale} />
+      <ZoomableSvg
+        ref={svgRef}
+        id="visualiser-canvas"
+        scale={scale}
+        viewBox={`${newViewBox.x} ${newViewBox.y} ${width} ${height}`}
+      />
     </Box>
   );
 };