Improve: Make unselected edges transparent (#180)

This PR tries to unclutter the view of the canvas by making some edges
transparent while selecting devices or edges.

- If the user selects a device, all the edges that are not connected to
the device become transparent.

- If the user selects an edge, all the edges become transparent except
for the selected one.

- If no devices or edges are selected, none of the edges are transparent

Maybe we can add a setting to add/remove this functionality, keeping it
on by default. Some users might want the edges to be at full opacity all
the time.

closes #165

Author: V-SANT

src/types/devices/device.ts

@@ -201,6 +201,9 @@ export abstract class Device extends Container {
     });
     this.highlightMarker.zIndex = ZIndexLevels.Device;
 
+    // Make the unselected edges transparent to improve visibility
+    this.viewgraph.transparentEdgesForDevice(this.id);
+
     // Ensure the marker is in the same container as the viewport
     this.addChild(this.highlightMarker);
   }
@@ -210,6 +213,7 @@ export abstract class Device extends Container {
       this.highlightMarker.clear(); // Clear the graphic
       this.removeChild(this.highlightMarker); // Remove the marker from the viewport
       this.highlightMarker.destroy(); // Destroy the graphic object to free memory
+      this.viewgraph.untransparentEdges(); // Make the edges opaque again
       this.highlightMarker = null;
     }
   }

src/types/edge.ts

@@ -87,10 +87,15 @@ export class Edge extends Graphics {
 
   highlight() {
     this.drawEdge(this.startPos, this.endPos, Colors.Violet);
+    this.viewgraph.transparentEdgesForEdge(
+      this.connectedNodes.n1,
+      this.connectedNodes.n2,
+    );
   }
 
   removeHighlight() {
     this.drawEdge(this.startPos, this.endPos, Colors.Lightblue);
+    this.viewgraph.untransparentEdges();
   }
 
   // Method to show the Edge information
@@ -151,6 +156,14 @@ export class Edge extends Graphics {
     super.destroy();
   }
 
+  becomeTransparent() {
+    this.alpha = 0.2;
+  }
+
+  becomeOpaque() {
+    this.alpha = 1;
+  }
+
   public updatePosition(device1: Device, device2: Device) {
     const dx = device2.x - device1.x;
     const dy = device2.y - device1.y;

src/types/graphs/viewgraph.ts

@@ -351,6 +351,33 @@ export class ViewGraph {
     }
     this.graph.clear();
   }
+
+  // Make all edges transparent except for the ones connected to the device
+  transparentEdgesForDevice(id: DeviceId) {
+    for (const [, , edge] of this.graph.getAllEdges()) {
+      if (edge.connectedNodes.n1 !== id && edge.connectedNodes.n2 !== id) {
+        edge.becomeTransparent();
+      }
+    }
+  }
+
+  // Make all edges transparent except for the edge between the two devices
+  transparentEdgesForEdge(n1: DeviceId, n2: DeviceId) {
+    for (const [, , edge] of this.graph.getAllEdges()) {
+      if (
+        (edge.connectedNodes.n1 !== n1 || edge.connectedNodes.n2 !== n2) &&
+        (edge.connectedNodes.n1 !== n2 || edge.connectedNodes.n2 !== n1)
+      ) {
+        edge.becomeTransparent();
+      }
+    }
+  }
+
+  untransparentEdges() {
+    for (const [, , edge] of this.graph.getAllEdges()) {
+      edge.becomeOpaque();
+    }
+  }
 }
 
 function layerDFS(