feat: keep edges and hide devices from sub-layers (#181)

This PR makes viewgraph store all devices, but makes invisible devices
not of the current layer (or above).

Author: MegaRedHand

src/graphics/renderables/program_info.ts

@@ -20,9 +20,8 @@ export class ProgramInfo implements Renderable {
     this.inputs.push(container);
     this.inputsValues.push(getValue);
   }
-  getInputValues() {
-    console.log("getInputValues", this.inputsValues);
 
+  getInputValues() {
     return this.inputsValues.map((getValue) => getValue());
   }
 
@@ -33,7 +32,7 @@ export class ProgramInfo implements Renderable {
 
 function otherDevices(viewgraph: ViewGraph, srcId: DeviceId) {
   return viewgraph
-    .getDeviceIds()
+    .getLayerDeviceIds()
     .filter((id) => id !== srcId)
     .map((id) => ({ value: id.toString(), text: `Device ${id}` }));
 }

src/graphics/right_bar.ts

@@ -642,7 +642,6 @@ export function createDropdown(
     const option = document.createElement("div");
     option.classList.add("dropdown-option");
     option.textContent = optionData.text;
-    console.log("Attaching tooltip to", optionData.text);
     TooltipManager.getInstance().attachTooltip(option, optionData.text); // Attach tooltip to the option
 
     // Set up click event for option selection

src/types/edge.ts

@@ -80,22 +80,15 @@ export class Edge extends Graphics {
   }
 
   deselect() {
-    // TODO
-    console.log("deselected");
     this.removeHighlight();
   }
 
   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
@@ -156,23 +149,26 @@ export class Edge extends Graphics {
     super.destroy();
   }
 
-  becomeTransparent() {
-    this.alpha = 0.2;
-  }
-
-  becomeOpaque() {
-    this.alpha = 1;
-  }
-
   public updatePosition(device1: ViewDevice, device2: ViewDevice) {
     const dx = device2.x - device1.x;
     const dy = device2.y - device1.y;
     const angle = Math.atan2(dy, dx);
 
-    const offsetX1 = ((device1.width + 5) / 2) * Math.cos(angle);
-    const offsetY1 = ((device1.height + 5) / 2) * Math.sin(angle);
-    const offsetX2 = ((device2.width + 5) / 2) * Math.cos(angle);
-    const offsetY2 = ((device2.height + 5) / 2) * Math.sin(angle);
+    const n1IsVisible = device1.visible;
+    const n2IsVisible = device2.visible;
+
+    const offsetX1 = n1IsVisible
+      ? ((device1.width + 5) / 2) * Math.cos(angle)
+      : 0;
+    const offsetY1 = n1IsVisible
+      ? ((device1.height + 5) / 2) * Math.sin(angle)
+      : 0;
+    const offsetX2 = n2IsVisible
+      ? ((device2.width + 5) / 2) * Math.cos(angle)
+      : 0;
+    const offsetY2 = n2IsVisible
+      ? ((device2.height + 5) / 2) * Math.sin(angle)
+      : 0;
 
     const newStartPos: Point = new Point(
       device1.x + offsetX1,

src/types/graphs/viewgraph.ts

@@ -2,9 +2,8 @@ import { ViewDevice } from "../view-devices";
 import { Edge, EdgeEdges } from "./../edge";
 import { DataGraph, DeviceId, DataNode, RemovedNodeData } from "./datagraph";
 import { Viewport } from "../../graphics/viewport";
-import { Layer, layerIncluded } from "../layer";
+import { Layer } from "../layer";
 import { createViewDevice } from "../view-devices/utils";
-import { layerFromType } from "../view-devices/vDevice";
 import { IpAddress } from "../../packets/ip";
 import { GlobalContext } from "../../context";
 import { Graph } from "./graph";
@@ -36,17 +35,14 @@ export class ViewGraph {
     const allConnections = new Map<string, EdgePair>();
 
     for (const [deviceId, device] of this.datagraph.getDevices()) {
-      if (layerIncluded(layerFromType(device.getType()), this.layer)) {
-        this.addDevice(deviceId, device.getDataNode());
-        layerDFS(
-          this.datagraph,
-          this.layer,
-          deviceId,
-          deviceId,
-          new Set([deviceId]),
-          allConnections,
-        );
-      }
+      this.addDevice(deviceId, device.getDataNode());
+      layerDFS(
+        this.datagraph,
+        deviceId,
+        deviceId,
+        new Set([deviceId]),
+        allConnections,
+      );
     }
     console.debug(allConnections);
     this.addConnections(allConnections);
@@ -60,7 +56,6 @@ export class ViewGraph {
     const connections = new Map<string, EdgePair>();
     layerDFS(
       this.datagraph,
-      this.layer,
       deviceId,
       deviceId,
       new Set([deviceId]),
@@ -220,9 +215,13 @@ export class ViewGraph {
     return Array.from(this.graph.getAllVertices()).map(([, device]) => device);
   }
 
-  // Returns an array of devices’ ids
-  getDeviceIds(): DeviceId[] {
-    return Array.from(this.graph.getAllVertices()).map(([id]) => id);
+  /**
+   * Returns all devices in the layer of the viewgraph
+   */
+  getLayerDeviceIds(): DeviceId[] {
+    return Array.from(this.graph.getAllVertices())
+      .filter(([, { visible }]) => visible)
+      .map(([id]) => id);
   }
 
   // Get the number of devices in the graph
@@ -396,38 +395,10 @@ 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(
   datagraph: DataGraph,
-  layer: Layer,
   s: DeviceId, // source node
   v: DeviceId,
   visited: Set<DeviceId>,
@@ -437,18 +408,12 @@ function layerDFS(
     if (visited.has(w)) {
       return;
     }
-    const adjacent = datagraph.getDevice(w);
     // mark node as visited
     visited.add(w);
 
-    if (layerIncluded(layerFromType(adjacent.getType()), layer)) {
-      // NOTE: we use strings because according to JavaScript, [1, 2] !== [1, 2]
-      const edgePair: EdgePair = [w, s];
-      edgePair.sort();
-      connections.set(edgePair.toString(), edgePair);
-    } else {
-      // continue with recursive search
-      layerDFS(datagraph, layer, s, w, visited, connections);
-    }
+    // NOTE: we use strings because according to JavaScript, [1, 2] !== [1, 2]
+    const edgePair: EdgePair = [w, s];
+    edgePair.sort();
+    connections.set(edgePair.toString(), edgePair);
   });
 }

src/types/view-devices/vDevice.ts

@@ -21,7 +21,7 @@ import { DeviceInfo } from "../../graphics/renderables/device_info";
 import { IpAddress } from "../../packets/ip";
 import { DeviceId, RemovedNodeData } from "../graphs/datagraph";
 import { DragDeviceMove, AddEdgeMove } from "../undo-redo";
-import { Layer } from "../layer";
+import { Layer, layerIncluded } from "../layer";
 import { EthernetFrame, MacAddress } from "../../packets/ethernet";
 import { GlobalContext } from "../../context";
 
@@ -101,6 +101,7 @@ export abstract class ViewDevice extends Container {
     this.interactive = true;
     this.cursor = "pointer";
     this.zIndex = ZIndexLevels.Device;
+    this.visible = layerIncluded(this.getLayer(), this.viewgraph.getLayer());
 
     // Add device ID label using the helper function
     this.addDeviceIdLabel();
@@ -203,9 +204,6 @@ export abstract class ViewDevice 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);
   }
@@ -215,7 +213,6 @@ export abstract class ViewDevice 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;
     }
   }