fix: visual fixes on load, viewport position enhancement and dropdown close logic (#207)

# Pull Request Overview
This pull request initially aimed to address a bug where the layer did
not update correctly on load. The actual fix turned out to be quite
simple—we just needed to set the current layer value explicitly in the
load function. This step is essential because, although the canvas
defaulted to the "link" layer, both the right sidebar and the layer
dropdown retained the previous layer state.

Rather than forcing all components to switch to the "link" layer,
updating the graph's layer alone is a cleaner solution. It also
preserves the user's original settings, which might be more relevant
depending on the context. We can discuss whether this or a more
aggressive sync approach is preferable.

## Viewport Save/Load Improvements
Some inconsistencies the team encountered when saving and loading the
viewport's zoom level and position were also tackled. The updated logic
now performs more thorough validation of the position values and handles
edge cases more gracefully. In addition, logs have been added to help
debug if similar issues arise in the future.

## UI Enhancement: Dropdown Behavior
Lastly, the Dropdown component has been updated to close automatically
when the user touches or drags outside of the options box. Thanks to the
recent refactor of the visual structure, this improvement was
straightforward to implement—and surprisingly satisfying!

closes #197

Author: V-SANT

src/graphics/basic_components/dropdown.ts

@@ -35,7 +35,17 @@ export class Dropdown {
         CSS_CLASSES.OPTIONS_CONTAINER_NOT_PUSH,
       );
     }
+
     this.initializeDropdown();
+
+    // Handle all outside interactions to close the dropdown
+    ["click", "dragstart", "touchstart", "tap"].forEach((eventType) => {
+      document.addEventListener(eventType, (event) => {
+        if (!this.container.contains(event.target as Node)) {
+          this.close();
+        }
+      });
+    });
   }
 
   private initializeDropdown(): void {
@@ -136,6 +146,10 @@ export class Dropdown {
     this.optionsContainer.classList.remove(CSS_CLASSES.SHOW); // Ensure the dropdown is closed
   }
 
+  private close(): void {
+    this.optionsContainer.classList.remove(CSS_CLASSES.SHOW);
+  }
+
   // Public method to render the dropdown
   toHTML(): HTMLElement {
     return this.container;

src/graphics/viewport.ts

@@ -78,15 +78,35 @@ export class Viewport extends pixi_viewport.Viewport {
     const savedZoom = localStorage.getItem("viewportZoom");
 
     if (savedPosition) {
-      const { x, y } = JSON.parse(savedPosition);
-      this.position.set(x, y);
+      try {
+        const { x, y } = JSON.parse(savedPosition);
+        if (typeof x === "number" && typeof y === "number") {
+          this.position.set(x, y);
+        } else {
+          console.warn("Invalid saved position, resetting to center.");
+          this.setCenter();
+        }
+      } catch (e) {
+        console.error("Error parsing viewportPosition:", e);
+        this.setCenter();
+      }
     } else {
-      this.position.set(WORLD_WIDTH / 2, WORLD_HEIGHT / 2);
+      this.setCenter();
     }
 
     if (savedZoom) {
-      const { x, y } = JSON.parse(savedZoom);
-      this.scale.set(x, y);
+      try {
+        const { x, y } = JSON.parse(savedZoom);
+        if (typeof x === "number" && typeof y === "number") {
+          this.scale.set(x, y);
+        } else {
+          console.warn("Invalid saved zoom, resetting to 1.");
+          this.scale.set(1);
+        }
+      } catch (e) {
+        console.error("Error parsing viewportZoom:", e);
+        this.scale.set(1);
+      }
     } else {
       this.scale.set(1);
     }
@@ -95,6 +115,8 @@ export class Viewport extends pixi_viewport.Viewport {
   clear() {
     this.removeChildren();
     this.addChild(new Background());
+    this.setCenter();
+    this.scale.set(1);
     localStorage.removeItem("viewportPosition");
     localStorage.removeItem("viewportZoom");
   }

src/types/viewportManager.ts

@@ -185,7 +185,7 @@ export function loadFromFile(ctx: GlobalContext) {
         showError(ALERT_MESSAGES.FAILED_TO_LOAD_GRAPH);
         return;
       }
-      ctx.load(dataGraph);
+      ctx.load(dataGraph, ctx.getCurrentLayer());
       ctx.centerView();
 
       showSuccess(ALERT_MESSAGES.GRAPH_LOADED_SUCCESSFULLY);

src/utils/constants/alert_constants.ts

@@ -15,6 +15,6 @@ export const ALERT_MESSAGES = {
   ROUTING_TABLE_REGENERATED: "Routing table regenerated successfully.",
   LAYER_CHANGED:
     "Layer changed successfully. Programs that do not belong to the selected layer will be hidden but will continue running.",
-  GRAPH_LOADED_SUCCESSFULLY: "network loaded successfully.",
+  GRAPH_LOADED_SUCCESSFULLY: "Network loaded successfully.",
   FAILED_TO_LOAD_GRAPH: "Failed to load the network.",
 };