From 904fee390b63ad6f598259a4e2fa818d853a4ce0 Mon Sep 17 00:00:00 2001 From: Hans5958 Date: Tue, 12 Apr 2022 19:18:53 +0700 Subject: [PATCH 1/5] Improve canvas loading A --- web/_css/style.css | 41 +++++++++++++++++++++++++++++++++++------ web/_js/main.js | 4 ++-- web/_js/time.js | 23 +++++++++++++++++++++-- 3 files changed, 58 insertions(+), 10 deletions(-) diff --git a/web/_css/style.css b/web/_css/style.css index a2f2d976..b8f93693 100644 --- a/web/_css/style.css +++ b/web/_css/style.css @@ -125,7 +125,7 @@ header { background-color: #555; border-right: 1px #000 solid; border-bottom: 1px #000 solid; - z-index: 2000; + z-index: 2100; display: inline-block; } @@ -250,7 +250,16 @@ #loading { left: 0; right: 0; bottom: 0; + z-index: 2000; +} + +[data-init-done][data-canvas-loading='false'] #loading { + display: none +} + +[data-init-done] #loading { z-index: 1000; + animation: fadeInOut 4s linear 0s 1; } #loading > div { @@ -274,10 +283,25 @@ #loading > div > div:first-child { } #loading > div > span { - font-family: "DejaVu Sans", Helvetica, sans-serif; + font-family: dejavu, Helvetica, sans-serif; font-weight: 200; } +@keyframes fadeInOut { + 0% { + opacity: 0; + } + 50% { + opacity: 0; + } + 52.5% { + opacity: 1; + } + 100% { + opacity: 1; + } +} + @keyframes spinner { from { transform: rotateZ(0deg); @@ -609,7 +633,7 @@ .overlay { background-color: rgba(0, 0, 0, .8); display: none; justify-content: center; - z-index: 1000; + z-index: 2000; } #exportWindow { @@ -657,7 +681,7 @@ #coordsWrapper { position: absolute; display: flex; gap: 10px; - z-index: 100; + z-index: 1100; top: 5px; left: 364px; } @@ -764,6 +788,11 @@ #timeControls:hover #timeControlsTooltip { display: flex; } +#zoomControls, +#timeControls { + z-index: 1100; +} + .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; @@ -786,7 +815,7 @@ #author { border: 1px #000 solid; padding: 3px; font-size: 12px; - z-index: 1100; + z-index: 2100; min-width: 320px; text-align: center; display: flex; @@ -1141,7 +1170,7 @@ #donateButton { #donateWindow { display: inline-block; - z-index: 2000; + z-index: 2100; max-width: 400px; background-color: #444; border: 1px #000 solid; diff --git a/web/_js/main.js b/web/_js/main.js index 92acbcc7..43dad34e 100644 --- a/web/_js/main.js +++ b/web/_js/main.js @@ -186,8 +186,6 @@ async function init(){ initView(); } - document.getElementById("loading").style.display = "none"; - document.getElementById("zoomInButton").addEventListener("click", function(e){ /*if(zoomAnimationFrame){ @@ -496,4 +494,6 @@ async function init(){ applyView(); }); + document.body.dataset.initDone = '' + } diff --git a/web/_js/time.js b/web/_js/time.js index 76e23a42..e13288bd 100644 --- a/web/_js/time.js +++ b/web/_js/time.js @@ -96,6 +96,10 @@ const timeConfig = [ let slider = document.getElementById("timeControlsSlider"); let tooltip = document.getElementById("timeControlsTooltip") let image = document.getElementById("image"); +let abortController = new AbortController() +let currentUpdateIndex = 0 +let loadingTimeout = setInterval(null, 0) +let updateTimeout = setInterval(null, 0) let timeCallback = (a) => {}; let atlasBackup = []; @@ -106,14 +110,28 @@ slider.value = timeConfig.length; updateTime(slider.value) slider.addEventListener("input", (event) => { - updateTime(parseInt(event.target.value)) + clearTimeout(updateTimeout) + updateTimeout = setInterval(() => { + updateTime(parseInt(event.target.value)) + }, 100) }) async function updateTime(index) { + document.body.dataset.canvasLoading = true + abortController.abort() + abortController = new AbortController() + currentUpdateIndex++ + let myUpdateIndex = currentUpdateIndex let configObject = timeConfig[index-1]; if (!configObject.image) { console.log("fetching"); - let fetchResult = await fetch(configObject.url); + let fetchResult = await fetch(configObject.url, { + signal: abortController.signal + }); + if (currentUpdateIndex !== myUpdateIndex) { + hideLoading() + return + } let imageBlob = await fetchResult.blob(); configObject.image = URL.createObjectURL(imageBlob); } @@ -128,6 +146,7 @@ async function updateTime(index) { if (typeof configObject.timestamp === "number") tooltip.querySelector('p').textContent = new Date(configObject.timestamp*1000).toUTCString() else tooltip.querySelector('p').textContent = configObject.timestamp tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px" + document.body.dataset.canvasLoading = false } tooltip.parentElement.addEventListener('mouseenter', () => tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px" From 0744836aa62752d3268f9aa9be81bb79c50f954a Mon Sep 17 00:00:00 2001 From: Hans5958 Date: Tue, 12 Apr 2022 19:25:18 +0700 Subject: [PATCH 2/5] setTimeout instead of setInterval --- web/_js/time.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/web/_js/time.js b/web/_js/time.js index e13288bd..c388c462 100644 --- a/web/_js/time.js +++ b/web/_js/time.js @@ -98,8 +98,7 @@ let tooltip = document.getElementById("timeControlsTooltip") let image = document.getElementById("image"); let abortController = new AbortController() let currentUpdateIndex = 0 -let loadingTimeout = setInterval(null, 0) -let updateTimeout = setInterval(null, 0) +let updateTimeout = setTimeout(null, 0) let timeCallback = (a) => {}; let atlasBackup = []; @@ -111,7 +110,7 @@ updateTime(slider.value) slider.addEventListener("input", (event) => { clearTimeout(updateTimeout) - updateTimeout = setInterval(() => { + updateTimeout = setTimeout(() => { updateTime(parseInt(event.target.value)) }, 100) }) From 0a1d5c01eeb68cd40c9feb81a7f59420edb3b5ee Mon Sep 17 00:00:00 2001 From: Hans5958 Date: Tue, 12 Apr 2022 20:10:00 +0700 Subject: [PATCH 3/5] Forgot to fix resize fix Please no Netlify gimmicko again --- web/_js/view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/_js/view.js b/web/_js/view.js index 55477eaa..7ce5b4fe 100644 --- a/web/_js/view.js +++ b/web/_js/view.js @@ -140,7 +140,7 @@ objectsContainer.addEventListener("scroll", function(e){ updateLines(); }); -window.addEventListener("resize", function(){ +window.addEventListener("resize", function(e){ //console.log(document.documentElement.clientWidth, document.documentElement.clientHeight); var viewportWidth = document.documentElement.clientWidth; From 4f6a644622f1d9696dad2d091c5a393336649a93 Mon Sep 17 00:00:00 2001 From: Hans5958 Date: Tue, 12 Apr 2022 20:15:37 +0700 Subject: [PATCH 4/5] Maybe change _headers? --- _headers | 2 -- web/_headers | 5 +++++ 2 files changed, 5 insertions(+), 2 deletions(-) delete mode 100644 _headers create mode 100644 web/_headers diff --git a/_headers b/_headers deleted file mode 100644 index c776a479..00000000 --- a/_headers +++ /dev/null @@ -1,2 +0,0 @@ -/* - Access-Control-Allow-Origin: * diff --git a/web/_headers b/web/_headers new file mode 100644 index 00000000..0bac4f23 --- /dev/null +++ b/web/_headers @@ -0,0 +1,5 @@ +/* + Access-Control-Allow-Origin: * + +/_img/place/*.png + cache-control: public, max-age=604800 \ No newline at end of file From 84a8e4c141f3a83e9b9267847f8cbfbbc9cf2822 Mon Sep 17 00:00:00 2001 From: Hans5958 Date: Wed, 13 Apr 2022 17:06:25 +0700 Subject: [PATCH 5/5] Tiny refactor, do not wait until fetch for updating tooltip --- web/_js/time.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/web/_js/time.js b/web/_js/time.js index c388c462..c1b10590 100644 --- a/web/_js/time.js +++ b/web/_js/time.js @@ -109,6 +109,7 @@ slider.value = timeConfig.length; updateTime(slider.value) slider.addEventListener("input", (event) => { + updateTooltip(parseInt(event.target.value)) clearTimeout(updateTimeout) updateTimeout = setTimeout(() => { updateTime(parseInt(event.target.value)) @@ -142,14 +143,16 @@ async function updateTime(index) { atlas = [] } timeCallback(atlas) - if (typeof configObject.timestamp === "number") tooltip.querySelector('p').textContent = new Date(configObject.timestamp*1000).toUTCString() - else tooltip.querySelector('p').textContent = configObject.timestamp - tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px" document.body.dataset.canvasLoading = false } -tooltip.parentElement.addEventListener('mouseenter', () => tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px" -) +function updateTooltip(index) { + var configObject = timeConfig[index-1] + if (typeof configObject.timestamp === "number") tooltip.querySelector('p').textContent = new Date(configObject.timestamp*1000).toUTCString() + else tooltip.querySelector('p').textContent = configObject.timestamp + tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px" +} -window.addEventListener('resize', () => tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px" -) \ No newline at end of file +tooltip.parentElement.addEventListener('mouseenter', () => updateTooltip(parseInt(slider.value))) + +window.addEventListener('resize', () => updateTooltip(parseInt(slider.value))) \ No newline at end of file