MirrorHub/atlas
0
0
Fork 0
mirror of https://github.com/placeAtlas/atlas.git synced 2024-06-09 23:09:25 +02:00
Code Issues Projects Releases Wiki Activity

Small refactoring 3

Browse source
This commit is contained in:
Hans5958 2023-03-26 18:58:17 +07:00
parent d438265542
commit 5df83c25df
5 changed files with 63 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
web/_js/main/draw.js
View file

@ -768,17 +768,7 @@ function initDraw() {
zoom = 4
zoomOrigin = [
innerContainer.clientWidth / 2 - canvasCenter.x * zoom,// + container.offsetLeft
innerContainer.clientHeight / 2 - canvasCenter.y * zoom// + container.offsetTop
]
scaleZoomOrigin = [
canvasCenter.x - center[0],// + container.offsetLeft
canvasCenter.y - center[1]// + container.offsetTop
]
applyView()
setView(center[0], center[1])
document.addEventListener('timeupdate', () => {
renderBackground()
@ -910,9 +900,7 @@ function initPeriodGroups() {
// Set zoom view
periodCenter = calculateCenter(path)
zoomOrigin = [innerContainer.clientWidth / 2 - periodCenter[0] * zoom, innerContainer.clientHeight / 2 - periodCenter[1] * zoom]
scaleZoomOrigin = [canvasCenter.x - periodCenter[0], canvasCenter.y - periodCenter[1]]
applyView()
setView(periodCenter[0], periodCenter[1], setZoomByPath(path))
})
function startPeriodUpdate(value) {
@ -979,9 +967,7 @@ function initPeriodGroups() {
// Set zoom view
periodCenter = calculateCenter(path)
zoomOrigin = [innerContainer.clientWidth / 2 - periodCenter[0] * zoom, innerContainer.clientHeight / 2 - periodCenter[1] * zoom]
scaleZoomOrigin = [canvasCenter.x - periodCenter[0], canvasCenter.y - periodCenter[1]]
applyView()
setView(periodCenter[0], periodCenter[1], setZoomByPath(path))
})
function endPeriodUpdate(value) {
startPeriodListEl.innerHTML = '<option value="' + (parseInt(value) + 1) + '"></option>'

21
web/_js/main/infoblock.js
View file

@ -41,7 +41,14 @@ function createInfoBlock(entry, isPreview) {
const linkElement = document.createElement("a")
linkElement.className = "text-decoration-none d-flex justify-content-between text-body"
if (isPreview) linkElement.href = "#"
else linkElement.href = formatHash(entry.id)
else {
linkElement.href = formatHash(entry.id)
linkElement.addEventListener('click', e => {
e.preventDefault()
location.hash = formatHash(entry.id)
window.dispatchEvent(new HashChangeEvent("hashchange"))
})
}
const linkNameElement = document.createElement("span")
linkNameElement.className = "flex-grow-1 text-break"
linkNameElement.textContent = entry.name
@ -84,9 +91,9 @@ function createInfoBlock(entry, isPreview) {
listElement.appendChild(diffElement)
}
// Enetry data submitted to preview does not include center or path
// Entry data submitted to preview does not include center or path
if (!isPreview) {
const [x, y] = entry.center
const [x, y] = entry?.center
listElement.appendChild(createInfoListItem("Position: ", `${Math.floor(x)}, ${Math.floor(y)}`))
if (entry.path) {
@ -95,7 +102,7 @@ function createInfoBlock(entry, isPreview) {
}
}
if (!(entry.links.subreddit === undefined || entry.links.subreddit.length === 0)) {
if (entry.links.subreddit?.length) {
const subredditGroupElement = baseGroupElement.cloneNode()
linkListElement.appendChild(subredditGroupElement)
@ -110,7 +117,7 @@ function createInfoBlock(entry, isPreview) {
})
}
if (!(entry.links.website === undefined || entry.links.website.length === 0)) {
if (entry.links.website?.length) {
const websiteGroupElement = baseGroupElement.cloneNode()
linkListElement.appendChild(websiteGroupElement)
@ -129,7 +136,7 @@ function createInfoBlock(entry, isPreview) {
})
}
if (!(entry.links.discord === undefined || entry.links.discord.length === 0)) {
if (entry.links.discord?.length) {
const discordGroupElement = baseGroupElement.cloneNode()
linkListElement.appendChild(discordGroupElement)
@ -143,7 +150,7 @@ function createInfoBlock(entry, isPreview) {
})
}
if (!(entry.links.wiki === undefined || entry.links.wiki.length === 0)) {
if (entry.links.wiki?.length) {
const wikiGroupElement = baseGroupElement.cloneNode()
linkListElement.appendChild(wikiGroupElement)

16
web/_js/main/main.js
View file

@ -33,13 +33,14 @@ let lastPosition = [0, 0]
const viewportSize = [0, 0]
// TODO Probably merge both functions
function applyView() {
//console.log(zoomOrigin, scaleZoomOrigin)
//console.log(scaleZoomOrigin[0])
scaleZoomOrigin[0] = Math.max(-1000, Math.min(1000, scaleZoomOrigin[0]))
scaleZoomOrigin[1] = Math.max(-1000, Math.min(1000, scaleZoomOrigin[1]))
scaleZoomOrigin[0] = Math.max(-canvasCenter.x, Math.min(canvasCenter.x, scaleZoomOrigin[0]))
scaleZoomOrigin[1] = Math.max(-canvasCenter.y, Math.min(canvasCenter.y, scaleZoomOrigin[1]))
zoomOrigin = [scaleZoomOrigin[0] * zoom, scaleZoomOrigin[1] * zoom]
@ -51,6 +52,17 @@ function applyView() {
}
function setView(x, y, zoomN = zoom) {
zoom = zoomN
scaleZoomOrigin = [
canvasCenter.x - x,
canvasCenter.y - y
]
applyView()
}
let atlas = null
window.atlas = atlas
let atlasAll = null

16
web/_js/main/time.js
View file

@ -148,9 +148,12 @@ async function updateBackground(newPeriod = currentPeriod, newVariation = curren
}
}
async function updateTime(newPeriod = currentPeriod, newVariation = currentVariation, forcePeriod = false) {
async function updateTime(newPeriod = currentPeriod, newVariation = currentVariation, forceLoad = false) {
document.body.dataset.canvasLoading = ""
const oldPeriod = currentPeriod
const oldVariation = currentVariation
if (!variationsConfig[newVariation]) newVariation = defaultVariation
const variationConfig = variationsConfig[newVariation]
@ -158,10 +161,11 @@ async function updateTime(newPeriod = currentPeriod, newVariation = currentVaria
else if (newPeriod > variationConfig.versions.length - 1) newPeriod = variationConfig.versions.length - 1
currentPeriod = newPeriod
if (currentVariation !== newVariation) {
currentVariation = newVariation
currentVariation = newVariation
if (oldVariation !== newVariation) {
timelineSlider.max = variationConfig.versions.length - 1
if (!forcePeriod) {
if (!forceLoad) {
currentPeriod = variationConfig.default
newPeriod = currentPeriod
}
@ -214,8 +218,8 @@ async function updateTime(newPeriod = currentPeriod, newVariation = currentVaria
}
function updateTooltip(newPeriod, newVariation) {
const configObject = variationsConfig[newVariation].versions[newPeriod]
function updateTooltip(period, variation) {
const configObject = variationsConfig[variation].versions[period]
// If timestap is a number return a UTC formatted date otherwise use exact timestap label
if (typeof configObject.timestamp === "number") tooltip.querySelector('div').textContent = new Date(configObject.timestamp * 1000).toUTCString()

65
web/_js/main/view.js
View file

@ -411,21 +411,8 @@ function buildObjectsList(filter = null, sort = null) {
previousScaleZoomOrigin = [scaleZoomOrigin[0], scaleZoomOrigin[1]]
applyView()
setView(this.entry.center[0], this.entry.center[1], setZoomByPath(entry.path))
zoomOrigin = [
innerContainer.clientWidth / 2 - this.entry.center[0] * zoom, // + container.offsetLeft
innerContainer.clientHeight / 2 - this.entry.center[1] * zoom // + container.offsetTop
]
scaleZoomOrigin = [
canvasCenter.x - this.entry.center[0],
canvasCenter.y - this.entry.center[1]
]
//console.log(zoomOrigin)
applyView()
hovered = [this.entry]
render()
hovered[0].element = this
@ -445,9 +432,7 @@ function buildObjectsList(filter = null, sort = null) {
element.addEventListener("mouseleave", function () {
if (!fixed && !dragging) {
zoomOrigin = [previousScaleZoomOrigin[0] * zoom, previousScaleZoomOrigin[1] * zoom]
scaleZoomOrigin = [previousScaleZoomOrigin[0], previousScaleZoomOrigin[1]]
applyView()
setView(previousScaleZoomOrigin[0], previousScaleZoomOrigin[1])
hovered = []
updateLines()
render()
@ -688,21 +673,6 @@ function highlightEntryFromUrl() {
const entry = entries[0]
let boundingBox = [canvasSize.x, 0, canvasSize.y, 0]
entry.path?.forEach(([x, y]) => {
boundingBox[0] = Math.min(boundingBox[0], x)
boundingBox[1] = Math.max(boundingBox[1], x)
boundingBox[2] = Math.min(boundingBox[2], y)
boundingBox[3] = Math.max(boundingBox[3], y)
})
const boundingBoxSize = [boundingBox[1] - boundingBox[0], boundingBox[3] - boundingBox[2]]
const clientSize = [
Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0),
Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
]
zoom = Math.min(clientSize[0] / boundingBoxSize[0], clientSize[1] / boundingBoxSize[1])
zoom = Math.min(4, zoom/2)
document.title = entry.name + " on " + pageTitle
if ((!entry.diff || entry.diff !== "delete")) {
@ -721,21 +691,11 @@ function highlightEntryFromUrl() {
renderBackground(atlas)
applyView()
zoomOrigin = [
innerContainer.clientWidth / 2 - entry.center[0] * zoom, // + container.offsetLeft
innerContainer.clientHeight / 2 - entry.center[1] * zoom // + container.offsetTop
]
scaleZoomOrigin = [
canvasCenter.x - entry.center[0], // + container.offsetLeft
canvasCenter.y - entry.center[1] // + container.offsetTop
]
setView(entry.center[0], entry.center[1], setZoomByPath(entry.path))
closeObjectsListButton.classList.remove("d-none")
entriesList.classList.add("disableHover")
applyView()
hovered = [entry]
render()
hovered[0].element = infoElement
@ -744,6 +704,25 @@ function highlightEntryFromUrl() {
}
function setZoomByPath(path) {
let boundingBox = [canvasSize.x, 0, canvasSize.y, 0]
path?.forEach(([x, y]) => {
boundingBox[0] = Math.min(boundingBox[0], x)
boundingBox[1] = Math.max(boundingBox[1], x)
boundingBox[2] = Math.min(boundingBox[2], y)
boundingBox[3] = Math.max(boundingBox[3], y)
})
const boundingBoxSize = [boundingBox[1] - boundingBox[0], boundingBox[3] - boundingBox[2]]
const clientSize = [
Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0),
Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
]
zoom = Math.min(clientSize[0] / boundingBoxSize[0], clientSize[1] / boundingBoxSize[1])
zoom = Math.min(4, zoom/2)
}
function initView() {
buildObjectsList(null, null)