refactor: Edge’s ids are strings of the form 'id1,id2' (#99)

where 'id1' is the greatest id between the devices connected ids, while 'id2' is the
lowest

Author: Manuel-Pol

package-lock.json

@@ -19,6 +19,7 @@
     "inline-source-map": "0.6.3",
     "jest": "^29.7.0",
     "mini-css-extract-plugin": "^2.9.2",
+    "npm": "^11.0.0",
     "prettier": "^3.3.3",
     "style-loader": "4.0.0",
     "ts-jest": "^29.2.5",

package.json

@@ -62,6 +62,7 @@ export class GlobalContext {
 
   changeViewGraph(selectedLayer: string) {
     const layer = layerFromName(selectedLayer);
+    urManager.reset();
     this.setNetwork(this.datagraph, layer);
   }
 

src/context.ts

@@ -183,7 +183,7 @@ async function loadAssets(otherPromises: Promise<void>[]) {
 
   pauseButton.onclick = triggerPause;
 
-  // (!) For layer abstraction functionality
+  // Layer abstraction logic
   const selectNewLayer = (event: Event) => {
     const selectedLayer = (event.target as HTMLSelectElement).value;
     console.log(`Layer selected: ${selectedLayer}`);

src/index.ts

@@ -6,7 +6,7 @@ import {
   TextStyle,
   Text,
 } from "pixi.js";
-import { EdgeId, ViewGraph } from "./../graphs/viewgraph";
+import { ViewGraph } from "./../graphs/viewgraph";
 import {
   deselectElement,
   refreshElement,
@@ -19,7 +19,7 @@ import { Position } from "../common";
 import { DeviceInfo } from "../../graphics/renderables/device_info";
 import { IpAddress } from "../../packets/ip";
 import { DeviceId } from "../graphs/datagraph";
-import { DragDeviceMove, EdgeData, AddEdgeMove } from "../undo-redo";
+import { DragDeviceMove, AddEdgeMove } from "../undo-redo";
 import { Layer } from "./layer";
 
 export { Layer } from "./layer";
@@ -43,7 +43,7 @@ export function layerFromType(type: DeviceType) {
 export abstract class Device extends Sprite {
   readonly id: DeviceId;
   readonly viewgraph: ViewGraph;
-  connections = new Map<EdgeId, DeviceId>();
+  connections = new Set<DeviceId>();
 
   highlightMarker: Graphics | null = null; // Marker to indicate selection
 
@@ -99,19 +99,15 @@ export abstract class Device extends Sprite {
     this.addChild(idText); // Add the ID text as a child of the device
   }
 
-  getConnections(): { edgeId: EdgeId; adyacentId: DeviceId }[] {
-    return Array.from(this.connections.entries()).map(
-      ([edgeId, adyacentId]) => {
-        return { edgeId, adyacentId };
-      },
-    );
+  getConnections(): DeviceId[] {
+    return Array.from(this.connections.values());
   }
 
-  addConnection(edgeId: EdgeId, adyacentId: DeviceId) {
-    this.connections.set(edgeId, adyacentId);
+  addConnection(adyacentId: DeviceId) {
+    this.connections.add(adyacentId);
   }
 
-  removeConnection(id: EdgeId) {
+  removeConnection(id: DeviceId) {
     this.connections.delete(id);
   }
 
@@ -145,22 +141,18 @@ export abstract class Device extends Sprite {
     this.parent.on("pointerup", onPointerUp);
   }
 
-  connectTo(adyacentId: number): boolean {
+  connectTo(adyacentId: DeviceId): boolean {
     // Connects both devices with an edge.
     // console.log("Entered connectTo");
 
     const edgeId = this.viewgraph.addEdge(this.id, adyacentId);
     if (edgeId) {
       const adyacentDevice = this.viewgraph.getDevice(adyacentId);
-      this.addConnection(edgeId, adyacentId);
-      adyacentDevice.addConnection(edgeId, this.id);
+      this.addConnection(adyacentId);
+      adyacentDevice.addConnection(this.id);
 
       // Register move
-      const moveData: EdgeData = {
-        edgeId,
-        connectedNodes: { n1: this.id, n2: adyacentId },
-      };
-      const move = new AddEdgeMove(moveData);
+      const move = new AddEdgeMove({ n1: this.id, n2: adyacentId });
       urManager.push(move);
 
       return true;

src/types/devices/device.ts

@@ -7,6 +7,7 @@ import { createDropdown, DeviceInfo, RightBar } from "../../graphics/right_bar";
 import { ProgramInfo } from "../../graphics/renderables/device_info";
 import { sendPacket } from "../packet";
 import { Ticker } from "pixi.js";
+import { DeviceId } from "../graphs/datagraph";
 import { Layer } from "./layer";
 
 const DEFAULT_ECHO_DELAY = 250; // ms
@@ -15,7 +16,7 @@ export class Host extends Device {
   currentProgram: (ticker: Ticker) => void = undefined;
 
   constructor(
-    id: number,
+    id: DeviceId,
     viewgraph: ViewGraph,
     position: Position,
     ip: IpAddress,

src/types/devices/host.ts

@@ -4,10 +4,11 @@ import RouterImage from "../../assets/router.svg";
 import { Position } from "../common";
 import { DeviceInfo, RightBar } from "../../graphics/right_bar";
 import { IpAddress } from "../../packets/ip";
+import { DeviceId } from "../graphs/datagraph";
 
 export class Router extends Device {
   constructor(
-    id: number,
+    id: DeviceId,
     viewgraph: ViewGraph,
     position: Position,
     ip: IpAddress,

src/types/devices/router.ts

@@ -1,11 +1,12 @@
 import { IpAddress } from "../../packets/ip";
+import { DeviceId } from "../graphs/datagraph";
 import { ViewGraph } from "../graphs/viewgraph";
 import { Device, DeviceType } from "./device";
 import { Host } from "./host";
 import { Router } from "./router";
 
 export interface CreateDevice {
-  id: number;
+  id: DeviceId;
   type: DeviceType;
   x: number;
   y: number;

src/types/devices/utils.ts

@@ -1,5 +1,5 @@
 import { Graphics, Point } from "pixi.js";
-import { EdgeId, ViewGraph } from "./graphs/viewgraph";
+import { ViewGraph } from "./graphs/viewgraph";
 import { Device } from "./devices/index"; // Import the Device class
 import { deselectElement, selectElement, urManager } from "./viewportManager";
 import { RightBar, StyledInfo } from "../graphics/right_bar";
@@ -14,23 +14,24 @@ export interface EdgeEdges {
 }
 
 export class Edge extends Graphics {
-  id: EdgeId;
-  connectedNodes: { n1: DeviceId; n2: DeviceId };
+  connectedNodes: EdgeEdges;
   startPos: Point;
   endPos: Point;
   viewgraph: ViewGraph;
   rightbar: RightBar;
 
+  static generateConnectionKey(connectedNodes: EdgeEdges): string {
+    const { n1, n2 } = connectedNodes;
+    return [n1, n2].sort().join(",");
+  }
+
   constructor(
-    id: EdgeId,
     connectedNodes: EdgeEdges,
     device1: Device,
     device2: Device,
     viewgraph: ViewGraph,
   ) {
     super();
-
-    this.id = id;
     this.connectedNodes = connectedNodes;
     this.viewgraph = viewgraph;
     this.rightbar = RightBar.getInstance();
@@ -98,7 +99,7 @@ export class Edge extends Graphics {
   // Method to show the Edge information
   showInfo() {
     const info = new StyledInfo("Edge Information");
-    info.addField("Edge ID", this.id.toString());
+    info.addField("Edge ID", Edge.generateConnectionKey(this.connectedNodes));
     info.addField(
       "Connected Devices",
       `${this.connectedNodes.n1} <=> ${this.connectedNodes.n2}`,
@@ -120,10 +121,7 @@ export class Edge extends Graphics {
       "Delete Edge",
       () => {
         // obtener info
-        const move = new RemoveEdgeMove({
-          edgeId: this.id,
-          connectedNodes: this.connectedNodes,
-        });
+        const move = new RemoveEdgeMove(this.connectedNodes);
         this.delete();
         urManager.push(move);
         // registrar movimiento
@@ -136,10 +134,11 @@ export class Edge extends Graphics {
   delete() {
     // Remove the edge from the viewgraph and datagraph
     deselectElement();
-    this.viewgraph.removeEdge(this.id);
+    const id = Edge.generateConnectionKey(this.connectedNodes);
+    this.viewgraph.removeEdge(id);
     this.destroy();
 
-    console.log(`Edge ${this.id} deleted.`);
+    console.log(`Edge ${id} deleted.`);
   }
 
   public updatePosition(device1: Device, device2: Device) {