Deploy preview for PR 65 🛫

pr-preview/pr-65/js/draw/app.js

@@ -1,6 +1,11 @@
 import { Application, Container } from "../pixi.min.mjs";
 
-export const pixi = {
+const SPEED = 0.3;
+const MARGIN = 100;
+
+const pixi = {
+  app: null,
+  container: null,
   elements: [],
 };
 
@@ -17,28 +22,38 @@ const createApp = async () => {
   return app;
 };
 
-const worldSize = 5000;
-
 const addScroll = (app) => {
-  let x = 0;
-  let y = 0;
+  const container = pixi.container;
+  const renderer = app.renderer;
 
-  app.canvas.addEventListener("mousemove", (e) => {
-    x = e.clientX;
-    y = e.clientY;
-  });
+  container.x = 0;
+  container.y = 0;
+
+  const screenWidth = renderer.width;
+  const screenHeight = renderer.height;
 
-  const { container } = pixi;
+  app.canvas.addEventListener("wheel", (e) => {
+    const deltaX = parseInt(e.deltaX) * SPEED;
+    const deltaY = parseInt(e.deltaY) * SPEED;
 
-  app.ticker.add(() => {
-    const screenWidth = app.renderer.width;
-    const screenHeight = app.renderer.height;
+    const newXPosition = container.x - deltaX;
+    const newYPosition = container.y - deltaY;
 
-    const targetX = (x / screenWidth) * (worldSize - screenWidth);
-    const targetY = (y / screenHeight) * (worldSize - screenHeight);
+    const absXPosition = Math.abs(newXPosition);
+    const absYPosition = Math.abs(newYPosition);
 
-    container.x += (-targetX - container.x) * 0.1;
-    container.y += (-targetY - container.y) * 0.1;
+    const isXInBounds =
+      newXPosition < 0 && absXPosition + screenWidth < container.width + MARGIN;
+    const isYInBounds =
+      newYPosition < 0 &&
+      absYPosition + screenHeight < container.height + MARGIN;
+
+    if (isXInBounds) {
+      container.x = newXPosition;
+    }
+    if (isYInBounds) {
+      container.y = newYPosition;
+    }
   });
 };
 
@@ -50,6 +65,24 @@ const createContainer = (app) => {
   app.stage.addChild(container);
 };
 
+export const setContainerSize = (width, height) => {
+  const container = getContainer();
+  container.width = width;
+  container.height = height;
+};
+
+export const getApp = () => {
+  return pixi.app;
+};
+
+export const getContainer = () => {
+  return pixi.container;
+};
+
+export const getElements = () => {
+  return pixi.elements;
+};
+
 export const startPixi = async () => {
   const app = await createApp();
   createContainer(app);

pr-preview/pr-65/js/draw/box.js

@@ -0,0 +1,75 @@
+import { Graphics, BitmapText, Assets } from "../pixi.min.mjs";
+import { getContainer, getElements } from "./app.js";
+
+const TOP_MARGIN = 20;
+
+export function addBox(box) {
+  const elements = getElements();
+  const container = getContainer();
+  container.addChild(box);
+  elements.push(box);
+}
+
+export function buildBox(object) {
+  const box = new Graphics();
+  box.roundRect(object.x, object.y, object.width, object.height, object.radius);
+  box.fill(object.color);
+  box.stroke({ width: 2, color: "#000000" });
+  return box;
+}
+
+export function addTitleToBox(title, box) {
+  const boxTitle = new BitmapText({
+    text: title,
+    style: {
+      fontFamiliy: "sans-serif",
+      fontSize: 16,
+      align: "center",
+      fill: "black",
+      fontWeight: "bold",
+    },
+  });
+  box.addChild(boxTitle);
+  boxTitle.y = box.y + TOP_MARGIN;
+  boxTitle.x = box.x + (box.width - boxTitle.width) / 2;
+  return boxTitle.y;
+}
+
+export function addLinesToBox(lines, box, y) {
+  let prevY = y;
+  lines.forEach((line) => {
+    const boxLine = new BitmapText({
+      text: line,
+      style: {
+        fontFamily: "sans-serif",
+        fontSize: 14,
+        align: "center",
+        fill: "black",
+      },
+    });
+    box.addChild(boxLine);
+    boxLine.y = prevY + 10;
+    boxLine.x = box.x + (box.width - boxLine.width) / 2;
+    prevY = boxLine.y + boxLine.height;
+  });
+
+  return prevY;
+}
+
+export async function svgElementToPixiSprite(src) {
+  const sprite = await Assets.load({
+    src,
+    data: {
+      parseAsGraphicsContext: true,
+    },
+  });
+  const graphics = new Graphics(sprite);
+  return graphics;
+}
+
+export function addImageToBox(sprite, box, y) {
+  box.addChild(sprite);
+  sprite.y = y;
+  sprite.x = box.x + (box.width - sprite.width) / 2;
+  return sprite.y + sprite.height;
+}

pr-preview/pr-65/js/draw/scroll.js

@@ -0,0 +1,22 @@
+import { getContainer, getApp } from "./app.js";
+
+export const scrollTopLeft = () => {
+  const container = getContainer();
+  container.x = 0;
+  container.y = 0;
+};
+
+export const scrollTopCenter = () => {
+  const container = getContainer();
+  const app = getApp();
+
+  const screenWidth = app.renderer.width;
+  const containerWidth = container.width;
+
+  const x = (screenWidth - containerWidth) / 2;
+  const y = 0;
+  container.x = x;
+  container.y = y;
+
+  return { x, y };
+};

pr-preview/pr-65/js/lib/generate-svg.js

@@ -1,4 +1,12 @@
-export async function textToSVGElement(text) {
-  const element = await MathJax.tex2svgPromise(text);
-  return element.firstElementChild;
+export async function textToSVG(text) {
+  const svg = await MathJax.tex2svg(text).firstElementChild;
+
+  const src =
+    "data:image/svg+xml;base64," +
+    btoa(
+      '<?xml version="1.0" encoding="UTF-8" standalone="no" ?>\n' +
+        svg.outerHTML
+    );
+
+  return src;
 }

pr-preview/pr-65/js/types/objects.js

@@ -2,8 +2,15 @@ import { getName } from "../lib/getName.js";
 import { linkTypes } from "./links.js";
 import { parseCharge } from "../lib/parseCharge.js";
 import { getSimStatusDisplayValuesFromBit } from "../../mappings/sim-status.js";
-import { addBox } from "../draw/add-box.js";
-import { textToSVGElement } from "../lib/generate-svg.js";
+import {
+  buildBox,
+  addBox,
+  addTitleToBox,
+  addLinesToBox,
+  svgElementToPixiSprite,
+  addImageToBox,
+} from "../draw/box.js";
+import { textToSVG } from "../lib/generate-svg.js";
 
 const TOP_MARGIN = 45;
 
@@ -20,7 +27,12 @@ class EDMObject {
     this.color = "white";
   }
 
-  draw(app) {}
+  async draw() {
+    const box = buildBox(this);
+    const nextY = addTitleToBox(this.collectionName, box);
+    addBox(box);
+    return [box, nextY];
+  }
 
   isHere(mouseX, mouseY) {
     return (
@@ -59,9 +71,21 @@ export class MCParticle extends EDMObject {
   }
 
   async draw() {
-    const boxCenterX = this.x + this.width / 2;
+    // const boxCenterX = this.x + this.width / 2;
+    // const topY = this.y + TOP_MARGIN;
+
+    // const bottomY = this.y + this.height * 0.65;
+    // const bottomLines = [];
+    // bottomLines.push("p = " + this.momentum + " GeV");
+    // bottomLines.push("d = " + this.vertex + " mm");
+    // bottomLines.push("t = " + this.time + " ns");
+    // bottomLines.push("m = " + this.mass + " GeV");
+    // bottomLines.push(parseCharge(this.charge));
+    // const svgElement = textToSVGElement(this.name);
+    // addBox(this);
+
+    let [box, nextY] = await super.draw();
 
-    const topY = this.y + TOP_MARGIN;
     const topLines = [];
     topLines.push("ID: " + this.index);
     topLines.push("Gen. stat.: " + this.generatorStatus);
@@ -77,16 +101,10 @@ export class MCParticle extends EDMObject {
         : this.simulatorStatus;
     topLines.push("Sim. stat.: " + simulatorStatusString);
 
-    const bottomY = this.y + this.height * 0.65;
-    const bottomLines = [];
-    bottomLines.push("p = " + this.momentum + " GeV");
-    bottomLines.push("d = " + this.vertex + " mm");
-    bottomLines.push("t = " + this.time + " ns");
-    bottomLines.push("m = " + this.mass + " GeV");
-    bottomLines.push(parseCharge(this.charge));
-
-    const svgElement = textToSVGElement(this.name);
-    addBox(this);
+    nextY = addLinesToBox(topLines, box, nextY);
+    const svg = await textToSVG(this.name);
+    const sprite = await svgElementToPixiSprite(svg);
+    nextY = addImageToBox(sprite, box, nextY);
   }
 
   showObjectTip(ctx) {

pr-preview/pr-65/js/views/mcparticletree.js

@@ -92,6 +92,8 @@ export function mcParticleTree(viewCurrentObjects) {
       box.y = i * verticalGap + verticalGap + i * boxHeight;
     }
   }
+
+  return [width, height];
 }
 
 export function preFilterMCTree(currentObjects, viewObjects) {