feat: routing through tables

src/context.ts

@@ -19,8 +19,8 @@ export class GlobalContext {
   initialize(viewport: Viewport) {
     this.viewport = viewport;
 
-    const baseIp = "192.168.1.0";
-    const mask = "255.255.255.0";
+    const baseIp = "10.0.0.0";
+    const mask = "255.255.255.255";
     this.ipGenerator = new IpAddressGenerator(baseIp, mask);
     loadFromLocalStorage(this);
   }

src/graphics/renderables/device_info.ts

@@ -71,7 +71,11 @@ export class DeviceInfo extends StyledInfo {
   }
 
   addRoutingTable(entries: RoutingTableEntry[]) {
-    const rows = entries.map((entry) => [entry.ip, entry.mask, entry.iface]);
+    const rows = entries.map((entry) => [
+      entry.ip,
+      entry.mask,
+      `eth${entry.iface}`,
+    ]);
 
     const dynamicTable = createToggleTable(
       "Routing Table", // Title

src/types/devices/device.ts

@@ -36,7 +36,7 @@ export enum DeviceType {
 export abstract class Device extends Sprite {
   readonly id: DeviceId;
   readonly viewgraph: ViewGraph;
-  connections = new Map<number, number>();
+  connections = new Map<EdgeId, DeviceId>();
 
   highlightMarker: Graphics | null = null; // Marker to indicate selection
 
@@ -47,7 +47,7 @@ export abstract class Device extends Sprite {
   ipMask: IpAddress;
 
   constructor(
-    id: number,
+    id: DeviceId,
     svg: string,
     viewgraph: ViewGraph,
     position: Position,

src/types/edge.ts

@@ -1,26 +1,27 @@
 import { Graphics, Point } from "pixi.js";
-import { ViewGraph } from "./graphs/viewgraph";
+import { EdgeId, ViewGraph } from "./graphs/viewgraph";
 import { Device } from "./devices/index"; // Import the Device class
 import { deselectElement, selectElement } from "./viewportManager";
 import { RightBar, StyledInfo } from "../graphics/right_bar";
 import { Colors, ZIndexLevels } from "../utils";
 import { Packet } from "./packet";
+import { DeviceId } from "./graphs/datagraph";
 
 export interface EdgeEdges {
-  n1: number;
-  n2: number;
+  n1: DeviceId;
+  n2: DeviceId;
 }
 
 export class Edge extends Graphics {
-  id: number;
-  connectedNodes: { n1: number; n2: number };
+  id: EdgeId;
+  connectedNodes: { n1: DeviceId; n2: DeviceId };
   startPos: Point;
   endPos: Point;
   viewgraph: ViewGraph;
   rightbar: RightBar;
 
   constructor(
-    id: number,
+    id: EdgeId,
     connectedNodes: EdgeEdges,
     device1: Device,
     device2: Device,
@@ -41,15 +42,15 @@ export class Edge extends Graphics {
     this.on("click", () => selectElement(this));
   }
 
-  nodePosition(nodeId: number): Point | undefined {
+  nodePosition(nodeId: DeviceId): Point | undefined {
     return this.connectedNodes.n1 === nodeId
       ? this.startPos
       : this.connectedNodes.n2 === nodeId
         ? this.endPos
         : undefined;
   }
 
-  otherEnd(nodeId: number): number | undefined {
+  otherEnd(nodeId: DeviceId): DeviceId | undefined {
     return this.connectedNodes.n1 === nodeId
       ? this.connectedNodes.n2
       : this.connectedNodes.n2 === nodeId

src/types/graphs/datagraph.ts

@@ -19,7 +19,7 @@ interface RouterGraphNode extends CommonGraphNode {
 export interface RoutingTableEntry {
   ip: string;
   mask: string;
-  iface: string;
+  iface: DeviceId;
 }
 
 // Typescript type guard
@@ -162,7 +162,7 @@ export class DataGraph {
       device1.routingTable.push({
         ip: device2.ip.toString(),
         mask: device2.mask,
-        iface: `eth${n2Id}`,
+        iface: n2Id,
       });
     }
 
@@ -173,20 +173,21 @@ export class DataGraph {
       device2.routingTable.push({
         ip: device1.ip.toString(),
         mask: device1.mask,
-        iface: `eth${n1Id}`,
+        iface: n1Id,
       });
     }
 
     console.log(
       `Connection created between devices ID: ${n1Id} and ID: ${n2Id}`,
     );
     this.notifyChanges();
+    this.regenerateAllRoutingTables();
   }
 
   updateDevicePosition(id: DeviceId, newValues: { x?: number; y?: number }) {
     const deviceGraphNode = this.devices.get(id);
     if (!deviceGraphNode) {
-      console.warn("Device’s id is not registered");
+      console.warn("Device's id is not registered");
       return;
     }
     this.devices.set(id, { ...deviceGraphNode, ...newValues });
@@ -237,6 +238,7 @@ export class DataGraph {
     this.devices.delete(id);
     console.log(`Device with ID ${id} and its connections were removed.`);
     this.notifyChanges();
+    this.regenerateAllRoutingTables();
   }
 
   // Method to remove a connection (edge) between two devices by their IDs
@@ -270,6 +272,7 @@ export class DataGraph {
       `Connection removed between devices ID: ${n1Id} and ID: ${n2Id}`,
     );
     this.notifyChanges();
+    this.regenerateAllRoutingTables();
   }
 
   subscribeChanges(callback: () => void) {
@@ -279,4 +282,56 @@ export class DataGraph {
   notifyChanges() {
     this.onChanges.forEach((callback) => callback());
   }
+
+  regenerateAllRoutingTables() {
+    console.log("Regenerating all routing tables");
+    this.devices.forEach((_, id) => this.regenerateRoutingTable(id));
+  }
+
+  regenerateRoutingTable(id: DeviceId) {
+    const router = this.devices.get(id);
+    if (!isRouter(router)) {
+      return;
+    }
+    console.log(`Regenerating routing table for ID ${id}`);
+    const parents = new Map<DeviceId, DeviceId>();
+    parents.set(id, id);
+    const queue = Array.from([id]);
+    while (queue.length > 0) {
+      const currentId = queue.shift();
+      const current = this.devices.get(currentId);
+      if (!isRouter(current)) {
+        // Don't route packets on hosts
+        continue;
+      }
+      current.connections.forEach((connectedId) => {
+        if (!parents.has(connectedId)) {
+          parents.set(connectedId, currentId);
+          queue.push(connectedId);
+        }
+      });
+    }
+
+    console.log(parents);
+
+    const table: RoutingTableEntry[] = [];
+    parents.forEach((currentId, childId) => {
+      const dstId = childId;
+      if (dstId === id) {
+        return;
+      }
+
+      while (currentId !== id) {
+        const parentId = parents.get(currentId);
+        childId = currentId;
+        currentId = parentId;
+      }
+      // Here the currentId is the router, and the childId
+      // is the first step towards dstId
+      const dst = this.devices.get(dstId);
+      const entry = { ip: dst.ip, mask: dst.mask, iface: childId };
+      table.push(entry);
+    });
+    router.routingTable = table;
+  }
 }

src/types/graphs/viewgraph.ts

@@ -22,7 +22,7 @@ export class ViewGraph {
   private devices: Map<DeviceId, Device> = new Map<DeviceId, Device>();
   private edges: Map<EdgeId, Edge> = new Map<EdgeId, Edge>();
   private idCounter: EdgeId = 1;
-  private datagraph: DataGraph;
+  datagraph: DataGraph;
   private layer: Layer;
   viewport: Viewport;
 
@@ -171,7 +171,11 @@ export class ViewGraph {
   // Get all connections of a device
   getConnections(id: DeviceId): Edge[] {
     const device = this.devices.get(id);
-    return device ? Array.from(this.edges.values()) : [];
+    return device
+      ? Array.from(device.connections.keys()).map((edgeId) =>
+          this.edges.get(edgeId),
+        )
+      : [];
   }
 
   // Get a specific device by its ID