[FIX] when filtering particles, these are maintained even if boxes ar…

…e dragged
key4hep · Jun 2, 2024 · e67e6eb · e67e6eb
1 parent 9c643f2
commit e67e6eb
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 132 deletions.
diff --git a/js/draw.js b/js/draw.js
@@ -1,7 +1,7 @@
 import { canvas, ctx } from "./main.js";
 
-export function drawAll(ctx, particlesHandler) {
-  const { parentLinks, childrenLinks, infoBoxes } = particlesHandler;
+export function drawAll(ctx, currentParticles) {
+  const { parentLinks, childrenLinks, infoBoxes } = currentParticles;
 
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   // console.time("drawParentLinks");
@@ -21,14 +21,14 @@ export function drawAll(ctx, particlesHandler) {
   // console.timeEnd("drawBoxes");
 }
 
-export function drawVisible(visibleParticles, particlesHandler) {
+export function drawVisible(currentParticles, visibleParticles) {
   const {
     infoBoxes: visibleBoxes,
     parentLinks: visibleParentLinks,
     childrenLinks: visibleChildrenLinks,
   } = visibleParticles;
 
-  const { parentLinks, childrenLinks, infoBoxes } = particlesHandler;
+  const { parentLinks, childrenLinks, infoBoxes } = currentParticles;
 
   const boundigClientRect = canvas.getBoundingClientRect();
   ctx.clearRect(
@@ -38,10 +38,12 @@ export function drawVisible(visibleParticles, particlesHandler) {
     window.innerHeight
   );
   for (const linkId of visibleParentLinks) {
-    parentLinks[linkId].draw(ctx, infoBoxes);
+    if (parentLinks[linkId] !== undefined)
+      parentLinks[linkId].draw(ctx, infoBoxes);
   }
   for (const linkId of visibleChildrenLinks) {
-    childrenLinks[linkId].draw(ctx, infoBoxes);
+    if (childrenLinks[linkId] !== undefined)
+      childrenLinks[linkId].draw(ctx, infoBoxes);
   }
   for (const boxId of visibleBoxes) {
     infoBoxes[boxId].draw(ctx);

diff --git a/js/events.js b/js/events.js
@@ -3,7 +3,7 @@ import { drawAll, drawVisible } from "./draw.js";
 
 const mouseDown = function (
   event,
-  particlesHandler,
+  currentParticles,
   visibleParticles,
   dragTools
 ) {
@@ -15,8 +15,8 @@ const mouseDown = function (
   dragTools.prevMouseX = mouseX;
   dragTools.prevMouseY = mouseY;
 
+  const infoBoxes = currentParticles.infoBoxes;
   const visibleBoxes = visibleParticles.infoBoxes;
-  const infoBoxes = particlesHandler.infoBoxes;
   for (let i = visibleBoxes.length - 1; i >= 0; i--) {
     if (infoBoxes[visibleBoxes[i]].isHere(mouseX, mouseY)) {
       dragTools.draggedInfoBox = visibleBoxes[i];
@@ -26,7 +26,7 @@ const mouseDown = function (
   }
 };
 
-const mouseUp = function (event, dragTools, particlesHandler) {
+const mouseUp = function (event, particlesHandler, dragTools) {
   if (!dragTools.isDragging) {
     return;
   }
@@ -50,7 +50,7 @@ const mouseOut = function (event, dragTools) {
 
 const mouseMove = function (
   event,
-  particlesHandler,
+  currentParticles,
   visibleParticles,
   dragTools
 ) {
@@ -66,28 +66,29 @@ const mouseMove = function (
   const dx = mouseX - dragTools.prevMouseX;
   const dy = mouseY - dragTools.prevMouseY;
 
-  const infoBox = particlesHandler.infoBoxes[dragTools.draggedInfoBox];
+  const infoBox = currentParticles.infoBoxes[dragTools.draggedInfoBox];
   infoBox.x += dx;
   infoBox.y += dy;
 
   // console.time("drawVisible");
-  drawVisible(visibleParticles, particlesHandler);
+  drawVisible(currentParticles, visibleParticles);
   // console.timeEnd("drawVisible");
 
   dragTools.prevMouseX = mouseX;
   dragTools.prevMouseY = mouseY;
 };
 
-const getVisible = function (particlesHandler, visibleParticles) {
+const getVisible = function (currentParticles, visibleParticles) {
   const boundigClientRect = canvas.getBoundingClientRect();
 
-  const { infoBoxes, parentLinks, childrenLinks } = particlesHandler;
+  const { infoBoxes, parentLinks, childrenLinks } = currentParticles;
 
-  let visibleBoxes = [];
-  let visibleParentLinks = [];
-  let visibleChildrenLinks = [];
+  const visibleBoxes = [];
+  const visibleParentLinks = [];
+  const visibleChildrenLinks = [];
 
   for (const box of infoBoxes) {
+    if (box === null) continue;
     if (
       box.isVisible(
         0 - boundigClientRect.x,
@@ -100,16 +101,6 @@ const getVisible = function (particlesHandler, visibleParticles) {
     }
   }
 
-  for (const boxId of visibleBoxes) {
-    for (const linkId of infoBoxes[boxId].parentLinks) {
-      visibleParentLinks.push(linkId);
-    }
-    for (const parentBoxId of infoBoxes[boxId].parents) {
-      for (const linkId of infoBoxes[parentBoxId].childrenLinks) {
-        visibleChildrenLinks.push(linkId);
-      }
-    }
-  }
   for (const link of parentLinks) {
     if (
       link.isVisible(
@@ -124,16 +115,6 @@ const getVisible = function (particlesHandler, visibleParticles) {
     }
   }
 
-  for (const boxId of visibleBoxes) {
-    for (const linkId of infoBoxes[boxId].childrenLinks) {
-      visibleChildrenLinks.push(linkId);
-    }
-    for (const childrenBoxId of infoBoxes[boxId].children) {
-      for (const linkId of infoBoxes[childrenBoxId].parentLinks) {
-        visibleParentLinks.push(linkId);
-      }
-    }
-  }
   for (const link of childrenLinks) {
     if (
       link.isVisible(
@@ -148,9 +129,6 @@ const getVisible = function (particlesHandler, visibleParticles) {
     }
   }
 
-  visibleParentLinks = [...new Set(visibleParentLinks)];
-  visibleChildrenLinks = [...new Set(visibleChildrenLinks)];
-
   /*
   console.log("Visible boxes: ", visibleBoxes);
   console.log("Visible parentLinks: ", visibleParentLinks);
@@ -162,8 +140,8 @@ const getVisible = function (particlesHandler, visibleParticles) {
   visibleParticles.childrenLinks = visibleChildrenLinks;
 };
 
-const onScroll = function (particlesHandler, visibleParticles) {
-  getVisible(particlesHandler, visibleParticles);
+const onScroll = function (currentParticles, visibleParticles) {
+  getVisible(currentParticles, visibleParticles);
 };
 
 export { mouseDown, mouseUp, mouseOut, mouseMove, getVisible, onScroll };
diff --git a/js/main.js b/js/main.js
@@ -19,47 +19,31 @@ const manipulationTools = document.getElementsByClassName("manipulation-tool");
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 
-let draggedInfoBox = -1;
-let isDragging = false;
-let prevMouseX = 0;
-let prevMouseY = 0;
-
 let jsonData = {};
-const infoBoxes = [];
-const parentLinks = [];
-const childrenLinks = [];
-
-let currentInfoBoxes = [];
-let currentParentLinks = [];
-let currentChildrenLinks = [];
-
-let visibleBoxes = [];
-let visibleParentLinks = [];
-let visibleChildrenLinks = [];
 
 const dragTools = {
-  draggedInfoBox: draggedInfoBox,
-  isDragging: isDragging,
-  prevMouseX: prevMouseX,
-  prevMouseY: prevMouseY,
+  draggedInfoBox: -1,
+  isDragging: false,
+  prevMouseX: 0,
+  prevMouseY: 0,
 };
 
 const particlesHandler = {
-  infoBoxes: infoBoxes,
-  parentLinks: parentLinks,
-  childrenLinks: childrenLinks,
+  infoBoxes: [],
+  parentLinks: [],
+  childrenLinks: [],
 };
 
 const currentParticles = {
-  infoBoxes: currentInfoBoxes,
-  parentLinks: currentParentLinks,
-  childrenLinks: currentChildrenLinks,
+  infoBoxes: [],
+  parentLinks: [],
+  childrenLinks: [],
 };
 
 const visibleParticles = {
-  infoBoxes: visibleBoxes,
-  parentLinks: visibleParentLinks,
-  childrenLinks: visibleChildrenLinks,
+  infoBoxes: [],
+  parentLinks: [],
+  childrenLinks: [],
 };
 
 function start(particlesHandler, visibleParticles) {
@@ -135,19 +119,19 @@ function start(particlesHandler, visibleParticles) {
 }
 
 canvas.onmousedown = (event) => {
-  mouseDown(event, particlesHandler, visibleParticles, dragTools);
+  mouseDown(event, currentParticles, visibleParticles, dragTools);
 };
 canvas.onmouseup = (event) => {
-  mouseUp(event, dragTools, particlesHandler);
+  mouseUp(event, currentParticles, dragTools);
 };
 canvas.onmouseout = (event) => {
   mouseOut(event, dragTools);
 };
 canvas.onmousemove = (event) => {
-  mouseMove(event, particlesHandler, visibleParticles, dragTools);
+  mouseMove(event, currentParticles, visibleParticles, dragTools);
 };
 window.onscroll = () => {
-  onScroll(particlesHandler, visibleParticles);
+  onScroll(currentParticles, visibleParticles);
 };
 
 /*
@@ -194,41 +178,39 @@ document
     event.preventDefault();
     const eventNum = document.getElementById("event-number").value;
 
-    const { infoBoxes, parentLinks, childrenLinks } = particlesHandler;
+    loadMCParticles(jsonData, eventNum, particlesHandler);
 
-    loadMCParticles(jsonData, eventNum, infoBoxes, parentLinks, childrenLinks);
-    if (infoBoxes.length === 0) {
+    currentParticles.infoBoxes = particlesHandler.infoBoxes;
+    currentParticles.parentLinks = particlesHandler.parentLinks;
+    currentParticles.childrenLinks = particlesHandler.childrenLinks;
+
+    if (particlesHandler.infoBoxes.length === 0) {
       errorMsg("Provided file does not contain any MC particle tree!");
       return;
     }
     for (const eventNum in jsonData) {
       delete jsonData[eventNum];
     }
-    start(particlesHandler, visibleParticles);
+    start(currentParticles, visibleParticles);
     hideInputModal();
     window.scroll((canvas.width - window.innerWidth) / 2, 0);
 
     for (const tool of manipulationTools) {
       tool.style.display = "flex";
     }
 
+    const { infoBoxes } = currentParticles;
+
     infoBoxes.forEach((infoBox) => bits.add(infoBox.simStatus));
     bits.setCheckBoxes();
     bits.render();
 
     const pdgToggle = new PdgToggle("show-pdg");
     pdgToggle.init(() => {
       pdgToggle.toggle(infoBoxes, () => {
-        drawAll(ctx, particlesHandler);
+        drawAll(ctx, currentParticles);
       });
     });
   });
 
-export {
-  canvas,
-  ctx,
-  dragTools,
-  visibleParticles,
-  particlesHandler,
-  currentParticles,
-};
+export { canvas, ctx, visibleParticles, particlesHandler, currentParticles };
diff --git a/js/menu/filter/filter.js b/js/menu/filter/filter.js
@@ -1,7 +1,13 @@
 import { drawAll } from "../../draw.js";
-import { ctx, particlesHandler } from "../../main.js";
+import {
+  ctx,
+  particlesHandler,
+  currentParticles,
+  visibleParticles,
+} from "../../main.js";
 import { Range, Checkbox, buildCriteriaFunction } from "./parameters.js";
 import { reconnect } from "./reconnect.js";
+import { getVisible } from "../../events.js";
 
 const filterButton = document.getElementById("filter-button");
 const openFilter = document.getElementById("open-filter");
@@ -44,7 +50,7 @@ let bits = {
   render: () => bits.checkBoxes.forEach((checkbox) => checkbox.render(filters)),
 };
 
-function applyFilter(particlesHandler) {
+function applyFilter(particlesHandler, currentParticles, visibleParticles) {
   const rangeFunctions = Range.buildFilter(parametersRange);
   const checkboxFunctions = Checkbox.buildFilter(bits.checkBoxes);
 
@@ -53,24 +59,28 @@ function applyFilter(particlesHandler) {
     checkboxFunctions
   );
 
-  const { parentLinks, childrenLinks, infoBoxes } = particlesHandler;
-
   const [newParentLinks, newChildrenLinks, filteredParticles] = reconnect(
     criteriaFunction,
-    parentLinks,
-    childrenLinks,
-    infoBoxes
+    particlesHandler
   );
 
-  drawAll(ctx, {
-    parentLinks: newParentLinks,
-    childrenLinks: newChildrenLinks,
-    infoBoxes: filteredParticles,
-  });
+  currentParticles.parentLinks = newParentLinks;
+  currentParticles.childrenLinks = newChildrenLinks;
+  currentParticles.infoBoxes = filteredParticles;
+
+  drawAll(ctx, currentParticles);
+
+  getVisible(currentParticles, visibleParticles);
 }
 
-function removeFilter(particlesHandler) {
-  drawAll(ctx, particlesHandler);
+function removeFilter(particlesHandler, currentParticles, visibleParticles) {
+  currentParticles.parentLinks = particlesHandler.parentLinks;
+  currentParticles.childrenLinks = particlesHandler.childrenLinks;
+  currentParticles.infoBoxes = particlesHandler.infoBoxes;
+
+  drawAll(ctx, currentParticles);
+
+  getVisible(currentParticles, visibleParticles);
 
   filters.innerHTML = "";
 
@@ -86,7 +96,11 @@ function removeFilter(particlesHandler) {
   });
 }
 
-apply.addEventListener("click", () => applyFilter(particlesHandler));
-reset.addEventListener("click", () => removeFilter(particlesHandler));
+apply.addEventListener("click", () =>
+  applyFilter(particlesHandler, currentParticles, visibleParticles)
+);
+reset.addEventListener("click", () =>
+  removeFilter(particlesHandler, currentParticles, visibleParticles)
+);
 
 export { bits };