Merge pull request #65 from brauliorivas/feat/use-pixi

css/main.css

@@ -1,7 +1,7 @@
 body {
   margin: 0;
   padding: 0;
-  /* overflow: hidden; */
+  overflow: hidden;
   font-family: sans-serif;
   font-size: 16px;
 }

index.html

@@ -37,14 +37,18 @@
           <label class="mr-10" for="input-file">Select EDM4hep JSON:</label>
           <input id="input-file" name="input-file" type="file" accept=".json">
           <p class="small-text ml-20">Example input files (right click to save):
-            <ul class="small-text">
-              <li>
-                Delphes: <a href="https://fccsw.web.cern.ch/fccsw/eede/p8_ee_ZH_ecm240.edm4hep.json">p8_ee_ZH_ecm240.edm4hep.json</a> [5.6 MB]
-              </li>
-              <li>
-                Full Sim: <a href="https://fccsw.web.cern.ch/fccsw/eede/wzp6_ee_mumuH_ecm240_CLD_RECO.edm4hep.json">wzp6_ee_mumuH_ecm240_CLD_RECO.edm4hep.json</a> [28 MB]
-              </li>
-            </ul>
+          <ul class="small-text">
+            <li>
+              Delphes: <a
+                href="https://fccsw.web.cern.ch/fccsw/eede/p8_ee_ZH_ecm240.edm4hep.json">p8_ee_ZH_ecm240.edm4hep.json</a>
+              [5.6 MB]
+            </li>
+            <li>
+              Full Sim: <a
+                href="https://fccsw.web.cern.ch/fccsw/eede/wzp6_ee_mumuH_ecm240_CLD_RECO.edm4hep.json">wzp6_ee_mumuH_ecm240_CLD_RECO.edm4hep.json</a>
+              [28 MB]
+            </li>
+          </ul>
           </p>
         </div>
         <div id="event-selector">
@@ -186,14 +190,13 @@ <h2 id="view-title-info"></h2>
     <button id="switch-deploy-button">release</button>
   </div>
 
-  <canvas id="canvas" width="100vw" height="100vh"></canvas>
-
   <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js" type="text/javascript"></script>
+  <script type="module" src="js/pixi.min.mjs"> </script>
   <script type="module" src="js/main.js"></script>
   <script type="module" src="js/information.js"></script>
   <script type="module" src="js/views/views.js"></script>
-  <script type="module" src="js/menu/filter/filter.js"></script>
   <script type="module" src="js/switch-deploy.js"></script>
+  <script type="module" src="js/menu/filter/filter.js"></script>
 </body>
 
-</html>
+</html>

js/draw/app.js

@@ -0,0 +1,75 @@
+import {
+  Application,
+  Container,
+  Culler,
+  CullerPlugin,
+  extensions,
+} from "../pixi.min.mjs";
+import { dragEnd } from "./drag.js";
+import { addScroll } from "./scroll.js";
+
+const pixi = {
+  app: null,
+  container: null,
+  width: NaN,
+  height: NaN,
+};
+
+const createApp = async () => {
+  const app = new Application();
+  await app.init({
+    background: "#ffffff",
+    antialias: true,
+    useContextAlpha: false,
+    resizeTo: window,
+    preference: "webgpu",
+    webgpu: {
+      powerPreference: "high-performance",
+    },
+  });
+
+  document.body.appendChild(app.canvas);
+  return app;
+};
+
+export const createContainer = (app, objects) => {
+  const container = new Container();
+  pixi.container = container;
+
+  const culler = new Culler();
+  culler.cull(container, {
+    x: 0,
+    y: 0,
+    width: app.renderer.width,
+    height: app.renderer.height,
+  });
+
+  app.stage.addChild(container);
+  app.stage.eventMode = "static";
+  app.stage.hitArea = app.screen;
+  app.stage.on("pointerup", dragEnd);
+  app.stage.on("pointerupoutside", dragEnd);
+  addScroll(app, objects);
+};
+
+export const saveSize = (width, height) => {
+  pixi.width = width;
+  pixi.height = height;
+};
+
+export const getApp = () => {
+  return pixi.app;
+};
+
+export const getContainer = () => {
+  return pixi.container;
+};
+
+export const getContainerSize = () => {
+  return { width: pixi.width, height: pixi.height };
+};
+
+export const startPixi = async () => {
+  const app = await createApp();
+  pixi.app = app;
+};

js/draw/box.js

@@ -0,0 +1,172 @@
+import {
+  Graphics,
+  Assets,
+  Sprite,
+  Text,
+  TextStyle,
+  Cache,
+} from "../pixi.min.mjs";
+import { getApp, getContainer } from "./app.js";
+
+const MARGIN = 20;
+const PADDING = 5;
+const TITLE_MARGIN = 12;
+
+function createText(
+  text,
+  { fontFamily, fontSize, fontWeight, align, fill, wrap = false, maxWidth }
+) {
+  return new Text({
+    text,
+    style: new TextStyle({
+      fontFamily,
+      fontSize,
+      fontWeight,
+      align,
+      fill,
+      wordWrap: wrap,
+      wordWrapWidth: maxWidth,
+    }),
+    resolution: 2,
+  });
+}
+
+function createObjectModal(lines) {
+  const text = createText(lines.join("\n"), {
+    fontFamily: "sans-serif",
+    fontSize: 14,
+    fontWeight: "normal",
+    align: "center",
+    fill: "black",
+  });
+
+  const width = text.width + PADDING;
+  const height = text.height + 2 * MARGIN;
+
+  const box = new Graphics();
+  box.roundRect(0, 0, width + PADDING, height + PADDING, 5);
+  box.fill("#f1f1f1");
+  box.stroke({ width: 1, color: "#000000" });
+  box.addChild(text);
+  box.zIndex = 2;
+  text.position.set((box.width - text.width) / 2, MARGIN);
+
+  return box;
+}
+
+function renderObjectModal(objectModal, x, y) {
+  const container = getContainer();
+  objectModal.position.set(x, y);
+  container.addChild(objectModal);
+}
+
+function removeObjectModal(objectModal) {
+  const container = getContainer();
+  if (objectModal !== null) {
+    container.removeChild(objectModal);
+  }
+}
+
+export function addBox(box) {
+  const container = getContainer();
+  container.addChild(box);
+}
+
+const boxes = {};
+
+export function buildBox(object) {
+  const key = `${object.width}-${object.height}-${object.color}-${object.radius}`;
+
+  if (boxes[key] === undefined) {
+    const box = new Graphics();
+    box.roundRect(0, 0, object.width, object.height, object.radius);
+    box.fill(object.color);
+    box.stroke({ width: 2, color: "#000000" });
+    const app = getApp();
+    const texture = app.renderer.generateTexture(box);
+    boxes[key] = texture;
+  }
+
+  const box = new Sprite(boxes[key]);
+  return box;
+}
+
+export function addHoverModal(box, lines) {
+  let objectModal = null;
+
+  box.on("pointerover", () => {
+    objectModal = createObjectModal(lines, box.width);
+    const objectModalWidth = parseInt(objectModal.width);
+    const boxWidth = parseInt(box.width);
+    const x = parseInt(box.position.x);
+    const xPosition = (boxWidth - objectModalWidth) / 2 + x;
+    const y = box.position.y;
+
+    const timeout = setTimeout(() => {
+      renderObjectModal(objectModal, xPosition, y);
+    }, 500);
+
+    const clean = () => {
+      clearTimeout(timeout);
+      removeObjectModal(objectModal);
+      objectModal = null;
+    };
+
+    box.on("pointerdown", clean);
+    box.on("pointerout", clean);
+  });
+}
+
+export function addTitleToBox(title, box) {
+  const boxTitle = createText(title, {
+    fontFamily: "sans-serif",
+    fontSize: 20,
+    align: "center",
+    fill: "black",
+    fontWeight: "bold",
+    wrap: true,
+    maxWidth: box.width,
+  });
+  box.addChild(boxTitle);
+  boxTitle.position.set((box.width - boxTitle.width) / 2, MARGIN);
+  return boxTitle.position.y + boxTitle.height + TITLE_MARGIN;
+}
+
+export function addLinesToBox(lines, box, y) {
+  const text = createText(lines.join("\n"), {
+    fontFamily: "sans-serif",
+    fontSize: 16,
+    fontWeight: "normal",
+    align: "center",
+    fill: "black",
+    wrap: true,
+    maxWidth: box.width,
+  });
+  box.addChild(text);
+  text.position.set((box.width - text.width) / 2, y);
+  return text.position.y + text.height;
+}
+
+export async function svgElementToPixiSprite(id, src, size) {
+  let asset;
+
+  if (!Cache.has(id)) {
+    Cache.set(id, await Assets.load(src));
+  }
+
+  asset = Cache.get(id);
+  const sprite = Sprite.from(asset);
+  sprite.width = size;
+  sprite.height = size;
+  return sprite;
+}
+
+export function addImageToBox(sprite, box, y) {
+  box.addChild(sprite);
+  sprite.position.set((box.width - sprite.width) / 2, y);
+  return sprite.position.y + sprite.height;
+}
+
+export function removeImageFromBox(sprite, box) {
+  box.removeChild(sprite);
+}