feat: add ID labels to devices (#38)

Author: pgallino

src/types/devices/device.ts

@@ -1,4 +1,11 @@
-import { Texture, Sprite, FederatedPointerEvent, Graphics } from "pixi.js";
+import {
+  Texture,
+  Sprite,
+  FederatedPointerEvent,
+  Graphics,
+  TextStyle,
+  Text,
+} from "pixi.js";
 import { Packet } from "./../packet";
 import { ViewGraph } from "./../graphs/viewgraph";
 import {
@@ -7,7 +14,7 @@ import {
   selectElement,
 } from "./../viewportManager";
 import { RightBar } from "../../index";
-import { Colors } from "../../utils";
+import { Colors, ZIndexLevels } from "../../utils";
 
 export const DEVICE_SIZE = 20;
 
@@ -59,11 +66,29 @@ export class Device extends Sprite {
     this.eventMode = "static";
     this.interactive = true;
     this.cursor = "pointer";
+    this.zIndex = ZIndexLevels.Device;
+
+    // Add device ID label using the helper function
+    this.addDeviceIdLabel();
 
     this.on("pointerdown", this.onPointerDown, this);
     this.on("click", this.onClick, this);
   }
 
+  // Function to add the ID label to the device
+  addDeviceIdLabel() {
+    const textStyle = new TextStyle({
+      fontSize: 12,
+      fill: Colors.Black,
+      align: "center",
+    });
+    const idText = new Text(`ID: ${this.id}`, textStyle);
+    idText.anchor.set(0.5);
+    idText.y = this.height - 15;
+    idText.zIndex = ZIndexLevels.Label;
+    this.addChild(idText); // Add the ID text as a child of the device
+  }
+
   getConnections(): { edgeId: number; adyacentId: number }[] {
     return Array.from(this.connections.entries()).map(
       ([edgeId, adyacentId]) => {
@@ -222,6 +247,8 @@ export class Device extends Sprite {
       // Change color to red and increase line thickness
       this.highlightMarker.stroke({ width: 3, color: Colors.Violet }); // Red and thicker
 
+      this.highlightMarker.zIndex = ZIndexLevels.Device;
+
       // Ensure the marker is in the same container as the viewport
       this.addChild(this.highlightMarker);
     }

src/types/edge.ts

@@ -3,7 +3,7 @@ import { ViewGraph } from "./graphs/viewgraph";
 import { Device } from "./devices/index"; // Import the Device class
 import { deselectElement, selectElement } from "./viewportManager";
 import { RightBar } from "..";
-import { Colors } from "../utils";
+import { Colors, ZIndexLevels } from "../utils";
 
 export interface Position {
   x: number;
@@ -62,6 +62,7 @@ export class Edge extends Graphics {
     this.moveTo(startPos.x, startPos.y);
     this.lineTo(endPos.x, endPos.y);
     this.stroke({ width: 3, color });
+    this.zIndex = ZIndexLevels.Edge;
     this.startPos = startPos;
     this.endPos = endPos;
   }

src/utils.ts

@@ -7,6 +7,7 @@ export enum Colors {
   Green = 0x0000ff,
   Red = 0xff0000,
   White = 0xffffff,
+  Black = 0x000000,
 }
 
 export function drawCircle(
@@ -20,4 +21,12 @@ export function drawCircle(
   graphics.beginFill(color);
   graphics.drawCircle(x, y, radius);
   graphics.endFill();
+  graphics.zIndex = ZIndexLevels.Packet;
+}
+
+export enum ZIndexLevels {
+  Device = 20,
+  Edge = 15,
+  Packet = 16,
+  Label = 19,
 }