feat: lock/unlock network & highlight multipleNodes (#314)

Author: fraxken

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,71 @@
+
+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() {
+    const wasLocked = this.locked === true;
+    this[this.locked ? "unlock" : "lock"]();
+
+    if (wasLocked) {
+      if (window.networkNav.currentNodeParams === null) {
+        this.nsn.resetHighlight();
+      }
+      else {
+        this.nsn.neighbourHighlight(window.networkNav.currentNodeParams);
+      }
+    }
+  }
+
+  lock(force = false) {
+    if (window.networkNav.currentNodeParams !== null && !force) {
+      return;
+    }
+    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/searchbar/searchbar.js

@@ -104,7 +104,6 @@ export class SearchBar {
         if (this.activeQuery.size === 0) {
           this.allSearchPackages.forEach((element) => element.classList.add("hide"));
         }
-
         // if backspace is received and that we have active queries
         // then we want the query to be re-inserted in the input field!
         else if (event.key === "Backspace") {
@@ -116,6 +115,17 @@ export class SearchBar {
             confirmBackspace = true;
           }
         }
+        else if (event.key === "Enter") {
+          const nodeIds = [];
+
+          for (const pkgElement of this.allSearchPackages) {
+            if (!pkgElement.classList.contains("hide")) {
+              nodeIds.push(Number(pkgElement.getAttribute("data-value")));
+            }
+          }
+
+          this.focusMultipleNodeIds(nodeIds);
+        }
 
         return;
       }
@@ -164,6 +174,7 @@ export class SearchBar {
         this.input.value.slice(currentActiveQueryName.length + 1).trim();
 
       this.showHelperByInputText(text);
+
       if (text.length === 0) {
         return;
       }
@@ -186,6 +197,7 @@ export class SearchBar {
           return;
         }
       }
+
       this.showResultsByIds(matchingIds);
     });
 
@@ -201,7 +213,7 @@ export class SearchBar {
     const self = this;
     for (const domElement of this.allSearchPackages) {
       domElement.addEventListener("click", function clikEvent() {
-        self.resultRowClick(this.getAttribute("data-value"));
+        self.focusNodeById(this.getAttribute("data-value"));
       });
     }
   }
@@ -381,10 +393,27 @@ export class SearchBar {
     return storedIds.size === 0 ? matchingIds : new Set([...matchingIds].filter((value) => storedIds.has(value)));
   }
 
-  resultRowClick(dataValue) {
+  focusNodeById(nodeId) {
     window.navigation.setNavByName("network--view");
     this.delayOpenSearchBar = false;
-    this.network.focusNodeById(dataValue);
+    this.network.focusNodeById(nodeId);
+    this.close();
+
+    setTimeout(() => {
+      this.delayOpenSearchBar = true;
+    }, 5);
+  }
+
+  focusMultipleNodeIds(nodeIds) {
+    window.navigation.setNavByName("network--view");
+    this.delayOpenSearchBar = false;
+
+    if (window.locker.locked) {
+      this.network.resetHighlight();
+    }
+    this.network.highlightMultipleNodes(nodeIds);
+    window.locker.lock();
+
     this.close();
 
     setTimeout(() => {

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

@@ -65,6 +65,7 @@ export class Maintainers {
         person.classList.add("hidden");
       }
       person.addEventListener("click", () => {
+        // TODO: close package info?
         window.popup.open(
           new PopupMaintainer(name, data, this.nsn).render()
         );
@@ -115,10 +116,34 @@ export class PopupMaintainer {
       linkElement.style.display = "none";
     }
 
-    const focusGlobElement = clone.querySelector(".icon-globe-alt-outline");
-    focusGlobElement.addEventListener("click", () => {
+    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", () => {
+      const nodeIds = [...this.nsn.findNodeIds(new Set(packagesList))];
+
+      this.nsn.resetHighlight();
+      this.nsn.highlightMultipleNodes(nodeIds);
+      if (!window.locker.locked) {
+        window.locker.lock(true);
+      }
+
       window.popup.close();
       window.navigation.setNavByName("network--view");
+
+      const moveTo = window.networkNav.currentNodeParams === null ||
+        !nodeIds.includes(window.networkNav.currentNodeParams.nodes[0]);
+      if (moveTo) {
+        this.nsn.network.moveTo({
+          position: this.nsn.network.getPosition(nodeIds[0]),
+          animation: true
+        });
+      }
     });
 
     this.generatePackagesList(clone);

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'; } /* '' */