fix: pause packet animation progress (#44)

Closes #42

Author: MegaRedHand

src/index.ts

@@ -21,7 +21,7 @@ import {
   selectElement,
 } from "./types/viewportManager";
 import { DataGraph } from "./types/graphs/datagraph";
-import { packetTicker } from "./types/packet";
+import { Packet } from "./types/packet";
 
 const WORLD_WIDTH = 10000;
 const WORLD_HEIGHT = 10000;
@@ -388,19 +388,18 @@ export class RightBar {
       pauseIcon.src = PlaySvg;
       pauseButton.style.backgroundColor = "#f44336";
       pauseButton.title = "Resume";
-      packetTicker.stop();
+      Packet.pauseAnimation();
     } else {
       pauseIcon.src = PauseSvg;
       pauseButton.style.backgroundColor = "#228b22";
       pauseButton.title = "Pause";
-      packetTicker.start();
+      Packet.unpauseAnimation();
     }
   };
 
   pauseButton.onclick = () => {
     triggerPause();
   };
-  packetTicker.start();
 
   document.body.onkeyup = function (e) {
     if (e.key === " " || e.code === "Space") {

src/types/devices/device.ts

@@ -130,8 +130,6 @@ export class Device extends Sprite {
     const pathEdges = pathEdgeIds.map((id) => this.viewgraph.getEdge(id));
 
     const packet = new Packet(packetType, speed, this.id, destinationId);
-    const stage = this.viewgraph.getViewport();
-    stage.addChild(packet);
     packet.animateAlongPath(pathEdges, this.id);
   }
 

src/types/edge.ts

@@ -4,6 +4,7 @@ import { Device } from "./devices/index"; // Import the Device class
 import { deselectElement, selectElement } from "./viewportManager";
 import { RightBar } from "..";
 import { Colors, ZIndexLevels } from "../utils";
+import { Packet } from "./packet";
 
 export interface Position {
   x: number;
@@ -65,6 +66,12 @@ export class Edge extends Graphics {
     this.zIndex = ZIndexLevels.Edge;
     this.startPos = startPos;
     this.endPos = endPos;
+
+    this.children.forEach((child) => {
+      if (child instanceof Packet) {
+        child.updatePosition();
+      }
+    });
   }
 
   select() {

src/types/packet.ts

@@ -9,8 +9,6 @@ import { selectElement } from "./viewportManager";
 import { circleGraphicsContext, Colors, ZIndexLevels } from "../utils";
 import { RightBar } from "../index";
 
-export const packetTicker = new Ticker();
-
 const contextPerPacketType: Record<string, GraphicsContext> = {
   IP: circleGraphicsContext(Colors.Green, 0, 0, 5),
   ICMP: circleGraphicsContext(Colors.Red, 0, 0, 5),
@@ -29,6 +27,16 @@ export class Packet extends Graphics {
   sourceId: number;
   destinationId: number;
 
+  static animationPaused = false;
+
+  static pauseAnimation() {
+    Packet.animationPaused = true;
+  }
+
+  static unpauseAnimation() {
+    Packet.animationPaused = false;
+  }
+
   constructor(
     type: string,
     speed: number,
@@ -89,39 +97,45 @@ export class Packet extends Graphics {
       console.error(
         "No se puede animar un paquete a lo largo de un camino vacío",
       );
+      this.destroy();
       return;
     }
     console.log(path);
     this.currentPath = path;
     this.currentEdge = this.currentPath.shift();
     this.currentStart = start;
-    // TODO: use global ticker, and add "shouldProgress" flag
-    packetTicker.add(this.updateProgress, this);
+    // Add packet as a child of the current edge
+    this.currentEdge.addChild(this);
+    this.updatePosition();
+    Ticker.shared.add(this.animationTick, this);
   }
 
-  updateProgress(ticker: Ticker) {
+  animationTick(ticker: Ticker) {
     if (this.progress >= 1) {
       this.progress = 0;
+      this.removeFromParent();
       if (this.currentPath.length == 0) {
-        ticker.remove(this.updateProgress, this);
-        this.removeFromParent();
+        ticker.remove(this.animationTick, this);
+        this.destroy();
         return;
       }
       this.currentStart = this.currentEdge.otherEnd(this.currentStart);
       this.currentEdge = this.currentPath.shift();
+      this.currentEdge.addChild(this);
+    }
+    if (!Packet.animationPaused) {
+      this.progress += (ticker.deltaMS * this.speed) / 100000;
     }
-    this.progress += (ticker.deltaMS * this.speed) / 100000;
 
+    this.updatePosition();
+  }
+
+  updatePosition() {
     const current = this.currentEdge;
     const start = this.currentStart;
 
-    console.log("current: ", current);
-    console.log("start: ", start);
-
     const startPos = current.nodePosition(start);
-    console.log("startPos: ", startPos);
     const endPos = current.nodePosition(current.otherEnd(start));
-    console.log("endPos: ", endPos);
     this.setPositionAlongEdge(startPos, endPos, this.progress);
   }