mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-09-27 12:39:18 +02:00
Fix no-var problems (ESLint), run formatter on JS
This commit is contained in:
parent
4be8a36839
commit
2e728ef20f
9 changed files with 920 additions and 920 deletions
|
@ -15,20 +15,20 @@
|
|||
|
||||
window.addEventListener("error", function (e) {
|
||||
console.log(e);
|
||||
var errorMessage = "<p class=\"error\">An error has occurred:</p>";
|
||||
let errorMessage = "<p class=\"error\">An error has occurred:</p>";
|
||||
errorMessage += "<p class=\"errorBody\">" + e.message + "</p>";
|
||||
errorMessage += "<p class=\"errorBody\">on line " + e.lineno + "</p>";
|
||||
errorMessage += "<p class=\"error\">If this keeps happening, feel free to tell us on <a href=\"https://discord.gg/pJkm23b2nA\">our Discord server</a>.</p>";
|
||||
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;
|
||||
}
|
300
web/_js/draw.js
300
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)
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
308
web/_js/main.js
308
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 = ''
|
||||
|
||||
}
|
||||
|
|
|
@ -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)");
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
158
web/_js/stats.js
158
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]);
|
||||
|
||||
|
||||
|
||||
|
|
402
web/_js/time.js
402
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)
|
||||
|
|
426
web/_js/view.js
426
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);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue