Undo redo bugs (#118)

Author: Manuel-Pol

src/context.ts

@@ -39,7 +39,7 @@ export class GlobalContext {
     this.datagraph = datagraph;
     this.viewport.clear();
     if (this.viewgraph) {
-      this.viewgraph.destroy();
+      this.viewgraph.clear();
     }
     this.viewgraph = new ViewGraph(this.datagraph, this.viewport, layer);
     this.viewgraph.setSpeed(speedMultiplier?.value || 1);
@@ -96,7 +96,7 @@ export class GlobalContext {
   changeViewGraph(selectedLayer: string) {
     const layer = layerFromName(selectedLayer);
     const speedMultiplier = this.getCurrentSpeed();
-    urManager.reset();
+    // urManager.reset();
     this.setNetwork(this.datagraph, layer, speedMultiplier);
   }
 
@@ -142,4 +142,11 @@ export class GlobalContext {
     const mask = "255.255.255.255";
     this.ipGenerator = new IpAddressGenerator(baseIp, mask);
   }
+
+  print() {
+    console.log("VieGraph:");
+    console.log(this.viewgraph);
+    console.log("DataGraph");
+    console.log(this.datagraph);
+  }
 }

src/graphics/renderables/device_info.ts

@@ -43,9 +43,10 @@ export class DeviceInfo extends StyledInfo {
         "Delete device",
         () => {
           const deviceData = this.device.getCreateDevice();
+          const currLayer = this.device.viewgraph.getLayer();
           const move = new RemoveDeviceMove(
+            currLayer,
             deviceData,
-            this.device.getConnections(),
             this.device.viewgraph,
           );
           this.device.delete();

src/index.ejs

@@ -9,6 +9,7 @@
       <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>
+      <button id="print-button" class="load-button" title="Print">Print</button>
       <div id="app-title">GEduNet</div>
     </div>
     <div id="bottom-screen" class="row container">
@@ -28,7 +29,7 @@
               max="4"
               step="0.1"
               value="1"
-            >
+            />
           </div>
           <div class="value-display">1x</div>
         </div>

src/index.ts

@@ -98,6 +98,7 @@ async function loadAssets(otherPromises: Promise<void>[]) {
   const newButton = document.getElementById("new-button");
   const loadButton = document.getElementById("load-button");
   const saveButton = document.getElementById("save-button");
+  const printButton = document.getElementById("print-button");
 
   newButton.onclick = () => {
     deselectElement();
@@ -111,6 +112,9 @@ async function loadAssets(otherPromises: Promise<void>[]) {
     deselectElement();
     loadFromFile(ctx);
   };
+  printButton.onclick = () => {
+    ctx.print();
+  };
   // Undo button’s logic
   const undoButton = document.getElementById(
     "undo-button",
@@ -214,7 +218,7 @@ async function loadAssets(otherPromises: Promise<void>[]) {
     valueDisplay.textContent = `${value}x`;
   }
 
-  // (!) For layer abstraction functionality
+  // For layer abstraction logic
   const selectNewLayer = (event: Event) => {
     const selectedLayer = (event.target as HTMLSelectElement).value;
     console.log(`Layer selected: ${selectedLayer}`);
@@ -224,11 +228,16 @@ async function loadAssets(otherPromises: Promise<void>[]) {
       saveToLocalStorage(ctx);
       // LeftBar is reset
       leftBar.setButtonsByLayer(selectedLayer);
-      deselectElement();
+      deselectElement(); // not needed
     }
   };
 
   layerSelect.onchange = selectNewLayer;
+  layerSelect.addEventListener("layerChanged", () => {
+    const currLayer = layerToName(ctx.getCurrentLayer());
+    layerSelect.value = currLayer;
+    leftBar.setButtonsByLayer(currLayer);
+  });
 
   document.body.onkeyup = function (e) {
     if (e.key === " " || e.code === "Space") {

src/types/devices/device.ts

@@ -137,8 +137,8 @@ export abstract class Device extends Container {
     return { id: this.id, node };
   }
 
-  addConnection(adyacentId: DeviceId) {
-    this.connections.add(adyacentId);
+  addConnection(adjacentId: DeviceId) {
+    this.connections.add(adjacentId);
   }
 
   removeConnection(id: DeviceId) {
@@ -166,9 +166,6 @@ export abstract class Device extends Container {
 
   delete(): void {
     this.viewgraph.removeDevice(this.id);
-    // Clear connections
-    this.connections.clear();
-    deselectElement();
     console.log(`Device ${this.id} deleted`);
     this.destroy();
   }
@@ -188,16 +185,21 @@ export abstract class Device extends Container {
     this.parent.on("pointerup", onPointerUp);
   }
 
-  connectTo(adyacentId: DeviceId): boolean {
+  connectTo(adjacentId: DeviceId): boolean {
     // Connects both devices with an edge.
-    const edgeId = this.viewgraph.addEdge(this.id, adyacentId);
+    // console.log("Entered connectTo");
+
+    const edgeId = this.viewgraph.addEdge(this.id, adjacentId);
     if (edgeId) {
-      const adyacentDevice = this.viewgraph.getDevice(adyacentId);
-      this.addConnection(adyacentId);
-      adyacentDevice.addConnection(this.id);
+      const adjacentDevice = this.viewgraph.getDevice(adjacentId);
+      this.addConnection(adjacentId);
+      adjacentDevice.addConnection(this.id);
 
       // Register move
-      const move = new AddEdgeMove({ n1: this.id, n2: adyacentId });
+      const move = new AddEdgeMove(this.viewgraph.getLayer(), {
+        n1: this.id,
+        n2: adjacentId,
+      });
       urManager.push(move);
 
       return true;
@@ -277,16 +279,18 @@ export abstract class Device extends Container {
     Device.connectionTarget = null;
   }
 
-  // Cleans up related resources
-  destroy() {
-    // do nothing
-  }
-
   // Return the device’s type.
   abstract getType(): DeviceType;
 
   // Return the device’s layer.
   abstract getLayer(): Layer;
+
+  destroy() {
+    // Clear connections
+    this.connections.clear();
+    deselectElement();
+    super.destroy();
+  }
 }
 
 function onPointerMove(event: FederatedPointerEvent): void {
@@ -323,6 +327,7 @@ function onPointerUp(): void {
       );
     } else {
       const move = new DragDeviceMove(
+        Device.dragTarget.viewgraph.getLayer(),
         Device.dragTarget.id,
         Device.startPosition,
         endPosition,

src/types/devices/layer.ts

@@ -27,7 +27,7 @@ export function layerToName(layer: Layer): string {
   return layerToNameMap.get(layer);
 }
 
-export function layerIncluded(layer1: Layer, layer2: Layer) {
-  // Determines whether layer1 is included within layer2’s abstraction.
-  return layer1 >= layer2;
+export function layerIncluded(minorLayer: Layer, majorLayer: Layer) {
+  // Determines whether minorLayer is included within majorLayer’s abstraction.
+  return minorLayer >= majorLayer;
 }

src/types/edge.ts

@@ -131,6 +131,7 @@ export class Edge extends Graphics {
 
         // Crear el movimiento de eliminación de la arista con la información adicional
         const move = new RemoveEdgeMove(
+          this.viewgraph.getLayer(),
           this.connectedNodes,
           new Map([
             [this.connectedNodes.n1, routingTable1],
@@ -148,12 +149,15 @@ export class Edge extends Graphics {
   // Method to delete the edge
   delete() {
     // Remove the edge from the viewgraph and datagraph
-    deselectElement();
     const id = Edge.generateConnectionKey(this.connectedNodes);
     this.viewgraph.removeEdge(id);
+    console.log(`Edge ${id} deleted.`);
     this.destroy();
+  }
 
-    console.log(`Edge ${id} deleted.`);
+  destroy() {
+    deselectElement();
+    super.destroy();
   }
 
   public updatePosition(device1: Device, device2: Device) {

src/types/graphs/datagraph.ts

@@ -345,10 +345,10 @@ export class DataGraph {
     if (!isRouter(router)) return;
 
     router.routingTable = this.generateRoutingTable(id, true);
-    console.log(
-      `Routing table regenerated for router ID ${id}:`,
-      router.routingTable,
-    );
+    // console.log(
+    //   `Routing table regenerated for router ID ${id}:`,
+    //   router.routingTable,
+    // );
   }
 
   private generateRoutingTable(
@@ -360,9 +360,9 @@ export class DataGraph {
       return [];
     }
 
-    console.log(
-      `Regenerating ${preserveEdits ? "full" : "clean"} routing table for ID ${id}`,
-    );
+    // console.log(
+    //   `Regenerating ${preserveEdits ? "full" : "clean"} routing table for ID ${id}`,
+    // );
     const parents = new Map<DeviceId, DeviceId>();
     parents.set(id, id);
     const queue = [id];

src/types/graphs/viewgraph.ts

@@ -126,20 +126,6 @@ export class ViewGraph {
       return null;
     }
 
-    // Check if an edge already exists between these two devices
-    for (const edge of this.edges.values()) {
-      const { n1, n2 } = edge.connectedNodes;
-      if (
-        (n1 === device1Id && n2 === device2Id) ||
-        (n1 === device2Id && n2 === device1Id)
-      ) {
-        console.warn(
-          `Connection between ID ${device1Id} and ID ${device2Id} already exists.`,
-        );
-        return null;
-      }
-    }
-
     const device1 = this.devices.get(device1Id);
     const device2 = this.devices.get(device2Id);
 
@@ -160,19 +146,19 @@ export class ViewGraph {
 
   deviceMoved(deviceId: DeviceId) {
     const device: Device = this.devices.get(deviceId);
-    device.getConnections().forEach((adyacentId) => {
+    device.getConnections().forEach((adjacentId) => {
       const edge = this.edges.get(
-        Edge.generateConnectionKey({ n1: deviceId, n2: adyacentId }),
+        Edge.generateConnectionKey({ n1: deviceId, n2: adjacentId }),
       );
       // Get start and end devices directly
       const startDevice =
         edge.connectedNodes.n1 === device.id
           ? device
-          : this.devices.get(adyacentId);
+          : this.devices.get(adjacentId);
 
       const endDevice =
         edge.connectedNodes.n1 === device.id
-          ? this.devices.get(adyacentId)
+          ? this.devices.get(adjacentId)
           : device;
 
       if (startDevice && endDevice) {
@@ -188,6 +174,17 @@ export class ViewGraph {
     return this.layer;
   }
 
+  changeCurrLayer(newLayer: Layer) {
+    this.layer = newLayer;
+    this.clear();
+    this.constructView();
+    const layerSelect = document.getElementById(
+      "layer-select",
+    ) as HTMLSelectElement;
+    const event = new CustomEvent("layerChanged");
+    layerSelect.dispatchEvent(event);
+  }
+
   getSpeed(): SpeedMultiplier {
     if (!this.speedMultiplier) {
       this.speedMultiplier = new SpeedMultiplier(1);
@@ -211,8 +208,8 @@ export class ViewGraph {
     }
     const connections = device
       .getConnections()
-      .map((adyacentId) =>
-        this.edges.get(Edge.generateConnectionKey({ n1: id, n2: adyacentId })),
+      .map((adjacentId) =>
+        this.edges.get(Edge.generateConnectionKey({ n1: id, n2: adjacentId })),
       );
     return connections;
   }
@@ -250,11 +247,9 @@ export class ViewGraph {
       return;
     }
 
-    device.destroy();
-
-    // Remove connection from adyacent’s devices
-    device.getConnections().forEach((adyacentId) => {
-      const edgeId = Edge.generateConnectionKey({ n1: id, n2: adyacentId });
+    // Remove connection from adjacent’s devices
+    device.getConnections().forEach((adjacentId) => {
+      const edgeId = Edge.generateConnectionKey({ n1: id, n2: adjacentId });
       const edge = this.edges.get(edgeId);
       if (edge) {
         edge.delete();
@@ -346,14 +341,14 @@ export class ViewGraph {
     const unvisitedNodes = [];
     const connectingEdges = new Map<DeviceId, EdgeId>([[a.id, null]]);
     while (current.id !== idB) {
-      for (const adyacentId of current.connections) {
+      for (const adjacentId of current.connections) {
         const edgeId = Edge.generateConnectionKey({
           n1: current.id,
-          n2: adyacentId,
+          n2: adjacentId,
         });
-        if (!connectingEdges.has(adyacentId)) {
-          connectingEdges.set(adyacentId, edgeId);
-          unvisitedNodes.push(this.devices.get(adyacentId));
+        if (!connectingEdges.has(adjacentId)) {
+          connectingEdges.set(adjacentId, edgeId);
+          unvisitedNodes.push(this.devices.get(adjacentId));
         }
       }
       if (unvisitedNodes.length === 0) {
@@ -393,12 +388,12 @@ export class ViewGraph {
       if (visited.has(w)) {
         return;
       }
-      const adyacent = this.datagraph.getDevice(w);
+      const adjacent = this.datagraph.getDevice(w);
       // mark node as visited
       visited.add(w);
 
-      if (layerIncluded(layerFromType(adyacent.type), this.layer)) {
-        // add connection between v and w
+      if (layerIncluded(layerFromType(adjacent.type), this.layer)) {
+        // add connection between s and w
         const connectionKey: string = Edge.generateConnectionKey({
           n1: w,
           n2: s,
@@ -413,7 +408,11 @@ export class ViewGraph {
     });
   }
 
-  destroy() {
+  clear() {
+    this.viewport.clear();
     this.devices.forEach((device) => device.destroy());
+    this.devices.clear();
+    this.edges.forEach((edge) => edge.destroy());
+    this.edges.clear();
   }
 }