Refactor/UI responsive (#132)

This PR improves the responsiveness of the app to ensure a seamless
experience across different screen sizes.

Author: pgallino

src/index.ejs

@@ -12,35 +12,47 @@
       <button id="print-button" class="load-button" title="Print">Print</button>
       <div id="app-title">GEduNet</div>
     </div>
+
     <div id="bottom-screen" class="row container">
       <div id="left-bar" class="left-bar"></div>
+
       <div class="canvas-container">
-        <canvas id="canvas"></canvas>
-        <button id="pause-button" class="pause-button" title="Pause"></button>
-        <i id="undo-button" class="undo-button" title="Undo"></i>
-        <i id="redo-button" class="redo-button" title="Redo"></i>
-        <div class="wheel-container">
-          <div class="wheel-label">Speed</div>
-          <div class="circular-slider">
-            <input
-              type="range"
-              id="speed-wheel"
-              min="0.5"
-              max="4"
-              step="0.1"
-              value="1"
-            />
+        <div id="canvas-wrapper">
+          <canvas id="canvas"></canvas>
+
+          <!-- Contenedor de controles en la izquierda -->
+          <div id="left-controls">
+            <button id="pause-button" class="pause-button" title="Pause"></button>
+            <div class="undo-redo-container">
+              <i id="undo-button" class="undo-button" title="Undo"></i>
+              <i id="redo-button" class="redo-button" title="Redo"></i>
+            </div>
+          </div>
+
+          <!-- Contenedor de controles en la derecha -->
+          <div id="right-controls">
+            <div class="wheel-container">
+              <div class="wheel-label">Speed</div>
+              <div class="circular-slider">
+                <input type="range" id="speed-wheel" min="0.5" max="4" step="0.1" value="1" />
+              </div>
+              <div class="value-display">1x</div>
+            </div>
+
+            <div class="layer-container">
+              <select id="layer-select" class="dropdown-menu">
+                <option value="application">App Layer</option>
+                <option value="transport">Transport Layer</option>
+                <option value="network">Network Layer</option>
+                <option value="link">Link Layer</option>
+              </select>
+            </div>
           </div>
-          <div class="value-display">1x</div>
         </div>
-        <select id="layer-select" class="dropdown-menu">
-          <option value="application">App Layer</option>
-          <option value="transport">Transport Layer</option>
-          <option value="network">Network Layer</option>
-          <option value="link">Link Layer</option>
-        </select>
       </div>
+
       <div id="right-bar" class="right-bar"></div>
     </div>
   </body>
 </html>
+

src/index.ts

@@ -1,5 +1,4 @@
 import { Application, Assets } from "pixi.js";
-
 import {
   deselectElement,
   loadFromFile,
@@ -15,7 +14,6 @@ import { Viewport } from "./graphics/viewport";
 import { GlobalContext } from "./context";
 
 // Assets
-// Doing this includes the file in the build
 import "./styles";
 import RouterSvg from "./assets/router.svg";
 import SwitchSvg from "./assets/switch.svg";
@@ -43,7 +41,11 @@ async function loadAssets(otherPromises: Promise<void>[]) {
 
 // IIFE to avoid errors
 (async () => {
-  // Initialization
+  const canvasPlaceholder = document.getElementById("canvas");
+  const lBar = document.getElementById("left-bar");
+  const rBar = document.getElementById("right-bar");
+  const tBar = document.getElementById("top-bar");
+
   const app = new Application();
   const appInitPromise = app.init({
     width: window.innerWidth,
@@ -52,47 +54,61 @@ async function loadAssets(otherPromises: Promise<void>[]) {
     autoDensity: true,
     antialias: true,
   });
-  await loadAssets([appInitPromise]);
 
-  const canvasPlaceholder = document.getElementById("canvas");
+  await loadAssets([appInitPromise]);
   canvasPlaceholder.replaceWith(app.canvas);
 
-  // Background container initialization
   const viewport = new Viewport(app.renderer.events);
   app.stage.addChild(viewport);
 
-  // Context initialization
   const ctx = new GlobalContext(viewport);
 
-  // Get the layer’s menu
   const layerSelect = document.getElementById(
     "layer-select",
   ) as HTMLSelectElement;
-
   layerSelect.value = layerToName(ctx.getCurrentLayer());
 
-  // Initialize RightBar
   RightBar.getInstance();
 
-  // Left bar logic
   const leftBar = LeftBar.getFrom(document, ctx);
   leftBar.setButtonsByLayer(layerSelect.value);
 
-  const lBar = document.getElementById("left-bar");
-  const rBar = document.getElementById("right-bar");
-  const tBar = document.getElementById("top-bar");
-
-  // Resize logic
   function resize() {
-    const newWidth = window.innerWidth - lBar.offsetWidth - rBar.offsetWidth;
-    const newHeight = window.innerHeight - tBar.offsetHeight;
+    // Check if the layout should be stacked (based on window width)
+    const isStacked = window.innerWidth <= 768;
+
+    // Determine the size of the left bar (width if not stacked, height if stacked)
+    const leftSize = isStacked
+      ? lBar?.offsetHeight || 0
+      : lBar?.offsetWidth || 0;
+
+    // Determine the size of the right bar (width if not stacked, height if stacked)
+    const rightSize = isStacked
+      ? rBar?.offsetHeight || 0
+      : rBar?.offsetWidth || 0;
+
+    // Get the height of the top bar
+    const topHeight = tBar?.offsetHeight || 0;
+
+    // Calculate the new width and height for the canvas
+    // If stacked, reduce height by left and right sizes; otherwise, reduce width
+    let newWidth = window.innerWidth - (isStacked ? 0 : leftSize + rightSize);
+    let newHeight =
+      window.innerHeight - (isStacked ? leftSize + rightSize : topHeight);
+
+    // Ensure minimum dimensions to prevent the canvas from becoming too small
+    newWidth = Math.max(300, newWidth);
+    newHeight = Math.max(200, newHeight);
 
+    // Log the new dimensions for debugging
+    console.log("📏 Resizing canvas to:", newWidth, "x", newHeight);
+
+    // Resize the app renderer and viewport accordingly
     app.renderer.resize(newWidth, newHeight);
     viewport.resize(newWidth, newHeight);
   }
 
   resize();
-
   window.addEventListener("resize", resize);
 
   const newButton = document.getElementById("new-button");
@@ -266,5 +282,21 @@ async function loadAssets(otherPromises: Promise<void>[]) {
   // Initialize with default value
   valueDisplay.textContent = `${(speedWheel as HTMLInputElement).value}x`;
 
-  console.log("initialized!");
+  // Get the element with the ID "canvas-wrapper"
+  const canvasWrapper = document.getElementById("canvas-wrapper");
+
+  // Check if the element exists before adding event listeners
+  if (canvasWrapper) {
+    // When the mouse enters the canvas wrapper, prevent scrolling
+    canvasWrapper.addEventListener("mouseenter", () => {
+      document.body.classList.add("no-scroll");
+    });
+
+    // When the mouse leaves the canvas wrapper, allow scrolling again
+    canvasWrapper.addEventListener("mouseleave", () => {
+      document.body.classList.remove("no-scroll");
+    });
+  }
+
+  console.log("✅ Initialized!");
 })();

src/styles/buttons.css

@@ -1,62 +1,29 @@
-/* canvas-container.css */
-
-/* Styles for the main canvas container */
+/* 🔹 Canvas container */
 .canvas-container {
-  flex: 1; /* Fills the remaining space in the layout */
-  display: flex; /* Uses flexbox to organize content */
-  position: relative; /* Positions elements relative to the container */
-  background-color: #a09f9f; /* Light gray background for the canvas area */
-}
-
-/* Estilo del selector compacto y minimalista */
-#layer-select {
-  position: absolute; /* Permite colocarlo sobre el canvas */
-  top: 10px; /* Separación desde el borde superior */
-  right: 10px; /* Separación desde el borde derecho */
-  width: 160px; /* Reduce el ancho para un diseño más compacto */
-  height: 30px; /* Altura más proporcional */
-  padding: 0 15px; /* Espaciado horizontal más preciso */
-  font-size: 14px; /* Tamaño del texto ajustado */
-  font-family: "Arial", sans-serif; /* Fuente limpia y moderna */
-  color: #ffffff; /* Texto blanco */
-  background-color: #333333; /* Fondo oscuro elegante */
-  border: 1px solid #666666; /* Borde gris */
-  border-radius: 6px; /* Bordes ligeramente redondeados */
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* Sombra suave */
-  cursor: pointer; /* Cursor interactivo */
-  transition: all 0.3s ease; /* Transiciones suaves */
-  appearance: none; /* Oculta el estilo nativo */
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNSIgdmlld0JveD0iMCAwIDEwIDUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMUw1IDRMMTAgMUgxWiIgZmlsbD0iI0NDQ0NDQyIvPjwvc3ZnPg=="); /* Flecha personalizada en gris */
-  background-repeat: no-repeat; /* Evita repetir la flecha */
-  background-position: right 10px center; /* Coloca la flecha a la derecha */
-  background-size: 10px; /* Tamaño proporcional de la flecha */
-}
-
-/* Hover en el selector */
-#layer-select:hover {
-  background-color: #444444; /* Fondo ligeramente más claro */
-  border-color: #888888; /* Gris más claro */
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); /* Sombra más pronunciada */
-}
-
-/* Focus en el selector */
-#layer-select:focus {
-  outline: none; /* Elimina el contorno predeterminado */
-  box-shadow: 0 0 8px 2px rgba(136, 136, 136, 0.5); /* Resplandor gris */
+  flex: 1; /* Allows the canvas to take up all available space */
+  display: flex; /* Uses flexbox for layout */
+  position: relative; /* Enables absolute positioning for child elements */
+  background-color: #a09f9f; /* Neutral background color */
+  overflow: hidden; /* Prevents overflow issues */
+  min-height: 0; /* Ensures flexibility in height */
+  width: 100%; /* Takes full width of the parent container */
 }
 
-/* Opciones del desplegable */
-#layer-select option {
-  font-size: 13px; /* Texto más compacto */
-  color: #ffffff; /* Texto blanco */
-  background-color: #292b2c; /* Fondo oscuro para las opciones */
-  border: none; /* Sin bordes */
-  padding: 5px; /* Espaciado interno ajustado */
-  cursor: pointer; /* Interactividad */
+/* 🔹 Wrapper to ensure the canvas occupies all available space */
+#canvas-wrapper {
+  position: absolute; /* Positions the wrapper to fill the container */
+  top: 0;
+  left: 0;
+  width: 100%; /* Ensures full width */
+  height: 100%; /* Ensures full height */
+  display: flex; /* Uses flexbox for potential child alignment */
 }
 
-/* Hover en las opciones del desplegable */
-#layer-select option:hover {
-  background-color: #444444; /* Fondo más claro en hover */
-  color: #ffffff; /* Mantiene el texto blanco */
+/* 🔹 Canvas occupying the entire space */
+#canvas {
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  display: block; /* Ensures it behaves as a block element */
+  min-width: 1px !important; /* 🔥 Prevents negative values */
+  min-height: 1px !important; /* 🔥 Ensures a valid minimum size */
 }

src/styles/canvas.css

@@ -0,0 +1,57 @@
+/* 🔹 Left controls container */
+#left-controls {
+  display: flex; /* Uses flexbox for layout */
+  align-items: center; /* Vertically aligns elements */
+  gap: 1vw; /* Adds spacing between elements */
+  flex-wrap: nowrap; /* Prevents wrapping into multiple lines */
+  justify-content: flex-start; /* Keeps alignment to the left */
+  position: absolute; /* Positions element absolutely */
+  top: 1.5vh; /* Places it slightly below the top */
+  left: 2vw; /* Positions it from the left */
+}
+
+/* 🔹 Right controls container */
+#right-controls {
+  display: flex; /* Uses flexbox */
+  align-items: center; /* Centers elements vertically */
+  gap: 6vw; /* Adds a large space between elements */
+  flex-wrap: wrap; /* Allows wrapping to prevent overlapping */
+  justify-content: flex-end; /* Aligns elements to the right */
+  max-width: 90vw; /* Ensures controls do not exceed viewport width */
+  position: absolute; /* Positions element absolutely */
+  top: 1.5vh; /* Aligns it near the top */
+  right: 2vw; /* Positions it from the right */
+}
+
+/* 🔹 Adjustments for small screens */
+@media (max-width: 768px) {
+  #left-controls {
+    gap: 1vw; /* Keeps spacing compact */
+    flex-wrap: wrap; /* Allows wrapping if space is limited */
+  }
+
+  /* 🔹 Smaller pause button on small screens */
+  .pause-button {
+    width: 5vh;
+    height: 5vh;
+  }
+
+  /* 🔹 Smaller undo and redo buttons */
+  .undo-button,
+  .redo-button {
+    width: 4.5vh;
+    height: 4.5vh;
+  }
+
+  /* 🔹 Undo/Redo container adjustments */
+  .undo-redo-container {
+    margin-left: 1vw; /* Adds slight left margin */
+    flex-wrap: nowrap; /* Prevents elements from rearranging */
+  }
+
+  /* 🔹 Right controls adjustments */
+  #right-controls {
+    gap: 3vw; /* Reduces spacing between controls */
+    flex-wrap: wrap; /* Allows wrapping for better fit */
+  }
+}