refactor toggle functionality + fix reconnect child/parent

js/main.js

@@ -1,13 +1,11 @@
 import { errorMsg, loadMCParticles } from "./tools.js";
-import { reconnect } from "./menu/filter.js";
-import Toggle from "./menu/toggle.js";
-
-const toggle = new Toggle();
+import { PdgToggle } from "./menu/show-pdg.js";
+import { Filter } from "./menu/filter.js";
 
 const canvas = document.getElementById("canvas");
 const ctx = canvas.getContext("2d");
 
-const filterToggle = document.getElementById("filter");
+const toggleMenu = document.getElementById("toggle");
 
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
@@ -345,22 +343,27 @@ document
     start();
     hideInputModal();
     window.scroll((canvas.width - window.innerWidth) / 2, 0);
-    toggle.init(infoBoxes, () => {
-      drawAll(parentLinks, childrenLinks, infoBoxes);
-    });
 
-    filterToggle.addEventListener("click", () => {
-      const filteringFunction = (particle) => {
-        return particle.charge === 0;
-      };
+    toggleMenu.style.display = "flex";
+
+    const pdgToggle = new PdgToggle("show-pdg");
+    pdgToggle.init(() => {
+      pdgToggle.toggle(infoBoxes, () => {
+        drawAll(parentLinks, childrenLinks, infoBoxes);
+      });
+    });
 
-      const [newParentLinks, newChildrenLinks, filteredParticles] = reconnect(
+    const filteringFunction = (particle) => {
+      return particle.charge === 0;
+    };
+    const filter = new Filter("filter");
+    filter.init(() => {
+      filter.toggle(
         filteringFunction,
         parentLinks,
         childrenLinks,
-        infoBoxes
+        infoBoxes,
+        drawAll
       );
-
-      drawAll(newParentLinks, newChildrenLinks, filteredParticles);
     });
   });

js/menu/filter.js

@@ -1,11 +1,27 @@
 import { Link } from "../objects.js";
+import { Toggle } from "./toggle.js";
 
-export function reconnect(
-  criteriaFunction,
-  parentLinks,
-  childrenLinks,
-  particles
-) {
+export class Filter extends Toggle {
+  constructor(id) {
+    super(id);
+  }
+
+  toggle(criteriaFunction, parentLinks, childrenLinks, particles, drawAll) {
+    if (this.isSliderActive) {
+      const [newParentLinks, newChildrenLinks, newParticles] = reconnect(
+        criteriaFunction,
+        parentLinks,
+        childrenLinks,
+        particles
+      );
+      drawAll(newParentLinks, newChildrenLinks, newParticles);
+    } else {
+      drawAll(parentLinks, childrenLinks, particles);
+    }
+  }
+}
+
+function reconnect(criteriaFunction, parentLinks, childrenLinks, particles) {
   const newParentLinks = [];
   const newChildrenLinks = [];
   const filteredParticles = [];
@@ -31,7 +47,7 @@ export function reconnect(
 
       for (const parent of parentParticles) {
         for (const child of childrenParticles) {
-          const linkToParent = new Link(newParentLinks.length, child, parent);
+          const linkToParent = new Link(newParentLinks.length, parent, child);
           linkToParent.xShift = 3;
           const linkToChild = new Link(newChildrenLinks.length, parent, child);
           linkToChild.color = "#0A0";

js/menu/show-pdg.js

@@ -0,0 +1,22 @@
+// const slider = document.getElementById("show-pdg");
+import { Toggle } from "./toggle.js";
+
+export class PdgToggle extends Toggle {
+  constructor(id) {
+    super(id);
+  }
+
+  toggle(infoBoxes, redraw) {
+    if (this.isSliderActive) {
+      for (const infoBox of infoBoxes) {
+        infoBox.updateTexImg(`${infoBox.pdg}`);
+      }
+    } else {
+      for (const infoBox of infoBoxes) {
+        infoBox.updateTexImg(infoBox.name);
+      }
+    }
+
+    redraw();
+  }
+}

js/menu/toggle.js

@@ -1,30 +1,13 @@
-const toggle = document.getElementById("toggle");
-const slider = document.getElementById("show-pdg");
-
-class Toggle {
-  constructor() {
+export class Toggle {
+  constructor(id) {
     this.isSliderActive = false;
+    this.slider = document.getElementById(id);
   }
 
-  init(infoBoxes, drawAll) {
-    toggle.style.display = "flex";
-
-    slider.addEventListener("click", () => {
+  init(callback) {
+    this.slider.addEventListener("click", () => {
       this.isSliderActive = !this.isSliderActive;
-
-      if (this.isSliderActive) {
-        for (const infoBox of infoBoxes) {
-          infoBox.updateTexImg(`${infoBox.pdg}`);
-        }
-      } else {
-        for (const infoBox of infoBoxes) {
-          infoBox.updateTexImg(infoBox.name);
-        }
-      }
-
-      drawAll();
+      callback();
     });
   }
 }
-
-export default Toggle;