MirrorHub/atlas
0
0
Fork 0
mirror of https://github.com/placeAtlas/atlas.git synced 2024-06-16 10:18:47 +02:00
Code Issues Projects Releases Wiki Activity

Updated lines function and added move cursor

Browse source
This commit is contained in:
mxdanger 2022-05-06 15:08:45 -07:00
parent 1c438e107d
commit 486a2ac278
4 changed files with 46 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/_css/style.css
View file

@ -388,7 +388,7 @@ .period-group {
transition: box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion:reduce) {
@media (prefers-reduced-motion: reduce) {
.period-group {
transition: none;
}

4
web/_js/draw.js
View file

@ -481,9 +481,9 @@ function initDraw() {
// Displays coordinates as zero instead of NaN
if (isNaN(pos[0]) == true) {
coords_p.innerText = "0, 0"
coords_p.textContent = "0, 0"
} else {
coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1])
coords_p.textContent = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1])
}
}
}

15
web/_js/main.js
View file

@ -37,14 +37,6 @@ let lastPosition = [0, 0]
const viewportSize = [0, 0]
// document.getElementById("entriesListDonate").addEventListener("click", function(e){
// document.getElementById("donateOverlay").style.display = "flex"
// })
// document.getElementById("closeDonateButton").addEventListener("click", function(e){
// document.getElementById("donateOverlay").style.display = "none"
// })
function applyView() {
//console.log(zoomOrigin, scaleZoomOrigin)
@ -416,6 +408,8 @@ async function init() {
function mousemove(x, y) {
if (dragging) {
container.style.cursor = "move"
const deltaX = x - lastPosition[0]
const deltaY = y - lastPosition[1]
lastPosition = [x, y]
@ -479,6 +473,11 @@ async function init() {
}
window.addEventListener("mouseup", function (e) {
if (hovered.length > 0) {
container.style.cursor = "pointer"
} else {
container.style.cursor = "default"
}
if (dragging) {
e.preventDefault()
}

51
web/_js/view.js
View file

@ -151,6 +151,7 @@ closeObjectsListButton.addEventListener("click", function () {
objectsContainer.replaceChildren()
updateLines()
closeObjectsListButton.classList.add("d-none")
objectsListOverflowNotice.classList.add("d-none")
fixed = false
render()
})
@ -204,11 +205,12 @@ window.addEventListener("resize", function (e) {
function updateLines() {
// Line border
linesCanvas.width = linesCanvas.clientWidth
linesCanvas.height = linesCanvas.clientHeight
linesContext.lineCap = "round"
linesContext.lineWidth = Math.max(Math.min(zoom * 1.5, 16 * 1.5), 6)
linesContext.strokeStyle = "#000000"
linesContext.strokeStyle = "#222"
for (let i = 0; i < hovered.length; i++) {
const element = hovered[i].element
@ -216,20 +218,27 @@ function updateLines() {
if (element.getBoundingClientRect().left != 0) {
linesContext.beginPath()
//linesContext.moveTo(element.offsetLeft + element.clientWidth - 10, element.offsetTop + 20)
linesContext.moveTo(
element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth / 2
, element.getBoundingClientRect().top + document.documentElement.scrollTop + 20
)
// Align line based on which side the card is on
if ((element.getBoundingClientRect().left + element.clientWidth / 2) < (document.documentElement.clientWidth / 2)) {
linesContext.moveTo(
element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth - 5
, element.getBoundingClientRect().top + document.documentElement.scrollTop + 20
)
} else {
linesContext.moveTo(
element.getBoundingClientRect().left + document.documentElement.scrollLeft + 5
, element.getBoundingClientRect().top + document.documentElement.scrollTop + 20
)
}
linesContext.lineTo(
~~(hovered[i].center[0] * zoom) + innerContainer.offsetLeft
, ~~(hovered[i].center[1] * zoom) + innerContainer.offsetTop
)
linesContext.stroke()
}
}
// Line body
linesContext.lineWidth = Math.max(Math.min(zoom, 16), 4)
linesContext.strokeStyle = "#FFFFFF"
@ -239,10 +248,18 @@ function updateLines() {
if (element.getBoundingClientRect().left != 0) {
linesContext.beginPath()
linesContext.moveTo(
element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth / 2
, element.getBoundingClientRect().top + document.documentElement.scrollTop + 20
)
// Align line based on which side the card is on
if ((element.getBoundingClientRect().left + element.clientWidth / 2) < (document.documentElement.clientWidth / 2)) {
linesContext.moveTo(
element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth - 5
, element.getBoundingClientRect().top + document.documentElement.scrollTop + 20
)
} else {
linesContext.moveTo(
element.getBoundingClientRect().left + document.documentElement.scrollLeft + 5
, element.getBoundingClientRect().top + document.documentElement.scrollTop + 20
)
}
linesContext.lineTo(
~~(hovered[i].center[0] * zoom) + innerContainer.offsetLeft
, ~~(hovered[i].center[1] * zoom) + innerContainer.offsetTop
@ -669,9 +686,9 @@ function updateHovering(e, tapped) {
// Displays coordinates as zero instead of NaN
if (isNaN(pos[0]) == true) {
coords_p.innerText = "0, 0"
coords_p.textContent = "0, 0"
} else {
coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1])
coords_p.textContent = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1])
}
if (pos[0] <= 2200 && pos[0] >= -100 && pos[0] <= 2200 && pos[0] >= -100) {
@ -843,8 +860,12 @@ function initExplore() {
, (e.clientY - (container.clientHeight / 2 - innerContainer.clientHeight / 2 + zoomOrigin[1] + container.offsetTop)) / zoom
]
const coords_p = document.getElementById("coords_p")
coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1])
// Displays coordinates as zero instead of NaN
if (isNaN(pos[0]) == true) {
coords_p.textContent = "0, 0"
} else {
coords_p.textContent = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1])
}
}
}