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,58 @@
+
+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();
+    });
+
+    this.nsn.network.on("highlight_done", () => {
+      this.unlock();
+    });
+  }
+
+  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-lock-open");
+    iconElement.classList.add("icon-lock");
+    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-lock");
+    iconElement.classList.remove("enabled");
+    iconElement.classList.add("icon-lock-open");
+
+    this.nsn.unlock();
+    this.locked = false;
+  }
+}

public/components/views/home/maintainers/maintainers.js

@@ -115,6 +115,22 @@ export class PopupMaintainer {
       linkElement.style.display = "none";
     }
 
+    const globeElement = clone.querySelector(".icon-globe-alt-outline");
+    const packagesList = [...this.data.packages]
+      .map((spec) => {
+        const { name, version } = utils.parseNpmSpec(spec);
+
+        return `${name}@${version}`;
+      });
+
+    globeElement.addEventListener("click", () => {
+      this.nsn.highlightMultipleNodes(
+        this.nsn.findNodeIds(new Set(packagesList))
+      );
+      window.popup.close();
+      window.navigation.setNavByName("network--view");
+    });
+
     const focusGlobElement = clone.querySelector(".icon-globe-alt-outline");
     focusGlobElement.addEventListener("click", () => {
       window.popup.close();

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/font/fontello/config.json

@@ -329,6 +329,18 @@
       "css": "globe-alt",
       "code": 59430,
       "src": "typicons"
+    },
+    {
+      "uid": "c1f1975c885aa9f3dad7810c53b82074",
+      "css": "lock",
+      "code": 59431,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "05376be04a27d5a46e855a233d6e8508",
+      "css": "lock-open",
+      "code": 61758,
+      "src": "fontawesome"
     }
   ]
-}
+}

public/font/fontello/fontello.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'fontello';
-  src: url('./fontello.eot?8115607');
-  src: url('./fontello.eot?8115607#iefix') format('embedded-opentype'),
-       url('./fontello.woff2?8115607') format('woff2'),
-       url('./fontello.woff?8115607') format('woff'),
-       url('./fontello.ttf?8115607') format('truetype'),
-       url('./fontello.svg?8115607#fontello') format('svg');
+  src: url('./fontello.eot?84631897');
+  src: url('./fontello.eot?84631897#iefix') format('embedded-opentype'),
+       url('./fontello.woff2?84631897') format('woff2'),
+       url('./fontello.woff?84631897') format('woff'),
+       url('./fontello.ttf?84631897') format('truetype'),
+       url('./fontello.svg?84631897#fontello') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -15,7 +15,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'fontello';
-    src: url('../../font/fontello.svg?8115607#fontello') format('svg');
+    src: url('../font/fontello.svg?84631897#fontello') format('svg');
   }
 }
 */
@@ -92,6 +92,7 @@
 .icon-code:before { content: '\e824'; } /* '' */
 .icon-globe-alt-outline:before { content: '\e825'; } /* '' */
 .icon-globe-alt:before { content: '\e826'; } /* '' */
+.icon-lock:before { content: '\e827'; } /* '' */
 .icon-info-circled:before { content: '\f085'; } /* '' */
 .icon-info-circled-alt:before { content: '\f086'; } /* '' */
 .icon-docs:before { content: '\f0c5'; } /* '' */
@@ -100,6 +101,7 @@
 .icon-terminal:before { content: '\f120'; } /* '' */
 .icon-fork:before { content: '\f126'; } /* '' */
 .icon-unlink:before { content: '\f127'; } /* '' */
+.icon-lock-open:before { content: '\f13e'; } /* '' */
 .icon-minus-squared:before { content: '\f146'; } /* '' */
 .icon-minus-squared-alt:before { content: '\f147'; } /* '' */
 .icon-doc-inv:before { content: '\f15b'; } /* '' */

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,6 +32,7 @@ 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);
 
   window.addEventListener("package-info-closed", () => {

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-lock-open"></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,18 @@ export const COLORS = Object.freeze({
         color: "#FFF"
       }
     },
+    SELECTED_GROUP: {
+      color: "#0D47A1",
+      font: {
+        color: "#FFF"
+      }
+    },
+    SELECTED_LOCK: {
+      color: "#1A237E",
+      font: {
+        color: "#FFF"
+      }
+    },
     DEFAULT: {
       color: "#E3F2FD",
       font: {
@@ -100,9 +112,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"
     }
   }
-})
+});