feat: render invisible devices as draggable circles (#245)

1. Non-visible devices cannot be selected
Devices that are not visible (including drag circles) can no longer be
selected, connected, or deleted.

2. Merged edges cannot be deleted
Edges that are part of a merged group (i.e., connected to other edges)
cannot be deleted. Only individual, unmerged edges can be removed.

3. Drag circles are for reorganization only
The drag circle functionality is intended solely for moving and
reorganizing devices. It is not possible to connect devices using drag
circles.


![image](https://github.com/user-attachments/assets/8e4a7aec-81bf-44ae-aff6-8c72fd0fe671)


![image](https://github.com/user-attachments/assets/2f84e74d-74f2-4ed3-bd5c-d809f528b9a4)


![image](https://github.com/user-attachments/assets/5e1589f1-ed47-4292-bd5c-800deedd4348)

---------

Co-authored-by: Tomás Grüner <[email protected]>

Author: pgallino

src/graphics/renderables/multi_edge_info.ts

@@ -24,10 +24,10 @@ export class MultiEdgeInfo extends BaseInfo {
       const fromDevice = edge.viewgraph.getDevice(edge.data.from.id);
       const toDevice = edge.viewgraph.getDevice(edge.data.to.id);
 
-      if (fromDevice && fromDevice.visible) {
+      if (fromDevice && fromDevice.isVisible()) {
         visibleDevices.add(fromDevice.id);
       }
-      if (toDevice && toDevice.visible) {
+      if (toDevice && toDevice.isVisible()) {
         visibleDevices.add(toDevice.id);
       }
     });

src/graphics/renderables/program_info.ts

@@ -76,7 +76,7 @@ function otherDevicesIp(viewgraph: ViewGraph, srcId: DeviceId) {
     .getDevices()
     .filter(
       (device) =>
-        device.visible &&
+        device.isVisible() &&
         device.getType() !== DeviceType.Switch &&
         device.id !== srcId,
     )

src/types/edge.ts

@@ -65,6 +65,7 @@ export class Edge extends Graphics {
   }
 
   getDeviceIds(): DeviceId[] {
+    if (!this.data) return [];
     return [this.data.from.id, this.data.to.id];
   }
 
@@ -107,13 +108,26 @@ export class Edge extends Graphics {
 
   select() {
     this.highlightedEdges = this.viewgraph.findConnectedEdges(this);
-    this.highlightedEdges.forEach((edge) => edge.highlight());
+    this.highlightedEdges.forEach((edge) => {
+      edge.highlight();
+      // Highlight the color of the circles connected to this edge
+      edge.getDeviceIds().forEach((deviceId) => {
+        const device = this.viewgraph.getDevice(deviceId);
+        device.setCircleColor(Colors.Violet);
+      });
+    });
     this.showInfo();
   }
 
   deselect() {
-    // remove highlight from all edges
-    this.highlightedEdges.forEach((edge) => edge.removeHighlight());
+    this.highlightedEdges.forEach((edge) => {
+      edge.removeHighlight();
+      // Reset the color of the circles connected to this edge
+      edge.getDeviceIds().forEach((deviceId) => {
+        const device = this.viewgraph.getDevice(deviceId);
+        device.setCircleColor(Colors.Lightblue);
+      });
+    });
     this.highlightedEdges = [];
   }
 
@@ -126,7 +140,7 @@ export class Edge extends Graphics {
   }
 
   showInfo() {
-    if (this.highlightedEdges && this.highlightedEdges.length > 1) {
+    if (this.isMerged()) {
       const multiEdgeInfo = new MultiEdgeInfo(this.highlightedEdges);
       RightBar.getInstance().renderInfo(multiEdgeInfo);
     } else {
@@ -135,6 +149,10 @@ export class Edge extends Graphics {
     }
   }
 
+  isMerged(): boolean {
+    return this.highlightedEdges.length > 1;
+  }
+
   destroy(): void {
     deselectElement();
     this.removeTooltips();
@@ -188,8 +206,8 @@ export class Edge extends Graphics {
     const dy = device2.y - device1.y;
     const angle = Math.atan2(dy, dx);
 
-    const n1IsVisible = device1.visible;
-    const n2IsVisible = device2.visible;
+    const n1IsVisible = device1.isVisible();
+    const n2IsVisible = device2.isVisible();
 
     const offsetX1 = n1IsVisible
       ? ((device1.width + 5) / 2) * Math.cos(angle)
@@ -299,7 +317,7 @@ export class Edge extends Graphics {
     // Check the visibility of the starting device
     const device1 = this.viewgraph.getDevice(this.data.from.id);
     if (this.startTooltip) {
-      if (device1 && device1.visible) {
+      if (device1 && device1.isVisible()) {
         // If the starting device is visible, update the tooltip position
         this.startTooltip.x =
           this.startPos.x + (isStartLeft ? offsetX : -offsetX);
@@ -314,7 +332,7 @@ export class Edge extends Graphics {
     // Check the visibility of the ending device
     const device2 = this.viewgraph.getDevice(this.data.to.id);
     if (this.endTooltip) {
-      if (device2 && device2.visible) {
+      if (device2 && device2.isVisible()) {
         // If the ending device is visible, update the tooltip position
         this.endTooltip.x = this.endPos.x + (isStartLeft ? -offsetX : offsetX);
         this.endTooltip.y = this.endPos.y + offsetY;

src/types/graphs/viewgraph.ts

@@ -214,15 +214,20 @@ export class ViewGraph {
       // For each iteration, update visibility of all edges.
       // This takes into account currently visible edges and devices.
       for (const [, , edge] of this.graph.getAllEdges()) {
-        const previousVisibility = edge.visible;
+        const previousVisibility = edge.isVisible();
         edge.updateVisibility();
-        hadChanges ||= previousVisibility !== edge.visible;
+        hadChanges ||= previousVisibility !== edge.isVisible();
       }
       if (!hadChanges) {
         break;
       }
     }
 
+    // Update the devices aspect
+    for (const [, device] of this.graph.getAllVertices()) {
+      device.updateDevicesAspect();
+    }
+
     // warn Packet Manager that the layer has been changed
     this.packetManager.layerChanged(newLayer);
 
@@ -250,7 +255,7 @@ export class ViewGraph {
 
     const vertexFilter = (device: ViewDevice, id: DeviceId): boolean => {
       // If device is visible, add it to the set and stop traversal
-      if (device.visible && id !== deviceId) {
+      if (device.isVisible() && id !== deviceId) {
         visibleDevices.push(id);
         return false;
       }
@@ -277,15 +282,15 @@ export class ViewGraph {
         return false;
       }
       // If device is visible, add it to the set and stop traversal
-      if (device.visible) {
+      if (device.isVisible()) {
         visibleDevices.add(id);
         return false;
       }
       return true;
     };
 
     // Avoid invisible edges
-    const edgeFilter = (edge: Edge) => edge.visible;
+    const edgeFilter = (edge: Edge) => edge.isVisible();
 
     this.graph.dfs(startId, { vertexFilter, edgeFilter });
     return visibleDevices.size > 0;
@@ -501,7 +506,7 @@ export class ViewGraph {
 
       for (const nodeId of currentEdge.getDeviceIds()) {
         const device = this.getDevice(nodeId);
-        if (device && device.visible) {
+        if (device && device.isVisible()) {
           continue;
         }
         const edges = this.getConnections(nodeId);

src/types/view-devices/vDevice.ts

@@ -33,6 +33,8 @@ import {
   showTooltip,
 } from "../../graphics/renderables/canvas_tooltip_manager";
 
+const CIRCLE_RADIUS = 6; // Radius of the circle for drag and drop
+
 export enum DeviceType {
   Host = 0,
   Router = 1,
@@ -60,6 +62,10 @@ export function layerFromType(type: DeviceType) {
 export abstract class ViewDevice extends Container {
   private sprite: Sprite;
   private tooltip: Text | null = null; // Tooltip como un Text de PIXI.js
+  private isDragCircle = false;
+  private circleGraphic?: Graphics;
+  private idLabel?: Text;
+  private isVisibleFlag = true; // Flag to track visibility
 
   readonly id: DeviceId;
   readonly viewgraph: ViewGraph;
@@ -124,10 +130,10 @@ export abstract class ViewDevice extends Container {
     this.interactive = true;
     this.cursor = "pointer";
     this.zIndex = ZIndexLevels.Device;
-    this.updateVisibility();
 
     // Add device ID label using the helper function
     this.addDeviceIdLabel();
+    this.updateVisibility();
 
     // Set up tooltip behavior
     this.setupHoverTooltip();
@@ -146,6 +152,7 @@ export abstract class ViewDevice extends Container {
 
   private setupHoverTooltip() {
     this.on("mouseover", () => {
+      if (this.isDragCircle) return;
       const currentLayer = this.ctx.getCurrentLayer();
       const tooltipMessage = this.getTooltipDetails(currentLayer);
       this.tooltip = showTooltip(
@@ -162,18 +169,81 @@ export abstract class ViewDevice extends Container {
     });
   }
 
+  setCircleColor(color: number) {
+    if (!this.isDragCircle) return;
+    if (this.circleGraphic) {
+      this.circleGraphic.clear();
+      this.circleGraphic.circle(0, 0, CIRCLE_RADIUS);
+      this.circleGraphic.fill({ color });
+    }
+  }
+
   /**
    * Abstract method to get tooltip details based on the layer.
    * Must be implemented by derived classes.
    */
   abstract getTooltipDetails(layer: Layer): string;
 
+  updateDevicesAspect() {
+    if (!this.isVisibleFlag) {
+      const edges = this.viewgraph
+        .getConnections(this.id)
+        .filter((e) => e.isVisible());
+      // if it doesn't have visible edges, hide it completely
+      if (!edges || edges.length === 0) {
+        this.visible = false;
+        return;
+      }
+      // if it has visible edges, show it as a drag circle
+      this.visible = true;
+      this.setAsDragCircle();
+    } else {
+      // if it is in the current layer, show it as a normal device
+      this.visible = true;
+      this.setAsNormalDevice();
+    }
+  }
+
   updateVisibility() {
-    this.visible = layerIncluded(this.getLayer(), this.viewgraph.getLayer());
+    this.isVisibleFlag = layerIncluded(
+      this.getLayer(),
+      this.viewgraph.getLayer(),
+    );
+  }
+
+  private setAsDragCircle() {
+    if (this.isDragCircle) return;
+    this.isDragCircle = true;
+
+    if (this.sprite) this.sprite.visible = false;
+    if (this.idLabel) this.idLabel.visible = false;
+    if (!this.circleGraphic) {
+      this.circleGraphic = new Graphics();
+      this.circleGraphic.circle(0, 0, CIRCLE_RADIUS);
+      this.circleGraphic.fill({ color: Colors.Lightblue });
+      this.addChild(this.circleGraphic);
+    }
+    this.eventMode = "static";
+    this.interactive = true;
+    this.cursor = "grab";
+  }
+
+  private setAsNormalDevice() {
+    if (!this.isDragCircle) return;
+    this.isDragCircle = false;
+
+    if (this.sprite) this.sprite.visible = true;
+    if (this.idLabel) this.idLabel.visible = true;
+    if (this.circleGraphic) {
+      this.removeChild(this.circleGraphic);
+      this.circleGraphic.destroy();
+      this.circleGraphic = undefined;
+    }
+    this.cursor = "pointer";
   }
 
   isVisible(): boolean {
-    return this.visible;
+    return this.isVisibleFlag;
   }
 
   // Function to add the ID label to the device
@@ -188,6 +258,7 @@ export abstract class ViewDevice extends Container {
     idText.anchor.set(0.5);
     idText.y = this.height * 0.8;
     idText.zIndex = ZIndexLevels.Label;
+    this.idLabel = idText;
     this.addChild(idText); // Add the ID text as a child of the device
   }
 
@@ -208,7 +279,6 @@ export abstract class ViewDevice extends Container {
     }
     ViewDevice.dragTarget = this;
 
-    // Guardar posición inicial
     ViewDevice.startPosition = { x: this.x, y: this.y };
     event.stopPropagation();
 
@@ -229,6 +299,13 @@ export abstract class ViewDevice extends Container {
       ViewDevice.connectionTarget = null;
       return;
     }
+
+    // if the device is not visible, ignore
+    if (!this.isVisibleFlag || !ViewDevice.connectionTarget.isVisibleFlag) {
+      ViewDevice.connectionTarget = null;
+      return;
+    }
+
     // Connect both devices
     const n1 = ViewDevice.connectionTarget.id;
     const n2 = this.id;
@@ -240,6 +317,10 @@ export abstract class ViewDevice extends Container {
   }
 
   selectToConnect() {
+    // if the device is not visible, do nothing
+    if (!this.isVisibleFlag) {
+      return;
+    }
     if (ViewDevice.connectionTarget) {
       ViewDevice.connectionTarget = null;
       return;
@@ -287,6 +368,7 @@ export abstract class ViewDevice extends Container {
   }
 
   select() {
+    if (this.isDragCircle) return;
     this.highlight(); // Calls highlight on select
     this.showInfo();
   }

src/types/viewportManager.ts

@@ -25,7 +25,7 @@ export const urManager = new UndoRedoManager();
 export function selectElement(element: Selectable) {
   deselectElement();
 
-  if (element) {
+  if (element && element.isVisible()) {
     selectedElement = element;
     element.select();
   }
@@ -87,6 +87,10 @@ document.addEventListener("keydown", (event) => {
         const move = new RemoveDeviceMove(currLayer, selectedElement.id);
         urManager.push(viewgraph, move);
       } else if (isEdge(selectedElement)) {
+        // if the edge is merged, do not delete it
+        if (selectedElement.isMerged()) {
+          return;
+        }
         const ends = selectedElement.getDeviceIds();
         const move = new RemoveEdgeMove(currLayer, ends[0], ends[1]);
         urManager.push(viewgraph, move);