feat: add element deselection to various actions (#107)

Added calls to `deselectElement()` in multiple actions to ensure proper
reset of selected elements before performing new operations, improving
overall user interaction consistency.

* Select Layer
* New, Load, Save buttons
* Undo Redo

Closes #102

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

Author: pgallino

src/index.ts

@@ -1,6 +1,11 @@
 import { Application, Assets } from "pixi.js";
 
-import { loadFromFile, saveToFile, urManager } from "./types/viewportManager";
+import {
+  deselectElement,
+  loadFromFile,
+  saveToFile,
+  urManager,
+} from "./types/viewportManager";
 import { DataGraph } from "./types/graphs/datagraph";
 import { Packet } from "./types/packet";
 import { LeftBar } from "./graphics/left_bar";
@@ -89,10 +94,18 @@ async function loadAssets(otherPromises: Promise<void>[]) {
   const loadButton = document.getElementById("load-button");
   const saveButton = document.getElementById("save-button");
 
-  newButton.onclick = () => ctx.load(new DataGraph());
-  saveButton.onclick = () => saveToFile(ctx);
-  loadButton.onclick = () => loadFromFile(ctx);
-
+  newButton.onclick = () => {
+    deselectElement();
+    ctx.load(new DataGraph());
+  };
+  saveButton.onclick = () => {
+    deselectElement();
+    saveToFile(ctx);
+  };
+  loadButton.onclick = () => {
+    deselectElement();
+    loadFromFile(ctx);
+  };
   // Undo button’s logic
   const undoButton = document.getElementById(
     "undo-button",
@@ -197,6 +210,7 @@ async function loadAssets(otherPromises: Promise<void>[]) {
       ctx.changeViewGraph(selectedLayer);
       // LeftBar is reset
       leftBar.setButtonsByLayer(selectedLayer);
+      deselectElement();
     }
   };
 

src/types/undo-redo/undoRedoManager.ts

@@ -1,4 +1,5 @@
 import { ViewGraph } from "../graphs/viewgraph";
+import { deselectElement } from "../viewportManager";
 import { Move } from "./moves/move";
 
 export class UndoRedoManager {
@@ -28,6 +29,7 @@ export class UndoRedoManager {
     this.notifyListeners();
     console.log(this.redoBuf);
     console.log(this.undoBuf);
+    deselectElement();
   }
 
   redo(viewgraph: ViewGraph) {
@@ -40,6 +42,7 @@ export class UndoRedoManager {
     this.notifyListeners();
     console.log(this.redoBuf);
     console.log(this.undoBuf);
+    deselectElement();
   }
 
   canUndo(): boolean {