Layers (#50)

- Layer’s and device-type’s enums introduced.
- Function for creating a Device with it type.

---------

Co-authored-by: Tomás Grüner <[email protected]>

Author: Manuel-Pol

src/index.ts

@@ -13,9 +13,7 @@ import { Application, Graphics, EventSystem, Assets } from "pixi.js";
 import * as pixi_viewport from "pixi-viewport";
 import { ViewGraph } from "./types/graphs/viewgraph";
 import {
-  AddPc,
-  AddRouter,
-  AddServer,
+  AddDevice,
   loadFromFile,
   loadFromLocalStorage,
   saveToFile,
@@ -24,6 +22,7 @@ import {
 } from "./types/viewportManager";
 import { DataGraph } from "./types/graphs/datagraph";
 import { Packet } from "./types/packet";
+import { DeviceType, Layer } from "./types/devices/device";
 
 const WORLD_WIDTH = 10000;
 const WORLD_HEIGHT = 10000;
@@ -41,10 +40,14 @@ export class GlobalContext {
     loadFromLocalStorage(this);
   }
 
-  load(datagraph: DataGraph) {
+  private setNetWork(datagraph: DataGraph, layer: Layer) {
     this.datagraph = datagraph;
     this.viewport.clear();
-    this.viewgraph = new ViewGraph(this.datagraph, this.viewport);
+    this.viewgraph = new ViewGraph(this.datagraph, this.viewport, layer);
+  }
+
+  load(datagraph: DataGraph, layer: Layer = Layer.Link) {
+    this.setNetWork(datagraph, layer);
     this.setupAutoSave();
     saveToLocalStorage(this);
   }
@@ -82,6 +85,11 @@ export class GlobalContext {
       this.saveIntervalId = null;
     }
   }
+
+  // (!) For layer abstraction functionality
+  // changeViewGraph(layer: string) {
+  //   this.setNetWork(this.datagraph, layerFromName(layer));
+  // }
 }
 
 // > graphics.ts
@@ -336,13 +344,21 @@ export class RightBar {
   RightBar.getInstance();
 
   // Add router button
-  leftBar.addButton(RouterSvg, () => AddRouter(ctx), "Add Router");
+  leftBar.addButton(
+    RouterSvg,
+    () => AddDevice(ctx, DeviceType.Router),
+    "Add Router",
+  );
 
   // Add server button
-  leftBar.addButton(ServerSvg, () => AddServer(ctx), "Add Server");
+  leftBar.addButton(
+    ServerSvg,
+    () => AddDevice(ctx, DeviceType.Server),
+    "Add Server",
+  );
 
   // Add PC button
-  leftBar.addButton(ComputerSvg, () => AddPc(ctx), "Add PC");
+  leftBar.addButton(ComputerSvg, () => AddDevice(ctx, DeviceType.Pc), "Add PC");
 
   ctx.initialize(viewport);
 
@@ -401,6 +417,22 @@ export class RightBar {
 
   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 (selectElement) {
+  //     ctx.changeViewGraph(selectedLayer);
+  //   }
+  // };
+
+  // layerSelect.onchange = selectNewLayer;
+
   document.body.onkeyup = function (e) {
     if (e.key === " " || e.code === "Space") {
       triggerPause();

src/types/devices/device.ts

@@ -20,6 +20,19 @@ export const DEVICE_SIZE = 20;
 
 let selectedDeviceId: number | null = null; // Stores only the ID instead of 'this'
 
+export enum Layer {
+  App = 0,
+  Transport = 1,
+  Network = 2,
+  Link = 3,
+}
+
+export enum DeviceType {
+  Router = 0,
+  Server = 1,
+  Pc = 2,
+}
+
 export function setSelectedDeviceId(value: number | null) {
   selectedDeviceId = value;
 }
@@ -300,6 +313,18 @@ export class Device extends Sprite {
     this.removeHighlight(); // Calls removeHighlight on deselect
     setSelectedDeviceId(null);
   }
+
+  getType(): DeviceType {
+    // Return the device’s type.
+    // For the superclass, the type returned is Router.
+    return DeviceType.Router;
+  }
+
+  getLayer(): Layer {
+    // Return the device’s layer.
+    // For the superclass, the layer returned is Link.
+    return Layer.Link;
+  }
 }
 
 function onPointerMove(event: FederatedPointerEvent): void {

src/types/devices/index.ts

@@ -4,3 +4,4 @@ export { Device } from "./device";
 export { Router } from "./router";
 export { Server } from "./server";
 export { Pc } from "./pc";
+export { createDevice } from "./utils";

src/types/devices/pc.ts

@@ -1,14 +1,14 @@
 // src/devices/pc.ts
 
-import { Device } from "./device";
+import { Device, DeviceType, Layer } from "./device";
 import { ViewGraph } from "../graphs/viewgraph";
 import PcImage from "../../assets/pc.svg";
 
 export class Pc extends Device {
   constructor(
     id: number,
     viewgraph: ViewGraph,
-    position: { x: number; y: number },
+    position: { x: number; y: number } | null = null,
   ) {
     super(id, PcImage, viewgraph, position);
   }
@@ -27,4 +27,12 @@ export class Pc extends Device {
 
     this.addCommonButtons();
   }
+
+  getLayer(): Layer {
+    return Layer.App;
+  }
+
+  getType(): DeviceType {
+    return DeviceType.Pc;
+  }
 }

src/types/devices/router.ts

@@ -1,14 +1,14 @@
 // src/devices/router.ts
 
-import { Device } from "./device";
+import { Device, DeviceType, Layer } from "./device";
 import { ViewGraph } from "../graphs/viewgraph";
 import RouterImage from "../../assets/router.svg";
 
 export class Router extends Device {
   constructor(
     id: number,
     viewgraph: ViewGraph,
-    position: { x: number; y: number },
+    position: { x: number; y: number } | null = null,
   ) {
     super(id, RouterImage, viewgraph, position);
   }
@@ -27,4 +27,12 @@ export class Router extends Device {
 
     this.addCommonButtons();
   }
+
+  getLayer(): Layer {
+    return Layer.Network;
+  }
+
+  getType(): DeviceType {
+    return DeviceType.Router;
+  }
 }

src/types/devices/server.ts

@@ -1,14 +1,14 @@
 // src/devices/server.ts
 
-import { Device } from "./device";
+import { Device, DeviceType, Layer } from "./device";
 import { ViewGraph } from "../graphs/viewgraph";
 import ServerImage from "../../assets/server.svg";
 
 export class Server extends Device {
   constructor(
     id: number,
     viewgraph: ViewGraph,
-    position: { x: number; y: number },
+    position: { x: number; y: number } | null = null,
   ) {
     super(id, ServerImage, viewgraph, position);
   }
@@ -27,4 +27,12 @@ export class Server extends Device {
 
     this.addCommonButtons();
   }
+
+  getLayer(): Layer {
+    return Layer.App;
+  }
+
+  getType(): DeviceType {
+    return DeviceType.Server;
+  }
 }

src/types/devices/utils.ts

@@ -0,0 +1,42 @@
+import { ViewGraph } from "../graphs/viewgraph";
+import { Device, DeviceType, Layer } from "./device";
+import { Pc } from "./pc";
+import { Router } from "./router";
+import { Server } from "./server";
+
+export function createDevice(
+  type: DeviceType,
+  id: number,
+  viewgraph: ViewGraph,
+  position: { x: number; y: number } | null = null,
+): Device {
+  switch (type) {
+    case DeviceType.Router:
+      return new Router(id, viewgraph, position);
+    case DeviceType.Server:
+      return new Server(id, viewgraph, position);
+    case DeviceType.Pc:
+      return new Pc(id, viewgraph, position);
+  }
+}
+
+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;
+  }
+}

src/types/graphs/datagraph.ts

@@ -1,15 +1,17 @@
+import { DeviceType } from "../devices/device";
+
 export interface GraphNode {
   x: number;
   y: number;
-  type: string;
+  type: DeviceType;
   connections: Set<number>;
 }
 
 export interface GraphDataNode {
   id: number;
   x: number;
   y: number;
-  type: string;
+  type: DeviceType;
   connections: number[];
 }
 
@@ -54,7 +56,7 @@ export class DataGraph {
   }
 
   // Add a new device to the graph
-  addNewDevice(deviceInfo: { x: number; y: number; type: string }): number {
+  addNewDevice(deviceInfo: { x: number; y: number; type: DeviceType }): number {
     const id = this.idCounter++;
     const graphnode: GraphNode = {
       ...deviceInfo,

src/types/graphs/viewgraph.ts

@@ -1,18 +1,22 @@
-import { Device, Pc, Router, Server } from "./../devices/index"; // Import the Device class
+import { Device } from "./../devices/index"; // Import the Device class
 import { Edge } from "./../edge";
 import { DataGraph } from "./datagraph";
 import { Viewport } from "../..";
+import { Layer } from "../devices/device";
+import { createDevice } from "../devices/utils";
 
 export class ViewGraph {
   private devices: Map<number, Device> = new Map<number, Device>();
   private edges: Map<number, Edge> = new Map<number, Edge>();
   private idCounter = 1;
   private datagraph: DataGraph;
+  private layer: Layer;
   viewport: Viewport;
 
-  constructor(datagraph: DataGraph, viewport: Viewport) {
+  constructor(datagraph: DataGraph, viewport: Viewport, layer: Layer) {
     this.datagraph = datagraph;
     this.viewport = viewport;
+    this.layer = layer;
     this.constructView();
   }
 
@@ -22,24 +26,13 @@ export class ViewGraph {
     const connections = new Set<{ deviceId: number; adyacentId: number }>();
 
     this.datagraph.getDevices().forEach(([deviceId, graphNode]) => {
-      let device: Device;
-      switch (graphNode.type) {
-        case "Router":
-          device = new Router(deviceId, this, {
-            x: graphNode.x,
-            y: graphNode.y,
-          });
-          break;
-        case "Server":
-          device = new Server(deviceId, this, {
-            x: graphNode.x,
-            y: graphNode.y,
-          });
-          break;
-        case "Pc":
-          device = new Pc(deviceId, this, { x: graphNode.x, y: graphNode.y });
-          break;
-      }
+      const position = { x: graphNode.x, y: graphNode.y };
+      const device: Device = createDevice(
+        graphNode.type,
+        deviceId,
+        this,
+        position,
+      );
 
       this.viewport.addChild(device);