From 00ca15cd652bee306460d3a944ee1b70aaf01b61 Mon Sep 17 00:00:00 2001
From: edward <83894732+jedwed@users.noreply.github.com>
Date: Sat, 16 Sep 2023 15:58:53 +1000
Subject: [PATCH 1/2] Feature/visualiser/panning (#522)

* Panning complete, need to adjust viewBox to have the correct height and width

* Panning pointer events handled by visualiser container rather than SVG

* Remove commented out console.log statements in VisualiserCanvas

* import React to fix eslint error react/react-in-jsx-scope

* Limit x and y of viewbox to prevent infinite panning

* Add onPointerLeave event listener to stop panning if mouse exits visualiser container
---
 .../Visualiser/VisualiserCanvas.tsx           | 76 ++++++++++++++++++-
 1 file changed, 74 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Visualiser/VisualiserCanvas.tsx b/client/src/components/Visualiser/VisualiserCanvas.tsx
index 110ce83ee..f7367023d 100644
--- a/client/src/components/Visualiser/VisualiserCanvas.tsx
+++ b/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,6 +34,65 @@ 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}
@@ -37,8 +100,17 @@ const VisualiserCanvas: React.FC = () => {
       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>
   );
 };

From e5d8c5a4241b980e9e76e5b6569f3c0bcd8077c5 Mon Sep 17 00:00:00 2001
From: Shubh <shubh.shah@student.unsw.edu.au>
Date: Fri, 26 Jan 2024 02:26:33 +1100
Subject: [PATCH 2/2] updated links for devsoc

---
 client/src/components/Features/Features.tsx |  4 ++--
 client/src/components/Footer/Footer.tsx     | 15 +++++----------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Features/Features.tsx b/client/src/components/Features/Features.tsx
index 0e1d3c5c1..4643423b8 100644
--- a/client/src/components/Features/Features.tsx
+++ b/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"
           />
diff --git a/client/src/components/Footer/Footer.tsx b/client/src/components/Footer/Footer.tsx
index d0ffd9430..32e3854b8 100644
--- a/client/src/components/Footer/Footer.tsx
+++ b/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>
   );