feat: lock/unlock network & highlight multipleNodes

i18n/english.js

@@ -34,7 +34,8 @@ const ui = {
       title: "Shortcuts",
       blockquote: "Click on hotkey to update",
       goto: "Goto",
-      openCloseWiki: "Open/Close wiki"
+      openCloseWiki: "Open/Close wiki",
+      lock: "Lock/Unlock network"
     }
   }
 };

i18n/french.js

@@ -34,7 +34,8 @@ const ui = {
       title: "Raccourcis",
       blockquote: "Cliquer sur le raccourci clavier pour mettre à jour",
       goto: "Ouvrir",
-      openCloseWiki: "Ouverture/Fermeture du wiki"
+      openCloseWiki: "Ouverture/Fermeture du wiki",
+      lock: "Verrouiller/Déverrouiller le réseau"
     }
   }
 };

public/components/locker/locker.css

@@ -0,0 +1,49 @@
+#network-locker {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  z-index: 30;
+  display: flex;
+  height: 30px;
+  border-radius: 4px;
+  align-items: center;
+  box-sizing: border-box;
+  overflow: hidden;
+  background-color: var(--primary);
+  transition: 0.3s all linear;
+  cursor: pointer;
+}
+
+#network-locker:not(.enabled) {
+  background-color: var(--primary);
+}
+
+#network-locker.enabled {
+  background-color: #af2222;
+}
+
+#network-locker>i {
+  height: inherit;
+  padding: 0 5px;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  margin-right: 10px;
+  transition: 0.3s all linear;
+}
+
+#network-locker>i:not(.enabled) {
+  background-color: var(--primary-lighter);
+}
+
+#network-locker>i.enabled {
+  background-color: #cb3d3d;
+}
+
+#network-locker>p {
+  font-family: "mononoki";
+  padding-right: 10px;
+  display: flex;
+  align-items: center;
+  height: inherit;
+}

public/components/locker/locker.js

@@ -0,0 +1,54 @@
+
+export class Locker {
+  constructor(nsn) {
+    this.dom = document.getElementById("network-locker");
+    this.networkView = document.getElementById("network--view");
+    this.nsn = nsn;
+    this.unlock();
+
+    document.addEventListener("keydown", (event) => {
+      const hotkeys = JSON.parse(localStorage.getItem("hotkeys"));
+      switch (event.key.toUpperCase()) {
+        case hotkeys.lock: {
+          this.auto();
+          break;
+        }
+      }
+    });
+    this.dom.addEventListener("click", () => {
+      this.auto();
+    });
+  }
+
+  auto() {
+    this[this.locked ? "unlock" : "lock"]();
+  }
+
+  lock() {
+    this.dom.classList.add("enabled");
+    this.dom.querySelector("p").textContent = "LOCKED";
+    this.networkView.classList.add("locked");
+
+    const iconElement = this.dom.querySelector("i");
+    iconElement.classList.remove("icon-plus-squared");
+    iconElement.classList.add("icon-minus-squared");
+    iconElement.classList.add("enabled");
+
+    this.nsn.lock();
+    this.locked = true;
+  }
+
+  unlock() {
+    this.dom.classList.remove("enabled");
+    this.dom.querySelector("p").textContent = "UNLOCKED";
+    this.networkView.classList.remove("locked");
+
+    const iconElement = this.dom.querySelector("i");
+    iconElement.classList.remove("icon-minus-squared");
+    iconElement.classList.remove("enabled");
+    iconElement.classList.add("icon-plus-squared");
+
+    this.nsn.unlock();
+    this.locked = false;
+  }
+}

public/components/views/network/network.css

@@ -1,5 +1,14 @@
 #network--view {
   z-index: 10;
+  transition: 0.3s all linear;
+}
+
+#network--view:not(.locked) {
+  box-shadow: -2px -2px 10px #6d29b5b8 inset;
+}
+
+#network--view.locked {
+  box-shadow: -2px -2px 10px #b52929b8 inset;
 }
 
 #network-loader {

public/components/views/settings/settings.js

@@ -11,7 +11,8 @@ const kDefaultHotKeys = {
   home: "H",
   network: "N",
   settings: "S",
-  wiki: "W"
+  wiki: "W",
+  lock: "L"
 };
 
 export class Settings {

public/main.css

@@ -5,6 +5,7 @@
 @import url("./font/roboto/roboto.css");
 @import url("./font/mononoki/mononoki.css");
 
+@import url("./components/locker/locker.css");
 @import url("./components/popup/popup.css");
 @import url("./components/file-box/file-box.css");
 @import url("./components/expandable/expandable.css");

public/main.js

@@ -7,13 +7,15 @@ import { ViewNavigation } from "./components/navigation/navigation.js";
 import { Wiki } from "./components/wiki/wiki.js";
 import { SearchBar } from "./components/searchbar/searchbar.js";
 import { Popup } from "./components/popup/popup.js";
+import { Locker } from "./components/locker/locker.js";
 
 // Import Views Components
 import { Settings } from "./components/views/settings/settings.js";
 import { HomeView } from "./components/views/home/home.js";
 import { NetworkNavigation } from "./core/network-navigation.js";
 
 document.addEventListener("DOMContentLoaded", async() => {
+  window.locker = null;
   window.popup = new Popup();
   window.settings = await new Settings().fetchUserConfig();
   window.navigation = new ViewNavigation();
@@ -30,8 +32,28 @@ document.addEventListener("DOMContentLoaded", async() => {
   // Initialize vis Network
   NodeSecureNetwork.networkElementId = "dependency-graph";
   const nsn = new NodeSecureNetwork(secureDataSet);
+  window.locker = new Locker(nsn);
   new HomeView(secureDataSet, nsn);
 
+  // document.addEventListener("keydown", (event) => {
+  //   if (event.code === "KeyP") {
+  //     nsn.highlightMultipleNodes(
+  //       nsn.findNodeIds(
+  //         new Set([
+  //           "[email protected]",
+  //           "warp-ansi",
+  //           "[email protected]",
+  //           "@nodesecure/licenses-conformance"
+  //         ])
+  //       )
+  //     );
+  //   }
+  //   else if (event.code === "KeyL") {
+  //     nsn.lock();
+  //     console.log("locked: ", nsn.locked);
+  //   }
+  // });
+
   window.addEventListener("package-info-closed", () => {
     networkNavigation.currentNodeParams = null;
     packageInfoOpened = false;

views/index.html

@@ -147,8 +147,10 @@
         <p>[[=z.token('loading_nodes')]]</p>
         <p>[[=z.token('please_wait')]]</p>
       </div>
-      <div id="dependency-graph">
-
+      <div id="dependency-graph"></div>
+      <div id="network-locker">
+        <i class="icon-plus-squared"></i>
+        <p>UNLOCKED</p>
       </div>
     </div>
     <div id="settings--view" class="view hidden">
@@ -269,6 +271,10 @@ <h2><i class="icon-keyboard"></i>[[=z.token('settings.shortcuts.title')]]</h2>
             <input readonly id="wiki" class="hotkey">
             <label for="wiki">[[=z.token('settings.shortcuts.openCloseWiki')]]</label>
           </div>
+          <div>
+            <input readonly id="lock" class="hotkey">
+            <label for="lock">[[=z.token('settings.shortcuts.lock')]]</label>
+          </div>
         </div>
       </div>
     </div>
@@ -311,7 +317,7 @@ <h2><i class="icon-keyboard"></i>[[=z.token('settings.shortcuts.title')]]</h2>
       </div>
       <div class="icons">
         <i class="icon-link"></i>
-        <i class="icon-globe-alt-outline" style="display: none"></i>
+        <i class="icon-globe-alt-outline"></i>
       </div>
     </div>
     <div class="separator">

workspaces/vis-network/src/constants.js

@@ -15,6 +15,12 @@ export const COLORS = Object.freeze({
         color: "#FFF"
       }
     },
+    SELECTED_LOCK: {
+      color: "#6200EA",
+      font: {
+        color: "#FFF"
+      }
+    },
     DEFAULT: {
       color: "#E3F2FD",
       font: {
@@ -100,9 +106,10 @@ export const LABELS = Object.freeze({
     }
   },
   NONE: {
-    label: " ", // A space is used to simulate resetting the edge laebl
+    // A space is used to simulate resetting the edge laebl
+    label: " ",
     font: {
-      background: "Transparent",
+      background: "Transparent"
     }
   }
-})
+});