feat: persist layer selection (#95)

This PR makes it so the current layer is persisted between sessions in
local storage.

Author: MegaRedHand

src/context.ts

@@ -17,11 +17,11 @@ export class GlobalContext {
   private saveIntervalId: NodeJS.Timeout | null = null;
   private ipGenerator: IpAddressGenerator;
 
-  initialize(viewport: Viewport, layer: string) {
+  constructor(viewport: Viewport) {
     this.viewport = viewport;
 
     // Sets the initial datagraph and viewgraph
-    loadFromLocalStorage(this, layer);
+    loadFromLocalStorage(this);
 
     this.setIpGenerator();
   }
@@ -52,6 +52,10 @@ export class GlobalContext {
     return this.viewgraph;
   }
 
+  getCurrentLayer() {
+    return this.viewgraph.getLayer();
+  }
+
   getDataGraph() {
     return this.datagraph;
   }

src/index.ts

@@ -3,7 +3,6 @@ import { Application, Assets } from "pixi.js";
 import {
   AddDevice,
   loadFromFile,
-  loadFromLocalStorage,
   saveToFile,
   urManager,
 } from "./types/viewportManager";
@@ -24,6 +23,7 @@ import PlaySvg from "./assets/play-icon.svg";
 import PauseSvg from "./assets/pause-icon.svg";
 import UndoSvg from "./assets/left-curve-arrow.svg";
 import RedoSvg from "./assets/right-curve-arrow.svg";
+import { layerToName } from "./types/devices/utils";
 
 // IIFE to avoid errors
 (async () => {
@@ -42,18 +42,20 @@ import RedoSvg from "./assets/right-curve-arrow.svg";
   await Assets.load(RouterSvg);
   await Assets.load(ComputerSvg);
 
-  // Context initialization
-  const ctx = new GlobalContext();
-
   // 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());
+
   // Left bar logic
   const leftBar = LeftBar.getFrom(document);
   RightBar.getInstance();
@@ -87,9 +89,6 @@ import RedoSvg from "./assets/right-curve-arrow.svg";
 
   setButtonsByLayer(layerSelect.value);
 
-  // Initialize Context
-  ctx.initialize(viewport, layerSelect.value);
-
   // Ticker logic
   // app.ticker.add(() => { });
   const lBar = document.getElementById("left-bar");
@@ -237,8 +236,5 @@ import RedoSvg from "./assets/right-curve-arrow.svg";
     }
   };
 
-  // TODO: load from local storage directly, without first generating a context
-  loadFromLocalStorage(ctx, layerSelect.value);
-
   console.log("initialized!");
 })();

src/types/devices/utils.ts

@@ -29,25 +29,26 @@ export function createDevice(
   }
 }
 
+const layerFromNameMap: Record<string, Layer> = {
+  application: Layer.App,
+  transport: Layer.Transport,
+  network: Layer.Network,
+  link: Layer.Link,
+};
+
+const layerToNameMap = new Map([
+  [Layer.App, "application"],
+  [Layer.Transport, "transport"],
+  [Layer.Network, "network"],
+  [Layer.Link, "link"],
+]);
+
 export function layerFromName(name: string): Layer {
-  switch (name) {
-    case "application":
-      // Lógica específica para la capa de aplicación
-      console.log("Application Layer selected");
-      return Layer.App;
-    case "transport":
-      // Lógica específica para la capa de transporte
-      console.log("Transport Layer selected");
-      return Layer.Transport;
-    case "network":
-      // Lógica específica para la capa de red
-      console.log("Network Layer selected");
-      return Layer.Network;
-    case "link":
-      // Lógica específica para la capa de enlace
-      console.log("Link Layer selected");
-      return Layer.Link;
-  }
+  return layerFromNameMap[name];
+}
+
+export function layerToName(layer: Layer): string {
+  return layerToNameMap.get(layer);
 }
 
 export function layerIncluded(layer1: Layer, layer2: Layer) {

src/types/graphs/viewgraph.ts

@@ -194,6 +194,10 @@ export class ViewGraph {
     this.datagraph.updateDevicePosition(deviceId, { x: device.x, y: device.y });
   }
 
+  getLayer(): Layer {
+    return this.layer;
+  }
+
   // Get all connections of a device
   getConnections(id: DeviceId): Edge[] {
     const device = this.devices.get(id);

src/types/viewportManager.ts

@@ -4,15 +4,14 @@ import { Device } from "./devices/index";
 import { Edge } from "./edge";
 import { RightBar } from "../graphics/right_bar";
 import { Packet } from "./packet";
-import { DeviceType } from "./devices/device";
+import { DeviceType, Layer } from "./devices/device";
 import { CreateDevice } from "./devices/utils";
 import {
   UndoRedoManager,
   AddDeviceMove,
   RemoveDeviceMove,
   RemoveEdgeMove,
 } from "./undo-redo";
-import { layerFromName } from "./devices/utils";
 
 type Selectable = Device | Edge | Packet;
 
@@ -178,23 +177,31 @@ export function loadFromFile(ctx: GlobalContext) {
 
 const LOCAL_STORAGE_KEY = "graphData";
 
+interface LocalStorageData {
+  graph: string;
+  layer: Layer;
+}
+
 export function saveToLocalStorage(ctx: GlobalContext) {
   const dataGraph = ctx.getDataGraph();
   const graphData = JSON.stringify(dataGraph.toData());
-  localStorage.setItem(LOCAL_STORAGE_KEY, graphData);
+  const layer = ctx.getCurrentLayer();
+  const data: LocalStorageData = { graph: graphData, layer };
+  localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(data));
 
   console.log("Graph saved in local storage.");
 }
 
-export function loadFromLocalStorage(ctx: GlobalContext, currLayer: string) {
-  const jsonData = localStorage.getItem(LOCAL_STORAGE_KEY) || "[]";
+export function loadFromLocalStorage(ctx: GlobalContext) {
+  const jsonData = localStorage.getItem(LOCAL_STORAGE_KEY) || "{}";
   try {
-    const graphData: GraphData = JSON.parse(jsonData);
-    ctx.load(DataGraph.fromData(graphData), layerFromName(currLayer));
+    const data: LocalStorageData = JSON.parse(jsonData);
+    const graphData: GraphData = JSON.parse(data.graph);
+    ctx.load(DataGraph.fromData(graphData), data.layer);
   } catch (error) {
     const extraData = { jsonData, error };
     console.error("Failed to load graph from local storage.", extraData);
-    ctx.load(new DataGraph(), layerFromName(currLayer));
+    ctx.load(new DataGraph(), Layer.App);
     return;
   }
   console.log("Graph loaded from local storage.");