diff --git a/js/draw.js b/js/draw.js index 40ce4818..6bfdd8ae 100644 --- 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 index d2de797f..193d71e9 100644 --- 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 index d2f5ab7e..adcabe69 100644 --- 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,17 +178,20 @@ 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); @@ -212,6 +199,8 @@ document tool.style.display = "flex"; } + const { infoBoxes } = currentParticles; + infoBoxes.forEach((infoBox) => bits.add(infoBox.simStatus)); bits.setCheckBoxes(); bits.render(); @@ -219,16 +208,9 @@ document 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 index 0253ca57..e7149c0c 100644 --- 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 }; diff --git a/js/menu/filter/reconnect.js b/js/menu/filter/reconnect.js index 97f6c35e..54cc71f0 100644 --- a/js/menu/filter/reconnect.js +++ b/js/menu/filter/reconnect.js @@ -1,18 +1,13 @@ import { Link } from "../../objects.js"; -export function reconnect( - criteriaFunction, - parentLinks, - childrenLinks, - particles -) { +export function reconnect(criteriaFunction, particlesHandler) { + const { parentLinks, childrenLinks, infoBoxes: particles } = particlesHandler; + const newParentLinks = []; const newChildrenLinks = []; const filteredParticles = []; for (const particle of particles) { - if (!particle) continue; - if (!criteriaFunction(particle)) { filteredParticles.push(null); @@ -48,19 +43,30 @@ export function reconnect( for (const parentLinkId of particle.parentLinks) { const parentLink = parentLinks[parentLinkId]; - if (!parentLink) continue; const parent = particles[parentLink.from]; if (criteriaFunction(parent)) { - newParentLinks.push(parentLink); + const parentLinkCopy = new Link( + newParentLinks.length, + parentLink.from, + parentLink.to + ); + parentLinkCopy.xShift = 3; + newParentLinks.push(parentLinkCopy); } } for (const childrenLinkId of particle.childrenLinks) { const childrenLink = childrenLinks[childrenLinkId]; - if (!childrenLink) continue; const child = particles[childrenLink.to]; if (criteriaFunction(child)) { - newChildrenLinks.push(childrenLink); + const childrenLinkCopy = new Link( + newChildrenLinks.length, + childrenLink.from, + childrenLink.to + ); + childrenLinkCopy.color = "#0A0"; + childrenLinkCopy.xShift = -3; + newChildrenLinks.push(childrenLinkCopy); } } } diff --git a/js/objects.js b/js/objects.js index c9bef14e..7249e2b9 100644 --- a/js/objects.js +++ b/js/objects.js @@ -159,15 +159,6 @@ export class Link { const boxFrom = infoBoxes[this.from]; const boxTo = infoBoxes[this.to]; - if ( - boxFrom === null || - boxTo === null || - boxFrom === undefined || - boxTo === undefined - ) { - return; - } - const fromX = boxFrom.x + boxFrom.width / 2; const fromY = boxFrom.y + boxFrom.height; const toX = boxTo.x + boxTo.width / 2; diff --git a/js/tools.js b/js/tools.js index 99e40a3a..680e3dc9 100644 --- a/js/tools.js +++ b/js/tools.js @@ -15,13 +15,9 @@ export function errorMsg(msg) { msgDiv.innerHTML = "

ERROR: " + msg + "

"; } -export function loadMCParticles( - jsonData, - eventNum, - infoBoxes, - parentLinks, - childrenLinks -) { +export function loadMCParticles(jsonData, eventNum, particlesHandler) { + const { infoBoxes, parentLinks, childrenLinks } = particlesHandler; + const eventData = jsonData["Event " + eventNum]; try { const mcParticles = Object.values(eventData).find(