Supports double-clicking to select all elements and links on a line

svg/default.js

@@ -17,31 +17,33 @@ function main() {
   let links = Array.from(document.getElementsByClassName('link'));
 
   let elemsMap = {};
-  let linkedElems = {};
-  let linkedLinks = {};
+  let linkedFromElems = {};
+  let linkedToElems = {};
+  let linkedFromLinks = {};
+  let linkedToLinks = {};
 
   elems.forEach(elem => {
     let name = elem.classList[1];
     elemsMap[name] = elem;
-    linkedElems[name] = [];
-    linkedLinks[name] = [];
+    linkedFromElems[name] = [];
+    linkedToElems[name] = [];
+    linkedFromLinks[name] = [];
+    linkedToLinks[name] = [];
   });
 
   links.forEach(link => {
-    let name1 = link.classList[1];
-    let name2 = link.classList[2];
+    let fromName = link.classList[1];
+    let toName = link.classList[2];
 
-    if (elemsMap[name1]) {
-      if (elemsMap[name2]) {
-        let elem1 = elemsMap[name1];
-        let elem2 = elemsMap[name2];
+    if (elemsMap[fromName] && elemsMap[toName]) {
+      let fromElem = elemsMap[fromName];
+      let toElem = elemsMap[toName];
 
-        addItemToMapOfLists(linkedElems, name1, elem2);
-        addItemToMapOfLists(linkedElems, name2, elem1);
+      addItemToMapOfLists(linkedFromElems, toName, fromElem);
+      addItemToMapOfLists(linkedToElems, fromName, toElem);
 
-        addItemToMapOfLists(linkedLinks, name1, link);
-        addItemToMapOfLists(linkedLinks, name2, link);
-      }
+      addItemToMapOfLists(linkedFromLinks, toName, link);
+      addItemToMapOfLists(linkedToLinks, fromName, link);
     }
   });
 
@@ -63,6 +65,7 @@ function main() {
 
   function selectAll() {
     selectedElemName = null;
+    clearSelected();
 
     selectedElems = Array.from(elems);
     selectedElems.forEach(item => {
@@ -78,7 +81,6 @@ function main() {
   function selectElem(elemName) {
     if (elemName === selectedElemName) {
       selectAll();
-
     } else {
       clearSelected();
       selectedElemName = elemName;
@@ -86,23 +88,129 @@ function main() {
       elemsMap[elemName].classList.add('selected');
       selectedElems.push(elemsMap[elemName]);
 
-      linkedElems[elemName].forEach(linkedElem => {
+      linkedFromElems[elemName].forEach(linkedElem => {
+        // Avoid repetitive processing
+        if (selectedElems.includes(linkedElem)) {
+          return;
+        }
+        selectedElems.push(linkedElem);
+        linkedElem.classList.add('selected');
+      });
+      linkedToElems[elemName].forEach(linkedElem => {
+        // Avoid repetitive processing
+        if (selectedElems.includes(linkedElem)) {
+          return;
+        }
         selectedElems.push(linkedElem);
         linkedElem.classList.add('selected');
       });
 
-      linkedLinks[elemName].forEach(linkedLink => {
+      linkedFromLinks[elemName].forEach(linkedLink => {
+        // Avoid repetitive processing
+        if (selectedLinks.includes(linkedLink)) {
+          return;
+        }
+        selectedLinks.push(linkedLink);
+        linkedLink.classList.add('selected');
+      });
+      linkedToLinks[elemName].forEach(linkedLink => {
+        // Avoid repetitive processing
+        if (selectedLinks.includes(linkedLink)) {
+          return;
+        }
         selectedLinks.push(linkedLink);
         linkedLink.classList.add('selected');
       });
     }
   }
 
+  function selectElemOfLine(elemName) {
+    clearSelected();
+    selectedElemName = elemName;
+
+    elemsMap[elemName].classList.add('selected');
+    selectedElems.push(elemsMap[elemName]);
+
+    selectFromElem(elemName);
+    selectToElem(elemName);
+  }
+
+  function selectFromElem(elemName) {
+    console.log(elemName, "linkedFromLinks", linkedFromLinks[elemName])
+    linkedFromLinks[elemName].forEach(linkedLink => {
+      // Avoid repetitive processing
+      if (selectedLinks.includes(linkedLink)) {
+        return;
+      }
+      selectedLinks.push(linkedLink);
+      linkedLink.classList.add('selected');
+      console.log(elemName, "from link", linkedLink);
+    });
+
+    console.log(elemName, "linkedFromElems", linkedFromElems[elemName])
+    linkedFromElems[elemName].forEach(linkedElem => {
+      // break loop reference
+      if (selectedElems.includes(linkedElem)) {
+        return;
+      }
+      selectedElems.push(linkedElem);
+      linkedElem.classList.add('selected');
+      console.log(elemName, "from elem", linkedElem);
+
+      let nextName = linkedElem.classList[1];
+      selectFromElem(nextName);
+    });
+  }
+
+  function selectToElem(elemName) {
+    console.log(elemName, "linkedToLinks", linkedToLinks[elemName]);
+    linkedToLinks[elemName].forEach(linkedLink => {
+      // Avoid repetitive processing
+      if (selectedLinks.includes(linkedLink)) {
+        return;
+      }
+      selectedLinks.push(linkedLink);
+      linkedLink.classList.add('selected');
+      console.log(elemName, "to link", linkedLink);
+    });
+
+    console.log(elemName, "linkedToElems", linkedToElems[elemName])
+    linkedToElems[elemName].forEach(linkedElem => {
+      // break loop reference
+      if (selectedElems.includes(linkedElem)) {
+        return;
+      }
+      selectedElems.push(linkedElem);
+      linkedElem.classList.add('selected');
+      console.log(elemName, "to elem", linkedElem);
+
+      let nextName = linkedElem.classList[1];
+      selectToElem(nextName);
+    });
+  }
+
   Object.keys(elemsMap).forEach(name => {
-    elemsMap[name].onclick = () => { selectElem(name); };
+    elemsMap[name].onclick = (event) => {
+      console.log("onclick: ", event);
+      selectElem(name);
+    };
+    // double click, and then selectElemOfLine
+    elemsMap[name].ondblclick = (event) => {
+      console.log("ondblclick", event);
+      selectElemOfLine(name);
+    };
   });
 
   selectAll();
+
+  document.querySelector('svg').addEventListener('keydown', event => {
+    console.log('svg keydown: ', event.key);
+    // Press Escape, and then selectAll
+    // https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/
+    if (event.code === "Escape") {
+      selectAll();
+    }
+  });
 }
 
 document.addEventListener('DOMContentLoaded', (event) => {