Change buttons by layers (#70)

Manuel-Pol · MegaRedHand · web-flow · commit 1b5e6c061eb6 · 2025-01-11T15:12:56.000-03:00
Co-authored-by: Tomás Grüner &lt;47506558+MegaRedHand@users.noreply.github.com&gt;
diff --git a/src/context.ts b/src/context.ts
@@ -16,11 +16,11 @@ export class GlobalContext {
   private saveIntervalId: NodeJS.Timeout | null = null;
   private ipGenerator: IpAddressGenerator;
 
-  initialize(viewport: Viewport) {
+  initialize(viewport: Viewport, layer: string) {
     this.viewport = viewport;
 
     // Sets the initial datagraph and viewgraph
-    loadFromLocalStorage(this);
+    loadFromLocalStorage(this, layer);
 
     this.setIpGenerator();
   }
diff --git a/src/graphics/left_bar.ts b/src/graphics/left_bar.ts
@@ -22,4 +22,8 @@ export class LeftBar {
     img.classList.add("icon-img");
     button.appendChild(img);
   }
+
+  clear() {
+    this.leftBar.textContent = "";
+  }
 }
diff --git a/src/index.ejs b/src/index.ejs
@@ -1,33 +1,29 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
+  <head>
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
 
-<head>
-    <title>
-        <%= htmlWebpackPlugin.options.title %>
-    </title>
-</head>
-
-<body>
+  <body>
     <div id="top-bar">
-        <button id="new-button" class="new-button" title="New">New</button>
-        <button id="save-button" class="save-button" title="Save">Save</button>
-        <button id="load-button" class="load-button" title="Load">Load</button>
-        <div id="app-title">GEduNet</div>
+      <button id="new-button" class="new-button" title="New">New</button>
+      <button id="save-button" class="save-button" title="Save">Save</button>
+      <button id="load-button" class="load-button" title="Load">Load</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>
-            <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 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>
+        <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>
-
+  </body>
 </html>
diff --git a/src/index.ts b/src/index.ts
@@ -46,29 +46,49 @@ import PauseSvg from "./assets/pause-icon.svg";
   const viewport = new Viewport(app.renderer.events);
   app.stage.addChild(viewport);
 
+  // Get the layer’s menu
+  const layerSelect = document.getElementById(
+    "layer-select",
+  ) as HTMLSelectElement;
+
   // Left bar logic
   const leftBar = LeftBar.getFrom(document);
   RightBar.getInstance();
 
-  // Add router button
-  leftBar.addButton(
-    RouterSvg,
-    () => AddDevice(ctx, DeviceType.Router),
-    "Add Router",
-  );
+  const addRouterButton = () =>
+    leftBar.addButton(
+      RouterSvg,
+      () => AddDevice(ctx, DeviceType.Router),
+      "Add Router",
+    );
+
+  const addHostButton = () =>
+    leftBar.addButton(
+      ComputerSvg,
+      () => AddDevice(ctx, DeviceType.Host),
+      "Add Host",
+    );
+
+  function setButtonsByLayer(layer: string) {
+    leftBar.clear();
+
+    const buttonConfig: Record<string, (() => void)[]> = {
+      application: [addHostButton],
+      transport: [addHostButton],
+      network: [addRouterButton, addHostButton],
+      link: [addRouterButton, addHostButton],
+    };
+
+    buttonConfig[layer]?.forEach((addButton) => addButton());
+  }
 
-  // Add Host button
-  leftBar.addButton(
-    ComputerSvg,
-    () => AddDevice(ctx, DeviceType.Host),
-    "Add Host",
-  );
+  setButtonsByLayer(layerSelect.value);
 
-  ctx.initialize(viewport);
+  // Initialize Context
+  ctx.initialize(viewport, layerSelect.value);
 
   // Ticker logic
   // app.ticker.add(() => { });
-
   const lBar = document.getElementById("left-bar");
   const rBar = document.getElementById("right-bar");
   const tBar = document.getElementById("top-bar");
@@ -126,16 +146,14 @@ import PauseSvg from "./assets/pause-icon.svg";
   pauseButton.onclick = triggerPause;
 
   // (!) For layer abstraction functionality
-  const layerSelect = document.getElementById(
-    "layer-select",
-  ) as HTMLSelectElement;
-
   const selectNewLayer = (event: Event) => {
     const selectedLayer = (event.target as HTMLSelectElement).value;
     console.log(`Layer selected: ${selectedLayer}`);
 
     if (selectedLayer) {
       ctx.changeViewGraph(selectedLayer);
+      // LeftBar is reset
+      setButtonsByLayer(selectedLayer);
     }
   };
 
@@ -149,7 +167,7 @@ import PauseSvg from "./assets/pause-icon.svg";
   };
 
   // TODO: load from local storage directly, without first generating a context
-  loadFromLocalStorage(ctx);
+  loadFromLocalStorage(ctx, layerSelect.value);
 
   console.log("initialized!");
 })();
diff --git a/src/types/devices/utils.ts b/src/types/devices/utils.ts
@@ -53,7 +53,6 @@ export function layerFromName(name: string): Layer {
 
 export function layerIncluded(layer1: Layer, layer2: Layer) {
   // Determines whether layer1 is included within layer2’s abstraction.
-  console.log(`${layer1.valueOf()} <= ${layer2.valueOf()}`);
   return layer1.valueOf() <= layer2.valueOf();
 }
 
diff --git a/src/types/graphs/viewgraph.ts b/src/types/graphs/viewgraph.ts
@@ -57,7 +57,6 @@ export class ViewGraph {
       }
     });
 
-    console.log("Finished creating devices in ViewGraph");
     connections.forEach((key) => {
       const connection = parseConnectionKey(key);
       const device1 = this.getDevice(connection.id1);
@@ -312,17 +311,14 @@ export class ViewGraph {
     connections: Set<string>,
   ) {
     graph.get(v).connections.forEach((w) => {
-      console.log(`Se accede a ${w} desde ${v}`);
       if (!visited.has(w)) {
-        console.log(`Se visita ${w}`);
         const adyacent = this.datagraph.getDevice(w);
         // mark node as visited
         visited.add(w);
         if (layerIncluded(layerFromType(adyacent.type), this.layer)) {
           // add connection between v and w
           const connectionKey: string = generateConnectionKey(w, s);
           if (!connections.has(connectionKey)) {
-            console.log(`Dispositivos agregados a conexion`);
             connections.add(connectionKey);
           }
         } else {
diff --git a/src/types/viewportManager.ts b/src/types/viewportManager.ts
@@ -5,7 +5,7 @@ import { Edge } from "./edge";
 import { RightBar } from "../graphics/right_bar";
 import { Packet } from "./packet";
 import { DeviceType } from "./devices/device";
-import { createDevice } from "./devices/utils";
+import { createDevice, layerFromName } from "./devices/utils";
 
 type Selectable = Device | Edge | Packet;
 
@@ -141,15 +141,15 @@ export function saveToLocalStorage(ctx: GlobalContext) {
   console.log("Graph saved in local storage.");
 }
 
-export function loadFromLocalStorage(ctx: GlobalContext) {
+export function loadFromLocalStorage(ctx: GlobalContext, currLayer: string) {
   const jsonData = localStorage.getItem(LOCAL_STORAGE_KEY) || "[]";
   try {
     const graphData: GraphData = JSON.parse(jsonData);
-    ctx.load(DataGraph.fromData(graphData));
+    ctx.load(DataGraph.fromData(graphData), layerFromName(currLayer));
   } catch (error) {
     const extraData = { jsonData, error };
     console.error("Failed to load graph from local storage.", extraData);
-    ctx.load(new DataGraph());
+    ctx.load(new DataGraph(), layerFromName(currLayer));
     return;
   }
   console.log("Graph loaded from local storage.");

Original file line number	Diff line number	Diff line change
`@@ -22,4 +22,8 @@ export class LeftBar {`
`22`	`22`	`img.classList.add("icon-img");`
`23`	`23`	`button.appendChild(img);`
`24`	`24`	`}`
	`25`	`+`
	`26`	`+ clear() {`
	`27`	`+ this.leftBar.textContent = "";`
	`28`	`+ }`
`25`	`29`	`}`
Original file line number	Diff line number	Diff line change
`@@ -53,7 +53,6 @@ export function layerFromName(name: string): Layer {`
`53`	`53`
`54`	`54`	`export function layerIncluded(layer1: Layer, layer2: Layer) {`
`55`	`55`	`// Determines whether layer1 is included within layer2’s abstraction.`
`56`		- console.log(`${layer1.valueOf()} <= ${layer2.valueOf()}`);
`57`	`56`	`return layer1.valueOf() <= layer2.valueOf();`
`58`	`57`	`}`
`59`	`58`