mirror of https://github.com/placeAtlas/atlas.git
437 lines
15 KiB
JavaScript
437 lines
15 KiB
JavaScript
/*!
|
|
* The 2022 r/place Atlas
|
|
* Copyright (c) 2017 Roland Rytz <roland@draemm.li>
|
|
* Copyright (c) 2022 Place Atlas Initiative and contributors
|
|
* Licensed under AGPL-3.0 (https://2022.place-atlas.stefanocoding.me/license.txt)
|
|
*/
|
|
|
|
const codeReference = {}
|
|
let canvasUrl = ""
|
|
|
|
const variantsEl = document.getElementById("variants")
|
|
|
|
for (const variation in variationsConfig) {
|
|
codeReference[variationsConfig[variation].code] = variation
|
|
const optionEl = document.createElement('option')
|
|
optionEl.value = variation
|
|
optionEl.textContent = variationsConfig[variation].name
|
|
variantsEl.appendChild(optionEl)
|
|
}
|
|
|
|
const timelineSlider = document.getElementById("timeControlsSlider")
|
|
const timelineList = document.getElementById("timeControlsList")
|
|
const tooltip = document.getElementById("timeControlsTooltip")
|
|
const image = document.getElementById("image")
|
|
let abortController = new AbortController()
|
|
let currentUpdateIndex = 0
|
|
let updateTimeout = setTimeout(null, 0)
|
|
let tooltipDelayHide = setTimeout(null, 0)
|
|
|
|
let currentVariation = defaultVariation
|
|
let currentPeriod = defaultPeriod
|
|
window.currentVariation = currentVariation
|
|
window.currentPeriod = currentPeriod
|
|
|
|
let atlasDisplay = {}
|
|
window.atlasDisplay = atlasDisplay
|
|
|
|
const additionalLayers = []
|
|
const additionalLayerCanvas = document.createElement('canvas')
|
|
|
|
// SETUP
|
|
if (variationsConfig[currentVariation].versions.length === 1) bottomBar.classList.add('no-time-slider')
|
|
|
|
timelineSlider.max = variationsConfig[currentVariation].versions.length - 1
|
|
timelineSlider.value = currentPeriod
|
|
timelineList.children[0].value = defaultPeriod
|
|
|
|
timelineSlider.addEventListener("input", e => timelineParser(e.target.value))
|
|
|
|
timelineSlider.addEventListener("wheel", e => {
|
|
if (e.deltaY < 0) e.target.valueAsNumber += 1
|
|
else e.target.value -= 1
|
|
timelineParser(e.target.value)
|
|
e.stopPropagation()
|
|
}, { passive: true })
|
|
|
|
function timelineParser(value) {
|
|
updateTooltip(parseInt(value), currentVariation)
|
|
clearTimeout(updateTimeout)
|
|
updateTimeout = setTimeout(() => {
|
|
updateTime(parseInt(timelineSlider.value), currentVariation)
|
|
setTimeout(() => {
|
|
if (timelineSlider.value !== currentPeriod && abortController.signal.aborted) {
|
|
updateTime(parseInt(timelineSlider.value), currentVariation)
|
|
}
|
|
}, 50)
|
|
}, 25)
|
|
}
|
|
|
|
variantsEl.addEventListener("input", event => {
|
|
updateTime(-1, event.target.value)
|
|
})
|
|
|
|
const dispatchTimeUpdateEvent = (period = currentPeriod, variation = currentVariation, atlas = atlas) => {
|
|
const timeUpdateEvent = new CustomEvent('timeupdate', {
|
|
detail: {
|
|
period: period,
|
|
variation: variation,
|
|
periodString: formatPeriod(period, null, variation),
|
|
atlas: atlas
|
|
}
|
|
})
|
|
document.dispatchEvent(timeUpdateEvent)
|
|
}
|
|
|
|
async function updateBackground(newPeriod = currentPeriod, newVariation = currentVariation) {
|
|
abortController.abort()
|
|
const myAbortController = new AbortController()
|
|
abortController = myAbortController
|
|
currentUpdateIndex++
|
|
const myUpdateIndex = currentUpdateIndex
|
|
const variationConfig = variationsConfig[newVariation]
|
|
|
|
variantsEl.value = currentVariation
|
|
if (variationConfig.icon) {
|
|
variantsEl.previousElementSibling.innerHTML = variationConfig.icon
|
|
variantsEl.previousElementSibling.classList.remove('d-none')
|
|
variantsEl.parentElement.classList.add('input-group')
|
|
} else {
|
|
variantsEl.previousElementSibling.innerHTML = ""
|
|
variantsEl.previousElementSibling.classList.add('d-none')
|
|
variantsEl.parentElement.classList.remove('input-group')
|
|
}
|
|
|
|
const configObject = variationConfig.versions[newPeriod]
|
|
let layerUrls = []
|
|
let layers = []
|
|
|
|
if (typeof configObject.url === "string") {
|
|
layerUrls.push(configObject.url)
|
|
} else {
|
|
layerUrls.push(...configObject.url)
|
|
}
|
|
const canvas = document.createElement('canvas')
|
|
const context = canvas.getContext('2d')
|
|
|
|
layers.length = layerUrls.length
|
|
await Promise.all(layerUrls.map(async (url, i) => {
|
|
try {
|
|
const imageBlob = await (await fetch(url, { signal: myAbortController.signal })).blob()
|
|
const imageLayer = new Image()
|
|
await new Promise(resolve => {
|
|
imageLayer.onload = () => {
|
|
context.canvas.width = Math.max(imageLayer.width, context.canvas.width)
|
|
context.canvas.height = Math.max(imageLayer.height, context.canvas.height)
|
|
layers[i] = imageLayer
|
|
resolve()
|
|
}
|
|
imageLayer.src = URL.createObjectURL(imageBlob)
|
|
})
|
|
} catch (e) {
|
|
const aborted = myAbortController.signal.aborted
|
|
if (!aborted) throw e
|
|
}
|
|
}))
|
|
|
|
if (myAbortController.signal.aborted || newPeriod !== currentPeriod || newVariation !== currentVariation || currentUpdateIndex !== myUpdateIndex) {
|
|
return false
|
|
}
|
|
|
|
for (const imageLayer of layers) {
|
|
context.drawImage(imageLayer, 0, 0)
|
|
}
|
|
|
|
context.drawImage(additionalLayerCanvas, 0, 0)
|
|
|
|
if (myAbortController.signal.aborted || newPeriod !== currentPeriod || newVariation !== currentVariation || currentUpdateIndex !== myUpdateIndex) {
|
|
return false
|
|
}
|
|
|
|
if (currentUpdateIndex !== myUpdateIndex) return [configObject, newPeriod, newVariation]
|
|
const blob = await new Promise(resolve => canvas.toBlob(resolve))
|
|
canvasUrl = URL.createObjectURL(blob)
|
|
image.src = canvasUrl
|
|
|
|
return true
|
|
|
|
}
|
|
|
|
let loadingTimeout = setTimeout(() => {}, 0)
|
|
|
|
async function updateTime(newPeriod = currentPeriod, newVariation = currentVariation, forceLoad = false) {
|
|
if (newPeriod === currentPeriod && newVariation === currentVariation && !forceLoad) {
|
|
return
|
|
}
|
|
document.body.dataset.canvasLoading = ""
|
|
|
|
const loadingEl = document.getElementById("loading")
|
|
const previouslyHidden = loadingEl.classList.contains("d-none")
|
|
|
|
if (previouslyHidden) loadingEl.classList.add("opacity-0", "transition-opacity")
|
|
clearTimeout(loadingTimeout)
|
|
loadingTimeout = setTimeout(() => {
|
|
loadingEl.classList.remove("d-none")
|
|
if (previouslyHidden) setTimeout(() => {
|
|
loadingEl.classList.remove("opacity-0")
|
|
}, 0)
|
|
}, 2000)
|
|
|
|
// const oldPeriod = currentPeriod
|
|
const oldVariation = currentVariation
|
|
|
|
if (!variationsConfig[newVariation]) newVariation = defaultVariation
|
|
const variationConfig = variationsConfig[newVariation]
|
|
|
|
if (newPeriod < 0) newPeriod = 0
|
|
else if (newPeriod > variationConfig.versions.length - 1) newPeriod = variationConfig.versions.length - 1
|
|
|
|
currentPeriod = newPeriod
|
|
currentVariation = newVariation
|
|
|
|
if (oldVariation !== newVariation) {
|
|
timelineSlider.max = variationConfig.versions.length - 1
|
|
if (!forceLoad) {
|
|
currentPeriod = variationConfig.default
|
|
newPeriod = currentPeriod
|
|
}
|
|
if (variationConfig.versions.length === 1) bottomBar.classList.add('no-time-slider')
|
|
else bottomBar.classList.remove('no-time-slider')
|
|
}
|
|
timelineSlider.value = currentPeriod
|
|
updateTooltip(newPeriod, newVariation)
|
|
|
|
const updateBackgroundResult = await updateBackground(newPeriod, newVariation)
|
|
|
|
if (!updateBackgroundResult) return
|
|
|
|
dispatchTimeUpdateEvent(newPeriod, newVariation, atlas)
|
|
delete document.body.dataset.canvasLoading
|
|
clearTimeout(loadingTimeout)
|
|
document.getElementById("loading").classList.add("d-none")
|
|
document.getElementById("loading").classList.remove("opacity-0", "opacity-100", "transition-opacity")
|
|
|
|
tooltip.dataset.forceVisible = ""
|
|
clearTimeout(tooltipDelayHide)
|
|
tooltipDelayHide = setTimeout(() => {
|
|
delete tooltip.dataset.forceVisible
|
|
}, 1000)
|
|
|
|
}
|
|
|
|
function generateAtlasDisplay(prevAtlas, prevAtlasOrder, newPeriod = currentPeriod, newVariation = currentVariation) {
|
|
|
|
const newAtlas = {}
|
|
const newAtlasOrderDisplayed = []
|
|
const newAtlasOrderNotDisplayed = []
|
|
|
|
for (const id of prevAtlasOrder) {
|
|
|
|
newAtlasOrderNotDisplayed.push(id)
|
|
const entry = prevAtlas[id]
|
|
|
|
let chosenIndex
|
|
|
|
const validPeriods2 = Object.keys(entry.path)
|
|
|
|
periodCheck: for (const i in validPeriods2) {
|
|
const validPeriods = validPeriods2[i].split(', ')
|
|
for (const j in validPeriods) {
|
|
const [start, end, variation] = parsePeriod(validPeriods[j])
|
|
if (isOnPeriod(start, end, variation, newPeriod, newVariation)) {
|
|
chosenIndex = i
|
|
break periodCheck
|
|
}
|
|
}
|
|
}
|
|
|
|
if (chosenIndex === undefined) continue
|
|
const pathChosen = Object.values(entry.path)[chosenIndex]
|
|
const centerChosen = Object.values(entry.center)[chosenIndex]
|
|
|
|
if (pathChosen === undefined) continue
|
|
|
|
newAtlas[id] = {
|
|
...entry,
|
|
path: pathChosen,
|
|
center: centerChosen,
|
|
}
|
|
|
|
newAtlasOrderNotDisplayed.pop()
|
|
newAtlasOrderDisplayed.push(id)
|
|
|
|
}
|
|
|
|
return [newAtlas, [...newAtlasOrderDisplayed, ...newAtlasOrderNotDisplayed]]
|
|
|
|
}
|
|
|
|
function updateTooltip(period, variation) {
|
|
const configObject = variationsConfig[variation].versions[period]
|
|
|
|
// If timestamp is a number return a UTC formatted date, otherwise use exact timestamp label
|
|
if (Array.isArray(configObject.timestamp)) {
|
|
tooltip.querySelector('div').textContent = ""
|
|
configObject.timestamp.forEach(timestamp => {
|
|
if (tooltip.querySelector('div').textContent) tooltip.querySelector('div').innerHTML += "<br />"
|
|
if (typeof timestamp === "number") tooltip.querySelector('div').innerHTML += new Date(timestamp * 1000).toUTCString()
|
|
else tooltip.querySelector('div').innerHTML += timestamp
|
|
})
|
|
} else if (typeof configObject.timestamp === "number") tooltip.querySelector('div').textContent = new Date(configObject.timestamp * 1000).toUTCString()
|
|
else tooltip.querySelector('div').textContent = configObject.timestamp
|
|
|
|
// Clamps position of tooltip to prevent from going off screen
|
|
const timelineSliderRect = timelineSlider.getBoundingClientRect()
|
|
let min = -timelineSliderRect.left + 12
|
|
let max = (window.innerWidth - tooltip.offsetWidth) - timelineSliderRect.left + 4
|
|
tooltip.style.left = Math.min(Math.max((timelineSlider.offsetWidth) * (timelineSlider.value) / (timelineSlider.max) - tooltip.offsetWidth / 2, min), max) + "px"
|
|
}
|
|
|
|
tooltip.parentElement.addEventListener('mouseenter', () => updateTooltip(parseInt(timelineSlider.value), currentVariation))
|
|
|
|
window.addEventListener('resize', () => updateTooltip(parseInt(timelineSlider.value), currentVariation))
|
|
|
|
function isOnPeriod(start, end, variation, currentPeriod, currentVariation) {
|
|
if (start > end) [start, end] = [end, start]
|
|
return currentPeriod >= start && currentPeriod <= end && variation === currentVariation
|
|
}
|
|
window.isOnPeriod = isOnPeriod
|
|
|
|
function parsePeriod(periodString) {
|
|
let variation = defaultVariation
|
|
periodString = periodString + ""
|
|
if (periodString.split(':').length > 1) {
|
|
const split = periodString.split(':')
|
|
variation = codeReference[split[0]]
|
|
periodString = split[1]
|
|
}
|
|
if (periodString.search('-') + 1) {
|
|
let [start, end] = periodString.split('-').map(i => parseInt(i))
|
|
if (start > end) [start, end] = [end, start]
|
|
return [start, end, variation]
|
|
} else if (codeReference[periodString]) {
|
|
variation = codeReference[periodString]
|
|
const defaultPeriod = variationsConfig[variation].default
|
|
return [defaultPeriod, defaultPeriod, variation]
|
|
} else {
|
|
const periodNew = parseInt(periodString)
|
|
return [periodNew, periodNew, variation]
|
|
}
|
|
}
|
|
|
|
function formatPeriod(targetStart, targetEnd, targetVariation, forUrl = false) {
|
|
targetStart ??= currentPeriod
|
|
targetEnd ??= targetStart
|
|
targetVariation ??= currentVariation
|
|
|
|
let periodString, variationString
|
|
variationString = variationsConfig[targetVariation].code
|
|
if (targetStart > targetEnd) [targetStart, targetEnd] = [targetEnd, targetStart]
|
|
if (targetStart === targetEnd) {
|
|
if (forUrl && targetVariation === defaultVariation && targetStart === variationsConfig[defaultVariation].default) {
|
|
periodString = ""
|
|
}
|
|
else periodString = targetStart
|
|
}
|
|
else periodString = targetStart + "-" + targetEnd
|
|
if (periodString && variationString) return variationsConfig[targetVariation].code + ":" + periodString
|
|
if (variationString) return variationString
|
|
|
|
return periodString
|
|
}
|
|
|
|
function setReferenceVal(reference, newValue) {
|
|
if (reference === false || reference === "") return null
|
|
else return reference ?? newValue
|
|
}
|
|
|
|
function formatHash(targetEntry, targetPeriod, targetVariation, targetX, targetY, targetZoom) {
|
|
let hashData = window.location.hash.substring(1).split('/')
|
|
|
|
targetEntry = setReferenceVal(targetEntry, hashData[0])
|
|
targetPeriod = setReferenceVal(targetPeriod, currentPeriod)
|
|
targetVariation = setReferenceVal(targetVariation, currentVariation)
|
|
targetX = setReferenceVal(targetX, canvasCenter.x - scaleZoomOrigin[0])
|
|
targetY = setReferenceVal(targetY, canvasCenter.y - scaleZoomOrigin[1])
|
|
targetZoom = setReferenceVal(targetZoom, zoom)
|
|
|
|
if (targetX) targetX = Math.round(targetX)
|
|
if (targetY) targetY = Math.round(targetY)
|
|
if (targetZoom) targetZoom = targetZoom.toFixed(3).replace(/\.?0+$/, '')
|
|
|
|
const result = [targetEntry]
|
|
const targetPeriodFormat = formatPeriod(targetPeriod, null, targetVariation, true)
|
|
result.push(targetPeriodFormat, targetX, targetY, targetZoom)
|
|
if (!result.some(el => el || el === 0)) return ''
|
|
return '#' + result.join('/').replace(/\/+$/, '')
|
|
}
|
|
|
|
function downloadCanvas() {
|
|
const linkEl = document.createElement("a")
|
|
linkEl.download = "canvas.png"
|
|
linkEl.href = canvasUrl
|
|
linkEl.classList.add("d-none")
|
|
document.body.appendChild(linkEl)
|
|
linkEl.click()
|
|
document.body.removeChild(linkEl)
|
|
}
|
|
|
|
function getNearestPeriod(entry, targetPeriod, targetVariation) {
|
|
|
|
const pathKeys = Object.keys(entry.path)
|
|
|
|
let nearestScore, nearestPeriod, nearestVariation, nearestKey
|
|
|
|
function updateNearest(newScore, newPeriod, newVariation, newKey) {
|
|
if (newScore >= nearestScore) return
|
|
nearestScore = newScore
|
|
nearestPeriod = newPeriod
|
|
nearestVariation = newVariation
|
|
nearestKey = newKey
|
|
}
|
|
|
|
checkPaths: for (const pathKey of pathKeys) {
|
|
const pathPeriods = pathKey.split(', ')
|
|
|
|
checkPathPeriod: for (const j in pathPeriods) {
|
|
const [pathStart, pathEnd, pathVariation] = parsePeriod(pathPeriods[j])
|
|
if (isOnPeriod(pathStart, pathEnd, pathVariation, targetPeriod, targetVariation)) {
|
|
updateNearest(0, targetPeriod, targetVariation)
|
|
break checkPaths
|
|
} else if (pathVariation !== targetVariation) {
|
|
updateNearest(Infinity, pathStart, pathVariation, pathKey)
|
|
continue checkPathPeriod
|
|
} else if (Math.abs(pathStart - targetPeriod) < Math.abs(pathEnd - targetPeriod)) {
|
|
updateNearest(Math.abs(pathStart - targetPeriod), pathStart, pathVariation, pathKey)
|
|
} else {
|
|
updateNearest(Math.abs(pathEnd - targetPeriod), pathStart, pathVariation, pathKey)
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
return [ nearestPeriod, nearestVariation, nearestKey ]
|
|
|
|
}
|
|
|
|
const updateAdditionalLayer = () => {
|
|
const layers = additionalLayers
|
|
const canvas = additionalLayerCanvas
|
|
const context = additionalLayerCanvas.getContext('2d')
|
|
canvas.width = 0
|
|
canvas.height = 0
|
|
|
|
|
|
for (const layer of layers) {
|
|
if (!layer.imageLayer) continue
|
|
canvas.width = Math.max(layer.x + layer.imageLayer.width, canvas.width)
|
|
canvas.height = Math.max(layer.y + layer.imageLayer.height, canvas.height)
|
|
}
|
|
|
|
for (const layer of layers) {
|
|
if (!layer.imageLayer) continue
|
|
context.drawImage(layer.imageLayer, layer.x, layer.y)
|
|
console.log(layer.imageLayer)
|
|
}
|
|
}
|