eede using pixi, big performance improve, but might be further improv…

…ed. A few bugs into

js/draw/app.js

@@ -6,7 +6,6 @@ const MARGIN = 100;
 const pixi = {
   app: null,
   container: null,
-  elements: [],
 };
 
 const createApp = async () => {
@@ -27,7 +26,7 @@ const createApp = async () => {
 };
 
 const addScroll = (app) => {
-  const container = pixi.container;
+  const container = getContainer();
   const renderer = app.renderer;
 
   container.x = 0;
@@ -61,7 +60,7 @@ const addScroll = (app) => {
   });
 };
 
-const createContainer = (app) => {
+export const createContainer = (app) => {
   const container = new Container({
     isRenderGroup: true,
   });
@@ -76,6 +75,7 @@ const createContainer = (app) => {
   });
 
   app.stage.addChild(container);
+  addScroll(app);
 };
 
 export const setContainerSize = (width, height) => {
@@ -92,13 +92,8 @@ export const getContainer = () => {
   return pixi.container;
 };
 
-export const getElements = () => {
-  return pixi.elements;
-};
-
 export const startPixi = async () => {
   const app = await createApp();
   createContainer(app);
-  addScroll(app);
   pixi.app = app;
 };

js/draw/box.js

@@ -1,5 +1,5 @@
 import { Graphics, Assets, Sprite, Text, TextStyle } from "../pixi.min.mjs";
-import { getApp, getContainer, getElements } from "./app.js";
+import { getApp, getContainer } from "./app.js";
 
 const MARGIN = 20;
 const PADDING = 5;
@@ -55,10 +55,8 @@ function removeObjectModal(objectModal) {
 }
 
 export function addBox(box) {
-  const elements = getElements();
   const container = getContainer();
   container.addChild(box);
-  elements.push(box);
 }
 
 const boxes = {};
@@ -130,11 +128,11 @@ export function addLinesToBox(lines, box, y) {
   return text.position.y + text.height;
 }
 
-export async function svgElementToPixiSprite(src) {
+export async function svgElementToPixiSprite(src, size) {
   const asset = await Assets.load(src);
   const sprite = Sprite.from(asset);
-  sprite.width = 50;
-  sprite.height = 50;
+  sprite.width = size;
+  sprite.height = size;
   return sprite;
 }
 

js/draw/link.js

@@ -71,6 +71,7 @@ export function drawBezierLink(link) {
   const boxTo = link.to.renderedBox;
 
   const container = getContainer();
+
   boxFrom.on("pointerdown", () => {
     boxFrom.on("pointermove", () => {
       container.removeChild(curve);

js/draw/render.js

@@ -6,6 +6,7 @@ export async function renderObjects(objects) {
     const { collection, oneToMany, oneToOne } = elements;
 
     for (const object of collection) {
+      object.renderedBox = null;
       await object.draw();
     }
 

js/event-number.js

@@ -45,12 +45,12 @@ function loadSelectedEvent() {
   }
 }
 
-export async function renderEvent(eventNumber) {
+export function renderEvent(eventNumber) {
   saveScrollLocation();
   currentEvent.event = eventNumber;
   loadSelectedEvent();
   updateEventNumber();
-  await drawCurrentView();
+  drawCurrentView();
 }
 
 previousEvent.addEventListener("click", () => {

js/filter/mcparticle.js

@@ -8,7 +8,6 @@ import {
   start,
   getWidthFilterContent,
 } from "../menu/filter/filter.js";
-import { drawAll } from "../draw.js";
 
 const filter = document.getElementById("filter");
 const filters = document.getElementById("filters");

js/lib/generate-svg.js

@@ -1,9 +1,11 @@
-export async function textToSVG(text) {
+const SCALE = 1.25;
+
+export async function textToSVG(text, size) {
   const mathjaxContainer = await MathJax.tex2svgPromise(text);
   const svg = mathjaxContainer.firstElementChild;
 
-  svg.setAttribute("width", "50px");
-  svg.setAttribute("height", "50px");
+  svg.setAttribute("width", `${parseInt(size * SCALE)}px`);
+  svg.setAttribute("height", `${parseInt(size * SCALE)}px`);
 
   const src =
     "data:image/svg+xml;base64," +

js/main.js

@@ -140,7 +140,7 @@ document
     showEventSwitcher();
     showViewsMenu();
     selectViewInformation();
-    await renderEvent(eventNum);
+    renderEvent(eventNum);
   });
 
 export { jsonData, selectedObjectTypes };

js/menu/filter/filter.js

@@ -1,4 +1,3 @@
-import { drawAll } from "../../draw.js";
 import { CheckboxBuilder, BitFieldBuilder } from "./builders.js";
 import { Range, Checkbox, buildCriteriaFunction } from "./parameters.js";
 import { reconnect } from "./reconnect.js";

js/types/links.js

@@ -1,4 +1,3 @@
-import { drawStraightLink } from "../lib/graphic-primitives.js";
 import { drawBezierLink } from "../draw/link.js";
 
 const colors = {
@@ -24,35 +23,6 @@ export class Link {
   draw() {
     drawBezierLink(this);
   }
-
-  isVisible(x, y, width, height) {
-    const boxFrom = this.from;
-    const boxTo = this.to;
-
-    const fromX = boxFrom.x + boxFrom.width / 2;
-    const fromY = boxFrom.y + boxFrom.height;
-    const toX = boxTo.x + boxTo.width / 2;
-    const toY = boxTo.y;
-
-    const boxX = Math.min(fromX, toX);
-    const boxWidth = Math.abs(fromX - toX);
-    const boxY = Math.min(fromY, toY);
-    const boxHeight = Math.abs(fromY - toY);
-
-    /*
-    console.log("boxX: ", this.boxX);
-    console.log("boxY: ", this.boxY);
-    console.log("boxWidth: ", this.boxWidth);
-    console.log("boxHeight: ", this.boxHeight);
-    */
-
-    return (
-      x + width > boxX &&
-      x < boxX + boxWidth &&
-      y + height > boxY &&
-      y < boxY + boxHeight
-    );
-  }
 }
 
 class ParentLink extends Link {

js/types/objects.js

@@ -14,7 +14,7 @@ import {
 import { textToSVG } from "../lib/generate-svg.js";
 
 const IMAGE_MARGIN = 10;
-const IMAGE_HEIGHT = 30;
+const IMAGE_SIZE = 40;
 
 class EDMObject {
   constructor() {
@@ -83,24 +83,6 @@ class EDMObject {
     return [box, nextY];
   }
 
-  isHere(mouseX, mouseY) {
-    return (
-      mouseX > this.x &&
-      mouseX < this.x + this.width &&
-      mouseY > this.y &&
-      mouseY < this.y + this.height
-    );
-  }
-
-  isVisible(x, y, width, height) {
-    return (
-      x + width > this.x &&
-      x < this.x + this.width &&
-      y + height > this.y &&
-      y < this.y + this.height
-    );
-  }
-
   objectModalLines() {
     const collectionName = "Collection: " + this.collectionName;
     return [collectionName];
@@ -139,15 +121,15 @@ export class MCParticle extends EDMObject {
 
     const imageY = nextY + IMAGE_MARGIN;
 
-    textToSVG(this.name)
+    textToSVG(this.name, IMAGE_SIZE)
       .then((src) => {
-        const sprite = svgElementToPixiSprite(src);
+        const sprite = svgElementToPixiSprite(src, IMAGE_SIZE);
         return sprite;
       })
       .then((sprite) => addImageToBox(sprite, box, imageY))
       .catch((e) => console.error("Error loading SVG: ", e));
 
-    nextY += IMAGE_HEIGHT + 2 * IMAGE_MARGIN;
+    nextY += IMAGE_SIZE + 2 * IMAGE_MARGIN;
 
     const bottomLines = [];
     bottomLines.push("p = " + this.momentum + " GeV");