diff --git a/css/event.css b/css/event.css index 03de3398..19f506bc 100644 --- a/css/event.css +++ b/css/event.css @@ -23,21 +23,28 @@ #selected-event { font-weight: 500; - font-size: 1.2em; cursor: pointer; } +#selected-event:hover { + text-decoration: underline; + background-color: #d1d1d1; +} + #event-selector-menu { display: none; position: fixed; top: 32px; flex-direction: column; - justify-content: center; align-items: center; background-color: #e1e1e1; - width: 75px; + width: 100px; left: 50%; transform: translateX(-50%); + max-height: 175px; + overflow-y: auto; + overflow-x: hidden; + padding: 0 5px; } .event-option { diff --git a/css/main.css b/css/main.css index 6b7406b1..56011873 100644 --- a/css/main.css +++ b/css/main.css @@ -3,6 +3,7 @@ body { padding: 0; /* overflow: hidden; */ font-family: sans-serif; + font-size: 16px; } .manipulation-tool { diff --git a/js/main.js b/js/main.js index 8d79439e..f76ce42e 100644 --- a/js/main.js +++ b/js/main.js @@ -93,8 +93,8 @@ document.getElementById("input-file").addEventListener("change", (event) => { optionElementMenu.appendChild(document.createTextNode(option)); eventSelectorMenu.appendChild(optionElementMenu); optionElementMenu.addEventListener("click", () => { - eventSelectorMenu.style.display = "none"; renderEvent(option); + eventSelectorMenu.style.display = "none"; }); }); }); diff --git a/js/menu/event-number.js b/js/menu/event-number.js index a8c0a35b..273a817e 100644 --- a/js/menu/event-number.js +++ b/js/menu/event-number.js @@ -28,6 +28,8 @@ const manipulationTools = document.getElementsByClassName("manipulation-tool"); let currentEvent; +const scrollLocation = {}; + function updateEventNumber(newEventNumber) { if (eventNumber.firstChild) { eventNumber.removeChild(eventNumber.firstChild); @@ -50,12 +52,17 @@ function start(currentObjects, visibleObjects) { export function renderEvent(eventNumber) { const data = jsonData.data[`Event ${eventNumber}`]; + scrollLocation[currentEvent] = { + x: window.scrollX, + y: window.scrollY, + }; + if (data === undefined) { return; } else { currentEvent = eventNumber; - updateEventNumber(eventNumber); loadSelectedEvent(jsonData, selectedObjectTypes.types, eventNumber); + updateEventNumber(eventNumber); } } @@ -85,7 +92,14 @@ export function loadSelectedEvent() { } start(currentObjects, visibleObjects); - window.scroll((canvas.width - window.innerWidth) / 2, 0); + if (scrollLocation[currentEvent] === undefined) { + scrollLocation[currentEvent] = { + x: (canvas.width - window.innerWidth) / 2, + y: 0, + }; + } + + window.scroll(scrollLocation[currentEvent].x, scrollLocation[currentEvent].y); for (const tool of manipulationTools) { tool.style.display = "flex";