refactor: add edge object to datagraph (#157)

Related to #119

This PR uses the new `Graph` to specify the interface used on each
connection, instead of it being implicitly the ID of the other device.

Author: MegaRedHand

src/graphics/renderables/device_info.ts

@@ -43,11 +43,9 @@ export class DeviceInfo extends StyledInfo {
       createRightBarButton(
         "Delete device",
         () => {
-          const deviceData = this.device.getCreateDevice();
           const currLayer = this.device.viewgraph.getLayer();
-          const move = new RemoveDeviceMove(currLayer, deviceData);
-          this.device.delete();
-          urManager.push(move);
+          const move = new RemoveDeviceMove(currLayer, this.device.id);
+          urManager.push(this.device.viewgraph, move);
         },
         "right-bar-delete-button",
       ),

src/handlers/undoRedoHandler.ts

@@ -29,7 +29,7 @@ export class UndoRedoHandler {
 
     if (this.undoButton && this.redoButton) {
       this.setupButtons();
-      urManager.suscribe(() => this.updateButtons());
+      urManager.subscribe(() => this.updateButtons());
     }
     this.setupShortcuts();
   }

src/types/devices/device.ts

@@ -19,11 +19,10 @@ import { Colors, ZIndexLevels } from "../../utils";
 import { Position } from "../common";
 import { DeviceInfo } from "../../graphics/renderables/device_info";
 import { IpAddress } from "../../packets/ip";
-import { DeviceId } from "../graphs/datagraph";
+import { DeviceId, RemovedNodeData } from "../graphs/datagraph";
 import { DragDeviceMove, AddEdgeMove } from "../undo-redo";
 import { Layer } from "./layer";
 import { Packet } from "../packet";
-import { CreateDevice } from "./utils";
 import { MacAddress } from "../../packets/ethernet";
 import { GlobalContext } from "../../context";
 
@@ -131,17 +130,11 @@ export abstract class Device extends Container {
     this.addChild(idText); // Add the ID text as a child of the device
   }
 
-  /// Returns the data needed to create the device
-  getCreateDevice(): CreateDevice {
-    const node = this.viewgraph.getDataGraph().getDevice(this.id);
-    const connections = this.viewgraph.getDataGraph().getConnections(this.id);
-    return { id: this.id, node, connections };
-  }
-
-  delete(): void {
-    this.viewgraph.removeDevice(this.id);
+  delete(): RemovedNodeData {
+    const deviceData = this.viewgraph.removeDevice(this.id);
     console.log(`Device ${this.id} deleted`);
     this.destroy();
+    return deviceData;
   }
 
   onPointerDown(event: FederatedPointerEvent): void {
@@ -159,36 +152,22 @@ export abstract class Device extends Container {
     this.parent.on("pointerup", onPointerUp);
   }
 
-  // TODO: why is this even here??
-  connectTo(adjacentId: DeviceId): boolean {
-    // Connects both devices with an edge.
-    const edgeId = this.viewgraph.addEdge(this.id, adjacentId);
-    if (edgeId) {
-      // Register move
-      const move = new AddEdgeMove(this.viewgraph.getLayer(), {
-        n1: this.id,
-        n2: adjacentId,
-      });
-      urManager.push(move);
-
-      return true;
-    }
-    return false;
-  }
-
   onClick(e: FederatedPointerEvent) {
     e.stopPropagation();
 
     if (!Device.connectionTarget) {
       selectElement(this);
       return;
     }
-    // If the stored device is this, reset it
+    // If the stored device is this, ignore
     if (Device.connectionTarget === this) {
       return;
     }
-    // The "LineStart" device ends up as the end of the drawing but it's the same
-    if (this.connectTo(Device.connectionTarget.id)) {
+    // Connect both devices
+    const n1 = Device.connectionTarget.id;
+    const n2 = this.id;
+    const move = new AddEdgeMove(this.viewgraph.getLayer(), { n1, n2 });
+    if (urManager.push(this.viewgraph, move)) {
       refreshElement();
       Device.connectionTarget = null;
     }
@@ -258,7 +237,6 @@ export abstract class Device extends Container {
   abstract getLayer(): Layer;
 
   destroy() {
-    // Clear connections
     deselectElement();
     super.destroy();
   }
@@ -278,13 +256,14 @@ function onPointerMove(event: FederatedPointerEvent): void {
 }
 
 function onPointerUp(): void {
-  if (Device.dragTarget && Device.startPosition) {
+  const target = Device.dragTarget;
+  if (target && Device.startPosition) {
     const endPosition: Position = {
-      x: Device.dragTarget.x,
-      y: Device.dragTarget.y,
+      x: target.x,
+      y: target.y,
     };
     console.log("Finalizing move for device:", {
-      id: Device.dragTarget.id,
+      id: target.id,
       startPosition: Device.startPosition,
       endPosition,
     });
@@ -294,24 +273,24 @@ function onPointerUp(): void {
       Device.startPosition.y === endPosition.y
     ) {
       console.log(
-        `No movement detected for device ID ${Device.dragTarget.id}. Move not registered.`,
+        `No movement detected for device ID ${target.id}. Move not registered.`,
       );
     } else {
       const move = new DragDeviceMove(
-        Device.dragTarget.viewgraph.getLayer(),
-        Device.dragTarget.id,
+        target.viewgraph.getLayer(),
+        target.id,
         Device.startPosition,
         endPosition,
       );
-      urManager.push(move);
+      urManager.push(target.viewgraph, move);
     }
 
-    // Resetear variables estáticas
+    // Reset static variables
     Device.startPosition = null;
 
     // Remove global pointermove and pointerup events
-    Device.dragTarget.parent.off("pointermove", onPointerMove);
-    Device.dragTarget.parent.off("pointerup", onPointerUp);
+    target.parent.off("pointermove", onPointerMove);
+    target.parent.off("pointerup", onPointerUp);
     Device.dragTarget = null;
   }
 }

src/types/devices/host.ts

@@ -140,6 +140,7 @@ export class Host extends NetworkDevice {
   }
 
   destroy() {
+    super.destroy();
     this.runningPrograms.forEach((program) => program.stop());
     this.runningPrograms.clear();
   }

src/types/devices/index.ts

@@ -4,4 +4,3 @@ export { Device } from "./device";
 export { NetworkDevice } from "./networkDevice";
 export { Router } from "./router";
 export { Host } from "./host";
-export { createDevice } from "./utils";

src/types/devices/utils.ts

@@ -9,39 +9,34 @@ import { Host } from "./host";
 import { Router } from "./router";
 import { Switch } from "./switch";
 
-export interface CreateDevice {
-  id: DeviceId;
-  node: GraphNode;
-  connections: DeviceId[];
-}
-
 export function createDevice(
-  deviceInfo: CreateDevice,
+  id: DeviceId,
+  node: GraphNode,
   viewgraph: ViewGraph,
   ctx: GlobalContext,
 ): Device {
-  const position: { x: number; y: number } = deviceInfo.node;
+  const position: { x: number; y: number } = node;
   let mac: MacAddress;
 
-  if (isLinkNode(deviceInfo.node)) {
-    mac = MacAddress.parse(deviceInfo.node.mac);
+  if (isLinkNode(node)) {
+    mac = MacAddress.parse(node.mac);
   }
 
   let ip: IpAddress;
   let mask: IpAddress;
 
-  if (isNetworkNode(deviceInfo.node)) {
-    ip = IpAddress.parse(deviceInfo.node.ip);
-    mask = IpAddress.parse(deviceInfo.node.mask);
-    mac = MacAddress.parse(deviceInfo.node.mac);
+  if (isNetworkNode(node)) {
+    ip = IpAddress.parse(node.ip);
+    mask = IpAddress.parse(node.mask);
+    mac = MacAddress.parse(node.mac);
   }
 
-  switch (deviceInfo.node.type) {
+  switch (node.type) {
     case DeviceType.Router:
-      return new Router(deviceInfo.id, viewgraph, ctx, position, mac, ip, mask);
+      return new Router(id, viewgraph, ctx, position, mac, ip, mask);
     case DeviceType.Host:
-      return new Host(deviceInfo.id, viewgraph, ctx, position, mac, ip, mask);
+      return new Host(id, viewgraph, ctx, position, mac, ip, mask);
     case DeviceType.Switch:
-      return new Switch(deviceInfo.id, viewgraph, ctx, position, mac);
+      return new Switch(id, viewgraph, ctx, position, mac);
   }
 }

src/types/edge.ts

@@ -115,26 +115,23 @@ export class Edge extends Graphics {
     this.rightbar.addButton(
       "Delete Edge",
       () => {
+        const viewgraph = this.viewgraph;
         // Obtener las tablas de enrutamiento antes de eliminar la conexión
-        const routingTable1 = this.viewgraph.getRoutingTable(
-          this.connectedNodes.n1,
-        );
-        const routingTable2 = this.viewgraph.getRoutingTable(
-          this.connectedNodes.n2,
-        );
+        const routingTable1 = viewgraph.getRoutingTable(this.connectedNodes.n1);
+        const routingTable2 = viewgraph.getRoutingTable(this.connectedNodes.n2);
 
         // Crear el movimiento de eliminación de la arista con la información adicional
+        const routingTables = new Map([
+          [this.connectedNodes.n1, routingTable1],
+          [this.connectedNodes.n2, routingTable2],
+        ]);
         const move = new RemoveEdgeMove(
-          this.viewgraph.getLayer(),
+          viewgraph.getLayer(),
           this.connectedNodes,
-          new Map([
-            [this.connectedNodes.n1, routingTable1],
-            [this.connectedNodes.n2, routingTable2],
-          ]),
+          routingTables,
         );
 
-        this.delete();
-        urManager.push(move);
+        urManager.push(viewgraph, move);
       },
       "right-bar-delete-button",
     );