Vps 49/fix zooming issue

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;

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>

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":

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,19 @@ import useStyles from "./components.styles";
  *    component={component}
  * />
  */
-export default function ButtonComponent({ id, onClick, component }) {
+export default function ButtonComponent({ id, onClick, component, zoomLevel }) {
   const styles = useStyles(component);
-
   return (
     <Button
-      style={{ zIndex: component?.zPosition || 0 }}
-      className={`btn ${component.variant} ${component.colour} ${styles.defaultComponentStyling}`}
+      style={{
+        zIndex: component?.zPosition || 0,
+        width: `${component.width * zoomLevel}%`,
+        height: `${component.height * zoomLevel}%`,
+      }}
+      className={
+        `btn ${component.variant} ${component.colour} ${styles.defaultComponentStyling}` +
+        (component?.hover ? ` ${styles.hover}` : " ")
+      }
       color="default"
       id={id}
       variant={component.variant}

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);
@@ -23,11 +29,15 @@ export default function FirebaseImageComponent({ id, onClick, component }) {
     }
   };
 
+  useEffect(() => {
+    setSize();
+  }, [zoomLevel]);
+
   return (
     <Image
       id={id}
       src={component.url}
-      imageStyle={imageStyles(component)}
+      imageStyle={imageStyles(component, zoomLevel)}
       style={{
         ...imageContainerStyles(),
         zIndex: component?.zPosition || 0,

frontend/src/features/authoring/components/TextComponent.jsx

@@ -14,7 +14,7 @@ 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 context = useContext(AuthoringToolContext);
@@ -26,7 +26,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: `${component.width * zoomLevel}%`,
+        height: `${component.height * zoomLevel}%`,
+      }}
     >
       {component.text}
     </Typography>

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}%`,
   };

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";
 
@@ -16,6 +16,21 @@ 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 / initialZoomLevel);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
 
   const handleResetClick = () => {
     setIsModalOpen(true);
@@ -75,7 +90,13 @@ export default function PlayScenarioCanvas({
             break;
         }
 
-        return componentResolver(component, index, action);
+        return componentResolver(
+          component,
+          index,
+          action,
+          zoomLevel,
+          initialZoomLevel
+        );
       })}
       <ResetConfirmationModal
         isOpen={isModalOpen}

frontend/src/features/playScenario/componentResolver.jsx

@@ -15,9 +15,19 @@ 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
     case "BUTTON":