mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-05-29 01:25:10 +02:00
Small refactoring 4
This commit is contained in:
Hans5958
parent
b78e1b8816
commit
43d2eb887e
|
|
@ -5,7 +5,7 @@
|
|||
* Licensed under AGPL-3.0 (https://place-atlas.stefanocoding.me/license.txt)
|
||||
*/
|
||||
|
||||
window.addEventListener("error", function (e) {
|
||||
window.addEventListener("error", e => {
|
||||
console.error(e)
|
||||
let errorMessage = "<h4 class=\"mb-3\">An error has occurred:</h4>"
|
||||
errorMessage += "<p class=\"text-danger\">" + e.message + "</p>"
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ function initDraw() {
|
|||
|
||||
render(path)
|
||||
|
||||
container.addEventListener("mousedown", function (e) {
|
||||
container.addEventListener("mousedown", e => {
|
||||
lastPos = [
|
||||
e.clientX,
|
||||
e.clientY
|
||||
|
|
@ -147,7 +147,7 @@ function initDraw() {
|
|||
return pos
|
||||
}
|
||||
|
||||
container.addEventListener("mouseup", function (e) {
|
||||
container.addEventListener("mouseup", e => {
|
||||
|
||||
if (Math.abs(lastPos[0] - e.clientX) + Math.abs(lastPos[1] - e.clientY) <= 4 && drawing) {
|
||||
|
||||
|
|
@ -168,7 +168,7 @@ function initDraw() {
|
|||
}
|
||||
})
|
||||
|
||||
container.addEventListener("mousemove", function (e) {
|
||||
container.addEventListener("mousemove", e => {
|
||||
if (!dragging && drawing && path.length > 0) {
|
||||
const coords = getCanvasCoords(e.clientX, e.clientY)
|
||||
render([...path, coords])
|
||||
|
|
@ -181,7 +181,7 @@ function initDraw() {
|
|||
}
|
||||
})
|
||||
|
||||
window.addEventListener("keyup", function (e) {
|
||||
window.addEventListener("keyup", e => {
|
||||
if (e.key === "z" && e.ctrlKey) {
|
||||
undo()
|
||||
} else if (e.key === "y" && e.ctrlKey) {
|
||||
|
|
@ -196,7 +196,7 @@ function initDraw() {
|
|||
}
|
||||
})
|
||||
|
||||
window.addEventListener("keydown", function (e) {
|
||||
window.addEventListener("keydown", e => {
|
||||
if (e.key === "Shift") {
|
||||
if (e.code === "ShiftRight") {
|
||||
rShiftPressed = true
|
||||
|
|
@ -211,19 +211,19 @@ function initDraw() {
|
|||
finish()
|
||||
})
|
||||
|
||||
undoButton.addEventListener("click", function (e) {
|
||||
undoButton.addEventListener("click", e => {
|
||||
undo()
|
||||
const coords = getCanvasCoords(e.clientX, e.clientY)
|
||||
render([...path, coords])
|
||||
})
|
||||
|
||||
redoButton.addEventListener("click", function (e) {
|
||||
redoButton.addEventListener("click", e => {
|
||||
redo()
|
||||
const coords = getCanvasCoords(e.clientX, e.clientY)
|
||||
render([...path, coords])
|
||||
})
|
||||
|
||||
resetButton.addEventListener("click", function (e) {
|
||||
resetButton.addEventListener("click", e => {
|
||||
reset()
|
||||
const coords = getCanvasCoords(e.clientX, e.clientY)
|
||||
render([...path, coords])
|
||||
|
|
@ -243,7 +243,7 @@ function initDraw() {
|
|||
exportButton.focus()
|
||||
})
|
||||
|
||||
objectInfoForm.addEventListener('submit', function (e) {
|
||||
objectInfoForm.addEventListener('submit', e => {
|
||||
e.preventDefault()
|
||||
// Allows for html form validation with preview button
|
||||
if (e.submitter && e.submitter.value === "Preview") {
|
||||
|
|
@ -351,19 +351,17 @@ function initDraw() {
|
|||
}
|
||||
|
||||
function undo() {
|
||||
if (path.length > 0 && drawing) {
|
||||
undoHistory.push(path.pop())
|
||||
redoButton.disabled = false
|
||||
updatePath(path, undoHistory)
|
||||
}
|
||||
if (path.length == 0 || !drawing) return
|
||||
undoHistory.push(path.pop())
|
||||
redoButton.disabled = false
|
||||
updatePath(path, undoHistory)
|
||||
}
|
||||
|
||||
function redo() {
|
||||
if (undoHistory.length > 0 && drawing) {
|
||||
path.push(undoHistory.pop())
|
||||
undoButton.disabled = false
|
||||
updatePath(path, undoHistory)
|
||||
}
|
||||
if (undoHistory.length == 0 || !drawing) return
|
||||
path.push(undoHistory.pop())
|
||||
undoButton.disabled = false
|
||||
updatePath(path, undoHistory)
|
||||
}
|
||||
|
||||
function finish() {
|
||||
|
|
@ -385,7 +383,7 @@ function initDraw() {
|
|||
|
||||
function reset() {
|
||||
// Requires button to be pressed twice to confirm reset
|
||||
if (resetButton.textContent = "Confirm Reset") {
|
||||
if (resetButton.textContent === "Confirm Reset") {
|
||||
resetButton.textContent = "Reset"
|
||||
resetButton.className = "btn btn-secondary"
|
||||
|
||||
|
|
@ -440,7 +438,7 @@ function initDraw() {
|
|||
|
||||
function renderBackground() {
|
||||
|
||||
backgroundContext.clearRect(0, 0, canvas.width, canvas.height)
|
||||
backgroundContext.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height)
|
||||
|
||||
backgroundContext.fillStyle = "rgba(0, 0, 0, 1)"
|
||||
//backgroundContext.fillRect(0, 0, canvas.width, canvas.height)
|
||||
|
|
@ -469,55 +467,54 @@ function initDraw() {
|
|||
|
||||
if (!Array.isArray(path)) return
|
||||
|
||||
context.globalCompositeOperation = "source-over"
|
||||
context.clearRect(0, 0, canvas.width, canvas.height)
|
||||
highlightContext.globalCompositeOperation = "source-over"
|
||||
highlightContext.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height)
|
||||
|
||||
if (highlightUncharted) {
|
||||
context.drawImage(backgroundCanvas, 0, 0)
|
||||
context.fillStyle = "rgba(0, 0, 0, 0.4)"
|
||||
highlightContext.drawImage(backgroundCanvas, 0, 0)
|
||||
highlightContext.fillStyle = "rgba(0, 0, 0, 0.4)"
|
||||
} else {
|
||||
context.fillStyle = "rgba(0, 0, 0, 0.6)"
|
||||
highlightContext.fillStyle = "rgba(0, 0, 0, 0.6)"
|
||||
}
|
||||
|
||||
context.fillRect(0, 0, canvas.width, canvas.height)
|
||||
highlightContext.fillRect(0, 0, highlightCanvas.width, highlightCanvas.height)
|
||||
|
||||
context.beginPath()
|
||||
highlightContext.beginPath()
|
||||
|
||||
if (path[0]) {
|
||||
context.moveTo(path[0][0], path[0][1])
|
||||
highlightContext.moveTo(path[0][0], path[0][1])
|
||||
}
|
||||
|
||||
for (let i = 1; i < path.length; i++) {
|
||||
context.lineTo(path[i][0], path[i][1])
|
||||
highlightContext.lineTo(path[i][0], path[i][1])
|
||||
}
|
||||
|
||||
context.closePath()
|
||||
highlightContext.closePath()
|
||||
|
||||
context.strokeStyle = "rgba(255, 255, 255, 1)"
|
||||
context.stroke()
|
||||
highlightContext.strokeStyle = "rgba(255, 255, 255, 1)"
|
||||
highlightContext.stroke()
|
||||
|
||||
context.globalCompositeOperation = "destination-out"
|
||||
highlightContext.globalCompositeOperation = "destination-out"
|
||||
|
||||
context.fillStyle = "rgba(0, 0, 0, 1)"
|
||||
context.fill()
|
||||
highlightContext.fillStyle = "rgba(0, 0, 0, 1)"
|
||||
highlightContext.fill()
|
||||
|
||||
}
|
||||
|
||||
function updateHovering(e, tapped) {
|
||||
if (!dragging && (!fixed || tapped)) {
|
||||
const pos = [
|
||||
(e.clientX - (container.clientWidth / 2 - innerContainer.clientWidth / 2 + zoomOrigin[0] + container.offsetLeft)) / zoom,
|
||||
(e.clientY - (container.clientHeight / 2 - innerContainer.clientHeight / 2 + zoomOrigin[1] + container.offsetTop)) / zoom
|
||||
]
|
||||
if (dragging || (fixed && !tapped)) return
|
||||
const pos = [
|
||||
(e.clientX - (container.clientWidth / 2 - innerContainer.clientWidth / 2 + zoomOrigin[0] + container.offsetLeft)) / zoom,
|
||||
(e.clientY - (container.clientHeight / 2 - innerContainer.clientHeight / 2 + zoomOrigin[1] + container.offsetTop)) / zoom
|
||||
]
|
||||
|
||||
const coords_p = document.getElementById("coords_p")
|
||||
const coordsEl = document.getElementById("coords_p")
|
||||
|
||||
// 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])
|
||||
}
|
||||
// Displays coordinates as zero instead of NaN
|
||||
if (isNaN(pos[0])) {
|
||||
coordsEl.textContent = "0, 0"
|
||||
} else {
|
||||
coordsEl.textContent = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1])
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -601,7 +598,7 @@ function initDraw() {
|
|||
inputField.pattern = "^r\/[A-Za-z0-9][A-Za-z0-9_]{1,20}$"
|
||||
inputField.title = "Subreddit in format of r/example"
|
||||
inputField.minLength = "4"
|
||||
inputField.maxLength = "23"
|
||||
inputField.maxLength = "22"
|
||||
inputField.setAttribute("aria-labelledby", "subredditLabel")
|
||||
inputField.setAttribute("aria-describedby", "subredditField" + index + "-addon")
|
||||
if (link) {
|
||||
|
|
@ -627,7 +624,7 @@ function initDraw() {
|
|||
inputButton.addEventListener('click', () => removeFieldButton(inputGroup, array, index))
|
||||
}
|
||||
|
||||
inputField.addEventListener('paste', (event) => {
|
||||
inputField.addEventListener('paste', event => {
|
||||
let paste = (event.clipboardData || window.clipboardData).getData('text')
|
||||
paste = paste.trim().match(subredditPattern)?.[1]
|
||||
if (paste) {
|
||||
|
|
@ -672,7 +669,7 @@ function initDraw() {
|
|||
inputButton.addEventListener('click', () => removeFieldButton(inputGroup, array, index))
|
||||
}
|
||||
|
||||
inputField.addEventListener('paste', (event) => {
|
||||
inputField.addEventListener('paste', event => {
|
||||
let paste = (event.clipboardData || window.clipboardData).getData('text')
|
||||
paste = paste.trim().match(discordPattern)?.[1]
|
||||
if (paste) {
|
||||
|
|
@ -786,7 +783,7 @@ function initDraw() {
|
|||
|
||||
drawBackButton.href = "./" + formatHash(entryId, currentPeriod, currentPeriod, currentVariation)
|
||||
|
||||
document.addEventListener('timeupdate', (event) => {
|
||||
document.addEventListener('timeupdate', event => {
|
||||
drawBackButton.href = "./" + formatHash(entryId, event.detail.period, event.detail.period, event.detail.variation)
|
||||
})
|
||||
|
||||
|
|
@ -874,7 +871,7 @@ function initPeriodGroups() {
|
|||
if (startPeriodEl.max === 0) periodGroupEl.classList.add('no-time-slider')
|
||||
else periodGroupEl.classList.remove('no-time-slider')
|
||||
|
||||
// If one period disable delete
|
||||
// Disable delete if only one period
|
||||
if (pathWithPeriods.length === 1) periodDeleteEl.disabled = true
|
||||
|
||||
startPeriodEl.addEventListener('input', () => {
|
||||
|
|
@ -1164,7 +1161,7 @@ function updatePeriodGroups() {
|
|||
startPeriodEl.disabled = false
|
||||
endPeriodEl.disabled = false
|
||||
|
||||
// If one period disable delete
|
||||
// Disable delete if only one period
|
||||
if (pathWithPeriods.length === 1) periodDeleteEl.disabled = true
|
||||
else periodDeleteEl.disabled = false
|
||||
|
||||
|
|
@ -1335,8 +1332,8 @@ function getConflicts() {
|
|||
(start1 <= start2 && start2 <= end1) ||
|
||||
(start1 <= end2 && end2 <= end1)
|
||||
) {
|
||||
if (!conflicts[i]) conflicts[i] = []
|
||||
if (!conflicts[j]) conflicts[j] = []
|
||||
conflicts[i] ||= []
|
||||
conflicts[j] ||= []
|
||||
conflicts[i].push(j)
|
||||
conflicts[j].push(i)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,14 +7,14 @@
|
|||
|
||||
const innerContainer = document.getElementById("innerContainer")
|
||||
const container = document.getElementById("container")
|
||||
const canvas = document.getElementById("highlightCanvas")
|
||||
const canvasImage = document.getElementById('image')
|
||||
const context = canvas.getContext("2d")
|
||||
const highlightCanvas = document.getElementById("highlightCanvas")
|
||||
const imageCanvas = document.getElementById('image')
|
||||
const highlightContext = highlightCanvas.getContext("2d")
|
||||
|
||||
canvas.width = canvasSize.x
|
||||
canvas.height = canvasSize.y
|
||||
canvasImage.width = canvasSize.x
|
||||
canvasImage.height = canvasSize.y
|
||||
highlightCanvas.width = canvasSize.x
|
||||
highlightCanvas.height = canvasSize.y
|
||||
imageCanvas.width = canvasSize.x
|
||||
imageCanvas.height = canvasSize.y
|
||||
|
||||
let zoom = 1
|
||||
|
||||
|
|
@ -95,13 +95,10 @@ async function init() {
|
|||
const args = window.location.search
|
||||
const params = new URLSearchParams(args)
|
||||
if (args) {
|
||||
mode = params.get("mode")
|
||||
if (!mode) {
|
||||
mode = "view"
|
||||
}
|
||||
mode = params.get("mode") || "view"
|
||||
|
||||
// Backwards compatibility for old links using "search" id arg
|
||||
if (params.has('id') && params.get('mode') !== 'draw') {
|
||||
if (params.has('id') && mode !== 'draw') {
|
||||
const id = params.get('id')
|
||||
params.delete('id')
|
||||
const newLocation = new URL(window.location)
|
||||
|
|
@ -146,6 +143,8 @@ async function init() {
|
|||
if (initOverlap) {
|
||||
initOverlap()
|
||||
}
|
||||
} else if (mode === "explore") {
|
||||
initExplore()
|
||||
} else if (mode.startsWith("diff")) {
|
||||
try {
|
||||
const liveResp = await fetch(`https://${prodDomain}/atlas.json`)
|
||||
|
|
@ -195,8 +194,6 @@ async function init() {
|
|||
initView()
|
||||
}
|
||||
}
|
||||
} else if (mode === "explore") {
|
||||
initExplore()
|
||||
} else {
|
||||
initView()
|
||||
}
|
||||
|
|
@ -220,7 +217,7 @@ async function init() {
|
|||
initialPinchZoom = zoom
|
||||
|
||||
lastPosition = [x, y]
|
||||
zoom = zoom * 2
|
||||
zoom *= 2
|
||||
zoom = Math.max(minZoom, Math.min(maxZoom, zoom))
|
||||
|
||||
applyZoom(x, y, zoom)
|
||||
|
|
@ -258,7 +255,7 @@ async function init() {
|
|||
applyView()
|
||||
})
|
||||
|
||||
container.addEventListener("dblclick", function (e) {
|
||||
container.addEventListener("dblclick", e => {
|
||||
/*if(zoomAnimationFrame){
|
||||
window.cancelAnimationFrame(zoomAnimationFrame)
|
||||
}*/
|
||||
|
|
@ -285,7 +282,7 @@ async function init() {
|
|||
})
|
||||
|
||||
|
||||
container.addEventListener("wheel", function (e) {
|
||||
container.addEventListener("wheel", e => {
|
||||
|
||||
/*if(zoomAnimationFrame){
|
||||
window.cancelAnimationFrame(zoomAnimationFrame)
|
||||
|
|
@ -311,14 +308,8 @@ async function init() {
|
|||
// This creates a smoother experience
|
||||
zoom -= e.deltaY * (0.001 * zoom)
|
||||
} else {
|
||||
if (e.deltaY > 0) {
|
||||
|
||||
zoom = zoom / 2
|
||||
|
||||
} else if (e.deltaY < 0) {
|
||||
|
||||
zoom = zoom * 2
|
||||
}
|
||||
if (e.deltaY > 0) zoom /= 2
|
||||
else if (e.deltaY < 0) zoom *= 2
|
||||
}
|
||||
|
||||
zoom = Math.max(minZoom, Math.min(maxZoom, zoom))
|
||||
|
|
@ -339,12 +330,12 @@ async function init() {
|
|||
}
|
||||
}*/
|
||||
|
||||
container.addEventListener("mousedown", function (e) {
|
||||
container.addEventListener("mousedown", e => {
|
||||
mousedown(e.clientX, e.clientY)
|
||||
e.preventDefault()
|
||||
})
|
||||
|
||||
container.addEventListener("touchstart", function (e) {
|
||||
container.addEventListener("touchstart", e => {
|
||||
|
||||
if (e.touches.length === 2) {
|
||||
e.preventDefault()
|
||||
|
|
@ -387,14 +378,14 @@ async function init() {
|
|||
|
||||
}
|
||||
|
||||
window.addEventListener("mousemove", function (e) {
|
||||
window.addEventListener("mousemove", e => {
|
||||
updateLines()
|
||||
mousemove(e.clientX, e.clientY)
|
||||
if (dragging) {
|
||||
e.preventDefault()
|
||||
}
|
||||
})
|
||||
window.addEventListener("touchmove", function (e) {
|
||||
window.addEventListener("touchmove", e => {
|
||||
|
||||
if (e.touches.length === 2 || e.scale > 1) {
|
||||
e.preventDefault()
|
||||
|
|
@ -472,7 +463,7 @@ async function init() {
|
|||
updateLines()
|
||||
}
|
||||
|
||||
window.addEventListener("mouseup", function (e) {
|
||||
window.addEventListener("mouseup", e => {
|
||||
if (hovered.length > 0) {
|
||||
container.style.cursor = "pointer"
|
||||
} else if (drawing === true) {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ function initOverlap() {
|
|||
renderBackground(atlas)
|
||||
render()
|
||||
|
||||
document.addEventListener('timeupdate', (event) => {
|
||||
document.addEventListener('timeupdate', () => {
|
||||
sortedAtlas = atlas.concat()
|
||||
resetEntriesList(null, null)
|
||||
renderBackground(sortedAtlas)
|
||||
|
|
@ -32,14 +32,14 @@ function initOverlap() {
|
|||
|
||||
function renderBackground(atlas) {
|
||||
|
||||
backgroundContext.clearRect(0, 0, canvas.width, canvas.height)
|
||||
backgroundContext.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height)
|
||||
|
||||
backgroundContext.fillStyle = "rgba(255, 255, 255, 1)"
|
||||
backgroundContext.fillRect(0, 0, canvas.width, canvas.height)
|
||||
backgroundContext.fillRect(0, 0, highlightCanvas.width, highlightCanvas.height)
|
||||
|
||||
for (let i = 0; i < atlas.length; i++) {
|
||||
for (const entry of atlas) {
|
||||
|
||||
const path = atlas[i].path
|
||||
const path = entry.path
|
||||
|
||||
backgroundContext.beginPath()
|
||||
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
let areasSum = 0
|
||||
const areas = []
|
||||
|
||||
for (let q = 0; q < atlas.length; q++) {
|
||||
for (const entry of atlas) {
|
||||
|
||||
const path = atlas[q].path
|
||||
const path = entry.path
|
||||
|
||||
let area = 0,
|
||||
i,
|
||||
|
|
@ -30,31 +30,13 @@ for (let q = 0; q < atlas.length; q++) {
|
|||
areasSum += area
|
||||
areas.push(area)
|
||||
|
||||
atlas[q].area = area
|
||||
entry.area = area
|
||||
|
||||
}
|
||||
|
||||
areas.sort(function (a, b) {
|
||||
if (a < b) {
|
||||
return -1
|
||||
}
|
||||
if (a > b) {
|
||||
return 1
|
||||
}
|
||||
// a must be equal to b
|
||||
return 0
|
||||
})
|
||||
areas.sort((a, b) => a - b)
|
||||
|
||||
atlas.sort(function (a, b) {
|
||||
if (a.area < b.area) {
|
||||
return -1
|
||||
}
|
||||
if (a.area > b.area) {
|
||||
return 1
|
||||
}
|
||||
// a must be equal to b
|
||||
return 0
|
||||
})
|
||||
atlas.sort((a, b) => a.area - b.area)
|
||||
|
||||
const el = document.createElement("canvas")
|
||||
el.style.position = "absolute"
|
||||
|
|
@ -68,10 +50,8 @@ const max = 1500
|
|||
|
||||
let largerThanMax = 0
|
||||
|
||||
for (const i in areas) {
|
||||
if (areas[i] > max) {
|
||||
largerThanMax++
|
||||
}
|
||||
for (const area of areas) {
|
||||
if (area > max) largerThanMax++
|
||||
}
|
||||
|
||||
console.info("There are " + largerThanMax + " entries larger than " + max + ", accounting for " + (largerThanMax / areas.length * 100) + "% of all entries.")
|
||||
|
|
@ -88,9 +68,7 @@ for (const i in areas) {
|
|||
if (areas[i] > (bracket + 1) * (max / steps)) {
|
||||
mostCounts = Math.max(mostCounts, counts[bracket])
|
||||
bracket++
|
||||
if (bracket >= steps) {
|
||||
break
|
||||
}
|
||||
if (bracket >= steps) break
|
||||
counts[bracket] = 0
|
||||
brackets[bracket] = (bracket + 1) * (max / steps)
|
||||
}
|
||||
|
|
@ -185,11 +163,8 @@ ctx.fillStyle = "#FF0000"
|
|||
ctx.strokeStyle = "#CC0000"
|
||||
|
||||
for (let i = 0; i < counts.length; i++) {
|
||||
if (i % 2 === 0) {
|
||||
ctx.fillStyle = "#FF0000"
|
||||
} else {
|
||||
ctx.fillStyle = "#DD0000"
|
||||
}
|
||||
if (i % 2) ctx.fillStyle = "#DD0000"
|
||||
else ctx.fillStyle = "#FF0000"
|
||||
|
||||
ctx.fillRect(
|
||||
~~((i / steps) * (el.width - 125) + 75),
|
||||
|
|
|
|||
|
|
@ -39,9 +39,9 @@ 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("input", e => timelineParser(e.target.value))
|
||||
|
||||
timelineSlider.addEventListener("wheel", function (e) {
|
||||
timelineSlider.addEventListener("wheel", e => {
|
||||
if (e.deltaY < 0) {
|
||||
this.valueAsNumber += 1;
|
||||
timelineParser(this.value)
|
||||
|
|
@ -65,7 +65,7 @@ function timelineParser(value) {
|
|||
}, 25)
|
||||
}
|
||||
|
||||
variantsEl.addEventListener("input", (event) => {
|
||||
variantsEl.addEventListener("input", event => {
|
||||
updateTime(-1, event.target.value)
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ offcanvasList.addEventListener('show.bs.offcanvas', function () {
|
|||
applyView()
|
||||
})
|
||||
|
||||
offcanvasList.addEventListener('shown.bs.offcanvas', function (e) {
|
||||
offcanvasList.addEventListener('shown.bs.offcanvas', e => {
|
||||
entriesListShown = true
|
||||
wrapper.classList.remove('listTransitioning')
|
||||
updateHovering(e)
|
||||
|
|
@ -133,7 +133,7 @@ offcanvasList.addEventListener('hide.bs.offcanvas', function () {
|
|||
applyView()
|
||||
})
|
||||
|
||||
offcanvasList.addEventListener('hidden.bs.offcanvas', function (e) {
|
||||
offcanvasList.addEventListener('hidden.bs.offcanvas', e => {
|
||||
entriesListShown = false
|
||||
wrapper.classList.remove('listTransitioning')
|
||||
updateHovering(e)
|
||||
|
|
@ -184,7 +184,7 @@ objectsContainer.addEventListener("scroll", function () {
|
|||
updateLines()
|
||||
})
|
||||
|
||||
window.addEventListener("resize", function (e) {
|
||||
window.addEventListener("resize", e => {
|
||||
|
||||
applyView()
|
||||
render()
|
||||
|
|
@ -260,7 +260,7 @@ function updateLines() {
|
|||
|
||||
function renderBackground(atlas) {
|
||||
|
||||
backgroundContext.clearRect(0, 0, canvas.width, canvas.height)
|
||||
backgroundContext.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height)
|
||||
|
||||
//backgroundCanvas.width = 1000 * zoom
|
||||
//backgroundCanvas.height = 1000 * zoom
|
||||
|
|
@ -420,7 +420,7 @@ function buildObjectsList(filter = null, sort = null) {
|
|||
|
||||
})
|
||||
|
||||
element.addEventListener("click", function (e) {
|
||||
element.addEventListener("click", e => {
|
||||
toggleFixed(e)
|
||||
if (fixed) {
|
||||
previousZoomOrigin = [zoomOrigin[0], zoomOrigin[1]]
|
||||
|
|
@ -471,13 +471,13 @@ function resetEntriesList() {
|
|||
|
||||
async function render() {
|
||||
|
||||
context.clearRect(0, 0, canvas.width, canvas.height)
|
||||
highlightContext.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height)
|
||||
|
||||
//canvas.width = 1000*zoom
|
||||
//canvas.height = 1000*zoom
|
||||
|
||||
context.globalCompositeOperation = "source-over"
|
||||
context.clearRect(0, 0, canvas.width, canvas.height)
|
||||
highlightContext.globalCompositeOperation = "source-over"
|
||||
highlightContext.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height)
|
||||
|
||||
if (hovered.length > 0) {
|
||||
container.style.cursor = "pointer"
|
||||
|
|
@ -491,28 +491,28 @@ async function render() {
|
|||
|
||||
const path = hovered[i].path
|
||||
|
||||
context.beginPath()
|
||||
highlightContext.beginPath()
|
||||
|
||||
if (path[0]) {
|
||||
//context.moveTo(path[0][0]*zoom, path[0][1]*zoom)
|
||||
context.moveTo(path[0][0], path[0][1])
|
||||
highlightContext.moveTo(path[0][0], path[0][1])
|
||||
}
|
||||
|
||||
for (let p = 1; p < path.length; p++) {
|
||||
//context.lineTo(path[p][0]*zoom, path[p][1]*zoom)
|
||||
context.lineTo(path[p][0], path[p][1])
|
||||
highlightContext.lineTo(path[p][0], path[p][1])
|
||||
}
|
||||
|
||||
context.closePath()
|
||||
highlightContext.closePath()
|
||||
|
||||
context.globalCompositeOperation = "source-over"
|
||||
highlightContext.globalCompositeOperation = "source-over"
|
||||
|
||||
context.fillStyle = "rgba(0, 0, 0, 1)"
|
||||
context.fill()
|
||||
highlightContext.fillStyle = "rgba(0, 0, 0, 1)"
|
||||
highlightContext.fill()
|
||||
}
|
||||
|
||||
context.globalCompositeOperation = "source-out"
|
||||
context.drawImage(backgroundCanvas, 0, 0)
|
||||
highlightContext.globalCompositeOperation = "source-out"
|
||||
highlightContext.drawImage(backgroundCanvas, 0, 0)
|
||||
|
||||
if (hovered.length === 1 && hovered[0].path.length && hovered[0].overrideImage) {
|
||||
const undisputableHovered = hovered[0]
|
||||
|
|
@ -528,8 +528,8 @@ async function render() {
|
|||
overrideImage.src = "imageOverrides/" + undisputableHovered.overrideImage
|
||||
try {
|
||||
await loadingPromise
|
||||
context.globalCompositeOperation = "source-over"
|
||||
context.drawImage(overrideImage, startX, startY)
|
||||
highlightContext.globalCompositeOperation = "source-over"
|
||||
highlightContext.drawImage(overrideImage, startX, startY)
|
||||
} catch (ex) {
|
||||
console.error("Cannot override image.", ex)
|
||||
}
|
||||
|
|
@ -540,21 +540,21 @@ async function render() {
|
|||
|
||||
const path = hovered[i].path
|
||||
|
||||
context.beginPath()
|
||||
highlightContext.beginPath()
|
||||
|
||||
if (path[0]) {
|
||||
//context.moveTo(path[0][0]*zoom, path[0][1]*zoom)
|
||||
context.moveTo(path[0][0], path[0][1])
|
||||
highlightContext.moveTo(path[0][0], path[0][1])
|
||||
}
|
||||
|
||||
for (let p = 1; p < path.length; p++) {
|
||||
//context.lineTo(path[p][0]*zoom, path[p][1]*zoom)
|
||||
context.lineTo(path[p][0], path[p][1])
|
||||
highlightContext.lineTo(path[p][0], path[p][1])
|
||||
}
|
||||
|
||||
context.closePath()
|
||||
highlightContext.closePath()
|
||||
|
||||
context.globalCompositeOperation = "source-over"
|
||||
highlightContext.globalCompositeOperation = "source-over"
|
||||
|
||||
let hoverStrokeStyle
|
||||
switch (hovered[i].diff) {
|
||||
|
|
@ -568,9 +568,9 @@ async function render() {
|
|||
hoverStrokeStyle = "rgba(0, 0, 0, 1)"
|
||||
break
|
||||
}
|
||||
context.strokeStyle = hoverStrokeStyle
|
||||
highlightContext.strokeStyle = hoverStrokeStyle
|
||||
//context.lineWidth = zoom
|
||||
context.stroke()
|
||||
highlightContext.stroke()
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -670,7 +670,7 @@ function highlightEntryFromUrl() {
|
|||
|
||||
if (!id) return
|
||||
|
||||
const entries = atlas.filter(function (e) {
|
||||
const entries = atlas.filter(e => {
|
||||
return e.id === id
|
||||
})
|
||||
|
||||
|
|
@ -758,18 +758,17 @@ function initExplore() {
|
|||
window.render = function () { }
|
||||
|
||||
function updateHovering(e, tapped) {
|
||||
if (!dragging && (!fixed || tapped)) {
|
||||
const pos = [
|
||||
(e.clientX - (container.clientWidth / 2 - innerContainer.clientWidth / 2 + zoomOrigin[0] + container.offsetLeft)) / zoom,
|
||||
(e.clientY - (container.clientHeight / 2 - innerContainer.clientHeight / 2 + zoomOrigin[1] + container.offsetTop)) / zoom
|
||||
]
|
||||
const coords_p = document.getElementById("coords_p")
|
||||
// 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])
|
||||
}
|
||||
if (dragging || (fixed && !tapped)) return
|
||||
const pos = [
|
||||
(e.clientX - (container.clientWidth / 2 - innerContainer.clientWidth / 2 + zoomOrigin[0] + container.offsetLeft)) / zoom,
|
||||
(e.clientY - (container.clientHeight / 2 - innerContainer.clientHeight / 2 + zoomOrigin[1] + container.offsetTop)) / zoom
|
||||
]
|
||||
const coordsEl = document.getElementById("coords_p")
|
||||
// Displays coordinates as zero instead of NaN
|
||||
if (isNaN(pos[0])) {
|
||||
coordsEl.textContent = "0, 0"
|
||||
} else {
|
||||
coordsEl.textContent = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1])
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -780,7 +779,7 @@ function initExplore() {
|
|||
}
|
||||
|
||||
function initGlobal() {
|
||||
container.addEventListener("mousemove", function (e) {
|
||||
container.addEventListener("mousemove", e => {
|
||||
if (e.sourceCapabilities) {
|
||||
if (!e.sourceCapabilities.firesTouchEvents) {
|
||||
updateHovering(e)
|
||||
|
|
@ -790,7 +789,7 @@ function initGlobal() {
|
|||
}
|
||||
})
|
||||
|
||||
document.addEventListener('timeupdate', (event) => {
|
||||
document.addEventListener('timeupdate', event => {
|
||||
let hashData = window.location.hash.substring(1).split('/')
|
||||
const targetHash = formatHash(hashData[0], event.detail.period, event.detail.period, event.detail.variation)
|
||||
if (location.hash !== targetHash) history.replaceState({}, "", `./${targetHash}`)
|
||||
|
|
@ -798,14 +797,14 @@ function initGlobal() {
|
|||
}
|
||||
|
||||
function initViewGlobal() {
|
||||
container.addEventListener("mousedown", function (e) {
|
||||
container.addEventListener("mousedown", e => {
|
||||
lastPos = [
|
||||
e.clientX,
|
||||
e.clientY
|
||||
]
|
||||
})
|
||||
|
||||
container.addEventListener("touchstart", function (e) {
|
||||
container.addEventListener("touchstart", e => {
|
||||
if (e.touches.length === 1) {
|
||||
lastPos = [
|
||||
e.touches[0].clientX,
|
||||
|
|
@ -814,13 +813,13 @@ function initViewGlobal() {
|
|||
}
|
||||
}, { passive: true })
|
||||
|
||||
container.addEventListener("mouseup", function (e) {
|
||||
container.addEventListener("mouseup", e => {
|
||||
if (Math.abs(lastPos[0] - e.clientX) + Math.abs(lastPos[1] - e.clientY) <= 4) {
|
||||
toggleFixed(e)
|
||||
}
|
||||
})
|
||||
|
||||
container.addEventListener("touchend", function (e) {
|
||||
container.addEventListener("touchend", e => {
|
||||
e.preventDefault()
|
||||
|
||||
//console.log(e)
|
||||
|
|
@ -842,7 +841,7 @@ function initViewGlobal() {
|
|||
highlightEntryFromUrl()
|
||||
}
|
||||
|
||||
document.addEventListener('timeupdate', (event) => {
|
||||
document.addEventListener('timeupdate', event => {
|
||||
drawButton.href = "./?mode=draw" + formatHash(undefined, event.detail.period, event.detail.period, event.detail.variation)
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue