Skip to content

Commit

Permalink
Deploy preview for PR 65 🛫
Browse files Browse the repository at this point in the history
  • Loading branch information
brauliorivas committed Jul 22, 2024
1 parent 479c227 commit c478758
Show file tree
Hide file tree
Showing 10 changed files with 150 additions and 144 deletions.
2 changes: 1 addition & 1 deletion pr-preview/pr-65/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -195,8 +195,8 @@ <h2 id="view-title-info"></h2>
<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>
53 changes: 10 additions & 43 deletions pr-preview/pr-65/js/draw/app.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { Application, Container, Culler } from "../pixi.min.mjs";

const SPEED = 0.5;
const MARGIN = 100;
import { addScroll } from "./scroll.js";

const pixi = {
app: null,
container: null,
width: NaN,
height: NaN,
};

const createApp = async () => {
Expand All @@ -25,41 +25,6 @@ const createApp = async () => {
return app;
};

const addScroll = (app) => {
const container = getContainer();
const renderer = app.renderer;

container.x = 0;
container.y = 0;

const screenWidth = renderer.width;
const screenHeight = renderer.height;

app.canvas.addEventListener("wheel", (e) => {
const deltaX = parseInt(e.deltaX) * SPEED;
const deltaY = parseInt(e.deltaY) * SPEED;

const newXPosition = container.x - deltaX;
const newYPosition = container.y - deltaY;

const absXPosition = Math.abs(newXPosition);
const absYPosition = Math.abs(newYPosition);

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;
}
});
};

export const createContainer = (app) => {
const container = new Container({
isRenderGroup: true,
Expand All @@ -78,10 +43,9 @@ export const createContainer = (app) => {
addScroll(app);
};

export const setContainerSize = (width, height) => {
const container = getContainer();
container.width = width;
container.height = height;
export const saveSize = (width, height) => {
pixi.width = width;
pixi.height = height;
};

export const getApp = () => {
Expand All @@ -92,8 +56,11 @@ export const getContainer = () => {
return pixi.container;
};

export const getContainerSize = () => {
return { width: pixi.width, height: pixi.height };
};

export const startPixi = async () => {
const app = await createApp();
createContainer(app);
pixi.app = app;
};
15 changes: 11 additions & 4 deletions pr-preview/pr-65/js/draw/render.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
import { getApp, createContainer } from "./app.js";
import { scroll } from "../views/views.js";

export async function renderObjects(objects) {
const app = getApp();
app.stage.removeChildren();
createContainer(app);

const datatypes = objects.datatypes;
const associations = objects.associations;

for (const { collection } of Object.values(datatypes)) {
for (const object of collection) {
object.renderedBox = null;
await object.draw();
}
const renderPromises = collection.map((object) => object.draw());
await Promise.all(renderPromises);
}

for (const { oneToMany, oneToOne } of Object.values(datatypes)) {
Expand All @@ -28,4 +33,6 @@ export async function renderObjects(objects) {
association.draw();
}
}

scroll();
}
50 changes: 41 additions & 9 deletions pr-preview/pr-65/js/draw/scroll.js
Original file line number Diff line number Diff line change
@@ -1,27 +1,59 @@
import { getContainer, getApp } from "./app.js";
import { getApp, getContainerSize, getContainer } from "./app.js";

const SPEED = 0.5;

export const scrollTopLeft = () => {
const container = getContainer();
const x = 0;
const y = 0;

container.x = x;
container.y = y;

return { x, y };
};

export const scrollTopCenter = () => {
const container = getContainer();
const app = getApp();
const { width } = getContainerSize();

const screenWidth = app.renderer.width;
const containerWidth = container.width;
const containerWidth = width;

const x = (screenWidth - containerWidth) / 2;
const y = 0;
container.x = x;
container.y = y;

return { x, y };
};

export const addScroll = (app) => {
const container = getContainer();
const renderer = app.renderer;

container.x = 0;
container.y = 0;

const screenWidth = renderer.width;
const screenHeight = renderer.height;

app.canvas.addEventListener("wheel", (e) => {
if (e.shiftKey) {
const deltaX = parseInt(e.deltaY * SPEED);
const newXPosition = container.x - deltaX;
const isXInBounds =
newXPosition < 0 &&
newXPosition > screenWidth - getContainerSize().width;
if (isXInBounds) {
container.x = newXPosition;
}
} else {
const deltaY = parseInt(e.deltaY * SPEED);

const newYPosition = container.y - deltaY;

const isYInBounds =
newYPosition < 0 &&
newYPosition > screenHeight - getContainerSize().height;

if (isYInBounds) {
container.y = newYPosition;
}
}
});
};
27 changes: 14 additions & 13 deletions pr-preview/pr-65/js/filter/mcparticle.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { PdgToggle } from "../menu/show-pdg.js";
import { Toggle } from "../menu/toggle.js";
import { togglePDG, toggleId } from "../menu/show-pdg.js";
import {
bits,
genStatus,
Expand All @@ -13,11 +14,7 @@ const filter = document.getElementById("filter");
const filters = document.getElementById("filters");
const manipulationTools = document.getElementsByClassName("manipulation-tool");

export function setupMCParticleFilter(
viewObjects,
viewCurrentObjects,
viewVisibleObjects
) {
export function setupMCParticleFilter(viewObjects, viewCurrentObjects) {
for (const tool of manipulationTools) {
tool.style.display = "flex";
}
Expand All @@ -35,12 +32,16 @@ export function setupMCParticleFilter(

const width = getWidthFilterContent();
filter.style.width = width;
const pdgToggle = new PdgToggle("show-pdg");
pdgToggle.init(() => {
pdgToggle.toggle(viewCurrentObjects, () => {
drawAll(viewCurrentObjects);
});
});

start(viewObjects, viewCurrentObjects, viewVisibleObjects);
const pdgToggle = new Toggle("show-pdg");
pdgToggle.init(
() => {
toggleId(viewCurrentObjects);
},
() => {
togglePDG(viewCurrentObjects);
}
);

start(viewObjects, viewCurrentObjects);
}
23 changes: 9 additions & 14 deletions pr-preview/pr-65/js/menu/filter/filter.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { reconnect } from "./reconnect.js";
import { units } from "../../types/units.js";
import { copyObject } from "../../lib/copy.js";
import { SimStatusBitFieldDisplayValues } from "../../../mappings/sim-status.js";
import { renderObjects } from "../../draw/render.js";

const filterButton = document.getElementById("filter-button");
const openFilter = document.getElementById("open-filter");
Expand Down Expand Up @@ -68,7 +69,7 @@ bits.setCheckBoxes();

const genStatus = new CheckboxBuilder("generatorStatus", "Generator status");

function applyFilter(loadedObjects, currentObjects, visibleObjects) {
function applyFilter(loadedObjects, currentObjects) {
const rangeFunctions = Range.buildFilter(parametersRange);
const checkboxFunctions = Checkbox.buildFilter(bits.checkBoxes);
const genStatusFunctions = Checkbox.buildFilter(genStatus.checkBoxes);
Expand All @@ -82,26 +83,20 @@ function applyFilter(loadedObjects, currentObjects, visibleObjects) {
const filteredObjects = reconnect(criteriaFunction, loadedObjects);

copyObject(filteredObjects, currentObjects);

drawAll(currentObjects);

getVisible(currentObjects, visibleObjects);
renderObjects(currentObjects);
}

function removeFilter(loadedObjects, currentObjects, visibleObjects) {
function removeFilter(loadedObjects, currentObjects) {
copyObject(loadedObjects, currentObjects);

drawAll(currentObjects);

getVisible(currentObjects, visibleObjects);
renderObjects(currentObjects);

filters.innerHTML = "";

renderRangeParameters(parametersRange);
renderGenSim(bits, genStatus);
}

export function start(loadedObjects, currentObjects, visibleObjects) {
export function start(loadedObjects, currentObjects) {
filterButton.addEventListener("click", () => {
active = !active;

Expand All @@ -117,17 +112,17 @@ export function start(loadedObjects, currentObjects, visibleObjects) {
});

apply.addEventListener("click", () =>
applyFilter(loadedObjects, currentObjects, visibleObjects)
applyFilter(loadedObjects, currentObjects)
);

document.addEventListener("keydown", (event) => {
if (event.key === "Enter" && active) {
applyFilter(loadedObjects, currentObjects, visibleObjects);
applyFilter(loadedObjects, currentObjects);
}
});

reset.addEventListener("click", () =>
removeFilter(loadedObjects, currentObjects, visibleObjects)
removeFilter(loadedObjects, currentObjects)
);
}

Expand Down
38 changes: 16 additions & 22 deletions pr-preview/pr-65/js/menu/show-pdg.js
Original file line number Diff line number Diff line change
@@ -1,25 +1,19 @@
import { Toggle } from "./toggle.js";
export const togglePDG = async (objects) => {
const collection = objects.datatypes["edm4hep::MCParticle"].collection;

export class PdgToggle extends Toggle {
constructor(id) {
super(id);
}
const updatePDG = collection.map((object) =>
object.drawImage(`${object.name}`)
);

toggle(currentObjects, redraw) {
const collection =
currentObjects.datatypes["edm4hep::MCParticle"].collection;
if (this.isSliderActive) {
if (collection[0].PDG === undefined) return;
for (const object of collection) {
object.updateTexImg(`${object.PDG}`);
}
} else {
if (collection[0].PDG === undefined) return;
for (const object of collection) {
object.updateTexImg(`${object.name}`);
}
}
await Promise.all(updatePDG);
};

redraw();
}
}
export const toggleId = async (objects) => {
const collection = objects.datatypes["edm4hep::MCParticle"].collection;

const updateId = collection.map((object) =>
object.drawImage(`${object.PDG}`)
);

await Promise.all(updateId);
};
20 changes: 16 additions & 4 deletions pr-preview/pr-65/js/menu/toggle.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,25 @@
const prev = {
function: null,
};

export class Toggle {
constructor(id) {
this.isSliderActive = false;
this.slider = document.getElementById(id);
}

init(callback) {
this.slider.addEventListener("click", () => {
init(activeFunction, inactiveFunction) {
const newFunction = () => {
this.isSliderActive = !this.isSliderActive;
callback();
});
if (this.isSliderActive) {
activeFunction();
} else {
inactiveFunction();
}
};

this.slider.removeEventListener("click", prev.function);
this.slider.addEventListener("click", newFunction);
prev.function = newFunction;
}
}
Loading

0 comments on commit c478758

Please sign in to comment.