From 674f541bd177884f34469f71f3c7b9009bfa911f Mon Sep 17 00:00:00 2001
From: xche529 <xche529@aucklanduni.ac.nz>
Date: Mon, 30 Sep 2024 13:30:44 +1300
Subject: [PATCH 1/5] fix: fix button zooming

---
 .../src/features/authoring/Canvas/Canvas.jsx  |  2 +-
 .../authoring/Canvas/componentResolver.jsx    |  4 ++-
 .../authoring/components/ButtonComponent.jsx  | 33 +++++++++++++++++--
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/frontend/src/features/authoring/Canvas/Canvas.jsx b/frontend/src/features/authoring/Canvas/Canvas.jsx
index 6d0224b1..264feb83 100644
--- a/frontend/src/features/authoring/Canvas/Canvas.jsx
+++ b/frontend/src/features/authoring/Canvas/Canvas.jsx
@@ -108,7 +108,7 @@ export default function Canvas() {
       <div className={styles.canvasContainer}>
         <div id="canvas" className={styles.canvas} onClick={clearElement}>
           {currentScene?.components?.map((component, index) =>
-            componentResolver(component, index, selectElement)
+            componentResolver(component, index, selectElement, true)
           )}
         </div>
       </div>
diff --git a/frontend/src/features/authoring/Canvas/componentResolver.jsx b/frontend/src/features/authoring/Canvas/componentResolver.jsx
index 0515821b..0158e90d 100644
--- a/frontend/src/features/authoring/Canvas/componentResolver.jsx
+++ b/frontend/src/features/authoring/Canvas/componentResolver.jsx
@@ -14,7 +14,7 @@ import TextComponent from "../components/TextComponent";
  *   componentResolver(component, index, selectElement)
  * )}
  */
-export default function componentResolver(component, index, onClick) {
+export default function componentResolver(component, index, onClick, isEditing) {
   switch (component.type) {
     // ADD NEW COMPONENT TYPES HERE
     case "BUTTON":
@@ -24,6 +24,7 @@ export default function componentResolver(component, index, onClick) {
           id={index}
           onClick={onClick}
           component={component}
+          isEditing={isEditing}
         />
       );
     case "RESET_BUTTON":
@@ -33,6 +34,7 @@ export default function componentResolver(component, index, onClick) {
           id={index}
           onClick={onClick}
           component={component}
+          isEditing={isEditing}
         />
       );
     case "SPEECHTEXT":
diff --git a/frontend/src/features/authoring/components/ButtonComponent.jsx b/frontend/src/features/authoring/components/ButtonComponent.jsx
index 31e5e0e9..1dd1ffc6 100644
--- a/frontend/src/features/authoring/components/ButtonComponent.jsx
+++ b/frontend/src/features/authoring/components/ButtonComponent.jsx
@@ -1,4 +1,5 @@
 import { Button } from "@material-ui/core";
+import React, { useEffect, useState } from "react";
 import useStyles from "./components.styles";
 
 /**
@@ -11,13 +12,39 @@ import useStyles from "./components.styles";
  *    component={component}
  * />
  */
-export default function ButtonComponent({ id, onClick, component }) {
+export default function ButtonComponent({ id, onClick, component, isEditing }) {
   const styles = useStyles(component);
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const userDefinedWidth = component.width;
+  const userDefinedHeight = component.height;
 
+  useEffect(() => {
+    const handleResize = () => {
+      if (isEditing) {
+        setZoomLevel(1);
+        return;
+      }
+      setZoomLevel(window.devicePixelRatio);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  console.log(`Zoom level: ${zoomLevel}`);
   return (
     <Button
-      style={{ zIndex: component?.zPosition || 0 }}
-      className={`btn ${component.variant} ${component.colour} ${styles.defaultComponentStyling}`}
+      style={{
+        zIndex: component?.zPosition || 0,
+        width: `${userDefinedWidth * zoomLevel}%`,
+        height: `${userDefinedHeight * zoomLevel}%`,
+      }}
+      className={
+        `btn ${component.variant} ${component.colour} ${styles.defaultComponentStyling}` +
+        (component?.hover ? ` ${styles.hover}` : " ")
+      }
       color="default"
       id={id}
       variant={component.variant}

From 794bb6f2e2e882bd32853001fd4aa1c102d38ec5 Mon Sep 17 00:00:00 2001
From: xche529 <xche529@aucklanduni.ac.nz>
Date: Mon, 30 Sep 2024 13:42:43 +1300
Subject: [PATCH 2/5] fix: fix text box zooming

---
 .../authoring/Canvas/componentResolver.jsx    |  4 +---
 .../authoring/components/ButtonComponent.jsx  | 19 +------------------
 .../authoring/components/TextComponent.jsx    | 10 ++++++++--
 .../playScenario/PlayScenarioCanvas.jsx       | 18 ++++++++++++++++--
 .../playScenario/componentResolver.jsx        |  9 +++++++--
 5 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/frontend/src/features/authoring/Canvas/componentResolver.jsx b/frontend/src/features/authoring/Canvas/componentResolver.jsx
index 0158e90d..0515821b 100644
--- a/frontend/src/features/authoring/Canvas/componentResolver.jsx
+++ b/frontend/src/features/authoring/Canvas/componentResolver.jsx
@@ -14,7 +14,7 @@ import TextComponent from "../components/TextComponent";
  *   componentResolver(component, index, selectElement)
  * )}
  */
-export default function componentResolver(component, index, onClick, isEditing) {
+export default function componentResolver(component, index, onClick) {
   switch (component.type) {
     // ADD NEW COMPONENT TYPES HERE
     case "BUTTON":
@@ -24,7 +24,6 @@ export default function componentResolver(component, index, onClick, isEditing)
           id={index}
           onClick={onClick}
           component={component}
-          isEditing={isEditing}
         />
       );
     case "RESET_BUTTON":
@@ -34,7 +33,6 @@ export default function componentResolver(component, index, onClick, isEditing)
           id={index}
           onClick={onClick}
           component={component}
-          isEditing={isEditing}
         />
       );
     case "SPEECHTEXT":
diff --git a/frontend/src/features/authoring/components/ButtonComponent.jsx b/frontend/src/features/authoring/components/ButtonComponent.jsx
index 1dd1ffc6..7fecdcab 100644
--- a/frontend/src/features/authoring/components/ButtonComponent.jsx
+++ b/frontend/src/features/authoring/components/ButtonComponent.jsx
@@ -12,28 +12,11 @@ import useStyles from "./components.styles";
  *    component={component}
  * />
  */
-export default function ButtonComponent({ id, onClick, component, isEditing }) {
+export default function ButtonComponent({ id, onClick, component, zoomLevel }) {
   const styles = useStyles(component);
-  const [zoomLevel, setZoomLevel] = useState(1);
   const userDefinedWidth = component.width;
   const userDefinedHeight = component.height;
 
-  useEffect(() => {
-    const handleResize = () => {
-      if (isEditing) {
-        setZoomLevel(1);
-        return;
-      }
-      setZoomLevel(window.devicePixelRatio);
-    };
-
-    window.addEventListener("resize", handleResize);
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-  console.log(`Zoom level: ${zoomLevel}`);
   return (
     <Button
       style={{
diff --git a/frontend/src/features/authoring/components/TextComponent.jsx b/frontend/src/features/authoring/components/TextComponent.jsx
index 3c6215fe..78c2d45b 100644
--- a/frontend/src/features/authoring/components/TextComponent.jsx
+++ b/frontend/src/features/authoring/components/TextComponent.jsx
@@ -14,8 +14,10 @@ import useStyles from "./components.styles";
  *    onDoubleClick={handleDoubleClick}
  * />
  */
-export default function TextComponent({ id, onClick, component }) {
+export default function TextComponent({ id, onClick, component, zoomLevel }) {
   const styles = useStyles(component);
+  const userDefinedWidth = component.width;
+  const userDefinedHeight = component.height;
 
   const context = useContext(AuthoringToolContext);
   const textRef = context?.propertiesRefs?.text;
@@ -26,7 +28,11 @@ export default function TextComponent({ id, onClick, component }) {
       id={id}
       onClick={onClick}
       onDoubleClick={() => textRef?.current?.focus()}
-      style={{ zIndex: component?.zPosition || "0" }}
+      style={{
+        zIndex: component?.zPosition || "0",
+        width: `${userDefinedWidth * zoomLevel}%`,
+        height: `${userDefinedHeight * zoomLevel}%`,
+      }}
     >
       {component.text}
     </Typography>
diff --git a/frontend/src/features/playScenario/PlayScenarioCanvas.jsx b/frontend/src/features/playScenario/PlayScenarioCanvas.jsx
index 6f172ad6..6520cada 100644
--- a/frontend/src/features/playScenario/PlayScenarioCanvas.jsx
+++ b/frontend/src/features/playScenario/PlayScenarioCanvas.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import ResetConfirmationModal from "./modals/ResetConfirmationModal";
 import componentResolver from "./componentResolver";
 
@@ -17,6 +17,20 @@ export default function PlayScenarioCanvas({
 }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
+  const [zoomLevel, setZoomLevel] = useState(1);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setZoomLevel(window.devicePixelRatio);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   const handleResetClick = () => {
     setIsModalOpen(true);
   };
@@ -75,7 +89,7 @@ export default function PlayScenarioCanvas({
             break;
         }
 
-        return componentResolver(component, index, action);
+        return componentResolver(component, index, action, zoomLevel);
       })}
       <ResetConfirmationModal
         isOpen={isModalOpen}
diff --git a/frontend/src/features/playScenario/componentResolver.jsx b/frontend/src/features/playScenario/componentResolver.jsx
index f57ece93..1ff41fea 100644
--- a/frontend/src/features/playScenario/componentResolver.jsx
+++ b/frontend/src/features/playScenario/componentResolver.jsx
@@ -15,8 +15,13 @@ import AudioComponent from "./components/AudioComponent";
  *   componentResolver(component, index, selectElement)
  * )}
  */
-export default function componentResolver(component, index, onClick) {
-  const props = { key: component.id, id: index, onClick, component };
+export default function componentResolver(
+  component,
+  index,
+  onClick,
+  zoomLevel
+) {
+  const props = { key: component.id, id: index, onClick, component, zoomLevel };
 
   switch (component.type) {
     // ADD NEW COMPONENT TYPES HERE

From bc9e6d730b49aff787cb554131d078dec2110139 Mon Sep 17 00:00:00 2001
From: xche529 <xche529@aucklanduni.ac.nz>
Date: Mon, 30 Sep 2024 14:18:44 +1300
Subject: [PATCH 3/5] fix: fix Firebase image zooming

---
 .../components/FirebaseImageComponent.jsx         | 15 ++++++++++++++-
 .../authoring/components/components.styles.js     | 11 ++++++++---
 .../features/playScenario/componentResolver.jsx   |  1 +
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/frontend/src/features/authoring/components/FirebaseImageComponent.jsx b/frontend/src/features/authoring/components/FirebaseImageComponent.jsx
index 1e902aeb..5107075b 100644
--- a/frontend/src/features/authoring/components/FirebaseImageComponent.jsx
+++ b/frontend/src/features/authoring/components/FirebaseImageComponent.jsx
@@ -1,6 +1,7 @@
 /* eslint-disable no-param-reassign */
 import Image from "material-ui-image";
 import { imageContainerStyles, imageStyles } from "./components.styles";
+import { useEffect } from "react";
 
 /**
  * This component represents a firebase image scene component
@@ -12,7 +13,12 @@ import { imageContainerStyles, imageStyles } from "./components.styles";
  *    component={component}
  * />
  */
-export default function FirebaseImageComponent({ id, onClick, component }) {
+export default function FirebaseImageComponent({
+  id,
+  onClick,
+  component,
+  zoomLevel,
+}) {
   const setSize = () => {
     // The below is used to recalculate the height and width of an image. Especially when it is intiallised using auto
     const imageElement = document.getElementById(id);
@@ -21,8 +27,15 @@ export default function FirebaseImageComponent({ id, onClick, component }) {
       component.width = (imageElement.offsetWidth / canvas.width) * 100;
       component.height = (imageElement.offsetHeight / canvas.height) * 100;
     }
+
+    console.log("width", component.width);
+    console.log("height", component.height);
   };
 
+  useEffect(() => {
+    setSize();
+  }, [zoomLevel]);
+
   return (
     <Image
       id={id}
diff --git a/frontend/src/features/authoring/components/components.styles.js b/frontend/src/features/authoring/components/components.styles.js
index 261b47d3..acb04c0e 100644
--- a/frontend/src/features/authoring/components/components.styles.js
+++ b/frontend/src/features/authoring/components/components.styles.js
@@ -43,13 +43,18 @@ export default function useStyles(component) {
   })();
 }
 
-export function imageStyles(component) {
+export function imageStyles(component, zoomLevel) {
   return {
     maxHeight: "100%",
     maxWidth: "100%",
-    width: component.width === "auto" ? component.width : `${component.width}%`,
+    width:
+      component.width === "auto"
+        ? component.width
+        : `${component.width * zoomLevel}%`,
     height:
-      component.height === "auto" ? component.height : `${component.height}%`,
+      component.height === "auto"
+        ? component.height
+        : `${component.height * zoomLevel}%`,
     top: `${component.top}%`,
     left: `${component.left}%`,
   };
diff --git a/frontend/src/features/playScenario/componentResolver.jsx b/frontend/src/features/playScenario/componentResolver.jsx
index 1ff41fea..4d5c2f76 100644
--- a/frontend/src/features/playScenario/componentResolver.jsx
+++ b/frontend/src/features/playScenario/componentResolver.jsx
@@ -22,6 +22,7 @@ export default function componentResolver(
   zoomLevel
 ) {
   const props = { key: component.id, id: index, onClick, component, zoomLevel };
+  console.log("zoomLevel", zoomLevel);
 
   switch (component.type) {
     // ADD NEW COMPONENT TYPES HERE

From f4dd2cf158a6d711c66cde4d737c166bfa45e18f Mon Sep 17 00:00:00 2001
From: xche529 <xche529@aucklanduni.ac.nz>
Date: Mon, 30 Sep 2024 14:40:38 +1300
Subject: [PATCH 4/5] fix: fix login page zooming

---
 frontend/src/components/SideBar/SideBar.module.scss         | 3 +++
 frontend/src/features/login/LoginPage/LoginPage.module.scss | 2 ++
 2 files changed, 5 insertions(+)

diff --git a/frontend/src/components/SideBar/SideBar.module.scss b/frontend/src/components/SideBar/SideBar.module.scss
index 82cd85be..0befe0b0 100644
--- a/frontend/src/components/SideBar/SideBar.module.scss
+++ b/frontend/src/components/SideBar/SideBar.module.scss
@@ -7,6 +7,9 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  overflow-y: auto; 
+  max-height: 100vh;
+  scrollbar-width: none; 
 
   .logo {
     margin: 10px;
diff --git a/frontend/src/features/login/LoginPage/LoginPage.module.scss b/frontend/src/features/login/LoginPage/LoginPage.module.scss
index 27450d42..2bd16ef3 100644
--- a/frontend/src/features/login/LoginPage/LoginPage.module.scss
+++ b/frontend/src/features/login/LoginPage/LoginPage.module.scss
@@ -21,5 +21,7 @@
     margin-bottom: 1rem;
     padding: 1rem 6rem;
     text-align: center;
+    overflow-y: auto; 
+
   }
 }

From c7e22bb32c2e87f62140f3cccc40e6718ec80ae0 Mon Sep 17 00:00:00 2001
From: Tommy Chen <xche529@aucklanduni.ac.nz>
Date: Mon, 30 Sep 2024 16:39:41 +1300
Subject: [PATCH 5/5] fix: fix initial zoom level not one

---
 frontend/src/components/SideBar/SideBar.module.scss |  4 ++--
 .../features/authoring/Canvas/componentResolver.jsx |  4 ++++
 .../authoring/components/ButtonComponent.jsx        |  7 ++-----
 .../authoring/components/FirebaseImageComponent.jsx |  5 +----
 .../features/authoring/components/TextComponent.jsx |  6 ++----
 .../features/login/LoginPage/LoginPage.module.scss  |  3 +--
 .../features/playScenario/PlayScenarioCanvas.jsx    | 13 ++++++++++---
 .../src/features/playScenario/componentResolver.jsx | 10 +++++++---
 8 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/SideBar/SideBar.module.scss b/frontend/src/components/SideBar/SideBar.module.scss
index 0befe0b0..a438a58d 100644
--- a/frontend/src/components/SideBar/SideBar.module.scss
+++ b/frontend/src/components/SideBar/SideBar.module.scss
@@ -7,9 +7,9 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  overflow-y: auto; 
+  overflow-y: auto;
   max-height: 100vh;
-  scrollbar-width: none; 
+  scrollbar-width: none;
 
   .logo {
     margin: 10px;
diff --git a/frontend/src/features/authoring/Canvas/componentResolver.jsx b/frontend/src/features/authoring/Canvas/componentResolver.jsx
index 0515821b..4cd90120 100644
--- a/frontend/src/features/authoring/Canvas/componentResolver.jsx
+++ b/frontend/src/features/authoring/Canvas/componentResolver.jsx
@@ -24,6 +24,7 @@ export default function componentResolver(component, index, onClick) {
           id={index}
           onClick={onClick}
           component={component}
+          zoomLevel={1}
         />
       );
     case "RESET_BUTTON":
@@ -33,6 +34,7 @@ export default function componentResolver(component, index, onClick) {
           id={index}
           onClick={onClick}
           component={component}
+          zoomLevel={1}
         />
       );
     case "SPEECHTEXT":
@@ -51,6 +53,7 @@ export default function componentResolver(component, index, onClick) {
           id={index}
           onClick={onClick}
           component={component}
+          zoomLevel={1}
         />
       );
     case "IMAGE":
@@ -69,6 +72,7 @@ export default function componentResolver(component, index, onClick) {
           id={index}
           onClick={onClick}
           component={component}
+          zoomLevel={1}
         />
       );
     case "FIREBASEAUDIO":
diff --git a/frontend/src/features/authoring/components/ButtonComponent.jsx b/frontend/src/features/authoring/components/ButtonComponent.jsx
index 7fecdcab..0659d176 100644
--- a/frontend/src/features/authoring/components/ButtonComponent.jsx
+++ b/frontend/src/features/authoring/components/ButtonComponent.jsx
@@ -14,15 +14,12 @@ import useStyles from "./components.styles";
  */
 export default function ButtonComponent({ id, onClick, component, zoomLevel }) {
   const styles = useStyles(component);
-  const userDefinedWidth = component.width;
-  const userDefinedHeight = component.height;
-
   return (
     <Button
       style={{
         zIndex: component?.zPosition || 0,
-        width: `${userDefinedWidth * zoomLevel}%`,
-        height: `${userDefinedHeight * zoomLevel}%`,
+        width: `${component.width * zoomLevel}%`,
+        height: `${component.height * zoomLevel}%`,
       }}
       className={
         `btn ${component.variant} ${component.colour} ${styles.defaultComponentStyling}` +
diff --git a/frontend/src/features/authoring/components/FirebaseImageComponent.jsx b/frontend/src/features/authoring/components/FirebaseImageComponent.jsx
index 5107075b..9bf3cfe6 100644
--- a/frontend/src/features/authoring/components/FirebaseImageComponent.jsx
+++ b/frontend/src/features/authoring/components/FirebaseImageComponent.jsx
@@ -27,9 +27,6 @@ export default function FirebaseImageComponent({
       component.width = (imageElement.offsetWidth / canvas.width) * 100;
       component.height = (imageElement.offsetHeight / canvas.height) * 100;
     }
-
-    console.log("width", component.width);
-    console.log("height", component.height);
   };
 
   useEffect(() => {
@@ -40,7 +37,7 @@ export default function FirebaseImageComponent({
     <Image
       id={id}
       src={component.url}
-      imageStyle={imageStyles(component)}
+      imageStyle={imageStyles(component, zoomLevel)}
       style={{
         ...imageContainerStyles(),
         zIndex: component?.zPosition || 0,
diff --git a/frontend/src/features/authoring/components/TextComponent.jsx b/frontend/src/features/authoring/components/TextComponent.jsx
index 78c2d45b..be144b47 100644
--- a/frontend/src/features/authoring/components/TextComponent.jsx
+++ b/frontend/src/features/authoring/components/TextComponent.jsx
@@ -16,8 +16,6 @@ import useStyles from "./components.styles";
  */
 export default function TextComponent({ id, onClick, component, zoomLevel }) {
   const styles = useStyles(component);
-  const userDefinedWidth = component.width;
-  const userDefinedHeight = component.height;
 
   const context = useContext(AuthoringToolContext);
   const textRef = context?.propertiesRefs?.text;
@@ -30,8 +28,8 @@ export default function TextComponent({ id, onClick, component, zoomLevel }) {
       onDoubleClick={() => textRef?.current?.focus()}
       style={{
         zIndex: component?.zPosition || "0",
-        width: `${userDefinedWidth * zoomLevel}%`,
-        height: `${userDefinedHeight * zoomLevel}%`,
+        width: `${component.width * zoomLevel}%`,
+        height: `${component.height * zoomLevel}%`,
       }}
     >
       {component.text}
diff --git a/frontend/src/features/login/LoginPage/LoginPage.module.scss b/frontend/src/features/login/LoginPage/LoginPage.module.scss
index 2bd16ef3..e4243ffd 100644
--- a/frontend/src/features/login/LoginPage/LoginPage.module.scss
+++ b/frontend/src/features/login/LoginPage/LoginPage.module.scss
@@ -21,7 +21,6 @@
     margin-bottom: 1rem;
     padding: 1rem 6rem;
     text-align: center;
-    overflow-y: auto; 
-
+    overflow-y: auto;
   }
 }
diff --git a/frontend/src/features/playScenario/PlayScenarioCanvas.jsx b/frontend/src/features/playScenario/PlayScenarioCanvas.jsx
index 6520cada..32660063 100644
--- a/frontend/src/features/playScenario/PlayScenarioCanvas.jsx
+++ b/frontend/src/features/playScenario/PlayScenarioCanvas.jsx
@@ -16,12 +16,13 @@ export default function PlayScenarioCanvas({
   setRemoveFlags,
 }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
-
   const [zoomLevel, setZoomLevel] = useState(1);
 
+  const initialZoomLevel = window.devicePixelRatio;
+
   useEffect(() => {
     const handleResize = () => {
-      setZoomLevel(window.devicePixelRatio);
+      setZoomLevel(window.devicePixelRatio / initialZoomLevel);
     };
 
     window.addEventListener("resize", handleResize);
@@ -89,7 +90,13 @@ export default function PlayScenarioCanvas({
             break;
         }
 
-        return componentResolver(component, index, action, zoomLevel);
+        return componentResolver(
+          component,
+          index,
+          action,
+          zoomLevel,
+          initialZoomLevel
+        );
       })}
       <ResetConfirmationModal
         isOpen={isModalOpen}
diff --git a/frontend/src/features/playScenario/componentResolver.jsx b/frontend/src/features/playScenario/componentResolver.jsx
index 4d5c2f76..0bb87cb6 100644
--- a/frontend/src/features/playScenario/componentResolver.jsx
+++ b/frontend/src/features/playScenario/componentResolver.jsx
@@ -21,9 +21,13 @@ export default function componentResolver(
   onClick,
   zoomLevel
 ) {
-  const props = { key: component.id, id: index, onClick, component, zoomLevel };
-  console.log("zoomLevel", zoomLevel);
-
+  const props = {
+    key: component.id,
+    id: index,
+    onClick,
+    component,
+    zoomLevel,
+  };
   switch (component.type) {
     // ADD NEW COMPONENT TYPES HERE
     case "BUTTON":