fix: Save canvas position (#187)

This pull request enhances viewport management in the GlobalContext and
Viewport classes by adding support for saving, restoring, and centering
the view.

## Key Changes:
### On code
- GlobalContext: Added restorePosition and centerView to manage viewport
state.

- Viewport: Implemented methods to save/restore position and zoom, and
to set the center.

- viewportManager.ts: Automatically centers the viewport after loading a
file.

### On functionalities
- The viewport's position and zoom now persist after reloading.
- Pressing the "New" button centers the viewport in the middle of the
canvas.
- Loading a graph from a file centers the viewport on the graph's
centroid (Similar to a center of mass of a particle system).

## Known Bugs and Enhancements
- Pressing the "New" or "Load" buttons updates the layer in the
selector, but not in the left sidebar, causing inconsistencies in the
UI.
- The canvas boundaries are not visually indicated, which can be
problematic when building a network near the edges without realizing
you've reached the limit.

#### Before pressing new 

![image](https://github.com/user-attachments/assets/9f52ccf0-acb6-48e1-a3ed-17451d6fe905)

#### Afther pressing new

![image](https://github.com/user-attachments/assets/cb377e5f-8f20-4f98-8c0e-12a18aadd8a6)

#### Before load

![image](https://github.com/user-attachments/assets/bbd943bf-e05b-48ba-8b6c-f463fb9a5307)

#### After load

![image](https://github.com/user-attachments/assets/0b37d5b5-30ee-4fc7-a272-9cf4170dca5d)

On both cases, the link layer is selected but the left bar only shows
hosts



Closes #92

---------

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

Author: V-SANT

src/context.ts

@@ -79,6 +79,7 @@ export class GlobalContext {
     speedMultiplier: SpeedMultiplier = new SpeedMultiplier(1),
   ) {
     this.setNetwork(datagraph, layer);
+    this.viewport.restorePosition();
     this.setSpeedMultiplier(speedMultiplier);
     this.setupAutoSave();
     saveToLocalStorage(this);
@@ -118,6 +119,29 @@ export class GlobalContext {
     this.speedMultiplier.unpause();
   }
 
+  centerView() {
+    const deviceCount = this.datagraph.getDeviceCount();
+
+    if (deviceCount === 0) {
+      this.viewport.setCenter();
+      return;
+    }
+
+    const devices = this.datagraph.getDevices();
+    let sumX = 0,
+      sumY = 0;
+
+    for (const [, device] of devices) {
+      sumX += device.x;
+      sumY += device.y;
+    }
+
+    const centerX = sumX / deviceCount;
+    const centerY = sumY / deviceCount;
+
+    this.viewport.setCenter(centerX, centerY);
+  }
+
   changeSpeedMultiplier(speedMultiplier: number) {
     this.speedMultiplier.setSpeed(speedMultiplier);
     saveToLocalStorage(this);

src/graphics/viewport.ts

@@ -28,47 +28,82 @@ export class Viewport extends pixi_viewport.Viewport {
       worldHeight: WORLD_HEIGHT,
       events: events,
     });
-    this.moveCenter(WORLD_WIDTH / 2, WORLD_HEIGHT / 2);
+
     this.sortableChildren = true;
     this.initializeMovement();
-
     this.addChild(new Background());
 
-    // Track drag start
+    // Restore saved position
+    this.restorePosition();
+
     this.on("drag-start", () => {
       this.isDragging = true;
     });
 
-    // Track drag end
     this.on("drag-end", () => {
       setTimeout(() => {
         this.isDragging = false;
-      }, 50); // Small delay to ensure click doesn't trigger after drag
+      }, 50);
+      this.savePosition(); // Save position after movement
+    });
+
+    this.on("zoomed-end", () => {
+      this.savePosition(); // Save position after zoom
     });
 
-    // Only deselect if it's a genuine click, not a drag
     const onClick = (event: FederatedPointerEvent) => {
       if (!this.isDragging && event.target === this) {
         deselectElement();
       }
     };
     this.on("click", onClick, this);
-    // NOTE: this is "click" for mobile devices
     this.on("tap", onClick, this);
   }
 
+  // Save the current position of the viewport
+  private savePosition() {
+    localStorage.setItem(
+      "viewportPosition",
+      JSON.stringify({ x: this.x, y: this.y }),
+    );
+    localStorage.setItem(
+      "viewportZoom",
+      JSON.stringify({ x: this.scale.x, y: this.scale.y }),
+    );
+  }
+
+  // Restore the saved position of the viewport
+  public restorePosition() {
+    const savedPosition = localStorage.getItem("viewportPosition");
+    const savedZoom = localStorage.getItem("viewportZoom");
+
+    if (savedPosition) {
+      const { x, y } = JSON.parse(savedPosition);
+      this.position.set(x, y);
+    } else {
+      this.position.set(WORLD_WIDTH / 2, WORLD_HEIGHT / 2);
+    }
+
+    if (savedZoom) {
+      const { x, y } = JSON.parse(savedZoom);
+      this.scale.set(x, y);
+    } else {
+      this.scale.set(1);
+    }
+  }
+
   clear() {
     this.removeChildren();
     this.addChild(new Background());
-    this.moveCenter(WORLD_WIDTH / 2, WORLD_HEIGHT / 2);
+    localStorage.removeItem("viewportPosition");
+    localStorage.removeItem("viewportZoom");
   }
 
   private initializeMovement() {
     this.drag()
       .pinch()
       .wheel()
       .clamp({ direction: "all" })
-      // TODO: revisit when all icons are finalized
       .clampZoom({
         minHeight: 200,
         minWidth: 200,
@@ -88,4 +123,8 @@ export class Viewport extends pixi_viewport.Viewport {
       this.plugins.pause(plugin);
     }
   }
+
+  setCenter(x: number = WORLD_WIDTH / 2, y: number = WORLD_HEIGHT / 2) {
+    this.moveCenter(x, y);
+  }
 }

src/handlers/triggers.ts

@@ -13,6 +13,7 @@ import { DataGraph } from "../types/graphs/datagraph";
 export const triggerNew = (ctx: GlobalContext) => {
   deselectElement(); // Deselect any currently selected element
   ctx.load(new DataGraph(ctx)); // Load a new empty DataGraph into the context
+  ctx.centerView(); // Center the view on the new network
 };
 
 // Function to save the network

src/types/viewportManager.ts

@@ -176,8 +176,8 @@ export function loadFromFile(ctx: GlobalContext) {
       const jsonData = readerEvent.target.result as string;
       const graphData: GraphData = JSON.parse(jsonData);
       ctx.load(DataGraph.fromData(graphData, ctx));
-
       console.log("Graph loaded successfully.");
+      ctx.centerView();
     };
   };