An error has occurred:
"; + let errorMessage = "An error has occurred:
"; errorMessage += "" + e.message + "
"; errorMessage += "on line " + e.lineno + "
"; errorMessage += "If this keeps happening, feel free to tell us on our Discord server.
"; document.getElementById("loadingContent").innerHTML = errorMessage; }); -function getPositionOfEntry(entry){ +function getPositionOfEntry(entry) { let startX = 2000, startY = 2000; - for(const [x, y] of entry.path){ + for (const [x, y] of entry.path) { startX = Math.min(x, startX); startY = Math.min(y, startY) } - if(startX === 2000 || startY === 2000) return null; + if (startX === 2000 || startY === 2000) return null; return [parseInt(startX), parseInt(startY)]; } @@ -36,25 +36,25 @@ const areaMap = new Map(); // Modified from https://stackoverflow.com/a/33670691 function calcPolygonArea(vertices) { - var hit = areaMap.get(vertices); + const hit = areaMap.get(vertices); if (hit != null) { return hit; } - var total = 0; + let total = 0; - for (var i = 0, l = vertices.length; i < l; i++) { - var addX = vertices[i][0]; - var addY = vertices[i == vertices.length - 1 ? 0 : i + 1][1]; - var subX = vertices[i == vertices.length - 1 ? 0 : i + 1][0]; - var subY = vertices[i][1]; + for (let i = 0, l = vertices.length; i < l; i++) { + const addX = vertices[i][0]; + const addY = vertices[i == vertices.length - 1 ? 0 : i + 1][1]; + const subX = vertices[i == vertices.length - 1 ? 0 : i + 1][0]; + const subY = vertices[i][1]; - total += (addX * addY * 0.5); - total -= (subX * subY * 0.5); - } + total += (addX * addY * 0.5); + total -= (subX * subY * 0.5); + } - var area = Math.floor(Math.abs(total)); + const area = Math.floor(Math.abs(total)); areaMap.set(vertices, area); - - return area; + + return area; } \ No newline at end of file diff --git a/web/_js/draw.js b/web/_js/draw.js index 6d102fb2..22b46571 100644 --- a/web/_js/draw.js +++ b/web/_js/draw.js @@ -13,96 +13,96 @@ ======================================================================== */ -var finishButton = document.getElementById("finishButton"); -var resetButton = document.getElementById("resetButton"); -var undoButton = document.getElementById("undoButton"); -var redoButton = document.getElementById("redoButton"); -var highlightUnchartedLabel = document.getElementById("highlightUnchartedLabel"); -var entryId = 0 +const finishButton = document.getElementById("finishButton"); +const resetButton = document.getElementById("resetButton"); +const undoButton = document.getElementById("undoButton"); +const redoButton = document.getElementById("redoButton"); +const highlightUnchartedLabel = document.getElementById("highlightUnchartedLabel"); +let entryId = 0 -var objectInfoBox = document.getElementById("objectInfo"); -var hintText = document.getElementById("hint"); +const objectInfoBox = document.getElementById("objectInfo"); +const hintText = document.getElementById("hint"); -var periodsStatus = document.getElementById('periodsStatus') -var periodGroups = document.getElementById('periodGroups') -var periodGroupTemplate = document.getElementById('period-group').content.firstElementChild.cloneNode(true) -var periodsAdd = document.getElementById('periodsAdd') +const periodsStatus = document.getElementById('periodsStatus') +const periodGroups = document.getElementById('periodGroups') +const periodGroupTemplate = document.getElementById('period-group').content.firstElementChild.cloneNode(true) +const periodsAdd = document.getElementById('periodsAdd') -var exportButton = document.getElementById("exportButton"); -var cancelButton = document.getElementById("cancelButton"); +const exportButton = document.getElementById("exportButton"); +const cancelButton = document.getElementById("cancelButton"); -var exportOverlay = document.getElementById("exportOverlay"); -var exportCloseButton = document.getElementById("exportCloseButton"); -var exportBackButton = document.getElementById("exportBackButton") +const exportOverlay = document.getElementById("exportOverlay"); +const exportCloseButton = document.getElementById("exportCloseButton"); +const exportBackButton = document.getElementById("exportBackButton") -var path = []; -var center = [1000, 1000]; +let path = []; +let center = [1000, 1000]; -var pathWithPeriods = [] -var periodGroupElements = [] +let pathWithPeriods = [] +let periodGroupElements = [] -var disableDrawingOverride = false -var drawing = true; +let disableDrawingOverride = false +let drawing = true; -var periodClipboard = { +const periodClipboard = { "index": null, "path": null } -;[...document.querySelectorAll("#drawControlsContainer textarea")].forEach(el => { - el.addEventListener("input", function() { - this.style.height = "auto"; - this.style.height = (this.scrollHeight) + "px" + ;[...document.querySelectorAll("#drawControlsContainer textarea")].forEach(el => { + el.addEventListener("input", function () { + this.style.height = "auto"; + this.style.height = (this.scrollHeight) + "px" + }) }) -}) -function initDraw(){ - +function initDraw() { + wrapper.classList.remove('listHidden') window.render = render window.renderBackground = renderBackground window.updateHovering = updateHovering - // var startPeriodField = document.getElementById('startPeriodField') - // var endPeriodField = document.getElementById('endPeriodField') - // var periodVisbilityInfo = document.getElementById('periodVisbilityInfo') + // let startPeriodField = document.getElementById('startPeriodField') + // let endPeriodField = document.getElementById('endPeriodField') + // let periodVisbilityInfo = document.getElementById('periodVisbilityInfo') - var rShiftPressed = false; - var lShiftPressed = false; - var shiftPressed = false; + let rShiftPressed = false; + let lShiftPressed = false; + let shiftPressed = false; - var highlightUncharted = true; + let highlightUncharted = true; renderBackground(); applyView(); container.style.cursor = "crosshair"; - - var undoHistory = []; + + let undoHistory = []; render(path); - container.addEventListener("mousedown", function(e){ + container.addEventListener("mousedown", function (e) { lastPos = [ - e.clientX, + e.clientX, e.clientY ]; }); - function getCanvasCoords(x, y){ + function getCanvasCoords(x, y) { x = x - container.offsetLeft; y = y - container.offsetTop; - var pos = [ - ~~((x - (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0]))/zoom)+0.5, - ~~((y - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1]))/zoom)+0.5 + const pos = [ + ~~((x - (container.clientWidth / 2 - innerContainer.clientWidth / 2 + zoomOrigin[0])) / zoom) + 0.5, + ~~((y - (container.clientHeight / 2 - innerContainer.clientHeight / 2 + zoomOrigin[1])) / zoom) + 0.5 ]; - - if(shiftPressed && path.length > 0){ - var previous = path[path.length-1]; - - if(Math.abs(pos[1] - previous[1]) > Math.abs(pos[0] - previous[0]) ){ + + if (shiftPressed && path.length > 0) { + const previous = path[path.length - 1]; + + if (Math.abs(pos[1] - previous[1]) > Math.abs(pos[0] - previous[0])) { pos[0] = previous[0]; } else { pos[1] = previous[1]; @@ -112,13 +112,13 @@ function initDraw(){ return pos; } - container.addEventListener("mouseup", function(e){ - + container.addEventListener("mouseup", function (e) { - if(Math.abs(lastPos[0] - e.clientX) + Math.abs(lastPos[1] - e.clientY) <= 4 && drawing){ - var coords = getCanvasCoords(e.clientX, e.clientY); - + if (Math.abs(lastPos[0] - e.clientX) + Math.abs(lastPos[1] - e.clientY) <= 4 && drawing) { + + const coords = getCanvasCoords(e.clientX, e.clientY); + path.push(coords); render(path); @@ -126,7 +126,7 @@ function initDraw(){ redoButton.disabled = true; undoButton.disabled = false; - if(path.length >= 3){ + if (path.length >= 3) { finishButton.disabled = false; } @@ -134,68 +134,68 @@ function initDraw(){ } }); - window.addEventListener("mousemove", function(e){ - - if(!dragging && drawing && path.length > 0){ + window.addEventListener("mousemove", function (e) { - var coords = getCanvasCoords(e.clientX, e.clientY); + if (!dragging && drawing && path.length > 0) { + + const coords = getCanvasCoords(e.clientX, e.clientY); render(path.concat([coords])); } - + }); - window.addEventListener("keyup", function(e){ - if(e.key == "Enter"){ + window.addEventListener("keyup", function (e) { + if (e.key == "Enter") { finish(); - } else if(e.key == "z" && e.ctrlKey){ + } else if (e.key == "z" && e.ctrlKey) { undo(); - } else if(e.key == "y" && e.ctrlKey){ + } else if (e.key == "y" && e.ctrlKey) { redo(); - } else if(e.key == "Escape"){ + } else if (e.key == "Escape") { exportOverlay.style.display = "none"; - } else if (e.key === "Shift" ){ - if(e.code === "ShiftRight"){ + } else if (e.key === "Shift") { + if (e.code === "ShiftRight") { rShiftPressed = false; - } else if(e.code === "ShiftLeft"){ + } else if (e.code === "ShiftLeft") { lShiftPressed = false; } shiftPressed = rShiftPressed || lShiftPressed; } }); - window.addEventListener("keydown", function(e){ - if (e.key === "Shift" ){ - if(e.code === "ShiftRight"){ + window.addEventListener("keydown", function (e) { + if (e.key === "Shift") { + if (e.code === "ShiftRight") { rShiftPressed = true; - } else if(e.code === "ShiftLeft"){ + } else if (e.code === "ShiftLeft") { lShiftPressed = true; } shiftPressed = rShiftPressed || lShiftPressed; } }); - finishButton.addEventListener("click", function(e){ + finishButton.addEventListener("click", function (e) { finish(); }); - undoButton.addEventListener("click", function(e){ + undoButton.addEventListener("click", function (e) { undo(); }); - redoButton.addEventListener("click", function(e){ + redoButton.addEventListener("click", function (e) { redo(); }); - resetButton.addEventListener("click", function(e){ + resetButton.addEventListener("click", function (e) { reset(); }); - - cancelButton.addEventListener("click", function(e){ + + cancelButton.addEventListener("click", function (e) { back(); }); - document.getElementById("nameField").addEventListener("keyup", function(e){ - if(e.key == "Enter"){ + document.getElementById("nameField").addEventListener("keyup", function (e) { + if (e.key == "Enter") { exportJson(); } }); @@ -212,27 +212,27 @@ function initDraw(){ // } // }); - exportButton.addEventListener("click", function(e){ + exportButton.addEventListener("click", function (e) { exportJson(); }); - exportCloseButton.addEventListener("click", function(e){ + exportCloseButton.addEventListener("click", function (e) { reset(); exportOverlay.style.display = "none"; }); - exportBackButton.addEventListener("click", function(e){ + exportBackButton.addEventListener("click", function (e) { finish(); exportOverlay.style.display = "none"; }); - document.getElementById("highlightUncharted").addEventListener("click", function(e){ + document.getElementById("highlightUncharted").addEventListener("click", function (e) { highlightUncharted = this.checked; render(path); }); - function exportJson(){ - var exportObject = { + function exportJson() { + const exportObject = { id: entryId, name: document.getElementById("nameField").value, description: document.getElementById("descriptionField").value, @@ -269,41 +269,41 @@ function initDraw(){ if (inputWebsite.length) exportObject.links.website = inputWebsite if (inputSubreddit.length) exportObject.links.subreddit = inputSubreddit - var jsonString = JSON.stringify(exportObject, null, "\t"); - var textarea = document.getElementById("exportString"); + let jsonString = JSON.stringify(exportObject, null, "\t"); + const textarea = document.getElementById("exportString"); jsonString = jsonString.split("\n"); jsonString = jsonString.join("\n "); - jsonString = " "+jsonString; + jsonString = " " + jsonString; textarea.value = jsonString; - var directPostUrl = "https://www.reddit.com/r/placeAtlas2/submit?selftext=true&title=New%20Submission&text="+encodeURIComponent(document.getElementById("exportString").value); + let directPostUrl = "https://www.reddit.com/r/placeAtlas2/submit?selftext=true&title=New%20Submission&text=" + encodeURIComponent(document.getElementById("exportString").value); if (jsonString.length > 7493) { - directPostUrl = "https://www.reddit.com/r/placeAtlas2/submit?selftext=true&title=New%20Submission&text="+encodeURIComponent(" " + JSON.stringify(exportObject)); + directPostUrl = "https://www.reddit.com/r/placeAtlas2/submit?selftext=true&title=New%20Submission&text=" + encodeURIComponent(" " + JSON.stringify(exportObject)); } - document.getElementById("exportDirectPost").href=directPostUrl; + document.getElementById("exportDirectPost").href = directPostUrl; exportOverlay.style.display = "flex"; - + textarea.focus(); textarea.select(); } - function undo(){ - if(path.length > 0 && drawing){ + function undo() { + if (path.length > 0 && drawing) { undoHistory.push(path.pop()); redoButton.disabled = false; updatePath() } } - function redo(){ - if(undoHistory.length > 0 && drawing){ + function redo() { + if (undoHistory.length > 0 && drawing) { path.push(undoHistory.pop()); undoButton.disabled = false; updatePath() } } - function finish(){ + function finish() { if (objectInfoBox.style.display === "block") return updatePath() drawing = false; @@ -313,7 +313,7 @@ function initDraw(){ hintText.style.display = "none"; [...document.querySelectorAll("#drawControlsContainer textarea")].forEach(el => { if (el.value) el.style.height = (el.scrollHeight) + "px" - }) + }) // if (isOnPeriod()) { // periodVisbilityInfo.textContent = "" // } else { @@ -321,7 +321,7 @@ function initDraw(){ // } } - function reset(){ + function reset() { updatePath([]) undoHistory = []; drawing = true; @@ -336,7 +336,7 @@ function initDraw(){ document.getElementById("subredditField").value = ""; } - function back(){ + function back() { drawing = true; disableDrawingOverride = false; updatePath() @@ -345,54 +345,54 @@ function initDraw(){ hintText.style.display = "block"; } - function renderBackground(){ + function renderBackground() { backgroundContext.clearRect(0, 0, canvas.width, canvas.height); - + backgroundContext.fillStyle = "rgba(0, 0, 0, 1)"; //backgroundContext.fillRect(0, 0, canvas.width, canvas.height); - - for(var i = 0; i < atlas.length; i++){ - var path = atlas[i].path; - + for (let i = 0; i < atlas.length; i++) { + + const path = atlas[i].path; + backgroundContext.beginPath(); - if(path[0]){ + if (path[0]) { backgroundContext.moveTo(path[0][0], path[0][1]); } - - for(var p = 1; p < path.length; p++){ + + for (let p = 1; p < path.length; p++) { backgroundContext.lineTo(path[p][0], path[p][1]); } backgroundContext.closePath(); - + backgroundContext.fill(); } } - function render(path){ + function render(path) { context.globalCompositeOperation = "source-over"; context.clearRect(0, 0, canvas.width, canvas.height); - - if(highlightUncharted){ + + if (highlightUncharted) { context.drawImage(backgroundCanvas, 0, 0); context.fillStyle = "rgba(0, 0, 0, 0.4)"; } else { context.fillStyle = "rgba(0, 0, 0, 0.6)"; } - + context.fillRect(0, 0, canvas.width, canvas.height); context.beginPath(); - if(path[0]){ + if (path[0]) { context.moveTo(path[0][0], path[0][1]); } - - for(var i = 1; i < path.length; i++){ + + for (let i = 1; i < path.length; i++) { context.lineTo(path[i][0], path[i][1]); } @@ -405,16 +405,16 @@ function initDraw(){ context.fillStyle = "rgba(0, 0, 0, 1)"; context.fill(); - + } - - function updateHovering(e, tapped){ - if(!dragging && (!fixed || tapped)){ - var 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 + + 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 ]; - var coords_p = document.getElementById("coords_p"); + const coords_p = document.getElementById("coords_p"); coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]); } } @@ -452,16 +452,16 @@ function initDraw(){ zoom = 4; zoomOrigin = [ - innerContainer.clientWidth/2 - center[0] * zoom,// + container.offsetLeft - innerContainer.clientHeight/2 - center[1] * zoom// + container.offsetTop + innerContainer.clientWidth / 2 - center[0] * zoom,// + container.offsetLeft + innerContainer.clientHeight / 2 - center[1] * zoom// + container.offsetTop ]; scaleZoomOrigin = [ - 2000/2 - center[0],// + container.offsetLeft - 2000/2 - center[1]// + container.offsetTop + 2000 / 2 - center[0],// + container.offsetLeft + 2000 / 2 - center[1]// + container.offsetTop ]; - applyView(); + applyView(); document.addEventListener('timeupdate', (event) => { renderBackground() @@ -476,9 +476,9 @@ function initDraw(){ } -function calculateCenter(path){ +function calculateCenter(path) { - var area = 0, + let area = 0, i, j, point1, @@ -487,7 +487,7 @@ function calculateCenter(path){ y = 0, f; - for (i = 0, j = path.length - 1; i < path.length; j=i,i++) { + for (i = 0, j = path.length - 1; i < path.length; j = i, i++) { point1 = path[i]; point2 = path[j]; f = point1[0] * point2[1] - point2[0] * point1[1]; @@ -497,7 +497,7 @@ function calculateCenter(path){ } area *= 3; - return [Math.floor(x / area)+0.5, Math.floor(y / area)+0.5]; + return [Math.floor(x / area) + 0.5, Math.floor(y / area) + 0.5]; } function initPeriodGroups() { @@ -560,7 +560,7 @@ function initPeriodGroups() { startPeriodEl.value = newVariationConfig.default startPeriodEl.max = newVariationConfig.versions.length - 1 endPeriodEl.value = newVariationConfig.default - endPeriodEl.max = newVariationConfig.versions.length - 1 + endPeriodEl.max = newVariationConfig.versions.length - 1 updateTime(newVariationConfig.default, newVariation) // console.log(parseInt(event.target.value)) }) @@ -613,10 +613,10 @@ function initPeriodGroups() { function updatePeriodGroups() { // console.log('updatePeriodGroups') - var pathToActive = [] - var lastActivePathIndex - var currentActivePathIndex - var currentActivePathIndexes = [] + let pathToActive = [] + let lastActivePathIndex + let currentActivePathIndex + const currentActivePathIndexes = [] periodGroupElements.forEach((elements, index) => { const { @@ -632,7 +632,7 @@ function updatePeriodGroups() { periodGroupEl.dataset.active = "" if (isOnPeriod( - parseInt(startPeriodEl.value), + parseInt(startPeriodEl.value), parseInt(endPeriodEl.value), periodVariationEl.value, currentPeriod, @@ -645,7 +645,7 @@ function updatePeriodGroups() { } pathWithPeriods[index][0] = formatPeriod( - parseInt(startPeriodEl.value), + parseInt(startPeriodEl.value), parseInt(endPeriodEl.value), periodVariationEl.value ) @@ -681,7 +681,7 @@ function updatePeriodGroups() { // }) // currentActivePathIndex = undefined // } - + // console.log(lastActivePathIndex) if (lastActivePathIndex !== undefined) { if (lastActivePathIndex === currentActivePathIndex) { @@ -715,11 +715,11 @@ function updatePeriodGroups() { } drawing = disableDrawingOverride ? false : currentActivePathIndex !== undefined - + } function formatPeriod(start, end, variation) { - let periodString + let periodString if (start === end) periodString = start else periodString = start + "-" + end if (variation !== "default") periodString = variationsConfig[variation].code + ":" + periodString @@ -766,11 +766,11 @@ function updateErrors() { }) } } - + function getConflicts() { let conflicts = new Set() - + for (let i = pathWithPeriods.length - 1; i > 0; i--) { const [start1, end1, period1] = parsePeriod(pathWithPeriods[i][0]) for (let j = 0; j < i; j++) { @@ -801,7 +801,7 @@ function getErrors() { pathWithPeriods.forEach(([period, path], i) => { if (path.length < 3) invalidPaths.push(i) }) - + // console.info('conflicts', conflicts) // console.info('invalid paths', invalidPaths) diff --git a/web/_js/infoblock.js b/web/_js/infoblock.js index 85dd20df..981f247a 100644 --- a/web/_js/infoblock.js +++ b/web/_js/infoblock.js @@ -14,93 +14,93 @@ */ function createInfoBlock(entry) { - // console.log(entry) - function createInfoParagraph(name, value){ - const entryParagraphPositionElement = document.createElement("p"); - const nameElement = document.createElement("span"); - nameElement.style.fontWeight = "bold"; - nameElement.innerText = name; - const valueElement = document.createElement("span"); - valueElement.innerText = value; - entryParagraphPositionElement.appendChild(nameElement); - entryParagraphPositionElement.appendChild(valueElement); - return entryParagraphPositionElement; - } + // console.log(entry) + function createInfoParagraph(name, value) { + const entryParagraphPositionElement = document.createElement("p"); + const nameElement = document.createElement("span"); + nameElement.style.fontWeight = "bold"; + nameElement.innerText = name; + const valueElement = document.createElement("span"); + valueElement.innerText = value; + entryParagraphPositionElement.appendChild(nameElement); + entryParagraphPositionElement.appendChild(valueElement); + return entryParagraphPositionElement; + } - var element = document.createElement("div"); - element.className = "object"; + const element = document.createElement("div"); + element.className = "object"; - const headerElement = document.createElement("h2"); - const linkElement = document.createElement("a"); - linkElement.href = "#" + entry.id; - linkElement.innerText = entry.name; - headerElement.appendChild(linkElement); + const headerElement = document.createElement("h2"); + const linkElement = document.createElement("a"); + linkElement.href = "#" + entry.id; + linkElement.innerText = entry.name; + headerElement.appendChild(linkElement); - element.appendChild(headerElement); + element.appendChild(headerElement); - if (entry.diff) { - const diffElement = createInfoParagraph("Diff: ", entry.diff); - diffElement.className = entry.diff; - element.appendChild(diffElement); - } + if (entry.diff) { + const diffElement = createInfoParagraph("Diff: ", entry.diff); + diffElement.className = entry.diff; + element.appendChild(diffElement); + } - if (entry.description) { - const descElement = document.createElement("p"); - descElement.innerText = entry.description; - element.appendChild(descElement); - } - - const [x, y] = entry.center; - element.appendChild(createInfoParagraph("Position: ", `${Math.floor(x)}, ${Math.floor(y)}`)); + if (entry.description) { + const descElement = document.createElement("p"); + descElement.innerText = entry.description; + element.appendChild(descElement); + } - if(entry.path){ - const area = calcPolygonArea(entry.path); - element.appendChild(createInfoParagraph("Area: ", `${area} pixels`)); - } + const [x, y] = entry.center; + element.appendChild(createInfoParagraph("Position: ", `${Math.floor(x)}, ${Math.floor(y)}`)); - entry.links.subreddit.forEach(subreddit => { - subreddit = "/r/" + subreddit; - const subredditLinkElement = document.createElement("a"); - subredditLinkElement.target = "_blank"; - subredditLinkElement.href = "https://reddit.com" + subreddit; - subredditLinkElement.innerText = subreddit; - element.appendChild(subredditLinkElement); - }) + if (entry.path) { + const area = calcPolygonArea(entry.path); + element.appendChild(createInfoParagraph("Area: ", `${area} pixels`)); + } - entry.links.website.forEach(link => { - const websiteLinkElement = document.createElement("a"); - websiteLinkElement.target = "_blank"; - websiteLinkElement.href = link; - websiteLinkElement.innerText = "Website"; - element.appendChild(websiteLinkElement); - }) + entry.links.subreddit.forEach(subreddit => { + subreddit = "/r/" + subreddit; + const subredditLinkElement = document.createElement("a"); + subredditLinkElement.target = "_blank"; + subredditLinkElement.href = "https://reddit.com" + subreddit; + subredditLinkElement.innerText = subreddit; + element.appendChild(subredditLinkElement); + }) - entry.links.discord.forEach(link => { - const websiteLinkElement = document.createElement("a"); - websiteLinkElement.target = "_blank"; - websiteLinkElement.href = "https://discord.gg/" + link; - websiteLinkElement.innerText = "Discord"; - element.appendChild(websiteLinkElement); - }) + entry.links.website.forEach(link => { + const websiteLinkElement = document.createElement("a"); + websiteLinkElement.target = "_blank"; + websiteLinkElement.href = link; + websiteLinkElement.innerText = "Website"; + element.appendChild(websiteLinkElement); + }) - entry.links.wiki.forEach(link => { - const websiteLinkElement = document.createElement("a"); - websiteLinkElement.target = "_blank"; - websiteLinkElement.href = "https://place-wiki.stefanocoding.me/wiki/" + link.replace(/ /g, '_'); - websiteLinkElement.innerText = "Wiki Article"; - element.appendChild(websiteLinkElement); - }) + entry.links.discord.forEach(link => { + const websiteLinkElement = document.createElement("a"); + websiteLinkElement.target = "_blank"; + websiteLinkElement.href = "https://discord.gg/" + link; + websiteLinkElement.innerText = "Discord"; + element.appendChild(websiteLinkElement); + }) - const idElement = createInfoParagraph("ID: ", entry.id); - element.appendChild(idElement); + entry.links.wiki.forEach(link => { + const websiteLinkElement = document.createElement("a"); + websiteLinkElement.target = "_blank"; + websiteLinkElement.href = "https://place-wiki.stefanocoding.me/wiki/" + link.replace(/ /g, '_'); + websiteLinkElement.innerText = "Wiki Article"; + element.appendChild(websiteLinkElement); + }) - if (!entry.diff || entry.diff !== "delete") { - const editElement = document.createElement("a"); - editElement.innerText = "Edit" - editElement.className = "objectEdit" - editElement.href = "./?mode=draw&id=" + entry.id - element.appendChild(editElement); - } + const idElement = createInfoParagraph("ID: ", entry.id); + element.appendChild(idElement); - return element; + if (!entry.diff || entry.diff !== "delete") { + const editElement = document.createElement("a"); + editElement.innerText = "Edit" + editElement.className = "objectEdit" + editElement.href = "./?mode=draw&id=" + entry.id + element.appendChild(editElement); + } + + return element; } \ No newline at end of file diff --git a/web/_js/main.js b/web/_js/main.js index f2ae3d69..859f588f 100644 --- a/web/_js/main.js +++ b/web/_js/main.js @@ -15,64 +15,64 @@ const prodDomain = "place-atlas.stefanocoding.me" -var innerContainer = document.getElementById("innerContainer"); -var container = document.getElementById("container"); -var canvas = document.getElementById("highlightCanvas"); -var context = canvas.getContext("2d"); +const innerContainer = document.getElementById("innerContainer"); +const container = document.getElementById("container"); +const canvas = document.getElementById("highlightCanvas"); +const context = canvas.getContext("2d"); -var zoom = 1; +let zoom = 1; -if(window.devicePixelRatio){ - zoom = 1/window.devicePixelRatio; +if (window.devicePixelRatio) { + zoom = 1 / window.devicePixelRatio; } -var maxZoom = 128; -var minZoom = 0.1; +const maxZoom = 128; +const minZoom = 0.1; -var zoomOrigin = [0, 0]; -var scaleZoomOrigin = [0, 0]; +let zoomOrigin = [0, 0]; +let scaleZoomOrigin = [0, 0]; -var dragging = false; -var lastPosition = [0, 0]; +let dragging = false; +let lastPosition = [0, 0]; -var viewportSize = [0, 0]; +const viewportSize = [0, 0]; -document.getElementById("entriesListDonate").addEventListener("click", function(e){ +document.getElementById("entriesListDonate").addEventListener("click", function (e) { document.getElementById("donateOverlay").style.display = "flex"; }); -document.getElementById("closeDonateButton").addEventListener("click", function(e){ +document.getElementById("closeDonateButton").addEventListener("click", function (e) { document.getElementById("donateOverlay").style.display = "none"; }); -function applyView(){ - +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])); - zoomOrigin = [scaleZoomOrigin[0]*zoom, scaleZoomOrigin[1]*zoom]; + zoomOrigin = [scaleZoomOrigin[0] * zoom, scaleZoomOrigin[1] * zoom]; + + innerContainer.style.height = (~~(zoom * 2000)) + "px"; + innerContainer.style.width = (~~(zoom * 2000)) + "px"; + + innerContainer.style.left = ~~(container.clientWidth / 2 - innerContainer.clientWidth / 2 + zoomOrigin[0] + container.offsetLeft) + "px"; + innerContainer.style.top = ~~(container.clientHeight / 2 - innerContainer.clientHeight / 2 + zoomOrigin[1] + container.offsetTop) + "px"; - innerContainer.style.height = (~~(zoom*2000))+"px"; - innerContainer.style.width = (~~(zoom*2000))+"px"; - - innerContainer.style.left = ~~(container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0] + container.offsetLeft)+"px"; - innerContainer.style.top = ~~(container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1] + container.offsetTop)+"px"; - } -var atlas = null; +let atlas = null; window.atlas = atlas -var atlasAll = null +let atlasAll = null window.atlasAll = atlasAll if (document.location.host !== prodDomain) document.body.dataset.dev = "" init(); -async function init(){ +async function init() { // For Reviewing Reddit Changes //let resp = await fetch("../tools/temp_atlas.json"); const resp = await fetch("./atlas.json"); @@ -89,7 +89,7 @@ async function init(){ }); atlasAll = updateAtlasAll(atlas); - + await updateTime(currentPeriod, currentVariation) //console.log(document.documentElement.clientWidth, document.documentElement.clientHeight); @@ -97,18 +97,18 @@ async function init(){ zoomOrigin = [0, 0]; applyView(); - var initialPinchDistance = 0; - var initialPinchZoom = 0; - var initialPinchZoomOrigin = [0, 0]; + let initialPinchDistance = 0; + let initialPinchZoom = 0; + let initialPinchZoomOrigin = [0, 0]; - var desiredZoom; - var zoomAnimationFrame; + let desiredZoom; + let zoomAnimationFrame; - var mode = "view"; + let mode = "view"; - var args = window.location.search; - var params = new URLSearchParams(args) - if (args){ + const args = window.location.search; + const params = new URLSearchParams(args) + if (args) { mode = params.get("mode") if (!mode) { mode = "view"; @@ -130,41 +130,41 @@ async function init(){ initGlobal() if (mode !== "draw") initViewGlobal() - if(mode === "draw"){ - initDraw(); - } else if(mode === "about"){ + if (mode === "draw") { + initDraw(); + } else if (mode === "about") { window.location = "./about.html"; - } else if(mode === "overlap"){ - if(initOverlap){ + } else if (mode === "overlap") { + if (initOverlap) { initOverlap(); } - } else if(mode.startsWith("diff")){ + } else if (mode.startsWith("diff")) { try { const liveResp = await fetch("https://place-atlas.stefanocoding.me/atlas.json"); let liveJson = await liveResp.json(); liveJson = updateAtlasAll(liveJson) // console.log(liveJson) - const liveAtlasReduced = liveJson.reduce(function(a, c) { + const liveAtlasReduced = liveJson.reduce(function (a, c) { a[c.id] = c; return a; - },{}); + }, {}); // Mark added/edited entries - atlasAll = atlasAll.map(function(entry) { - if(liveAtlasReduced[entry.id] === undefined){ + atlasAll = atlasAll.map(function (entry) { + if (liveAtlasReduced[entry.id] === undefined) { entry.diff = "add"; - }else if(JSON.stringify(entry) !== JSON.stringify(liveAtlasReduced[entry.id])){ + } else if (JSON.stringify(entry) !== JSON.stringify(liveAtlasReduced[entry.id])) { entry.diff = "edit"; } return entry; }); // Mark removed entries - const atlasReduced = atlasAll.reduce(function(a, c) { + const atlasReduced = atlasAll.reduce(function (a, c) { a[c.id] = c; return a; - },{}); - const removedEntries = liveJson.filter(entry => + }, {}); + const removedEntries = liveJson.filter(entry => atlasReduced[entry.id] === undefined ).map(entry => { entry.diff = "delete" @@ -172,8 +172,8 @@ async function init(){ }) atlasAll.push(...removedEntries) - if(mode.includes("only")){ - atlasAll = atlasAll.filter(function(entry) { + if (mode.includes("only")) { + atlasAll = atlasAll.filter(function (entry) { return typeof entry.diff == "string" }); } @@ -182,26 +182,26 @@ async function init(){ console.warn("Diff mode failed to load, reverting to normal view.", error); } finally { await updateTime() - if(initOverlap && mode.includes("overlap")){ + if (initOverlap && mode.includes("overlap")) { initOverlap(); } else { initView(); } } - } else if(mode === "explore"){ + } else if (mode === "explore") { initExplore(); } else { initView(); } - - document.getElementById("zoomInButton").addEventListener("click", function(e){ + + document.getElementById("zoomInButton").addEventListener("click", function (e) { /*if(zoomAnimationFrame){ window.cancelAnimationFrame(zoomAnimationFrame); }*/ - - var x = container.clientWidth/2; - var y = container.clientHeight/2; + + const x = container.clientWidth / 2; + const y = container.clientHeight / 2; initialPinchZoomOrigin = [ scaleZoomOrigin[0], @@ -209,23 +209,23 @@ async function init(){ ]; initialPinchZoom = zoom; - + lastPosition = [x, y]; zoom = zoom * 2; zoom = Math.max(minZoom, Math.min(maxZoom, zoom)); - + applyZoom(x, y, zoom); - + }); - document.getElementById("zoomOutButton").addEventListener("click", function(e){ + document.getElementById("zoomOutButton").addEventListener("click", function (e) { /*if(zoomAnimationFrame){ window.cancelAnimationFrame(zoomAnimationFrame); }*/ - - var x = container.clientWidth/2; - var y = container.clientHeight/2; + + const x = container.clientWidth / 2; + const y = container.clientHeight / 2; initialPinchZoomOrigin = [ scaleZoomOrigin[0], @@ -233,15 +233,15 @@ async function init(){ ]; initialPinchZoom = zoom; - + lastPosition = [x, y]; zoom = zoom / 2; zoom = Math.max(minZoom, Math.min(maxZoom, zoom)); - + applyZoom(x, y, zoom); }); - document.getElementById("zoomResetButton").addEventListener("click", function(e){ + document.getElementById("zoomResetButton").addEventListener("click", function (e) { zoom = 1; zoomOrigin = [0, 0]; scaleZoomOrigin = [0, 0]; @@ -249,13 +249,13 @@ async function init(){ applyView(); }); - container.addEventListener("dblclick", function(e){ + container.addEventListener("dblclick", function (e) { /*if(zoomAnimationFrame){ window.cancelAnimationFrame(zoomAnimationFrame); }*/ - var x = e.clientX - container.offsetLeft; - var y = e.clientY - container.offsetTop; + const x = e.clientX - container.offsetLeft; + const y = e.clientY - container.offsetTop; initialPinchZoomOrigin = [ scaleZoomOrigin[0], @@ -263,15 +263,15 @@ async function init(){ ]; initialPinchZoom = zoom; - + lastPosition = [x, y]; - if(e.ctrlKey){ + if (e.ctrlKey) { zoom = zoom / 2; - + } else { - + zoom = zoom * 2; } @@ -282,14 +282,14 @@ async function init(){ }); - container.addEventListener("wheel", function(e){ + container.addEventListener("wheel", function (e) { /*if(zoomAnimationFrame){ window.cancelAnimationFrame(zoomAnimationFrame); }*/ - var x = e.clientX - container.offsetLeft; - var y = e.clientY - container.offsetTop; + const x = e.clientX - container.offsetLeft; + const y = e.clientY - container.offsetTop; initialPinchZoomOrigin = [ scaleZoomOrigin[0], @@ -297,7 +297,7 @@ async function init(){ ]; initialPinchZoom = zoom; - + lastPosition = [x, y]; // Check if we are zooming by pixels @@ -308,12 +308,12 @@ async function init(){ // This creates a smoother experience zoom -= e.deltaY * (0.001 * zoom); } else { - if(e.deltaY > 0){ - + if (e.deltaY > 0) { + zoom = zoom / 2; - - } else if(e.deltaY < 0){ - + + } else if (e.deltaY < 0) { + zoom = zoom * 2; } } @@ -322,7 +322,7 @@ async function init(){ applyZoom(x, y, zoom); e.preventDefault(); - }, {passive: true}); + }, { passive: true }); /*function setDesiredZoom(x, y, target){ zoom = (zoom*2 + target)/3; @@ -338,36 +338,36 @@ async function init(){ } }*/ - container.addEventListener("mousedown", function(e){ + container.addEventListener("mousedown", function (e) { mousedown(e.clientX, e.clientY); e.preventDefault(); }); - - container.addEventListener("touchstart", function(e){ - if(e.touches.length == 2){ + container.addEventListener("touchstart", function (e) { + + if (e.touches.length == 2) { e.preventDefault(); } touchstart(e); - }, {passive: true}); + }, { passive: true }); - function mousedown(x, y){ + function mousedown(x, y) { lastPosition = [x, y]; dragging = true; } - function touchstart(e){ - - if(e.touches.length == 1){ - + function touchstart(e) { + + if (e.touches.length == 1) { + mousedown(e.touches[0].clientX, e.touches[0].clientY); - - } else if(e.touches.length == 2){ - + + } else if (e.touches.length == 2) { + initialPinchDistance = Math.sqrt( - Math.pow(e.touches[0].clientX - e.touches[1].clientX, 2) + Math.pow(e.touches[0].clientX - e.touches[1].clientX, 2) + Math.pow(e.touches[0].clientY - e.touches[1].clientY, 2) ); @@ -376,46 +376,46 @@ async function init(){ scaleZoomOrigin[0], scaleZoomOrigin[1] ]; - + mousedown( - (e.touches[0].clientX + e.touches[1].clientX)/2, - (e.touches[0].clientY + e.touches[1].clientY)/2 + (e.touches[0].clientX + e.touches[1].clientX) / 2, + (e.touches[0].clientY + e.touches[1].clientY) / 2 ); - + } - + } - window.addEventListener("mousemove", function(e){ + window.addEventListener("mousemove", function (e) { updateLines(); mousemove(e.clientX, e.clientY); - if(dragging){ + if (dragging) { e.preventDefault(); } }); - window.addEventListener("touchmove", function(e){ + window.addEventListener("touchmove", function (e) { - if(e.touches.length == 2 || e.scale > 1){ + if (e.touches.length == 2 || e.scale > 1) { e.preventDefault(); } touchmove(e); }, - {passive: false} + { passive: false } ); - function mousemove(x, y){ - if(dragging){ - var deltaX = x - lastPosition[0]; - var deltaY = y - lastPosition[1]; + function mousemove(x, y) { + if (dragging) { + const deltaX = x - lastPosition[0]; + const deltaY = y - lastPosition[1]; lastPosition = [x, y]; zoomOrigin[0] += deltaX; zoomOrigin[1] += deltaY; - scaleZoomOrigin[0] += deltaX/zoom; - scaleZoomOrigin[1] += deltaY/zoom; + scaleZoomOrigin[0] += deltaX / zoom; + scaleZoomOrigin[1] += deltaY / zoom; previousZoomOrigin = [zoomOrigin[0], zoomOrigin[1]]; previousScaleZoomOrigin = [scaleZoomOrigin[0], scaleZoomOrigin[1]]; @@ -425,83 +425,83 @@ async function init(){ } } - function touchmove(e){ + function touchmove(e) { updateLines(); - - if(e.touches.length == 1){ - + + if (e.touches.length == 1) { + mousemove(e.touches[0].clientX, e.touches[0].clientY); - - } else if(e.touches.length == 2){ - - var newPinchDistance = Math.sqrt( - Math.pow(e.touches[0].clientX - e.touches[1].clientX, 2) + + } else if (e.touches.length == 2) { + + const newPinchDistance = Math.sqrt( + Math.pow(e.touches[0].clientX - e.touches[1].clientX, 2) + Math.pow(e.touches[0].clientY - e.touches[1].clientY, 2) ); zoom = initialPinchZoom * newPinchDistance / initialPinchDistance; - var x = (e.touches[0].clientX + e.touches[1].clientX)/2 - container.offsetLeft; - var y = (e.touches[0].clientY + e.touches[1].clientY)/2 - container.offsetTop; + const x = (e.touches[0].clientX + e.touches[1].clientX) / 2 - container.offsetLeft; + const y = (e.touches[0].clientY + e.touches[1].clientY) / 2 - container.offsetTop; applyZoom(x, y, zoom); - + } - + } - function applyZoom(x, y, zoom){ + function applyZoom(x, y, zoom) { - var deltaX = x - lastPosition[0]; - var deltaY = y - lastPosition[1]; + const deltaX = x - lastPosition[0]; + const deltaY = y - lastPosition[1]; - var pinchTranslateX = (x - container.clientWidth/2 - deltaX); - var pinchTranslateY = (y - container.clientHeight/2 - deltaY); + const pinchTranslateX = (x - container.clientWidth / 2 - deltaX); + const pinchTranslateY = (y - container.clientHeight / 2 - deltaY); - scaleZoomOrigin[0] = initialPinchZoomOrigin[0] + deltaX/zoom + pinchTranslateX/zoom - pinchTranslateX/initialPinchZoom; - scaleZoomOrigin[1] = initialPinchZoomOrigin[1] + deltaY/zoom + pinchTranslateY/zoom - pinchTranslateY/initialPinchZoom; + scaleZoomOrigin[0] = initialPinchZoomOrigin[0] + deltaX / zoom + pinchTranslateX / zoom - pinchTranslateX / initialPinchZoom; + scaleZoomOrigin[1] = initialPinchZoomOrigin[1] + deltaY / zoom + pinchTranslateY / zoom - pinchTranslateY / initialPinchZoom; - zoomOrigin[0] = scaleZoomOrigin[0]*zoom; - zoomOrigin[1] = scaleZoomOrigin[1]*zoom; + zoomOrigin[0] = scaleZoomOrigin[0] * zoom; + zoomOrigin[1] = scaleZoomOrigin[1] * zoom; applyView(); updateLines(); } - window.addEventListener("mouseup", function(e){ - if(dragging){ + window.addEventListener("mouseup", function (e) { + if (dragging) { e.preventDefault(); } mouseup(e.clientX, e.clientY); }); window.addEventListener("touchend", touchend); - function mouseup(x, y){ - if(dragging){ + function mouseup(x, y) { + if (dragging) { dragging = false; } } - function touchend(e){ - - if(e.touches.length == 0){ - + function touchend(e) { + + if (e.touches.length == 0) { + mouseup(); - - } else if(e.touches.length == 1){ + + } else if (e.touches.length == 1) { initialPinchZoom = zoom; lastPosition = [e.touches[0].clientX, e.touches[0].clientY]; } - + } - window.addEventListener("resize", function(){ + window.addEventListener("resize", function () { //console.log(document.documentElement.clientWidth, document.documentElement.clientHeight); - + applyView(); }); - + document.body.dataset.initDone = '' } diff --git a/web/_js/overlap.js b/web/_js/overlap.js index a9caf2a6..a9682ebe 100644 --- a/web/_js/overlap.js +++ b/web/_js/overlap.js @@ -13,11 +13,11 @@ ======================================================================== */ -function initOverlap(){ +function initOverlap() { window.renderBackground = renderBackground - var hovered = []; + const hovered = []; buildObjectsList(null, null); renderBackground(atlas); @@ -34,7 +34,7 @@ function initOverlap(){ render(); updateLines(); - if(window.location.hash){ + if (window.location.hash) { highlightEntryFromUrl(); } @@ -45,17 +45,17 @@ function initOverlap(){ backgroundContext.fillStyle = "rgba(255, 255, 255, 1)"; backgroundContext.fillRect(0, 0, canvas.width, canvas.height); - for(var i = 0; i < atlas.length; i++){ + for (let i = 0; i < atlas.length; i++) { - var path = atlas[i].path; + const path = atlas[i].path; backgroundContext.beginPath(); - if(path[0]){ + if (path[0]) { backgroundContext.moveTo(path[0][0], path[0][1]); } - for(var p = 1; p < path.length; p++){ + for (let p = 1; p < path.length; p++) { backgroundContext.lineTo(path[p][0], path[p][1]); } @@ -65,16 +65,16 @@ function initOverlap(){ backgroundContext.fill(); } - var pixels = backgroundContext.getImageData(0, 0, backgroundCanvas.width, backgroundCanvas.height).data; - var blank = 0; + const pixels = backgroundContext.getImageData(0, 0, backgroundCanvas.width, backgroundCanvas.height).data; + let blank = 0; - for(var i = 0; i < pixels.length; i+=4){ - if(pixels[i] == 255){ + for (let i = 0; i < pixels.length; i += 4) { + if (pixels[i] == 255) { blank++; } } - console.log(blank+" blank pixels, which are "+Math.round(blank/100)/100+"% of the canvas ("+(100-Math.round(blank/100)/100)+"% mapped)"); + console.log(blank + " blank pixels, which are " + Math.round(blank / 100) / 100 + "% of the canvas (" + (100 - Math.round(blank / 100) / 100) + "% mapped)"); } } diff --git a/web/_js/pointInPolygon.js b/web/_js/pointInPolygon.js index d974e7a0..ca59baa9 100644 --- a/web/_js/pointInPolygon.js +++ b/web/_js/pointInPolygon.js @@ -24,21 +24,21 @@ SOFTWARE. */ -function pointIsInPolygon (point, polygon) { - // ray-casting algorithm based on - // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html - - var x = point[0], y = point[1]; - - var inside = false; - for (var i = 0, j = polygon.length - 1; i < polygon.length; j = i++) { - var xi = polygon[i][0], yi = polygon[i][1]; - var xj = polygon[j][0], yj = polygon[j][1]; - - var intersect = ((yi > y) != (yj > y)) - && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); - if (intersect) inside = !inside; - } - - return inside; -}; +function pointIsInPolygon(point, polygon) { + // ray-casting algorithm based on + // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html + + const x = point[0], y = point[1]; + + let inside = false; + for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) { + const xi = polygon[i][0], yi = polygon[i][1]; + const xj = polygon[j][0], yj = polygon[j][1]; + + const intersect = ((yi > y) != (yj > y)) + && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + if (intersect) inside = !inside; + } + + return inside; +} diff --git a/web/_js/stats.js b/web/_js/stats.js index ab802025..898cbcb3 100644 --- a/web/_js/stats.js +++ b/web/_js/stats.js @@ -13,94 +13,94 @@ ======================================================================== */ -var areasSum = 0; -var areas = []; +let areasSum = 0; +const areas = []; -for(var q = 0; q < atlas.length; q++){ +for (let q = 0; q < atlas.length; q++) { - var path = atlas[q].path; + const path = atlas[q].path; - var area = 0, + let area = 0, i, j, point1, point2; - for (i = 0, j = path.length - 1; i < path.length; j=i,i++) { + for (i = 0, j = path.length - 1; i < path.length; j = i, i++) { point1 = path[i]; point2 = path[j]; area += point1[0] * point2[1]; area -= point1[1] * point2[0]; } - area = Math.abs(area/2); + area = Math.abs(area / 2); areasSum += area; areas.push(area); atlas[q].area = area; - + } -areas.sort(function(a, b){ +areas.sort(function (a, b) { if (a < b) { return -1; } if (a > b) { return 1; } - // a must be equal to b + // a must be equal to b return 0; }); -atlas.sort(function(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 + // a must be equal to b return 0; }); -var el = document.createElement("canvas"); +const el = document.createElement("canvas"); el.style.position = "absolute"; el.style.top = "0px"; el.style.zIndex = "10000"; -var ctx = el.getContext("2d"); +const ctx = el.getContext("2d"); el.width = 1600; el.height = 500; -var steps = 150; -var max = 1500; +const steps = 150; +const max = 1500; -var largerThanMax = 0; +let largerThanMax = 0; -for(var i in areas){ - if(areas[i] > max){ +for (const i in areas) { + if (areas[i] > max) { largerThanMax++; } } -console.log("There are "+largerThanMax+" entries larger than "+max+", accounting for "+(largerThanMax/areas.length*100)+"% of all entries."); -console.log("The largest entry has an area of "+areas[areas.length-1]+" pixels."); +console.log("There are " + largerThanMax + " entries larger than " + max + ", accounting for " + (largerThanMax / areas.length * 100) + "% of all entries."); +console.log("The largest entry has an area of " + areas[areas.length - 1] + " pixels."); -var counts = [0]; -var brackets = [max/steps]; +const counts = [0]; +const brackets = [max / steps]; -var bracket = 0; +let bracket = 0; -var mostCounts = 0; +let mostCounts = 0; -for(var i in areas){ - if(areas[i] > (bracket+1)*(max/steps)){ +for (const i in areas) { + if (areas[i] > (bracket + 1) * (max / steps)) { mostCounts = Math.max(mostCounts, counts[bracket]); bracket++; - if(bracket >= steps){ + if (bracket >= steps) { break; } counts[bracket] = 0; - brackets[bracket] = (bracket+1)*(max/steps); + brackets[bracket] = (bracket + 1) * (max / steps); } counts[bracket]++; } @@ -117,17 +117,17 @@ ctx.font = "15px sans"; ctx.textAlign = "right"; ctx.textBaseline = "middle"; -var linesDistance = 1; +let linesDistance = 1; -for(var i = 0; i <= Math.ceil((mostCounts/linesDistance)/5)*5; i++){ +for (let i = 0; i <= Math.ceil((mostCounts / linesDistance) / 5) * 5; i++) { ctx.beginPath(); ctx.moveTo( - 50 - ,~~(el.height - 50 - i*(linesDistance/mostCounts)*(el.height-100))+0.5 + 50 + , ~~(el.height - 50 - i * (linesDistance / mostCounts) * (el.height - 100)) + 0.5 ); ctx.lineTo( - el.width-25 - ,~~(el.height - 50 - i*(linesDistance/mostCounts)*(el.height-100))+0.5 + el.width - 25 + , ~~(el.height - 50 - i * (linesDistance / mostCounts) * (el.height - 100)) + 0.5 ); ctx.stroke(); } @@ -135,56 +135,56 @@ for(var i = 0; i <= Math.ceil((mostCounts/linesDistance)/5)*5; i++){ ctx.strokeStyle = "#333333"; linesDistance = 5; -for(var i = 0; i <= Math.ceil(mostCounts/linesDistance); i++){ +for (let i = 0; i <= Math.ceil(mostCounts / linesDistance); i++) { ctx.beginPath(); ctx.moveTo( - 50 - ,~~(el.height - 50 - i*(linesDistance/mostCounts)*(el.height-100))+0.5 + 50 + , ~~(el.height - 50 - i * (linesDistance / mostCounts) * (el.height - 100)) + 0.5 ); ctx.lineTo( - el.width-25 - ,~~(el.height - 50 - i*(linesDistance/mostCounts)*(el.height-100))+0.5 + el.width - 25 + , ~~(el.height - 50 - i * (linesDistance / mostCounts) * (el.height - 100)) + 0.5 ); ctx.stroke(); - + ctx.fillText( - i*linesDistance - ,40 - ,~~(el.height - 50 - i*(linesDistance/mostCounts)*(el.height-100))+0.5 + i * linesDistance + , 40 + , ~~(el.height - 50 - i * (linesDistance / mostCounts) * (el.height - 100)) + 0.5 ); } -var skip = 2; +const skip = 2; ctx.textAlign = "center"; ctx.textBaseline = "hanging"; ctx.font = "10px sans"; -var a = 0; -for(var i=0; i <= counts.length; i++){ - if(i%skip == 0){ - var y = 0; - if(a % 2 == 0){ - y = ~~(el.height - 30)+0.5; +let a = 0; +for (let i = 0; i <= counts.length; i++) { + if (i % skip == 0) { + let y = 0; + if (a % 2 == 0) { + y = ~~(el.height - 30) + 0.5; } else { - y = ~~(el.height - 45)+0.5; + y = ~~(el.height - 45) + 0.5; } a++; ctx.beginPath(); ctx.moveTo( - ~~(((i)/steps)*(el.width-125)+75)+0.5 - ,~~(el.height - 50)+0.5 + ~~(((i) / steps) * (el.width - 125) + 75) + 0.5 + , ~~(el.height - 50) + 0.5 ); ctx.lineTo( - ~~(((i)/steps)*(el.width-125)+75)+0.5 - ,y + ~~(((i) / steps) * (el.width - 125) + 75) + 0.5 + , y ); ctx.stroke(); ctx.fillText( - (i)*(max/steps) - ,~~(((i)/steps)*(el.width-125)+75)-0.5 - ,y+5 + (i) * (max / steps) + , ~~(((i) / steps) * (el.width - 125) + 75) - 0.5 + , y + 5 ); } } @@ -192,18 +192,18 @@ for(var i=0; i <= counts.length; i++){ ctx.fillStyle = "#FF0000"; ctx.strokeStyle = "#CC0000"; -for(var i = 0; i < counts.length; i++){ - if(i%2 == 0){ +for (let i = 0; i < counts.length; i++) { + if (i % 2 == 0) { ctx.fillStyle = "#FF0000"; } else { ctx.fillStyle = "#DD0000"; } - + ctx.fillRect( - ~~((i/steps)*(el.width-125)+75) - ,el.height - 50 - ,Math.ceil(1/steps*(el.width-125)) - ,~~(-(counts[i]/mostCounts)*(el.height-100)) + ~~((i / steps) * (el.width - 125) + 75) + , el.height - 50 + , Math.ceil(1 / steps * (el.width - 125)) + , ~~(-(counts[i] / mostCounts) * (el.height - 100)) ); /*ctx.beginPath(); @@ -230,46 +230,46 @@ document.getElementById("wrapper").appendChild(el); //console.log(areas); -console.log("Median area: "+areas[~~(areas.length/2)]); +console.log("Median area: " + areas[~~(areas.length / 2)]); -console.log("Average area: "+(areasSum/atlas.length)); +console.log("Average area: " + (areasSum / atlas.length)); -var topCount = 50; -console.log("The "+topCount+" largest entries:"); +const topCount = 50; +console.log("The " + topCount + " largest entries:"); -var outstring = ""; +let outstring = ""; -for(var i = 0; i < topCount; i++){ - outstring += ((i+1)+"|["+atlas[atlas.length-i-1].name +"](http://place-atlas.stefanocoding.me/?id="+atlas[atlas.length-i-1].id+")|"+ ~~atlas[atlas.length-i-1].area+"|"+Math.round(atlas[atlas.length-i-1].area/100)/100+"%\n"); +for (let i = 0; i < topCount; i++) { + outstring += ((i + 1) + "|[" + atlas[atlas.length - i - 1].name + "](http://place-atlas.stefanocoding.me/?id=" + atlas[atlas.length - i - 1].id + ")|" + ~~atlas[atlas.length - i - 1].area + "|" + Math.round(atlas[atlas.length - i - 1].area / 100) / 100 + "%\n"); } console.log(outstring); -atlas.sort(function(a, b){ +atlas.sort(function (a, b) { if (a.center[0] < b.center[0]) { return -1; } if (a.center[0] > b.center[0]) { return 1; } - // a must be equal to b + // a must be equal to b return 0; }); -console.log("Median x: "+atlas[~~(atlas.length/2)].center[0]); +console.log("Median x: " + atlas[~~(atlas.length / 2)].center[0]); -atlas.sort(function(a, b){ +atlas.sort(function (a, b) { if (a.center[1] < b.center[1]) { return -1; } if (a.center[1] > b.center[1]) { return 1; } - // a must be equal to b + // a must be equal to b return 0; }); -console.log("Median y: "+atlas[~~(atlas.length/2)].center[1]); +console.log("Median y: " + atlas[~~(atlas.length / 2)].center[1]); diff --git a/web/_js/time.js b/web/_js/time.js index f47932c2..0370e752 100644 --- a/web/_js/time.js +++ b/web/_js/time.js @@ -14,73 +14,73 @@ */ const variationsConfig = { - default: { - name: "r/place", - code: "", - default: 14, - versions: [ - { - timestamp: 1648822500, - url: "./_img/place/1648822500.png" - }, - { - timestamp: 1648847036, - url: "./_img/place/1648847036.png" - }, - { - timestamp: 1648870452, - url: "./_img/place/1648870452.png" - }, - { - timestamp: 1648893666, - url: "./_img/place/1648893666.png" - }, - { - timestamp: 1648917500, - url: "./_img/place/1648917500.png" - }, - { - timestamp: 1648942113, - url: "./_img/place/1648942113.png" - }, - { - timestamp: 1648956234, - url: "./_img/place/1648956234.png" - }, - { - timestamp: 1648968061, - url: "./_img/place/1648968061.png" - }, - { - timestamp: 1648979987, - url: "./_img/place/1648979987.png" - }, - { - timestamp: 1648992274, - url: "./_img/place/1648992274.png" - }, - { - timestamp: 1649012915, - url: "./_img/place/1649012915.png" - }, - { - timestamp: 1649037182, - url: "./_img/place/1649037182.png" - }, - { - timestamp: 1649060793, - url: "./_img/place/1649060793.png" - }, - { - timestamp: 1649084741, - url: "./_img/place/1649084741.png" - }, - { - timestamp: 1649113199, - url: "./_img/place/final.png" - } - ] - } + default: { + name: "r/place", + code: "", + default: 14, + versions: [ + { + timestamp: 1648822500, + url: "./_img/place/1648822500.png" + }, + { + timestamp: 1648847036, + url: "./_img/place/1648847036.png" + }, + { + timestamp: 1648870452, + url: "./_img/place/1648870452.png" + }, + { + timestamp: 1648893666, + url: "./_img/place/1648893666.png" + }, + { + timestamp: 1648917500, + url: "./_img/place/1648917500.png" + }, + { + timestamp: 1648942113, + url: "./_img/place/1648942113.png" + }, + { + timestamp: 1648956234, + url: "./_img/place/1648956234.png" + }, + { + timestamp: 1648968061, + url: "./_img/place/1648968061.png" + }, + { + timestamp: 1648979987, + url: "./_img/place/1648979987.png" + }, + { + timestamp: 1648992274, + url: "./_img/place/1648992274.png" + }, + { + timestamp: 1649012915, + url: "./_img/place/1649012915.png" + }, + { + timestamp: 1649037182, + url: "./_img/place/1649037182.png" + }, + { + timestamp: 1649060793, + url: "./_img/place/1649060793.png" + }, + { + timestamp: 1649084741, + url: "./_img/place/1649084741.png" + }, + { + timestamp: 1649113199, + url: "./_img/place/final.png" + } + ] + } } const codeReference = {} @@ -89,11 +89,11 @@ const imageCache = {} 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) + 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"); @@ -114,15 +114,15 @@ timelineSlider.max = variationsConfig[currentVariation].versions.length - 1; timelineSlider.value = currentPeriod; timelineSlider.addEventListener("input", (event) => { - updateTooltip(parseInt(event.target.value), currentVariation) - clearTimeout(updateTimeout) - updateTimeout = setTimeout(() => { - updateTime(parseInt(event.target.value), currentVariation) - }, 100) + updateTooltip(parseInt(event.target.value), currentVariation) + clearTimeout(updateTimeout) + updateTimeout = setTimeout(() => { + updateTime(parseInt(event.target.value), currentVariation) + }, 10) }) variantsEl.addEventListener("input", (event) => { - updateTime(currentPeriod, event.target.value) + updateTime(currentPeriod, event.target.value) }) // document.querySelector('#period-group .period-start').oninput = (event) => { @@ -136,140 +136,140 @@ variantsEl.addEventListener("input", (event) => { // }; const dispatchTimeUpdateEvent = (period = timelineSlider.value, atlas = atlas) => { - const timeUpdateEvent = new CustomEvent('timeupdate', { - detail: { - period: period, - atlas: atlas - } - }); - document.dispatchEvent(timeUpdateEvent); + const timeUpdateEvent = new CustomEvent('timeupdate', { + detail: { + period: period, + atlas: atlas + } + }); + document.dispatchEvent(timeUpdateEvent); } async function updateBackground(newPeriod = currentPeriod, newVariation = currentVariation) { - console.log(newPeriod, newVariation) - abortController.abort() - abortController = new AbortController() - currentUpdateIndex++ - const myUpdateIndex = currentUpdateIndex - currentPeriod = newPeriod - // console.log(newPeriod, newVariation) - const variationConfig = variationsConfig[newVariation] - if (currentVariation !== newVariation) { - currentVariation = newVariation - timelineSlider.max = variationConfig.versions.length - 1; - currentPeriod = variationConfig.default; - newPeriod = currentPeriod - } - timelineSlider.value = currentPeriod - variantsEl.value = currentVariation - const configObject = variationConfig.versions[currentPeriod]; - if (typeof configObject.url === "string") { - if (imageCache[configObject.url] === undefined) { - const fetchResult = await fetch(configObject.url, { - signal: abortController.signal - }); - if (currentUpdateIndex !== myUpdateIndex) { - hideLoading() - return - } - const imageBlob = await fetchResult.blob() - imageCache[configObject.url] = URL.createObjectURL(imageBlob) - } - image.src = imageCache[configObject.url] - } else { - const canvas = document.createElement('canvas') - const context = canvas.getContext('2d') - context.canvas.width = 2000 - context.canvas.height = 2000 - for await (const url of configObject.url) { - if (imageCache[url] === undefined) { - const fetchResult = await fetch(url, { - signal: abortController.signal - }); - if (currentUpdateIndex !== myUpdateIndex) { - hideLoading() - break - } - const imageBlob = await fetchResult.blob() - imageCache[url] = URL.createObjectURL(imageBlob) - } - const imageLayer = new Image() - console.log(imageCache[url]) - await new Promise(resolve => { - imageLayer.onload = () => { - context.drawImage(imageLayer, 0, 0) - console.log("image done") - resolve() - } - imageLayer.src = imageCache[url] - }) - - } - if (currentUpdateIndex !== myUpdateIndex) return - const blob = await new Promise(resolve => canvas.toBlob(resolve)) - console.log(URL.createObjectURL(blob)) - image.src = URL.createObjectURL(blob) - } + console.log(newPeriod, newVariation) + abortController.abort() + abortController = new AbortController() + currentUpdateIndex++ + const myUpdateIndex = currentUpdateIndex + currentPeriod = newPeriod + // console.log(newPeriod, newVariation) + const variationConfig = variationsConfig[newVariation] + if (currentVariation !== newVariation) { + currentVariation = newVariation + timelineSlider.max = variationConfig.versions.length - 1; + currentPeriod = variationConfig.default; + newPeriod = currentPeriod + } + timelineSlider.value = currentPeriod + variantsEl.value = currentVariation + const configObject = variationConfig.versions[currentPeriod]; + if (typeof configObject.url === "string") { + if (imageCache[configObject.url] === undefined) { + const fetchResult = await fetch(configObject.url, { + signal: abortController.signal + }); + if (currentUpdateIndex !== myUpdateIndex) { + hideLoading() + return + } + const imageBlob = await fetchResult.blob() + imageCache[configObject.url] = URL.createObjectURL(imageBlob) + } + image.src = imageCache[configObject.url] + } else { + const canvas = document.createElement('canvas') + const context = canvas.getContext('2d') + context.canvas.width = 2000 + context.canvas.height = 2000 + for await (const url of configObject.url) { + if (imageCache[url] === undefined) { + const fetchResult = await fetch(url, { + signal: abortController.signal + }); + if (currentUpdateIndex !== myUpdateIndex) { + hideLoading() + break + } + const imageBlob = await fetchResult.blob() + imageCache[url] = URL.createObjectURL(imageBlob) + } + const imageLayer = new Image() + console.log(imageCache[url]) + await new Promise(resolve => { + imageLayer.onload = () => { + context.drawImage(imageLayer, 0, 0) + console.log("image done") + resolve() + } + imageLayer.src = imageCache[url] + }) - return [configObject, newPeriod, newVariation] + } + if (currentUpdateIndex !== myUpdateIndex) return + const blob = await new Promise(resolve => canvas.toBlob(resolve)) + console.log(URL.createObjectURL(blob)) + image.src = URL.createObjectURL(blob) + } + + return [configObject, newPeriod, newVariation] } async function updateTime(newPeriod = currentPeriod, newVariation = currentVariation) { - document.body.dataset.canvasLoading = true + document.body.dataset.canvasLoading = true - let configObject - [configObject, newPeriod, newVariation] = await updateBackground(newPeriod, newVariation) - - atlas = [] - for ( var atlasIndex in atlasAll ) { - let pathChosen, centerChosen, chosenIndex + let configObject + [configObject, newPeriod, newVariation] = await updateBackground(newPeriod, newVariation) - const validPeriods2 = Object.keys(atlasAll[atlasIndex].path) + atlas = [] + for (const atlasIndex in atlasAll) { + let pathChosen, centerChosen, chosenIndex - // console.log(chosenIndex) + const validPeriods2 = Object.keys(atlasAll[atlasIndex].path) - for (const i in validPeriods2) { - const validPeriods = validPeriods2[i].split(', ') - for (const j in validPeriods) { - const [start, end, variation] = parsePeriod(validPeriods[j]) - // console.log(start, end, variation, newPeriod, newVariation) - if (isOnPeriod(start, end, variation, newPeriod, newVariation)) { - // console.log("match", start, end, variation, newPeriod, newVariation, i) - chosenIndex = i - break - } - } - if (chosenIndex !== undefined) break - } + // console.log(chosenIndex) - // console.log(testMatches) + for (const i in validPeriods2) { + const validPeriods = validPeriods2[i].split(', ') + for (const j in validPeriods) { + const [start, end, variation] = parsePeriod(validPeriods[j]) + // console.log(start, end, variation, newPeriod, newVariation) + if (isOnPeriod(start, end, variation, newPeriod, newVariation)) { + // console.log("match", start, end, variation, newPeriod, newVariation, i) + chosenIndex = i + break + } + } + if (chosenIndex !== undefined) break + } - // console.log(chosenIndex) - if (chosenIndex === undefined) continue - pathChosen = Object.values(atlasAll[atlasIndex].path)[chosenIndex] - centerChosen = Object.values(atlasAll[atlasIndex].center)[chosenIndex] + // console.log(testMatches) - if (pathChosen === undefined) continue + // console.log(chosenIndex) + if (chosenIndex === undefined) continue + pathChosen = Object.values(atlasAll[atlasIndex].path)[chosenIndex] + centerChosen = Object.values(atlasAll[atlasIndex].center)[chosenIndex] - // console.log(123) + if (pathChosen === undefined) continue - atlas.push({ - ...atlasAll[atlasIndex], - path: pathChosen, - center: centerChosen, - }) - } - // console.log(atlas) + // console.log(123) - dispatchTimeUpdateEvent(newPeriod, atlas) - document.body.dataset.canvasLoading = false + atlas.push({ + ...atlasAll[atlasIndex], + path: pathChosen, + center: centerChosen, + }) + } + // console.log(atlas) + + dispatchTimeUpdateEvent(newPeriod, atlas) + document.body.dataset.canvasLoading = false } function updateTooltip(newPeriod, newVariation) { - var configObject = variationsConfig[newVariation].versions[newPeriod] - 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 = Math.max(((timelineSlider.offsetWidth)*(timelineSlider.value >= 1 ? timelineSlider.value - 1:0)/(timelineSlider.max-1)) - tooltip.offsetWidth/2, 0) + "px" + const configObject = variationsConfig[newVariation].versions[newPeriod] + 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 = Math.max(((timelineSlider.offsetWidth) * (timelineSlider.value >= 1 ? timelineSlider.value - 1 : 0) / (timelineSlider.max - 1)) - tooltip.offsetWidth / 2, 0) + "px" } tooltip.parentElement.addEventListener('mouseenter', () => updateTooltip(parseInt(timelineSlider.value), currentVariation)) @@ -277,20 +277,20 @@ tooltip.parentElement.addEventListener('mouseenter', () => updateTooltip(parseIn window.addEventListener('resize', () => updateTooltip(parseInt(timelineSlider.value), currentVariation)) function isOnPeriod(start, end, variation, currentPeriod, currentVariation) { - return currentPeriod >= start && currentPeriod <= end && variation === currentVariation + return currentPeriod >= start && currentPeriod <= end && variation === currentVariation } function parsePeriod(periodString) { - // console.log(periodString) - let variation = "default" + // console.log(periodString) + let variation = "default" periodString = periodString + "" - if (periodString.split(':').length > 1) { - const split = periodString.split(':') - variation = codeReference[split[0]] - periodString = split[1] - } + if (periodString.split(':').length > 1) { + const split = periodString.split(':') + variation = codeReference[split[0]] + periodString = split[1] + } if (periodString.search('-') + 1) { - var [start, end] = periodString.split('-').map(i => parseInt(i)) + const [start, end] = periodString.split('-').map(i => parseInt(i)) return [start, end, variation] } else { const periodNew = parseInt(periodString) diff --git a/web/_js/view.js b/web/_js/view.js index e58c22b2..c4ec9b9c 100644 --- a/web/_js/view.js +++ b/web/_js/view.js @@ -13,65 +13,65 @@ ======================================================================== */ -var linesCanvas = document.getElementById("linesCanvas"); -var linesContext = linesCanvas.getContext("2d"); -var hovered = []; +const linesCanvas = document.getElementById("linesCanvas"); +const linesContext = linesCanvas.getContext("2d"); +let hovered = []; -var previousZoomOrigin = [0, 0]; -var previousScaleZoomOrigin = [0, 0]; +let previousZoomOrigin = [0, 0]; +let previousScaleZoomOrigin = [0, 0]; -var backgroundCanvas = document.createElement("canvas"); +const backgroundCanvas = document.createElement("canvas"); backgroundCanvas.width = 2000; backgroundCanvas.height = 2000; -var backgroundContext = backgroundCanvas.getContext("2d"); +const backgroundContext = backgroundCanvas.getContext("2d"); -var wrapper = document.getElementById("wrapper"); - -var objectsContainer = document.getElementById("objectsList"); -var closeObjectsListButton = document.getElementById("closeObjectsListButton"); +const wrapper = document.getElementById("wrapper"); -var filterInput = document.getElementById("searchList"); +const objectsContainer = document.getElementById("objectsList"); +const closeObjectsListButton = document.getElementById("closeObjectsListButton"); -var entriesList = document.getElementById("entriesList"); -var hideListButton = document.getElementById("hideListButton"); -var entriesListShown = false; +const filterInput = document.getElementById("searchList"); -var sortedAtlas; +const entriesList = document.getElementById("entriesList"); +const hideListButton = document.getElementById("hideListButton"); +let entriesListShown = false; -var entriesLimit = 50; -var entriesOffset = 0; -var moreEntriesButton = document.createElement("button"); -moreEntriesButton.innerHTML = "Show "+entriesLimit+" more"; +let sortedAtlas; + +const entriesLimit = 50; +let entriesOffset = 0; +const moreEntriesButton = document.createElement("button"); +moreEntriesButton.innerHTML = "Show " + entriesLimit + " more"; moreEntriesButton.id = "moreEntriesButton"; -moreEntriesButton.onclick = function(){ +moreEntriesButton.onclick = function () { buildObjectsList(null, null); renderBackground(); render(); }; -var defaultSort = "shuffle"; +let defaultSort = "shuffle"; document.getElementById("sort").value = defaultSort; -var lastPos = [0, 0]; +let lastPos = [0, 0]; -var fixed = false; // Fix hovered items in place, so that clicking on links is possible +let fixed = false; // Fix hovered items in place, so that clicking on links is possible -if(document.documentElement.clientWidth > 2000){ +if (document.documentElement.clientWidth > 2000) { entriesListShown = true; wrapper.classList.remove('listHidden') } -if(document.documentElement.clientWidth < 2000){ +if (document.documentElement.clientWidth < 2000) { entriesListShown = false; wrapper.classList.add('listHidden') } -filterInput.addEventListener("input", function(e){ +filterInput.addEventListener("input", function (e) { entriesOffset = 0; entriesList.innerHTML = ""; entriesList.appendChild(moreEntriesButton); - if(this.value === ""){ + if (this.value === "") { document.getElementById("relevantOption").disabled = true; sortedAtlas = atlas.concat(); buildObjectsList(null, null); @@ -82,8 +82,8 @@ filterInput.addEventListener("input", function(e){ }); -document.getElementById("sort").addEventListener("input", function(e){ - if(this.value != "relevant"){ +document.getElementById("sort").addEventListener("input", function (e) { + if (this.value != "relevant") { defaultSort = this.value; } @@ -91,9 +91,9 @@ document.getElementById("sort").addEventListener("input", function(e){ }); -hideListButton.addEventListener("click", function(e){ +hideListButton.addEventListener("click", function (e) { entriesListShown = !entriesListShown; - if(entriesListShown){ + if (entriesListShown) { wrapper.classList.remove('listHidden') } else { wrapper.classList.add('listHidden') @@ -105,7 +105,7 @@ hideListButton.addEventListener("click", function(e){ return false; }); -closeObjectsListButton.addEventListener("click", function(e){ +closeObjectsListButton.addEventListener("click", function (e) { hovered = []; objectsContainer.innerHTML = ""; updateLines(); @@ -115,12 +115,12 @@ closeObjectsListButton.addEventListener("click", function(e){ }); -function toggleFixed(e, tapped){ - if(!fixed && hovered.length == 0){ +function toggleFixed(e, tapped) { + if (!fixed && hovered.length == 0) { return 0; } fixed = !fixed; - if(!fixed){ + if (!fixed) { updateHovering(e, tapped); render(); } @@ -132,56 +132,56 @@ window.addEventListener("dblClick", updateLines); window.addEventListener("wheel", updateLines); -objectsContainer.addEventListener("scroll", function(e){ +objectsContainer.addEventListener("scroll", function (e) { updateLines(); }); -window.addEventListener("resize", function(e){ +window.addEventListener("resize", function (e) { //console.log(document.documentElement.clientWidth, document.documentElement.clientHeight); - var viewportWidth = document.documentElement.clientWidth; + let viewportWidth = document.documentElement.clientWidth; - if(document.documentElement.clientWidth > 2000 && viewportWidth <= 2000){ + if (document.documentElement.clientWidth > 2000 && viewportWidth <= 2000) { entriesListShown = true; wrapper.className = wrapper.className.replace(/ listHidden/g, ""); } - if(document.documentElement.clientWidth < 2000 && viewportWidth >= 2000){ + if (document.documentElement.clientWidth < 2000 && viewportWidth >= 2000) { entriesListShown = false; wrapper.className += " listHidden"; } updateHovering(e); viewportWidth = document.documentElement.clientWidth; - + applyView(); render(); updateLines(); - + }); -function updateLines(){ +function updateLines() { 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.lineWidth = Math.max(Math.min(zoom * 1.5, 16 * 1.5), 6); linesContext.strokeStyle = "#000000"; - for(var i = 0; i < hovered.length; i++){ - var element = hovered[i].element; + for (let i = 0; i < hovered.length; i++) { + const element = hovered[i].element; - if(element.getBoundingClientRect().left != 0){ + 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 + element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth / 2 + , element.getBoundingClientRect().top + document.documentElement.scrollTop + 20 ); linesContext.lineTo( - ~~(hovered[i].center[0]*zoom) + innerContainer.offsetLeft - ,~~(hovered[i].center[1]*zoom) + innerContainer.offsetTop + ~~(hovered[i].center[0] * zoom) + innerContainer.offsetLeft + , ~~(hovered[i].center[1] * zoom) + innerContainer.offsetTop ); linesContext.stroke(); @@ -191,26 +191,26 @@ function updateLines(){ linesContext.lineWidth = Math.max(Math.min(zoom, 16), 4); linesContext.strokeStyle = "#FFFFFF"; - for(var i = 0; i < hovered.length; i++){ - var element = hovered[i].element; + for (let i = 0; i < hovered.length; i++) { + const element = hovered[i].element; + + if (element.getBoundingClientRect().left != 0) { - 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 + element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth / 2 + , element.getBoundingClientRect().top + document.documentElement.scrollTop + 20 ); linesContext.lineTo( - ~~(hovered[i].center[0]*zoom) + innerContainer.offsetLeft - ,~~(hovered[i].center[1]*zoom) + innerContainer.offsetTop + ~~(hovered[i].center[0] * zoom) + innerContainer.offsetLeft + , ~~(hovered[i].center[1] * zoom) + innerContainer.offsetTop ); linesContext.stroke(); } } } -function renderBackground(atlas){ +function renderBackground(atlas) { backgroundContext.clearRect(0, 0, canvas.width, canvas.height); @@ -218,29 +218,29 @@ function renderBackground(atlas){ //backgroundCanvas.height = 1000 * zoom; //backgroundContext.lineWidth = zoom; - + backgroundContext.fillStyle = "rgba(0, 0, 0, 0.6)"; backgroundContext.fillRect(0, 0, backgroundCanvas.width, backgroundCanvas.height); - for(var i = 0; i < atlas.length; i++){ + for (let i = 0; i < atlas.length; i++) { - var path = atlas[i].path; + const path = atlas[i].path; backgroundContext.beginPath(); - if(path[0]){ + if (path[0]) { //backgroundContext.moveTo(path[0][0]*zoom, path[0][1]*zoom); backgroundContext.moveTo(path[0][0], path[0][1]); } - for(var p = 1; p < path.length; p++){ + for (let p = 1; p < path.length; p++) { //backgroundContext.lineTo(path[p][0]*zoom, path[p][1]*zoom); backgroundContext.lineTo(path[p][0], path[p][1]); } backgroundContext.closePath(); - var bgStrokeStyle; + let bgStrokeStyle; switch (atlas[i].diff) { case "add": bgStrokeStyle = "rgba(0, 255, 0, 1)"; @@ -264,32 +264,32 @@ function renderBackground(atlas){ } } -function buildObjectsList(filter = null, sort = null){ +function buildObjectsList(filter = null, sort = null) { - if(entriesList.contains(moreEntriesButton)){ + if (entriesList.contains(moreEntriesButton)) { entriesList.removeChild(moreEntriesButton); } - if(!sortedAtlas){ + if (!sortedAtlas) { sortedAtlas = atlas.concat(); - document.getElementById("atlasSize").innerHTML = "The Atlas contains "+sortedAtlas.length+" entries."; + document.getElementById("atlasSize").innerHTML = "The Atlas contains " + sortedAtlas.length + " entries."; } - if(filter){ - sortedAtlas = atlas.filter(function(value){ + if (filter) { + sortedAtlas = atlas.filter(function (value) { return ( - value.name.toLowerCase().indexOf(filter) !== -1 + value.name.toLowerCase().indexOf(filter) !== -1 || value.description.toLowerCase().indexOf(filter) !== -1 || value.subreddit && value.subreddit.toLowerCase().indexOf(filter) !== -1 || value.id === filter ); }); - document.getElementById("atlasSize").innerHTML = "Found "+sortedAtlas.length+" entries."; + document.getElementById("atlasSize").innerHTML = "Found " + sortedAtlas.length + " entries."; } else { - document.getElementById("atlasSize").innerHTML = "The Atlas contains "+sortedAtlas.length+" entries."; + document.getElementById("atlasSize").innerHTML = "The Atlas contains " + sortedAtlas.length + " entries."; } - if(sort === null){ + if (sort === null) { sort = defaultSort; } @@ -300,59 +300,59 @@ function buildObjectsList(filter = null, sort = null){ //console.log(sort); - var sortFunction; + let sortFunction; //console.log(sort); - switch(sort){ + switch (sort) { case "shuffle": sortFunction = null; - if(entriesOffset == 0){ + if (entriesOffset == 0) { shuffle(); } - break; + break; case "alphaAsc": - sortFunction = function(a, b){ + sortFunction = function (a, b) { return a.name.toLowerCase().localeCompare(b.name.toLowerCase()); } - break; + break; case "alphaDesc": - sortFunction = function(a, b){ + sortFunction = function (a, b) { return b.name.toLowerCase().localeCompare(a.name.toLowerCase()); } - break; + break; case "newest": - sortFunction = function(a, b){ + sortFunction = function (a, b) { if (a.id > b.id) { return -1; } if (a.id < b.id) { return 1; } - // a must be equal to b + // a must be equal to b return 0; } - break; + break; case "oldest": - sortFunction = function(a, b){ + sortFunction = function (a, b) { if (a.id < b.id) { return -1; } if (a.id > b.id) { return 1; } - // a must be equal to b + // a must be equal to b return 0; } - break; + break; case "area": - sortFunction = function(a, b){ + sortFunction = function (a, b) { return calcPolygonArea(b.path) - calcPolygonArea(a.path); } - break; + break; case "relevant": - sortFunction = function(a, b){ - if(a.name.toLowerCase().indexOf(filter) !== -1 && b.name.toLowerCase().indexOf(filter) !== -1){ + sortFunction = function (a, b) { + if (a.name.toLowerCase().indexOf(filter) !== -1 && b.name.toLowerCase().indexOf(filter) !== -1) { if (a.name.toLowerCase().indexOf(filter) < b.name.toLowerCase().indexOf(filter)) { return -1; } @@ -361,9 +361,9 @@ function buildObjectsList(filter = null, sort = null){ } else { return a.name.toLowerCase().localeCompare(b.name.toLowerCase()); } - } else if(a.name.toLowerCase().indexOf(filter) !== -1){ + } else if (a.name.toLowerCase().indexOf(filter) !== -1) { return -1; - } else if(b.name.toLowerCase().indexOf(filter) !== -1){ + } else if (b.name.toLowerCase().indexOf(filter) !== -1) { return 1; } else { if (a.description.toLowerCase().indexOf(filter) < b.description.toLowerCase().indexOf(filter)) { @@ -376,47 +376,47 @@ function buildObjectsList(filter = null, sort = null){ } } } - break; + break; } - if(sortFunction){ + if (sortFunction) { sortedAtlas.sort(sortFunction); } - for(var i = entriesOffset; i < entriesOffset+entriesLimit; i++){ + for (let i = entriesOffset; i < entriesOffset + entriesLimit; i++) { - if(i >= sortedAtlas.length){ + if (i >= sortedAtlas.length) { break; } // console.log(sortedAtlas[i]) - var element = createInfoBlock(sortedAtlas[i]); + const element = createInfoBlock(sortedAtlas[i]); element.entry = sortedAtlas[i]; - element.addEventListener("mouseenter", function(e){ - if(!fixed && !dragging){ + element.addEventListener("mouseenter", function (e) { + if (!fixed && !dragging) { objectsContainer.innerHTML = ""; - + previousZoomOrigin = [zoomOrigin[0], zoomOrigin[1]]; previousScaleZoomOrigin = [scaleZoomOrigin[0], scaleZoomOrigin[1]]; applyView(); - + zoomOrigin = [ - innerContainer.clientWidth/2 - this.entry.center[0]* zoom// + container.offsetLeft - ,innerContainer.clientHeight/2 - this.entry.center[1]* zoom// + container.offsetTop + innerContainer.clientWidth / 2 - this.entry.center[0] * zoom// + container.offsetLeft + , innerContainer.clientHeight / 2 - this.entry.center[1] * zoom// + container.offsetTop ] scaleZoomOrigin = [ - 2000/2 - this.entry.center[0] - ,2000/2 - this.entry.center[1] + 2000 / 2 - this.entry.center[0] + , 2000 / 2 - this.entry.center[1] ] //console.log(zoomOrigin); - + applyView(); hovered = [this.entry]; render(); @@ -426,14 +426,14 @@ function buildObjectsList(filter = null, sort = null){ }); - element.addEventListener("click", function(e){ + element.addEventListener("click", function (e) { toggleFixed(e); - if(fixed){ + if (fixed) { previousZoomOrigin = [zoomOrigin[0], zoomOrigin[1]]; previousScaleZoomOrigin = [scaleZoomOrigin[0], scaleZoomOrigin[1]]; applyView(); } - if(document.documentElement.clientWidth < 500){ + if (document.documentElement.clientWidth < 500) { objectsContainer.innerHTML = ""; entriesListShown = false; @@ -443,15 +443,15 @@ function buildObjectsList(filter = null, sort = null){ renderBackground(atlas); applyView(); updateHovering(e); - + zoomOrigin = [ - innerContainer.clientWidth/2 - this.entry.center[0]* zoom// + container.offsetLeft - ,innerContainer.clientHeight/2 - this.entry.center[1]* zoom// + container.offsetTop + innerContainer.clientWidth / 2 - this.entry.center[0] * zoom// + container.offsetLeft + , innerContainer.clientHeight / 2 - this.entry.center[1] * zoom// + container.offsetTop ] scaleZoomOrigin = [ - 2000/2 - this.entry.center[0] - ,2000/2 - this.entry.center[1] + 2000 / 2 - this.entry.center[0] + , 2000 / 2 - this.entry.center[1] ] previousZoomOrigin = [zoomOrigin[0], zoomOrigin[1]]; @@ -461,18 +461,18 @@ function buildObjectsList(filter = null, sort = null){ hovered = [this.entry]; hovered[0].element = this; - + applyView(); render(); updateLines(); - + } - + }); - element.addEventListener("mouseleave", function(e){ - if(!fixed && !dragging){ - zoomOrigin = [previousScaleZoomOrigin[0]*zoom, previousScaleZoomOrigin[1]*zoom]; + element.addEventListener("mouseleave", function (e) { + if (!fixed && !dragging) { + zoomOrigin = [previousScaleZoomOrigin[0] * zoom, previousScaleZoomOrigin[1] * zoom]; scaleZoomOrigin = [previousScaleZoomOrigin[0], previousScaleZoomOrigin[1]]; applyView(); hovered = []; @@ -487,17 +487,17 @@ function buildObjectsList(filter = null, sort = null){ entriesOffset += entriesLimit; - if(sortedAtlas.length > entriesOffset){ - moreEntriesButton.innerHTML = "Show "+Math.min(entriesLimit, sortedAtlas.length - entriesOffset)+" more"; + if (sortedAtlas.length > entriesOffset) { + moreEntriesButton.innerHTML = "Show " + Math.min(entriesLimit, sortedAtlas.length - entriesOffset) + " more"; entriesList.appendChild(moreEntriesButton); } } -function shuffle(){ +function shuffle() { //console.log("shuffled atlas"); - for (var i = sortedAtlas.length - 1; i > 0; i--) { - var j = Math.floor(Math.random() * (i + 1)); - var temp = sortedAtlas[i]; + for (let i = sortedAtlas.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + const temp = sortedAtlas[i]; sortedAtlas[i] = sortedAtlas[j]; sortedAtlas[j] = temp; } @@ -512,36 +512,36 @@ function resetEntriesList() { } -async function render(){ +async function render() { context.clearRect(0, 0, canvas.width, canvas.height); //canvas.width = 1000*zoom; //canvas.height = 1000*zoom; - + context.globalCompositeOperation = "source-over"; context.clearRect(0, 0, canvas.width, canvas.height); - if(hovered.length > 0){ + if (hovered.length > 0) { container.style.cursor = "pointer"; } else { container.style.cursor = "default"; } - for(var i = 0; i < hovered.length; i++){ + for (let i = 0; i < hovered.length; i++) { - var path = hovered[i].path; + const path = hovered[i].path; context.beginPath(); - if(path[0]){ + if (path[0]) { //context.moveTo(path[0][0]*zoom, path[0][1]*zoom); context.moveTo(path[0][0], path[0][1]); } - for(var p = 1; p < path.length; p++){ + 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]); } @@ -557,11 +557,11 @@ async function render(){ context.globalCompositeOperation = "source-out"; context.drawImage(backgroundCanvas, 0, 0); - if(hovered.length === 1 && hovered[0].path.length && hovered[0].overrideImage){ + if (hovered.length === 1 && hovered[0].path.length && hovered[0].overrideImage) { const undisputableHovered = hovered[0]; // Find the left-topmost point of all the paths const entryPosition = getPositionOfEntry(undisputableHovered); - if(entryPosition){ + if (entryPosition) { const [startX, startY] = entryPosition; const overrideImage = new Image(); const loadingPromise = new Promise((res, rej) => { @@ -569,29 +569,29 @@ async function render(){ overrideImage.onload = res; }); overrideImage.src = "imageOverrides/" + undisputableHovered.overrideImage; - try{ + try { await loadingPromise; context.globalCompositeOperation = "source-over"; context.drawImage(overrideImage, startX, startY); - }catch(ex){ + } catch (ex) { console.log("Cannot override image."); console.log(ex); } } } - for(var i = 0; i < hovered.length; i++){ + for (let i = 0; i < hovered.length; i++) { - var path = hovered[i].path; + const path = hovered[i].path; context.beginPath(); - if(path[0]){ + if (path[0]) { //context.moveTo(path[0][0]*zoom, path[0][1]*zoom); context.moveTo(path[0][0], path[0][1]); } - for(var p = 1; p < path.length; p++){ + 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]); } @@ -600,7 +600,7 @@ async function render(){ context.globalCompositeOperation = "source-over"; - var hoverStrokeStyle; + let hoverStrokeStyle; switch (hovered[i].diff) { case "add": hoverStrokeStyle = "rgba(0, 155, 0, 1)"; @@ -619,29 +619,29 @@ async function render(){ } -function updateHovering(e, tapped){ - - if(!dragging && (!fixed || tapped)){ - var 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 +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 ]; - var coords_p = document.getElementById("coords_p"); + const coords_p = document.getElementById("coords_p"); coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]); - if(pos[0] <= 2200 && pos[0] >= -100 && pos[0] <= 2200 && pos[0] >= -100){ - var newHovered = []; - for(var i = 0; i < atlas.length; i++){ - if(pointIsInPolygon(pos, atlas[i].path)){ + if (pos[0] <= 2200 && pos[0] >= -100 && pos[0] <= 2200 && pos[0] >= -100) { + const newHovered = []; + for (let i = 0; i < atlas.length; i++) { + if (pointIsInPolygon(pos, atlas[i].path)) { newHovered.push(atlas[i]); } } - var changed = false; + let changed = false; - if(hovered.length == newHovered.length){ - for(var i = 0; i < hovered.length; i++){ - if(hovered[i].id != newHovered[i].id){ + if (hovered.length == newHovered.length) { + for (let i = 0; i < hovered.length; i++) { + if (hovered[i].id != newHovered[i].id) { changed = true; break; } @@ -650,22 +650,22 @@ function updateHovering(e, tapped){ changed = true; } - if(changed){ - hovered = newHovered.sort(function(a, b){ + if (changed) { + hovered = newHovered.sort(function (a, b) { return calcPolygonArea(a.path) - calcPolygonArea(b.path); }); objectsContainer.innerHTML = ""; - for(var i in hovered){ - var element = createInfoBlock(hovered[i]); + for (const i in hovered) { + const element = createInfoBlock(hovered[i]); objectsContainer.appendChild(element); hovered[i].element = element; } - if(hovered.length > 0){ + if (hovered.length > 0) { closeObjectsListButton.className = ""; } else { closeObjectsListButton.className = "hidden"; @@ -680,22 +680,22 @@ function updateHovering(e, tapped){ window.addEventListener("hashchange", highlightEntryFromUrl); -function highlightEntryFromUrl(){ +function highlightEntryFromUrl() { - var objectsContainer = document.getElementById("objectsList"); + const objectsContainer = document.getElementById("objectsList"); - var id = window.location.hash.substring(1); //Remove hash prefix + const id = window.location.hash.substring(1); //Remove hash prefix - var entries = atlas.filter(function(e){ + const entries = atlas.filter(function (e) { return e.id === id; }); - if (entries.length === 1){ + if (entries.length === 1) { const entry = entries[0]; document.title = entry.name + " on the 2022 /r/place Atlas"; - - var infoElement = createInfoBlock(entry); + + const infoElement = createInfoBlock(entry); objectsContainer.innerHTML = ""; objectsContainer.appendChild(infoElement); @@ -705,19 +705,19 @@ function highlightEntryFromUrl(){ zoom = 4; renderBackground(atlas); applyView(); - + zoomOrigin = [ - innerContainer.clientWidth/2 - entry.center[0]* zoom// + container.offsetLeft - ,innerContainer.clientHeight/2 - entry.center[1]* zoom// + container.offsetTop + innerContainer.clientWidth / 2 - entry.center[0] * zoom// + container.offsetLeft + , innerContainer.clientHeight / 2 - entry.center[1] * zoom// + container.offsetTop ]; scaleZoomOrigin = [ - 2000/2 - entry.center[0]// + container.offsetLeft - ,2000/2 - entry.center[1]// + container.offsetTop + 2000 / 2 - entry.center[0]// + container.offsetLeft + , 2000 / 2 - entry.center[1]// + container.offsetTop ]; //console.log(zoomOrigin); - + applyView(); hovered = [entry]; render(); @@ -728,7 +728,7 @@ function highlightEntryFromUrl(){ } } -function initView(){ +function initView() { buildObjectsList(null, null); renderBackground(atlas); @@ -750,26 +750,26 @@ function initView(){ render(); updateLines(); - if(window.location.hash){ // both "/" and just "/#" will be an empty hash string + if (window.location.hash) { // both "/" and just "/#" will be an empty hash string highlightEntryFromUrl(); } } -function initExplore(){ +function initExplore() { window.updateHovering = updateHovering - window.render = function() {} + window.render = function () { } - function updateHovering(e, tapped){ - if(!dragging && (!fixed || tapped)){ - var 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 + 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 ]; - var coords_p = document.getElementById("coords_p"); + const coords_p = document.getElementById("coords_p"); coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]); - + } } @@ -780,9 +780,9 @@ function initExplore(){ } function initGlobal() { - container.addEventListener("mousemove", function(e){ - if(e.sourceCapabilities){ - if(!e.sourceCapabilities.firesTouchEvents){ + container.addEventListener("mousemove", function (e) { + if (e.sourceCapabilities) { + if (!e.sourceCapabilities.firesTouchEvents) { updateHovering(e); } } else { @@ -792,45 +792,45 @@ function initGlobal() { } function initViewGlobal() { - container.addEventListener("mousedown", function(e){ + container.addEventListener("mousedown", function (e) { lastPos = [ - e.clientX - ,e.clientY + e.clientX + , e.clientY ]; }); - - container.addEventListener("touchstart", function(e){ - if(e.touches.length == 1){ + + container.addEventListener("touchstart", function (e) { + if (e.touches.length == 1) { lastPos = [ - e.touches[0].clientX - ,e.touches[0].clientY + e.touches[0].clientX + , e.touches[0].clientY ]; } - },{passive: true} ); - - container.addEventListener("mouseup", function(e){ - if(Math.abs(lastPos[0] - e.clientX) + Math.abs(lastPos[1] - e.clientY) <= 4){ + }, { passive: true }); + + container.addEventListener("mouseup", function (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", function (e) { e.preventDefault() - + //console.log(e); //console.log(e.changedTouches[0].clientX); - if(e.changedTouches.length == 1){ + if (e.changedTouches.length == 1) { e = e.changedTouches[0]; //console.log(lastPos[0] - e.clientX); - if(Math.abs(lastPos[0] - e.clientX) + Math.abs(lastPos[1] - e.clientY) <= 4){ + if (Math.abs(lastPos[0] - e.clientX) + Math.abs(lastPos[1] - e.clientY) <= 4) { //console.log("Foo!!"); dragging = false; fixed = false; setTimeout( - function(){ + function () { updateHovering(e, true); } - , 10); + , 10); } } });